forked from TALL/check-work
commit
85dbb18bf4
69 changed files with 17214 additions and 0 deletions
@ -0,0 +1,12 @@ |
|||
{ |
|||
"presets": [ |
|||
["env", { |
|||
"modules": false, |
|||
"targets": { |
|||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"] |
|||
} |
|||
}], |
|||
"stage-2" |
|||
], |
|||
"plugins": ["transform-vue-jsx", "transform-runtime"] |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
root = true |
|||
|
|||
[*] |
|||
charset = utf-8 |
|||
indent_style = space |
|||
indent_size = 2 |
|||
end_of_line = lf |
|||
insert_final_newline = true |
|||
trim_trailing_whitespace = true |
|||
@ -0,0 +1,4 @@ |
|||
/build/ |
|||
/config/ |
|||
/dist/ |
|||
/*.js |
|||
@ -0,0 +1,29 @@ |
|||
// https://eslint.org/docs/user-guide/configuring
|
|||
|
|||
module.exports = { |
|||
root: true, |
|||
parserOptions: { |
|||
parser: 'babel-eslint' |
|||
}, |
|||
env: { |
|||
browser: true, |
|||
}, |
|||
extends: [ |
|||
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
|||
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
|||
'plugin:vue/essential', |
|||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
|||
'standard' |
|||
], |
|||
// required to lint *.vue files
|
|||
plugins: [ |
|||
'vue' |
|||
], |
|||
// add your custom rules here
|
|||
rules: { |
|||
// allow async-await
|
|||
'generator-star-spacing': 'off', |
|||
// allow debugger during development
|
|||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' |
|||
} |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
.DS_Store |
|||
node_modules/ |
|||
/dist/ |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
@ -0,0 +1,10 @@ |
|||
// https://github.com/michael-ciniawsky/postcss-load-config
|
|||
|
|||
module.exports = { |
|||
"plugins": { |
|||
"postcss-import": {}, |
|||
"postcss-url": {}, |
|||
// to edit target browsers: use "browserslist" field in package.json
|
|||
"autoprefixer": {} |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
# lvgu |
|||
|
|||
> A Vue.js project |
|||
|
|||
## Build Setup |
|||
|
|||
``` bash |
|||
# install dependencies |
|||
npm install |
|||
|
|||
# serve with hot reload at localhost:8080 |
|||
npm run dev |
|||
|
|||
# build for production with minification |
|||
npm run build |
|||
|
|||
# build for production and view the bundle analyzer report |
|||
npm run build --report |
|||
``` |
|||
|
|||
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). |
|||
@ -0,0 +1,41 @@ |
|||
'use strict' |
|||
require('./check-versions')() |
|||
|
|||
process.env.NODE_ENV = 'production' |
|||
|
|||
const ora = require('ora') |
|||
const rm = require('rimraf') |
|||
const path = require('path') |
|||
const chalk = require('chalk') |
|||
const webpack = require('webpack') |
|||
const config = require('../config') |
|||
const webpackConfig = require('./webpack.prod.conf') |
|||
|
|||
const spinner = ora('building for production...') |
|||
spinner.start() |
|||
|
|||
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { |
|||
if (err) throw err |
|||
webpack(webpackConfig, (err, stats) => { |
|||
spinner.stop() |
|||
if (err) throw err |
|||
process.stdout.write(stats.toString({ |
|||
colors: true, |
|||
modules: false, |
|||
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
|
|||
chunks: false, |
|||
chunkModules: false |
|||
}) + '\n\n') |
|||
|
|||
if (stats.hasErrors()) { |
|||
console.log(chalk.red(' Build failed with errors.\n')) |
|||
process.exit(1) |
|||
} |
|||
|
|||
console.log(chalk.cyan(' Build complete.\n')) |
|||
console.log(chalk.yellow( |
|||
' Tip: built files are meant to be served over an HTTP server.\n' + |
|||
' Opening index.html over file:// won\'t work.\n' |
|||
)) |
|||
}) |
|||
}) |
|||
@ -0,0 +1,54 @@ |
|||
'use strict' |
|||
const chalk = require('chalk') |
|||
const semver = require('semver') |
|||
const packageConfig = require('../package.json') |
|||
const shell = require('shelljs') |
|||
|
|||
function exec (cmd) { |
|||
return require('child_process').execSync(cmd).toString().trim() |
|||
} |
|||
|
|||
const versionRequirements = [ |
|||
{ |
|||
name: 'node', |
|||
currentVersion: semver.clean(process.version), |
|||
versionRequirement: packageConfig.engines.node |
|||
} |
|||
] |
|||
|
|||
if (shell.which('npm')) { |
|||
versionRequirements.push({ |
|||
name: 'npm', |
|||
currentVersion: exec('npm --version'), |
|||
versionRequirement: packageConfig.engines.npm |
|||
}) |
|||
} |
|||
|
|||
module.exports = function () { |
|||
const warnings = [] |
|||
|
|||
for (let i = 0; i < versionRequirements.length; i++) { |
|||
const mod = versionRequirements[i] |
|||
|
|||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { |
|||
warnings.push(mod.name + ': ' + |
|||
chalk.red(mod.currentVersion) + ' should be ' + |
|||
chalk.green(mod.versionRequirement) |
|||
) |
|||
} |
|||
} |
|||
|
|||
if (warnings.length) { |
|||
console.log('') |
|||
console.log(chalk.yellow('To use this template, you must update following to modules:')) |
|||
console.log() |
|||
|
|||
for (let i = 0; i < warnings.length; i++) { |
|||
const warning = warnings[i] |
|||
console.log(' ' + warning) |
|||
} |
|||
|
|||
console.log() |
|||
process.exit(1) |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +1,101 @@ |
|||
'use strict' |
|||
const path = require('path') |
|||
const config = require('../config') |
|||
const ExtractTextPlugin = require('extract-text-webpack-plugin') |
|||
const packageConfig = require('../package.json') |
|||
|
|||
exports.assetsPath = function (_path) { |
|||
const assetsSubDirectory = process.env.NODE_ENV === 'production' |
|||
? config.build.assetsSubDirectory |
|||
: config.dev.assetsSubDirectory |
|||
|
|||
return path.posix.join(assetsSubDirectory, _path) |
|||
} |
|||
|
|||
exports.cssLoaders = function (options) { |
|||
options = options || {} |
|||
|
|||
const cssLoader = { |
|||
loader: 'css-loader', |
|||
options: { |
|||
sourceMap: options.sourceMap |
|||
} |
|||
} |
|||
|
|||
const postcssLoader = { |
|||
loader: 'postcss-loader', |
|||
options: { |
|||
sourceMap: options.sourceMap |
|||
} |
|||
} |
|||
|
|||
// generate loader string to be used with extract text plugin
|
|||
function generateLoaders (loader, loaderOptions) { |
|||
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] |
|||
|
|||
if (loader) { |
|||
loaders.push({ |
|||
loader: loader + '-loader', |
|||
options: Object.assign({}, loaderOptions, { |
|||
sourceMap: options.sourceMap |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
// Extract CSS when that option is specified
|
|||
// (which is the case during production build)
|
|||
if (options.extract) { |
|||
return ExtractTextPlugin.extract({ |
|||
use: loaders, |
|||
fallback: 'vue-style-loader' |
|||
}) |
|||
} else { |
|||
return ['vue-style-loader'].concat(loaders) |
|||
} |
|||
} |
|||
|
|||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
|||
return { |
|||
css: generateLoaders(), |
|||
postcss: generateLoaders(), |
|||
less: generateLoaders('less'), |
|||
sass: generateLoaders('sass', { indentedSyntax: true }), |
|||
scss: generateLoaders('sass'), |
|||
stylus: generateLoaders('stylus'), |
|||
styl: generateLoaders('stylus') |
|||
} |
|||
} |
|||
|
|||
// Generate loaders for standalone style files (outside of .vue)
|
|||
exports.styleLoaders = function (options) { |
|||
const output = [] |
|||
const loaders = exports.cssLoaders(options) |
|||
|
|||
for (const extension in loaders) { |
|||
const loader = loaders[extension] |
|||
output.push({ |
|||
test: new RegExp('\\.' + extension + '$'), |
|||
use: loader |
|||
}) |
|||
} |
|||
|
|||
return output |
|||
} |
|||
|
|||
exports.createNotifierCallback = () => { |
|||
const notifier = require('node-notifier') |
|||
|
|||
return (severity, errors) => { |
|||
if (severity !== 'error') return |
|||
|
|||
const error = errors[0] |
|||
const filename = error.file && error.file.split('!').pop() |
|||
|
|||
notifier.notify({ |
|||
title: packageConfig.name, |
|||
message: severity + ': ' + error.name, |
|||
subtitle: filename || '', |
|||
icon: path.join(__dirname, 'logo.png') |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
'use strict' |
|||
const utils = require('./utils') |
|||
const config = require('../config') |
|||
const isProduction = process.env.NODE_ENV === 'production' |
|||
const sourceMapEnabled = isProduction |
|||
? config.build.productionSourceMap |
|||
: config.dev.cssSourceMap |
|||
|
|||
module.exports = { |
|||
loaders: utils.cssLoaders({ |
|||
sourceMap: sourceMapEnabled, |
|||
extract: isProduction |
|||
}), |
|||
cssSourceMap: sourceMapEnabled, |
|||
cacheBusting: config.dev.cacheBusting, |
|||
transformToRequire: { |
|||
video: ['src', 'poster'], |
|||
source: 'src', |
|||
img: 'src', |
|||
image: 'xlink:href' |
|||
} |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
'use strict' |
|||
const path = require('path') |
|||
const utils = require('./utils') |
|||
const config = require('../config') |
|||
const vueLoaderConfig = require('./vue-loader.conf') |
|||
|
|||
function resolve (dir) { |
|||
return path.join(__dirname, '..', dir) |
|||
} |
|||
|
|||
const createLintingRule = () => ({ |
|||
test: /\.(js|vue)$/, |
|||
loader: 'eslint-loader', |
|||
enforce: 'pre', |
|||
include: [resolve('src'), resolve('test')], |
|||
options: { |
|||
formatter: require('eslint-friendly-formatter'), |
|||
emitWarning: !config.dev.showEslintErrorsInOverlay |
|||
} |
|||
}) |
|||
|
|||
module.exports = { |
|||
context: path.resolve(__dirname, '../'), |
|||
entry: { |
|||
app: './src/main.js' |
|||
}, |
|||
output: { |
|||
path: config.build.assetsRoot, |
|||
filename: '[name].js', |
|||
publicPath: process.env.NODE_ENV === 'production' |
|||
? config.build.assetsPublicPath |
|||
: config.dev.assetsPublicPath |
|||
}, |
|||
resolve: { |
|||
extensions: ['.js', '.vue', '.json'], |
|||
alias: { |
|||
'vue$': 'vue/dist/vue.esm.js', |
|||
'@': resolve('src'), |
|||
} |
|||
}, |
|||
module: { |
|||
rules: [ |
|||
...(config.dev.useEslint ? [createLintingRule()] : []), |
|||
{ |
|||
test: /\.vue$/, |
|||
loader: 'vue-loader', |
|||
options: vueLoaderConfig |
|||
}, |
|||
{ |
|||
test: /\.js$/, |
|||
loader: 'babel-loader', |
|||
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] |
|||
}, |
|||
{ |
|||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, |
|||
loader: 'url-loader', |
|||
options: { |
|||
limit: 10000, |
|||
name: utils.assetsPath('img/[name].[hash:7].[ext]') |
|||
} |
|||
}, |
|||
{ |
|||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, |
|||
loader: 'url-loader', |
|||
options: { |
|||
limit: 10000, |
|||
name: utils.assetsPath('media/[name].[hash:7].[ext]') |
|||
} |
|||
}, |
|||
{ |
|||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, |
|||
loader: 'url-loader', |
|||
options: { |
|||
limit: 10000, |
|||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
node: { |
|||
// prevent webpack from injecting useless setImmediate polyfill because Vue
|
|||
// source contains it (although only uses it if it's native).
|
|||
setImmediate: false, |
|||
// prevent webpack from injecting mocks to Node native modules
|
|||
// that does not make sense for the client
|
|||
dgram: 'empty', |
|||
fs: 'empty', |
|||
net: 'empty', |
|||
tls: 'empty', |
|||
child_process: 'empty' |
|||
} |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
'use strict' |
|||
const utils = require('./utils') |
|||
const webpack = require('webpack') |
|||
const config = require('../config') |
|||
const merge = require('webpack-merge') |
|||
const path = require('path') |
|||
const baseWebpackConfig = require('./webpack.base.conf') |
|||
const CopyWebpackPlugin = require('copy-webpack-plugin') |
|||
const HtmlWebpackPlugin = require('html-webpack-plugin') |
|||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') |
|||
const portfinder = require('portfinder') |
|||
|
|||
const HOST = process.env.HOST |
|||
const PORT = process.env.PORT && Number(process.env.PORT) |
|||
|
|||
const devWebpackConfig = merge(baseWebpackConfig, { |
|||
module: { |
|||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) |
|||
}, |
|||
// cheap-module-eval-source-map is faster for development
|
|||
devtool: config.dev.devtool, |
|||
|
|||
// these devServer options should be customized in /config/index.js
|
|||
devServer: { |
|||
clientLogLevel: 'warning', |
|||
historyApiFallback: { |
|||
rewrites: [ |
|||
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, |
|||
], |
|||
}, |
|||
hot: true, |
|||
contentBase: false, // since we use CopyWebpackPlugin.
|
|||
compress: true, |
|||
host: HOST || config.dev.host, |
|||
port: PORT || config.dev.port, |
|||
open: config.dev.autoOpenBrowser, |
|||
overlay: config.dev.errorOverlay |
|||
? { warnings: false, errors: true } |
|||
: false, |
|||
publicPath: config.dev.assetsPublicPath, |
|||
proxy: config.dev.proxyTable, |
|||
quiet: true, // necessary for FriendlyErrorsPlugin
|
|||
watchOptions: { |
|||
poll: config.dev.poll, |
|||
} |
|||
}, |
|||
plugins: [ |
|||
new webpack.DefinePlugin({ |
|||
'process.env': require('../config/dev.env') |
|||
}), |
|||
new webpack.HotModuleReplacementPlugin(), |
|||
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
|
|||
new webpack.NoEmitOnErrorsPlugin(), |
|||
// https://github.com/ampedandwired/html-webpack-plugin
|
|||
new HtmlWebpackPlugin({ |
|||
filename: 'index.html', |
|||
template: 'index.html', |
|||
inject: true |
|||
}), |
|||
// copy custom static assets
|
|||
new CopyWebpackPlugin([ |
|||
{ |
|||
from: path.resolve(__dirname, '../static'), |
|||
to: config.dev.assetsSubDirectory, |
|||
ignore: ['.*'] |
|||
} |
|||
]) |
|||
] |
|||
}) |
|||
|
|||
module.exports = new Promise((resolve, reject) => { |
|||
portfinder.basePort = process.env.PORT || config.dev.port |
|||
portfinder.getPort((err, port) => { |
|||
if (err) { |
|||
reject(err) |
|||
} else { |
|||
// publish the new Port, necessary for e2e tests
|
|||
process.env.PORT = port |
|||
// add port to devServer config
|
|||
devWebpackConfig.devServer.port = port |
|||
|
|||
// Add FriendlyErrorsPlugin
|
|||
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ |
|||
compilationSuccessInfo: { |
|||
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], |
|||
}, |
|||
onErrors: config.dev.notifyOnErrors |
|||
? utils.createNotifierCallback() |
|||
: undefined |
|||
})) |
|||
|
|||
resolve(devWebpackConfig) |
|||
} |
|||
}) |
|||
}) |
|||
@ -0,0 +1,145 @@ |
|||
'use strict' |
|||
const path = require('path') |
|||
const utils = require('./utils') |
|||
const webpack = require('webpack') |
|||
const config = require('../config') |
|||
const merge = require('webpack-merge') |
|||
const baseWebpackConfig = require('./webpack.base.conf') |
|||
const CopyWebpackPlugin = require('copy-webpack-plugin') |
|||
const HtmlWebpackPlugin = require('html-webpack-plugin') |
|||
const ExtractTextPlugin = require('extract-text-webpack-plugin') |
|||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') |
|||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') |
|||
|
|||
const env = require('../config/prod.env') |
|||
|
|||
const webpackConfig = merge(baseWebpackConfig, { |
|||
module: { |
|||
rules: utils.styleLoaders({ |
|||
sourceMap: config.build.productionSourceMap, |
|||
extract: true, |
|||
usePostCSS: true |
|||
}) |
|||
}, |
|||
devtool: config.build.productionSourceMap ? config.build.devtool : false, |
|||
output: { |
|||
path: config.build.assetsRoot, |
|||
filename: utils.assetsPath('js/[name].[chunkhash].js'), |
|||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') |
|||
}, |
|||
plugins: [ |
|||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
|||
new webpack.DefinePlugin({ |
|||
'process.env': env |
|||
}), |
|||
new UglifyJsPlugin({ |
|||
uglifyOptions: { |
|||
compress: { |
|||
warnings: false |
|||
} |
|||
}, |
|||
sourceMap: config.build.productionSourceMap, |
|||
parallel: true |
|||
}), |
|||
// extract css into its own file
|
|||
new ExtractTextPlugin({ |
|||
filename: utils.assetsPath('css/[name].[contenthash].css'), |
|||
// Setting the following option to `false` will not extract CSS from codesplit chunks.
|
|||
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
|
|||
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
|
|||
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
|
|||
allChunks: true, |
|||
}), |
|||
// Compress extracted CSS. We are using this plugin so that possible
|
|||
// duplicated CSS from different components can be deduped.
|
|||
new OptimizeCSSPlugin({ |
|||
cssProcessorOptions: config.build.productionSourceMap |
|||
? { safe: true, map: { inline: false } } |
|||
: { safe: true } |
|||
}), |
|||
// generate dist index.html with correct asset hash for caching.
|
|||
// you can customize output by editing /index.html
|
|||
// see https://github.com/ampedandwired/html-webpack-plugin
|
|||
new HtmlWebpackPlugin({ |
|||
filename: config.build.index, |
|||
template: 'index.html', |
|||
inject: true, |
|||
minify: { |
|||
removeComments: true, |
|||
collapseWhitespace: true, |
|||
removeAttributeQuotes: true |
|||
// more options:
|
|||
// https://github.com/kangax/html-minifier#options-quick-reference
|
|||
}, |
|||
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
|||
chunksSortMode: 'dependency' |
|||
}), |
|||
// keep module.id stable when vendor modules does not change
|
|||
new webpack.HashedModuleIdsPlugin(), |
|||
// enable scope hoisting
|
|||
new webpack.optimize.ModuleConcatenationPlugin(), |
|||
// split vendor js into its own file
|
|||
new webpack.optimize.CommonsChunkPlugin({ |
|||
name: 'vendor', |
|||
minChunks (module) { |
|||
// any required modules inside node_modules are extracted to vendor
|
|||
return ( |
|||
module.resource && |
|||
/\.js$/.test(module.resource) && |
|||
module.resource.indexOf( |
|||
path.join(__dirname, '../node_modules') |
|||
) === 0 |
|||
) |
|||
} |
|||
}), |
|||
// extract webpack runtime and module manifest to its own file in order to
|
|||
// prevent vendor hash from being updated whenever app bundle is updated
|
|||
new webpack.optimize.CommonsChunkPlugin({ |
|||
name: 'manifest', |
|||
minChunks: Infinity |
|||
}), |
|||
// This instance extracts shared chunks from code splitted chunks and bundles them
|
|||
// in a separate chunk, similar to the vendor chunk
|
|||
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
|
|||
new webpack.optimize.CommonsChunkPlugin({ |
|||
name: 'app', |
|||
async: 'vendor-async', |
|||
children: true, |
|||
minChunks: 3 |
|||
}), |
|||
|
|||
// copy custom static assets
|
|||
new CopyWebpackPlugin([ |
|||
{ |
|||
from: path.resolve(__dirname, '../static'), |
|||
to: config.build.assetsSubDirectory, |
|||
ignore: ['.*'] |
|||
} |
|||
]) |
|||
] |
|||
}) |
|||
|
|||
if (config.build.productionGzip) { |
|||
const CompressionWebpackPlugin = require('compression-webpack-plugin') |
|||
|
|||
webpackConfig.plugins.push( |
|||
new CompressionWebpackPlugin({ |
|||
asset: '[path].gz[query]', |
|||
algorithm: 'gzip', |
|||
test: new RegExp( |
|||
'\\.(' + |
|||
config.build.productionGzipExtensions.join('|') + |
|||
')$' |
|||
), |
|||
threshold: 10240, |
|||
minRatio: 0.8 |
|||
}) |
|||
) |
|||
} |
|||
|
|||
if (config.build.bundleAnalyzerReport) { |
|||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin |
|||
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) |
|||
} |
|||
|
|||
module.exports = webpackConfig |
|||
@ -0,0 +1,7 @@ |
|||
'use strict' |
|||
const merge = require('webpack-merge') |
|||
const prodEnv = require('./prod.env') |
|||
|
|||
module.exports = merge(prodEnv, { |
|||
NODE_ENV: '"development"' |
|||
}) |
|||
@ -0,0 +1,45 @@ |
|||
'use strict' |
|||
|
|||
const path = require('path') |
|||
|
|||
module.exports = { |
|||
dev: { |
|||
assetsSubDirectory: 'static', |
|||
assetsPublicPath: '/', |
|||
// 配置与后台接口问题
|
|||
proxyTable: { |
|||
'/api': { // 配置后台代理
|
|||
target: 'https://www.sxwikionline.com/gateway', // 后台接口地址
|
|||
ws: true, |
|||
secure: false, |
|||
pathRewrite: { // 路径简写
|
|||
'^/api': '' |
|||
}, |
|||
changeOrigin: true // 是否跨域
|
|||
} |
|||
}, |
|||
host: 'localhost', |
|||
port: 8080, |
|||
autoOpenBrowser: false, |
|||
errorOverlay: true, |
|||
notifyOnErrors: true, |
|||
poll: false, |
|||
useEslint: true, |
|||
showEslintErrorsInOverlay: false, |
|||
devtool: 'cheap-module-eval-source-map', |
|||
cacheBusting: true, |
|||
cssSourceMap: true |
|||
}, |
|||
|
|||
build: { |
|||
index: path.resolve(__dirname, '../dist/index.html'), |
|||
assetsRoot: path.resolve(__dirname, '../dist'), |
|||
assetsSubDirectory: 'static', |
|||
assetsPublicPath: '/', |
|||
productionSourceMap: true, |
|||
devtool: '#source-map', |
|||
productionGzip: false, |
|||
productionGzipExtensions: ['js', 'css'], |
|||
bundleAnalyzerReport: process.env.npm_config_report |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
'use strict' |
|||
module.exports = { |
|||
NODE_ENV: '"production"' |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="./static/logo.ico" type="image/x-icon"> |
|||
<title>山西绿谷生物科技有限公司</title> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<!-- built files will be auto injected --> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because it is too large
@ -0,0 +1,84 @@ |
|||
{ |
|||
"name": "lvgu", |
|||
"version": "1.0.0", |
|||
"description": "A Vue.js project", |
|||
"author": "zhangbin", |
|||
"private": true, |
|||
"scripts": { |
|||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", |
|||
"start": "npm run dev", |
|||
"lint": "eslint --ext .js,.vue src", |
|||
"build": "node build/build.js" |
|||
}, |
|||
"dependencies": { |
|||
"axios": "^0.20.0", |
|||
"babel-polyfill": "^6.26.0", |
|||
"element-ui": "^2.13.2", |
|||
"style-loader": "^2.0.0", |
|||
"vue": "^2.5.2", |
|||
"vue-router": "^3.0.1", |
|||
"vuex": "^3.5.1" |
|||
}, |
|||
"devDependencies": { |
|||
"autoprefixer": "^7.1.2", |
|||
"babel-core": "^6.22.1", |
|||
"babel-eslint": "^8.2.1", |
|||
"babel-helper-vue-jsx-merge-props": "^2.0.3", |
|||
"babel-loader": "^7.1.1", |
|||
"babel-plugin-syntax-jsx": "^6.18.0", |
|||
"babel-plugin-transform-runtime": "^6.22.0", |
|||
"babel-plugin-transform-vue-jsx": "^3.5.0", |
|||
"babel-preset-env": "^1.3.2", |
|||
"babel-preset-stage-2": "^6.22.0", |
|||
"chalk": "^2.0.1", |
|||
"copy-webpack-plugin": "^4.0.1", |
|||
"css-loader": "^0.28.0", |
|||
"eslint": "^4.15.0", |
|||
"eslint-config-standard": "^10.2.1", |
|||
"eslint-friendly-formatter": "^3.0.0", |
|||
"eslint-loader": "^1.7.1", |
|||
"eslint-plugin-import": "^2.7.0", |
|||
"eslint-plugin-node": "^5.2.0", |
|||
"eslint-plugin-promise": "^3.4.0", |
|||
"eslint-plugin-standard": "^3.0.1", |
|||
"eslint-plugin-vue": "^4.0.0", |
|||
"extract-text-webpack-plugin": "^3.0.0", |
|||
"file-loader": "^1.1.4", |
|||
"friendly-errors-webpack-plugin": "^1.6.1", |
|||
"html-webpack-plugin": "^2.30.1", |
|||
"less": "^3.12.2", |
|||
"less-loader": "^7.0.2", |
|||
"node-notifier": "^5.1.2", |
|||
"node-sass": "^4.14.1", |
|||
"optimize-css-assets-webpack-plugin": "^3.2.0", |
|||
"ora": "^1.2.0", |
|||
"portfinder": "^1.0.13", |
|||
"postcss-import": "^11.0.0", |
|||
"postcss-loader": "^2.0.8", |
|||
"postcss-url": "^7.2.1", |
|||
"rimraf": "^2.6.0", |
|||
"sass-loader": "^7.3.1", |
|||
"scss": "^0.2.4", |
|||
"scss-loader": "^0.0.1", |
|||
"semver": "^5.3.0", |
|||
"shelljs": "^0.7.6", |
|||
"uglifyjs-webpack-plugin": "^1.1.1", |
|||
"url-loader": "^0.5.8", |
|||
"vue-loader": "^13.3.0", |
|||
"vue-style-loader": "^3.0.1", |
|||
"vue-template-compiler": "^2.5.2", |
|||
"webpack": "^3.6.0", |
|||
"webpack-bundle-analyzer": "^2.9.0", |
|||
"webpack-dev-server": "^2.9.1", |
|||
"webpack-merge": "^4.1.0" |
|||
}, |
|||
"engines": { |
|||
"node": ">= 6.0.0", |
|||
"npm": ">= 3.0.0" |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not ie <= 8" |
|||
] |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<Navbar /> |
|||
<router-view /> |
|||
<Footer /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Navbar from '@/components/Navbar' |
|||
import Footer from '@/components/Footer' |
|||
import { debug } from '@/api/getData.js' |
|||
export default { |
|||
components: { Navbar, Footer }, |
|||
data () { |
|||
return { |
|||
screenWidth: 0 |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
screenWidth (val) { |
|||
// 页面开始加载时修改font-size |
|||
var html = document.getElementsByTagName('html')[0] |
|||
// var oWidth = document.body.clientWidth || document.documentElement.clientWidth |
|||
// 这里的750是指设计图的大小,自己根据实际情况改变 |
|||
html.style.fontSize = val / 100 + 'px' |
|||
console.log('rem:', html.style.fontSize) |
|||
debug().then(res => { |
|||
console.log(res) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
mounted: function () { |
|||
window.onresize = () => { |
|||
return (() => { |
|||
this.screenWidth = document.body.clientWidth |
|||
})() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body { |
|||
min-height: 100%; |
|||
padding-top: 14vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
import axios from 'axios' |
|||
import store from '@/store' |
|||
import { Message } from 'element-ui' |
|||
let router = import('@/router') |
|||
|
|||
// axios.defaults.baseURL = '/'
|
|||
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' |
|||
// axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
|
|||
// axios.defaults.headers['Cache-Control'] = 'no-cache'
|
|||
// axios.defaults.headers['pragma'] = 'no-cache'
|
|||
|
|||
let source = axios.CancelToken.source() |
|||
|
|||
// 请求添加token
|
|||
axios.interceptors.request.use(request => { |
|||
request.headers['Authorization'] = store.state.loginInfo ? 'Bearer ' + store.state.loginInfo.token : '' // 已将userId保存在store中
|
|||
return request |
|||
}) |
|||
|
|||
// 切换页面取消请求
|
|||
axios.interceptors.request.use(request => { |
|||
request.cancelToken = source.token |
|||
return request |
|||
}) |
|||
router.then(lib => { |
|||
lib.default.beforeEach((to, from, next) => { |
|||
source.cancel() |
|||
source = axios.CancelToken.source() |
|||
next() |
|||
}) |
|||
}) |
|||
|
|||
// 登录过期跳转
|
|||
axios.interceptors.response.use(response => { |
|||
let data = response.data |
|||
if ( |
|||
[10002].includes(data.ret) |
|||
) { |
|||
router.then(lib => lib.default.push({ name: 'login' })) // 跳转到登录页面
|
|||
Message.warning(data.msg) |
|||
} |
|||
return response |
|||
}) |
|||
|
|||
// 返回值解构
|
|||
axios.interceptors.response.use(response => { |
|||
let data = response.data |
|||
let isJson = (response.headers['content-type'] || '').includes('json') |
|||
if (isJson) { |
|||
if (data.code === 200) { |
|||
return Promise.resolve({ |
|||
data: data.data, |
|||
msg: data.msg, |
|||
code: data.code |
|||
}) |
|||
} |
|||
return Promise.reject( |
|||
data.msg || '网络错误' |
|||
) |
|||
} else { |
|||
return data |
|||
} |
|||
}, err => { |
|||
let isCancel = axios.isCancel(err) |
|||
if (isCancel) { |
|||
return new Promise(() => { }) |
|||
} |
|||
return Promise.reject( |
|||
(err.response.data && err.response.data.msg) || '网络错误' |
|||
) |
|||
}) |
|||
|
|||
export function post (url, data, otherConfig) { |
|||
return axios.post(url, data, otherConfig) |
|||
} |
|||
|
|||
export function get (url, data, otherConfig) { |
|||
return axios.get(url, { params: data, ...otherConfig }) |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
|
|||
import { get, post } from '@/api/axios' |
|||
|
|||
export function getConfig () { |
|||
return get('static/config.json', null, { baseURL: './' }) |
|||
} |
|||
|
|||
// get接口例子
|
|||
export function debug (params) { |
|||
return get('api/tall/v1.0/debug', params) |
|||
} |
|||
|
|||
// post接口例子
|
|||
export function switchLabel (params) { |
|||
return post('/goods/switchLabel', params) |
|||
} |
|||
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,29 @@ |
|||
@font-face {font-family: "iconfont"; |
|||
src: url('iconfont.eot?t=1602646174342'); /* IE9 */ |
|||
src: url('iconfont.eot?t=1602646174342#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
|||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANMAAsAAAAAB0QAAAL/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqBcIF6ATYCJAMQCwoABCAFhG0HXht6BsiemjzZ0FgesPBYUCxGQETxwP/9qPvix1RSRGoUzxlKyl1Ksl1b8ARdXpCmCoF/79zXdLMMNkuOCF1x0uZT/kvT5SNWxBZQWGK7p1iSvFNndvtnC6vu5LimSUVFjurcEiDA+OBY6qdFgeQBvUtWUiTgCz5gF+ZGtoHMfcvwWpdWB32bgFYjqmhHI1NLkCrDRQHhAXdNSM35ZVlO1YKyZmdGeEbVcccPwNPw98N/2CgVoiIBV57cH3ag7xd/ZaXVHDR8BMF8Vsj7SFgCMuGqNn6JCDKVaF2RaAUoZUH8xWJZTcOcvFDPPhM14qh/XiiBxe1gCxKJX5oLIr9k6hRZILz5hgxqb1OwDTyBuCGfCqJY9cxMmz0u60XYOn2e2vu9lYil/5fvp0W/ePu6VSBnrloj3EjcJjm+FjldPZH2oRJPq/rQ21sNXUr+8K/h2Hjiva/f7xLm+fGdvAik39JTps+0qJfvJK78V1fI23fkebriS69Q8rt3hAMV0BwY03Rd8zJHdWMMxsA6bVQb0/WxFeOn29LyPeBE4iPcFV/HJ6B5nt6RYwDSacLez/8bb4rXHuk5XX9TMwTw5cHZW6G/eZ71T9QisuBXC3r2ZUuEhpwNscu3ndn46GhEKwvRALp7fZlDPfAmyaA2kEJUGYakNoXM2CUotNmCUm0XWi0a3d+mj0SEbGDBMQJBt8cQdXoLSbePyIz9DIVBf6DUHYFWp6HgxDYz8fRBiaZCh1pblNsixrhJpUelC+gGEVNmRSFtBaXPQ7S+pq6YGsUYyjnW+Otug1KMMimidITch5GIoHEpQmirGk+peEdtLav7phpbRCHdIQmZFOSgLFsozibEMH+0kl76+QXIFYgwyZamJvsKJPn4+FS9GnU9kKPyWK+me3nEt87VQFEYipGEKGqEWFGExQUqXj8tBNmUGt6IaFyHWjqM9ZXXrK+MfkCe3AZ+cQ6FlUJFx62H61LEqiV3PVWoAoubYtvj24GICsuMVdc1Zj3NJD3wUcbMKAIAAA==') format('woff2'), |
|||
url('iconfont.woff?t=1602646174342') format('woff'), |
|||
url('iconfont.ttf?t=1602646174342') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
|||
url('iconfont.svg?t=1602646174342#iconfont') format('svg'); /* iOS 4.1- */ |
|||
} |
|||
|
|||
.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-chevron-right:before { |
|||
content: "\e60d"; |
|||
} |
|||
|
|||
.icon-tubiaozhizuomoban-03:before { |
|||
content: "\e601"; |
|||
} |
|||
|
|||
.icon-icon_username:before { |
|||
content: "\e602"; |
|||
} |
|||
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 21 KiB |
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div> |
|||
交流社区组件 |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Community', |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang=""> |
|||
|
|||
</style> |
|||
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<div> |
|||
<div class="box" @click="dialogFormVisible=true"> |
|||
提交<br/>需求 |
|||
<div class="remind">1</div> |
|||
</div> |
|||
<el-dialog title="需求列表" :visible.sync="dialogFormVisible" style="font-weight: bold;"> |
|||
<div v-for="(item,index) in datalist" :key="index" class="data-box"> |
|||
<p class="data-title">{{ item.title }}</p> |
|||
<div v-for="(a,b) in item.content" :key="b" class="data-content">{{ a }}</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="dialogFormVisible=false"> |
|||
取消 |
|||
</el-button> |
|||
<el-button type="success" @click="jumpDemand"> |
|||
提交需求 |
|||
</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Demandbox', |
|||
data () { |
|||
return { |
|||
dialogFormVisible: false, |
|||
listLoading: false, |
|||
datalist: [{ |
|||
title: '服务需求', |
|||
content: ['一个服务', '两个服务', '三个服务'] |
|||
}, { |
|||
title: '团队需求', |
|||
content: ['一个团队', '两个团队', '三个团队'] |
|||
}, { |
|||
title: '设备需求', |
|||
content: ['一个设备', '两个设备', '三个设备'] |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
jumpDemand () { |
|||
this.$router.push('/Demand') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.box { |
|||
position: fixed; |
|||
height: 5.5rem; |
|||
width: 5.5rem; |
|||
background: #82DCE5; |
|||
font-size: 1.4rem; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
bottom: 20vh; |
|||
right: 18vw; |
|||
z-index: 100; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
cursor: pointer; |
|||
box-shadow: 4px 4px 5px #707070; |
|||
} |
|||
.box:hover { |
|||
animation: boxhover 5s; |
|||
-moz-animation: boxhover 5s; /* Firefox */ |
|||
-webkit-animation: boxhover 5s; /* Safari 和 Chrome */ |
|||
-o-animation: boxhover 5s; |
|||
} |
|||
@keyframes boxhover { |
|||
from {background: #82DCE5;} |
|||
to {background: yellow;} |
|||
} |
|||
.remind { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: absolute; |
|||
font-size: 0.8rem; |
|||
background: #FBBC73; |
|||
height: 30%; |
|||
width: 30%; |
|||
top: 0; |
|||
right: 0; |
|||
border-radius: 50%; |
|||
} |
|||
.data-title { |
|||
color: #707070; |
|||
font-size: 0.9rem; |
|||
font-weight: bold; |
|||
border-bottom: 2px solid #00B7CB; |
|||
} |
|||
.data-box { |
|||
margin-bottom: 20px; |
|||
overflow: hidden; |
|||
} |
|||
.data-content { |
|||
height: 3rem; |
|||
width: 29%; |
|||
text-align: center; |
|||
line-height: 3rem; |
|||
border-radius: 5px; |
|||
box-shadow: 2px 2px 2px #707070; |
|||
border: 2px solid #909090; |
|||
margin: 5px 2% 2px 2%; |
|||
float: left; |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,140 @@ |
|||
<template> |
|||
<div class="footer"> |
|||
<div class="footer-top"> |
|||
<div class="footer-content" v-for="(item,index) in bottomContent" :key="index"> |
|||
<p class="content-title">{{ item.title }}</p> |
|||
<ul> |
|||
<li class="content-li" v-for="(x,y) in item.children" :key="y">{{ x.content }}</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="footer-center"> |
|||
<p class="content-title">友情链接</p> |
|||
<ul> |
|||
<li>科技部</li> |
|||
<li>发改部</li> |
|||
<li>工信部</li> |
|||
<li>山西省综改区</li> |
|||
<li>山西省科技厅</li> |
|||
<li>山西省工信厅</li> |
|||
<li>山西省发改委</li> |
|||
</ul> |
|||
</div> |
|||
<div class="footer-img"> |
|||
<img :src="erweimaImg" alt=""> |
|||
</div> |
|||
<div class="footer-bottom"> |
|||
<span v-for="(item,index) in bottomList" :key="index">{{ item }}</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Footer', |
|||
data () { |
|||
return { |
|||
bottomList: ['联系绿谷', '隐私跳跃', '使用条款', '信息无障碍选项', 'Cookie 首选项'], |
|||
bottomContent: [ |
|||
{ |
|||
title: '发现', |
|||
children: [{content: '资讯'}, {content: '研发'}, {content: '服务'}, {content: '行业'}, {content: '成功案例'}, {content: '融资'}] |
|||
}, { |
|||
title: '关于绿谷', |
|||
children: [{content: '公告'}, {content: '活动'}, {content: '投资者'}, {content: '社会责任'}, {content: '政策支持'}, {content: '工作机会'}] |
|||
}, { |
|||
title: '联系我们', |
|||
children: [{content: '在线资讯'}, {content: '众创空间'}, {content: '孵化器'}, {content: '实体空间'}, {content: '虚拟空间'}, {content: '支持'}] |
|||
} |
|||
], |
|||
erweimaImg: require('@/assets/erweima.png') |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.footer { |
|||
height: 25.5rem; |
|||
width: 100%; |
|||
position: relative; |
|||
background: #E2E6EB; |
|||
} |
|||
.footer-top { |
|||
width: 60%; |
|||
margin: 0 auto; |
|||
height: 70%; |
|||
display: flex; |
|||
padding-top: 3.5rem; |
|||
box-sizing: border-box; |
|||
} |
|||
.footer-bottom { |
|||
width: 60%; |
|||
margin: 0 auto; |
|||
height: 12%; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.footer-bottom > span { |
|||
color: #707070; |
|||
font-size: 0.85rem; |
|||
font-weight: 400; |
|||
margin-right: 1rem; |
|||
cursor: pointer; |
|||
} |
|||
.footer-content { |
|||
flex: 1; |
|||
height: 70%; |
|||
} |
|||
.content-title { |
|||
font-size: 1.4rem; |
|||
color: #707070; |
|||
font-weight: bold; |
|||
margin-bottom: 0.5rem; |
|||
} |
|||
.content-li { |
|||
font-size: 1.2rem; |
|||
color: #909090; |
|||
list-style: none; |
|||
font-weight: 600; |
|||
float: none !important; |
|||
height: 1.8rem; |
|||
line-height: 1.8rem; |
|||
text-align: left; |
|||
margin: 0.15rem 0 !important; |
|||
} |
|||
.footer-content ul { |
|||
height: auto; |
|||
} |
|||
.footer-img { |
|||
position: absolute; |
|||
top: 8.7rem; |
|||
right: 4.5rem; |
|||
} |
|||
.footer-img img { |
|||
height: 10.5rem; |
|||
width: 10.5rem; |
|||
} |
|||
.footer-center { |
|||
width: 100%; |
|||
height: 18%; |
|||
padding: 0 20%; |
|||
border-bottom: 1px solid #707070; |
|||
box-sizing: border-box; |
|||
} |
|||
.footer-center li { |
|||
font-size: 1rem; |
|||
color: #909090; |
|||
list-style: none; |
|||
font-weight: 600; |
|||
float: left; |
|||
height: 1.5rem; |
|||
line-height: 1.5rem; |
|||
text-align: left; |
|||
margin: 0.1rem 1rem 0 0 !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<div class="left-fixed"> |
|||
<ul class="fixed-li-box"> |
|||
<li |
|||
v-for="(item, index) in list[`${type}`]" |
|||
:key="index" |
|||
class="fixed-li" |
|||
:class="isactive === index ? 'active' : ''" |
|||
@click="changeAcitve(index)" |
|||
> |
|||
<p :class="isactive === index ? 'pactive' : ''">{{ item }}</p> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'LeftFixed', |
|||
data () { |
|||
return { |
|||
list: [ |
|||
[], |
|||
['绿谷简介', '组织架构', '合作伙伴', '衍生企业'], |
|||
['国家政策', '省级政策', '行业政策'], |
|||
['协同中心', '科技创新服务', '科技资源共享服务平台', '交流社区'], |
|||
['孵化平台介绍', '实体众创空间', '线上众创空间', '创新创业服务', '交流社区'], |
|||
['产业技术创新联盟', '衍生企业', '交流社区'], |
|||
['创新挑战介绍', '创新挑战项目征集', '创新挑战项目公告', '创新挑战结果公示'], |
|||
['联系我们', '我要入驻', '人员招聘'], |
|||
['企业需求信息列表'] |
|||
], |
|||
isactive: 0 |
|||
} |
|||
}, |
|||
props: { |
|||
type: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
methods: { |
|||
changeAcitve (num) { |
|||
const that = this |
|||
that.isactive = num |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.left-fixed { |
|||
z-index: 1; |
|||
position: fixed; |
|||
top: 14vh; |
|||
height: 86vh; |
|||
overflow: auto; |
|||
overflow: -moz-scrollbars-none; |
|||
overflow: -moz-scrollbars-none; |
|||
box-sizing: border-box; |
|||
width: 13.5vw; |
|||
background: #e2e6eb; |
|||
} |
|||
.left-fixed::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.fixed-li-box { |
|||
padding-top: 1rem; |
|||
} |
|||
.fixed-li { |
|||
height: 2.5rem; |
|||
line-height: 2.5rem; |
|||
padding-left: 2.2rem; |
|||
color: #707070; |
|||
font-size: 1rem; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
} |
|||
p { |
|||
word-break: keep-all; /* 不换行 */ |
|||
white-space: nowrap; /* 不换行 */ |
|||
} |
|||
.pactive { |
|||
animation: 7s wordsLoop linear infinite normal; |
|||
} |
|||
@keyframes wordsLoop { |
|||
0% { |
|||
transform: translateX(0px); |
|||
-webkit-transform: translateX(0px); |
|||
} |
|||
100% { |
|||
transform: translateX(-100%); |
|||
-webkit-transform: translateX(-100%); |
|||
} |
|||
} |
|||
@-webkit-keyframes wordsLoop { |
|||
0% { |
|||
transform: translateX(0px); |
|||
-webkit-transform: translateX(0px); |
|||
} |
|||
100% { |
|||
transform: translateX(-100%); |
|||
-webkit-transform: translateX(-100%); |
|||
} |
|||
} |
|||
.active { |
|||
background: #4accda; |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,499 @@ |
|||
<template> |
|||
<div class="head-box"> |
|||
<div class="nav-head"> |
|||
<div class="head-left"> |
|||
<img src="@/assets/lvgu.png" alt="" /> |
|||
</div> |
|||
<div class="head-right"> |
|||
<router-link |
|||
tag="i" |
|||
to="/Login" |
|||
class="iconfont icon-icon_username user" |
|||
></router-link> |
|||
</div> |
|||
<div class="head-right head-ipt-box"> |
|||
<input class="head-ipt" type="text" placeholder="全站搜索" /> |
|||
<i class="iconfont icon-tubiaozhizuomoban-03 search"></i> |
|||
</div> |
|||
</div> |
|||
<div class="nav-con"> |
|||
<ul class="nav-con-ul"> |
|||
<li v-for="(item, index) in list" :key="index"> |
|||
<div |
|||
class="li-con" |
|||
:class="isshow === index ? 'lishow' : ''" |
|||
@mouseenter="ShowLi(index, item.type, item.statrtype)" |
|||
@click="Showli1(index, item.type)" |
|||
> |
|||
{{ item.title }} |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div style="width: 100%; position: absolute; z-index: 10"> |
|||
<el-collapse-transition> |
|||
<div @click="noShow" v-show="show3" @mouseleave="leave"> |
|||
<div class="transition-box"> |
|||
<div class="transition-left"> |
|||
<ul class="left-ul" v-show="isshow !== 0"> |
|||
<!-- 适配代码 --> |
|||
<!-- <router-link tag="li" :to="{path:`${jumpUrl}`}" v-for="(item,index) in list[`${isshow}`].children" :key="index" :class="active === index ? 'li-active' : ''" @mouseenter.native="changeAcitve(index,item.showtype)"> --> |
|||
|
|||
<router-link |
|||
tag="li" |
|||
:to="{ path: `${jumpUrl}` }" |
|||
v-for="(item, index) in list[`${isshow}`].children" |
|||
:key="index" |
|||
:class="active === index ? 'li-active' : ''" |
|||
@mouseenter.native="changeAcitve(index)" |
|||
> |
|||
{{ item.title }} |
|||
<i |
|||
v-if="active === index" |
|||
class="iconfont icon-chevron-right position-right" |
|||
></i> |
|||
</router-link> |
|||
</ul> |
|||
</div> |
|||
<div class="transition-right"> |
|||
<!-- 适配代码 --> |
|||
<!-- <div class="type1" v-show="showtype === 1"> |
|||
<h1></h1> |
|||
</div> |
|||
<div class="type1" v-show="showtype === 2"> |
|||
类型222 |
|||
</div> |
|||
<div class="type1" v-show="showtype === 3"> |
|||
类型33333 |
|||
</div> --> |
|||
|
|||
<div class="type1" v-show="showtype === 1"> |
|||
<p class="title-big">绿谷简介</p> |
|||
<p class="title-two">功能食品与生物医药专业化众创空间</p> |
|||
<div class="show-con"> |
|||
本众创空间立足功能食品、生物医药和大健康产业，面向科技型中小微企业、创新创业团队和创客，集协同创新中心、公共实验室、中试基地和创新创业大讲堂为一体，致力于打造线上线下相结合、实体虚拟相融合的全要素开放式专业化众创空间，促进技术转移转化和科技型中小微企业集聚发展。 |
|||
本众创空间办公场所位于太原市晋阳街202号英语周报大厦8层；公共实验室位于太原市师范街50号山西省生物研究院有限公司；中试基地位于太原市小店区正阳街43号山西力德福科技有限公司。 |
|||
</div> |
|||
<p class="title-three">聚焦创新 聚力孵化 聚合产业</p> |
|||
<img class="show-img" src="./../../static/showye1.png" alt="" /> |
|||
</div> |
|||
<div class="type1" v-show="showtype === 2"> |
|||
<p class="title-big">国家政策</p> |
|||
<ul class="show-con1"> |
|||
<li v-for="(item, index) in showlist" :key="index"> |
|||
{{ item.title }} <span |
|||
class="show-con1-time" |
|||
>{{ item.time }}</span |
|||
> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="type1" v-show="showtype === 3"> |
|||
<p class="title-big">协同创新中心</p> |
|||
<div class="show-con-box"> |
|||
<div |
|||
class="box-content" |
|||
v-for="(item, index) in showlist1" |
|||
:key="index" |
|||
> |
|||
<p class="con-box-title">{{ item.title }}</p> |
|||
<p class="con-box-content">{{ item.content }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="type1" v-show="showtype === 4"> |
|||
<p class="title-big">平台介绍</p> |
|||
<p class="title-two">标题111</p> |
|||
<div class="show-con"> |
|||
本众创空间立足功能食品、生物医药和大健康产业，面向科技型中小微企业、创新创业团队和创客，集协同创新中心、公共实验室、中试基地和创新创业大讲堂为一体，致力于打造线上线下相结合、实体虚拟相融合的全要素开放式专业化众创空间，促进技术转移转化和科技型中小微企业集聚发展。 |
|||
本众创空间办公场所位于太原市晋阳街202号英语周报大厦8层；公共实验室位于太原市师范街50号山西省生物研究院有限公司；中试基地位于太原市小店区正阳街43号山西力德福科技有限公司。 |
|||
</div> |
|||
<p class="title-three">标题222</p> |
|||
<img class="show-img" src="./../../static/showye1.png" alt="" /> |
|||
</div> |
|||
<div class="type1" v-show="showtype === 5"> |
|||
<p class="title-big">产业技术联盟</p> |
|||
<p class="title-two">标题111</p> |
|||
<div class="show-con"> |
|||
本众创空间立足功能食品、生物医药和大健康产业，面向科技型中小微企业、创新创业团队和创客，集协同创新中心、公共实验室、中试基地和创新创业大讲堂为一体，致力于打造线上线下相结合、实体虚拟相融合的全要素开放式专业化众创空间，促进技术转移转化和科技型中小微企业集聚发展。 |
|||
本众创空间办公场所位于太原市晋阳街202号英语周报大厦8层；公共实验室位于太原市师范街50号山西省生物研究院有限公司；中试基地位于太原市小店区正阳街43号山西力德福科技有限公司。 |
|||
</div> |
|||
<p class="title-three">标题222</p> |
|||
<img class="show-img" src="./../../static/showye1.png" alt="" /> |
|||
</div> |
|||
<div class="type1" v-show="showtype === 6"> |
|||
<p class="title-big">创新挑战介绍</p> |
|||
<p class="title-two">标题111</p> |
|||
<div class="show-con"> |
|||
本众创空间立足功能食品、生物医药和大健康产业，面向科技型中小微企业、创新创业团队和创客，集协同创新中心、公共实验室、中试基地和创新创业大讲堂为一体，致力于打造线上线下相结合、实体虚拟相融合的全要素开放式专业化众创空间，促进技术转移转化和科技型中小微企业集聚发展。 |
|||
本众创空间办公场所位于太原市晋阳街202号英语周报大厦8层；公共实验室位于太原市师范街50号山西省生物研究院有限公司；中试基地位于太原市小店区正阳街43号山西力德福科技有限公司。 |
|||
</div> |
|||
<p class="title-three">标题222</p> |
|||
<img class="show-img" src="./../../static/showye1.png" alt="" /> |
|||
</div> |
|||
<div class="type1" v-show="showtype === 7"> |
|||
<p class="title-big">联系我们</p> |
|||
<div class="we-left"> |
|||
<p><span>联 系 人：</span>高璨 19935658782</p> |
|||
<p><span>服务热线：</span>0351 5223175 5223179</p> |
|||
<p><span>电子邮箱：</span>lgzc2020@163.com</p> |
|||
<p><span>物业管理：</span>山西恒洁物业管理有限公司</p> |
|||
<p> |
|||
<span>公司地址：</span |
|||
>山西省太原市晋阳街202号英语周报大厦八层 |
|||
</p> |
|||
</div> |
|||
<img class="img1" src="@/assets/erweima.png" alt="" /> |
|||
<img class="img2" src="./../../static/ditu.jpg" alt="" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-collapse-transition> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Navbar', |
|||
data () { |
|||
return { |
|||
list: [{ |
|||
title: '首页', |
|||
type: 1, |
|||
children: [] |
|||
}, { |
|||
title: '关于我们', |
|||
type: 2, |
|||
statrtype: 1, |
|||
children: [{title: '绿谷简介', showtype: 1}, {title: '组织架构', showtype: 1}, {title: '合作伙伴', showtype: 1}, {title: '衍生企业', showtype: 1}] |
|||
}, { |
|||
title: '创新政策', |
|||
type: 2, |
|||
statrtype: 2, |
|||
children: [{title: '国家政策', showtype: 2}, {title: '省级政策', showtype: 1}, {title: '行业政策', showtype: 1}] |
|||
}, { |
|||
title: '创新平台', |
|||
type: 2, |
|||
statrtype: 3, |
|||
children: [{title: '协同中心', showtype: 3}, {title: '科技创新服务', showtype: 1}, {title: '科技资源共享服务平台', showtype: 1}, {title: '交流社区', showtype: 1}] |
|||
}, { |
|||
title: '孵化平台', |
|||
type: 2, |
|||
statrtype: 4, |
|||
children: [{title: '孵化平台介绍', showtype: 1}, {title: '实体众创空间', showtype: 1}, {title: '线上众创空间', showtype: 1}, {title: '创新创业服务', showtype: 1}, {title: '交流社区', showtype: 1}] |
|||
}, { |
|||
title: '产业平台', |
|||
type: 2, |
|||
statrtype: 5, |
|||
children: [{title: '产业技术创新联盟', showtype: 1}, {title: '衍生企业', showtype: 1}, {title: '交流社区', showtype: 1}] |
|||
}, { |
|||
title: '创新挑战', |
|||
type: 2, |
|||
statrtype: 6, |
|||
children: [{title: '创新挑战介绍', showtype: 1}, {title: '创新挑战项目征集', showtype: 1}, {title: '创新挑战项目公告', showtype: 1}, {title: '创新挑战结果公示', showtype: 1}] |
|||
}, { |
|||
title: '联系我们', |
|||
type: 2, |
|||
statrtype: 7, |
|||
children: [{title: '联系我们', showtype: 1}, {title: '我要入驻', showtype: 1}, {title: '人员招聘', showtype: 1}] |
|||
}], |
|||
isshow: 0, |
|||
active: 0, |
|||
show3: false, |
|||
urlList: ['/About', '/Policy', '/Innovate', '/Hatch', '/Industry', '/Challenge', '/Contact'], |
|||
jumpUrl: '', |
|||
showtype: 1, |
|||
showlist: [{ |
|||
title: '国务院办公厅关于加快推进政务服务“跨省通办”的指导意见', |
|||
time: '2020-09-29' |
|||
}, { |
|||
title: '国务院办公厅关于同意成立2023年亚足联亚洲杯中国组委会的函', |
|||
time: '2020-09-28' |
|||
}, { |
|||
title: '国务院办公厅关于促进畜牧业高质量发展的意见', |
|||
time: '2020-09-27' |
|||
}, { |
|||
title: '中共中央办公厅国务院办公厅印发《关于加快推进媒体深度融合发展的意见》', |
|||
time: '2020-09-26' |
|||
}, { |
|||
title: '国务院办公厅转发国家发展改革委关于促进特色小镇规范健康发展意见的通知', |
|||
time: '2020-09-25' |
|||
}], |
|||
showlist1: [{ |
|||
title: '中心介绍', |
|||
content: '中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍中心介绍' |
|||
}, { |
|||
title: '研发方向', |
|||
content: '研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向研发方向' |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
ShowLi (num, type, shownum) { |
|||
if (type === 2) { |
|||
const that = this |
|||
this.Func(num, type) |
|||
that.showtype = shownum |
|||
} |
|||
}, |
|||
Showli1 (num, type) { |
|||
if (type === 1) { |
|||
this.Func(num, type) |
|||
} |
|||
}, |
|||
Func (num, type) { |
|||
const that = this |
|||
if (num === 0) { |
|||
if (that.isshow !== 0) { |
|||
location.href = '/' |
|||
} |
|||
that.show3 = false |
|||
that.isshow = 0 |
|||
that.active = 0 |
|||
} else if (num === that.isshow && that.show3 === true) { |
|||
that.isshow = 0 |
|||
that.show3 = false |
|||
that.active = 0 |
|||
} else { |
|||
that.show3 = true |
|||
that.isshow = num |
|||
that.active = 0 |
|||
} |
|||
let jumpNum = num - 1 |
|||
that.jumpUrl = that.urlList[`${jumpNum}`] |
|||
}, |
|||
changeAcitve (num, shownum) { |
|||
const that = this |
|||
that.active = num |
|||
// that.showtype = shownum |
|||
}, |
|||
noShow () { |
|||
const that = this |
|||
that.show3 = false |
|||
}, |
|||
leave () { |
|||
const that = this |
|||
that.show3 = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.head-box { |
|||
position: fixed; |
|||
width: 100vw; |
|||
top: 0; |
|||
z-index: 10; |
|||
background: white; |
|||
} |
|||
.transition-box { |
|||
width: 100%; |
|||
height: 35vh; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
text-align: center; |
|||
color: #fff; |
|||
// padding: 0 20px; |
|||
box-sizing: border-box; |
|||
margin-right: 20px; |
|||
} |
|||
.transition-left { |
|||
float: left; |
|||
height: 100%; |
|||
position: relative; |
|||
width: 40%; |
|||
box-sizing: border-box; |
|||
background: #e2e6eb; |
|||
} |
|||
.transition-right { |
|||
float: right; |
|||
height: 100%; |
|||
width: 60%; |
|||
color: #707070; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
} |
|||
.left-ul { |
|||
position: absolute; |
|||
width: 70%; |
|||
right: 20px; |
|||
padding-top: 20px; |
|||
box-sizing: border-box; |
|||
height: 35vh; |
|||
overflow: hidden; |
|||
} |
|||
.left-ul li { |
|||
height: 2.2rem; |
|||
margin: 0 0 2px 0 !important; |
|||
line-height: 2.2rem; |
|||
// color: #707070; |
|||
font-size: 1rem; |
|||
width: 100%; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
padding-left: 20px; |
|||
color: #707070; |
|||
cursor: pointer; |
|||
} |
|||
.li-active { |
|||
color: white !important; |
|||
background: #4accda !important; |
|||
} |
|||
li { |
|||
list-style: none; |
|||
// height: 46px; |
|||
// line-height: 50px; |
|||
font-weight: 600; |
|||
color: white; |
|||
float: left; |
|||
text-align: center; |
|||
flex: 1; |
|||
margin: 0 20px; |
|||
} |
|||
.user { |
|||
font-size: 2rem; |
|||
color: #b8b8b8; |
|||
cursor: pointer; |
|||
} |
|||
.head-ipt-box { |
|||
position: relative; |
|||
margin-right: 30px; |
|||
} |
|||
.head-ipt { |
|||
height: 2rem; |
|||
line-height: 2rem; |
|||
width: 15rem; |
|||
outline: none; |
|||
padding-left: 20px; |
|||
font-size: 1rem; |
|||
color: #707070; |
|||
border-radius: 2.5rem; |
|||
border: 1px solid #707070; |
|||
} |
|||
.search { |
|||
font-size: 1rem; |
|||
position: absolute; |
|||
color: #b7b7b7; |
|||
font-weight: 600; |
|||
right: 10px; |
|||
top: 0.1rem; |
|||
cursor: pointer; |
|||
} |
|||
.position-right { |
|||
position: absolute; |
|||
right: 0; |
|||
font-size: 1.25rem; |
|||
} |
|||
.type1 { |
|||
height: 100%; |
|||
width: 100%; |
|||
padding-top: 1.5rem; |
|||
box-sizing: border-box; |
|||
padding-left: 2.25rem; |
|||
cursor: pointer; |
|||
position: relative; |
|||
} |
|||
.title-big { |
|||
font-size: 2rem; |
|||
height: 2rem; |
|||
line-height: 2rem; |
|||
color: #707070; |
|||
font-weight: bold; |
|||
} |
|||
.title-two { |
|||
position: absolute; |
|||
font-size: 1rem; |
|||
height: 26px; |
|||
line-height: 26px; |
|||
color: #707070; |
|||
font-weight: bold; |
|||
margin-top: 10px; |
|||
} |
|||
.show-con { |
|||
margin-top: 46px; |
|||
width: 64%; |
|||
height: auto; |
|||
color: #969696; |
|||
font-size: 0.9rem; |
|||
font-weight: bold; |
|||
overflow: hidden; |
|||
} |
|||
.show-img { |
|||
position: absolute; |
|||
width: 25%; |
|||
left: 72%; |
|||
top: 6rem; |
|||
} |
|||
.title-three { |
|||
position: absolute; |
|||
font-size: 1.1rem; |
|||
height: 26px; |
|||
line-height: 26px; |
|||
left: 72%; |
|||
top: 80px; |
|||
color: #707070; |
|||
font-weight: bold; |
|||
} |
|||
.show-con1 { |
|||
width: 100%; |
|||
height: auto; |
|||
margin-top: 20px; |
|||
} |
|||
.show-con1 li { |
|||
color: #707070; |
|||
font-size: 0.9rem; |
|||
float: none; |
|||
text-align: left; |
|||
font-weight: bold; |
|||
margin: 10px 0; |
|||
} |
|||
.show-con1-time { |
|||
color: #ccc; |
|||
} |
|||
.show-con-box { |
|||
display: flex; |
|||
margin-top: 10px; |
|||
} |
|||
.box-content { |
|||
flex: 1; |
|||
box-sizing: border-box; |
|||
margin-right: 40px; |
|||
} |
|||
.con-box-title { |
|||
font-size: 1.1rem; |
|||
font-weight: bold; |
|||
margin-bottom: 10px; |
|||
} |
|||
.con-box-content { |
|||
color: #969696; |
|||
font-size: 0.9rem; |
|||
font-weight: bold; |
|||
} |
|||
.we-left { |
|||
margin-top: 20px; |
|||
} |
|||
.we-left p { |
|||
margin-bottom: 10px; |
|||
font-size: 0.9rem; |
|||
color: #969696; |
|||
font-weight: bold; |
|||
} |
|||
.img1 { |
|||
height: 150px; |
|||
width: 150px; |
|||
position: absolute; |
|||
top: 80px; |
|||
left: 60%; |
|||
} |
|||
.img2 { |
|||
height: 150px; |
|||
width: 150px; |
|||
position: absolute; |
|||
top: 80px; |
|||
left: 80%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,418 @@ |
|||
<template> |
|||
<div class="page-box"> |
|||
<div v-show="pageType === 1"> |
|||
<div v-for="(item, index) in list1" :key="index" class="hauto"> |
|||
<div v-if="item.colNums === 1"> |
|||
<div |
|||
v-if="item.detail.style === 0" |
|||
class="oneTitle" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
{{ item.detail.content }} |
|||
</div> |
|||
<div |
|||
v-else-if="item.detail.style === 1" |
|||
class="twoTitle" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
{{ item.detail.content }} |
|||
</div> |
|||
<div |
|||
v-else-if="item.detail.style === 2" |
|||
class="contentText" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
{{ item.detail.content }} |
|||
</div> |
|||
<div |
|||
v-else-if="item.detail.style === 3" |
|||
class="bigtitle" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
<!-- 列表？？？？？？？？？？？？？？？？ --> |
|||
</div> |
|||
<div |
|||
v-else-if="item.detail.style === 4" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
<!-- 图片样式？？？？？？？？？？？？？？？？ --> |
|||
<img :src="item.detail.content.url" class="imgStyle" alt="" /> |
|||
</div> |
|||
<div |
|||
v-else-if="item.detail.style === 5" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
<!-- 图片滚动？？？？？？？？？？？？？？？？ --> |
|||
</div> |
|||
<div |
|||
v-else-if="item.detail.style === 6" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
<!-- 多列排序？？？？？？？？？？？？？？？？ --> |
|||
</div> |
|||
<div |
|||
v-else-if="item.detail.style === null" |
|||
:style="{ width: item.detail.width + '%' }" |
|||
> |
|||
<!-- 特殊模块？？？？？？？？？？？？？？？？ --> |
|||
特殊模块 |
|||
</div> |
|||
</div> |
|||
<div v-else> |
|||
<div |
|||
v-for="(a, b) in item.colNums" |
|||
:key="b" |
|||
class="fl" |
|||
:style="{ width: item.details[a - 1].width + '%' }" |
|||
> |
|||
<div v-if="item.details[a - 1].style === 0" class="oneTitle"> |
|||
{{ item.details[a - 1].content }} |
|||
</div> |
|||
<div v-if="item.details[a - 1].style === 1" class="twoTitle"> |
|||
{{ item.details[a - 1].content }} |
|||
</div> |
|||
<div v-if="item.details[a - 1].style === 2" class="contentText"> |
|||
{{ item.details[a - 1].content }} |
|||
</div> |
|||
<div v-if="item.details[a - 1].style === 3"> |
|||
<!-- 列表？？？？？？？？？？？？？？？？ --> |
|||
</div> |
|||
<div v-if="item.details[a - 1].style === 4" class="contentImg"> |
|||
<img |
|||
:src="item.details[a - 1].content.url" |
|||
class="imgStyle1" |
|||
alt="" |
|||
/> |
|||
</div> |
|||
<div v-if="item.details[a - 1].style === 5"> |
|||
<div v-if="item.details[a - 1].content.style === 0"> |
|||
<!-- 多列图片 --> |
|||
<img |
|||
:src="item.details[a - 1].content.url" |
|||
alt="" |
|||
class="teamimg" |
|||
/> |
|||
</div> |
|||
<div v-if="item.details[a - 1].content.style === 1"> |
|||
<!-- 多列图片，图片底部有文字 --> |
|||
</div> |
|||
<div v-if="item.details[a - 1].content.style === 2"> |
|||
<!-- 多列图片，图片下方有文字 --> |
|||
</div> |
|||
</div> |
|||
<div v-if="item.details[a - 1].style === 6"> |
|||
<!-- 多列排序？？？？？？？？？？？？？？？？ --> |
|||
</div> |
|||
<div v-if="item.details[a - 1].style === null"> |
|||
<!-- 特殊模块？？？？？？？？？？？？？？？？ --> |
|||
</div> |
|||
</div> |
|||
<!-- 当不只一列时：此时有{{ item.colNums }}列 --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-show="pageType === 2">创新政策界面</div> |
|||
<div v-show="pageType === 3">创新平台界面</div> |
|||
<div v-show="pageType === 4">孵化平台界面</div> |
|||
<div v-show="pageType === 5">产业平台界面</div> |
|||
<div v-show="pageType === 6">创新挑战界面</div> |
|||
<div v-show="pageType === 7">联系我们界面</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Page', |
|||
props: { |
|||
pageType: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
mounted: function () { |
|||
for (var i = 0; i < this.list1.length; i++) { |
|||
if (this.list1[i] && this.list1[i].detail) { |
|||
if (this.list1[i].detail.style === 4 || this.list1[i].detail.style === 5 || this.list1[i].detail.style === 6) { |
|||
if (this.list1[i].detail.content !== null) { |
|||
this.list1[i].detail.content = JSON.parse(this.list1[i].detail.content) |
|||
// console.log(this.list1[i].detail.content) |
|||
} |
|||
} |
|||
} |
|||
if (this.list1[i] && this.list1[i].details) { |
|||
for (var j = 0; j < this.list1[i].details.length; j++) { |
|||
if (this.list1[i].details[j].style === 4 || this.list1[i].details[j].style === 5 || this.list1[i].details[j].style === 6) { |
|||
this.list1[i].details[j].content = JSON.parse(this.list1[i].details[j].content) |
|||
// console.log(JSON.parse(this.list1[i].details[j].content)) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
console.log(this.list1) |
|||
}, |
|||
data () { |
|||
return { |
|||
list: [{ |
|||
bigTitle: '绿谷简介', |
|||
children: [{ |
|||
twotile: '众创空间', |
|||
content: ['本众创空间立足功能食品、生物医药和大健康产业，面向科技型中小微企业、创新创业团队和创客，集协同创新中心、公共实验室、中试基地和创新创业大讲堂为一体，致力于打造线上线下相结合、实体虚拟相融合的全要素开放式专业化众创空间，促进技术转移转化和科技型中小微企业集聚发展。', '本众创空间办公场所位于太原市晋阳街202号英语周报大厦8层；公共实验室位于太原市师范街50号山西省生物研究院有限公司；中试基地位于太原市小店区正阳街43号山西力德福科技有限公司。', '英语周报大厦西临滨河东路，南靠龙城大街，城市快速路、主干道横贯，距火车南站5公里，距武宿机场11公里，交通十分便利；大厦北侧是山西省实验中学高新校区，西侧是汾河湿地公园，自然环境十分优美。'], |
|||
img: '' |
|||
}, { |
|||
twotile: '运营主体', |
|||
content: [''], |
|||
img: '' |
|||
}, { |
|||
twotile: '研究方向', |
|||
content: [''], |
|||
img: '' |
|||
}, { |
|||
twotile: '研究单位', |
|||
content: [''], |
|||
img: '' |
|||
}] |
|||
}, { |
|||
bigTitle: '组织架构', |
|||
children: [{ |
|||
twotile: '', |
|||
content: [''], |
|||
img: '' |
|||
}, {}, {}, {}] |
|||
}, { |
|||
bigTitle: '合作伙伴', |
|||
children: [{ |
|||
twotile: '', |
|||
content: [''], |
|||
img: '' |
|||
}, {}, {}, {}] |
|||
}, { |
|||
bigTitle: '衍生企业', |
|||
children: [{ |
|||
twotile: '', |
|||
content: [''], |
|||
img: '' |
|||
}, {}, {}, {}] |
|||
}], |
|||
list1: [{ |
|||
// 文本 |
|||
colNums: 1, |
|||
detail: { |
|||
id: 1, |
|||
titleId: 1, |
|||
content: '绿谷简介', |
|||
style: 0, |
|||
width: 100, |
|||
col: 1, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 1 |
|||
}, |
|||
details: null |
|||
}, |
|||
{ |
|||
// 单张图片 |
|||
colNums: 1, |
|||
detail: { |
|||
id: 1, |
|||
titleId: 1, |
|||
content: '{"url":"./../../static/item001.jpg", "word":null, "style":0}', |
|||
style: 4, |
|||
width: 100, |
|||
col: 1, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 2 |
|||
}, |
|||
details: null |
|||
}, |
|||
{ |
|||
// 共四列，专家类型 |
|||
colNums: 4, |
|||
detail: null, |
|||
details: [{ |
|||
id: 1, |
|||
titleId: 1, |
|||
content: '{"url":"./../../static/item001.jpg", "word":null, "style":0}', |
|||
style: 5, |
|||
width: 25, |
|||
col: 1, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}, { |
|||
id: 1, |
|||
titleId: 1, |
|||
content: '{"url":"./../../static/item002.jpg", "word":null, "style":0}', |
|||
style: 5, |
|||
width: 25, |
|||
col: 2, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}, { |
|||
id: 1, |
|||
titleId: 1, |
|||
content: '{"url":"./../../static/item003.jpg", "word":null, "style":0}', |
|||
style: 5, |
|||
width: 25, |
|||
col: 2, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}, { |
|||
id: 1, |
|||
titleId: 1, |
|||
content: '{"url":"./../../static/item001.jpg", "word":null, "style":0}', |
|||
style: 5, |
|||
width: 25, |
|||
col: 2, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}] |
|||
}, |
|||
{ |
|||
// 共四列，研发单位类型的 |
|||
colNums: 4, |
|||
detail: null, |
|||
details: [{ |
|||
id: 1, |
|||
titleId: 1, |
|||
content: 'xxxxxx', |
|||
style: 2, |
|||
width: 25, |
|||
col: 1, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}, |
|||
{ |
|||
id: 1, |
|||
titleId: 1, |
|||
content: 'xxxxxx', |
|||
style: 2, |
|||
width: 25, |
|||
col: 2, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}, |
|||
{ |
|||
id: 1, |
|||
titleId: 1, |
|||
content: 'xxxxxx', |
|||
style: 2, |
|||
width: 25, |
|||
col: 2, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}, |
|||
{ |
|||
id: 1, |
|||
titleId: 1, |
|||
content: 'xxxxxx', |
|||
style: 2, |
|||
width: 25, |
|||
col: 2, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}] |
|||
}, |
|||
{ |
|||
// 共两列 1列文字1列图片 |
|||
colNums: 2, |
|||
detail: null, |
|||
details: [ |
|||
// 文字 |
|||
{ |
|||
id: 1, |
|||
titleId: 1, |
|||
content: 'xxxxxx', |
|||
style: 2, |
|||
width: 55, |
|||
col: 1, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}, |
|||
// 图片 |
|||
{ |
|||
id: 1, |
|||
titleId: 1, |
|||
content: '{"url":"./../../static/item002.jpg", "word":null, "style":0}', |
|||
style: 4, |
|||
width: 45, |
|||
col: 2, |
|||
queryMethod: 0, |
|||
queryModule: null, |
|||
sort: 3 |
|||
}] |
|||
}, |
|||
// 需要调用接口的 |
|||
{ |
|||
// 文本 |
|||
colNums: 1, |
|||
detail: { |
|||
id: 1, |
|||
titleId: null, |
|||
content: null, |
|||
style: null, |
|||
width: 100, |
|||
col: 1, |
|||
queryMethod: 1, |
|||
queryModule: 0, // 对应不同的特殊模块 |
|||
sort: 1 |
|||
}, |
|||
details: null |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.page-box { |
|||
width: 62vw; |
|||
margin: auto; |
|||
} |
|||
.fl { |
|||
float: left; |
|||
} |
|||
.hauto { |
|||
overflow: hidden; |
|||
} |
|||
.oneTitle { |
|||
margin-top: 2rem; |
|||
font-size: 2rem; |
|||
font-weight: bold; |
|||
color: #707070; |
|||
} |
|||
.twoTitle { |
|||
margin-top: 3rem; |
|||
font-size: 1.2rem; |
|||
font-weight: bold; |
|||
color: #707070; |
|||
} |
|||
.contentText { |
|||
margin-top: 1.2rem; |
|||
font-size: 1rem; |
|||
font-weight: 400; |
|||
color: #707070; |
|||
} |
|||
.imgStyle { |
|||
width: 50%; |
|||
margin-left: 25%; |
|||
} |
|||
.imgStyle1 { |
|||
width: 100%; |
|||
} |
|||
.contentImg { |
|||
margin-top: 1.2rem; |
|||
} |
|||
.teamimg { |
|||
width: 50%; |
|||
margin-left: 25%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<div class="box" :class="trueFixed ? 'fixedT' : ''"> |
|||
<router-link to="/Innovate" tag="div" class="box-content-box"> |
|||
<div class="box-content" v-for="(item,index) in list" :key="index"> |
|||
<p>{{ item }}</p> |
|||
</div> |
|||
</router-link> |
|||
<div class="back-top" @click="toTop()"> |
|||
<p>Top</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Sidebar', |
|||
data () { |
|||
return { |
|||
list: ['科研设施与仪器开放共享服务平台', '技术转移转化服务平台', '功能食品与生物医药资源开发利用平台'], |
|||
trueFixed: false |
|||
} |
|||
}, |
|||
props: { |
|||
num: { |
|||
type: Number, |
|||
default: 1 |
|||
} |
|||
}, |
|||
mounted () { |
|||
window.addEventListener('scroll', this.handleScroll) |
|||
}, |
|||
methods: { |
|||
toTop () { |
|||
let top = document.documentElement.scrollTop || document.body.scrollTop |
|||
const timeTop = setInterval(() => { |
|||
document.body.scrollTop = document.documentElement.scrollTop = top -= 50 |
|||
if (top <= 0) { |
|||
clearInterval(timeTop) |
|||
} |
|||
}, 10) |
|||
}, |
|||
handleScroll () { |
|||
const that = this |
|||
let Box = document.getElementsByClassName('box')[0].getBoundingClientRect().top |
|||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop |
|||
let height = document.documentElement.clientHeight |
|||
if (Box <= height * 0.14) { |
|||
that.trueFixed = true |
|||
} |
|||
if (that.num === 0) { |
|||
if (scrollTop < height * 0.35) { |
|||
that.trueFixed = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
p { |
|||
width: 100%; |
|||
} |
|||
.box { |
|||
z-index: 1; |
|||
height: 46vh; |
|||
margin-top: 2vh; |
|||
right: 50px; |
|||
width: 13vw; |
|||
background: #00B7CB; |
|||
border-radius: 16px; |
|||
position: absolute; |
|||
box-shadow: 4px 4px 5px #707070; |
|||
} |
|||
.fixedT { |
|||
top: 14vh !important; |
|||
right: 50px !important; |
|||
position: fixed !important; |
|||
} |
|||
.box-content-box { |
|||
height: 90%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.box-content { |
|||
flex: 1; |
|||
cursor: pointer; |
|||
display: flex; |
|||
text-align: center; |
|||
margin: 0 20px; |
|||
color: #FFFFFF; |
|||
font-size: 1.2rem; |
|||
font-weight: bold; |
|||
align-items: center; |
|||
border-bottom: 1px solid #FFFFFF; |
|||
} |
|||
.back-top { |
|||
height: 10%; |
|||
display: flex; |
|||
color: #FFFFFF; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,27 @@ |
|||
import Vue from 'vue' |
|||
|
|||
import ElementUI from 'element-ui' |
|||
import 'element-ui/lib/theme-chalk/index.css' |
|||
|
|||
import '@/styles/index.scss' |
|||
|
|||
import 'babel-polyfill' |
|||
|
|||
import App from './App' |
|||
import store from './store' |
|||
import router from './router' |
|||
import './assets/icon/iconfont.css' |
|||
|
|||
Vue.use(ElementUI) |
|||
Vue.config.productionTip = false |
|||
router.afterEach((to, from, next) => { |
|||
window.scrollTo(0, 0) |
|||
}) |
|||
/* eslint-disable no-new */ |
|||
new Vue({ |
|||
el: '#app', |
|||
router, |
|||
store, |
|||
components: { App }, |
|||
template: '<App/>' |
|||
}) |
|||
@ -0,0 +1,56 @@ |
|||
import Vue from 'vue' |
|||
import Router from 'vue-router' |
|||
// import Navbar from '@/components/Navbar'
|
|||
|
|||
Vue.use(Router) |
|||
|
|||
export default new Router({ |
|||
routes: [ |
|||
{ |
|||
path: '/', |
|||
name: 'FristPage', |
|||
component: () => import('@/views/FirstPage/FirstPage') |
|||
}, { |
|||
path: '/About', |
|||
name: 'About', |
|||
component: () => import('@/views/About/About.vue'), |
|||
children: [{ |
|||
path: 'Introduction', |
|||
name: 'Introduction', |
|||
component: () => import('@/views/About/Children/Introduction.vue') |
|||
}] |
|||
}, { |
|||
path: '/Policy', |
|||
name: 'Policy', |
|||
component: () => import('@/views/Policy/Policy.vue') |
|||
}, { |
|||
path: '/Innovate', |
|||
name: 'Innovate', |
|||
component: () => import('@/views/Innovate/Innovate.vue') |
|||
}, { |
|||
path: '/Hatch', |
|||
name: 'Hatch', |
|||
component: () => import('@/views/Hatch/Hatch.vue') |
|||
}, { |
|||
path: '/Industry', |
|||
name: 'Industry', |
|||
component: () => import('@/views/Industry/Industry.vue') |
|||
}, { |
|||
path: '/Challenge', |
|||
name: 'Challenge', |
|||
component: () => import('@/views/Challenge/Challenge.vue') |
|||
}, { |
|||
path: '/Contact', |
|||
name: 'Contact', |
|||
component: () => import('@/views/Contact/Contact.vue') |
|||
}, { |
|||
path: '/Login', |
|||
name: 'Login', |
|||
component: () => import('@/views/Login/Login.vue') |
|||
}, { |
|||
path: '/Demand', |
|||
name: 'Demand', |
|||
component: () => import('@/views/Demand/Demand.vue') |
|||
} |
|||
] |
|||
}) |
|||
@ -0,0 +1,10 @@ |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
import userInfo from './loginInfo/index' |
|||
|
|||
Vue.use(Vuex) |
|||
const store = new Vuex.Store({ |
|||
modules: { userInfo } |
|||
}) |
|||
|
|||
export default store |
|||
@ -0,0 +1,5 @@ |
|||
const actions = { |
|||
|
|||
} |
|||
|
|||
export default actions |
|||
@ -0,0 +1,5 @@ |
|||
import state from './state' |
|||
import mutations from './mutations' |
|||
import actions from './actions.js' |
|||
|
|||
export default { namespaced: true, state, actions, mutations } |
|||
@ -0,0 +1,7 @@ |
|||
const mutations = { |
|||
setInfo (state, loginInfo) { |
|||
if (!loginInfo) return |
|||
state.loginInfo = loginInfo |
|||
} |
|||
} |
|||
export default mutations |
|||
@ -0,0 +1,5 @@ |
|||
const state = { |
|||
loginInfo: {} |
|||
} |
|||
|
|||
export default state |
|||
@ -0,0 +1,54 @@ |
|||
.nav-head{ |
|||
width: 100%; |
|||
padding: 0 1rem; |
|||
line-height: 5rem; |
|||
height: 9vh; |
|||
box-sizing: border-box; |
|||
} |
|||
.head-left{ |
|||
float: left; |
|||
box-sizing: border-box; |
|||
height: 9vh; |
|||
position: relative; |
|||
img{ |
|||
position: absolute; |
|||
top: 1.5vh; |
|||
height: 6vh; |
|||
} |
|||
} |
|||
.head-right{ |
|||
height: 9vh; |
|||
line-height: 9vh; |
|||
float: right; |
|||
margin-right: 1vw; |
|||
} |
|||
.nav-con{ |
|||
width: 100%; |
|||
padding: 0 1rem; |
|||
box-sizing: border-box; |
|||
height: 5vh; |
|||
background: #00B7CB; |
|||
} |
|||
.li-con{ |
|||
height: 5vh; |
|||
line-height: 5vh; |
|||
cursor: pointer; |
|||
box-sizing: border-box; |
|||
margin: auto; |
|||
width: 5rem; |
|||
} |
|||
.lishow{ |
|||
border-bottom: 4px solid white; |
|||
} |
|||
.nav-con-ul{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: 5vh; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
} |
|||
// .footer{ |
|||
// width: 100%; |
|||
// height: 485px; |
|||
// background: #E2E6EB; |
|||
// } |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<!-- 关于我们界面 --> |
|||
<sidebar :num="typeNum" /> |
|||
<page :pageType="pageType" /> |
|||
<router-view></router-view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
import Sidebar from '@/components/Sidebar' |
|||
import Page from '@/components/Page' |
|||
export default { |
|||
name: 'About', |
|||
components: { LeftFixed, Sidebar, Page }, |
|||
data () { |
|||
return { |
|||
typeNum: 1, |
|||
type: 1, |
|||
pageType: 1 |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<div class="box"> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Introduction', |
|||
data () { |
|||
return { |
|||
list: [{ |
|||
bigTitle: '绿谷简介', |
|||
children: [{ |
|||
twotile: '众创空间', |
|||
content: '', |
|||
img: '' |
|||
}, { |
|||
twotile: '运营主体', |
|||
content: '', |
|||
img: '' |
|||
}, { |
|||
twotile: '研究方向', |
|||
content: '', |
|||
img: '' |
|||
}, { |
|||
twotile: '研究单位', |
|||
content: '', |
|||
img: '' |
|||
}] |
|||
}, { |
|||
bigTitle: '组织架构', |
|||
children: [{ |
|||
twotile: '', |
|||
content: '', |
|||
img: '' |
|||
}, {}, {}, {}] |
|||
}, { |
|||
bigTitle: '合作伙伴', |
|||
children: [{ |
|||
twotile: '', |
|||
content: '', |
|||
img: '' |
|||
}, {}, {}, {}] |
|||
}, { |
|||
bigTitle: '衍生企业', |
|||
children: [{ |
|||
twotile: '', |
|||
content: '', |
|||
img: '' |
|||
}, {}, {}, {}] |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.box{ |
|||
width: 62.5vw; |
|||
height: 50px; |
|||
margin-top: 40px !important; |
|||
margin: auto; |
|||
} |
|||
.page-title { |
|||
margin-bottom: 40px; |
|||
} |
|||
.small-title { |
|||
margin-bottom: 10px; |
|||
} |
|||
.small-content { |
|||
margin-bottom: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<!-- 创新挑战界面 --> |
|||
<page :pageType="pageType" /> |
|||
|
|||
<sidebar :num="typeNum" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
import Sidebar from '@/components/Sidebar' |
|||
import Page from '@/components/Page' |
|||
|
|||
export default { |
|||
name: 'Challenge', |
|||
components: { LeftFixed, Sidebar, Page }, |
|||
data () { |
|||
return { |
|||
typeNum: 1, |
|||
type: 6, |
|||
pageType: 6 |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<!-- 联系我们界面 --> |
|||
<page :pageType="pageType" /> |
|||
|
|||
<sidebar :num="typeNum" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
import Sidebar from '@/components/Sidebar' |
|||
import Page from '@/components/Page' |
|||
export default { |
|||
name: 'Contact', |
|||
components: { LeftFixed, Sidebar, Page }, |
|||
data () { |
|||
return { |
|||
typeNum: 1, |
|||
type: 7, |
|||
pageType: 7 |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<div class="box"> |
|||
<p class="list-title">企业信息列表</p> |
|||
<div v-for="(item, index) in datalist" :key="index" class="data-box"> |
|||
<p class="data-title">{{ item.title }}</p> |
|||
<div v-for="(a, b) in item.content" :key="b" class="data-content"> |
|||
{{ a }} |
|||
</div> |
|||
<div class="data-content">继续添加</div> |
|||
</div> |
|||
<div class="user-info"> |
|||
<p class="data-title">客户信息</p> |
|||
<div |
|||
v-for="(item, index) in infolist" |
|||
:key="index" |
|||
:class="item.type === 3 ? 'infolist-box1' : 'infolist-box'" |
|||
> |
|||
<p style="float: left">{{ item.title }}：</p> |
|||
<!-- 输入框 --> |
|||
<el-input |
|||
v-model="item.content" |
|||
v-if="item.type === 0" |
|||
style="width: 45%" |
|||
placeholder="请输入" |
|||
/> |
|||
<!-- 单选框 --> |
|||
<template v-if="item.type === 1"> |
|||
<el-radio v-model="item.content" label="1">是</el-radio> |
|||
<el-radio v-model="item.content" label="0">否</el-radio> |
|||
</template> |
|||
<!-- 日期选择框 --> |
|||
<el-input |
|||
v-model="item.content" |
|||
type="date" |
|||
v-if="item.type === 2" |
|||
style="width: 45%" |
|||
placeholder="请输入" |
|||
/> |
|||
<!-- 文本域 --> |
|||
<el-input |
|||
v-if="item.type === 3" |
|||
type="textarea" |
|||
rows="10" |
|||
placeholder="请输入内容" |
|||
v-model="item.content" |
|||
></el-input> |
|||
</div> |
|||
<el-button type="success" class="submit" style="width: 20%" |
|||
>确定提交</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
export default { |
|||
name: 'Demand', |
|||
components: { LeftFixed }, |
|||
data () { |
|||
return { |
|||
type: 8, |
|||
datalist: [{ |
|||
title: '服务需求', |
|||
content: ['一个服务', '两个服务', '三个服务'] |
|||
}, { |
|||
title: '团队需求', |
|||
content: ['一个团队', '两个团队', '三个团队'] |
|||
}, { |
|||
title: '设备需求', |
|||
content: ['一个设备', '两个设备', '三个设备'] |
|||
}], |
|||
infolist: [{ |
|||
title: '企业名称', |
|||
type: 0, // 0表示输入框，1表示单选，2表示日期选择，3表示文本域 |
|||
content: '' |
|||
}, { |
|||
title: '信用代码', |
|||
type: 0, |
|||
content: '' |
|||
}, { |
|||
title: '是否入孵', |
|||
type: 1, |
|||
content: '' |
|||
}, { |
|||
title: '入孵时间', |
|||
type: 2, |
|||
content: '' |
|||
}, { |
|||
title: '联系人', |
|||
type: 0, |
|||
content: '' |
|||
}, { |
|||
title: '联系方式', |
|||
type: 0, |
|||
content: '' |
|||
}, { |
|||
title: '其他要求', |
|||
type: 3, |
|||
content: '' |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.box { |
|||
width: 62vw; |
|||
margin: auto; |
|||
} |
|||
.list-title { |
|||
color: #707070; |
|||
font-size: 2rem; |
|||
font-weight: bold; |
|||
margin-top: 1.5rem; |
|||
} |
|||
.data-box { |
|||
margin-bottom: 20px; |
|||
overflow: hidden; |
|||
} |
|||
.data-title { |
|||
color: #707070; |
|||
font-size: 1.2rem; |
|||
margin-top: 1.5rem; |
|||
font-weight: bold; |
|||
border-bottom: 4px solid #00b7cb; |
|||
} |
|||
.data-content { |
|||
height: 3rem; |
|||
width: 29%; |
|||
text-align: center; |
|||
line-height: 3rem; |
|||
border-radius: 5px; |
|||
box-shadow: 2px 2px 2px #707070; |
|||
border: 2px solid #909090; |
|||
margin: 10px 2% 10px 2%; |
|||
float: left; |
|||
box-sizing: border-box; |
|||
} |
|||
.user-info { |
|||
width: 100%; |
|||
margin-bottom: 200px; |
|||
position: relative; |
|||
} |
|||
.infolist-box { |
|||
height: 60px; |
|||
line-height: 60px; |
|||
} |
|||
.infolist-box > p { |
|||
width: 5rem; |
|||
} |
|||
.infolist-box1 { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 1.82rem; |
|||
width: 40%; |
|||
} |
|||
.infolist-box1 > p { |
|||
height: 60px; |
|||
line-height: 60px; |
|||
} |
|||
.submit { |
|||
position: absolute; |
|||
right: 10%; |
|||
bottom: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,168 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
<div class="block"> |
|||
<el-carousel height="35vh"> |
|||
<el-carousel-item v-for="item in imagelist" :key="item"> |
|||
<img :src="item" alt="" /> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
</div> |
|||
<sidebar :num="typeNum" /> |
|||
<div class="content"> |
|||
<div class="content-top-box"> |
|||
<div class="top-box-img" v-for="(item, index) in platform" :key="index"> |
|||
<img :src="item.img" alt="" /> |
|||
<p>{{ item.size }}</p> |
|||
</div> |
|||
</div> |
|||
<div class="content-bottom-box"> |
|||
<div |
|||
class="bottom-box-content" |
|||
v-for="(item, index) in frame" |
|||
:key="index" |
|||
> |
|||
<p>{{ item.title }}</p> |
|||
<ul> |
|||
<li v-for="(x, y) in item.list" :key="y">{{ x }}</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sidebar from '@/components/Sidebar' |
|||
export default { |
|||
name: 'FirstPage', |
|||
components: { Sidebar }, |
|||
data () { |
|||
return { |
|||
typeNum: 0, |
|||
imagelist: ['./../../static/lb001.jpg', './../../static/lb002.jpg', './../../static/lb003.jpg'], |
|||
platform: [{ |
|||
img: './../../static/item001.jpg', |
|||
url: '', |
|||
size: '创新平台' |
|||
}, { |
|||
img: './../../static/item002.jpg', |
|||
url: '', |
|||
size: '孵化平台' |
|||
}, { |
|||
img: './../../static/item003.jpg', |
|||
url: '', |
|||
size: '产业平台' |
|||
}], |
|||
frame: [{ |
|||
title: '行业资讯', |
|||
list: ['行业资讯行业资讯行业资讯行业资讯行业资讯', '行业资讯行业资讯行业资讯行业资讯行业资讯', '行业资讯', '行业资讯', '行业资讯行业资讯行业资讯行业资讯行业资讯'], |
|||
url: '' |
|||
}, { |
|||
title: '活动公告', |
|||
list: ['活动公告', '活动公告', '活动公告活动公告活动公告活动公告活动公告', '活动公告活动公告活动公告活动公告活动公告', '活动公告'], |
|||
url: '' |
|||
}, { |
|||
title: '创新挑战', |
|||
list: ['创新挑战', '创新挑战创新挑战创新挑战创新挑战创新挑战', '创新挑战', '创新挑战', '创新挑战创新挑战创新挑战创新挑战创新挑战'], |
|||
url: '' |
|||
}] |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.el-carousel__item:nth-child(2n) { |
|||
background-color: #99a9bf; |
|||
} |
|||
.el-carousel__item:nth-child(2n + 1) { |
|||
background-color: #d3dce6; |
|||
} |
|||
.el-carousel__item img { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
.content { |
|||
padding: 18px 0; |
|||
box-sizing: border-box; |
|||
width: 60%; |
|||
height: 50vh; |
|||
margin: 0 auto; |
|||
} |
|||
.content-top-box { |
|||
display: flex; |
|||
height: 45%; |
|||
width: 100%; |
|||
margin-bottom: 20px; |
|||
} |
|||
.content-bottom-box { |
|||
display: flex; |
|||
height: 50%; |
|||
width: 100%; |
|||
// overflow: hidden; |
|||
} |
|||
.top-box-img { |
|||
flex: 1; |
|||
position: relative; |
|||
border-radius: 10px; |
|||
margin-right: 20px; |
|||
cursor: pointer; |
|||
box-shadow: 2px 2px 5px #707070; |
|||
} |
|||
.top-box-img p { |
|||
position: absolute; |
|||
bottom: 0; |
|||
background: #707070; |
|||
color: #f0f0f0; |
|||
height: 36px; |
|||
line-height: 36px; |
|||
font-size: 1.1rem; |
|||
font-weight: 600; |
|||
text-align: center; |
|||
width: 100%; |
|||
border-radius: 0 0 10px 10px; |
|||
} |
|||
.top-box-img img { |
|||
height: 100%; |
|||
width: 100%; |
|||
border-radius: 10px; |
|||
} |
|||
.bottom-box-content { |
|||
flex: 1; |
|||
position: relative; |
|||
border-radius: 10px; |
|||
margin-right: 20px; |
|||
cursor: pointer; |
|||
box-sizing: border-box; |
|||
box-shadow: 2px 2px 5px #707070; |
|||
} |
|||
.bottom-box-content p { |
|||
height: 2.5rem; |
|||
font-size: 1.1rem; |
|||
line-height: 2.5rem; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
color: #707070; |
|||
background: #e2e6eb; |
|||
border-radius: 10px 10px 0 0; |
|||
} |
|||
.bottom-box-content ul { |
|||
max-width: 100%; |
|||
margin: 0.6rem 10% 0 10%; |
|||
} |
|||
.bottom-box-content li { |
|||
list-style: none; |
|||
max-width: 90%; |
|||
height: 1.5rem; |
|||
line-height: 1.5rem; |
|||
color: #95989a; |
|||
font-size: 0.9rem; |
|||
font-weight: 600; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
// white-space: nowrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<!-- 孵化平台界面 --> |
|||
<page :pageType="pageType" /> |
|||
|
|||
<sidebar :num="typeNum" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
import Sidebar from '@/components/Sidebar' |
|||
import Page from '@/components/Page' |
|||
export default { |
|||
name: 'Hatch', |
|||
components: { LeftFixed, Sidebar, Page }, |
|||
data () { |
|||
return { |
|||
typeNum: 1, |
|||
type: 4, |
|||
pageType: 4 |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<!-- 产业平台界面 --> |
|||
<page :pageType="pageType" /> |
|||
|
|||
<sidebar :num="typeNum" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
import Sidebar from '@/components/Sidebar' |
|||
import Page from '@/components/Page' |
|||
|
|||
export default { |
|||
name: 'Industry', |
|||
components: { LeftFixed, Sidebar, Page }, |
|||
data () { |
|||
return { |
|||
typeNum: 1, |
|||
type: 5, |
|||
pageType: 5 |
|||
|
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<!-- 创新平台界面 --> |
|||
<page :pageType="pageType" /> |
|||
|
|||
<sidebar :num="typeNum" /> |
|||
<demand /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
import Sidebar from '@/components/Sidebar' |
|||
import Page from '@/components/Page' |
|||
import Demand from '@/components/Demand' |
|||
|
|||
export default { |
|||
name: 'Innovate', |
|||
components: { LeftFixed, Sidebar, Page, Demand }, |
|||
data () { |
|||
return { |
|||
typeNum: 1, |
|||
type: 3, |
|||
pageType: 3 |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<div class="loginBox"> |
|||
<div class="login"> |
|||
<p v-if="state === 0" class="login-title">登 录</p> |
|||
<p v-else class="login-title">注 册</p> |
|||
<div class="info-box"> |
|||
<ul class="info-option"> |
|||
<li |
|||
v-for="(item, index) in optionList" |
|||
:key="index" |
|||
:class="active === index + 1 ? 'active' : ''" |
|||
@click="changeOption(index + 1)" |
|||
> |
|||
{{ item }} |
|||
</li> |
|||
</ul> |
|||
<el-input |
|||
type="text" |
|||
v-model.trim="loginInfo.username" |
|||
placeholder="用户名" |
|||
style="width: 80%; margin: 2rem 0 0 10%" |
|||
/> |
|||
<el-input |
|||
type="password" |
|||
v-model.trim="loginInfo.password" |
|||
show-password |
|||
placeholder="密码" |
|||
style="width: 80%; margin: 2rem 0 0 10%" |
|||
/> |
|||
<el-button style="width: 35%; margin: 2rem 5% 0 10%" @click="login" |
|||
>登录</el-button |
|||
> |
|||
<el-button |
|||
style="width: 35%; margin: 2rem 0 0 5%" |
|||
@click="register" |
|||
v-show="state === 0" |
|||
>注册</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'Login', |
|||
data () { |
|||
return { |
|||
state: 0, |
|||
optionList: ['企业', '个人'], |
|||
loginInfo: { |
|||
username: '', |
|||
password: '' |
|||
}, |
|||
active: 1 |
|||
} |
|||
}, |
|||
methods: { |
|||
changeOption (num) { |
|||
const that = this |
|||
that.active = num |
|||
}, |
|||
login () { |
|||
const that = this |
|||
if (that.state === 0) { |
|||
// 触发登录接口 |
|||
that.$router.push('/') |
|||
} else { |
|||
// 不在登录状态，转到登录界面 |
|||
that.state = 0 |
|||
} |
|||
}, |
|||
register () { |
|||
const that = this |
|||
if (that.state === 1) { |
|||
// 触发注册接口 |
|||
} else { |
|||
// 不在注册状态，转到注册界面 |
|||
that.state = 1 |
|||
console.log(that.state) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.loginBox { |
|||
background: url(./../../../static/item004.jpg) no-repeat center center; |
|||
background-size: cover; |
|||
position: absolute; |
|||
z-index: 1000; |
|||
top: 0; |
|||
height: 100vh; |
|||
width: 100vw; |
|||
/* display: flex; */ |
|||
/* align-items: center; |
|||
justify-content: center; */ |
|||
} |
|||
.login { |
|||
position: absolute; |
|||
width: 30vw; |
|||
height: 25vw; |
|||
right: 10%; |
|||
top: 20%; |
|||
background: rgba(255, 255, 255, 0.7); |
|||
/* border: 1px solid #707070; */ |
|||
border-radius: 20px; |
|||
box-shadow: 0 0 5px #555; |
|||
} |
|||
.info-box { |
|||
position: absolute; |
|||
height: 70%; |
|||
width: 80%; |
|||
left: 10%; |
|||
top: 15%; |
|||
/* border: 1px solid #707070; */ |
|||
border-radius: 5px; |
|||
box-shadow: 0 0 5px #999; |
|||
} |
|||
.login-title { |
|||
font-size: 2rem; |
|||
font-weight: bold; |
|||
color: #43425d; |
|||
text-align: center; |
|||
margin-top: 0.4rem; |
|||
} |
|||
.info-option { |
|||
height: 15%; |
|||
} |
|||
.info-option li { |
|||
list-style: none; |
|||
float: left; |
|||
width: 50%; |
|||
display: flex; |
|||
height: 100%; |
|||
cursor: pointer; |
|||
color: #4e505d; |
|||
font-weight: bold; |
|||
box-sizing: border-box; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-bottom: 0.2rem solid rgba(255, 255, 255, 0); |
|||
} |
|||
.active { |
|||
border-bottom: 0.2rem solid #00b7cb !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div> |
|||
<left-fixed :type="type" /> |
|||
<!-- 创新政策界面 --> |
|||
<page :pageType="pageType" /> |
|||
|
|||
<sidebar :num="typeNum" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LeftFixed from '@/components/LeftFixed' |
|||
import Sidebar from '@/components/Sidebar' |
|||
import Page from '@/components/Page' |
|||
export default { |
|||
name: 'Policy', |
|||
components: { LeftFixed, Sidebar, Page }, |
|||
data () { |
|||
return { |
|||
typeNum: 1, |
|||
type: 2, |
|||
pageType: 2 |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 179 KiB |
Loading…
Reference in new issue