initial

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
+    }
+  }
+}

.editorconfig

@@ -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

.eslintignore

@@ -0,0 +1,5 @@
+/build/
+/config/
+/dist/
+/*.js
+/test/unit/coverage/

.eslintrc.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'
+  }
+}

.gitignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

@@ -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": {}
+  }
+}

README.md

@@ -0,0 +1,27 @@
+# official
+
+> 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
+
+# run unit tests
+npm run unit
+
+# run all tests
+npm test
+```
+
+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).

build/build.js

@@ -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'
+    ))
+  })
+})

build/check-versions.js

@@ -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)
+  }
+}

build/utils.js

@@ -0,0 +1,102 @@
+'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',
+        publicPath: '../../'
+      })
+    } 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')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -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'
+  }
+}

build/webpack.base.conf.js

@@ -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: ["babel-polyfill",'./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'
+  }
+}

build/webpack.dev.conf.js

@@ -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)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,149 @@
+'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 = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.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: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : 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

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,76 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: '192.168.0.103', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

config/test.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})

index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="Content-Type" content="text/html" />
+    <meta name="renderer" content="webkit" />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1,user-scalable=no"
+    />
+    <meta
+      name="description"
+      content="中德人工智能研究院(CGAII)，由四维时代与德国人工智能研究中心联合建设，主要研究高精度高自动化三维数字化技术、智能图像三维数字化识别技术、智能机器人及自动驾驶技术等多个方向。"
+    />
+    <meta
+      name="keywords"
+      content="中德人工智能研究院，中德研究院，三维数字化，人工智能，AR，slam，机械手臂，四维时代，四维看看，matterport，众趣，4DAGE"
+    />
+    <link
+      rel="shortcut icon"
+      href="https://4dscene.4dage.com/cgaii/PC/images/icon/foicon.jpg"
+    />
+    <title>CGAII</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?d1666c9e003da65c3624e85ac3c5b49c";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
+  </body>
+</html>

package.json

@@ -0,0 +1,86 @@
+{
+  "name": "official",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "test": "npm run unit",
+    "lint": "eslint --ext .js,.vue src test/unit",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
+    "jsonp": "^0.2.1",
+    "vue": "^2.5.2",
+    "vue-awesome-swiper": "^3.1.3",
+    "vue-router": "^3.0.1",
+    "weixin-js-sdk": "^1.4.0-test"
+  },
+  "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-jest": "^21.0.2",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.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",
+    "jest": "^22.0.4",
+    "jest-serializer-vue": "^0.3.0",
+    "node-notifier": "^5.1.2",
+    "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",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-jest": "^1.0.2",
+    "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"
+  ]
+}

src/App.vue

@@ -0,0 +1,79 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import wx from 'weixin-js-sdk'
+import jsonp from 'jsonp'
+
+export default {
+  name: 'App',
+  methods: {
+    wxShare () {
+      let url = location.href.split('#')[0]
+      jsonp('https://www.4dage.com/wechat/jssdk/share/?uri=' +
+  window.escape(url) + '&name=四维测试服务号', 'success_jsonp', function (err, data) {
+        if (err) {
+          console.err(err)
+          console.log('出错啦')
+        } else {
+          wx.config({
+            debug: false, // 开启调试模式
+            appId: data.appId,
+            timestamp: data.timestamp,
+            nonceStr: data.nonceStr,
+            signature: data.signature,
+            jsApiList: ['checkJsApi',
+              'onMenuShareTimeline',
+              'onMenuShareAppMessage',
+              'onMenuShareQQ',
+              'onMenuShareWeibo',
+              'hideMenuItems',
+              'showMenuItems',
+              'hideAllNonBaseMenuItem',
+              'showAllNonBaseMenuItem',
+              'translateVoice',
+              'startRecord',
+              'stopRecord',
+              'onRecordEnd',
+              'playVoice',
+              'pauseVoice',
+              'stopVoice',
+              'uploadVoice',
+              'downloadVoice']
+          })
+        }
+        wx.ready(function () {
+          var shareData = {
+            title: '中德人工智能研究院', //  标题
+            desc: '中德人工智能研究院', //  描述
+            link: window.location.href, //  分享的URL，必须和当前打开的网页的URL是一样的
+            imgUrl: 'http://4dscene.4dage.com/cgaii/PC/images/icon/foicon.jpg', //  缩略图地址
+            success: function () {
+
+            },
+            cancel: function () {
+
+            }
+          }
+          wx.onMenuShareAppMessage(shareData)
+          wx.onMenuShareTimeline(shareData)
+          wx.onMenuShareQQ(shareData)
+          wx.onMenuShareQZone(shareData)
+        })
+      })
+    }
+  },
+  mounted () {
+    this.wxShare()
+  }
+}
+</script>
+
+<style>
+  #app{
+    overflow: hidden;
+  }
+</style>

src/assets/style/public.css

@@ -0,0 +1,132 @@
+.no-background{
+  background: none!important;
+  padding-bottom: 10vw!important;
+}
+
+.btn span{
+  font-size: 14px;
+  background: #e83428;
+  padding: 10px 40px;
+  border-radius: 3px;
+  font-weight: normal;
+  cursor: pointer;
+}
+.divide-line{
+  width: 100%;
+  text-align: center;
+  margin: 20% auto;
+}
+
+.divide-line img{
+  width: 10%;
+}
+
+.fadeIn{
+  animation: fadeInRighr 0.8s ease forwards;
+}
+.vision{
+  animation: vision 0.8s ease forwards;
+}
+
+.vision-delay{
+  animation: vision-delay 0.5s ease forwards;
+  animation-delay: 0.8s;
+  opacity: 0;
+}
+
+.rb-vison{
+  animation: rb-vison 0.5s ease forwards;
+}
+
+.robotClip{
+  animation: robotClip 0.8s ease forwards;
+}
+
+.robotClip-r{
+  opacity: 1;
+  animation: robotRClip 0.8s ease forwards;
+}
+
+.mymove{
+  animation: mymove 4s infinite;
+}
+
+@keyframes mymove{
+  0% {
+      transform: scale(1.1, 1.1) translateY(-10px);
+      z-index: 9;
+  }
+  50% {
+      transform: scale(1, 1) translateY(-8px);
+      z-index: 9;
+  }
+  100% {
+      transform: scale(1.1, 1.1) translateY(-10px);
+      z-index: 9;
+  }
+}
+
+@keyframes fadeInRighr{
+  0%{
+    opacity: 0;
+    transform: translate3d(15%,0,0);
+  }
+  100%{
+    opacity: 1;
+    transform: translate3d(0,0,0);
+  }
+}
+
+@keyframes vision{
+  0%{
+    opacity: 0;
+    transform: translate3d(0,20%,0);
+  }
+  100%{
+    opacity: 1;
+    transform: translate3d(0,0,0);
+  }
+}
+
+@keyframes vision-delay{
+  0%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+
+
+@keyframes robotClip {
+  0% {
+    opacity: 0;
+    clip: rect(0, 0px, auto, 0);
+  }
+  100% {
+    opacity: 1;
+    clip: rect(0, 100vw, auto, 0);
+  }
+}
+
+@keyframes robotRClip {
+  0% {
+    opacity: 0;
+    clip: rect(0px, 100vw, auto, 100vw);
+  }
+  100% {
+    clip: rect(0px, 100vw, auto, 0px);
+    opacity: 1;
+  }
+}
+
+@keyframes robotRClipTwo {
+  0% {
+    opacity: 1;
+    clip: rect(0px, 200vw, 13.5em, 0px);
+  }
+  100% {
+    clip: rect(0px, 200vw, 13.5em, 200vw);
+    opacity: 1;
+  }
+}

src/assets/style/reset.css

@@ -0,0 +1,56 @@
+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
+header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
+table{border-collapse:collapse;border-spacing:0;}
+caption,th{text-align:left;font-weight:normal;}
+html,body,fieldset,img,iframe,abbr{border:0;}
+i,cite,em,var,address,dfn{font-style:normal;}
+[hidefocus],summary{outline:0;}
+li{list-style:none;}
+h1,h2,h3,h4,h5,h6,small{font-size:100%;}
+sup,sub{font-size:83%;}
+pre,code,kbd,samp{font-family:inherit;}
+q:before,q:after{content:none;}
+textarea{overflow:auto;resize:none;}
+label,summary{cursor:default;}
+a,button{cursor:pointer;}
+h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
+del,ins,u,s,a,a:hover{text-decoration:none;}
+body,textarea,input,button,select,keygen,legend{font:16px/1.14 'Microsoft YaHei',\5b8b\4f53;color:#333;outline:0;}
+body{background:#fff;}
+a,a:hover{color:#fff;}
+*{box-sizing: border-box}
+.button {
+  display: inline-block;
+  background-color: #00b4ed;
+  padding: 12px 30px;
+  border-radius: 5px;
+  font-size: 14px;
+  -webkit-transition: background-color .3s linear;
+  transition: background-color .3s linear;
+}
+
+.button:hover {
+  background-color: #31cdff;
+}
+
+*{
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+}
+
+
+::-webkit-scrollbar-track-piece {  
+  background-color:#ffffff;  
+}  
+::-webkit-scrollbar {  
+  width:8px;  
+  height:13px;  
+}  
+::-webkit-scrollbar-thumb {  
+  background-color:#e5e5e5;  
+  background-clip:padding-box;  
+  min-height:20px;  
+  border-radius: 3px;
+}  
+::-webkit-scrollbar-thumb:hover {  
+  background-color:#929292;  
+}  

src/components/Slide/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <a class="ctrl up" @click.stop="up">
+      <slot name="up" />
+    </a>
+    <div class="slide-layout">
+      <div :style="layoutStyle" class="continure">
+        <div v-for="(iscreen, index) in screens" :key="index" :style="itemStyle" class="item">
+          <slot name="item" :data="iscreen" :index="index" />
+        </div>
+      </div>
+      <slot name="foot" :data="screens" :index="index" />
+    </div>
+    <a class="ctrl next" @click.stop="next">
+      <slot name="next" />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    screens: {
+      default: () => [],
+      type: Array
+    },
+    current: {
+      default: 0,
+      type: Number
+    }
+  },
+  data () {
+    return {
+      index: this.current
+    }
+  },
+  computed: {
+    left () {
+      return this.index / this.screens.length * 100 + '%'
+    },
+    layoutStyle () {
+      return {width: this.screens.length + '00%', transform: `translateX(-${this.left})`}
+    },
+    itemStyle () {
+      return {width: 1 / this.screens.length * 100 + '%'}
+    }
+  },
+  watch: {
+    current (newVal) {
+      this.index = newVal
+    }
+  },
+  methods: {
+    next () {
+      this.index++
+      if (this.index === this.screens.length) {
+        this.index = 0
+      }
+    },
+    up () {
+      this.index--
+      if (!~this.index) {
+        this.index = this.screens.length - 1
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.slide-layout {
+  width: 100%;
+  max-width: 980px;
+  overflow: hidden;
+  position: relative;
+  margin: 0 auto;
+}
+
+.item {
+  height: 100%;
+  float: left;
+  position: relative;
+}
+
+.ctrl {
+  position: absolute;
+  top: 50%;
+  z-index: 9;
+  color: #fff;
+  cursor: pointer;
+  transform: translateY(-50%)
+}
+
+.up {
+  left: 40px;
+}
+
+.next {
+  right: 40px;
+}
+
+.continure {
+  overflow: hidden;
+  transition: transform .5s ease;
+}
+</style>

src/components/convention/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="convention" :style="{background:`url('${content.background}') top center no-repeat`,backgroundSize: isWide?'100% auto':'100% 100%'}">
+    <div class="c-left">
+      <div class="c-title">
+        <div>{{content.slogan1}}</div>
+        <div>{{content.slogan2}}</div>
+        <img :src="content.left" alt="">
+      </div>
+      <div class="c-mask">
+        <div class="mask-1"></div>
+        <div class="mask-2"></div>
+      </div>
+    </div>
+    <div class="c-right">
+      <img :src="content.right" alt="">
+      <div class="cr-title">
+        <img class="cr-bg" :src="require('@/assets/images/img_review_point.png')">
+        <h1 v-html="content.title"></h1>
+        <div @click="clickHandle(content.video)" class="btn"><span>Review</span></div>
+        <div class="cr-detail">{{content.detail}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const wh = { width: window.innerWidth, height: window.innerHeight }
+
+export default {
+  props: ['content'],
+  data () {
+    return {
+      wh,
+      isWide: wh.width > 770
+    }
+  },
+  methods: {
+    clickHandle (item) {
+      this.$emit('openVideo', item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import url('./style.css');
+</style>

src/components/convention/style.css

@@ -0,0 +1,137 @@
+.convention{
+  /* background: url('~@/assets/images/bg_3_1.jpg') top center no-repeat; */
+  background-size: 100% auto;
+  margin: 0 auto;
+  width: 100%;
+  padding: 5% 15%;
+}
+
+.c-left,.c-right{
+  display: inline-block;
+}
+
+.c-left{
+  padding-top: 16vw;
+  position: relative;
+}
+
+.c-left .c-title{
+  font-size: 0;
+}
+.c-left .c-title>div{
+  font-size: 36px;
+  font-weight: bold;
+  color:#fff;
+  line-height: 1.5;
+}
+
+.c-left .c-title img{
+  width: 12vw;
+}
+
+.c-left .c-mask{
+  position: absolute;
+  right: -8vw;
+  bottom: 0;
+}
+.c-left .c-mask .mask-1{
+  background: hsla(0,0%,100%,.1);
+  width: 3vw;
+  height: 3vw;
+  position: absolute;
+  left: 8vw;
+  top: -3vw;
+}
+
+.c-left .c-mask .mask-2{
+  width: 8vw;
+  height: 8vw;
+  background: hsla(0,0%,100%,.1);
+}
+
+.c-right{
+  float: right;
+  font-size: 30px;
+  font-weight: bold;
+  color: #fff;
+  position: relative;
+  height: 42vw;
+  width: 38vw;
+}
+
+.c-right img{
+  width: 12vw;
+  float: right
+}
+.c-right .cr-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.c-right .cr-title h1{
+  margin-bottom: 20px ;
+}
+
+.cr-detail{
+  margin-top: 20px;
+  width: 40vw;
+  text-align: justify;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 2;
+}
+
+.c-right .cr-bg{
+  position: absolute;
+  width: 6vw;
+  top: -18vw;
+  left: -3vw;
+}
+
+@media screen and (max-width: 1500px) {
+  .cr-detail{
+    width: 45vw;
+    font-size: 14px;
+  }
+  .c-left .c-title>div{
+    font-size: 32px;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .convention{
+    padding: 4% 15%;
+  }
+  .c-right{
+    height: 48vw;
+  }
+  .c-right .cr-title h1{
+    font-size: 28px;
+  }
+  .c-left .c-title>div{
+    font-size: 28px;
+  }
+  .cr-detail{
+    width: 45vw;
+  }
+}
+
+@media screen and (max-width: 770px) {
+  .convention{
+    padding: 9% 15%;
+  }
+  .c-left .c-title>div{
+    font-size: 24px;
+  }
+  .c-right .cr-title h1{
+    font-size: 22px;
+  }
+  .c-right{
+    height: 50vw;
+  }
+  .cr-detail{
+    font-size: 12px;
+    width: 50vw;
+  }
+}

src/components/ctitle/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="ctitle">
+    <span>
+        {{title}}
+      </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title'],
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ctitle {
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  position: relative;
+}
+
+.ctitle::before {
+  content: '';
+  width: 28px;
+  height: 28px;
+  display: inline-block;
+  background: url('https://4dscene.4dage.com/cgaii/PC/images/icon/research-icon.png') no-repeat top left;
+  background-size: 100%;
+  position: relative;
+  top: -10px;
+}
+
+span {
+  font-size: 30px;
+  font-weight: bold;
+  line-height: 1;
+  position: relative;
+  top:10px;
+  letter-spacing: 5px;
+}
+
+@media screen and (max-width: 1200px) {
+  span {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  span {
+    font-size: 20px;
+    letter-spacing: 2px;
+  }
+  .ctitle::before {
+    width: 18px;
+    height: 18px;
+    left: 12px;
+  }
+}
+</style>

src/components/describe/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="describe">
+    <div class="d-name animation" v-html="title" :class="{'l-animation':isLeft&&showAni,'r-animation':!isLeft&&showAni}"></div>
+    <div class="d-describe animation" :class="{'l-animation':isLeft&&showAni,'r-animation':!isLeft&&showAni}" :style="{transitionDelay:`${(i+1)*0.1*Math.random()}s`,float:isLeft?'none':'right'}" v-for="(item,i) in sub" :key="i">
+      <span>{{item.detail}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title', 'sub', 'isLeft', 'showAni']
+}
+</script>
+
+<style scoped>
+  .describe{
+    text-align: left;
+  }
+  .d-name{
+    font-size: 40px;
+    font-weight: bold;
+    transition: transform 0.5s ease;
+    margin-bottom: 25px;
+  }
+  .d-describe{
+    font-size: 14px;
+    width: 450px;
+    line-height: 2;
+    transition: transform 0.5s ease;
+  }
+  .l-animation{
+    transform: matrix(1, 0, 0, 1, -1300, 0);
+    transition: transform 0.5s ease;
+  }
+  .r-animation{
+    transform: matrix(1, 0, 0, 1, 900, 0);
+    transition: transform 0.5s ease;
+  }
+
+  @media screen and (max-width: 1200px) {
+    .d-name{
+      font-size: 32px;
+    }
+    .d-describe{
+      font-size: 12px;
+    }
+}
+ @media screen and (max-width: 770px) {
+    .d-name{
+      font-size: 18px;
+    }
+    .d-describe{
+      width: 268px;
+      font-size: 14px;
+    }
+  }
+
+</style>

src/components/imageQuery/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="image-dialog" v-if="screensa" @click="exitHandle">
+    <!-- <a @click="exitHandle"><i class="iconfont icon-left"></i>返回</a> -->
+    <div class="image-layout">
+      <Slide :screens="screensa" :current="0">
+        <img slot="up" :src="`${$cdn}/images/prev.png`" alt="">
+        <img slot="item" slot-scope="{data}" :src="data.img" class="image-item"  @click.stop>
+        <img slot="next" :src="`${$cdn}/images/next.png`" alt="">
+
+      </Slide>
+    </div>
+  </div>
+</template>
+
+<script>
+import Slide from '@/components/Slide'
+export default {
+  components: { Slide },
+  props: ['screens'],
+  data () {
+    return {
+      screensa: this.screens
+    }
+  },
+  watch: {
+    screens () {
+      this.screensa = this.screens
+    }
+  },
+  methods: {
+    exitHandle () {
+      this.screensa = null
+      this.$emit('exitHandle')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.image-dialog {
+  position: fixed;
+  z-index: 9999999999999999999;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.8);
+}
+
+.image-dialog a {
+  position: absolute;
+  color: #fff;
+  background-color: #fa3800;
+  left: 10px;
+  top: 10px;
+  padding: 8px 15px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.image-layout {
+  width: 100%;
+  padding-left: 20px;
+  padding-right: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+}
+
+.image-item {
+  width: 100%;
+}
+
+@media screen and (max-width: 770px) {
+  .image-layout{
+    padding: 0;
+  }
+}
+</style>

src/components/imgTitle/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <img class="img mymove" @click="goPath(url)" :src="img" alt="logo">
+    <div class="content">
+      <p v-for="(item,i) in content" :key="i">{{item.detail}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['img', 'content', 'url'],
+  methods: {
+    goPath (url) {
+      window.open(url)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .img{
+    margin-bottom: 30px;
+    cursor: pointer;
+  }
+  .content{
+    width: 600px;
+    line-height: 2;
+    font-size: 14px;
+    text-align: left;
+  }
+
+@media screen and (max-width: 1200px) {
+   .content{
+    width: 450px;
+  }
+}
+</style>

src/components/introduce/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="i-con">
+    <div class="i-title" v-html="content.title"></div>
+    <ul class="i-ul">
+      <li v-for="(item,index) in content.sub" :key="index">
+        <div class="li-title">{{item.title}}</div>
+        <div class="li-detail">{{item.detail}}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: ['content'],
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import url("./style.css");
+</style>

src/components/introduce/style.css

@@ -0,0 +1,34 @@
+.i-con{
+  margin: 50px;
+}
+.i-title{
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 1.5;
+}
+.i-ul{
+  width: 500px;
+  padding-left: 20px;
+}
+.i-ul li{
+  list-style: square;
+}
+.li-title{
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 3;
+}
+
+.li-detail{
+  font-size: 14px;
+  line-height: 2;
+}
+
+@media screen and (max-width: 1400px) {
+  .i-title{
+    font-size: 24px
+  }
+  .i-ul{
+    width: 400px;
+  }
+}

src/components/m-about/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="m-about">
+    <div class="mb-title">China-Germany Artificial Intelligence Institute</div>
+    <div class="mb-detail">
+      <p v-for="(item,i) in join.detail" :key="i">{{item}}</p>
+    </div>
+    <div class="btn">
+      <span @click="$router.push({path:'/join-us'})">Join Us</span>
+    </div>
+    <mSwiper/>
+
+  </div>
+</template>
+<script>
+import mSwiper from '@/components/m-swiper'
+
+export default {
+  props: ['join'],
+  components: {
+    mSwiper
+  }
+}
+</script>
+
+<style scoped>
+  .m-about{
+    text-align: center;
+    background: #1c1d26;
+    color: #fff;
+    padding: 40px 0;
+  }
+
+  .m-about .mb-title{
+    font-size: 20px;
+    font-weight: bold;
+    margin:0 auto 40px;
+    line-height: 1.5;
+    width: 80%;
+  }
+
+  .m-about .mb-detail{
+    text-align: left;
+    margin-bottom: 80px;
+    font-size: 14px;
+  }
+  .m-about .mb-detail p{
+    width: 88%;
+    line-height: 1.5;
+    margin: 20px auto;
+  }
+</style>

src/components/m-convention/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="m-convention">
+    <div class="img-con" :style="{background:`url('${content.mBackground}') top center no-repeat`,backgroundSize: '100% auto'}">
+      <div class="img-l">
+        <img :src="content.mL" alt="">
+      </div>
+      <div class="img-txt">
+        <div>{{content.slogan1}}</div>
+        <div>{{content.slogan2}}</div>
+      </div>
+      <div class="img-r">
+        <img :src="content.mR" alt="">
+      </div>
+    </div>
+    <div class="m-detail">
+      <div class="mi-title">{{content.mTitle}}</div>
+      <div class="mi-detail">{{content.detail}}</div>
+      <div @click="clickHandle(content.video)" class="btn"><span>Review</span></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['content'],
+  methods: {
+    clickHandle (item) {
+      this.$emit('openVideo', item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .m-convention{
+    margin: 20% auto;
+  }
+  .img-con{
+    width: 100%;
+    position: relative;
+    height: 200px;
+  }
+  .img-con .img-txt{
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.5;
+    color: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+  .img-con .img-l{
+    position: absolute;
+    bottom: -7%;
+    left: 0%;
+    width: 45%;
+    height: 188px;
+  }
+  .img-con .img-l img{
+    width: 100%;
+  }
+  .img-con .img-r{
+    position: absolute;
+    top: -7%;
+    right: 0%;
+    width: 45%;
+    height: 188px;
+  }
+  .img-con .img-r img{
+    width: 100%;
+  }
+  .m-detail{
+    text-align: center;
+    margin-top: 40px;
+  }
+  .m-detail .mi-title{
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .m-detail .mi-detail{
+    width: 90%;
+    font-size: 14px;
+    margin: 20px auto 30px;
+    text-align: left;
+    line-height: 1.5;
+    color: #656565;
+  }
+  .m-detail .btn{
+    color: #fff;
+  }
+
+</style>

src/components/m-describe/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="describe">
+    <div class="d-name" >{{title}}</div>
+    <div class="d-describe" v-for="(item,i) in sub" :key="i">
+      <span>{{item.detail}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title', 'sub']
+}
+</script>
+
+<style scoped>
+  .describe{
+    text-align: center;
+    width: 100%;
+  }
+  .d-name{
+    font-size: 20px;
+    font-weight: bold;
+    margin: 15px auto;
+    width: 90%;
+  }
+  .d-describe{
+    font-size: 14px;
+    width: 90%;
+    line-height: 2;
+    margin: 0 auto;
+  }
+
+</style>

src/components/m-expert/index.vue

@@ -0,0 +1,78 @@
+<template>
+<div class="m-expert">
+  <div class="expert-l">
+    <div class="e-title">{{experts.title}}</div>
+    <div>{{activeTxt.name}}</div>
+    <p v-for="(item, i) in activeTxt.introduce" :key="i">{{item}}</p>
+  </div>
+  <div class="expert-r">
+    <ul>
+      <li @click="clickHandle(item,i)" v-for="(item, i) in experts.expert" :key="i">
+        <img :class="{active:activeIdx===i}" :src="item.img">
+      </li>
+    </ul>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['experts'],
+  data () {
+    return {
+      activeTxt: {
+        name: this.experts.expert[0].name,
+        introduce: this.experts.expert[0].detail
+      },
+      activeIdx: 0
+    }
+  },
+  methods: {
+    clickHandle (item, idx) {
+      this.activeIdx = idx
+      this.activeTxt = {
+        name: item.name,
+        introduce: item.detail
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.m-expert{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 5%;
+}
+.expert-l{
+  color: #fff;
+  text-align: left;
+  line-height: 1.4;
+  font-weight: bold;
+}
+
+.expert-l>div:first-child{
+  font-size: 18px;
+}
+.expert-l>div{
+  margin: 20px auto;
+  font-size: 14px;
+}
+
+.expert-l>p{
+  font-size: 14px;
+}
+
+.expert-r ul li img{
+  width: 20vw;
+  margin-top: 1vw;
+  border: 2px solid #fff;
+}
+
+.expert-r ul li .active{
+  border: 2px solid #e6373c;
+}
+</style>

src/components/m-imgTitle/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="mi-con">
+    <img class="img mymove" @click="goPath(url)" :src="img" alt="logo">
+    <div class="content">
+      <p v-for="(item,i) in content" :key="i">{{item.mDetail}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['img', 'content', 'url'],
+  methods: {
+    goPath (url) {
+      window.open(url)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .mi-con{
+    width: 100%;
+    text-align: center;
+  }
+  .img{
+    width: 35%;
+    margin: 30px auto;
+  }
+  .content{
+    width: 94%;
+    margin: 0 auto;
+    line-height: 2;
+    font-size: 14px;
+    text-align: center;
+  }
+</style>

src/components/m-introduce/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="i-con">
+    <div class="i-title" v-html="content.title"></div>
+    <ul class="i-ul">
+      <li v-for="(item,index) in content.sub" :key="index">
+        <div class="li-title">{{item.title}}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: ['content'],
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style scoped>
+.i-con{
+  text-align: center;
+  width: 100%;
+  line-height: 1.5;
+}
+.i-title{
+  font-size: 18px;
+  font-weight: bold;
+  width: 96%;
+  margin: 0 auto;
+}
+.i-ul{
+  margin: 20px auto 0;
+  width: 94%;
+
+}
+.i-ul li{
+  font-size: 14px;
+}
+</style>

src/components/m-rotateimg/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="r-img">
+    <div class="flexable"></div>
+    <div class="rotate">
+      <img :src="imgs[1].img" alt>
+    </div>
+    <div class="r-normal" @click="clickHandle">
+      <img :src="imgs[0].img" alt>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['imgs'],
+  methods: {
+    clickHandle () {
+      this.$emit('clickHandle')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.r-img {
+  position: relative;
+  padding: 20vw 0;
+}
+.flexable{
+  height: 50vw;
+  width: 100%;
+
+}
+.r-img div:not(:first-child) {
+  width: 70%;
+  height: 50vw;
+  margin: 0 auto;
+  position: absolute;
+  border: solid #fff 4px;
+  box-shadow: 0px 0px 10px #999;
+  left: 50%;
+  top: 10vw;
+  transform: translateX(-50%);
+}
+
+.r-img div img {
+  width: 100%;
+  height: 100%;
+}
+
+.r-img .rotate {
+  transform: translateX(-50%) rotate(17deg)!important;
+  z-index: 0;
+}
+
+</style>

src/components/m-swiper/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="swiper-container">
+    <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
+      <swiper-slide class="swiper-slide" v-for="(item,index) in imgs" :key="index">
+          <img class="main-img" :src="item">
+      </swiper-slide>
+      <div class="swiper-pagination" id="pagination" slot="pagination">
+        <div class="swiper-button-prev swiper-button-white"></div>
+        <div class="swiper-button-next swiper-button-white"></div>
+      </div>
+    </swiper>
+  </div>
+</template>
+<script>
+import 'swiper/dist/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+
+export default {
+  data () {
+    return {
+      imgs: [
+        this.$cdn + '/images/slider_img/slider_1.jpg',
+        this.$cdn + '/images/slider_img/slider_2.jpg',
+        this.$cdn + '/images/slider_img/slider_3.jpg',
+        this.$cdn + '/images/slider_img/slider_4.jpg',
+        this.$cdn + '/images/slider_img/slider_5.jpg',
+        this.$cdn + '/images/slider_img/slider_6.jpg',
+        this.$cdn + '/images/slider_img/slider_7.jpg',
+        this.$cdn + '/images/slider_img/slider_8.jpg'
+      ],
+
+      swiperOption: {
+        slidesPerView: 'auto',
+        autoplay: true,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        // pagination: {
+        //   el: '.swiper-pagination'
+        // },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        },
+        loop: true,
+        paginationClickable: true,
+        on: {
+          progress: function () {
+            var a = this
+            var b, c, d
+            for (b = 0; b < a.slides.length; b++) {
+              c = a.slides[b]
+              d = c.progress
+              var scale = 1 - Math.min(Math.abs(0.2 * d), 1)
+              var es = c.style
+              es.opacity = 1 - Math.min(Math.abs(d / 2), 1)
+              es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform =
+                'translate3d(0px,0,' +
+                -Math.abs(400 * d) +
+                'px) scale(' +
+                scale +
+                ')'
+            }
+          },
+          setTransition: function (b) {
+            var a = this
+            for (var c = 0; c < a.slides.length; c++) {
+              var es = a.slides[c].style
+              es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration =
+                b + 'ms'
+            }
+          }
+        }
+      }
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  }
+}
+</script>
+<style type="text/css" scoped>
+.swiper-container {
+  width: 100%;
+  -webkit-perspective: 1200px;
+  -moz-perspective: 1200px;
+  -ms-perspective: 1200px;
+  perspective: 1200px;
+}
+
+.swiper-wrapper {
+  margin-top: 10px;
+}
+
+.swiper-slide {
+  width: 60%;
+  transform-style: preserve-3d;
+}
+
+.swiper-slide .main-img {
+  width: 100%;
+  margin: 0 auto;
+  display: block;
+  border-radius: 10px;
+}
+
+#pagination {
+  position: absolute;
+  bottom: 100px;
+  width: 100%;
+
+}
+
+.swiper-button-white{
+  -webkit-tap-highlight-color:transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+#pagination .swiper-pagination-bullet {
+  width: 9.5%;
+  float: left;
+  margin: 0 0 0 6.15%;
+  background: 0;
+  opacity: 1;
+}
+
+.swiper-pagination-bullet i {
+  background: #41203f;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius: 50px;
+  display: block;
+  font-style: normal;
+  text-align: center;
+  margin: 0 auto;
+  color: #f5b55c;
+}
+
+.swiper-pagination-bullet-active i {
+  transform: scale(1.5);
+  background-size: auto 100%;
+  color: #815d4b;
+}
+
+@media screen and (min-height: 481px) {
+  .swiper-wrapper {
+    margin-top: 20px;
+  }
+  #pagination {
+    bottom: 110px;
+  }
+}
+
+@media screen and (min-height: 569px) {
+  .swiper-wrapper {
+    margin-top: 40px;
+  }
+  #pagination {
+    bottom: 120px;
+  }
+  .swiper-pagination-bullet i {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 15px;
+  }
+}
+</style>
+<style type="text/css">
+</style>

src/components/recruit/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div>
+    <div class="position-recruit">
+      <div class="position-recruit-search">
+        <div class="position-recruit-title">Job Search</div>
+        <div class="position-recruit-search-list">
+          <div class="position-recruit-search-list_item">
+            <span>Workplace：</span>
+            <span
+              v-for="address in addresss"
+              :key="address"
+              class="span_styl"
+              :class="{active: aIndex === address}"
+              @click="aIndex = address"
+            >{{address}}</span>
+          </div>
+          <div class="position-recruit-search-list_item">
+            <span>Position Category：</span>
+            <span
+              v-for="type in types"
+              :key="type"
+              class="span_styl"
+              :class="{active: tIndex === type}"
+              @click="tIndex = type"
+            >{{type}}</span>
+          </div>
+        </div>
+        <div class="position-recruit-search-con" :class="{'phone-input': isMobile}">
+          <span>
+            <input
+              type="text"
+              placeholder="Please enter search terms"
+              class="form_input"
+              v-model="filterVal"
+            >
+          </span>
+          <span class="search-btn">Searching</span>
+        </div>
+      </div>
+      <div class="position-recruit-list">
+        <div class="position-recruit-title" style="border-bottom: none;">Position Listing</div>
+        <div class="position-recruit-list-con">
+          <template v-if="isMobile">
+            <div v-for="p in filter" :key="p.name" class="t-table">
+              <div class="t-l">
+                <div>{{p.name}}</div>
+                <div>
+                  <span>{{p.address}},</span>
+                  <span>number:{{p.count}},</span>
+                  <span>time:{{p.date}}</span>
+                </div>
+              </div>
+              <div class="t-r">
+                <span class="apply-btn" @click="currItem=p">Apply</span>
+              </div>
+            </div>
+            <div v-if="!filter.length" style="text-align: center;">No Position</div>
+          </template>
+          <table class="recruit-list-table" v-else>
+            <tr>
+              <th>Position</th>
+              <th>Position Category</th>
+              <th style="text-align: center;">Workplace</th>
+              <th style="text-align: center;">Operation</th>
+            </tr>
+            <tr v-for="p in filter" :key="p.name">
+              <td>{{p.name}}</td>
+              <td>{{p.type}}</td>
+              <td style="text-align: center;">
+                <span style="padding-right: 10px;">{{p.address}}</span>
+              </td>
+              <td style="text-align: center;">
+                <span class="apply-btn" @click="currItem=p">Apply</span>
+              </td>
+            </tr>
+            <tr v-if="!filter.length">
+              <td colspan="4" style="text-align: center;">No Position</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <!-- <nav class="pagination_sty">
+        <ul class="pagination">
+          <li class="disabled">
+            <a href="javascript:;" class="page_nav">首页 </a>
+          </li>
+          <li class="disabled"><a href="javascript:;" class="page_nav">上一页 </a></li>
+          <li class="active"><a href="javascript:;" class="page_num">1 </a></li>
+          <li class="disabled"><a href="javascript:;" class="page_nav">下一页 </a></li>
+          <li class="disabled"><a href="javascript:;" class="page_nav">尾页 </a></li>
+        </ul>
+      </nav>-->
+    </div>
+
+    <div class="model" v-show="currItem" @click="currItem = null">
+      <model :item="currItem"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import model from './model.vue'
+import browser from '@/util/browser.js'
+
+const data = [
+  {
+    name: 'Image Algorithm Researcher (Mechanical Arm Vision)',
+    type: 'Development',
+    address: 'Zhuhai',
+    count: 1,
+    date: '2018-06-12',
+    desc:
+      '1. Responsible for the development and optimization of image recognition algorithm based on robotic arm.',
+    req: `1. Responsible for the development and optimization of image recognition algorithm based on robotic arm.<br>
+          2. Experienced in using graphics and image open source like OpenCV/OpenGL/PCL etc;<br>
+          3. Experience in programming in Linux and Windows system environment.<br>
+          4. Fast learner, familiar with common data structure and algorithm, ability to analyze and optimize calculation logic and improve performance.`,
+    bonus: `1. Experience in projects of embedded image recognition algorithm is preferred.<br>
+            2. Experience in related projects using HALCON computer vision base is preferred.`
+  },
+  {
+    name: 'Image Algorithm Researcher (SLAM)',
+    type: 'Development',
+    address: 'Zhuhai',
+    count: 1,
+    date: '2018-06-12',
+    desc: `1.Transplantation and production of algorithm<br>
+           2.Develop SLAM algorithm for mobile devices such as camera and IMU in unknown environments.<br>
+           3.Develop path planning algorithm for autonomous navigation of mobile robots`,
+    req: `1. Proficient in using C/C++ and OpenCV, and programming in Linux environment, familiar with ROS<br>
+          2. Familiar with visual SLAM algorithm, understand its basic theory, familiar with vision sensor and IMU sensor calibration.<br>
+          3. Fast learner`,
+    bonus: `1. Experienced in SLAM development such as ORB SLAM, SVO, DSO, LSD SLAM is preferred.<br>
+            2. Experienced in embedded system visual algorithm development or transplantation is preferred.<br>
+            3. Experienced in ROS development is preferred`
+  },
+  {
+    name: 'Graphics Algorithms Researcher (SfM Direction)',
+    type: 'Development',
+    address: 'Zhuhai',
+    count: 1,
+    date: '2018-06-12',
+    desc: `1.Responsible to develop and optimize 3D reconstruction algorithms of images;<br>
+           2.Build new functionality based upon existing 3D reconstruction algorithms;<br>
+           3.Work closely with your teams to solve other problems.`,
+    req: `1.MS or PhD degree in Pattern Recognition, Communications Engineering, Computer Science, Automation, Mathematics or related field; <br>
+          2.Demonstrated knowledge on C++ and MATLAB and strong programming skills;<br>
+          3.Experience with OpenCV/ceres-solver or related libraries;<br>
+          4.Experience programming using Linux and Windows;<br>
+          5.Fast learner, proficiency in English reading; <br>
+          6.  Proficiency in commonly used data structures and algorithms, ability to analyze and optimize calculation logic to improve performance<br>
+          7.  Post-graduate students with no work experience but are willing to engage in 3D reconstruction are also accepted.`,
+    bonus: `1. Experienced in related projects of feature extraction and matching, based on image 3D reconstruction (SFM) is preferred.`
+  },
+  {
+    name:
+      'Graphics Algorithms Researcher (Deep Learning for Visual Understanding Direction)',
+    type: 'Development',
+    address: 'Zhuhai',
+    count: 1,
+    date: '2018-06-12',
+    desc: `1.Researchers are responsible to investigate feature point descriptors for deep learning, stereo vision, SLAM, and depth prediction method of images.`,
+    req: `1. Familiar with clustering, classification, regression, graph model and other machine learning algorithms.<br>
+          2. Proficient in one or more of pytorch, tensorflow and other deep learning frameworks.<br>
+          3. Understand classical computer vision tasks, such as SFM, SLAM, object detection, etc.<br>
+          4. Relevant conmputer vision project experience or intent to apply deep learning methods to classic computer vision task.`,
+    bonus: `1. Experienced in related projects of feature extraction and matching, based on image 3D reconstruction (SFM) is preferred.`
+  },
+  {
+    name: 'Graphics Algorithms Researcher (Panoramic Images Mapping Direction)',
+    type: 'Development',
+    address: 'Zhuhai',
+    count: 1,
+    date: '2018-06-12',
+    desc: `1.Responsible to develop and optimize fisheye camera calibration algorithms.<br>
+           2.Responsible to develop and optimize panoramic image mapping algorithms.`,
+    req: `1.MS or PhD degree in Pattern Recognition, Communications Engineering, Computer Science, Automation, Mathematics or related field; <br>
+          2.Demonstrated knowledge on C++ and MATLAB and strong programming skills;<br>
+          3.Experience with OpenCV/OpenGL or related libraries. <br>
+          4.Solid understanding of fisheye camera calibration and hardware structure as well as related parameters.<br>
+          5.Proficiency in commonly used data structures and algorithms, ability to analyze and optimize calculation logic to improve performance`,
+    bonus: `1. Experienced in related projects of feature extraction and matching, based on image 3D reconstruction (SFM) is preferred.`
+  },
+  {
+    name: 'Web Designer',
+    type: ' Design',
+    address: 'Wuhu',
+    count: 1,
+    date: '2018-06-12',
+    desc: `1. Analyze the location and style of the website according to the characteristics of the website audience.<br>
+           2. Responsible for visual expression with multiple creative expressions.<br>
+           3. Website UI (user interface) and UE (user experience) design;`,
+    req: `1. Experience in typesetting, color matching, font design, techniques of lighting and material quality.<br>
+          2. Proficient in web design related software like Photoshop, Illustrator, Fireworks, Dreamweaver<br>
+          3. Proficient in web design specification, web layout, production process, layout, cut and interactive knowledge.`,
+    bonus: '1. Ability to use some front-end code HTML and CSS.'
+  },
+  {
+    name: 'Graphic Designer',
+    type: ' Design',
+    address: 'Wuhu',
+    count: 1,
+    date: '2018-06-12',
+    desc: `1. Responsible for the company's graphic design of products and projects both in PC and mobile<br>
+           2. Responsible for designing and developing all projects from concept to production and related publicity and promotion plans.<br>
+           3. Responsible for the visual design of daily operation promotion topics, such as corporate image VI design, publicity materials design, exhibition frame design, packaging design, PPT design, etc.<br>
+           4. Other design related work arranged by the superior`,
+    req: `1. Proficiency in using design software like Dreamweaver, Fireworks, Photoshop, Illustrator, PageMaker, InDesign, Fan Tart etc.<br>
+          2. Good design ability, color sense and art skills; knowledge of typesetting, color matching, font design, printing material and printing specifications.`
+  },
+  {
+    name: 'Embedded Hardware Engineer',
+    type: ' Hardware',
+    address: 'Zhuhai',
+    count: 1,
+    date: '2018-06-12',
+    desc: `1. Solid understanding of digital analog circuit<br>
+           2. Familiar with the ARM processor system, the DDR memory system<br>
+           3. 3. Ability to design of EMC`,
+    req: `1. With knowledge of FPGA programmable logic device Preferred`
+  }
+]
+
+export default {
+  data () {
+    return {
+      position: data,
+      aIndex: 'All',
+      tIndex: 'All',
+      filterVal: '',
+      isMobile: browser.mobile,
+      currItem: undefined
+    }
+  },
+  computed: {
+    types () {
+      let ts = ['All']
+      this.position.forEach(p => {
+        if (!~ts.indexOf(p.type)) {
+          ts.push(p.type)
+        }
+      })
+      return ts
+    },
+    addresss () {
+      let ts = ['All']
+      this.position.forEach(p => {
+        if (!~ts.indexOf(p.address)) {
+          ts.push(p.address)
+        }
+      })
+      return ts
+    },
+    filter () {
+      let filterPosition = this.position
+      if (this.aIndex !== 'All') {
+        filterPosition = filterPosition.filter(p => p.address === this.aIndex)
+      }
+
+      if (this.tIndex !== 'All') {
+        filterPosition = filterPosition.filter(p => p.type === this.tIndex)
+      }
+
+      if (this.filterVal) {
+        filterPosition = filterPosition.filter(p => {
+          for (let key of ['name', 'type', 'address']) {
+            if (!p[key].indexOf) continue
+            let index = p[key].indexOf(this.filterVal)
+            if (~index) {
+              return true
+            }
+          }
+          return false
+        })
+      }
+      return filterPosition
+    }
+  },
+  components: {
+    model
+  }
+}
+</script>
+
+<style lang="css" scoped>
+@import url("./style.css");
+</style>

src/components/recruit/model.vue

@@ -0,0 +1,105 @@
+<template>
+<div class="m-layout" v-if="item" @click.stop>
+  <h2 class="title">{{item.name}}</h2>
+  <div class="desc">
+    <p><span>Category</span>{{item.type}}</p>
+    <p><span>Location</span>{{item.address}}</p>
+    <p><span>number</span>{{item.count}}</p>
+    <p><span>Date posted</span>{{item.date}}</p>
+  </div>
+  <div class="body">
+    <div>
+      <span>Description</span>
+      <p v-html="item.desc"></p>
+    </div>
+    <div>
+      <span>Requirements</span>
+      <p v-html="item.req"></p>
+    </div>
+    <div v-if="item.bonus">
+      <span>Preference</span>
+      <p v-html="item.bonus"></p>
+    </div>
+    <div>
+      <p>To apply, please send your resume to this e-mail address: rs@4dage.com (Email Subject: Name + the position that you are applying for)</p>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['item']
+}
+</script>
+
+<style scoped>
+.m-layout {
+  position: absolute;
+  max-width: 980px;
+  background-color: #fff;
+  width: 100%;
+  width: calc(100% - 40px);
+  padding: 20px;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  box-sizing: border-box;
+}
+
+.m-layout span {
+  font-weight: 700;
+  font-size: 12px;
+  color: rgb(86, 86, 86)
+}
+
+.m-layout p {
+  font-size: 12px;
+  color: rgb(86, 86, 86);
+  line-height: 30px;
+}
+
+.desc {
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.desc p {
+  float: left;
+  margin-right: 10px;
+}
+
+.desc p span::after {
+  content: ':';
+  margin: 0 5px;
+}
+
+.title {
+  color: #e8383d;
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+
+.body {
+  border-top: 1px solid rgb(221, 221, 221);
+}
+
+.body>div {
+  margin-top: 25px;
+}
+
+@media screen and (max-width: 500px) {
+  .m-layout span {
+    display: none;
+  }
+
+  .body>div {
+    margin-top: 15px;
+  }
+
+  .m-layout {
+    max-height: 70%;
+    overflow-y: scroll;
+  }
+}
+</style>

src/components/recruit/style.css

@@ -0,0 +1,628 @@
+.pagination {
+    overflow: hidden;
+    display: inline-block;
+    margin: 0 auto;
+    width: 100%;
+    height: 50px;
+    background: #fff;
+  }
+
+  .pagination li {
+    margin: 5px;
+    color: #666;
+    float: left;
+  }
+
+  .pagination li:first-child {
+    margin-left: 0;
+  }
+
+  .pagination a {
+    display: inline-block;
+    text-align: center;
+    line-height: 30px;
+    font-size: 12px;
+    text-decoration: none;
+    color: #000;
+  }
+
+  .pagination li a:hover {
+    background: #e8383d;
+    color: #fff;
+  }
+
+  .pagination li:a {
+    color: #000;
+  }
+
+  .pagination a:active {
+    background: #e8383d;
+    color: #fff;
+  }
+
+  .pagination .active >a {
+    background: #e8383d;
+    color: #fff;
+  }
+
+  .page_num {
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    padding: 0;
+  }
+
+  .page_nav {
+    padding: 0 15px;
+  }
+  .join-us {
+    width: 100%;
+    font-size: 40px;
+    overflow: hidden;
+    transition: all 0.2s;
+    padding-top: 3.1em;
+    background: #f6f6f6;
+  }
+
+  .images {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+  }
+
+  .images .position {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+  }
+
+  .images .position .slider-bg {
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .7);
+  }
+
+  .join-us-con {
+    width: 100%;
+    background: url(http://pa7aajl2g.bkt.clouddn.com/images/recruit-bg.jpg) center top no-repeat;
+    background-size: 100%;
+    background-color: #f6f6f6;
+  }
+
+  .fix-h3 {
+    letter-spacing: 5px;
+  }
+
+  .join-us_body {
+    padding-top: 5.8em;
+  }
+
+  .partners-title {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+  }
+
+  .partners-title >.image {
+    height: 100px;
+    line-height: 100px;
+    width: 0.625em;
+  }
+
+  .partners-title >img {
+    width: 0.625em;
+    height: 0.625em;
+  }
+
+  .partners-title >h3 {
+    font-size: 0.75em;
+    margin-top: 0.8em;
+  }
+
+  .join-div-item,
+  .travel-div-item {
+    margin: 210px auto;
+  }
+
+  .join-environment {
+    width: 100%;
+    display: flex;
+    height: 10em;
+  }
+
+  .join-working {
+    display: flex;
+    width: 100%;
+    margin-top: 10em;
+    align-items: center;
+  }
+
+  .join-environment_left {
+    width: 40%;
+  }
+
+  .join-environment_left_con {
+    width: 100%;
+    position: relative;
+  }
+
+  .join-environment_right, .join-working_right {
+    margin-left: 1em;
+    width: 55%;
+    display: flex;
+    align-items: center;
+  }
+
+  .join-environment-txt {
+    margin-left: 1.5em;
+    text-align: left;
+  }
+
+  .join-working_left {
+    flex: 0 0 50%;
+  }
+
+  .join-working-txt {
+    padding-left: 30%;
+    text-align: left;
+    box-sizing: border-box;
+  }
+
+  .join-environment-txt_title,
+  .join-working-txt_title {
+    letter-spacing: 2px;
+    width: 9em;
+    font-size: 0.7em;
+    font-weight: bold;
+    line-height: 1.1em;
+    white-space: pre;
+    color: #3E3E3E;
+  }
+
+  .join-working-txt_title {
+    width: 10em;
+  }
+
+  .join-environment-txt_dec >ul >li {
+    margin-left: 1.5em;
+    list-style: square;
+    font-weight: bold;
+    font-size: 14px;
+    color: #3E3E3E;
+    letter-spacing: 0.1em;
+  }
+
+  .join-working-txt_dec >ul >li {
+    margin: 0.5em 0 0.4em 1.5em;
+    list-style: square;
+    font-weight: bold;
+    font-size: 14px;
+    color: #3E3E3E;
+    letter-spacing: 0.1em;
+  }
+
+  .join-environment-txt_dec >.friend-dec >li {
+    color: #565656;
+  }
+
+  .join-environment-txt_dec >ul >.join-environment-txt-p {
+    padding-left: 1.6em;
+    width: 60%;
+    font-size: 13px;
+    line-height: 2.3em;
+    box-sizing: border-box;
+  }
+
+  .join-working-txt_dec >ul >p {
+    padding-left: 1.5em;
+    width: 60%;
+    font-size: 13px;
+    line-height: 2.3em;
+    box-sizing: border-box;
+  }
+
+  .join-working-txt_dec >ul >p {
+    width: 80%;
+  }
+
+  .join-environment-txt_dec {
+    margin-top: 1.2em;
+  }
+
+  .join-working-txt_dec {
+    margin-top: 1.1em;
+  }
+
+  .join-environment-txt_dec,
+  .join-working-txt_dec >p {
+    font-size: 0.4em;
+    line-height: 2.3em;
+  }
+
+  .join-environment-img-item {
+    width: 10.25em;
+    height: 9em;
+    position: absolute;
+    right: 0;
+    display: flex;
+    padding: 0.2em;
+    background: #fff;
+    cursor: pointer;
+  }
+  .join-environment-img-item >img {
+    width: 100%;
+  }
+
+  .join-working-img-item {
+    width: 10.25em;
+    height: 9em;
+    right: 0;
+    display: flex;
+    padding: 0.2em;
+    background-color: #fff;
+    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+  }
+
+  .join-working_left {
+    float: right;
+    width: 45%;
+  }
+
+  .div-skew {
+    width: 9.25em;
+    padding: 0.2em;
+    background: #fff;
+    transform: rotate(17deg);
+    -moz-transform: rotate(17deg);
+    -webkit-transform: rotate(17deg);
+    -o-transform: rotate(17deg);
+    -ms-transform: rotate(17deg);
+    box-shadow: 0px 0px 10px #999;
+  }
+
+  .position-recruit {
+    position: relative;
+    font-size: 16px;
+    background: #fff;
+    width: 100%;
+    text-align: left;
+    max-width: 1400px;
+    margin: 4em auto;
+    /* width: 80%; */
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .position-recruit-list {
+    margin-top: 3em;
+  }
+
+  .position-recruit-title {
+    color: #e8383d;
+    width: 100%;
+    font-weight: bold;
+    padding-bottom: 1.1em;
+    font-size: 1.2em;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .position-recruit-search-list {
+    margin: 1.1em 0;
+  }
+
+  .position-recruit-search-list_item {
+    line-height: 1.8em;
+  }
+
+  .position-recruit-search-list_item >span:first-child {
+    margin-right: 0;
+  }
+
+  .position-recruit-search-list_item >span {
+    margin-right: 1.8em;
+  }
+
+  .position-recruit-search-con {
+    height: 1.8em;
+    display: flex;
+  }
+
+  .search-btn,
+  .apply-btn {
+    background: #e8383d;
+    color: #fff;
+    line-height: 1.8em;
+    width: 7em;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .apply-btn {
+    display: inline-block;
+    border-radius: 5px;
+    font-size: 14px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    transition: background-color .3s linear
+  }
+
+  .search-btn {
+    transition: background-color .3s linear
+  }
+
+  .search-btn:hover,
+  .apply-btn:hover {
+    background-color: #e3353d;
+  }
+
+  .form_input {
+    width: 15em;
+    background: #ededed;
+    border: none;
+    height: 100%;
+    padding-left: 0.8em;
+  }
+
+  .recruit-list-table {
+    text-align: left;
+    width: 100%;
+  }
+
+  .recruit-list-table th {
+    padding: 1.1em 0 1.1em 0;
+    font-weight: bold;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .recruit-list-table td {
+    padding: 1.1em 0 1.1em 0;
+
+  }
+
+
+  .recruit-list-table td:last-child {
+    /* padding-right: 2.2em; */
+    line-height: 2em;
+    height: 2em;
+  }
+
+  .pagination_sty {
+    margin-top: 2em;
+  }
+
+  .span_styl {
+    cursor: pointer;
+    padding-bottom: 0.3em;
+  }
+
+  .span_styl:hover {
+    border-bottom: 1px solid #333;
+  }
+
+  .active {
+    border-bottom: 1px solid #333;
+  }
+
+  /*.clearfix:after{content: "";display: block;clear: both;}
+  .clearfix{zoom: 1;}*/
+
+  /*设备兼容*/
+
+  @media screen and (min-width: 1755px) and (max-width: 1805px) {
+    .join-us {
+      font-size: 40px;
+    }
+  }
+
+  @media screen and (min-width: 1705px) and (max-width: 1755px) {
+    .join-us {
+      font-size: 38px;
+    }
+
+  }
+
+  @media screen and (min-width: 1655px) and (max-width: 1705px) {
+    .join-us {
+      font-size: 37px;
+    }
+
+  }
+
+  @media screen and (min-width: 1605px) and (max-width: 1655px) {
+    .join-us {
+      font-size: 36px;
+    }
+  }
+
+  @media screen and (min-width: 1555px) and (max-width: 1605px) {
+    .join-us {
+      font-size: 34px;
+    }
+
+    .join-environment-txt_dec >ul >p {
+      width: 60%;
+    }
+  }
+
+  @media screen and (min-width: 1505px) and (max-width: 1555px) {
+    .join-us {
+      font-size: 32px;
+    }
+
+    .join-environment-txt_dec >ul >p {
+      width: 60%;
+    }
+  }
+
+  @media screen and (min-width: 1455px) and (max-width: 1505px) {
+    .join-us {
+      font-size: 31px;
+    }
+
+    .join-environment-txt_dec >ul >p {
+      width: 55%;
+    }
+
+    .join-working {
+      margin-top: 9em;
+    }
+  }
+
+  @media screen and (min-width: 1405px) and (max-width: 1455px) {
+    .join-us {
+      font-size: 28px;
+    }
+
+    .join-environment-txt_dec >ul >p {
+      width: 60%;
+    }
+  }
+
+  @media screen and (min-width: 1355px) and (max-width: 1405px) {
+    .join-us {
+      font-size: 28px;
+    }
+
+    .join-environment-txt_dec >ul >p {
+      width: 60%;
+    }
+
+    .join-working {
+      margin-top: 9em;
+    }
+  }
+
+  @media screen and (min-width: 1305px) and (max-width: 1355px) {
+    .join-us {
+      font-size: 26px;
+    }
+
+    .join-environment_left {
+      width: 38%;
+    }
+    .join-environment-txt_dec >ul >p {
+      width: 60%;
+    }
+
+    .join-working {
+      margin-top: 10em;
+    }
+  }
+
+  @media screen and (min-width: 1255px) and (max-width: 1305px) {
+    .join-us {
+      font-size: 25px;
+    }
+
+    .join-working {
+      margin-top: 8em;
+    }
+
+    .join-environment-txt_dec >ul >p {
+      width: 60%;
+    }
+  }
+
+  @media screen and (max-width: 1305px) {
+    .join-us {
+      font-size: 25px;
+    }
+
+    .join-environment {
+      height: 13em;
+    }
+
+    .join-environment_left {
+      width: 35%;
+    }
+
+    .join-environment-txt_dec >ul >p {
+      width: 70%;
+    }
+  }
+
+.model {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0,0,0,0.3);
+  z-index: 99999;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.phone-title {
+  text-align: center;
+  border: none;
+}
+
+.phone-input {
+  height: auto;
+  margin-top: 30px;
+}
+
+.phone-input > span:nth-child(1) {
+  flex: 1;
+}
+
+.phone-input > span:nth-child(1) input {
+  width: 100%;
+  height: 50px;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.phone-input > span:nth-child(2) {
+  display: none;
+}
+
+.phone-table {
+  margin-top: 30px;
+  width: 100%;
+  color: #505050
+}
+
+.phone-table .apply-btn {
+  margin-bottom: 20px;
+}
+
+.phone-table .name {
+  font-size: 16px;
+}
+
+.phone-table .maker {
+  font-size: 14px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+} 
+
+
+
+.t-table{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid #f5f5f5;
+  padding: 20px 0;
+}
+
+.t-table .t-l{
+  line-height: 1.5;
+}
+.t-table .t-l>div:last-child{
+  font-size: 14px;
+  margin-top: 10px;
+}
+.t-r .apply-btn{
+  width: 8em;
+}

src/components/rotateimg/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="r-img">
+    <div class="r-normal" @click="clickHandle">
+      <img :src="imgs[0].img" alt>
+    </div>
+    <div class="rotate">
+      <img :src="imgs[1].img" alt>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['imgs'],
+  methods: {
+    clickHandle () {
+      this.$emit('clickHandle')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.r-img {
+  position: relative;
+}
+
+.r-img div {
+  width: 20vw;
+  height: 15vw;
+  position: absolute;
+  top: 0;
+  z-index: 99;
+  border: 8px #fff solid;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.r-img div img {
+  transition: transform 0.3s ease;
+  width: 100%;
+  height: 100%;
+}
+.r-img div:hover img {
+  transform: scale(1.1);
+  transition: transform 0.3s ease;
+}
+
+.r-img .rotate {
+  transform: rotate(17deg);
+  z-index: 0;
+}
+
+@media screen and (max-width: 770px) {
+  .r-img div {
+    top: 18vw;
+  }
+}
+</style>

src/components/swiper/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="v-swiper">
+    <swiper :options="swiperOption">
+      <swiper-slide v-for="(item,index) in imgs" :key="index" class="swiper-con">
+        <img class="imgSty" :src="item">
+      </swiper-slide>
+      <div class="swiper-pagination" slot="pagination"></div>
+    </swiper>
+  </div>
+</template>
+<script>
+import 'swiper/dist/css/swiper.css'
+import {swiper, swiperSlide} from 'vue-awesome-swiper'
+
+export default {
+  data () {
+    return {
+      imgs: [
+        this.$cdn + '/images/slider_img/slider_1.jpg',
+        this.$cdn + '/images/slider_img/slider_2.jpg',
+        this.$cdn + '/images/slider_img/slider_3.jpg',
+        this.$cdn + '/images/slider_img/slider_4.jpg',
+        this.$cdn + '/images/slider_img/slider_5.jpg',
+        this.$cdn + '/images/slider_img/slider_6.jpg',
+        this.$cdn + '/images/slider_img/slider_7.jpg',
+        this.$cdn + '/images/slider_img/slider_8.jpg'
+      ],
+
+      swiperOption: {
+        // effect:'cube',
+        loop: true,
+        speed: 2000,
+        autoplay: {
+          delay: 0,
+          disableOnInteraction: false
+        },
+        slidesPerView: 8,
+        spaceBetween: 15,
+        pagination: {
+          el: '.swiper-pagination',
+          type: ''
+        },
+        freeMode: true
+      }
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  }
+}
+
+</script>
+<style type="text/css" scoped>
+  .v-swiper {
+    position: relative;
+    top: -6vw;
+  }
+
+  .imgSty {
+    border-radius: 8px;
+    width: 95%;
+  }
+
+  .swiper-container {
+    height: 400px;
+  }
+
+  .swiper-con:nth-child(even){
+    position: relative;
+    top: 80px;
+  }
+  @media screen and (max-width: 1200px) {
+    .swiper-container{
+      height: 250px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .swiper-container{
+      height: 200px;
+    }
+  }
+</style>
+<style type="text/css">
+  .swiper-container-free-mode>.swiper-wrapper {
+    -webkit-transition-timing-function: linear!important;
+    -moz-transition-timing-function: linear!important;
+    -ms-transition-timing-function: linear!important;
+    -o-transition-timing-function: linear!important;
+    transition-timing-function: linear!important;
+  }
+</style>

src/components/vcenter/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <table>
+    <tr>
+      <td>
+        <slot />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<style scoped>
+table {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/main.js

@@ -0,0 +1,22 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import axios from 'axios'
+import 'babel-polyfill'
+
+Vue.config.productionTip = false
+
+Vue.prototype.$bus = new Vue()
+Vue.prototype.$cdn = 'https://4dscene.4dage.com/cgaii/PC'
+
+axios.defaults.baseURL = 'https://www.cgaii.com'
+Vue.prototype.$http = axios
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/pages/home/index.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="layout" id="layout" ref="layout">
+    <div class="review_video" v-if="whichVideo">
+      <div class="review_video_con" :class="{'m-review_video_con':isMobile}">
+        <video style="width:100%" @click.stop :src="whichVideo" controls autoplay loop>
+          <source type="video/mp4">
+          <source type="video/ogg">您的浏览器不支持视频！
+        </video>
+        <div class="close">
+          <img @click.stop="whichVideo = null" :src="`${$cdn}/images/close.png`">
+        </div>
+      </div>
+    </div>
+
+    <section>
+      <template v-if="isMobile">
+        <div class="m-home">
+          <img :src="`https://4dscene.4dage.com/cgaii/images/index/cgaii_index_endu.jpg`" alt>
+        </div>
+      </template>
+      <template v-else>
+        <video :src="`${$cdn}/media/CGAII_WEB.mp4`" id="video_main" width="100%" muted autoplay loop>
+          <source type="video/mp4">
+          <source type="video/ogg">
+          您的浏览器不支持视频！
+        </video>
+      </template>
+    </section>
+
+    <section class="home-1" :class="{'m-home1':isMobile}" id="yjly">
+      <ctitle :title="'Research Field'"/>
+      <section class="h1" id="h1">
+        <template v-if="isMobile">
+          <mDescribe class="m-describe" :title="ct1.mTitle" :sub="ct1.content"/>
+          <div class="mh1-img">
+            <img :src="`${$cdn}/images/research-img.png`" alt>
+          </div>
+        </template>
+        <template v-else>
+          <describe
+            class="article"
+            :showAni="!showH1"
+            :isLeft="true"
+            :title="ct1.title"
+            :sub="ct1.content"
+          />
+          <div class="h1-img">
+            <img :class="{fadeIn:showH1}" :src="`${$cdn}/images/research-img.png`">
+          </div>
+        </template>
+      </section>
+      <section class="h2" :class="{'m-h2':isMobile}" id="h2">
+        <template v-if="isMobile">
+          <div class="normal m-normal">
+            <mDescribe class="m-describe" :title="ct2.mTitle" :sub="ct2.content"/>
+            <div class="mh2-img">
+              <img :src="`${$cdn}/images/renwu_new.png`">
+              <img :src="`${$cdn}/images/faguang_new.png`">
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <describe
+            class="article"
+            :showAni="!showH2"
+            :isLeft="true"
+            :title="ct2.title"
+            :sub="ct2.content"
+          />
+          <div class="fix-normal">
+            <div class="normal">
+              <div class="h2-img">
+                <img
+                  class="normal-img"
+                  :class="{vision:showH2}"
+                  :src="`${$cdn}/images/renwu_new.png`"
+                >
+                <img
+                  class="skew-img"
+                  :class="{'vision-delay':showH2}"
+                  :src="`${$cdn}/images/faguang_new.png`"
+                >
+              </div>
+            </div>
+          </div>
+        </template>
+      </section>
+      <section class="h3" :class="{'m-h3':isMobile}" id="h3">
+        <template v-if="isMobile">
+          <mDescribe class="m-describe" :title="ct3.mTitle" :sub="ct3.content"/>
+          <div class="mh3-img">
+            <img :src="`${$cdn}/images/mechanical_new.png`" alt>
+          </div>
+        </template>
+        <template v-else>
+          <describe
+            class="article"
+            :showAni="!showH3"
+            :isLeft="true"
+            :title="ct3.title"
+            :sub="ct3.content"
+          />
+          <div class="h3-img">
+            <img :src="`${$cdn}/images/mechanical_new.png`">
+          </div>
+        </template>
+      </section>
+      <section class="h4" :class="{'m-h4':isMobile}" id="h4">
+        <template v-if="isMobile">
+          <div class="normal m-normal">
+            <mDescribe class="m-describe" :title="ct4.mTitle" :sub="ct4.content"/>
+            <div class="mh4-img">
+              <img :src="require('@/assets/images/rbv.jpg')">
+              <img :src="require('@/assets/images/rblight.png')">
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <describe
+            class="article"
+            :showAni="!showH4"
+            :isLeft="false"
+            :title="ct4.title"
+            :sub="ct4.content"
+          />
+          <div class="fix-normal">
+            <div class="normal">
+              <div class="h4-img">
+                <img
+                  class="normal-img"
+                  :class="{vision:showH4}"
+                  :src="require('@/assets/images/rbv.jpg')"
+                >
+                <img
+                  class="skew-img"
+                  :class="{'vision-delay':showH4}"
+                  :src="require('@/assets/images/rblight.png')"
+                >
+              </div>
+            </div>
+          </div>
+        </template>
+      </section>
+    </section>
+
+    <section class="home-2" id="hzhb" :class="{'m-home2':isMobile}">
+      <ctitle :title="'Partners'"/>
+      <section class="h2-l" :class="{'mh2-l':isMobile}">
+        <template v-if="isMobile">
+          <mImgTitle
+            id="h5"
+            :url="ctx5.link"
+            :content="ctx5.content"
+            :img="`${$cdn}/images/icon/DFKI.jpg`"
+          />
+          <div class="h2-l-con">
+            <div class="c2-t1_bar">
+              <img :src="require('@/assets/images/robotbg.jpg')">
+            </div>
+            <img :src="`${$cdn}/images/robot.png`">
+          </div>
+        </template>
+        <template v-else>
+          <imgTitle
+            class="h2-img"
+            id="h5"
+            :content="ctx5.content"
+            :url="ctx5.link"
+            :img="`${$cdn}/images/icon/DFKI.jpg`"
+          />
+          <div class="h2-l-con">
+            <div class="c2-t1_bar">
+              <img :class="{robotClip:showH5}" :src="require('@/assets/images/robotbg.jpg')" alt>
+            </div>
+            <img :src="`${$cdn}/images/robot.png`" alt>
+          </div>
+        </template>
+      </section>
+      <section class="h2-r" :class="{'h6-top':isMobile}" id="h6">
+        <template v-if="isMobile">
+          <mImgTitle
+            :content="ctx6.content"
+            :url="ctx6.link"
+            :img="`${$cdn}/images/icon/FourDLOGO.png`"
+          />
+          <div class="h2-r-con">
+            <div class="h2-r-con-txt">
+              <img
+                class="mymove"
+                @click="goPath(ctx7.link)"
+                :src="require('@/assets/images/logo-05.svg')"
+                alt
+              >
+              <p v-for="(item,i) in ctx7.content" :key="i">{{item.mDetail}}</p>
+            </div>
+            <div class="c2-t2_bar">
+              <img :src="require('@/assets/images/FDKKbg.jpg')" alt>
+            </div>
+            <img :src="`${$cdn}/images/4DKK.png`" id="sdkk" alt>
+          </div>
+        </template>
+        <template v-else>
+          <imgTitle
+            class="h2-img"
+            :url="ctx6.link"
+            :content="ctx6.content"
+            :img="`${$cdn}/images/icon/FourDLOGO.png`"
+          />
+          <div class="h2-r-con" id="sdkk">
+            <imgTitle
+              class="h2-img"
+              :url="ctx7.link"
+              :content="ctx7.content"
+              :img="require('@/assets/images/logo-05.svg')"
+            />
+            <div class="c2-t2_bar">
+              <img :class="{'robotClip-r':showH6}" :src="require('@/assets/images/FDKKbg.jpg')" alt>
+            </div>
+            <img :src="`${$cdn}/images/4DKK.png`" alt>
+          </div>
+        </template>
+      </section>
+      <section class="h2-l no-background" :class="{'mh2-l':isMobile}" id="h7">
+        <template v-if="isMobile">
+          <mImgTitle
+            id="graphicsmedia"
+            :url="ctx8.link"
+            :content="ctx8.content"
+            :img="`${$cdn}/images/icon/graphicsmedia.jpg`"
+          />
+          <div class="h2-l-con">
+            <div class="c2-t1_bar fix-t1_bar">
+              <img :src="require('@/assets/images/WHOLESHOW.jpg')">
+            </div>
+            <mExpert class="m-expert" :experts="experts"/>
+          </div>
+        </template>
+        <template v-else>
+          <imgTitle
+            class="h2-img"
+            :url="ctx8.link"
+            :content="ctx8.content"
+            :img="`${$cdn}/images/icon/graphicsmedia.jpg`"
+            id="graphicsmedia"
+          />
+          <div class="h2-l-con">
+            <div class="c2-t1_bar" style="margin-top:13vw">
+              <img :class="{robotClip:showH7}" :src="require('@/assets/images/WHOLESHOW.jpg')" alt>
+            </div>
+            <div class="expert">
+              <div class="expert-title">{{experts.title}}</div>
+              <ul>
+                <li v-for="(item, i) in experts.expert" :key="i">
+                  <img :src="item.img">
+                  <div class="expert_sub">
+                    <div>{{item.name}}</div>
+                    <p v-for="(sub,idx) in item.detail" :key="idx">{{sub}}</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </template>
+      </section>
+    </section>
+
+    <section class="home-3" :class="{'m-home3':isMobile}" id="zddh">
+      <ctitle :title="'CGAIC'"/>
+      <template v-if="isMobile">
+        <mConvention id="wjhg" @openVideo="item=>{whichVideo = item}" :content="meeting.c1"/>
+        <mConvention @openVideo="item=>{whichVideo = item}" :content="meeting.c2"/>
+        <mConvention @openVideo="item=>{whichVideo = item}" :content="meeting.c3"/>
+      </template>
+      <template v-else>
+        <convention
+          @openVideo="item=>{whichVideo = item}"
+          id="wjhg"
+          class="h3-top"
+          :content="meeting.c1"
+        />
+        <convention @openVideo="item=>{whichVideo = item}" :content="meeting.c2"/>
+        <convention @openVideo="item=>{whichVideo = item}" :content="meeting.c3"/>
+      </template>
+    </section>
+
+    <div class="divide-line" v-if="isMobile">
+      <img :src="require('@/assets/images/img_ele_transition@2x.png')">
+    </div>
+
+    <section class="home-4">
+      <ctitle :title="'News'"/>
+      <template v-if="isMobile">
+        <div class="mh4">
+          <img :src="message.topLeft">
+          <div class="mh4-title">{{message.bottomLeft.title}}</div>
+          <div class="mh4-detail">{{message.bottomLeft.detail}}</div>
+          <img :src="message.bottomRigth">
+          <div class="mh4-title">{{message.topRight.title}}</div>
+          <div class="mh4-detail">{{message.topRight.detail}}</div>
+          <div class="btn">
+            <span @click="$router.push({path:'/message'})">More</span>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="h4-con">
+          <div class="h4-top">
+            <img :src="message.topLeft">
+            <div class="h4-topTxt">
+              <img :src="require('@/assets/images/yinhao.png')">
+              <div class="h4-detail">{{message.topRight.detail}}</div>
+              <div class="h4-title">{{message.topRight.title}}</div>
+            </div>
+          </div>
+          <div class="h4-bottom">
+            <div class="h4-bottomTxt">
+              <img :src="require('@/assets/images/yinhao.png')">
+              <div class="h4-detail">{{message.bottomLeft.detail}}</div>
+              <div class="h4-title">{{message.bottomLeft.title}}</div>
+            </div>
+            <img :src="message.bottomRigth">
+          </div>
+          <div class="btn">
+            <span @click="$router.push({path:'/message'})">More</span>
+          </div>
+        </div>
+      </template>
+    </section>
+
+    <div class="divide-line" v-if="isMobile">
+      <img :src="require('@/assets/images/img_ele_transition@2x.png')">
+    </div>
+
+    <section class="home-5" :class="{'m-home5':isMobile}">
+      <ctitle class="h5-title" :title="'About us'"/>
+      <template v-if="isMobile">
+        <mAbout :join="join" id="gywm"/>
+      </template>
+      <template v-else>
+        <div class="h5-con" id="gywm">
+          <img :src="join.background">
+          <div class="h5-txt">
+            <div class="h5-txt-title">{{join.title}}</div>
+            <div class="h5-txt-detail">
+              <p v-for="(item,i) in join.detail" :key="i">{{item}}</p>
+            </div>
+          </div>
+          <div class="btn">
+            <span @click="$router.push({path:'/join-us'})">Join Us</span>
+          </div>
+        </div>
+        <swiper/>
+      </template>
+    </section>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+import ctitle from '@/components/ctitle'
+import describe from '@/components/describe'
+import imgTitle from '@/components/imgTitle'
+import convention from '@/components/convention'
+import swiper from '@/components/swiper'
+import cn from '@/util/text/cn.js'
+import browser from '@/util/browser.js'
+import mDescribe from '@/components/m-describe'
+import mImgTitle from '@/components/m-imgTitle'
+import mExpert from '@/components/m-expert'
+import mConvention from '@/components/m-convention'
+import mAbout from '@/components/m-about'
+let fixTop = 180
+let {
+  c1_t1: ct1,
+  c1_t2: ct2,
+  c1_t3: ct3,
+  c1_t4: ct4,
+  c2_t1: ctx5,
+  c2_t2: ctx6,
+  c2_t3: ctx7,
+  c2_t4: ctx8,
+  experts,
+  meeting,
+  message,
+  join
+} = cn
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  components: {
+    ctitle,
+    convention,
+    mImgTitle,
+    describe,
+    imgTitle,
+    mDescribe,
+    mConvention,
+    swiper,
+    mExpert,
+    mAbout
+  },
+  data () {
+    // 这里存放数据
+    return {
+      ct1,
+      ct2,
+      ct3,
+      ct4,
+      ctx5,
+      ctx6,
+      ctx7,
+      ctx8,
+      experts,
+      convention,
+      meeting,
+      message,
+      join,
+      pageOffset: 0,
+      showH1: false,
+      showH2: false,
+      showH3: false,
+      showH4: false,
+      showH5: false,
+      showH6: false,
+      showH7: false,
+      isMobile: browser.mobile,
+      whichVideo: null
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+    pageOffset: function (newVal) {
+      console.log(this.showH1)
+    }
+  },
+  // 方法集合
+  methods: {
+    _closeVideo () {
+      this.isOpenVideo = false
+    },
+    goPath (url) {
+      window.open(url)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    document.addEventListener('WeixinJSBridgeReady', function () {
+      document.getElementById('video_main').play()
+      // document.getElementById('video').play();
+    }, false)
+    var top = 0
+    var top2 = 0
+    var top3 = 0
+    var top4 = 0
+    var top5 = 0
+    var top6 = 0
+    var top7 = 0
+
+    let h1 = document.getElementById('h1')
+    let h2 = document.getElementById('h2')
+    let h3 = document.getElementById('h3')
+    let h4 = document.getElementById('h4')
+
+    let h5 = document.getElementById('h5')
+    let h6 = document.getElementById('h6')
+    let h7 = document.getElementById('h7')
+
+    // let h3 = document.getElementById('h1')
+    // let h4 = document.getElementById('h1')
+
+    window.addEventListener('scroll', () => {
+      top = h1.offsetTop - fixTop * 2
+      top2 = h2.offsetTop - fixTop * 4
+      top3 = h3.offsetTop - fixTop
+      top4 = h4.offsetTop - fixTop * 4
+
+      top5 = h5.offsetTop
+      top6 = h6.offsetTop
+      top7 = h7.offsetTop - fixTop
+
+      if (top || top2 || top3 || top4 || top5 || top6 || top7) {
+        var scrollTop =
+          document.documentElement.scrollTop ||
+          window.pageYOffset ||
+          document.body.scrollTop
+        if (top >= scrollTop) {
+          this.showH1 = false
+        } else {
+          this.showH1 = true
+        }
+
+        if (top2 >= scrollTop) {
+          this.showH2 = false
+        } else {
+          this.showH2 = true
+        }
+
+        if (top3 >= scrollTop) {
+          this.showH3 = false
+        } else {
+          this.showH3 = true
+        }
+
+        if (top4 >= scrollTop) {
+          this.showH4 = false
+        } else {
+          this.showH4 = true
+        }
+
+        if (top5 >= scrollTop) {
+          this.showH5 = false
+        } else {
+          this.showH5 = true
+        }
+
+        if (top6 >= scrollTop) {
+          this.showH6 = false
+        } else {
+          this.showH6 = true
+        }
+
+        if (top7 >= scrollTop) {
+          this.showH7 = false
+        } else {
+          this.showH7 = true
+        }
+      }
+    })
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+
+<style scoped>
+@import "./style.css";
+@import "./m-home.css";
+</style>

src/pages/home/m-home.css

@@ -0,0 +1,229 @@
+.m-home{
+  width: 100%;
+}
+
+.m-home img{
+  width: 100%;
+}
+.m-home1{
+  margin-top: 0;
+  padding-top:80px;
+}
+.m-describe{
+  margin-top: 30px;
+}
+
+.home-1 .m-h2 .normal .describe,.home-1 .m-h4 .normal .describe{
+  color: #fff;
+}
+
+.home-1 .m-h2,.home-1 .m-h4{
+  background: #000;
+  transform: skewY(-21.5deg) translateY(-140px);
+  overflow: hidden;
+}
+
+.home-1 .m-h2 .normal,.home-1 .m-h4 .normal{
+  transform: skewY(21.5deg);
+  position: relative;
+}
+
+.home-1 .m-h2 .describe,.home-1 .m-h4 .describe{
+  position: static;
+}
+
+.mh1-img{
+  width: 160%;
+  position: relative;
+  left: 25%;
+}
+
+.mh1-img img{
+  width: 100%;
+}
+
+.m-h2,.m-h3{
+  margin-top: 90px;
+}
+.m-normal{
+  margin-top: 80px;
+}
+.mh2-img{
+  position: relative;
+  text-align: center;
+  bottom: -18vw;
+}
+.mh2-img img{
+  width: 182%;
+  position: relative;
+  left: -21%;
+}
+
+.mh2-img img:last-child{
+  position: absolute;
+  top: -3%;
+  left: 12%;
+  width: 83%;
+}
+
+.home-1 .m-h3{
+  top: -40vw;
+}
+.mh3-img{
+  width: 100%;
+  position: relative;
+  margin-top: 40px;
+}
+
+.mh3-img img{
+  width: 100%;
+}
+
+.home-1 .m-h4{
+  height: auto;
+  background: #000;
+  transform: skewY(-21.5deg) translateY(-230px);
+  overflow: hidden;
+}
+
+
+.mh4-img{
+  position: relative;
+  text-align: center;
+  bottom: -18vw;
+}
+.mh4-img img{
+  width: 120%;
+  position: relative;
+  padding-bottom: 20vw;
+  left: -25%;
+}
+
+.mh4-img img:last-child{
+  position: absolute;
+  top: 2%;
+  left: 5%;
+  width: 100%;
+}
+
+.m-home2{
+  position: relative;
+  top: -30vw;
+  background: url('~@/assets/images/bg_1.jpg') top center no-repeat;
+  background-size: 250% auto;
+}
+
+.home-2 .mh2-l{
+  background: url('~@/assets/images/bg_2.jpg') bottom 9vw center no-repeat;
+  background-size: 100% auto;
+  padding-bottom:41vw;
+}
+
+.home-2 .mh2-l .h2-l-con .c2-t1_bar{
+  height: 54vw;
+}
+.home-2 .mh2-l .h2-l-con .c2-t1_bar img{
+  opacity: 1;
+  width: 170%;
+  left: -20%;
+  top: -15vw;
+}
+
+.home-2 .mh2-l .h2-l-con>img{
+  width: 52vw;
+}
+
+
+.h6-top{
+  position: relative;
+  top: -20vw;
+}
+
+
+.home-2 .h6-top .h2-r-con .c2-t2_bar img{
+  opacity: 1;
+  width: 170%;
+  left: -30%;
+  top: -15vw;
+}
+.home-2  .h6-top .h2-r-con{
+  margin-top: 25vw;
+}
+
+.home-2  .h6-top .h2-r-con .c2-t2_bar{
+  height: 54vw;
+}
+.home-2  .h6-top .h2-r-con>img{
+  width: 70vw;
+  left: 8vw;
+  top: -20vw;
+}
+
+.home-2 .h2-r-con .h2-r-con-txt{
+  text-align: right;
+  position: absolute;
+  right: 2vw;
+  top: 2vw;
+  line-height: 1.2;
+  z-index: 100;
+  width: 30vw;
+  font-size: 14px;
+  color: #fff;
+  text-align: right;
+}
+.home-2 .h2-r-con .h2-r-con-txt>p{
+  margin-top: 2vw;
+}
+.home-2 .mh2-l .h2-l-con .fix-t1_bar{
+  height: 75vw;
+  margin-top: 30vw;
+}
+
+.home-2 .mh2-l .h2-l-con .fix-t1_bar img{
+  width: 210%;
+}
+
+.home-2 .m-expert{
+  position: absolute;
+  left: 0;
+  top: -30%;
+}
+
+.m-home3{
+  margin-top: 0;
+}
+.m-review_video_con{
+  width: 100%;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.home-4 .mh4{
+  width: 90%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.home-4 .mh4 img{
+  width: 100%;
+  margin-top: 40px;
+}
+
+.home-4 .mh4 .mh4-title{
+  width: 88%;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 1.5;
+  margin: 20px auto;
+}
+
+.home-4 .mh4 .mh4-detail{
+  text-align: left;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.m-home5{
+  margin-top: 100px;
+}

src/pages/home/style.css

@@ -0,0 +1,562 @@
+.layout{
+  padding-top: 75px;
+}
+
+.home-1{
+  text-align: center;
+  padding-top:120px; 
+}
+
+.home-1  .h1  .article{
+  padding-left: 4vw;
+  position: relative;
+  bottom: -120px;
+}
+
+.home-1 .h1 .h1-img{
+  text-align: right;
+  width: 100%;
+}
+
+.home-1 .h1 .h1-img img{
+  width: 65%;
+  opacity: 0;
+}
+
+.home-1 .h2{
+  position: relative;
+}
+.home-1 .h2 .describe{
+  color: #fff;
+  position: absolute;
+  right: 4vw;
+  top: -5vw;
+  z-index: 199;
+}
+
+.home-1 .h2 .fix-normal{
+  background: #000;
+  transform: skewY(-21.5deg) translateY(-140px);
+  overflow: hidden;
+}
+
+
+.home-1 .h2 .normal,.home-1 .h4 .normal{
+  transform: skewY(21.5deg);
+  position: relative;
+}
+
+.home-1 .h2 .normal .article,.home-1 .h4 .normal .article{
+  position: absolute;
+  top: 80px;
+  right: 150px;
+}
+
+.home-1 .h2 .normal .describe,.home-1 .h4 .normal .describe{
+  color: #fff;
+}
+
+.home-1 .h2 .h2-img,.home-1 .h4 .h4-img{
+  position: relative;
+  height: auto;
+  width: 100%
+}
+
+.home-1 .h2 .h2-img .skew-img,.home-1 .h4 .h4-img .skew-img{
+  position: absolute;
+  left: 12vw;
+  bottom: 10vw;
+  width: 45vw;
+  opacity: 0;
+}
+
+.home-1 .h2 .h2-img .normal-img, .home-1 .h4 .h4-img .normal-img{
+  position: relative;
+  opacity: 0;
+  left: -6vw;
+  bottom: -20vw;
+  width: 100%;
+}
+
+.home-1 .h3{
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  top: -200px;
+}
+
+.home-1 .h3 .article{
+  padding-left: 4vw;
+  position: relative;
+  bottom: -450px;
+}
+
+.home-1 .h3 .h3-img{
+  text-align: right;
+  width: 100%;
+}
+.home-1 .h3 .h3-img img{
+  width: 60%;
+}
+
+.home-1 .h4{
+  position: relative;
+}
+
+.home-1 .h4 .describe{
+  color: #fff;
+  position: absolute;
+  right: 4vw;
+  top: -10vw;
+  z-index: 199;
+}
+.home-1 .h4 .fix-normal{
+  height: 58vw; 
+  transform: skewY(-21.5deg) translateY(-230px);
+  background: #000;
+  overflow: hidden;
+}
+
+.home-1 .h4 .h4-img{
+  text-align: left;
+  z-index: -1;
+}
+
+.home-1 .h4 .h4-img .normal-img{
+  left: 0;
+  bottom: -16vw;
+  width: 66%;
+}
+.home-1 .h4 .h4-img .skew-img{
+  width: 100%;
+  bottom: -14vw;
+  left: -3vw;
+}
+
+.home-2{
+  background: url('~@/assets/images/bg_1.jpg') top center no-repeat;
+  background-size: 100% auto;
+}
+
+.home-2 .h2-l{
+  text-align: right;
+  background: url('~@/assets/images/bg_2.jpg') bottom center no-repeat;
+  background-size: 100%;
+  padding-bottom: 20vw;
+}
+
+.home-2 .h2-l .h2-img{
+  display: inline-block;
+  text-align: left;
+  margin:15vw 4vw 0 0;
+}
+
+.home-2 .h2-l .h2-l-con{
+  position: relative;
+}
+
+.home-2 .h2-l .h2-l-con .c2-t1_bar{
+  height: 27vw;
+  width: 100%;
+  transform: skewY(15deg);
+  margin-top: 18vw;
+  overflow: hidden;
+  position: relative;
+}
+
+.home-2 .h2-l .h2-l-con .c2-t1_bar img{
+  display: inline-block;
+  position: absolute;
+  top: -11vw;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+
+.home-2 .h2-l .h2-l-con>img{
+  position: absolute;
+  top: -15vw;
+  right: 0;
+  width: 40vw;
+}
+
+.h2-r .h2-img{
+  margin-left: 4vw;
+  position: relative;
+  top: -5vw;
+}
+
+.home-2 .h2-r .h2-r-con{
+  position: relative;
+}
+.home-2 .h2-r .h2-r-con>.h2-img{
+  position: absolute;
+  right: 4vw;
+  top: 2vw;
+  z-index: 99;
+  color: #fff;
+}
+
+.home-2 .h2-r .h2-r-con>.h2-img>>>img{
+  width: 15vw;
+  height: 100%;
+}
+
+.home-2 .h2-r .h2-r-con .c2-t2_bar{
+  height: 28vw;
+  width: 100%;
+  transform: skewY(-15deg);
+  overflow: hidden;
+  margin-top: 3vw;
+  position: relative;
+}
+
+.home-2 .h2-r .h2-r-con .c2-t2_bar img{
+  display: inline-block;
+  position: absolute;
+  top: -7vw;
+  width: 100%;
+  opacity: 0;
+}
+
+
+.home-2 .h2-r .h2-r-con>img{
+  position: absolute;
+  top: 0;
+  left: 14vw;
+  width: 30vw;
+}
+
+.home-2 .h2-l .expert{
+  position: absolute;
+  top: -2vw;
+  left: 22vw;
+  text-align: left;
+}
+
+.home-2 .h2-l .expert .expert-title{
+  font-size: 24px;
+  color: #fff;
+  font-weight: bold;
+}
+
+
+.home-2 .h2-l .expert ul{
+  display: inline-block;
+  margin-top: 2vw;
+}
+
+.home-2 .h2-l .expert ul li{
+  display: inline-block;
+  margin-right: 1vw;
+  vertical-align: top;
+}
+
+.home-2 .h2-l .expert ul li img{
+  width: 10vw;
+  height: 10vw;
+  position: static;
+  border: 2px solid #fff;
+}
+
+.home-2 .h2-l .expert ul li .expert_sub{
+  color: #fff;
+
+}
+.home-2 .h2-l .expert ul li .expert_sub div{
+  font-size: 14px;
+  font-weight: bold;
+  margin: 1vw 0 1vw;
+}
+
+.home-2 .h2-l .expert ul li .expert_sub p{
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.home-3 .h3-top{
+  margin-top: 80px;
+}
+
+.home-4{
+  margin-top: 100px;
+}
+
+.home-4 .h4-con{
+  margin: 80px auto;
+  width: 60%;
+}
+.home-4 .h4-top{
+  background: #e6373c;
+  font-size: 0;
+  position: relative;
+}
+
+.home-4 .h4-bottom{
+  background: #1e2225;
+  font-size: 0;
+  text-align: right;
+  position: relative;
+}
+
+.home-4 .h4-top>img{
+  width: 50%;
+}
+.home-4 .h4-top .h4-topTxt{
+  width: 50%;
+  color: #fff;
+  display: inline-block;
+  position: absolute;
+  top: 45%;
+  transform: translateY(-50%);
+  margin-left: 5%;  
+}
+
+.home-4 .h4-top .h4-topTxt img,.home-4 .h4-bottom .h4-bottomTxt img{
+  margin-bottom: 40px;
+}
+.home-4  .h4-detail{
+  font-size: 15px;
+  width: 80%;
+  margin-bottom: 4%;
+  line-height: 2;
+}
+.home-4 .h4-title{
+  font-size: 25px;
+  font-weight: bold;
+  letter-spacing: 2px;
+}
+
+.home-4 .h4-bottom>img{
+  width: 50%;
+}
+
+.home-4 .h4-bottom .h4-bottomTxt{
+  width: 50%;
+  color: #fff;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  text-align: left;
+  margin-left: 5%;
+}
+
+.home-4 .btn,.home-5 .btn{
+  display: block;
+  text-align: center;
+  margin-top: 80px;
+}
+
+.home-4 .btn span,.home-5 .btn span{
+  color: #fff;
+}
+
+.home-1,.home-2,.home-3,.home-4,.home-5{
+  margin-top: 100px;
+}
+
+.home-5 .h5-title{
+  margin-bottom: 80px;
+}
+.h5-con{
+  background: #1d1d27;
+  position: relative;
+  padding: 0 0 10vw;
+}
+
+.h5-con>img{
+  width: 100%;
+}
+
+.h5-txt{
+  text-align: center;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  color: #fff;
+  width:80%;
+}
+
+.h5-txt .h5-txt-title{
+  font-size: 40px;
+  font-weight: bold;
+}
+
+.h5-txt .h5-txt-detail{
+  text-align: justify;
+  margin-top: 40px;
+  line-height: 2;
+}
+
+.home-5 .btn{
+  margin-top: 0;
+}
+
+.home-5{
+  margin-top: 200px;
+}
+
+.review_video {
+  background: rgba(0, 0, 0, 0.6);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 90;
+}
+
+.review_video_con{
+  position: fixed;
+  width: 50%;
+  top: 25%;
+  left: 25%;
+  z-index: 9000;
+}
+
+.review_video_con .close{
+  margin-top: 40px;
+  width: 100%;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.review_video_con .close img{
+  width: 20px;
+  vertical-align: top;
+
+}
+@media screen and (max-width: 1800px) {
+  .h5-txt{
+    width: 80%;
+  }
+  .h5-con>img{
+    padding: 10vw 0;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .home-2 .h2-l .expert{
+    left: 26vw;
+  }
+
+  .home-4 .h4-detail{
+    line-height: 1.5;
+    font-size: 12px;
+  }
+  .home-4 .h4-title{
+    font-size: 20px;
+    margin-right: 40px;
+  }
+  .home-4 .h4-top .h4-topTxt img, .home-4 .h4-bottom .h4-bottomTxt img{
+    margin-bottom: 20px;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .home-1 .h1 .article{
+    position: relative;
+    bottom: -75px;
+  }
+  .home-1 .h3 .article{
+    bottom: -300px;
+  }
+  
+  .home-2 .h2-l .h2-img{
+    margin: 15vw 4vw 0 0;
+  }
+  
+  .home-2 .h2-r .h2-r-con>.h2-img{
+    top: -1vw;
+  }
+  .home-2 .h2-l .expert{
+    top: -4vw;
+  }
+  .home-4 .h4-detail{
+    line-height: 1.2;
+  }
+  .home-4 .h4-top .h4-topTxt img, .home-4 .h4-bottom .h4-bottomTxt img{
+    width: 2vw;
+  }
+  .h5-txt{
+    width: 90%;
+  }
+  .h5-txt .h5-txt-title{
+    font-size: 32px;
+  }
+  .h5-txt .h5-txt-detail{
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  .home-2 .h2-l .h2-l-con .c2-t1_bar{
+    height: 37vw;
+  }
+  .home-2 .h2-r .h2-r-con .c2-t2_bar{
+    height: 38vw;
+  }
+  .home-2 .h2-r .h2-r-con>.h2-img{
+    top: 3vw;
+  }
+  .home-2 .h2-l .h2-l-con>img{
+    top: -6vw;
+  }
+  .home-2 .h2-l .h2-l-con .c2-t1_bar img{
+    top: -6vw;
+  }
+  .home-2 .h2-l .expert{
+    top: 2vw;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .layout{
+    padding-top: 50px;
+  }
+  .home-1 .h1 .article{
+    bottom: -50px;
+  }
+  .home-1 .h2  .article, .home-1 .h4 .article{
+    right: 30px;
+    top: -20vw;
+  }
+  .home-1 .h3 .article{
+    padding-left: 50px;
+    bottom: -270px;
+  }
+  .home-2{
+    margin-top: 0;
+  }
+  .home-2 .h2-r .h2-r-con .c2-t2_bar{
+    height: 38vw;
+  }
+  .home-2 .h2-r .h2-r-con>.h2-img{
+    top: 3vw;
+  }
+  .home-2 .h2-l .h2-l-con>img{
+    top: -2vw;
+  }
+  .home-2 .h2-l .h2-l-con .c2-t1_bar img{
+    top: -6vw;
+  }
+  .home-2 .h2-l .expert{
+    top: 0;
+    left: 14vw;
+  }
+  .home-2 .h2-l .h2-l-con .c2-t1_bar{
+    height: 50vw;
+  }
+  .home-4 .h4-con{
+    width: 90%;
+  }
+  .h5-con>img{
+    padding: 22vw 0;
+  }
+  .h5-txt{
+    top: 44%;
+  }
+}

src/pages/join/index.vue

@@ -0,0 +1,95 @@
+<template>
+<div class="layout" >
+    <imageQuery :screens="screens" @exitHandle="exitHandle" />
+    <div class="l-introduce" :class="{'ml-introduce':isMobile}">
+      <ctitle :title="'Join Us'"></ctitle>
+      <div class="join-l" style="padding-bottom:0" :class="{'one':!isMobile}">
+        <template v-if="isMobile">
+          <mRotateimg :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
+          <mIntroduce class="mjoin1-l" :content="content.text[0]"/>
+        </template>
+        <template v-else>
+          <rotateimg class="jl-left" :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
+          <introduce class="jl-right" :content="content.text[0]"/>
+        </template>
+      </div>
+      <div class="join-r" :class="{'mjoin-r':isMobile,'two':!isMobile}">
+        <template v-if="isMobile">
+          <div class="mt-con">
+            <div class="mt-body">
+              <img @click="screens = content.text[1].imgs" :src="content.text[1].imgs[0].img" alt>
+            </div>
+          </div>
+          <mIntroduce class="mt-intro" :content="content.text[1]"/>
+        </template>
+        <template v-else>
+          <introduce class="jr-left" :content="content.text[1]"/>
+          <div class="jr-right">
+            <div class="imgcon">
+              <img @click="screens = content.text[1].imgs" :src="content.text[1].imgs[0].img" alt>
+            </div>
+          </div>
+        </template>
+
+      </div>
+      <div class="join-l three" :class="{'mjoin-l':isMobile}">
+        <template v-if="isMobile">
+          <mRotateimg :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
+          <mIntroduce class="mth-bg" :content="content.text[2]"/>
+        </template>
+        <template v-else>
+          <rotateimg class="jl-left" :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
+          <introduce class="jl-right" :content="content.text[2]"/>
+        </template>
+      </div>
+    </div>
+    <div class="recruit" id="jrwm">
+      <Recruit/>
+    </div>
+    <div class="divide-line" v-if="isMobile">
+      <img :src="require('@/assets/images/img_ele_transition@2x.png')">
+    </div>
+  </div>
+</template>
+
+<script>
+import ctitle from '@/components/ctitle'
+import introduce from '@/components/introduce'
+import rotateimg from '@/components/rotateimg'
+import Recruit from '@/components/recruit'
+import imageQuery from '@/components/imageQuery'
+import browser from '@/util/browser.js'
+import mRotateimg from '@/components/m-rotateimg'
+import mIntroduce from '@/components/m-introduce'
+
+import cn from '@/util/text/cn.js'
+
+let { pJoin: content } = cn
+export default {
+  components: { ctitle, rotateimg, Recruit, imageQuery, introduce, mRotateimg, mIntroduce },
+  data () {
+    return {
+      content,
+      screens: null,
+      isMobile: browser.mobile
+
+    }
+  },
+  methods: {
+    exitHandle () {
+      this.screens = null
+    },
+    showImg () {
+
+    },
+    clickHandle () {
+      this.screens = this.content.text[0].imgs
+    }
+  }
+}
+</script>
+<style scoped>
+@import url("./style.css");
+@import url("./mjoin.css");
+
+</style>

src/pages/join/mjoin.css

@@ -0,0 +1,42 @@
+.ml-introduce{
+  background: #f6f6f6 url('~@/assets/images/img_join_01.jpg') top -10vw right -40vw no-repeat;
+  background-size: 80vw;
+}
+.mjoin1-l{
+  background: #f6f6f6 url('~@/assets/images/img_join_02.jpg') bottom 0 left -40vw no-repeat;
+  background-size: 70vw;
+  padding-bottom: 100px;
+}
+.mt-con{
+  width: 70%;
+  height: 50vw;
+  margin: 0 auto;
+}
+.mt-body{
+  width: 100%;
+  height: 100%;
+  border: #fff solid 4px;
+  box-shadow: 0px 0px 10px #999;
+}
+.mt-body img{
+  height: 100%;
+  width: 100%;
+}
+
+.mjoin-r,.mjoin-l{
+  padding: 0;
+}
+.mt-intro{
+  margin: 80px 0 0 0;
+}
+
+.mjoin-l{
+  background: #f6f6f6 url('~@/assets/images/img_join_03.jpg') top 0 right -20vw no-repeat;
+  background-size: 60vw;
+  padding-top: 100px;
+}
+.mth-bg{
+  background: #f6f6f6 url('~@/assets/images/img_join_04.jpg') bottom -100px left -20vw no-repeat;
+  background-size: 60vw;
+  padding-bottom: 120px;
+}

src/pages/join/style.css

@@ -0,0 +1,128 @@
+.layout{
+  padding: 75px 0 0;
+}
+
+.l-introduce{
+  padding-top: 55px;
+  background: #f6f6f6;
+}
+
+.join-l{
+  width: 100%;
+}
+.jl-left{
+  width: 40%;
+  padding-left: 20%;
+}
+
+.jl-right{
+  width: 70%;
+  padding-left: 45%;
+}
+
+.join-r{
+  position: relative;
+}
+
+.join-r .jr-left{
+  padding-left: 15%;
+  display: inline-block;
+}
+
+.join-r .jr-right{
+  width: 40%;
+  position: absolute;
+  right: 10%;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 180px 0;
+}
+
+.join-r .jr-right .imgcon{
+  width: 20vw;
+  height: 15vw;
+  border: 8px #fff solid;
+  box-sizing: border-box;
+  overflow: hidden;
+ 
+}
+
+.join-r .jr-right .imgcon img{
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease;
+}
+
+.join-r .jr-right .imgcon:hover img {
+  transform: scale(1.1);
+  transition: transform 0.3s ease;
+}
+
+
+.join-l,.join-r{
+  padding: 200px 0;
+}
+
+.one{
+  background: url('~@/assets/images/img_join_01.jpg') top right no-repeat;
+  background-size: 30vw;
+}
+
+
+.two{
+  background: url('~@/assets/images/img_join_02.jpg') top left -80px no-repeat;
+  background-size: 30vw;
+}
+
+.two .jr-right{
+  background: url('~@/assets/images/img_join_03.jpg') top right no-repeat;
+  background-size: 24vw;
+}
+
+.three{
+  background: url('~@/assets/images/img_join_04.jpg') top left no-repeat;
+  background-size: 20vw;
+}
+
+.recruit{
+  width: 80%;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 1400px) {
+  .join-l,.join-r{
+    padding: 100px 0;
+  }
+  .join-r .jr-left{
+    padding-left: 10%;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .join-r .jr-right{
+    right: 0;
+  }
+}
+
+
+@media screen and (max-width: 770px) {
+  .layout{
+    padding: 50px 0 0
+  }
+  .join-r .jr-left{
+    padding-left: 0;
+  }
+  .jl-left{
+    padding-left: 10%;
+  }
+  .jl-right{
+    padding-left: 35%;
+  }
+  .join-r .jr-right{
+    width: 34%;
+  }
+  .recruit{
+    width: 96%;
+    margin: 0 auto;
+  }
+}

src/pages/layout/footer.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="f-layout">
+    <div>
+      <span>{{footer.phoneK}}</span>
+      <span>{{footer.phoneV}}</span>
+    </div>
+    <div>{{footer.copyRight}}</div>
+    <a href="http://www.miitbeian.gov.cn">{{footer.banben}}</a>
+  </div>
+</template>
+
+<script>
+import cn from '@/util/text/cn.js'
+
+let {footer} = cn
+export default {
+  data () {
+    return {
+      footer
+    }
+  }
+}
+</script>
+
+<style scoped>
+.f-layout{
+  text-align: center;
+  width: 80%;
+  margin: 0 auto;
+  line-height: 2.5;
+  border-top: 1px solid #ccc;
+  padding: 60px 0;
+}
+.f-layout a{
+  color: #000;
+}
+@media screen and (max-width: 380px) {
+  .f-layout{
+    font-size: 14px;
+  }
+}
+</style>

src/pages/layout/header.vue

@@ -0,0 +1,290 @@
+<template>
+  <div :class="[!isMobile?'wrap-nav':'m-wrap-nav']">
+    <template  v-if="isMobile">
+    <div class="m-wrap">
+      <div class="m-l" :style="{width:isIpad?'18vw':'30vw'}">
+        <img @click="$router.push({path:'/',id:'layout'})" :src="`${$cdn}/images/cgaiien.svg`" alt>
+      </div>
+      <div class="m-r">
+        <div class="m-nav-btn" @click="isAside=!isAside" :class="{'m-active':isAside}">
+          <span class="bg-black"></span>
+          <span class="bg-black"></span>
+          <span class="bg-black"></span>
+        </div>
+      </div>
+    </div>
+    <mSubnav :class="[isAside?'m-subNav-active':'m-subNav']" @closeNav="item=>{isAside=false}" :text="text.nav" />
+    </template>
+    <template v-else>
+      <div class="nav-left">
+        <vcenter>
+          <img @click="$router.push({path:'/',id:'layout'})" :src="`${$cdn}/images/cgaiien.svg`" class="logo" alt>
+        </vcenter>
+      </div>
+    <div class="nav-right">
+      <vcenter>
+        <ul class="nav-items">
+          <li
+            @click="clickHandle(item)"
+            class="nav-item"
+            :class="{active:item.id===activeIdx}"
+            v-for="(item,index) in text.nav"
+            :key="index"
+          >
+            {{item.name}}
+            <span class="line"></span>
+            <ul class="sub-items">
+              <li @click.stop="clickItem(sub)" v-for="(sub,idx) in item.sub" :key="idx">{{sub.name}}</li>
+            </ul>
+            <img
+              v-if="index === text.nav.length-1"
+              :src="require('@/assets/images/icon-arrow.png')"
+              alt
+            >
+          </li>
+        </ul>
+      </vcenter>
+    </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import vcenter from '@/components/vcenter'
+import text from '@/util/text/cn.js'
+import browser from '@/util/browser.js'
+import mSubnav from './mSubnav'
+
+const wh = { width: window.innerWidth, height: window.innerHeight }
+
+export default {
+  components: {
+    vcenter,
+    mSubnav
+  },
+  data () {
+    return {
+      text,
+      activeIdx: 'layout',
+      isIpad: browser.iPad,
+      isAside: false,
+      wh
+    }
+  },
+  computed: {
+    isMobile () {
+      return browser.iPad || browser.mobile
+    }
+  },
+  methods: {
+    clickHandle (item) {
+      if (item.url) {
+        this.activeIdx = item.id
+        this.$router.push({
+          path: item.url,
+          query: {
+            id: item.id
+          }
+        })
+      }
+      if (item.lang) {
+        this.urlrep(item.url)
+      }
+    },
+    clickItem (item) {
+      if (item.parentName) {
+        this.$router.push({
+          name: item.parentName,
+          query: {
+            id: item.id
+          }
+        })
+      }
+      if (item.lang) {
+        this.urlrep(item.url)
+      }
+    },
+    urlrep (lg) {
+      location.pathname = lg
+    }
+  }
+}
+</script>
+
+<style scoped>
+.wrap-nav {
+  background: #fff;
+  z-index: 6000;
+  position: fixed;
+  font-size: 40px;
+  height: 75px;
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+  min-width: 1024px;
+}
+
+.nav-left {
+  margin-left: 100px;
+  width: auto;
+  height: 75px;
+  display: inline-block;
+}
+
+.logo {
+  height: 56px;
+  width: auto;
+  cursor: pointer;
+}
+
+.nav-right {
+  float: right;
+  font-size: 16px;
+  height: 75px;
+  line-height: 75px;
+  margin-right: 138px;
+}
+
+.nav-right .nav-items {
+  display: inline-block;
+}
+
+.nav-right .nav-items .nav-item {
+  display: inline-block;
+  font-weight: bold;
+  position: relative;
+  padding: 0 40px;
+  cursor: pointer;
+}
+
+.nav-right .nav-items .nav-item:hover > img {
+  transform: translateY(-50%) rotate(180deg);
+  transition: all 0.3s ease;
+}
+
+.nav-right .nav-items .nav-item > img {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  right: 5%;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: all 0.3s ease;
+}
+
+.nav-right .nav-items .line {
+  width: 0;
+  left: 50%;
+}
+
+.nav-right .nav-items .active .line {
+  background: red;
+  height: 5px;
+  width: 60%;
+  position: absolute;
+  bottom: 0;
+  left: 20%;
+  border-radius: 2px;
+  transition: all ease 0.5s;
+}
+
+.nav-right .nav-items .nav-item:not(:last-child)::after {
+  display: inline-block;
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 16px;
+  top: 50%;
+  right: 0;
+  background: #ccc;
+  transform: skewX(-10deg) translateY(-50%);
+}
+
+.nav-right .nav-items .nav-item .sub-items {
+  max-height: 0;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+}
+
+.nav-right .nav-items .nav-item:hover .sub-items {
+  max-height: 300px;
+  transition: max-height 0.5s cubic-bezier(0.73, 0.32, 0.34, 1.5);
+  list-style: none;
+}
+
+.nav-right .nav-items .nav-item .sub-items li {
+  margin-bottom: 0;
+}
+
+.nav-right .nav-items .nav-item:hover .sub-items li {
+  background: rgba(0, 0, 0, 0.3);
+  min-width: 140px;
+  /* height: 50px; */
+  line-height: 1.2;
+  padding: 20px 8px;
+  text-align: center;
+  margin-bottom: 8px;
+  transition: margin-bottom 0.5s cubic-bezier(0.73, 0.32, 0.34, 1.5);
+  color: #fff;
+}
+
+@media screen and (max-width: 1550px) {
+  .nav-right .nav-items .nav-item {
+    padding: 0 30px;
+  }
+
+  .nav-right .nav-items .nav-item > img {
+    right: 0;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .nav-left{
+    margin-left: 20px;
+  }
+  .logo{
+    height: 50px;
+  }
+  .nav-right {
+    margin-right: 30px;
+  }
+
+  .nav-right .nav-items .nav-item {
+    padding: 0 20px;
+  }
+
+   .nav-right .nav-items .nav-item {
+    padding: 0 16px;
+    font-size: 14px;
+  }
+
+  .nav-right .nav-items .nav-item:hover .sub-items li {
+    min-width: 110px;
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .nav-right {
+    margin-right: 20px;
+  }
+
+  .nav-right .nav-items .nav-item .sub-items {
+    left: -10px;
+  }
+
+  .nav-right .nav-items .nav-item:hover .sub-items li {
+    font-size: 12px;
+  }
+
+  .nav-right .nav-items .nav-item > img {
+    right: -5%;
+    width: 12px;
+    height: 12px;
+  }
+}
+</style>
+<style scoped>
+@import url('./mheader.css');
+
+</style>

src/pages/layout/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="layout">
+    <navigation />
+    <router-view />
+    <Footer />
+  </div>
+</template>
+
+<script>
+import '@/assets/style/reset.css'
+import '@/assets/style/public.css'
+import navigation from './header'
+import footer from './footer'
+
+export default {
+  components: {navigation, Footer: footer}
+}
+</script>

src/pages/layout/mSubnav.vue

@@ -0,0 +1,162 @@
+<template>
+<div class="m-subNav"  @click="clickHandle" v-if="text">
+  <div class="inner" :style="{width:subWidth}" @click.stop>
+    <ul>
+      <li class="" v-for="(item, index) in text" :key="index">
+        <div class="mi-name" @click="clickItem(item)">
+          <span>{{item.name}}</span>
+          <div class="icon-fold" v-if="item.sub.length>0">
+            <span class="black-line"></span>
+            <span class="black-line rotate_link " :class="{'vertical_link':activeIdx!==item.id}"></span>
+          </div>
+        </div>
+        <div class="mi-child" :class="{'open':activeIdx===item.id}">
+          <div @click="clickSub(sub)" v-for="(sub,idx) in item.sub" :key="idx">
+            <span>{{sub.name}}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div class="m-language">
+      <span @click="urlrep(item.url)" :class="{'ml-active':idx===1}" v-for="(item,idx) in text[text.length-1].sub" :key="idx">
+        {{item.name}}
+      </span>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['text', 'subWidth'],
+  data () {
+    return {
+      activeIdx: ''
+    }
+  },
+  methods: {
+    clickHandle () {
+      this.$emit('closeNav')
+    },
+    clickItem (item) {
+      this.activeIdx = this.activeIdx === item.id ? '' : item.id
+      if (item.url) {
+        this.$router.push({
+          path: item.url,
+          query: {
+            id: item.id
+          }
+        })
+      }
+    },
+    clickSub (item) {
+      if (item.parentName) {
+        this.$router.push({
+          name: item.parentName,
+          query: {
+            id: item.id
+          }
+        })
+        this.$emit('closeNav')
+      }
+    },
+    urlrep (lg) {
+      location.pathname = lg
+    }
+  }
+}
+</script>
+
+<style scoped>
+.m-subNav {
+  width: 100%;
+  position: fixed;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.inner {
+  width: 70vw;
+  height: auto;
+  background: #eee;
+  min-height: 100vh;
+  font-size: 15px;
+}
+
+.inner li {
+  width: 100%;
+  border-bottom: 1px solid #fff;
+}
+.inner li:last-child{
+  display: none;
+}
+
+.inner li .icon-fold .black-line {
+  width: 15px;
+  height: 2px;
+  background: #333;
+  position: absolute;
+  transition: transform ease 0.5s;
+}
+
+.inner li .icon-fold .vertical_link {
+  transform: rotate(90deg);
+  transition: transform ease 0.5s;
+}
+
+.inner .mi-name {
+  color: #505050;
+  width: 88%;
+  height: 44px;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 16px;
+  font-weight: bold;
+}
+.inner .mi-child{
+  max-height:0;
+  transition: max-height 0.3s ease;
+  overflow: hidden;
+}
+
+.inner .open{
+  max-height: 200px;
+  transition: max-height 0.3s ease;
+}
+
+.inner .mi-child>div{
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    border-bottom: 1px solid #eee;
+    background-color: #fff;
+    padding-left: 15px;
+}
+.inner .mi-child>div:last-child{
+  border: none;
+}
+
+.inner .m-language{
+  width: 100%;
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-around;
+}
+.inner .m-language span{
+  flex: 1;
+  text-align: center;
+  display: inline-block;
+}
+.inner .m-language .ml-active{
+  color: #E6373C;
+}
+.inner .m-language span:not(:last-child) {
+    border-right: 1px solid #fff;
+}
+</style>

src/pages/layout/mheader.css

@@ -0,0 +1,104 @@
+.m-wrap-nav{
+  z-index: 998;
+  padding-left: 15px;
+  position: fixed;
+  top: -1px;
+  left: 0px;
+  width: 100%;
+  height: 75px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.m-wrap{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.m-wrap .m-l{
+  width: 50vw;
+}
+
+.m-wrap .m-l img{
+  width: 100%;
+}
+.m-wrap .m-r{
+  height: 100%;
+  width: 50px;
+  padding: 25.5px 15px 0px 0px;
+}
+
+.m-wrap .m-nav-btn{
+  position: relative;
+  width: 30px;
+  height: 20px;
+  overflow: hidden;
+  display: flex;
+}
+
+.bg-black {
+  width: 30px;
+  height: 2px;
+  background: #333;
+  position: absolute;
+  transition: all ease 0.5s;
+}
+
+.bg-black:nth-child(1) {
+  top: 0px;
+  right: 0;
+}
+
+.bg-black:nth-child(2) {
+  top: 9px;
+  right: 0;
+}
+
+.bg-black:nth-child(3) {
+  top: 18px;
+  right: 0;
+}
+
+.m-active .bg-black:nth-child(1) {
+  right: -5px;
+  transform: translateY(9px) rotate(45deg);
+  transition: all ease 0.5s;
+}
+
+.m-active .bg-black:nth-child(2) {
+  right: -30px;
+  transition: all ease 0.25s;
+}
+
+.m-active .bg-black:nth-child(3) {
+  right: -5px;
+  top: 0px;
+  transform: translateY(9px) rotate(-45deg);
+  transition: all ease 0.5s;
+}
+
+.m-subNav{
+  transform: translateX(-120vw);
+  transition: transform 0.25s ease;
+  background: none;
+  z-index: 999;
+}
+
+.m-subNav-active{
+  transform: translateX(0);
+  transition: transform 0.25s ease;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+
+@media screen and (max-width: 600px) {
+  .m-wrap-nav{
+    height: 55px;
+  }
+  .m-wrap .m-r{
+    padding: 17.5px 15px 0px 0px;
+  }
+}

src/pages/message/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="layout">
+    <template v-if="isMobile">
+      <div class="m-message">
+        <img :src="`${$cdn}/images/message_bg.jpg`" alt>
+      </div>
+      <ctitle :title="'News'"></ctitle>
+      <div class="m-news-con">
+        <a :href="item.url" target="_blank" class="m-item" v-for="(item,index) in article" :key="index">
+          <div class="m-item-idx">
+            <div class="m-item-idx-con">{{index+1}}</div>
+          </div>
+          <div class="m-item-con">
+            <div class="m-item-con-title">{{item.title}}</div>
+            <div class="m-item-con-sub">{{item.updateTime}}</div>
+          </div>
+        </a>
+      </div>
+      <div class="divide-line">
+        <img :src="require('@/assets/images/img_ele_transition@2x.png')">
+      </div>
+    </template>
+    <template v-else>
+      <ctitle :title="'News'"></ctitle>
+      <div class="message-main">
+        <div class="message-left">
+          <div class="new-con">
+            <ul class="new-ul">
+              <li v-for="(item,index) in article" :key="index">
+                <a :href="item.url" target="_blank">{{index+1}}.{{item.title}}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="message-right">
+          <img :src="`${$cdn}/images/message-bg.jpg`" alt>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import ctitle from '@/components/ctitle'
+import browser from '@/util/browser.js'
+
+export default {
+  components: {ctitle},
+  data () {
+    return {
+      article: null,
+      isMobile: browser.mobile
+
+    }
+  },
+  async mounted () {
+    let result = (await this.$http.get('/news/api/get?rnd=' + Math.random())).data
+    this.article = result
+  }
+}
+</script>
+
+<style scoped>
+  @import url('./style.css');
+  @import url("./mMessage.css");
+
+</style>

src/pages/message/mMessage.css

@@ -0,0 +1,43 @@
+.m-message{
+  width: 100%;
+  margin:  0 auto 40px;
+}
+.m-message img{
+  width: 100%;
+}
+.m-news-con{
+  width: 96%;
+  margin: 20px auto;
+  padding: 0 10px;
+}
+.m-item{
+  display: flex;
+  justify-content: space-between;
+  font-size: 16px;
+  color: #505050;
+  border-bottom: 1px #ddd solid;
+  padding: 20px 0;
+}
+
+.m-item-idx{
+  flex: 1;
+}
+
+.m-item-idx-con{
+  border: #ddd solid 1px;
+  text-align: center;
+  padding: 14px 8px;
+  border-radius: 5px;
+}
+
+.m-item-con{
+  line-height: 1.5;
+  flex: 5;
+  margin-left: 14px;
+}
+
+.m-item-con-sub{
+  font-size:14px;
+  color: #999;
+  margin-top: 16px;
+}

src/pages/message/style.css

@@ -0,0 +1,64 @@
+.layout{
+  padding: 120px 0 100px;
+  background: #f8fafd;
+}
+
+.message-main{
+  margin: 0 auto;
+  width: 80%;
+  padding-top: 80px;
+}
+
+.message-left{
+  width: 49%;
+  height: 29.5vw;
+  display: inline-block;
+}
+.message-right{
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.message-right img{
+  width: 100%;
+}
+
+.new-con{
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+}
+.new-con .new-ul{
+  height: 100%;
+  width: 100%;
+}
+
+.new-ul li{
+  letter-spacing: 3px;
+  font-size: 16px;
+  line-height: 2.5;
+}
+.new-ul li a{
+  font-size: 16px;
+  color: #656565;
+}
+
+@media screen and (max-width: 770px) {
+  .message-main{
+    width: 92%;
+    padding-top: 50px;
+  }
+  .new-ul li{
+    line-height: 2;
+  }
+  .new-ul li a{
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 570px) {
+  .layout{
+    padding: 50px 0 0;
+    background: #fff;
+  }
+}

src/router/index.js

@@ -0,0 +1,82 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Layout from '@/pages/layout'
+
+Vue.use(Router)
+
+let router = new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'layout',
+      component: Layout,
+      children: [
+        {
+          path: '/',
+          name: '首页',
+          component: () => import('@/pages/home')
+        },
+        {
+          path: '/message',
+          name: '消息资讯',
+          component: () => import('@/pages/message')
+        },
+        {
+          path: '/join-us',
+          name: '加入我们',
+          component: () => import('@/pages/join')
+        }
+      ]
+    }
+  ]
+
+})
+
+router.afterEach((to, from) => {
+  if (to.query.id) {
+    let target = document.querySelector('#' + to.query.id)
+    if (!target) {
+      setTimeout(() => {
+        target = document.querySelector('#' + to.query.id)
+        target ? you(target, to.query.id) : window.scrollTo(0, 0)
+      }, 100)
+    } else {
+      you(target, to.query.id)
+    }
+  } else {
+    setTimeout(() => {
+      you()
+    }, 16)
+  }
+  //  || !~queue.indexOf(to.fullPath)
+  // if (queue.length === 2) {
+  //   queue.shift()
+  // }
+  // queue.push(to.fullPath)
+
+  function you (target, id) {
+    if (target) {
+      let node = target
+      let top = 0
+      while (node && node !== document.documentElement && node !== document.body) {
+        top += node.offsetTop
+        node = node.offsetParent
+      }
+      if (id === 'h2' || id === 'h4' || id === 'h5' || id === 'h6' || id === 'zddh' || id === 'hzhb' || id === 'gywm') {
+        setTimeout(() => {
+          window.skip = true
+          window.scrollTo(0, top - 260)
+        })
+      } else {
+        setTimeout(() => {
+          window.skip = true
+          window.scrollTo(0, top - 70)
+        })
+      }
+    } else {
+      window.scrollTo(0, 0)
+    }
+  }
+})
+
+export default router