commint in 2.13

.babelrc

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

.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' ? 'off' : 'off'
+  }
+}

.gitignore

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

.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,21 @@
+# 4dkk
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

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,
+        publicPath:'../../../',
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

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,97 @@
+'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'),
+      'common': resolve('src/common'),
+      'components': resolve('src/components'),
+      'plugin': resolve('src/plugin'),
+      'base': resolve('src/base'),
+      'api': resolve('src/api')
+    }
+  },
+  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,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

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,77 @@
+'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: {
+      '/api': {
+        target: 'http://139.159.231.141',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // 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-
+
+
+    /**
+     * 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"'
+}

index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<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="static/images/icon/foicon.jpg" type="image/x-icon">
+  <title>中德人工智能研究院</title>
+  <script>
+    if (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('Android') > -1) {
+      window.location.href = "http://www.cgaii.com/mobile/index.html"
+    } else {
+      console.log('pc端')
+    }
+  </script>
+  <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>
+</head>
+<body>
+<script type="text/javascript">
+</script>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+</html>

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "4dkk",
+  "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",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "vue": "^2.5.2",
+    "vue-awesome-swiper": "^3.1.3",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-polyfill": "^6.26.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",
+    "babel-eslint": "^8.2.1",
+    "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",
+    "iscroll": "^5.2.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-concise-slider": "^2.4.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="app">
+    <transition name="fade">
+      <wrap-nav ></wrap-nav>
+    </transition>
+    <router-view></router-view>
+    <!-- <m-content :locHash="num"></m-content> -->
+    <m-footer></m-footer>
+    <div></div>
+  </div>
+</template>
+
+<script>
+import WrapNav from './components/wrap-nav/wrap-nav'
+import MFooter from './components/m-footer/m-footer'
+import './css/reset.css'
+import './css/animate.css'
+export default {
+  data () {
+    return {
+      direction_up: true
+    }
+  },
+  name: 'App',
+  components: {
+    WrapNav, MFooter
+  },
+  created () { // 实例已经创建完成之后被调用
+  },
+  computed: {
+    showNav: function () {
+      return this.direction_up
+    }
+  },
+  methods: {},
+  mounted () {
+    let that = this
+    if (navigator.userAgent.indexOf('Firefox') > 0) {
+      window.addEventListener('DOMMouseScroll', function (event) {
+        if (that.page > event.pageY) {
+          that.direction_up = false
+        } else {
+          that.direction_up = true
+        }
+        that.page = event.pageY
+        // if (event.deltaY>0||event.wheelDelta>0) {
+        //   this.direction_up = false;
+        // }
+        // else if(event.deltaY<0||event.wheelDelta<0){
+        //   this.direction_up = true;
+        //
+        // }
+        // else{
+        //   return
+        // }
+        //
+      }, false)
+    } else {
+      window.onmousewheel = (event, delta) => {
+        if (event.wheelDelta > 0) {
+          this.direction_up = true
+        } else if (event.wheelDelta < 0) {
+          this.direction_up = false
+        } else {
+
+        }
+      }
+    }
+  }
+}
+
+</script>
+
+<style>
+  body {
+    width: 100%;
+    height: 100%;
+  }
+
+  #app {
+    font-family: sans-serif, '微软雅黑', Helvetica, Arial,;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #565656;
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: transform 500ms ease-in-out;;
+  }
+
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+  {
+    transform: translateY(-90px);
+  }
+
+</style>

src/api/server.js

@@ -0,0 +1,52 @@
+import axios from 'axios'
+
+var isProduction = process.env.NODE_ENV === 'production'
+const servername = isProduction ? '' : '/api' // 自动识别是否是生产模式
+
+const urls = {
+  getLocation: '/recruitment/location/api/get',
+  getCategory: '/recruitment/category/api/get',
+  getPosition: '/recruitment/position/api/get',
+  getNews: '/news/api/get',
+  getInvitation: '/invitation/venue/api/get',
+  postInvitation: '/invitation/apply/api/save'
+}
+
+let _requestApi = {}
+// let _requestAll = {}
+
+Object.keys(urls).forEach(function (key) {
+  _requestApi[key] = function (data, method) {
+    const url = servername + urls[key]
+    let perfixData = Object.assign({}, data, {
+      rnd: Math.random()
+    })
+    return axios({
+      url: url,
+      method: method || 'post',
+      params: perfixData
+    }).then((res) => {
+      return Promise.resolve(res.data)
+    }).catch((e) => {
+      return Promise.reject(e)
+    })
+  }
+})
+
+// _requestAll = function(arr){
+//   axios.all([getUserAccount(), getUserPermissions()])
+//   .then(axios.spread(function (acct, perms) {
+//     // 两个请求现在都执行完成
+//   }));
+// }
+
+export let request = _requestApi
+
+// 调用
+// request['login']({
+//  data
+// }).then(res=>{
+//  if (res.code = 1) {
+
+//  }
+// })

src/components/cooperative-partner/cooperative-partner.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+  cooperative-partner
+</div>
+</template>
+
+<script>
+export default {
+
+  name: 'cooperative-partner',
+
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

src/components/enter-index/enter-index.vue

@@ -0,0 +1,637 @@
+<template>
+  <div class="content">
+    <div class="video">
+      <img :src="coverSrc" alt="888"/>
+    </div>
+    <div class="content-bg">
+      <div id="research" class="content-research">
+        <div class="content-research-bg">
+          <div id="swszh" class="partners-title">
+            <img :src="researchSrc" alt="888"/>
+            <h3>{{languageStatus.ct1.title}}</h3>
+          </div>
+          <div class="briefIntroduction">
+            <p>{{languageStatus.ct1.p1}}</p>
+            <p>{{languageStatus.ct1.p2}}</p>
+            <p>{{languageStatus.ct1.p3}}</p>
+            <p>{{languageStatus.ct1.p4}}</p>
+            <p>{{languageStatus.ct1.p5}}</p>
+            <p>{{languageStatus.ct1.p6}}</p>
+            <p>{{languageStatus.ct1.p7}}</p>
+            <p>{{languageStatus.ct1.p8}}</p>
+            <p>{{languageStatus.ct1.p9}}</p>
+          </div>
+          <div class="jsx-2470638237 Quotes__bottom-pattern">
+            <svg xmlns="http://www.w3.org/2000/svg" width="38" height="84" class="jsx-2470638237">
+              <path fill="#f2f2f2" d="M0 31h38v38H0z" class="jsx-2470638237"></path>
+              <path d="M17 80h4v4h-4z" class="jsx-2470638237"></path>
+              <path fill="#cfcfcf" d="M17 40h4v4h-4zM17 20h4v4h-4zM17 0h4v4h-4z" class="jsx-2470638237"></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="ConstructionGoal">
+        <div class="partners-title">
+          <img :src="researchSrc" alt="888"/>
+          <h3>{{languageStatus.ct2.title}}</h3>
+        </div>
+        <div class="ConstructionGoal-content">
+          <div class="C-content-one">
+            <div class="C-content-one-left spot">
+              <div>
+                <button>,,</button>
+              </div>
+              <img :src="ConstructionGoalSrc1" alt="66"/>
+            </div>
+            <div class="C-content-one-right C-font">
+              <h3>{{languageStatus.ct2.p1}}</h3>
+              <p>{{languageStatus.ct2.p2}}</p>
+              <div class="C-icon"></div>
+            </div>
+          </div>
+          <div class="C-content-two">
+            <div class="C-content-two-left spot">
+              <div>
+                <button>,,</button>
+              </div>
+              <img :src="ConstructionGoalSrc2" alt="66"/>
+            </div>
+            <div class="C-content-two-right C-font">
+              <h3>{{languageStatus.ct2.p3}}</h3>
+              <p>{{languageStatus.ct2.p4}}</p>
+              <div class="C-icon"></div>
+            </div>
+          </div>
+          <div class="C-content-three">
+            <div class="C-content-three-left spot">
+              <div>
+                <button>,,</button>
+              </div>
+              <img :src="ConstructionGoalSrc3" alt="66"/>
+            </div>
+            <div class="C-content-three-right C-font">
+              <h3>{{languageStatus.ct2.p5}}</h3>
+              <p>{{languageStatus.ct2.p6}}</p>
+              <div class="C-icon"></div>
+            </div>
+          </div>
+        </div>
+        <div class="jsx-2470638237 Quotes__bottom-pattern">
+          <svg xmlns="http://www.w3.org/2000/svg" width="38" height="84" class="jsx-2470638237">
+            <path fill="#f2f2f2" d="M0 31h38v38H0z" class="jsx-2470638237"></path>
+            <path d="M17 80h4v4h-4z" class="jsx-2470638237"></path>
+            <path fill="#cfcfcf" d="M17 40h4v4h-4zM17 20h4v4h-4zM17 0h4v4h-4z" class="jsx-2470638237"></path>
+          </svg>
+        </div>
+      </div>
+      <div class="communication">
+        <div class="partners-title">
+          <img :src="researchSrc" alt="888"/>
+          <h3>{{languageStatus.communication}}</h3>
+        </div>
+        <bottom-swiper v-if="Lang"></bottom-swiper>
+        <en-bottom-swiper v-if="Lang===false"></en-bottom-swiper>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import BottomSwiper from 'plugin/bottom-swiper'
+import ENBottomSwiper from 'plugin/EN-bottom-swiper'
+import {mapGetters} from 'vuex'
+
+export default {
+
+  name: '',
+  data () {
+    return {
+      isTrue: false,
+      top: 0,
+      researchTop: null,
+      visionTop: null,
+      mechanicalTop: null,
+      arTop: null,
+      partnersTop: null,
+      partners4DTop: null,
+      graphicsmediaTOP: null,
+      coverSrc: 'static/images/intoindex/coverSrc.png',
+      researchSrc: 'http://video.cgaii.com/images/icon/research-icon.png',
+      ConstructionGoalSrc1: 'http://video.cgaii.com/images/intoindex/ConstructionGoal1.png',
+      ConstructionGoalSrc2: 'http://video.cgaii.com/images/intoindex/ConstructionGoal2.png',
+      ConstructionGoalSrc3: 'http://video.cgaii.com/images/intoindex/ConstructionGoal3.png',
+      text: {
+        Zh: {
+          communication: '促进交流',
+          ct1: {
+            title: '企业简介',
+            p1: '中德人工智能研究院（CGAII），是在中德两国总理见证下签',
+            p2: '约的合作项目，改项目汇聚德国人工智能领域顶级专家，和具',
+            p3: '有代表性的前沿研究领军型人物、学者以及中国产业界技术精',
+            p4: '英，主要研究高精度高自动化三维数字化技术、智能图像三维',
+            p5: '数字化识别技术、智能机器人及自动驾驶技术、人体自动识别',
+            p6: '及跟踪技术等四个方向，以推动新兴科技、新兴产业的深度融',
+            p7: '合，推动新一轮的信息技术革命，推动中德经济结构转型升级',
+            p8: '为支点，打造中国人工智能领域产、学、研紧密结合的高端前',
+            p9: '沿交流平台。                                                                       '
+          },
+          ct2: {
+            title: '未来展望',
+            p1: '建立中德合作高端软硬件一体化\n' + '技术研发和生产中心',
+            p2: '研究院将在3-5年内建成国内领先的高端软硬件一体化的研发中心和生产中心，主打世界前沿的三维数字化技术应用产业体系、下一代人机交互软硬件系统、高端软硬件一体化技术可以为军工及高端工业、航空航天等产业提供可供研发的技术手段和生产中心。',
+            p3: '建立全国首个3D大数据\n' + '信息中心',
+            p4: '应用超高精度三维数字化技术，通过与国际上和国内的3000多家博物馆合作，建立全国的文物3D大数据中心和文物普查和追溯体系。通过三维数字化技术建立和获取多种工业产品的三维数据信息中心，进而与虚拟现实技术（AR）和增强现实（VR）的应用相结合，打造未来具有可视化特征的3D工业研发和生产大数据信息中心。',
+            p5: '建立物联网信息体系',
+            p6: '在3D人体大数据、3D文物大数据、3D工业产业和商品大数据的基础上可以建立物联网信息体系，物联网信息技术和信息数据将是下一代全新的经济增长模式，具有巨大的想象空间。将3D大数据信息体系与3D物联网信息体系结合工业制造，如3D打印、智能化工业生产等相结合，将产生难以估量的市场容量和国际影响力。'
+          },
+          ct3: {
+            p11: '机器手臂及智能工厂',
+            p12: '利用人工智能三维数字化技术，通过双目摄像头对空间物体进行三维数字化建模、',
+            p13: '识别及跟踪，引导机器手臂进行抓取、精密加工等操作，',
+            p14: '给机器人和机械臂装上“大脑”和“眼睛”，',
+            p15: '为制造业提供更加精细的三维检测方式，精度能够达到微米（μm）级。'
+          },
+          ct4: {
+            p16: '增强现实研究',
+            p17: '增强现实（简称AR）能把现实世界与虚拟世界的信息结合',
+            p18: '实现虚拟仿真世界和现实物理世界的无缝连接；具备实时交互性能',
+            p19: '能在三维尺度空间中增添定位虚拟物体',
+            p20: '广泛应用于建筑、教育、医疗、工业生产、影视、娱乐等领域'
+          }
+
+        },
+        En: {
+          communication: 'communication',
+          ct1: {
+            title: 'About CGAll',
+            p1: 'China-Germany  Artificial   Intelligence   Institute   (CGAII),',
+            p2: 'founded by 4Dage with the cooperation of DFKI,brings to',
+            p3: 'gether  the   best  and brightest  minds  in  the artificial in',
+            p4: 'telligence    field    today,    leading    representatives    of',
+            p5: 'cutting-edge research, academics  and technical  elites  in',
+            p6: "China's  industry. It  is  focused  on  being  a  technology-",
+            p7: 'sharing, talent  and  culture  exchange  platform  between',
+            p8: ' China and Germany.                                                              ',
+            p9: ''
+          },
+          ct2: {
+            title: 'Outlook',
+            p1: 'Establish R&D and manufacturer center of China-Germany \n high-end hardware and software integration \n technology',
+            p2: 'Set up leading R&D and manufacturer center in the next 3-5 years majoring in state-of-art industry system of 3D digitization and the next generation of Human-Computer Interaction.',
+            p3: 'Establish the 1st 3D Big Data Center of China',
+            p4: 'Cooperated with more than 3,000 museums at home and abroad by high precision 3D digitization technology to build searching system for cultural relics.',
+            p5: 'Establish System of IoT',
+            p6: 'Establish IoT on the basis of 3D big data in human body, cultural relics, industrial manufacturing and commodities will exert influence on global markets.'
+          },
+          ct3: {
+            p11: 'The Robotic Arm and Smart Factory',
+            p12: 'Using AI 3D digitization technology with binocular camera to 3D model, identify and track the space object.',
+            p13: 'With the aid of this technology, the robotic arm can grab objects more precisely and achieve precision machining.',
+            p14: 'By equipping the robotic arms with “eyes” and “brain”',
+            p15: 'the precision can reach micron-sized providing more accurate  3d detection for manufacturing.'
+          },
+          ct4: {
+            p16: 'Augmented reality',
+            p17: "Augmented reality is the integration of digital information with the user's environment in real time.",
+            p18: 'It uses the existing environment and overlays new information on top of it',
+            p19: 'Now AR has been widely used in construction, education, medical,',
+            p20: 'industrial production, film and television, entertainment fields etc.'
+          }
+        }
+      },
+      WHOLESHOWS: [
+        {
+          url: 'http://video.cgaii.com/images/WHOLESHOW/WHOLESHOW1.jpg',
+          text: {t1: 'Deutsches', t2: 'Forschungszentrum für', t3: 'Künstliche Intelligenz@', t4: 'GraphicsMedia.Ne'}
+        },
+        {
+          url: 'http://video.cgaii.com/images/WHOLESHOW/WHOLESHOW2.jpg',
+          text: {t1: 'Eduardo Pinto', t2: 'Centro de Computaçao', t3: 'Grafica @', t4: 'GraphicsMedia.net'}
+        },
+        {
+          url: 'http://video.cgaii.com/images/WHOLESHOW/WHOLESHOW3.jpg',
+          text: {t1: 'Jorge Posada', t2: 'Vicomtech @', t3: 'GraphicsMedia.Net'}
+        },
+        {
+          url: 'http://video.cgaii.com/images/WHOLESHOW/WHOLESHOW4.jpg',
+          text: {t1: 'Peter Eisert', t2: 'Fraunhofer Heinrich', t3: 'Hertz Institut @', t4: 'GraphicsMedia.Net'}
+        },
+        {
+          url: 'http://video.cgaii.com/images/WHOLESHOW/WHOLESHOW5.jpg',
+          text: {t1: 'Ivan Vallarino Jr.', t2: 'MIVTech @', t3: 'GraphicsMedia.Net'}
+        }
+      ]
+    }
+  },
+  created () {
+
+  },
+  computed: {
+    languageStatus: function () {
+      return this.$store.state.lang ? this.text.Zh : this.text.En
+    },
+    ...mapGetters(['Lang'])
+  },
+  methods: {},
+  mounted () {
+
+  },
+  components: {
+    'bottom-swiper': BottomSwiper,
+    'en-bottom-swiper': ENBottomSwiper
+  }
+}
+
+</script>
+<style lang="css" scoped>
+  .content {
+    width: 100%;
+    min-width: 1050px;
+    font-size: 40px;
+    overflow: hidden;
+    transition: all 0.2s;
+  }
+
+  .video,
+  #myvideo {
+    width: 100%;
+  }
+  .video > img {
+    width: 100%;
+  }
+  .content-bg {
+    position: relative;
+  }
+
+  .fs40 {
+    font-size: 1.0em;
+    margin-bottom: 0.85em;
+    font-weight: 600;
+  }
+
+  .fs14 {
+    font-size: 0.35em;
+    line-height: 2.5em;
+  }
+
+  .hideLeft,
+  .hideRight {
+    overflow: hidden;
+  }
+
+  .hideLeft > h3,
+  .hideLeft > p {
+    transform: matrix(1, 0, 0, 1, -600, 0);
+    transition: transform 0.5s ease-out;
+  }
+
+  .hideRight > h3,
+  .hideRight > p {
+    transform: matrix(1, 0, 0, 1, 600, 0);
+    transition: transform 0.5s ease-out;
+  }
+
+  .show > h3,
+  .show > p {
+    transform: matrix(1, 0, 0, 1, 0, 0);
+    transition: transform 0.5s ease-out;
+  }
+
+  .delay1 {
+    transition-delay: 0.1s !important;
+  }
+
+  .delay2 {
+    transition-delay: 0.2s !important;
+  }
+
+  .delay3 {
+    transition-delay: 0.3s !important;
+  }
+
+  .delay4 {
+    transition-delay: 0.4s !important;
+  }
+
+  .delay5 {
+    transition-delay: 0.5s !important;
+  }
+
+  .button {
+    width: 3.5em;
+    height: 1.15em;
+    font-size: 1.0em;
+    background: #e83428;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+
+  .button > span {
+    font-size: 0.35em;
+    display: block;
+  }
+
+  /*研究领域*/
+
+  .content-research {
+    height: 15.75em;
+    display: flex;
+  }
+
+  .ontent-research {
+    width: 100%;
+    display: flex;
+  }
+
+  .content-research-bg {
+    display: flex;
+    width: 100%;
+    margin: 0 auto;
+    flex-direction: column;
+  }
+
+  .content-research-bg .partners-title {
+    height: 4.0em;
+  }
+
+  .partners-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  .partners-title > img {
+    width: 0.625em;
+    height: 0.625em;
+  }
+
+  .partners-title > h3 {
+    font-size: 0.75em;
+    margin-top: 1.8em;
+    letter-spacing: 5px;
+  }
+
+  .research-left {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 5.125em;
+    max-width: 16.25em;
+  }
+
+  .research-bg {
+    text-align: left;
+    margin-top: 10.0em;
+  }
+
+  .research-left h3 {
+    font-size: 1.0em;
+    margin-bottom: 0.375em;
+  }
+
+  .research-left p {
+    font-size: 0.35em;
+    line-height: 2.5em;
+    display: flex;
+  }
+
+  .research-right {
+    padding-top: 6.875em;
+    flex-direction: column;
+    justify-content: space-between;
+    display: none;
+  }
+
+  .research-img {
+    margin-top: 3.625em;
+  }
+
+  .research-img > img {
+    width: 100%;
+  }
+
+  .research-img {
+    width: 31.125em;
+    height: 23.0em;
+  }
+
+  .briefIntroduction {
+    line-height: 0.675em;
+  }
+
+  .briefIntroduction p {
+    font-size: 14px;
+    white-space: pre;
+  }
+
+  .Quotes__bottom-pattern {
+    margin-top: 1.55em;
+  }
+
+  .spot {
+    width: 2.575em;
+    height: 9.8em;
+    background: url("http://video.cgaii.com/images/intoindex/ConstructionGoal.png") center top no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+
+  .spot > img {
+    position: absolute;
+    right: 1.1em;
+    top: 1.1em;
+  }
+
+  .ConstructionGoal {
+    height: 40.775em;
+  }
+
+  .ConstructionGoal-content {
+    display: flex;
+    flex-direction: column;
+    width: 27em;
+    margin: 0 auto;
+  }
+
+  .ConstructionGoal-content > div {
+    display: flex;
+    width: 50%;
+  }
+
+  .C-content-two {
+    align-self: flex-end;
+    justify-content: flex-end;
+  }
+
+  .ConstructionGoal .partners-title {
+    margin-bottom: 3.8em;
+  }
+
+  .C-font {
+    font-size: 14px;
+    text-align: left;
+    width: 258px;
+    line-height: 170%;
+    margin-left: 1.3em;
+    position: relative;
+  }
+
+  .C-font h3 {
+    color: #181818;
+    margin-bottom: 33px;
+    font-weight: bold;
+    white-space: pre;
+  }
+
+  .ConstructionGoal-content > div {
+    padding-left: 1.25em;
+  }
+
+  .C-icon {
+    font-size: 40px;
+    position: absolute;
+    bottom: -1.5em;
+    left: 1.25em;
+  }
+
+  .C-content-one .C-icon {
+    background: url("http://video.cgaii.com/images/intoindex/ConstructionGoal-icon-1.png") center top no-repeat;
+    width: 1.225em;
+    height: 1.15em;
+  }
+
+  .C-content-two .C-icon {
+    background: url("http://video.cgaii.com/images/intoindex/ConstructionGoal-icon-2.png") center top no-repeat;
+    width: 1.45em;
+    height: 0.975em;
+  }
+
+  .C-content-three .C-icon {
+    background: url("http://video.cgaii.com/images/intoindex/ConstructionGoal-icon-3.png") center top no-repeat;
+    width: 1.45em;
+    height: 1.4em;
+  }
+
+  .ConstructionGoal .Quotes__bottom-pattern {
+    margin-top: 3.75em;
+  }
+
+  .communication {
+    margin-top: 100px;
+  }
+
+  /*设备兼容*/
+
+  @media screen and (min-width: 1755px) and (max-width: 1805px) {
+    .content {
+      font-size: 39px;
+    }
+  }
+
+  @media screen and (min-width: 1705px) and (max-width: 1755px) {
+    .content {
+      font-size: 38px;
+    }
+  }
+
+  @media screen and (min-width: 1655px) and (max-width: 1705px) {
+    .content {
+      font-size: 37px;
+    }
+  }
+
+  @media screen and (min-width: 1605px) and (max-width: 1655px) {
+    .content {
+      font-size: 36px;
+    }
+  }
+
+  @media screen and (min-width: 1555px) and (max-width: 1605px) {
+    .content {
+      font-size: 34px;
+    }
+  }
+
+  @media screen and (min-width: 1505px) and (max-width: 1555px) {
+    .content {
+      font-size: 32px;
+    }
+  }
+
+  @media screen and (min-width: 1455px) and (max-width: 1505px) {
+    .content {
+      font-size: 30px;
+    }
+    .ConstructionGoal-content {
+      width: 40em;
+    }
+    .briefIntroduction {
+      line-height: .85em;
+    }
+  }
+
+  @media screen and (min-width: 1405px) and (max-width: 1455px) {
+    .content {
+      font-size: 28px;
+    }
+    .ConstructionGoal-content {
+      width: 40em;
+    }
+    .briefIntroduction {
+      line-height: .85em;
+    }
+  }
+
+  @media screen and (min-width: 1355px) and (max-width: 1405px) {
+    .content {
+      font-size: 26px;
+    }
+    .ConstructionGoal-content {
+      width: 40em;
+    }
+    .briefIntroduction {
+      line-height: .85em;
+    }
+  }
+
+  @media screen and (min-width: 1305px) and (max-width: 1355px) {
+    .content {
+      font-size: 24px;
+    }
+    .ConstructionGoal-content {
+      width: 40em;
+    }
+    .briefIntroduction {
+      line-height: .85em;
+    }
+  }
+
+  @media screen and (min-width: 1255px) and (max-width: 1305px) {
+    .content {
+      font-size: 22px;
+    }
+    .ConstructionGoal-content {
+      width: 40em;
+    }
+    .briefIntroduction {
+      line-height: .85em;
+    }
+  }
+
+  @media screen and (max-width: 1305px) {
+    .content {
+      font-size: 22px;
+    }
+    .ConstructionGoal-content {
+      width: 41em;
+    }
+    .briefIntroduction {
+      line-height: .85em;
+    }
+    .briefIntroduction > p {
+      font-size: .5em;
+    }
+  }
+
+</style>

src/components/join-us/join-us.vue

@@ -0,0 +1,990 @@
+<template>
+<div id="join-us" class="join-us">
+  <div class="clearfix">
+    <div class="join-us-con">
+      <div class="partners-title">
+        <div class="image"><img :src="researchSrc" /></div>
+        <h3 class="fix-h3">{{languageStatus.title}}</h3>
+      </div>
+      <div class="join-us_body">
+        <div class="join-environment">
+          <div class="join-environment_left">
+            <div class="join-environment_left_con">
+              <div class="join-environment-img-item div-skew" @click="showEnvironmrntImage">
+                <img width="100%" height="100%" :src="companyImg1">
+              </div>
+              <div class="join-environment-img-item" @click="showEnvironmrntImage">
+                <img width="100%" height="100%" :src="companyImg">
+              </div>
+            </div>
+          </div>
+          <div class="join-environment_right">
+            <div class="join-environment-txt">
+              <h3 class="join-environment-txt_title">{{languageStatus.environment.title}}</h3>
+              <div class="join-environment-txt_dec">
+                <ul>
+                  <li>
+                    {{languageStatus.environment.ctLi1}}
+                  </li>
+                  <p class="join-environment-txt-p">{{languageStatus.environment.ctP1}}</p>
+                  <li>
+                    {{languageStatus.environment.ctLi2}}
+                  </li>
+                  <p class="join-environment-txt-p">{{languageStatus.environment.ctP2}}</p>
+                  <li>
+                    {{languageStatus.environment.ctLi3}}
+                  </li>
+                  <p class="join-environment-txt-p">{{languageStatus.environment.ctP3}}</p>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="join-working">
+          <div class="join-working_left">
+            <div class="join-working_con">
+              <div class="join-working-txt">
+                <h3 class="join-working-txt_title">{{languageStatus.technology.title}}</h3>
+                <div class="join-working-txt_dec">
+                  <ul>
+                    <li>
+                      {{languageStatus.technology.ctLi1}}
+                    </li>
+                    <p>{{languageStatus.technology.ctP1}}</p>
+                    <li>
+                      {{languageStatus.technology.ctLi2}}
+                    </li>
+                    <p>{{languageStatus.technology.ctP2}}</p>
+                    <li>
+                      {{languageStatus.technology.ctLi3}}
+                    </li>
+                    <p>{{languageStatus.technology.ctP3}}</p>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="join-working_right">
+            <div class="join-working-img-item" @click="_clickShowImage">
+              <img width="100%" height="100%" :src="join_img">
+            </div>
+          </div>
+        </div>
+        <div class="join-environment" style="margin-top:10em">
+          <div class="join-environment_left">
+            <div class="join-environment_left_con">
+              <div class="join-environment-img-item div-skew" @click="showFriendImage">
+                <img width="100%" height="100%" :src="travelImg1">
+              </div>
+              <div class="join-environment-img-item" @click="showFriendImage">
+                <img width="100%" height="100%" :src="travelImg">
+              </div>
+            </div>
+          </div>
+          <div class="join-environment_right">
+            <div class="join-environment-txt">
+              <h3 class="join-environment-txt_title">{{languageStatus.friend.title}}</h3>
+              <div class="join-environment-txt_dec">
+                <ul class="friend-dec">
+                  <li>
+                    {{languageStatus.friend.ctLi1}}
+                  </li>
+                  <li>
+                    {{languageStatus.friend.ctLi2}}
+                  </li>
+                  <li>
+                    {{languageStatus.friend.ctLi3}}
+                  </li>
+                  <li>
+                    {{languageStatus.friend.ctLi4}}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="position-recruit">
+      <v-dialog v-if="showApply" :detail="workItem" @closeMask="_closeMask"></v-dialog>
+      <div v-if="Lang==='zh'" class="position-recruit-search">
+        <div class="position-recruit-title">
+          职位搜索
+        </div>
+        <div class="position-recruit-search-list">
+          <div class="position-recruit-search-list_item">
+            <span>工作地点：</span>
+            <span :class="['span_styl',{'active':  locationIdx==''}]" @click="allClick">全部</span>
+            <span :class="['span_styl',{'active':item.id == locationIdx}]" @click="locationClick(item.id)" v-for="(item, i) in workLocation" :key="i">{{item.name}} </span>
+          </div>
+          <div class="position-recruit-search-list_item">
+            <span>岗位类别：</span>
+            <span :class="['span_styl',{'active':item.id == categoryIdx}]" @click="categoryClick(item.id)" v-for="(item,i) in workCategory" :key="i">{{item.name}}</span>
+          </div>
+        </div>
+        <div class="position-recruit-search-con">
+          <span><input type="text" class="form_input" placeholder="请输入关键字" @keyup.enter="_search" ref="search"
+                          name=""></span>
+          <span class="search-btn" @click="_search">搜索</span>
+        </div>
+      </div>
+      <div v-if="Lang!=='zh'" class="position-recruit-search">
+        <div class="position-recruit-title">
+          Job
+        </div>
+        <div class="position-recruit-search-list">
+          <div class="position-recruit-search-list_item">
+            <span>Location:</span>
+            <span :class="['span_styl',{'active':  locationIdx==''}]" @click="allClick">All</span>
+            <span :class="['span_styl',{'active':item.id == locationIdx}]" @click="locationClick(item.id)" v-for="(item, i) in workLocation" :key="i">{{item.englishName}} </span>
+          </div>
+          <div class="position-recruit-search-list_item">
+            <span>Job Opens:</span>
+            <span :class="['span_styl',{'active':item.id == categoryIdx}]" @click="categoryClick(item.id)" v-for="(item,i) in workCategory" :key="i">{{item.englishName}}</span>
+          </div>
+        </div>
+        <div class="position-recruit-search-con">
+          <span><input type="text" class="form_input" placeholder="Keyword" @keyup.enter="_search" ref="search"
+                          name=""></span>
+          <span class="search-btn" @click="_search">Search</span>
+        </div>
+      </div>
+      <div class="position-recruit-list">
+        <div v-if="Lang==='zh'" class="position-recruit-title " style="border-bottom:none">
+          职位列表
+        </div>
+        <div v-if="Lang!=='zh'" class="position-recruit-title " style="border-bottom:none">
+          Job list
+        </div>
+        <div class="position-recruit-list-con">
+          <table class="recruit-list-table">
+            <tr v-if="Lang==='zh'">
+              <th>职位名称</th>
+              <th>职位类别</th>
+              <!--<th style="text-align:center">人数</th>-->
+              <th style="text-align:center">地点</th>
+              <!--<th style="text-align:center">发布时间</th>-->
+              <th style="text-align:center">操作</th>
+            </tr>
+            <tr v-if="Lang!=='zh'">
+              <th>Open Jobs</th>
+              <th>Type</th>
+              <!--<th style="text-align:center">number</th>-->
+              <th style="text-align:center">Location</th>
+              <!--<th style="text-align:center">release time</th>-->
+              <th style="text-align:center">Join Us</th>
+            </tr>
+            <template v-if="Lang==='zh'">
+              <tr v-for="item in workPosition" :key="item.id">
+                <td>{{item.name}}</td>
+                <td>{{item.categories[0].name}}</td>
+                <!--<td style="text-align:center">{{item.count}}</td>-->
+                <td style="text-align:center"><span v-for="list in item.locations" :key="list.id" style="padding-right:10px">{{list.name}}</span></td>
+                <!--<td style="text-align:center">{{item.releaseTime}}</td>-->
+                <td style="text-align:center;"><span class="apply-btn" @click="_showApply(item)">加入我们</span></td>
+              </tr>
+            </template>
+            <template v-if="Lang!=='zh'">
+              <tr v-for="item in workPosition" :key="item.id">
+                <td>{{item.englishName}}</td>
+                <td>{{item.categories[0].englishName}}</td>
+                <!--<td style="text-align:center">{{item.count}}</td>-->
+                <td style="text-align:center"><span v-for="list in item.locations" :key="list.id" style="padding-right: 10px">{{list.englishName}}</span></td>
+                <!--<td style="text-align:center">{{item.releaseTime}}</td>-->
+                <td style="text-align:center;"><span class="apply-btn" @click="_showApply(item)">Apply Now</span></td>
+              </tr>
+            </template>
+
+          </table>
+        </div>
+      </div>
+      <v-pagination :total="total" class="pagination_sty" :current-page='currentPage' @pagechange="pagechange"></v-pagination>
+    </div>
+  </div>
+  <div class="images" v-if="EnvironmrntImage">
+    <div class="position">
+      <div class="slider-bg" @click="EnvironmrntImage=false"></div>
+      <Hswisper2></Hswisper2>
+    </div>
+  </div>
+  <div class="images" v-if="showImage">
+    <div class="position">
+      <div class="slider-bg" @click="showImage=false"></div>
+      <Hswisper></Hswisper>
+    </div>
+  </div>
+  <div class="images" v-if="friendImage">
+    <div class="position">
+      <div class="slider-bg" @click="friendImage=false"></div>
+      <Hswisper3></Hswisper3>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import pagination from 'plugin/pagination'
+import dialog from 'components/v-dialog/v-dialog'
+import {
+  request
+} from 'api/server'
+import {
+  mapGetters
+} from 'vuex'
+import Hswisper from 'plugin/h-swiper'
+import Hswisper2 from 'plugin/h-swiper2'
+import Hswisper3 from 'plugin/h-swiper3'
+export default {
+
+  name: 'join-us',
+
+  data () {
+    return {
+      workItem: '',
+      searchText: '',
+      showApply: false,
+      locationIdx: '',
+      categoryIdx: '',
+      workLocation: {},
+      workCategory: {},
+      workPosition: {},
+      categoryId: 1,
+      locationId: 4,
+      total: 1, // 记录总条数
+      display: 10, // 每页显示条数
+      currentPage: 1, // 当前的页数
+      researchSrc: 'http://video.cgaii.com/images/icon/research-icon.png',
+      companyImg: 'static/images/join-us/1.JPG',
+      companyImg1: 'http://video.cgaii.com/images/company1.jpg',
+      travelImg: 'http://video.cgaii.com/images/join-us/11.jpg',
+      join_img: 'http://video.cgaii.com/images/join-us/01.jpg',
+      travelImg1: 'http://video.cgaii.com/images/travel1.jpg',
+      text: {
+        Zh: {
+          title: '加入我们',
+          environment: {
+            title: '人工智能技术高地\n' + '中德合作新典范',
+            ctLi1: '技术交流平台',
+            ctP1: '将人工智能技术、计算视觉技术、下一代互联网人机交互技术融入未来的工业制造环节，转化为更强劲的生产力和全新的经济增长点。',
+            ctLi2: '人员交流平台',
+            ctP2: '重视研究人员的培养和交流，引进德方技术专家，并派遣人员到德国人工智能研究中心访问实习。',
+            ctLi3: '文化交流平台',
+            ctP3: '每年举办一次大型国际会议“中德人工智能大会”，稳步树立中德人工智能研究院的平台文化和平台战略。'
+          },
+          technology: {
+            title: '数字经济时代\n' + '重塑未来生活大数据',
+            ctLi1: '建立中德合作高端软硬件一体化技术研发生产中心',
+            ctP1: '将在3-5年内建成国内领先的高端软硬件一体化的研发中心和生产中心，主打世界前沿的三维数字化技术应用产业体系、下一代人机交互软硬件系统等。',
+            ctLi2: '建立全国首个3D大数据信息中心',
+            ctP2: '应用超高精度三维数字化技术，通过与国际上和国内的3000多家博物馆合作，建立全国的文物3D大数据中心和文物普查和追溯体系。',
+            ctLi3: '建立物联网信息体系',
+            ctP3: '在3D人体大数据、3D文物大数据、3D工业产业和商品大数据的基础上建立物联网信息体系，将产生难以估量的市场容量和全球性的影响力。'
+          },
+          friend: {
+            title: '跟有趣的人作伴 \n' + '每天都是惊喜',
+            ctLi1: '提供各种口味的茶、咖啡、零食、水果的欧式茶水间',
+            ctLi2: '业界颜值最高的美女帅哥，好看的皮囊和有趣的灵魂并存',
+            ctLi3: '智慧产业集聚、基础设施智能、政府运行高效、公共服务便捷',
+            ctLi4: '完善优厚的薪酬福利，花样百出的境外年会旅行，平等快乐的工作氛围'
+          }
+        },
+        Ge: {
+          title: 'Kommen Sie zu uns',
+          environment: {
+            title: 'Technischer Spitzenreiter der\nkünstlichen Intelligenz Neues\nModell der deutsch-chinesischen\nZusammenarbeit',
+            ctLi1: 'Plattform für technischen Austausch',
+            ctP1: 'Die Techniken der künstlichen Intelligenz, der Computervision und der Mensch-Computer-Interaktion im Internet der nächsten Generation sind in zukünftige industrielle Fertigungsprozesse zu integrieren, damit sie in höhere Produktivität und einen neuesten Wirtschaftswachstumspunkt umgewandelt werden können.',
+            ctLi2: 'Plattform für den Personalaustausch',
+            ctP2: 'Der Schwerpunkt liegt auf der Ausbildung und dem Austausch von Wissenschaftlern, der Einführung deutscher technischer Experten und der Entsendung von Mitarbeitern ins Deutsche Forschungszentrum für künstliche Intelligenz zum Besuch und Praktikum.',
+            ctLi3: 'Plattform für den Kulturaustausch',
+            ctP3: 'Jedes Jahr wird eine große internationale Konferenz „Deutsch-Chinesische Konferenz für künstliche Intelligenz“ abgehalten werden, um die Plattformkultur und -strategie des Deutsch-Chinesischen Forschungsinstituts für künstliche Intelligenz kontinuierlich festzulegen.'
+          },
+          technology: {
+            title: 'Zeit der digitalen Wirtschaft\n' + 'Neugestalt der Massendaten des Lebens in der Zukunft',
+            ctLi1: 'Einrichtung eines integrierten Technikforschungs- und Produktionszentrums für qualitativ hochwertige Software und Hardware unter der deutsch-chinesischen Zusammenarbeit',
+            ctP1: 'Es wird in 3-5 Jahren ein inländisches integriertes Technikforschungs- und Produktionszentrum für qualitativ hochwertige Software und Hardware aufgebaut, wobei der Schwerpunkt auf den weltweit führenden Industriesystemen der digitalen 3D-Technologie und den Software- und Hardwaresystemen der Mensch-Computer-Interaktion der nächsten Generation liegt.',
+            ctLi2: 'Einrichtung des nationalen ersten Informationszentrums der 3D-Massendaten',
+            ctP2: 'Durch die Verwendung von hochpräziser 3D-Digitaltechnologie und der Zusammenarbeit mit mehr als 3.000 internationalen und chinesischen Museen wird im nationalen Informationszentrum der 3D-Massendaten ein System zur Suche und zur Rückverfolgung von Kulturgegenständen eingerichtet werden.',
+            ctLi3: 'Einrichtung eines Informationssystems vom Internet der Dinge',
+            ctP3: 'Die Einrichtung eines Informationssystems vom Internet der Dinge auf Basis von 3D-Massendaten für Menschen, Kulturgegenstände, Industrien und Waren wird zu einer unkalkulierbaren Marktkapazität und einem globalen Einfluss führen.'
+          },
+          friend: {
+            title: 'Zusammen mit interessanten Menschen \n' + 'Jeder Tag ist eine Überraschung.',
+            ctLi1: 'Ein Pausenraum im europäischen Stil wird Tee, Kaffee, Snacks und Obst in verschiedenen Geschmacksrichtungen anbieten.',
+            ctLi2: 'Die hübschesten Mitarbeiterinnen und Mitarbeiter sind hier, die nicht nur ein gutes Aussehen sondern auch eine lustige Seele besitzen.',
+            ctLi3: 'Integrierte Intelligenzindustrien, Intelligente Infrastrukturen, effizienter Regierungsbetrieb und komfortable öffentliche Dienstleistungen',
+            ctLi4: 'Perfektes und großzügiges Gehalt und Wohlergehen, vielfältige Jahrestreffen in Übersee,  glückliche Arbeitsatmosphäre'
+          }
+        },
+        En: {
+          title: 'Join us',
+          environment: {
+            title: 'Highland of AI Technology\n' + 'Model of Sino-German cooperation',
+            ctLi1: 'Technology exchange platform',
+            ctP1: 'Integrate the technologies of AI, computer vision and the next generation of Human-Computer Interaction into future industrial production and manufacturing and turn these into productivity and new economic growth point. ',
+            ctLi2: 'Talent exchange platform',
+            ctP2: 'Value cultivation and communication of researchers;Bring in German experts to exchange and open internship windows for students to visit or study in DFKI.',
+            ctLi3: 'Cultural exchange platform',
+            ctP3: 'International Conference on “Made in China 2025 & Artificial Intelligence”held annually; Establish culture and strategy for the platform of China-Germany Artificial Intelligence Institute.'
+          },
+          technology: {
+            title: 'Era of Digital Economy\n' + 'Big Data for the Future Life',
+            ctLi1: 'R&D and manufacturer center of China-Germany\n' + 'high-end hardware and software integration',
+            ctP1: 'Set up leading R&D and manufacturer center in the next 3-5 years majoring in state-of-art industry system of 3D digitization hardware/software system for the next generation human-computer interaction.',
+            ctLi2: 'The first 3D big data information center of China',
+            ctP2: 'Cooperated with more than 3,000 museums at home and abroad by high precision 3D digitization technology to build searching system for cultural relics.',
+            ctLi3: 'System of IoT established',
+            ctP3: 'Establish IoT on the basis of 3D big data in human body, cultural relics, industrial manufacturing and commodities will exert influence on global markets.'
+          },
+          friend: {
+            title: 'Work together with beautiful minds\n' + 'Everyday surprise',
+            ctLi1: 'Limitless tea,coffee,snacks,fruits available;',
+            ctLi2: 'Good-looking and beautiful minds gather here;',
+            ctLi3: 'Industrial Cluster;Convenient traffic conditions,;Infrastructure complete;',
+            ctLi4: 'Competitive remuneration package,annual oversea trips,fun and active working atmosphere.'
+          }
+        }
+      },
+      showImage: false,
+      EnvironmrntImage: false,
+      friendImage: false
+    }
+  },
+  created () {
+    this._getLocation()
+    this._getCategory()
+    this._getPosition()
+  },
+  computed: {
+    languageStatus: function () {
+      switch (this.$store.state.lang) {
+        case 'zh':
+          return this.text.Zh
+        case 'ge':
+          return this.text.Ge
+
+        case 'en':
+          return this.text.En
+
+        default:
+          return this.text.Zh
+      }
+    },
+    ...mapGetters(['Lang'])
+  },
+  methods: {
+    allClick: function () {
+      this.locationIdx = ''
+      this._getPosition()
+    },
+    pagechange: function (currentPage) {
+      console.log(currentPage)
+      this.currentPage = currentPage
+      this._getPosition()
+
+      // ajax请求, 向后台发送 currentPage, 来获取对应的数据
+    },
+    _closeMask: function (isClose) {
+      this.showApply = isClose
+    },
+    locationClick: function (index) {
+      if (this.locationIdx === index) {
+        return
+      } else {
+        this.locationIdx = index
+        this._getPosition()
+      }
+      console.log(this.locationIdx)
+    },
+    _search: function () {
+      this.searchText = this.$refs.search.value
+      console.log(this.searchText)
+      this.currentPage = 1
+      this.locationIdx = ''
+      this.categoryIdx = ''
+      this._getPosition()
+    },
+    _showApply: function (item) {
+      this.workItem = item
+      console.log(this.workItem)
+      this.showApply = !this.showApply
+    },
+    categoryClick: function (index) {
+      if (this.categoryIdx === index) {
+
+      } else {
+        this.categoryIdx = index
+        this._getPosition()
+      }
+    },
+    _getLocation: function () {
+      request['getLocation']({}, 'get').then(res => {
+        this.workLocation = res
+        // console.log(res)
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    _getCategory: function () {
+      request['getCategory']({}, 'get').then(res => {
+        this.workCategory = res
+        // console.log(res)
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    _getPosition: function () {
+      request['getPosition']({
+        page: this.currentPage - 1,
+        categoryId: this.categoryIdx,
+        locationId: this.locationIdx,
+        searchText: this.searchText
+      }, 'get').then(res => {
+        console.log(res)
+        this.workPosition = res.content
+        this.total = res.totalElements
+        this.display = res.size
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    _clickShowImage () {
+      this.showImage = true
+    },
+    showEnvironmrntImage () {
+      this.EnvironmrntImage = true
+    },
+    showFriendImage () {
+      this.friendImage = true
+    }
+  },
+  components: {
+    'v-pagination': pagination,
+    'v-dialog': dialog,
+    Hswisper,
+    Hswisper2,
+    Hswisper3
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.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://video.cgaii.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: 0.4em;
+  background: #fff;
+  width: 100%;
+  float: left;
+  text-align: left;
+  margin-top: 8em;
+  padding: 10em 20em;
+}
+
+/* .position-recruit-search {} */
+
+.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;
+  padding: 0 0.8em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.apply-btn {
+  display: inline-block;
+}
+
+.form_input {
+  width: 12em;
+  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 7em 1.1em 0;
+  font-weight: bold;
+  border-bottom: 1px solid #ccc;
+}
+
+.recruit-list-table td {
+  padding: 1.1em 7em 1.1em 0;
+}
+
+.recruit-list-table tr:last-child {
+  border-bottom: 1px solid #ccc;
+}
+
+.recruit-list-table th:last-child {
+  padding-right: 2.2em;
+}
+
+.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;
+  }
+  /* .join-environment {} */
+  /* .join-working-txt {}
+  .recruit-list-table th {}
+  .position-recruit {}
+  .recruit-list-table td {} */
+}
+
+@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%;
+  }
+}
+
+@media screen and (max-width: 1220px) {
+  .join-us {
+    font-size: 25px;
+  }
+  .join-environment {
+    height: 13em;
+  }
+  .join-environment_left {
+    width: 35%;
+  }
+
+  .recruit-list-table td {
+    padding: 1.1em 4em 1.1em 0;
+  }
+  .join-environment-txt_dec>ul>p {
+    width: 70%;
+  }
+  .recruit-list-table th {
+    padding: 1.1em 4em 1.1em 0;
+    font-weight: bold;
+    border-bottom: 1px solid #ccc;
+  }
+}
+</style>
+
+<style>
+.slider-pagination-bullets {
+  display: none !important;
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+</style>

src/components/m-footer/m-footer.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="footer">
+    <p>{{languageStatus.p1}}</p>
+    <p>{{languageStatus.p4}}</p>
+    <p>
+      <!--<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496304" target="_blank" style="color: #666;margin-left: 10px;"><img style="display:inline;vertical-align:middle;margin-right:5px;" src="http://video.cgaii.com/images/icon/beian.png">粤公网安备 44049102496304号</a>-->
+      <a href="http://www.miitbeian.gov.cn" target="_blank" style="color: #666;padding-left: 15px"> 皖ICP备18013398号-1</a>
+    </p>
+  </div>
+</template>
+<script>
+export default {
+
+  name: 'footer',
+
+  data () {
+    return {
+      text: {
+        Zh: {
+          p1: '电话：400 - 6698 - 025',
+          p2: '',
+          p3: '',
+          p4: 'Copyright © 2018 CGAII Corporation.All rights reserved. 中德人工智能研究院 版权所有'
+        },
+        En: {
+          p1: '',
+          p2: '',
+          p3: '',
+          p4: 'Copyright © 2018 CGAII Corporation.All rights reserved. 中德人工智能研究院 版权所有'
+        }
+      }
+    }
+  },
+  computed: {
+    languageStatus: function () {
+      return this.$store.state.lang ? this.text.Zh : this.text.En
+    }
+  },
+  props: { // 父组件传递给子组件
+    'locHash': {}
+  }
+}
+
+</script>
+<style lang="css" scoped>
+.footer {
+  font-size: 40px;
+  width: 40.425em;
+  border-top: 1px solid #ccc;
+  height: 7.325em;
+  margin: 10px auto;
+  padding-top: 1.375em;
+}
+
+.footer p {
+  font-size: 14px;
+  margin-bottom: 1.57em;
+}
+
+.footer p:nth-child(3) {
+  margin-bottom: 3.14em;
+}
+
+/*设备兼容*/
+
+@media screen and (min-width: 1755px) and (max-width: 1805px) {
+  .footer {
+    font-size: 39px;
+  }
+}
+
+@media screen and (min-width: 1705px) and (max-width: 1755px) {
+  .footer {
+    font-size: 38px;
+  }
+}
+
+@media screen and (min-width: 1655px) and (max-width: 1705px) {
+  .footer {
+    font-size: 37px;
+  }
+}
+
+@media screen and (min-width: 1605px) and (max-width: 1655px) {
+  .footer {
+    font-size: 36px;
+  }
+}
+
+@media screen and (min-width: 1555px) and (max-width: 1605px) {
+  .footer {
+    font-size: 34px;
+  }
+}
+
+@media screen and (min-width: 1505px) and (max-width: 1555px) {
+  .footer {
+    font-size: 32px;
+  }
+}
+
+@media screen and (min-width: 1455px) and (max-width: 1505px) {
+  .footer {
+    font-size: 30px;
+  }
+}
+
+@media screen and (min-width: 1405px) and (max-width: 1455px) {
+  .footer {
+    font-size: 28px;
+  }
+}
+
+@media screen and (min-width: 1355px) and (max-width: 1405px) {
+  .footer {
+    font-size: 26px;
+  }
+}
+
+@media screen and (min-width: 1305px) and (max-width: 1355px) {
+  .footer {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1255px) and (max-width: 1305px) {
+  .footer {
+    font-size: 22px;
+  }
+}
+
+@media screen and (max-width: 1305px) {
+  .footer {
+    font-size: 22px;
+  }
+}
+
+</style>

src/components/message-consultation/message-consultation.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="content">
+    <div class="partners-title">
+      <img :src="researchSrc" />
+      <h3 class="fix-h3" v-if="Lang==='zh'">消息资讯</h3>
+      <h3 class="fix-h3" v-if="Lang==='en'">news</h3>
+      <h3 class="fix-h3" v-if="Lang==='ge'">Informationen</h3>
+    </div>
+    <div class="message-consultation_body">
+      <div class="message-consultation_left">
+        <div class="news-con">
+          <ul class="news-ul">
+            <li v-for="(item,index) in newsList" :key="index">
+              <a :href="item.url" target="_blank">{{index+1}}.{{item.title}}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="message-consultation_right">
+        <div class="message-consultation_bg">
+          <img :src="bgImg" class="bgImg">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { request } from 'api/server'
+import {mapGetters} from 'vuex'
+
+export default {
+  name: 'message-consultation',
+  data () {
+    return {
+      newsList: '',
+      researchSrc: 'http://video.cgaii.com/images/icon/research-icon.png',
+      bgImg: 'http://video.cgaii.com/images/message-bg.png'
+    }
+  },
+  created () {
+    this._getNews()
+  },
+  computed: {
+    ...mapGetters(['Lang'])
+  },
+
+  methods: {
+    _getNews: function () {
+      request['getNews']({}, 'get').then(res => {
+        this.newsList = res
+        // console.log(res)
+      }).catch(err => {
+        console.log(err)
+      })
+    }
+  },
+  mounted () {
+
+  }
+}
+
+</script>
+<style lang="css" scoped>
+a {
+  color: #656565;
+}
+
+.content {
+  width: 100%;
+  min-width: 1024px;
+  font-size: 40px;
+  overflow: hidden;
+  transition: all 0.2s;
+  background: #f8fafd;
+  padding: 3.1em 0;
+}
+
+.message-consultation_body {
+  display: flex;
+  padding-top: 2.8em;
+
+}
+.fix-h3 {
+  letter-spacing: 5px;
+}
+.partners-title {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+}
+
+.partners-title>img {
+  width: 0.625em;
+  height: 0.625em;
+}
+
+.partners-title>h3 {
+  font-size: 0.75em;
+  margin-top: 0.8em;
+}
+.message-consultation_left {
+  width: 50%;
+  display: flex;
+  align-items: center;
+}
+
+.message-consultation_right {
+  width: 50%;
+}
+.message-consultation_bg{
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.message-consultation_title {
+  font-size: 0.8em;
+}
+
+.news-con {
+
+  padding-left: 4.2em;
+  height: 15em;
+}
+
+.news-ul {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  text-align: left;
+}
+
+.news-ul>li {
+  letter-spacing: 3px;
+  font-size: 0.4em;
+  line-height: 2.8em;
+}
+
+.message-title {
+  float: left;
+  text-align: left;
+  padding-left: 75px;
+}
+
+.message-title>img {
+  width: 0.625em;
+  height: 0.625em;
+}
+
+.bgImg {
+
+  width: 100%;
+  padding-left: 0.8px;
+}
+
+.message-consultation_title {
+  position: relative;
+  top: -4px;
+  left: 3px;
+  font-size: 0.60em;
+  margin-left: 25px;
+  letter-spacing: 3px;
+}
+
+.join-title {
+  position: relative;
+  left: -45px;
+  letter-spacing: 5px;
+  font-size: 0;
+}
+
+.join-us_title {
+  position: relative;
+  top: -2px;
+  left: 90px;
+  font-size: 28px;
+}
+
+@keyframes AR {
+  from {
+    top: 0px;
+  }
+  to {
+    top: 30px;
+  }
+}
+
+/*设备兼容*/
+
+@media screen and (min-width: 1755px) and (max-width: 1805px) {
+  .content {
+    font-size: 39px;
+  }
+}
+
+@media screen and (min-width: 1705px) and (max-width: 1755px) {
+  .content {
+    font-size: 38px;
+  }
+}
+
+@media screen and (min-width: 1655px) and (max-width: 1705px) {
+  .content {
+    font-size: 37px;
+  }
+}
+
+@media screen and (min-width: 1605px) and (max-width: 1655px) {
+  .content {
+    font-size: 36px;
+  }
+}
+
+@media screen and (min-width: 1555px) and (max-width: 1605px) {
+  .content {
+    font-size: 34px;
+  }
+}
+
+@media screen and (min-width: 1505px) and (max-width: 1555px) {
+  .content {
+    font-size: 32px;
+  }
+}
+
+@media screen and (min-width: 1455px) and (max-width: 1505px) {
+  .content {
+    font-size: 30px;
+  }
+}
+
+@media screen and (min-width: 1405px) and (max-width: 1455px) {
+  .content {
+    font-size: 28px;
+  }
+}
+
+@media screen and (min-width: 1355px) and (max-width: 1405px) {
+  .content {
+    font-size: 26px;
+  }
+}
+
+@media screen and (min-width: 1305px) and (max-width: 1355px) {
+  .content {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1255px) and (max-width: 1305px) {
+  .content {
+    font-size: 22px;
+  }
+}
+
+@media screen and (max-width: 1305px) {
+  .content {
+    font-size: 22px;
+  }
+}
+
+</style>

src/components/research-field/research-field.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+  research-field
+</div>
+</template>
+
+<script>
+export default {
+
+  name: 'research-field',
+
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

src/components/v-dialog/v-dialog.vue

@@ -0,0 +1,165 @@
+<template>
+<div class="dialog-con-bg">
+  <div class="dialog-con" @click="_closeMask"></div>
+  <div class="dialog-body">
+    <div class="dialog-body-top">
+      <div v-if="Lang" class="dialog-body-title ">
+        {{detail.name}}
+      </div>
+      <div v-if="Lang===false" class="dialog-body-title ">
+        {{detail.englishName}}
+      </div>
+      <div class="dialog-body-sublist">
+        <span v-for="(item,i) in 1" :key="i">
+          <span v-if="Lang" class="dialog-body-sub_title">职位类别：</span>
+        <span v-if="Lang===false" class="dialog-body-sub_title">Job Category:</span>
+        <span v-if="Lang" class="dialog-body-sub_value">{{detail.categories[0].name}}</span>
+        <span v-if="Lang===false" class="dialog-body-sub_value">{{detail.categories[0].englishName}}</span>
+        <span v-if="Lang" class="dialog-body-sub_title">工作地点：</span>
+        <span v-if="Lang===false" class="dialog-body-sub_title">address:</span>
+        <span v-if="Lang" v-for="item in detail.locations" :key="item.id" class="dialog-body-sub_value">{{item.name}}</span>
+        <span v-if="Lang===false" v-for="item in detail.locations" :key="item.id" class="dialog-body-sub_value">{{item.englishName}}</span>
+        <span v-if="Lang" class="dialog-body-sub_title">招聘人数：</span>
+        <span v-if="Lang===false" class="dialog-body-sub_title">number:</span>
+        <span class="dialog-body-sub_value">1</span>
+        <span v-if="Lang" class="dialog-body-sub_title">发布时间：</span>
+        <span v-if="Lang===false" class="dialog-body-sub_title">time:</span>
+        <span class="dialog-body-sub_value">{{detail.releaseTime}}</span>
+        </span>
+      </div>
+    </div>
+    <div class="dialog-body-list">
+      <div class="dialog-body-list-item">
+        <div v-if="Lang" class="dialog-body-list-title">职位描述</div>
+        <div v-if="Lang===false" class="dialog-body-list-title">job description</div>
+        <div v-if="Lang" class="dialog-body-list-con" v-html='detail.description'>
+        </div>
+        <div v-if="Lang===false" class="dialog-body-list-con" v-html='detail.englishDescription'>
+        </div>
+      </div>
+      <div class="dialog-body-list-item">
+        <div v-if="Lang" class="dialog-body-list-title">任职要求</div>
+        <div v-if="Lang===false" class="dialog-body-list-title">job requirements</div>
+        <div v-if="Lang" class="dialog-body-list-con" v-html='detail.demand'></div>
+        <div v-if="Lang===false" class="dialog-body-list-con" v-html='detail.englishDemand'></div>
+      </div>
+      <!--<div>-->
+      <!--<span v-if="Lang" class="apply-btn">申请</span>-->
+      <!--<span v-if="Lang===false" class="apply-btn">apply</span>-->
+      <!--</div>-->
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import {
+  mapGetters
+} from 'vuex'
+
+export default {
+
+  name: 'v-dialog',
+
+  data () {
+    return {}
+  },
+  props: {
+    detail: Object
+  },
+  computed: {
+    ...mapGetters(['Lang'])
+  },
+  methods: {
+    _closeMask: function () {
+      this.$emit('closeMask', false)
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.dialog-con-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog-con {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background: rgba(204, 204, 204, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.dialog-body {
+  z-index: 2;
+  width: 740px;
+  background: #fff;
+  position: absolute;
+  padding: 2em;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.dialog-body-top {
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 0.7em;
+}
+
+.dialog-body-title {
+  margin-bottom: 1.1em;
+  font-size: 1.5em;
+  color: #e8383d;
+}
+
+.dialog-body-sublist {
+  font-size: 0.8em;
+  line-height: 2em;
+}
+
+.dialog-body-sub_title {
+  font-weight: bold;
+}
+
+.dialog-body-sub_value {
+  padding-right: 5px;
+}
+
+.dialog-body-list {
+  margin: 1.1em 0;
+}
+
+.dialog-body-list-item {
+  margin-bottom: 1.1em;
+}
+
+.dialog-body-list-title {
+  margin-bottom: 1.1em;
+  font-weight: bold;
+}
+
+.dialog-body-list-con {
+  line-height: 2em;
+}
+
+.apply-btn {
+  background: #e8383d;
+  color: #fff;
+  line-height: 2em;
+  width: 7em;
+  padding: 0 2em;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+}
+</style>

src/components/wrap-nav/style.css

@@ -0,0 +1,305 @@
+a {
+  cursor: pointer;
+}
+
+#wrap-nav {
+  background: #fff;
+  z-index: 6000;
+  position: fixed;
+  font-size: 40px;
+  height: 1.85em;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+}
+
+.nav-left {
+  margin-left: 110px;
+  width: 5.0em;
+  height: 1.4em;
+}
+
+.logo {
+  height: 100%;
+  width: auto;
+  cursor: pointer;
+}
+
+.nav-right {
+  display: flex;
+  align-items: center;
+  margin-right: 3.45em;
+  height: 100%;
+}
+
+.nav {
+  display: flex;
+  height: 100%;
+}
+
+.nav > div {
+  width: 3.775em;
+  display: flex;
+  position: relative;
+  height: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.toggle-language {
+  margin-left: 0.75em;
+  height: 100%;
+}
+.toggle-language a {
+  position: relative;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.4em;
+}
+
+.toggle-language a img{
+  margin-left: 6px;
+  width: 14px;
+  height: 14px;
+  transform: rotate(180deg);
+  transition: all 0.3 ease;
+}
+ .toggle-language a .lang-subMenu{
+  top: 1.9em;
+  left: -0.9em;
+  position: absolute;
+  font-size: 2.5em;
+  z-index: 5;
+  height: 0;
+  -webkit-transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
+  transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
+  overflow: hidden;
+}
+.toggle-language a .lang-subMenu > li >span {
+  width: 100%;
+  height: 100%;
+  padding: 15px 0;
+  font-size: 0.4em;
+  color: #fff;
+  text-align: center;
+}
+
+.toggle-language:hover a .lang-subMenu{
+  height: 5.125em;
+}
+.toggle-language:hover a img{
+  transform: rotate(0);
+  transition: all 0.3 ease;
+}
+
+.toggle-txt{
+    color: #565656;
+    width: 100%;
+    font-weight: bold;
+}
+
+.nav span {
+  margin: auto;
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 0px;
+  height: 0.125em;
+  background: red;
+  transition: .5s;
+  border-radius: 1.25em;
+}
+
+.nav .nav_active > span {
+  width: 60%;
+  left: 0;
+}
+
+.toggle-language {
+  display: inline-block;
+}
+
+.nav-subItem {
+  position: relative;
+  font-size: 0.4em;
+  color: #565656;
+  width: 100%;
+  font-weight: bold;
+}
+
+.nav-subItem:after {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 90%;
+  right: 0;
+  background: #ccc;
+  transform: skewX(-10deg);
+}
+
+.nav-subMenu {
+  position: absolute;
+  font-size: 2.5em;
+  top: 1.12em;
+  z-index: 5;
+  height: 5.125em;
+  transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
+  overflow: hidden;
+}
+
+.nav-subMenu > li,.toggle-language a .lang-subMenu > li {
+  position: relative;
+  width: 3.775em;
+  height: 1.15em;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.125em;
+  white-space: nowrap;
+  background: rgba(0, 0, 0, 0.3);
+  transition: 0.5s margin-top cubic-bezier(0.73, 0.32, 0.34, 1.5);
+}
+
+.nav-subMenu > li> span {
+  position: absolute;
+  width: 2px;
+  height: 0;
+  top: 0;
+  left: -98.5%;
+  background: red;
+  content: '';
+  transition: .5s;
+}
+
+.nav-subMenu li  a {
+  width: 100%;
+  /* height: 100%; */
+  line-height: 1.4;
+  padding: 15px 0;
+  font-size: 0.4em;
+  color: #fff;
+  text-align: center;
+}
+
+.nav > div:not(:hover) .nav-subMenu {
+  height: 0;
+  transition: 0.5s 0.1s height;
+}
+
+.nav > div:not(:hover) .nav-subMenu > li {
+  transition: 0.5s 0.1s margin-top;
+  margin-top: -0.125em;
+}
+
+.li_active > span {
+  height: 100% !important;
+}
+
+/*设备兼容*/
+
+@media screen and (min-width: 1755px) and (max-width: 1805px) {
+  #wrap-nav {
+    font-size: 39px;
+  }
+}
+
+@media screen and (min-width: 1705px) and (max-width: 1755px) {
+  #wrap-nav {
+    font-size: 38px;
+  }
+}
+
+@media screen and (min-width: 1655px) and (max-width: 1705px) {
+  #wrap-nav {
+    font-size: 38px;
+  }
+}
+
+@media screen and (min-width: 1605px) and (max-width: 1655px) {
+  #wrap-nav {
+    font-size: 37px;
+  }
+}
+
+@media screen and (min-width: 1555px) and (max-width: 1605px) {
+  #wrap-nav {
+    font-size: 36px;
+  }
+}
+
+@media screen and (min-width: 1505px) and (max-width: 1555px) {
+  #wrap-nav {
+    font-size: 35px;
+  }
+}
+
+@media screen and (min-width: 1455px) and (max-width: 1505px) {
+  #wrap-nav {
+    font-size: 34px;
+  }
+}
+
+@media screen and (min-width: 1405px) and (max-width: 1455px) {
+  #wrap-nav {
+    font-size: 34px;
+  }
+}
+
+@media screen and (min-width: 1355px) and (max-width: 1405px) {
+  #wrap-nav {
+    font-size: 34px;
+  }
+}
+
+@media screen and (min-width: 1305px) and (max-width: 1355px) {
+  #wrap-nav {
+    font-size: 34px;
+  }
+}
+
+@media screen and (min-width: 1255px) and (max-width: 1305px) {
+  #wrap-nav {
+    font-size: 34px;
+  }
+
+}
+
+@media screen and (max-width: 1305px) {
+  #wrap-nav {
+    font-size: 34px;
+  }
+}
+@media screen and (max-width: 1220px) {
+  #wrap-nav {
+    font-size: 29px;
+  }
+  .nav > div{
+    width: 4.2em!important;
+  }
+  .toggle-txt{
+    width: 50px;
+  }
+  .nav-left{
+    margin-left:30px;
+  }
+  .nav-right{
+    margin-right:30px
+  }
+  .toggle-language a .lang-subMenu > li{
+    height: auto;
+  }
+  
+}
+
+@media screen and (max-width: 1024px) {
+  
+}

src/components/wrap-nav/wrap-nav.vue

@@ -0,0 +1,286 @@
+<template>
+  <div id='wrap-nav'>
+    <div class="nav-left">
+      <img class="logo" @click="navClick(0,{})" alt="666" src="../../../static/images/icon/logo2.svg"/>
+      <!--<object data="../../../static/images/icon/logo2.svg" type="image/svg+xml"></object>-->
+    </div>
+    <div class="nav-right">
+      <div class="nav">
+        <div v-for="(subItem, subIndex) in languageStatus" :key="subIndex" :class="{nav_active: subItem.id == activeIndex}"
+             @click="navClick(subItem.id,subItem)" :style="{width:nowLanguage==='zh'?'3.775em':'4.575em'}">
+          <a class="nav-subItem">
+            {{ subItem.name }}
+            <ul class="nav-subMenu">
+              <li v-for='(item, index) in subItem.subMenu' :key="index" @click="liIndex=index" :style="{width:nowLanguage==='zh'?'3.775em':'4.575em'}" :class="{li_active: index == liIndex&&subIndex==activeIndex}">
+                <router-link :style="{fontSize:nowLanguage==='zh'?'0.4em':'0.3em'}" :to="item.hash"><div v-html="item.title"></div></router-link>
+                <span></span>
+              </li>
+            </ul>
+          </a>
+          <span></span>
+        </div>
+      </div>
+      <div class="toggle-language" id="toggle-language">
+        <a>
+          <span class="toggle-txt">{{activeLang}}</span>
+          <img src="../../../static/images/icon/icon-arrow.png" alt="">
+          <ul class="lang-subMenu">
+              <li @click="changeLanguage(item)" v-for='(item, index) in txtArr' :key="index" >
+                <span>{{item.name}}</span>
+              </li>
+            </ul>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapGetters} from 'vuex'
+// const minWidth = 800
+// // 当超过什么尺寸就不在缩放
+// const scaleWidth = 1200
+//
+// /**
+//  * 根据页面自动设置缩放比例
+//  */
+//
+// const setting = {
+//   showNav: true,
+//   lastY: 0,
+//   height: window.innerHeight,
+//   paddingTop: 65
+// }
+const txtArr = [{
+  id: 'zh',
+  name: '简体中文'
+}, {
+  id: 'en',
+  name: 'English'
+}, {
+  id: 'ge',
+  name: 'Deutsch'
+} ]
+export default {
+  name: 'wrap-nav',
+  data () {
+    return {
+      activeLang: '简体中文',
+      liIndex: null,
+      nowIndex: 0,
+      num: '1',
+      logo: 'http://video.cgaii.com/images/icon/logo.png',
+      language_en: 'http://video.cgaii.com/images/icon/language_en.png',
+      language_zh: 'http://video.cgaii.com/images/icon/language_zh.png',
+      object: {
+        Zh: [
+          {name: '首页', id: 0, url: '/index'},
+          {
+            name: '研究领域',
+            id: 1,
+            url: '',
+            subMenu: [
+              {title: '三维数字化', hash: '/index#swszh'},
+              {title: '人体识别跟踪', hash: '/index#slam'},
+              {title: '智能图像识别', hash: '/index#jxsb'},
+              {title: '机器人视觉', hash: '/index#ar'}
+            ]
+          },
+          // {name: '合作伙伴', id: 2, url: '/index#cooperation', hash: '/index#cooperation'},
+          // {name: '中德大会', id: 3, url: '/index#convention', hash: '/index#convention'},
+          // {name: '消息资讯', id: 4, url: '/message-consultation'},
+          // {name: '加入我们', id: 5, url: '/join-us'}
+          {name: '合作伙伴',
+            id: 2,
+            url: '',
+            subMenu: [{title: 'DFKI', hash: '/index#cooperation'}, {
+              title: '四维时代',
+              hash: '/index#partners4DMail'
+            }, {title: '四维看看', hash: '/index#partners4DKKMail'}, {title: 'Graphicsmedia', hash: '/index#graphicsmediaMail'}]
+          },
+          {name: '中德大会',
+            id: 3,
+            url: '',
+            subMenu: [{title: '往届回顾', hash: '/index#Aimeeting'}]},
+          {name: '消息资讯', id: 4, url: '/message-consultation', hash: '/index#dynamicinformationMail'},
+          {name: '关于我们', id: 5, url: '/index#joinUsMail', hash: '/index#joinUsMail'}
+        ],
+        Ge: [
+          {name: 'Startseite', id: 0, url: '/index'},
+          {
+            name: 'Forschungsbereich',
+            id: 1,
+            url: '',
+            subMenu: [
+              {title: '3D-Rekonstruktion', hash: '/index#swszh'},
+              {title: 'Automatische <br/>Verfolgung', hash: '/index#slam'},
+              {title: 'Intelligente <br/>Bilderkennung', hash: '/index#ar'},
+              {title: 'Roboter-Vision', hash: '/index#jxsb'}
+            ]
+          },
+          // {name: 'Partners', id: 2, url: '/index#cooperation', hash: '/index#cooperation'},
+          // {name: 'CMCAI', id: 3, url: '/index#convention', hash: '/index#convention'},
+          // {name: 'Information', id: 4, url: '/message-consultation'},
+          // {name: 'Join us', id: 5, url: '/join-us'}
+          {name: 'Partner',
+            id: 2,
+            url: '',
+            subMenu: [{title: 'DFKI', hash: '/index#cooperation'}, {
+              title: '4DAGE',
+              hash: '/index#partners4DMail'
+            }, {title: '4DKanKan', hash: '/index#partners4DKKMail'}, {title: 'Graphicsmedia', hash: '/index#graphicsmediaMail'}]},
+          {name: 'Konferenz',
+            id: 3,
+            url: '',
+            subMenu: [{title: 'Rückblick', hash: '/index#Aimeeting'}]},
+          {name: 'Informationen', id: 4, url: '/message-consultation', hash: '/index#dynamicinformationMail'},
+          {name: 'Über uns', id: 5, url: '/index#joinUsMail', hash: '/index#joinUsMail'}
+        ],
+        En: [
+          {name: 'Home', id: 0, url: '/index'},
+          {
+            name: 'Research Field',
+            id: 1,
+            url: '',
+            subMenu: [
+              {title: '3D Reconstruction', hash: '/index#swszh'},
+              {title: 'Automatic<br/> Tracking', hash: '/index#slam'},
+              {title: 'Intelligent<br/> Recognition', hash: '/index#ar'},
+              {title: 'Robot Vision', hash: '/index#jxsb'}
+            ]
+          },
+          // {name: 'Partners', id: 2, url: '/index#cooperation', hash: '/index#cooperation'},
+          // {name: 'CMCAI', id: 3, url: '/index#convention', hash: '/index#convention'},
+          // {name: 'Information', id: 4, url: '/message-consultation'},
+          // {name: 'Join us', id: 5, url: '/join-us'}
+          {name: 'Partners',
+            id: 2,
+            url: '',
+            subMenu: [{title: 'DFKI', hash: '/index#cooperation'}, {
+              title: '4DAGE',
+              hash: '/index#partners4DMail'
+            }, {title: '4DKanKan', hash: '/index#partners4DKKMail'}, {title: 'Graphicsmedia', hash: '/index#graphicsmediaMail'}]},
+          {name: 'Conference',
+            id: 3,
+            url: '',
+            subMenu: [{title: 'Review', hash: '/index#Aimeeting'}]},
+          {name: 'Information', id: 4, url: '/message-consultation', hash: '/index#dynamicinformationMail'},
+          {name: 'About us', id: 5, url: '/index#joinUsMail', hash: '/index#joinUsMail'}
+        ]
+      },
+      currentPath: '/index',
+      txtArr
+    }
+  },
+  mounted () {
+    if (this.$route.params.id) {
+      this.$store.commit('ACTIVE_INDEX', this.$route.query.id)
+    } else {
+    }
+  },
+  updated () {
+    this.currentPath = this.$route.path
+  },
+  methods: {
+    prompt: function () { // 当点击切换时候再传值
+      var locHash = Number(window.location.hash.substring(10))
+      switch (locHash) {
+        case 1:
+          window.location.hash = 'language#2'
+          break
+        case 2:
+          window.location.hash = 'language#1'
+          break
+      }
+      ;
+    },
+    changeLanguage: function (item) {
+      let lang = item.id
+      this.activeLang = item.name
+      this.$store.commit('LANGUAGE', lang)
+    },
+    navClick: function (index, item) {
+      // console.log(this.liIndex)
+
+      // this.liIndex = ''
+      if (index === 0) {
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+      }
+      this.$store.commit('ACTIVE_INDEX', index)
+      if (index === 3) {
+        if (this.currentPath !== '/index') {
+          if (navigator.userAgent.indexOf('Firefox') > 0) {
+            this.$router.push('/index#ActiveXObject')
+          } else if (navigator.userAgent.indexOf('Trident') > -1 || navigator.userAgent.indexOf('Edge') > -1) {
+            this.$router.push('/index#ActiveXObject')
+          } else {
+            this.$router.push(item.url)
+          }
+        } else {
+          this.$router.push(item.url)
+        }
+      } else {
+        this.$router.push(item.url)
+      }
+    }
+    // scalePage() {
+    //   let navWidth = window.innerWidth
+    //   let exceed = !(navWidth < scaleWidth && navWidth > minWidth)
+    //   let width = navWidth < scaleWidth ? (navWidth > minWidth ? navWidth : minWidth) : 0
+    //
+    //   if (width) {
+    //     let scale = width / scaleWidth
+    //     let invitation = document.getElementById('wrap-nav')
+    //     invitation.style.zoom = scale
+    //   }
+    // }
+  },
+  props: {
+    // "locHash":{}
+  },
+  computed: {
+    ...mapGetters(['mapGetters']),
+    EnglishOrChinese: function () { // 实时计算 检测到数据发生变动时就会执行对相应数据有引用的函数。
+      return this.num === 1 ? this.object.Zh : this.object.En
+    },
+    languageStatus: function () {
+      switch (this.$store.state.lang) {
+        case 'zh':
+          return this.object.Zh
+        case 'ge':
+          return this.object.Ge
+
+        case 'en':
+          return this.object.En
+
+        default:
+          return this.object.Zh
+      }
+    },
+    activeIndex: function () {
+      return this.$store.state.activeIdx
+    },
+    nowLanguage: function () {
+      return this.$store.state.lang
+    }
+  },
+  created () {
+    // this.$nextTick(() => {
+    //   this.scalePage()
+    //   let that = this
+    //   window.addEventListener('resize', () => {
+    //     setting.height = window.innerHeight
+    //     that.scalePage()
+    //   })
+    //   window.addEventListener('scroll', e => {
+    //     setting.showNav = setting.lastY > window.scrollY
+    //     setting.lastY = window.scrollY
+    //   })
+    // })
+  }
+}
+
+</script>
+<style lang="css" scoped>
+@import url('./style.css');
+</style>

src/components/zg-convention/zg-convention.vue

@@ -0,0 +1,20 @@
+<template>
+<div>
+</div>
+</template>
+
+<script>
+export default {
+
+  name: 'zg-convention',
+
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

src/css/animate.css

@@ -0,0 +1,346 @@
+@charset "UTF-8";
+/*
+Animate.css - http://daneden.me/animate
+Licensed under the ☺ license (http://licence.visualidiot.com/)
+
+Copyright (c) 2012 Dan Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
+	-webkit-backface-visibility: hidden;
+}
+.animated {
+	-webkit-animation-duration: 0.5s;
+	   -moz-animation-duration: 0.5s;
+	     -o-animation-duration: 0.5s;
+	        animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	   -moz-animation-fill-mode: both;
+	     -o-animation-fill-mode: both;
+	        animation-fill-mode: both;
+}
+
+
+@-webkit-keyframes fadeInUp-X {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadeInUp-X {
+  0% {
+    opacity: 0;
+  }
+  
+  100% {
+    opacity: 1;
+  }
+}
+@-o-keyframes fadeInUp-X {
+  0% {
+    opacity: 0;
+  }
+  
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeInUp-X {
+  0% {
+    opacity: 0;
+  }
+  
+  100% {
+    opacity: 1;
+  }
+}
+
+
+@-webkit-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(20px);
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+}
+@-moz-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+}
+@-o-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+}
+@keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+@-webkit-keyframes bounceIn {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+            transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+            transform: scale3d(.97, .97, .97);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+/*弹出*/
+@keyframes bounceIn {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+            transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+            transform: scale3d(.97, .97, .97);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+}
+
+@keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+}
+@-webkit-keyframes zoomInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0) rotateY(0deg);
+        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0) rotateY(0deg);
+        -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190);
+        animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190)
+    }
+
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0) rotateY(0deg);
+        transform: scale3d(.475,.475,.475) translate3d(0,60px,0) rotateY(0deg);
+        -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1);
+        animation-timing-function: cubic-bezier(0.175,0.885,0.320,1)
+    }
+    100% {
+      transform:scale3d(1,1,1) translate3d(0,0,0) rotateY(360deg);
+
+    }
+}
+@keyframes zoomInDown {
+    0% {
+        opacity: 0.3;
+        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0) rotateY(0deg);
+        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0) rotateY(0deg);
+        -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190);
+        animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190);
+    }
+
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0) rotateY(0deg);
+        transform: scale3d(.475,.475,.475) translate3d(0,60px,0) rotateY(0deg);
+        -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1);
+        animation-timing-function: cubic-bezier(0.175,0.885,0.320,1);
+    }
+    100% {
+      transform:scale3d(1,1,1) translate3d(0,0,0) rotateY(360deg);
+
+    }
+}
+
+.zoomInDown {
+  -webkit-animation-name: zoomInDown;
+          animation-name: zoomInDown;
+}
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+          animation-name: bounceOut;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+          animation-delay:0s !important;
+}
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+          animation-name: bounceIn;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+}
+.fadeInUp {
+	-webkit-animation-name: fadeInUp;
+	-moz-animation-name: fadeInUp;
+	-o-animation-name: fadeInUp;
+	animation-name: fadeInUp;
+}
+.fadeInUp-X{
+  -webkit-animation-name: fadeInUp-X;
+  -moz-animation-name: fadeInUp-X;
+  -o-animation-name: fadeInUp-X;
+  animation-name: fadeInUp-X;
+}
+.button--rayen {
+	overflow: hidden;
+	padding: 0;
+	width: 230px;
+  position: relative;
+  z-index: 1;
+}
+.button--rayen.button--inverted {
+	color: #fff;
+}
+.button--rayen::before {
+	content: attr(data-text);
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #FFF;
+	color:#5A45DF ;
+	-webkit-transform: translate3d(-100%, 0, 0);
+	transform: translate3d(-100%, 0, 0);
+}
+.button--rayen.button--inverted::before {
+	background: #fff;
+	color: #FFF;
+}
+.button--rayen > span {
+	display: block;
+}
+.button--rayen::before,
+.button--rayen > span {
+	-webkit-transition: -webkit-transform 0.3s;
+	transition: transform 0.3s;
+	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
+	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
+}
+.button--rayen:hover::before {
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.button--rayen:hover > span {
+	-webkit-transform: translate3d(0, 100%, 0);
+	transform: translate3d(0, 100%, 0);
+}
+.rayen{margin-top:0.22rem;}
+.rayen_2::before{ color: #C5A67E; }
+.rayen_3::before{ color: #3FC2CF; }
+.rayen_4::before{ color: #F4CB0C; }
+.rayen_5::before{ color: #F56339; }
+.rayen_6::before{ color: #27D3A8; }

src/css/reset.css

@@ -0,0 +1,112 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  font-family: "Microsoft YaHei","Microsoft JhengHei";;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+button{outline:none; border: none;}
+input, button, select, textarea {
+outline: none;
+-webkit-appearance: none;
+border-radius: 0;
+-webkit-appearance: textfield;
+    background-color: white;
+    -webkit-rtl-ordering: logical;
+    cursor: text;
+    padding: 1px;
+    border-color: initial;
+    border-image: initial;
+}
+input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
+        -webkit-appearance:textfield;
+}
+input[type="number"]{
+        -moz-appearance:textfield;
+}
+input:focus { outline: none; } 
+
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 1000px white inset;
+  -webkit-text-fill-color: #333;
+}
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
+color: #b7b6b6; 
+} 
+input:-moz-placeholder, textarea:-moz-placeholder { 
+color: #b7b6b6; 
+} 
+input::-moz-placeholder, textarea::-moz-placeholder { 
+color: #b7b6b6; 
+} 
+input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
+color: #b7b6b6; 
+} 
+a {
+	text-decoration: none;
+}
+a:hover, a:visited, a:link, a:active {
+  color: #999;
+}
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+::-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/js/switchLanguage.js

@@ -0,0 +1,9 @@
+window.onload = () => {
+  var locHash = window.location.hash
+  locHash = window.location.hash
+  if (locHash.indexOf('language') === -1 || Number(locHash.substring(10)) === 1) {
+    window.location.hash = 'language#1'
+    // 1 代表 中文
+    // 2 代表 英文
+  };
+}

src/main.js

@@ -0,0 +1,17 @@
+// 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 store from './store'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  components: { App },
+  template: '<App/>'
+})

src/plugin/EN-bottom-swiper.vue

@@ -0,0 +1,135 @@
+<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: [
+        'http://video.cgaii.com/images/slider_img/bottom_slider11.png',
+        'http://video.cgaii.com/images/slider_img/bottom_slider22.png',
+        'http://video.cgaii.com/images/slider_img/bottom_slider33.png'
+      ],
+
+      swiperOption: {
+        slidesPerView: 3,
+        spaceBetween: 80,
+        loop: true,
+        clickable: true,
+        pagination: {
+          el: '.swiper-pagination'
+
+        }
+
+      }
+    }
+  },
+  computed: {},
+  components: {
+    swiper,
+    swiperSlide
+  }
+}
+
+</script>
+<style type="text/css" scoped>
+  .v-swiper {
+    margin-top: 4em;
+    position: relative;
+    width: 160%;
+    left: -30%;
+  }
+
+  .imgSty {
+    width: 100%;
+  }
+
+  .swiper-container {
+    height: 800px;
+  }
+
+</style>
+<style type="text/css">
+  .swiper-pagination-bullet {
+    width: 18%;
+    height: 5px;
+    opacity: 1;
+    background: #e6e6e6;
+    border-radius: 0;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: #e6373c;
+  }
+
+  .swiper-container-horizontal > .swiper-pagination-bullets {
+    bottom: 260px;
+  }
+
+  @media screen and (min-width: 1555px) and (max-width: 1605px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 360px;
+    }
+
+  }
+
+  @media screen and (min-width: 1505px) and (max-width: 1555px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 360px;
+    }
+
+  }
+
+  @media screen and (min-width: 1455px) and (max-width: 1505px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 360px;
+    }
+
+  }
+
+  @media screen and (min-width: 1405px) and (max-width: 1455px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 400px;
+    }
+
+  }
+
+  @media screen and (min-width: 1355px) and (max-width: 1405px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 450px;
+    }
+
+  }
+
+  @media screen and (min-width: 1305px) and (max-width: 1355px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 450px;
+    }
+
+  }
+
+  @media screen and (min-width: 1255px) and (max-width: 1305px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 500px;
+    }
+
+  }
+
+  @media screen and (max-width: 1305px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 500px;
+    }
+
+  }
+
+</style>

src/plugin/bottom-swiper.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="v-swiper1">
+    <swiper :options="swiperOption">
+      <swiper-slide v-for="(item,index) in imgs" :key="index" class="swiper-con">
+        <img class="imgSty1" :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: [
+        'http://video.cgaii.com/images/slider_img/bottom_slider1.png',
+        'http://video.cgaii.com/images/slider_img/bottom_slider2.png',
+        'http://video.cgaii.com/images/slider_img/bottom_slider3.png'
+      ],
+
+      swiperOption: {
+        slidesPerView: 3,
+        spaceBetween: 80,
+        loop: true,
+        clickable: true,
+        pagination: {
+          el: '.swiper-pagination'
+
+        }
+
+      }
+    }
+  },
+  computed: {},
+  components: {
+    swiper,
+    swiperSlide
+  }
+}
+
+</script>
+<style type="text/css" scoped>
+  .v-swiper1 {
+    margin-top: 4em;
+    position: relative;
+    width: 160%;
+    left: -30%;
+  }
+
+  .imgSty1 {
+    width: 100%;
+  }
+  .swiper-con:nth-child(even) {
+    position: static;
+    top:0;
+  }
+
+  .swiper-container {
+    height: 800px;
+  }
+
+</style>
+<style type="text/css">
+  .swiper-pagination-bullet {
+    width: 18%;
+    height: 5px;
+    opacity: 1;
+    background: #e6e6e6;
+    border-radius: 0;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: #e6373c;
+  }
+
+  .swiper-container-horizontal > .swiper-pagination-bullets {
+    bottom: 260px;
+  }
+
+  @media screen and (min-width: 1555px) and (max-width: 1605px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 360px;
+    }
+
+  }
+
+  @media screen and (min-width: 1505px) and (max-width: 1555px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 360px;
+    }
+
+  }
+
+  @media screen and (min-width: 1455px) and (max-width: 1505px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 360px;
+    }
+
+  }
+
+  @media screen and (min-width: 1405px) and (max-width: 1455px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 400px;
+    }
+
+  }
+
+  @media screen and (min-width: 1355px) and (max-width: 1405px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 450px;
+    }
+
+  }
+
+  @media screen and (min-width: 1305px) and (max-width: 1355px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 450px;
+    }
+
+  }
+
+  @media screen and (min-width: 1255px) and (max-width: 1305px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 500px;
+    }
+
+  }
+
+  @media screen and (max-width: 1305px) {
+    .swiper-container-horizontal > .swiper-pagination-bullets {
+      bottom: 500px;
+    }
+
+  }
+
+</style>

src/plugin/error.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="error">
+      <div class="title">
+        <span class="test"></span>
+        <span class="image">
+          <img src="" alt="">
+        </span>
+      </div>
+      <div class="content">
+        <div class="test">
+          <span class="image"></span>
+          <span></span>
+        </div>
+        <div class="button">
+          <span>确认</span>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'error'
+}
+</script>
+
+<style scoped lang="less">
+.error {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 300px;
+  height: 200px;
+}
+</style>

src/plugin/h-swiper.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="slider">
+    <div class="prev" @click="toPrev">
+      <img src="http://video.cgaii.com/images/prev.png"/>
+    </div>
+    <slider ref="slider" :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
+    </slider>
+    <div class="next" @click="toNext">
+      <img src="http://video.cgaii.com/images/next.png"/>
+    </div>
+  </div>
+</template>
+<script>
+import slider from 'vue-concise-slider'// import slider components
+
+export default {
+  data () {
+    return {
+      // Image list
+      pages: [
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/01.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider2"><img src="http://video.cgaii.com/images/join-us/02.png" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider3"><img src="http://video.cgaii.com/images/join-us/03.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/04.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider2"><img src="http://video.cgaii.com/images/join-us/05.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider3"><img src="http://video.cgaii.com/images/join-us/06.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider1"><img src="../../static/images/join-us/07.png" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        }
+      ],
+      // Sliding configuration [obj]
+      sliderinit: {
+        thresholdDistance: 50,
+        thresholdTime: 1000,
+        loop: true,
+        infinite: 0,
+        slidesToScroll: 1,
+        timingFunction: 'ease',
+        duration: 300
+      }
+    }
+  },
+  components: {
+    slider
+  },
+  computed: {
+  },
+  methods: {
+    slide (data) {
+    },
+    onTap (data) {
+    },
+    onInit (data) {
+    },
+    toNext () {
+      this.$children[0].$emit('slideNext')
+    },
+    toPrev () {
+      this.$children[0].$emit('slidePre')
+    }
+  },
+  created () {
+  }
+}
+
+</script>
+<style type="text/css" scoped>
+  .slider {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 38%;
+    height: 12em;
+    z-index: 90;
+    padding: 1vh;
+    background-color: #fff;
+    transform: translateX(-50%) translateY(-50%);
+  }
+  .prev {
+    position: absolute;
+    top: 40%;
+    left: -30%;
+    width: 4%;
+    height: 8vh;
+    cursor: pointer;
+    z-index: 999;
+  }
+  .prev img {
+    width: 100%;
+    height: 100%;
+  }
+  .next {
+    position: absolute;
+    top: 40%;
+    right: -30%;
+    width: 4%;
+    height: 8vh;
+    cursor: pointer;
+    z-index: 999;
+  }
+  .next img {
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<style type="text/css">
+  .slider-pagination-bullets {
+    display: none !important;
+    bottom: 10px;
+    left: 0;
+    width: 100%;
+  }
+</style>

src/plugin/h-swiper2.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="slider">
+    <div class="prev" @click="toPrev">
+      <img src="http://video.cgaii.com/images/prev.png"/>
+    </div>
+    <slider ref="slider" :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
+    </slider>
+    <div class="next" @click="toNext">
+      <img src="http://video.cgaii.com/images/next.png"/>
+    </div>
+  </div>
+</template>
+<script>
+import slider from 'vue-concise-slider'// import slider components
+
+export default {
+  data () {
+    return {
+      // Image list
+      pages: [
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/1.JPG" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider2"><img src="http://video.cgaii.com/images/join-us/2.JPG" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider3"><img src="http://video.cgaii.com/images/join-us/3.JPG" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/4.JPG" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider2"><img src="http://video.cgaii.com/images/join-us/5.JPG" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider3"><img src="http://video.cgaii.com/images/join-us/6.JPG" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/7.JPG" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        }
+      ],
+      // Sliding configuration [obj]
+      sliderinit: {
+        thresholdDistance: 50,
+        thresholdTime: 1000,
+        loop: true,
+        infinite: 0,
+        slidesToScroll: 1,
+        timingFunction: 'ease',
+        duration: 300
+      }
+    }
+  },
+  components: {
+    slider
+  },
+  computed: {
+  },
+  methods: {
+    slide (data) {
+    },
+    onTap (data) {
+    },
+    onInit (data) {
+    },
+    toNext () {
+      this.$children[0].$emit('slideNext')
+    },
+    toPrev () {
+      this.$children[0].$emit('slidePre')
+    }
+  },
+  created () {
+  }
+}
+
+</script>
+<style type="text/css" scoped>
+  .slider {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 38%;
+    height: 12em;
+    z-index: 90;
+    padding: 1vh;
+    background-color: #fff;
+    transform: translateX(-50%) translateY(-50%);
+  }
+  .prev {
+    position: absolute;
+    top: 40%;
+    left: -30%;
+    width: 4%;
+    height: 8vh;
+    cursor: pointer;
+    z-index: 999;
+  }
+  .prev img {
+    width: 100%;
+    height: 100%;
+  }
+  .next {
+    position: absolute;
+    top: 40%;
+    right: -30%;
+    width: 4%;
+    height: 8vh;
+    cursor: pointer;
+    z-index: 999;
+  }
+  .next img {
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<style type="text/css">
+  .slider-pagination-bullets {
+    display: none !important;
+    bottom: 10px;
+    left: 0;
+    width: 100%;
+  }
+</style>

src/plugin/h-swiper3.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="slider">
+    <div class="prev" @click="toPrev">
+      <img src="http://video.cgaii.com/images/prev.png"/>
+    </div>
+    <slider ref="slider" :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
+    </slider>
+    <div class="next" @click="toNext">
+      <img src="http://video.cgaii.com/images/next.png"/>
+    </div>
+  </div>
+</template>
+<script>
+import slider from 'vue-concise-slider'// import slider components
+
+export default {
+  data () {
+    return {
+      // Image list
+      pages: [
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/11.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider2"><img src="http://video.cgaii.com/images/join-us/12.png" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider3"><img src="http://video.cgaii.com/images/join-us/13.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/14.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider2"><img src="http://video.cgaii.com/images/join-us/15.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider3"><img src="http://video.cgaii.com/images/join-us/16.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        },
+        {
+          html: '<div class="slider1"><img src="http://video.cgaii.com/images/join-us/17.jpg" alt="jpg" style="width:100%;height: 50vh" ></div>',
+          style: {
+            'display': 'block',
+            'width': '100%',
+            'height': '100%'
+          }
+        }
+      ],
+      // Sliding configuration [obj]
+      sliderinit: {
+        thresholdDistance: 50,
+        thresholdTime: 1000,
+        loop: true,
+        infinite: 0,
+        slidesToScroll: 1,
+        timingFunction: 'ease',
+        duration: 300
+      }
+    }
+  },
+  components: {
+    slider
+  },
+  computed: {
+  },
+  methods: {
+    slide (data) {
+    },
+    onTap (data) {
+    },
+    onInit (data) {
+    },
+    toNext () {
+      this.$children[0].$emit('slideNext')
+    },
+    toPrev () {
+      this.$children[0].$emit('slidePre')
+    }
+  },
+  created () {
+  }
+}
+
+</script>
+<style type="text/css" scoped>
+  .slider {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 38%;
+    height: 12em;
+    z-index: 90;
+    padding: 1vh;
+    background-color: #fff;
+    transform: translateX(-50%) translateY(-50%);
+  }
+  .prev {
+    position: absolute;
+    top: 40%;
+    left: -30%;
+    width: 4%;
+    height: 8vh;
+    cursor: pointer;
+    z-index: 999;
+  }
+  .prev img {
+    width: 100%;
+    height: 100%;
+  }
+  .next {
+    position: absolute;
+    top: 40%;
+    right: -30%;
+    width: 4%;
+    height: 8vh;
+    cursor: pointer;
+    z-index: 999;
+  }
+  .next img {
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<style type="text/css">
+  .slider-pagination-bullets {
+    display: none !important;
+    bottom: 10px;
+    left: 0;
+    width: 100%;
+  }
+</style>

src/plugin/pagination.vue

@@ -0,0 +1,167 @@
+<template>
+  <nav>
+    <ul class="pagination">
+      <li :class=" {'disabled': current == 1}">
+        <a v-if="Lang==='zh'" class="page_nav" href="javascript:;" @click="setCurrent(1)"> 首页 </a>
+        <a v-if="Lang!=='zh'" class="page_nav" href="javascript:;" @click="setCurrent(1)"> Home Page </a>
+      </li>
+      <li :class=" {'disabled': current == 1}">
+        <a v-if="Lang==='zh'" class="page_nav" href="javascript:;" @click="setCurrent(current - 1)"> 上一页 </a>
+        <a v-if="Lang!=='zh'" class="page_nav" href="javascript:;" @click="setCurrent(current - 1)"> Previous </a>
+      </li>
+      <li v-for="(p,i) in grouplist" :key='i' :class="{'active': current == p.val}">
+        <a class="page_num" href="javascript:;" @click="setCurrent(p.val)"> {{ p.text }} </a>
+      </li>
+      <li :class=" {'disabled': current == page}">
+        <a v-if="Lang==='zh'" class="page_nav" href="javascript:;" @click="setCurrent(current + 1)"> 下一页 </a>
+        <a v-if="Lang!=='zh'" class="page_nav" href="javascript:;" @click="setCurrent(current + 1)"> Next </a>
+      </li>
+      <li :class=" {'disabled': current == page}">
+        <a v-if="Lang==='zh'" class="page_nav" href="javascript:;" @click="setCurrent(page)"> 尾页 </a>
+        <a v-if="Lang!=='zh'" class="page_nav" href="javascript:;" @click="setCurrent(page)"> Last </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+<script>
+import {mapGetters} from 'vuex'
+export default {
+  data () {
+    return {
+      current: this.currentPage
+    }
+  },
+  props: {
+    total: { // 数据总条数
+      type: Number,
+      default: 0
+    },
+    display: { // 每页显示条数
+      type: Number,
+      default: 10
+    },
+    currentPage: { // 当前页码
+      type: Number,
+      default: 1
+    },
+    pagegroup: { // 分页条数
+      type: Number,
+      default: 5,
+      coerce: function (v) {
+        v = v > 0 ? v : 5
+        return v % 2 === 1 ? v : v + 1
+      }
+    }
+  },
+  computed: {
+    page: function () { // 总页数
+      return Math.ceil(this.total / this.display)
+    },
+    grouplist: function () { // 获取分页页码
+      var len = this.page
+      var temp = []
+      var list = []
+      var count = Math.floor(this.pagegroup / 2)
+      var center = this.current
+      if (len <= this.pagegroup) {
+        while (len--) {
+          temp.push({text: this.page - len, val: this.page - len})
+        }
+        ;
+        return temp
+      }
+      while (len--) {
+        temp.push(this.page - len)
+      }
+      ;
+      var idx = temp.indexOf(center);
+      (idx < count) && (center = center + count - idx);
+      (this.current > this.page - count) && (center = this.page - count)
+      temp = temp.splice(center - count - 1, this.pagegroup)
+      do {
+        var t = temp.shift()
+        list.push({
+          text: t,
+          val: t
+        })
+      } while (temp.length)
+      if (this.page > this.pagegroup) {
+        (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
+        (this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1})
+      }
+      return list
+    },
+    ...mapGetters(['Lang'])
+  },
+  methods: {
+    setCurrent: function (idx) {
+      if (this.current !== idx && idx > 0 && idx < this.page + 1) {
+        this.current = idx
+        this.$emit('pagechange', this.current)
+      }
+    }
+  }
+}
+
+</script>
+<style lang="css" scoped>
+  .pagination {
+    overflow: hidden;
+    display: inline-block;
+    margin: 0 auto;
+    width: 100%;
+    height: 50px;
+    background: #fff;
+  }
+
+  .pagination li {
+    display: inline-block;
+    /* float: left; */
+    margin: 5px;
+    color: #666;
+  }
+
+  .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;
+  }
+
+</style>

src/plugin/v-swiper.vue

@@ -0,0 +1,83 @@
+<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: [
+        'http://video.cgaii.com/images/slider_img/slider_1.jpg',
+        'http://video.cgaii.com/images/slider_img/slider_2.jpg',
+        'http://video.cgaii.com/images/slider_img/slider_3.jpg',
+        'http://video.cgaii.com/images/slider_img/slider_4.jpg',
+        'http://video.cgaii.com/images/slider_img/slider_5.jpg',
+        'http://video.cgaii.com/images/slider_img/slider_6.jpg',
+        'http://video.cgaii.com/images/slider_img/slider_7.jpg',
+        'http://video.cgaii.com/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: -3.4em;
+  }
+
+  .imgSty {
+    border-radius: 8px;
+    width: 95%;
+  }
+
+  .swiper-container {
+    height: 400px;
+  }
+
+  .swiper-con:nth-child(even){
+    position: relative;
+    top: 80px;
+  }
+
+</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/router/index.js

@@ -0,0 +1,66 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+// import HelloWorld from '@/components/HelloWorld'
+// import One from '@/components/one'
+// import Two from '@/components/Two'
+// import CooperativePartner from '@/components/cooperative-partner/cooperative-partner'
+import MessageConsultation from '@/components/message-consultation/message-consultation'
+import JoinUs from '@/components/join-us/join-us'
+import MContent from '@/components/m-content/m-content'
+import EnterIndex from '@/components/enter-index/enter-index'
+// import Ivitation from '@/components/invitation/invitation'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [{
+    path: '/',
+    name: '',
+    redirect: '/index'
+
+  },
+  {
+    path: '/message-consultation',
+    name: '消息资讯',
+    props: { id: 4 },
+
+    component: MessageConsultation
+  },
+  {
+    path: '/enter-index',
+    name: '进入首页',
+    props: { id: 2 },
+
+    component: EnterIndex
+  },
+  // {
+  //   path: '/invitation',
+  //   name: '邀请函',
+  //   props: { id: 3 },
+
+  //   component: Ivitation
+  // },
+  {
+    path: '/join-us',
+    name: '加入我们',
+    props: { id: 5 },
+    component: JoinUs
+  },
+  {
+    path: '/index',
+    name: '首页',
+    component: MContent,
+    props: { id: 0 }
+  }
+  ],
+  scrollBehavior (to, from, savedPosition) {
+    if (to.hash) {
+      return {
+        selector: to.hash
+      }
+    }
+    if (to.name === '邀请函' || to.name === '消息资讯' || to.name === '加入我们') {
+      return {x: 0, y: 0}
+    }
+  }
+})

src/store/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    lang: 'zh',
+    activeIdx: 0
+  },
+  getters: {
+    Lang: state => state.lang,
+    isActive: state => state.activeIdx
+  },
+  mutations: {
+    LANGUAGE: (state, status) => {
+      state.lang = status
+    },
+    ACTIVE_INDEX: (state, activeIdx) => {
+      state.activeIdx = activeIdx
+    }
+  },
+  actions: {
+    LoginByEmail ({commit}, userIfo) {
+
+    }
+  }
+
+})
+
+export default store