初始化

.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,4 @@
+/build/
+/config/
+/dist/
+/*.js

.eslintrc.js

@@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

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

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,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

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,101 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+const webpack = require('webpack')
+
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+      'jquery': 'jquery'
+    }
+  },
+  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: 1024*1000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 1024*1000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 1024*1000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins:[
+    new webpack.ProvidePlugin({
+      $:'jquery',
+      jQuery: 'jquery'
+    })
+  ],
+  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,76 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: '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-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

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

index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta name="force-rendering" content="webkit"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <!-- <link rel="apple-touch-icon" sizes="180x180" href="static/img/favicon.ico"> -->
+    <!-- <link rel="icon" type="image/png" href="static/img/favicon.ico" sizes="192x192"> -->
+    <title>珠海国家高新区-不可移动文物一张图</title>
+  </head>
+  <body>
+    <script src="https://webapi.amap.com/maps?v=1.4.10&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
+    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
+
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "jinwan",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "tremble <290487845@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
+    "echarts": "^4.2.0-rc.2",
+    "jquery": "^2.1.1",
+    "vue": "^2.5.2",
+    "vue-concise-slider": "^3.3.8",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "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-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,18 @@
+<template>
+  <div id="app" >
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import '@/assets/style/reset.css'
+import '@/assets/style/public.css'
+
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+
+</style>

src/assets/icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon/demo_index.html

@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=984061" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe626;</span>
+                <div class="name">箭头</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">定位</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">下拉</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">left</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">right</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">menu</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">国家高新区</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61f;</span>
+                <div class="name">类型_全景</div>
+                <div class="code-name">&amp;#xe61f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">类型_相册</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe621;</span>
+                <div class="name">图层</div>
+                <div class="code-name">&amp;#xe621;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe622;</span>
+                <div class="name">类型_航拍</div>
+                <div class="code-name">&amp;#xe622;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">收起</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">古建筑</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe628;</span>
+                <div class="name">古墓葬</div>
+                <div class="code-name">&amp;#xe628;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">古遗址</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62a;</span>
+                <div class="name">近现代史迹及建筑代表</div>
+                <div class="code-name">&amp;#xe62a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">石窟寺及石刻</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">完成</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiantou"></span>
+            <div class="name">
+              箭头
+            </div>
+            <div class="code-name">.icon-jiantou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dingwei"></span>
+            <div class="name">
+              定位
+            </div>
+            <div class="code-name">.icon-dingwei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xl"></span>
+            <div class="name">
+              下拉
+            </div>
+            <div class="code-name">.icon-xl
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-left"></span>
+            <div class="name">
+              left
+            </div>
+            <div class="code-name">.icon-left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-right"></span>
+            <div class="name">
+              right
+            </div>
+            <div class="code-name">.icon-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-menu"></span>
+            <div class="name">
+              menu
+            </div>
+            <div class="code-name">.icon-menu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guojiagaoxinqu"></span>
+            <div class="name">
+              国家高新区
+            </div>
+            <div class="code-name">.icon-guojiagaoxinqu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-leixing_quanjing"></span>
+            <div class="name">
+              类型_全景
+            </div>
+            <div class="code-name">.icon-leixing_quanjing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-leixing_xiangce"></span>
+            <div class="name">
+              类型_相册
+            </div>
+            <div class="code-name">.icon-leixing_xiangce
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tuceng"></span>
+            <div class="name">
+              图层
+            </div>
+            <div class="code-name">.icon-tuceng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-leixing_hangpai"></span>
+            <div class="name">
+              类型_航拍
+            </div>
+            <div class="code-name">.icon-leixing_hangpai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouqi"></span>
+            <div class="name">
+              收起
+            </div>
+            <div class="code-name">.icon-shouqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gujianzhu1"></span>
+            <div class="name">
+              古建筑
+            </div>
+            <div class="code-name">.icon-gujianzhu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gumuzang1"></span>
+            <div class="name">
+              古墓葬
+            </div>
+            <div class="code-name">.icon-gumuzang1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guyizhi1"></span>
+            <div class="name">
+              古遗址
+            </div>
+            <div class="code-name">.icon-guyizhi1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jinxiandai"></span>
+            <div class="name">
+              近现代史迹及建筑代表
+            </div>
+            <div class="code-name">.icon-jinxiandai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shikusi"></span>
+            <div class="name">
+              石窟寺及石刻
+            </div>
+            <div class="code-name">.icon-shikusi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wancheng1"></span>
+            <div class="name">
+              完成
+            </div>
+            <div class="code-name">.icon-wancheng1
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon--xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiantou"></use>
+                </svg>
+                <div class="name">箭头</div>
+                <div class="code-name">#icon-jiantou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dingwei"></use>
+                </svg>
+                <div class="name">定位</div>
+                <div class="code-name">#icon-dingwei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xl"></use>
+                </svg>
+                <div class="name">下拉</div>
+                <div class="code-name">#icon-xl</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-left"></use>
+                </svg>
+                <div class="name">left</div>
+                <div class="code-name">#icon-left</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-right"></use>
+                </svg>
+                <div class="name">right</div>
+                <div class="code-name">#icon-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-menu"></use>
+                </svg>
+                <div class="name">menu</div>
+                <div class="code-name">#icon-menu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guojiagaoxinqu"></use>
+                </svg>
+                <div class="name">国家高新区</div>
+                <div class="code-name">#icon-guojiagaoxinqu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-leixing_quanjing"></use>
+                </svg>
+                <div class="name">类型_全景</div>
+                <div class="code-name">#icon-leixing_quanjing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-leixing_xiangce"></use>
+                </svg>
+                <div class="name">类型_相册</div>
+                <div class="code-name">#icon-leixing_xiangce</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuceng"></use>
+                </svg>
+                <div class="name">图层</div>
+                <div class="code-name">#icon-tuceng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-leixing_hangpai"></use>
+                </svg>
+                <div class="name">类型_航拍</div>
+                <div class="code-name">#icon-leixing_hangpai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouqi"></use>
+                </svg>
+                <div class="name">收起</div>
+                <div class="code-name">#icon-shouqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gujianzhu1"></use>
+                </svg>
+                <div class="name">古建筑</div>
+                <div class="code-name">#icon-gujianzhu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gumuzang1"></use>
+                </svg>
+                <div class="name">古墓葬</div>
+                <div class="code-name">#icon-gumuzang1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guyizhi1"></use>
+                </svg>
+                <div class="name">古遗址</div>
+                <div class="code-name">#icon-guyizhi1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jinxiandai"></use>
+                </svg>
+                <div class="name">近现代史迹及建筑代表</div>
+                <div class="code-name">#icon-jinxiandai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shikusi"></use>
+                </svg>
+                <div class="name">石窟寺及石刻</div>
+                <div class="code-name">#icon-shikusi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wancheng1"></use>
+                </svg>
+                <div class="name">完成</div>
+                <div class="code-name">#icon-wancheng1</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/style/public.css

@@ -0,0 +1,29 @@
+#app{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.clear::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.icon {
+   width: 1em; height: 1em;
+   vertical-align: -0.15em;
+   fill: currentColor;
+   overflow: hidden;
+}
+
+.rad {
+  border-radius: 3px;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+}
+
+.phone-rad {
+  border-radius: 3px;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+}

src/assets/style/reset.css

@@ -0,0 +1,97 @@
+
+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";
+	margin: 0;
+	padding: 0;
+	border: 0;
+	vertical-align: baseline;
+}
+html,body{
+	font-size: 16px;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+html{
+	height: 100%;
+}
+body {
+	line-height: 1;
+	height: 100%;
+}
+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;
+appearance: 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; } 
+select::-ms-expand {
+display: none;
+}
+
+::-webkit-scrollbar
+{
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track-piece
+{
+    background-color: #fff;
+    -webkit-border-radius: 6px;
+}
+::-webkit-scrollbar-thumb:vertical
+{
+    height: 5px;
+    background-color: #eac1a3;
+    -webkit-border-radius: 6px;
+}
+::-webkit-scrollbar-thumb:horizontal
+{
+    width: 5px;
+    background-color: #eac1a3;
+    -webkit-border-radius: 6px;
+}

src/components/Cylinder/index.vue

@@ -0,0 +1,48 @@
+<!--  -->
+<template>
+<div class=''></div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+// import引入的组件需要注入到对象中才能使用
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style scoped>
+/* 引入公共css类 */
+@import url(./style);
+
+</style>

src/components/Plan/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="map-layout">
+    <div :style="style" id="container"></div>
+    <div id="panel" class="panel"></div>
+  </div>
+</template>
+
+<script>
+import mapData from '@/tools/data/map.js'
+
+export default {
+  props: {
+    theme: {
+      default: 'darkblue'
+    },
+    currentMarker: { },
+    width: {
+      default: '100%'
+    },
+    height: {
+      default: '100%'
+    },
+    center: {
+      default: [114.068539, 22.551583]
+    },
+    lngLatArr: {
+      default: [
+        {
+          'ID': 27,
+          'address': '草堂路口南侧巨泽工业园壹号厂房',
+          'latitude': 22.101621,
+          'longitude': 113.301045,
+          'name': '珠海贝格斯科技有限公司',
+          'town': '三灶镇',
+          'type': '传统优势'
+        }
+      ]
+    },
+    mapData
+  },
+  data () {
+    return {
+      type: 'darkblue',
+      activeMarker: null,
+      iconTag: 1,
+      markerArr: []
+      // center: [114.068539,22.551583]
+    }
+  },
+  computed: {
+    style () {
+      return {
+        width: this.width,
+        height: this.height,
+        map: ''
+
+      }
+    },
+    icon () {
+      let temp = new global.AMap.Icon({
+        size: new global.AMap.Size(32, 32), // 图标尺寸
+        image: require(`@/assets/images/${this.iconTag}.png`), // Icon的图像
+        imageSize: new global.AMap.Size(32, 32) // 根据所设置的大小拉伸或压缩图片
+      })
+      return temp
+    }
+  },
+  methods: {
+    addMarker () {
+      if (this.lngLatArr instanceof Array) {
+        this.lngLatArr.forEach((item, idx) => {
+          this.iconTag = this.switchTag(item.type)
+          this.addWindowMarker(item, idx, this.icon)
+        })
+      }
+    },
+    switchTag (tag) {
+      if (tag === '航空产业') {
+        return 1
+      } else if (tag === '生物医药') {
+        return 2
+      } else if (tag === '新能源') {
+        return 3
+      } else if (tag === '传统优势') {
+        return 4
+      } else {
+
+      }
+    },
+    addWindowMarker (item, idx, icon) {
+      this.markerArr = []
+      global.AMapUI.loadUI(['overlay/SimpleInfoWindow'], SimpleInfoWindow => {
+        var marker = new global.AMap.Marker({
+          position: new global.AMap.LngLat(item.longitude, item.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+          title: item.name,
+          icon: icon,
+          zIndex: 10,
+          map: this.map
+        })
+        marker.seftadditional = {
+          removeSeft: () => this.map.remove(marker),
+          play: () => {
+            marker.setAnimation('AMAP_ANIMATION_BOUNCE')
+          },
+          pause: () => marker.setAnimation(null)
+        }
+
+        // var infoWindow = new SimpleInfoWindow({
+        //   infoTitle: '<strong>' + item.name + '</strong>',
+        //   // 基点指向marker的头部位置
+        //   offset: new global.AMap.Pixel(6, -31),
+        //   infoBody: `<div>
+        //   <p>法人：某某</p>
+        //   </div>`
+        // })
+
+        var openInfoWin = () => {
+          marker.seftadditional.play()
+
+          // infoWindow.open(this.map, marker.getPosition())
+        }
+
+        // marker 点击时打开
+        global.AMap.event.addListener(marker, 'click', () => {
+          this.$emit('markerid', idx)
+          openInfoWin()
+          this.activeMarker = marker
+        })
+        this.markerArr.push(marker)
+        // this.map.add(marker)
+      })
+    },
+    init () {
+      var map = new global.AMap.Map('container', {
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        center: [113.282738, 22.021087],
+        mapStyle: 'amap://styles/' + this.theme,
+        zoom: 12
+      })
+      this.map = map
+
+      this.addMarker()
+
+      // this.automobile()
+    },
+    addAllMarker () {
+      var arr = []
+      Object.keys(mapData).forEach(key => {
+        mapData[key].forEach((item, idx) => {
+          arr.push(item)
+        })
+      })
+      arr.forEach((item, idx) => {
+        // this.switchTag(item.type)
+        let temp = new global.AMap.Icon({
+          size: new global.AMap.Size(32, 32), // 图标尺寸
+          image: require(`@/assets/images/${this.switchTag(item.type)}.png`), // Icon的图像
+          imageSize: new global.AMap.Size(32, 32) // 根据所设置的大小拉伸或压缩图片
+        })
+        this.addWindowMarker(item, idx, temp)
+      })
+    }
+  },
+  mounted () {
+    this.init()
+    // this.addAllMarker()
+  },
+  watch: {
+    activeMarker: function (newVal, oldVal) {
+      oldVal && oldVal.seftadditional.pause()
+      newVal && newVal.seftadditional.play()
+    },
+    theme () {
+      this.init()
+      // this.addAllMarker()
+    },
+    currentMarker (newVal, oldVal) {
+      oldVal && this.markerArr[oldVal].seftadditional.pause()
+      newVal && this.markerArr[newVal].seftadditional.play()
+    },
+    
+    lngLatArr (val) {
+      if (val !== 'ignore') {
+        this.init()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.panel {
+  position: absolute;
+  right: 0;
+  width: 30%;
+  top: 0;
+  height: 100%;
+  z-index: -3;
+}
+</style>

src/components/Slide/index.vue

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

src/components/Slider/index.vue

@@ -0,0 +1,173 @@
+<!--  -->
+<template>
+<div class="price-dd-choose">
+  <div id="price-range" class="price-range">
+    <div class="price-range-slider">
+      <div class="bg-darkgrey"></div>
+      <div class="bg-darkgrey-hand"></div>
+      <ul class="slider-ul">
+        <li class="slider-ul-first"><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+        <li><i class="icon-dian"></i></li>
+      </ul>
+    </div>
+    <div class="slide-selected"></div>
+    <i class="btn-price btn-left"></i>
+    <i class="btn-price btn-right"></i>
+    <div class="tip">
+      <div class="tip-content"></div>
+      <span class="tip-top tip-arrow"></span>
+    </div>
+    <div class="price-range-text">
+      <span class="number number-first">2009</span>
+      <span class="number">10</span>
+      <span class="number">11</span>
+      <span class="number">12</span>
+      <span class="number">13</span>
+      <span class="number">14</span>
+      <span class="number">15</span>
+      <span class="number">16</span>
+      <span class="number">17</span>
+      <span class="number">18</span>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+import $ from 'jquery'
+import './js/slider.js'
+export default {
+  props: ['year'],
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    init () {
+      $(() => {
+        var left = 2000
+        $('#price-range').slider({
+          unit: '年',
+          beyondMax: false,
+          beyondMin: false,
+          firstWidth: 58.3,
+          lastWidth: 58.3,
+          scale: [ {
+            key: 2009,
+            value: [1]
+          }, {
+            key: 2010,
+            value: [1]
+          }, {
+            key: 2011,
+            value: [1]
+          }, {
+            key: 2012,
+            value: [1]
+          }, {
+            key: 2013,
+            value: [1]
+          }, {
+            key: 2014,
+            value: [1]
+          }, {
+            key: 2015,
+            value: [1]
+          }, {
+            key: 2016,
+            value: [1]
+          }, {
+            key: 2017,
+            value: [1]
+          }, {
+            key: 2018,
+            value: [1]
+          }
+          ]
+        }).on('changed', (e, args) => {
+          // setRange({
+          //   leftValue: 0,
+          //   rightValue: 1
+          // })
+
+          var min = args.value.leftValue
+          var max = args.value.rightValue
+          if (max !== min) {
+            if (left !== args.value.leftX) {
+              left = args.value.leftX
+              $('#price-range').data('slider').setRange({
+                leftValue: min,
+                rightValue: min
+              })
+              this.$emit('selected_obj', min)
+            } else {
+              $('#price-range').data('slider').setRange({
+                leftValue: max,
+                rightValue: max
+              })
+              this.$emit('selected_obj', max)
+            }
+          }
+
+          // if (min == 0) min = 1;
+          // if (6680 > 110) {
+          //     if (max == 6680) max = 1;
+          // } else {
+          //     if (max == 110) max = 1;
+          // }
+          // if (max == 10000) max = 1;
+          // if (min + '_' + max == '2_6680') {
+          //     min = 0;
+          //     max = 0;
+          // }
+          // location.href = '/car/' + min + '_' + max + '-0.0_0.0-0-0-0-0-0-0-0-0/';
+        })
+        console.log(this.year)
+        $('#price-range').data('slider').setRange({
+          leftValue: this.year,
+          rightValue: this.year
+        })
+      })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    this.init()
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+
+<style scoped>
+/* 引入公共css类 */
+@import url(./style);
+</style>

src/components/Slider/js/slider.js

@@ -0,0 +1,580 @@
+/* eslint-disable */
+(function() {
+  $.fn.slider = function(option) {
+    return this.each(function() {
+      var $this = $(this),
+        data = $(this).data("slider");
+      var options = $.extend({}, $.fn.slider.defaults, $this.data(), option);
+      if (data == null) data = new Slider($this, options);
+      $(this).data("slider", data);
+      if (typeof option === "string") {
+        data[option]();
+      }
+    });
+  };
+  function Slider($elem, option) {
+    this.$elem = $elem;
+    this.options = option;
+    this.$leftButton = $(".btn-left", $elem);
+    this.$rightButton = $(".btn-right", $elem);
+    this.$selectedbar = $(".slide-selected", $elem);
+    this.$tip = $(".tip", $elem);
+    this.$tipContent = $(".tip-content", $elem);
+    this.$fullbar = $(".price-range-slider", $elem);
+    this.$validbar = $(".bg-darkgrey,.bg-darkgrey-hand", $elem);
+    this.$lowTip = $(".low01", $elem);
+    this.$highTip = $(".high01", $elem);
+    this.noValidbar = false;
+    if (this.$validbar.size() == 0) {
+      this.$validbar = this.$fullbar;
+      this.noValidbar = true;
+    }
+    this._fullbarWidth = this.$fullbar.width();
+    this._$activeButton = null;
+    this._allowDrag = false;
+    this._buttonWidth = this.$leftButton.width();
+    this._unit = this.options.unit;
+    this._beyondMax = this.options.beyondMax;
+    this._beyondMin = this.options.beyondMin;
+    this._minusLeft = null;
+    this._scale = this.options.scale;
+    this._max =
+      this._scale == null
+        ? this.options.max
+        : this._scale[this._scale.length - 1].key;
+    this._min = this._scale == null ? this.options.min : this._scale[0].key;
+    this._lastValue = null;
+    this._moveValue = null;
+    this._mouseDownPageX = null;
+    this._canTouch = (function() {
+      try {
+        document.createEvent("TouchEvent");
+        return true;
+      } catch (e) {
+        return false;
+      }
+    })();
+    this._tempValue = [];
+    this._rangeValue = null;
+    this._init();
+  }
+  Slider.prototype = {
+    _initShow: function() {
+      this.$leftButton.show();
+      this.$rightButton.show();
+      this.$tip.show();
+      this.$validbar.show();
+      this.$selectedbar.show();
+    },
+    _init: function() {
+      jQuery.browser = {};
+      (function() {
+        jQuery.browser.msie = false;
+        jQuery.browser.version = 0;
+        if (navigator.userAgent.match(/MSIE ([0-9]+)./)) {
+          jQuery.browser.msie = true;
+          jQuery.browser.version = RegExp.$1;
+        }
+      })();
+      if ($.browser.msie == true && $.browser.version < 9) {
+        $("*", this.$elem).prop("unselectable", true);
+      }
+      this.$leftButton
+        .add(this.$rightButton)
+        .on("mousedown.slider", $.proxy(this._mousedownHandler, this));
+      this.$fullbar
+        .add(this.$selectedbar)
+        .on("click.slider", $.proxy(this._validbarClickHandler, this));
+      $(document.body).on(
+        "mouseup.slider",
+        $.proxy(this._mouseupHandler, this)
+      );
+      $(document.body).on(
+        "mousemove.slider",
+        $.proxy(this._mousemoveHandler, this)
+      );
+      if (this._canTouch == true) {
+        this.$leftButton
+          .add(this.$rightButton)
+          .on("touchstart.slider", $.proxy(this._mousedownHandler, this));
+        $(document.body).on(
+          "touchend.slider",
+          $.proxy(this._mouseupHandler, this)
+        );
+        $(document.body).on(
+          "touchmove.slider",
+          $.proxy(this._mousemoveHandler, this)
+        );
+      }
+      $("a", this.$elem).click(function() {
+        return false;
+      });
+      this._initShow();
+      this._initScale();
+    },
+    _initScale: function() {
+      for (var i = 0; i < this._scale.length - 1; i++) {
+        var scale = this._scale[i];
+        var leftValueArray = [];
+        leftValueArray.push(scale.key);
+        for (var j = 0; j < scale.value.length - 1; j++) {
+          leftValueArray.push(
+            leftValueArray[leftValueArray.length - 1] + scale.value[j]
+          );
+        }
+        scale.leftValue = leftValueArray;
+      }
+    },
+    _setLowHightTip: function() {
+      var validBarLeft =
+        this.$validbar.position().left + this.$fullbar.position().left;
+      var validBarWidth = this.$validbar.width();
+      var leftButtonLeft = this.$leftButton.position().left;
+      var rightButtonLeft = this.$rightButton.position().left;
+      if (leftButtonLeft < validBarLeft - this._buttonWidth / 2 - 1) {
+        this.$lowTip.show();
+      } else {
+        this.$lowTip.hide();
+      }
+      if (
+        rightButtonLeft >
+        validBarLeft + validBarWidth - this._buttonWidth / 2 + 1
+      ) {
+        this.$highTip.show();
+      } else {
+        this.$highTip.hide();
+      }
+      if (
+        rightButtonLeft < validBarLeft - this._buttonWidth / 2 ||
+        leftButtonLeft > validBarLeft + validBarWidth - this._buttonWidth / 2
+      ) {
+        this.$lowTip.show();
+        this.$highTip.show();
+        this.$lowTip.find("i").addClass("icon-dian-blue");
+        this.$highTip.find("i").addClass("icon-dian-blue");
+      } else {
+        this.$lowTip.find("i").removeClass("icon-dian-blue");
+        this.$highTip.find("i").removeClass("icon-dian-blue");
+      }
+    },
+    setTipPrefix: function(prefix) {
+      $(".bg-darkgrey-hand", this.$elem).prop(
+        "title",
+        prefix +
+          "可选区间" +
+          this._rangeValue.leftValue +
+          "-" +
+          this._rangeValue.rightValue +
+          this._unit
+      );
+    },
+    _validbarClickHandler: function(e) {
+      if ($(e.target).hasClass("low01") || $(e.target).hasClass("high01")) {
+        return;
+      }
+      var clickX = e.pageX - this.$fullbar.offset().left;
+      var value = this.getValue();
+      var leftX = value.leftX;
+      var rightX = value.rightX;
+      var newLeft = clickX;
+      newLeft = this._getFixedPosition(newLeft).leftX;
+      newLeft = newLeft - this._buttonWidth / 2;
+      var newLeftButtonLeft = null;
+      var newRightButtonLeft = null;
+      var animateButton = null;
+      if (clickX <= leftX + (rightX - leftX) / 2) {
+        animateButton = this.$leftButton;
+        newLeftButtonLeft = newLeft;
+        newRightButtonLeft = this.$rightButton.position().left;
+      } else {
+        animateButton = this.$rightButton;
+        newRightButtonLeft = newLeft;
+        newLeftButtonLeft = this.$leftButton.position().left;
+      }
+      var newWidth = newRightButtonLeft - newLeftButtonLeft;
+      if (
+        animateButton == this.$leftButton &&
+        this.$rightButton.position().left > this._fullbarWidth - 15 &&
+        newLeft + this.$fullbar.position().left > this._fullbarWidth - 15
+      ) {
+        return;
+      }
+      animateButton.css({ left: newLeft + this.$fullbar.position().left });
+      this._setLowHightTip();
+      this._setTipContent();
+      this._setTipPosition();
+      this._setSelectedbar();
+      this._fireChangeEvent();
+    },
+    _mousedownHandler: function(e) {
+      var pageX = null;
+      if (
+        e.originalEvent &&
+        e.originalEvent.touches &&
+        e.originalEvent.touches[0]
+      ) {
+        pageX = e.originalEvent.touches[0].pageX;
+      } else {
+        pageX = e.pageX;
+      }
+      this._allowDrag = true;
+      this._$activeButton = $(e.target);
+      if (this._$activeButton[0] == this.$leftButton[0]) {
+        this.$leftButton.css("zIndex", 20);
+        this.$rightButton.css("zIndex", 10);
+      } else {
+        this.$leftButton.css("zIndex", 10);
+        this.$rightButton.css("zIndex", 20);
+      }
+      this._minusLeft = pageX - this._$activeButton.position().left;
+      if (
+        this.$leftButton.position().left == this.$rightButton.position().left
+      ) {
+        this._mouseDownPageX = pageX;
+      } else {
+        this._mouseDownPageX == null;
+      }
+      return false;
+    },
+    _mousemoveHandler: function(e) {
+      if (this._allowDrag) {
+        var pageX = null;
+        if (
+          e.originalEvent &&
+          e.originalEvent.touches &&
+          e.originalEvent.touches[0]
+        ) {
+          pageX = e.originalEvent.touches[0].pageX;
+        } else {
+          pageX = e.pageX;
+        }
+        if (this._mouseDownPageX != null) {
+          var moveRight = pageX > this._mouseDownPageX;
+          if (moveRight == true) {
+            this._$activeButton = this.$rightButton;
+            this.$leftButton.css("zIndex", 10);
+            this.$rightButton.css("zIndex", 20);
+          } else {
+            this._$activeButton = this.$leftButton;
+            this.$leftButton.css("zIndex", 20);
+            this.$rightButton.css("zIndex", 10);
+          }
+          this._mouseDownPageX = null;
+        }
+        var newLeft = pageX - this._minusLeft;
+        if (this._$activeButton[0] == this.$leftButton[0]) {
+          if (newLeft > this.$rightButton.position().left) {
+            newLeft = this.$rightButton.position().left;
+          }
+        } else {
+          if (newLeft < this.$leftButton.position().left) {
+            newLeft = this.$leftButton.position().left;
+          }
+        }
+        var validBarLeft =
+          this.$validbar.position().left + this.$fullbar.position().left;
+        var validBarWidth = this.$validbar.width();
+        newLeft =
+          newLeft - this.$fullbar.position().left + this._buttonWidth / 2;
+        newLeft = this._getFixedPosition(newLeft).leftX;
+        newLeft =
+          newLeft + this.$fullbar.position().left - this._buttonWidth / 2;
+        if (
+          this._$activeButton[0] == this.$leftButton[0] &&
+          this.$rightButton.position().left > this._fullbarWidth - 15 &&
+          newLeft > this._fullbarWidth - 15
+        ) {
+          return;
+        }
+        this._$activeButton.css("left", newLeft);
+        this._setLowHightTip();
+        this._setSelectedbar();
+        this._setTipContent();
+        this._setTipPosition();
+      }
+    },
+    _fireChangeEvent: function() {
+      if (
+        this._lastValue == null ||
+        this._lastValue.leftValue != this._moveValue.leftValue ||
+        this._lastValue.rightValue != this._moveValue.rightValue
+      ) {
+        var args = { value: this._moveValue };
+        this.$elem.trigger("changed", args);
+      }
+      this._lastValue = this._moveValue;
+    },
+    _mouseupHandler: function() {
+      if (this._allowDrag) {
+        this._allowDrag = false;
+        this._$activeButton = null;
+        this._fireChangeEvent();
+      }
+    },
+    setValue: function(option) {
+      var pointX = this._getPointX(option);
+      this.$leftButton.css(
+        "left",
+        pointX.leftX + this.$fullbar.position().left - this._buttonWidth / 2
+      );
+      this.$rightButton.css(
+        "left",
+        pointX.rightX + this.$fullbar.position().left - this._buttonWidth / 2
+      );
+      this._setSelectedbar();
+      this._setTipContent();
+      this._setTipPosition();
+      if (!(option.triggerEvent === false)) this._fireChangeEvent();
+      this._lastValue = this._moveValue;
+      this._setLowHightTip();
+    },
+    setRange: function(option) {
+      var pointX = this._getPointX(option);
+      this.$validbar.css({
+        left: pointX.leftX,
+        width: pointX.rightX - pointX.leftX
+      });
+      this.$leftButton.css(
+        "left",
+        pointX.leftX + this.$fullbar.position().left - this._buttonWidth / 2
+      );
+      this.$rightButton.css(
+        "left",
+        pointX.rightX + this.$fullbar.position().left - this._buttonWidth / 2
+      );
+      this._setSelectedbar();
+      this._setTipContent();
+      this._setTipPosition();
+      this._lastValue = this._moveValue;
+      this._rangeValue = this._lastValue;
+      this._setLowHightTip();
+    },
+    _getPointX: function(option) {
+      var miniScale = this._getMiniScale();
+      var leftX = null;
+      var rightX = null;
+      for (var i = miniScale.length - 1; i >= 0; i--) {
+        if (option.leftValue >= miniScale[i].leftValue) {
+          leftX = miniScale[i].leftX;
+          this._tempValue.push([miniScale[i].leftValue, option.leftValue]);
+          break;
+        }
+      }
+      for (var i = miniScale.length - 1; i >= 0; i--) {
+        var rawScaleLeftValue = miniScale[i].leftValue;
+        var scaleLeftValue = this._getValueByTempValue(rawScaleLeftValue);
+        if (option.rightValue >= scaleLeftValue) {
+          if (miniScale[i + 1] && option.rightValue > scaleLeftValue) {
+            rightX = miniScale[i + 1].leftX;
+            this._tempValue.push([
+              miniScale[i + 1].leftValue,
+              option.rightValue
+            ]);
+          } else {
+            rightX = miniScale[i].leftX;
+            this._tempValue.push([rawScaleLeftValue, option.rightValue]);
+          }
+          break;
+        }
+      }
+      if (option.rightValue == option.leftValue) {
+        leftX = rightX;
+      }
+      return { leftX: leftX, rightX: rightX };
+    },
+    _getFixedPosition: function(leftX) {
+      if (leftX < 0) leftX = 0;
+      var miniScale = this._getMiniScale();
+      if (leftX >= miniScale[miniScale.length - 1].leftX2 - 1) {
+        return {
+          leftX: this._fullbarWidth,
+          leftValue: miniScale[miniScale.length - 1].leftValue
+        };
+      } else if (leftX >= miniScale[miniScale.length - 2].leftX) {
+        return {
+          leftX: miniScale[miniScale.length - 2].leftX,
+          leftValue: miniScale[miniScale.length - 2].leftValue
+        };
+      }
+      for (var i = miniScale.length - 2; i >= 0; i--) {
+        if (leftX >= miniScale[i].leftX2 - 1) {
+          return {
+            leftX: miniScale[i].leftX,
+            leftValue: miniScale[i].leftValue
+          };
+        }
+      }
+    },
+    _getMiniScale: function() {
+      var miniScale = [];
+      var commonSingleWidth =
+        (this._fullbarWidth -
+          this.options.firstWidth -
+          this.options.lastWidth) /
+        (this._scale.length - 3);
+      for (var i = 0; i < this._scale.length - 1; i++) {
+        var singleWidth = commonSingleWidth;
+        var scale = this._scale[i];
+        var leftX = null;
+        if (i == 0) {
+          singleWidth = this.options.firstWidth;
+        } else if (i == this._scale.length - 2) {
+          singleWidth = this.options.lastWidth;
+        }
+        if (i == 0) {
+          leftX = 0;
+        } else {
+          leftX = this.options.firstWidth + (i - 1) * commonSingleWidth;
+        }
+        if (i < this._scale.length - 2) {
+          for (var j = 0; j < scale.value.length; j++) {
+            var s = {
+              leftX: leftX + (j * singleWidth) / scale.value.length,
+              leftValue: scale.leftValue[j]
+            };
+            if (j == 0) {
+              s.isBigPoint = true;
+            }
+            miniScale.push(s);
+          }
+        } else {
+          miniScale.push({
+            leftX: leftX,
+            leftValue: scale.key,
+            isBigPoint: true
+          });
+          miniScale.push({
+            leftX: this._fullbarWidth,
+            leftX2: leftX + singleWidth * scale.value,
+            leftValue: this._scale[i + 1].key,
+            isBigPoint: true
+          });
+        }
+      }
+      for (var i = miniScale.length - 2; i >= 0; i--) {
+        var mScale = miniScale[i];
+        if (i == 0) {
+          mScale.leftX2 = 0;
+          break;
+        }
+        if (mScale.isBigPoint) {
+          mScale.leftX2 =
+            mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.6;
+        } else if (miniScale[i - 1].isBigPoint) {
+          mScale.leftX2 =
+            mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.4;
+        } else {
+          mScale.leftX2 =
+            mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.5;
+        }
+      }
+      return miniScale;
+    },
+    _getValueByTempValue: function(value) {
+      if (this._tempValue == null) return value;
+      for (i = 0; i < this._tempValue.length; i++) {
+        if (this._tempValue[i][0] == value) {
+          return this._tempValue[i][1];
+        }
+      }
+      return value;
+    },
+    _getPointLeft: function(buttonLeft) {
+      return Math.abs(
+        buttonLeft + this._buttonWidth / 2 - this.$fullbar.position().left
+      );
+    },
+    getValue: function() {
+      var leftX = this._getPointLeft(this.$leftButton.position().left);
+      var leftPosition = this._getFixedPosition(leftX);
+      var leftValue = this._getValueByTempValue(leftPosition.leftValue);
+      var rightX = this._getPointLeft(this.$rightButton.position().left);
+      var rightPosition = this._getFixedPosition(rightX);
+      var rightValue = this._getValueByTempValue(rightPosition.leftValue);
+      var leftValidX = this.$validbar.position().left;
+      var rightValidX = leftValidX + this.$validbar.width();
+      return {
+        leftValue: leftValue,
+        rightValue: rightValue,
+        leftX: leftX,
+        rightX: rightX,
+        leftValidX: leftValidX,
+        rightValidX: rightValidX
+      };
+    },
+    _setSelectedbar: function() {
+      this.$selectedbar.css({
+        left: this.$leftButton.position().left + this.$leftButton.width() / 2,
+        width:
+          this.$rightButton.position().left - this.$leftButton.position().left
+      });
+    },
+    _setTipPosition: function() {
+      var leftButtonLeft = this.$leftButton.position().left;
+      var rightButtonLeft = this.$rightButton.position().left;
+      var tipWidth = this.$tip.outerWidth();
+      this.$tip.css(
+        "left",
+        leftButtonLeft +
+          (rightButtonLeft - leftButtonLeft) / 2 -
+          tipWidth / 2 +
+          this._buttonWidth / 2
+      );
+    },
+    _setTipContent: function() {
+      var value = this.getValue();
+      var content = "";
+      var min = null;
+      var max = null;
+      if (
+        this.noValidbar == false &&
+        Math.abs(value.rightX - value.rightValidX) <= 2 &&
+        Math.abs(value.leftX - value.leftValidX) <= 2
+      ) {
+        content = value.leftValue + this._unit + "";
+        // content = "不限";
+      } 
+      // else if (
+      //   this._beyondMax == true &&
+      //   value.rightValue == this._getValueByTempValue(this._max) &&
+      //   this._beyondMin == true &&
+      //   value.leftValue == this._getValueByTempValue(this._min)
+      // ) {
+      //   content = "不限";
+      // }
+      //  else if (
+      //   value.leftValue == this._getValueByTempValue(this._min) &&
+      //   value.rightValue == this._getValueByTempValue(this._max)
+      // ) {
+      //   content =
+      //     value.leftValue +
+      //     "-" +
+      //     this._scale[this._scale.length - 2].key +
+      //     this._unit +
+      //     "以上";
+      // } 
+      else if (
+        this._beyondMax == true &&
+        value.rightValue == this._getValueByTempValue(this._max)
+      ) {
+        if (value.leftValue == value.rightValue) {
+          content =
+            this._scale[this._scale.length - 2].key + this._unit + "";
+        } else {
+          content = value.leftValue + this._unit + "";
+        }
+      } else if (
+        this._beyondMin == true &&
+        value.leftValue == this._getValueByTempValue(this._min)
+      ) {
+        content = value.rightValue + this._unit + "";
+      } else if (value.leftValue == value.rightValue) {
+        content = value.leftValue + this._unit;
+      } else {
+        content = value.leftValue + "-" + value.rightValue + this._unit;
+      }
+      this.$tipContent.html(content);
+      this._moveValue = value;
+    }
+  };
+})();

src/components/Slider/style.css

@@ -0,0 +1,140 @@
+.price-dd-choose {
+  height: 80px;
+  float: left;
+}
+.price-range {
+  height: 40px;
+  margin-top: 25px;
+  position: relative;
+}
+.price-range .price-range-slider {
+  width: 560px;
+  height: 6px;
+  overflow: hidden;
+  position: absolute;
+  top: 25px;
+  left: 10px;
+  background-color: #292c35;
+}
+.price-range .bg-darkgrey,
+.price-range .bg-darkgrey-hand {
+  left: 0;
+  width: 570px;
+  position: absolute;
+  top: 0;
+  height: 5px;
+  overflow: hidden;
+}
+.price-range .bg-darkgrey {
+  background-color: #292c35;
+}
+.price-range .bg-darkgrey-hand {
+  cursor: pointer;
+  z-index: 5;
+}
+.price-range .slider-ul {
+  width: 570px;
+  height: 5px;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  margin: 0;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.price-range .slider-ul li {
+  width: 60.3px;
+  height: 10px;
+  float: left;
+  position: relative;
+}
+/* .price-range .slider-ul li.slider-ul-first {
+  width: 30px;
+} */
+.price-range .slider-ul li .icon-dian {
+  width: 3px;
+  height: 3px;
+  line-height: 0;
+  overflow: hidden;
+  position: absolute;
+  border-radius: 2px;
+  right: -4px;
+  top: 2px;
+  background: #777777;
+}
+.price-range .slide-selected {
+  height: 5px;
+  line-height: 0;
+  overflow: hidden;
+  background-color: #328cff;
+  position: absolute;
+  top: 25px;
+  left: 10px;
+  z-index: 6;
+  border-top: 1px solid #328cff;
+  border-bottom: 1px solid #328cff;
+  cursor: pointer;
+}
+.price-range .btn-price {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: 21px;
+  z-index: 10;
+  cursor: pointer;
+  background: #328cff;
+  border-radius: 50%;
+}
+.price-range .tip {
+  min-width: 100px;
+  max-width: 100px;
+  position: absolute;
+  z-index: 100;
+  padding: 2px;
+  background: url('~@/assets/images/icons/shadow_bg.jpg') repeat;
+  font-size: 12px;
+  float: left;
+  top: 40px;
+}
+.price-range .tip .tip-content {
+  min-width: 30px;
+  line-height: 22px;
+  padding: 0 10px;
+  color: #666;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+  font-size: 14px;
+  position: relative;
+  z-index: 1;
+}
+.price-range .tip .tip-arrow {
+  display: inline-block;
+  overflow: hidden;
+  position: absolute;
+  z-index: 2;
+  background: url('~@/assets/images/icons/layer_arrow24.png') no-repeat;
+}
+.price-range .tip .tip-top {
+  width: 15px;
+  height: 11px;
+  top: -8px;
+  left: 38%;
+  background-position: 0 -26px;
+}
+.price-range .price-range-text {
+  height: 20px;
+  color: #999;
+}
+.price-range .price-range-text .number {
+  display: inline-block;
+  width: 58.3px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 12px;
+}
+.price-range .price-range-text .number-first {
+}

src/components/Slidera/index.vue

@@ -0,0 +1,102 @@
+<!--  -->
+<template>
+<div class="line-con">
+  <div class="line-step">
+    <ul>
+      <li v-for="(item,i) in numbers" :key="i"><span @click="clickItem(item.id)">·</span><div :class="{point:item.id===activeIndex}"></div></li>
+    </ul>
+  </div>
+  <div class="line-number">
+    <ul>
+      <li v-for="(item,i) in numbers" :key="i">
+        {{item.num}}
+      </li>
+    </ul>
+  </div>
+
+</div>
+</template>
+
+<script>
+const numbers = [{
+  num: 2009,
+  id: 1
+}, {
+  num: 2010,
+  id: 2
+}, {
+  num: 2011,
+  id: 3
+}, {
+  num: 2012,
+  id: 4
+}, {
+  num: 2013,
+  id: 5
+}, {
+  num: 2014,
+  id: 6
+}, {
+  num: 2015,
+  id: 7
+}, {
+  num: 2016,
+  id: 8
+}, {
+  num: 2017,
+  id: 9
+}, {
+  num: 2018,
+  id: 10
+}]
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  props: ['year'],
+  components: {},
+  data () {
+    // 这里存放数据
+    let item = numbers.find(item => item.num === this.year)
+    return {
+      numbers,
+      activeIndex: item ? item.id : 1
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    init () {
+
+    },
+    clickItem (id) {
+      this.activeIndex = id
+      var obj = numbers.find(item => item.id === id)
+      this.$emit('selected_obj', obj.num)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    this.init()
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+
+<style scoped>
+/* 引入公共css类 */
+@import url(./style);
+</style>

src/components/Slidera/style.css

@@ -0,0 +1,63 @@
+.line-con{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 40px;
+  margin-top: 30px;
+}
+
+.line-step ul {
+  line-height: 10px;
+  height: 10px;
+}
+
+.line-step ul li{
+  cursor: pointer;
+  width: 70px;
+  display: inline-block;
+  background-color: #292c35;
+  color: #777777;
+  text-align: center;
+  vertical-align: middle;
+  position: relative;
+
+}
+.line-step ul li span{
+  font-size: 20px;
+  width: 20px;
+  display: inline-block;
+}
+
+.line-step ul li .point{
+  position: absolute;
+  background: #25a5f7;
+  display: inline-block;
+  width: 20px;
+  border-radius: 50%;
+  height: 20px;
+  top: -30%;
+  left: 40%;
+}
+
+.line-step ul li:first-child{
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
+.line-step ul li:last-child{
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+.line-number{
+
+}
+.line-number ul{
+  display: inline-block;
+}
+
+.line-number ul li{
+  display: inline-block;
+  width: 70px;
+  text-align: center;
+  font-size: 14px;
+}
+

src/components/ViewOperation/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="oper-layout"
+    tabindex="0"
+    :style="layoutStyle"
+    @keydown.prevent.107="enlarge"
+    @keydown.prevent.109="narrow"
+    ref="layout"
+  >
+    <div class="ctrl">
+      <!-- <i class="el-icon-plus" @click="enlarge"></i>
+      <i class="el-icon-minus" @click="narrow"></i> -->
+    </div>
+    <div class="content" :style="contentStyle">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+const MAXSCALE = 2
+const MINSCALE = 0.5
+
+function getType (data) {
+  let string = Object.prototype.toString.call(data)
+  return string.substring(8, string.length - 1)
+}
+
+export default {
+  props: {
+    width: {
+      default: '100%'
+    },
+    height: {
+      default: 'auto'
+    },
+    scale: {
+      type: Number,
+      default: 1
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      tscale: this.scale,
+      translate: {
+        x: this.x,
+        y: this.y
+      }
+    }
+  },
+  computed: {
+    layoutStyle () {
+      let width = getType(this.width) === 'Number'
+        ? this.width + 'px' : this.width
+      let height = getType(this.height) === 'Number'
+        ? this.height + 'px' : this.height
+
+      return {width, height}
+    },
+    contentStyle () {
+      let val = `translateX(${this.translate.x}px)
+        translateY(${this.translate.y}px)
+        scale(${this.tscale})`
+
+      return {transform: val}
+    }
+  },
+  methods: {
+    readyMove (ev) {
+      let startX, startY
+      if (ev.screenX) {
+        startX = ev.screenX
+        startY = ev.screenY
+      } else {
+        startX = ev.touches[0].clientX
+        startY = ev.touches[0].clientY
+      }
+
+      let x = this.translate.x
+      let y = this.translate.y
+
+      let moveHandle = ev => {
+        let moveX, moveY
+        if (ev.screenX) {
+          moveX = ev.screenX
+          moveY = ev.screenY
+        } else {
+          moveX = ev.touches[0].clientX
+          moveY = ev.touches[0].clientY
+        }
+        this.translate.x = x + moveX - startX
+        this.translate.y = y + moveY - startY
+        ev.preventDefault()
+        ev.stopPropagation()
+      }
+
+      let upHandle = ev => {
+        console.log('-0-')
+        document.removeEventListener('touchmove', moveHandle, { passive: false })
+        document.removeEventListener('touchend', upHandle)
+        document.removeEventListener('mousemove', moveHandle, { passive: false })
+        document.removeEventListener('mouseup', upHandle)
+      }
+
+      document.addEventListener('touchmove', moveHandle, { passive: false })
+      document.addEventListener('touchend', upHandle)
+      document.addEventListener('mousemove', moveHandle, { passive: false })
+      document.addEventListener('mouseup', upHandle)
+    },
+    enlarge () {
+      if (this.tscale < MAXSCALE) {
+        this.tscale += 0.1
+      }
+    },
+    narrow () {
+      if (this.tscale > MINSCALE) {
+        this.tscale -= 0.1
+      }
+    }
+  },
+  mounted () {
+    this.readyMove = this.readyMove.bind(this)
+    this.$refs.layout.addEventListener('mousedown', this.readyMove)
+    this.$refs.layout.addEventListener('touchstart', this.readyMove)
+  },
+  beforeDestroy () {
+    this.$refs.layout.removeEventListener('mousedown', this.readyMove)
+    this.$refs.layout.removeEventListener('touchstart', this.readyMove)
+  }
+}
+</script>
+
+<style scoped>
+@import url('./style.css');
+</style>

src/components/ViewOperation/style.css

@@ -0,0 +1,38 @@
+
+.oper-layout {
+  /* overflow: hidden; */
+  position: relative;
+  cursor: all-scroll;
+  outline: none;
+}
+
+.ctrl {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 9;
+}
+
+.ctrl i {
+  --color: #ccc;
+  --hoverColor: rgb(64, 158, 255);
+
+  border: 1px solid var(--color);
+  color: var(--color);
+  cursor: pointer;
+  padding: 2px;
+}
+
+.ctrl i:hover {
+  border-color: var(--hoverColor);
+  color: var(--hoverColor);
+}
+
+.content {
+  perspective: 600px;
+  will-change: transform;
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;
+  /* transition: transform .3s linear; */
+}

src/components/bar/index.vue

@@ -0,0 +1,180 @@
+<!--  -->
+<template>
+  <div class='bar'>
+    <div class="bar-line">
+      <div v-for="(item,i) in data" :key="i" class="bar-item" :style="item.sty">
+        <div class="bar-num">
+          <span class="num">{{item.num}}</span>
+          <span>{{item.name}}</span>
+        </div>
+      </div>
+      <div class="bottm-title" style="width:11rem;right:9.5rem;">
+        <div class="num">{{(34.7 + 112.33 + 1.77)+'亿元'}}</div>
+        <div style="color:#ffb64d">本地生产增加值本年累计</div>
+      </div>
+    </div>
+    <!-- <div class="bar-line" style="margin-left: 1rem;margin-right:0;height:60%;">
+      <div v-for="(item,i) in zcArr" :key="i" class="bar-item" :style="item.sty">
+        <div class="bar-num" style="left:2rem;right:0">
+          <span class="num" style="text-align: left;width: 5rem;">{{item.num}}</span>
+          <span>{{item.name}}</span>
+        </div>
+      </div>
+      <div class="bottm-title" style="left:0">
+        <div style="text-align:left" class="num">62亿</div>
+        <div style="color:#24a5f8">固定资产投资</div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+const cyArr = [{
+  num: '22亿',
+  name: '第一产业',
+  sty: {
+    height: '34%',
+    backgroundColor: '#ffb64d',
+    color: '#ffb64d'
+  }
+}, {
+  num: '22亿',
+  name: '第二产业',
+  sty: {
+    height: '33%',
+    backgroundColor: '#fd6c12',
+    color: '#fd6c12'
+  }
+}, {
+  num: '22亿',
+  name: '第三产业',
+  sty: {
+    height: '33%',
+    backgroundColor: '#f13800',
+    color: '#f13800'
+  }
+}]
+
+const zcArr = [{
+  num: '12亿',
+  name: '工业投资',
+  sty: {
+    height: '20%',
+    backgroundColor: '#24a5f8',
+    color: '#24a5f8'
+  }
+}, {
+  num: '18亿',
+  name: '技改投资',
+  sty: {
+    height: '30%',
+    backgroundColor: '#007dcd',
+    color: '#007dcd'
+  }
+}, {
+  num: '24亿',
+  name: '装备投资',
+  sty: {
+    height: '40%',
+    backgroundColor: '#5763d9',
+    color: '#5763d9'
+  }
+}, {
+  num: '8亿',
+  name: '其他',
+  sty: {
+    height: '10%',
+    backgroundColor: '#1328d3',
+    color: '#1328d3'
+  }
+} ]
+
+export default {
+// import引入的组件需要注入到对象中才能使用
+  props: {
+    data: {
+      default: []
+    }
+  },
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      cyArr,
+      zcArr
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style scoped>
+.bar{
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  padding-right: 85px;
+  height: 90%;
+  align-items: flex-end;
+}
+.bar .bar-line{
+  height: 85%;
+  width: 20px;
+  /* margin-right: 1rem; */
+}
+
+.bar .bar-line .bar-item{
+  transition: all 0.3s ease;
+}
+.bar .bar-line .bar-item .bar-num{
+  position: relative;
+  /* right: 5rem; */
+  /* width: 4rem;   */
+  right: 13rem;
+  width: 12rem;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+}
+.num{
+  color: #fff;
+  font-size: 1.5rem;
+  text-align: right;
+  line-height: 1.5;
+}
+.bottm-title{
+  text-align: right;
+  width: 6rem;
+  position: relative;
+  right: 4.5rem;
+  margin-top: 1rem;
+}
+.bottm-title div:last-child{
+  font-weight: bold;
+}
+</style>

src/components/maps/index.vue

@@ -0,0 +1,273 @@
+/* eslint-disable */
+
+<template>
+  <div class="layout">
+    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 1200 964" style="enable-background:new 0 0 1200 964;" xml:space="preserve" @click="clickHandle($event)">
+<path class="st st0" d="M868.4,35.6c2.7-9.5,10.4-16.7,20-18.8c1.2-0.3,2-0.4,2.2-0.5c1.2-0.4,18-3,47.2-7.7c29.8-4.8,60.3-4.3,90,1.7
+  c27.4,5.5,54.8,11.1,82.2,16.6c18.9,3.9,36.9,11.4,53,22.2l19.1,12.8c11.2,7.5,17.9,20.2,17.9,33.7v52.8c0,0.2,0,0.5,0,0.7
+  l-3.9,48.9c-1.3,16.2-9.6,31.1-22.7,40.7l-39.5,28.8c-0.9,0.7-1.9,1.2-3,1.5l-15.7,4.2c-3.1,0.8-5.5,3.2-6.4,6.2l-6.3,20.5
+  c-0.6,2.1-0.5,4.4,0.3,6.4l6.3,14.6c0.9,2.2,1,4.6,0.2,6.9l-13.2,35.5c-1,2.6-3.1,4.7-5.7,5.5l-32.9,10.9c-4.7,1.6-9.9-0.9-11.6-5.6
+  h0c-2-5.5-8.6-7.8-13.5-4.7L988,396.8c-2.6,1.6-4.3,4.5-4.3,7.6l-0.4,16.4c-0.1,3.6-2.3,6.9-5.7,8.3L951,440.2
+  c-2.5,1.1-5.4,0.9-7.8-0.3l-80.1-41.7c-8.6-4.5-15.3-11.8-18.9-20.7l-9.8-23.9c-5.2-12.7-7.9-26.3-7.9-40v-63.2
+  c0-16.2,1.8-32.3,5.2-48.1C845.4,140,867.8,37.5,868.4,35.6C868.5,35.6,868.4,35.7,868.4,35.6z"/>
+<path class="st st1" d="M187.5,292.6c1.7,2.1,31.6,45,31.6,45l8.5-7.8l3.3,3.1l9.2-4.2l9,12.3c0,0-4.7,11.1-2.6,19.3
+  c-0.5,0.2-3.8,8.5-3.8,8.5l3.8,9l18.9,15.3l2.6,1.4h3.1l3.5,1.4L287,393l6.4,4.2l4.7,0.8h5h4.7l64.9-44.7l185.5-22.1l-5.1-46.9
+  l-2.6-47.6c-0.3-5.6-4.8-10.1-10.4-10.4l-163.8-7.8c0,0-39.1-9.3-42.8-11.1c-3.8-1.7-8.3,0.4-8.3,0.4l-1.6-0.7l-0.1-4.2
+  c0-1.1-0.9-2-2-2.1l-4.9-0.5l-5.4,1.7l-0.9-0.5c-1.3-0.7-2.9-0.7-4.1,0.2l-5.8,4l-16.7-0.4l-9.8-2.9c-1.1-0.3-2.3-0.1-3.2,0.7
+  l-3.6,3l-6.5,0.2l-5.4,2.3l-11.9-0.7c-0.9-0.1-1.7,0.2-2.4,0.8l-2.9,2.4l-0.8-0.5l-8.2-3.2c-1.6-0.6-3.5-0.4-5,0.6l-1.6,1.1
+  c-1.1,0.8-1.8,2.1-1.7,3.4l0.5,9.1l1.5,2.6c0.7,1.2,0.7,2.6,0,3.8l-7.9,14.3l-1.5,11.5c0,0-1.3,0.5-1.9,0.1
+  c-0.6-0.3-5.7-1.2-5.7-1.2l-5-5.1c0,0,0,0,0-0.1l-15.6,41.1C185.4,288.8,185.8,290.5,187.5,292.6z"/>
+<path class="st st2" d="M251,449.4C250.9,449.4,250.9,449.4,251,449.4C250.9,449.4,251.2,449.2,251,449.4z"/>
+<path class="st st3" d="M64.9,459.8l40.8,8.7v7.1l14.9,16.3l15.8,1.4l13,15.6c0,0-7.5,7.5-11.1,18.6c-0.2,3.1-1.9,8.3-2.8,8.5
+  c-0.9,0.2-8.7,16-8.7,16s4.2,6.6,9.4,7.3c5.2,1.2,9.2,1.9,9.2,1.9l9.2-1.2l9.2-3.5v-7.3l3.5-5.2l30.7-13.9c0,0-1.9-13-5.2-19.6
+  c-2.6-6.4-9.2-22.2-9.2-22.2s-0.5-2.1,2.1-3.1c2.6-0.9,24.3-11.6,55.4-28.5c7.7-5.7,9.6-7.1,10-7.4c0.6-0.6,4.4-5.5-5.2-11.5
+  c-0.2-0.2-2.8-2.4-2.8-2.4l14.1-8.3v-1.2l-26.4-38l16.3-10l-0.5-0.4l-3.8-9c0,0,3.3-8.3,3.8-8.5c-2.1-8.3,2.6-19.3,2.6-19.3l-9-12.3
+  l-9.2,4.2l-3.3-3.1l-8.5,7.8c0,0-29.9-42.9-31.6-45s-2.1-3.8-2.1-3.8l15.7-41.1c-0.5-0.9-5.4-11.1-7.6-13.8
+  c-2.4-2.8-6.7-2.4-6.7-2.4s-4.1,3.6-5.5,2.4c-3.1-4.2-10.8-5.6-10.8-5.6l-1.9-6.1c-0.2-0.7-0.7-1.4-1.3-1.9l-14.7-12.7
+  c-1.1-0.9-2.6-1-3.8-0.2c-3.8,2.4-8.4,0.4-11-1c-1-0.5-2.2-0.1-2.6,0.9c-1.1,2.7-3.1,7.6-4.8,10.8c-2.4,4.7-1.4,5.6-0.2,7.7
+  c1.5,4.4-0.4,5.6-2,5.9c-1.2,0.2-2.3,0.9-3.1,1.9L122,237l-4.2,3.9c-0.9,0.8-2.1,1.2-3.3,1.1l-8.9-1c-0.8-0.1-1.6,0-2.4,0.3
+  l-4.6,1.9c-1,0.4-2,0.5-3,0.2l-10.2-2.4c-1.2-0.3-2.4-0.1-3.5,0.4c-4.3,2-15.2,7.3-16.8,8.8c-1.1,2.1-3.2,3.8-4.8,4.8
+  c-1.1,0.8-1.9,2-2.1,3.3l-2,15.2c-0.2,1.3,0.2,2.6,1,3.6l1.1,1.4c2,5.1,1.1,7.1,0,7.8c-1,0.7-1.5,1.9-1.5,3.1l0.1,7.6
+  c0,1.1,0.4,2.2,1.1,3.1l2.8,3.4c0,0,0.7,9.2,0,13.6s0.1,5.9,2.5,9.3s-2.3,8.6-2.3,8.6l-8.6,9.9c0,0-1.2,0.4-3.9-0.1
+  s-13.2,0.9-13.2,0.9l-2.1-1.9c-1.1-0.9-2.5-1.4-3.9-1.1l-2.7,0.5c-0.9,0.2-1.7,0.6-2.3,1.3c-0.7,0.7-1.9,1.9-4.4,3.7
+  c-9.2,4.5-13.9,21.9-13.9,21.9s-3.2,5.1-4.9,8.2c-0.6,1.1-0.7,2.5-0.1,3.6c1.8,3.6,1.5,10.2,0.8,13.8c-2.4,6,1.8,9.4,1.8,9.4
+  l0.8,3.7c0,0,3.9,17.5,4.4,17.9c2,1.7,7.7,11.5,10.3,16c0.9,1.5,2.4,2.5,4.1,2.6l2,0.2c1,0.1,2,0.6,2.6,1.5c1.1,1.6,2.8,4.2,2.7,5.2
+  c-0.2,1.6,0.5,5.3,0.5,5.3s7.5,10,10.8,15.2c2.5,7.8-0.5,8.4-3.8,9.8c-6.7,4.4-7.3,11.7-7.3,11.7s0,0.1-0.1,0.3l24.3,3.7L64.9,459.8
+  z"/>
+<path class="st st4" d="M251,449.4C250.9,449.4,250.9,449.4,251,449.4C250.9,449.4,251.2,449.2,251,449.4z"/>
+<path class="st st5" d="M288.2,447.7l57.8-0.5l8.1-7.2l11.1-0.2l8.3,8l10.5-13.4c0,0,5.9-3.6,5.9-3.2c1.4,2.2,5.4,1.3,5.4,1.3l3.5,9.9
+  c0,0,0,0,2.8,2.1s5.4,9,5.4,9l10.6-2.4c0,0,11.6-13.9,20.8-26.2c9.2-12.3,6.1-37.5,6.1-37.5l-4-26.2l-2.1-8.3v-7.3l-65.7,7.8
+  l-64.9,44.7h-4.7h-5l-4.7-0.8L287,393l-12.5,2.8l-3.5-1.4h-3.1l-2.6-1.4l-18.4-15l-16.3,10l26.4,38v1.2l-14.1,8.3
+  c0,0,2.6,2.1,2.8,2.4c9.7,5.9,5.8,10.9,5.2,11.5c0.2-0.1,0,0,0,0l0,0c-0.2,0.1-1,0.7-3.2,2.3l32.9-22.4L288.2,447.7z"/>
+<path class="st st6" d="M758.9,849.8c0,0-4.7,4.6-3.6,6.7c1.1,2.2,2.5,3.6-0.2,4.9c-2.6,1.3-7.2,0-10.5-1.3s-5.2-0.8-6.5,0.1
+  c-1.3,0.9-1.4,3-8.5-0.8c-2-0.8-1.9-3-9.9-1.3c-4.7,1.7-6.7,3.8-9.1,0.7c-2.5-3.1-3.7-5.3-3.8-6.9s-1.3-4.1-5.7-3.9
+  c-4.4-0.4-7.6-2.1-10,0.8s-5.8,9.1-6.5,11.6s-1.1,8.3,0.7,13c0.5,1.3,1.2,3,1.9,4.8c0.7,0.3,3.4,2,6.1,6.4c3.2,5-0.5,16.6-0.8,17
+  c-3.3,6.5-2.7,11.2-3.6,20.9c-0.7,7.1-4.8,13.3-6.9,16.1c-0.8,1-0.8,2.4,0,3.5l2.6,3.5c0.8,1.1,2.3,1.4,3.5,0.8
+  c4.6-2.5,16.1-8.8,24.9-13.4c11.3-5.8,21.1-0.9,24.1,2.4c10,13.6,27.8,13.2,33,12.8c0.8-0.1,1.5,0.5,1.5,1.3l0.2,9.7
+  c0,0.9,0.6,1.8,1.4,2.2l3.7,1.8c0.7,0.3,1.5,0.4,2.2,0.1l6.5-2.7c0.9-0.4,1.5-1.1,1.7-2c0.2-0.7,0.4-1.8,0.9-3.3
+  c2.7-8.5,10.8-3.8,10.8-3.8l8.4,3.2c0.9,0.4,2,0.3,2.8-0.1l3.9-2c1.1-0.6,1.8-1.7,1.8-2.9l0-2.9c0-1.2-0.5-2.4-1.4-3.2
+  c-0.3-0.3-0.7-0.6-1.1-0.8c-1.6-1.1-0.8-7.5-0.3-11.8c0.5-4.2,6.9-4.9,12.7-5.3c4.4-0.4,8.2-1.6,9.7-2.2c0.5-0.2,1-0.2,1.5-0.2
+  l5.7,0.9c0.9,0.1,1.8-0.1,2.5-0.7c1.8-1.5,5.3-4.4,5.8-6c-0.6-7.9-4.1-8.2-7.9-8.8c-3.8-0.7-6.6-0.6-12.3-4.1
+  c-13.4-6.4-19.2-2.1-23.5,1.4c-0.7,0.5-1.5,0.7-2.3,0.4c-9.6-3.7-8.5-11.8-8.5-11.8s-5-46.2-5.3-48.4c-3.2-8.3-17.7-19.3-22.1-22.4
+  l-10.7,20.2v6.1h0.5V849.8z"/>
+<path class="st st7" d="M965.2,507.7l-13.9-2.8c-0.8-0.2-1.5-0.6-2-1.3l-12.1-17c-0.8-1.1-2-1.7-3.4-1.7l-39.9,0.3
+  c-0.9,0-1.7,0.4-2.4,1l-8,7.9c-0.7,0.7-1.1,1.6-1.1,2.6v16.8c0,0.6-0.3,1.1-0.7,1.4l-10.5,8.1c-0.6,0.5-1.5,0.5-2.1,0l-2.2-1.6
+  c-2.5-1.8-4.2-4.6-4.8-7.6l-5.7-32l-7.1-14.8c-2.1-4.4-5.7-7.8-10.2-9.7l-2.2-0.9c-1.3-0.5-2.6-1-4-1.2l-56.2-11.2
+  c0,0-46.8-12.7-54.9-14.9l-19.1,39.7l-35.2,59.1l-8.2-4.1l4.4,40.9l26.1,0.8c0,0,13.2-2,21.1,6.7c5,5,10.5,10.5,10.5,10.5l13.3-24.1
+  c0,0-0.1-2.7,5.3-0.5c5.5,2.2,20.4,7.9,20.4,7.9s9.3,3.2,6.7,9.8c-2.5,6.6-24.9,54.9-24.9,54.9s-3.8,2.4-1.9,6.5
+  c1.9,4.1,5.5,11.5,5.5,11.5l-1.4,1.9c0,0-3-4.2-5.2-0.9s-5.5,7.5-5.5,7.5s-4.4-5.5-8,0c-3.5,5.5-7.7,12.4-7.7,12.4s-0.8,2,1.1,2.8
+  c1.9,0.8,17.8,7.1,17.8,7.1s3.9,0.8,1.9,6.5s-11,25.6-11,25.6s-1.4,1.6,1.9,3.2c1,0.5,3.4,1.8,6.3,3.6V718l24.9-10l36.2-1.6
+  l49.9,8.5c1.1,0.2,2.3,0.2,3.4,0.1l24.6-2.2c1.3-0.1,2.6-0.4,3.8-0.9l22.2-8.5c1.4-0.5,2.6-1.3,3.7-2.3l14.3-12.7
+  c0.5-0.4,0.9-0.9,1.2-1.4l14.4-21.9c0.5-0.8,0.9-1.7,1.1-2.6l13.1-50.5c0.3-1.1,0.3-2.2,0.1-3.2l-3.2-15.8c-0.2-1-0.5-1.9-1.1-2.7
+  l-8-13.1c-0.2-0.3-0.5-0.5-0.8-0.7l-15.2-6.9c-0.4-0.2-0.5-0.6-0.2-0.9l9.3-9.6c0.6-0.6,1.6-0.7,2.2-0.1l6,5.5
+  c0.6,0.6,1.6,0.7,2.3,0.2l7.6-4.9l9.5-11.3c0.3-0.4,0.5-0.8,0.5-1.3v-13.4c0-0.6,0.3-1.1,0.8-1.3l11.6-5.1c0.8-0.3,1.2-1.2,1.1-2
+  l-2.4-13.6C968.8,509.7,967.3,508.1,965.2,507.7z"/>
+<path class="st st8" d="M768.3,822.8c0,0-6.6-17-7.2-17.6c-33.3-26.4-29.2-63.8-29.2-63.8l0.1-0.4l-30.1-1c0,0-22.9,3.1-31.8-22
+  c-1.4-7.2-1.8-7.8-1.8-7.8s-1.8-0.6-1.7-2.7c0-2.1-0.2-13.5-15-23.6h-29.2l-13.1-9.1l-15.6,4c0,0-12.4,15.1-55.3,35.6
+  c-2.6,0.1-45-1.1-45-1.1l-10.8,5.8l-5.8-3.5l-44.9,21l-13.2,54.8l48.3,82.8l24.6-12.9c0,0,13.9-9.9,16.5-11.6
+  c10.8-1.8,25.6,6.5,25.6,6.5l17.1,16.2l25.2,14.1l14.8,10.8c1.4,1,3.2,1.1,4.6,0.2c1.2-0.7,2.4-1.3,3-1.3c4.9,1.2,4.7-0.6,4.7-0.6
+  s2-2.2,3.3-5.2s2.7-2.8,4.6-4.1c1.9-1.3,15.6-1.7,15.6-1.7l24.8-7.3l10.8-0.9c0,0,8.8-0.6,9.9-0.6s7.2,2.2,7.2,2.2l7.9,0.5
+  c0,0,0,0,0.1,0.1c-0.8-1.7-1.5-3.4-1.9-4.8c-1.8-4.7-1.4-10.5-0.7-13s4.2-8.7,6.5-11.6c2.4-2.9,5.6-1.2,10-0.8
+  c4.3-0.1,5.6,2.3,5.7,3.9c0.1,1.7,1.3,3.9,3.8,6.9s4.4,1,9.1-0.7c8-1.7,7.9,0.5,9.9,1.3c7.1,3.8,7.2,1.7,8.5,0.8s3.2-1.4,6.5-0.1
+  c3.3,1.3,7.9,2.5,10.5,1.3c2.6-1.3,1.3-2.7,0.2-4.9s3.6-6.7,3.6-6.7v-6l10.7-20.2C768.7,823.1,768.3,822.8,768.3,822.8z"/>
+<path class="st st9" d="M760.8,565.8c0,0-15-5.7-20.4-7.9c-5.5-2.2-5.3,0.5-5.3,0.5l-13.3,24.1c0,0-5.5-5.5-10.5-10.5
+  c-7.9-8.8-21.1-6.7-21.1-6.7l-26.1-0.8l-0.3,17.9h6.7c0,0,10.8,12.7,14.6,17.1c3.8,4.4,0.6,2.5,7.4,6.1c6.8,3.6,11.8,2.7,14.6,2.8
+  s6.1,2.7,9.3,3s10.7,6.9,12.6,8.8c1.2,1.2,8.8,5.6,14.5,8.8c3.7-8,21.9-47.5,24.2-53.5C770.1,568.9,760.8,565.8,760.8,565.8z"/>
+<path class="st st10" d="M740.8,636.8c-1.9-4.1,1.9-6.5,1.9-6.5s0.2-0.5,0.7-1.4c-5.7-3.3-13.3-7.6-14.5-8.8c-1.9-1.9-9.4-8.5-12.6-8.8
+  c-3.2-0.3-6.5-2.8-9.3-3c-2.8-0.1-7.9,0.8-14.6-2.8c-6.7-3.6-3.6-1.7-7.4-6.1c-3.8-4.4-14.6-17.1-14.6-17.1h-6.7l0.2-10l-7.3,0.3
+  L648,593c0,0-0.9,2.9-3.5,3.6c-2.6,0.7-3.7,2.3-4.4,4.2s-5.2,11.5-5.2,11.5s-3.1,4.9-4.2,7.1c-1.1,2.2-6.6,10.1-6.8,11.9
+  c-0.2,1.8-2.4,8-4.4,11c-1.3,1.9-15.8,22.2-25.9,36.5l15.4-4l13.1,9.1c0,0,25.9,0,29.2,0c14.8,10,15.1,21.5,15,23.6s1.7,2.7,1.7,2.7
+  s0.4,0.6,1.8,7.8c9,25.1,31.8,22,31.8,22l30.1,1l4.3-23.1c-2.9-1.7-5.3-3.1-6.3-3.6c-3.3-1.6-1.9-3.2-1.9-3.2s9-20,11-25.6
+  c2-5.7-1.9-6.5-1.9-6.5s-15.9-6.3-17.8-7.1c-1.9-0.8-1.1-2.8-1.1-2.8s4.2-6.9,7.9-12.4c3.6-5.5,8,0,8,0s3.3-4.2,5.5-7.5
+  s5.2,0.9,5.2,0.9l1.4-1.9C746.3,648.3,742.7,640.9,740.8,636.8z"/>
+<path class="st st11" d="M721.1,428.5c-4.7-1.3-31.7-9.4-31.7-9.4l-75.3-28.7c-8.2-3.1-17.5-0.2-22.5,7l-18.2,26.4l-0.2-0.8l-0.4,2.3
+  l-23.4,3.9l-11.2,19.2c0,0-0.1,1.9-3.4,0.5c-3.3-1.4-12.3-6-12.3-6s-1.5-1.1-3.9,0.7c-2.5,1.8-3.5,1-5.3,4.6
+  c-1.5,3.6-1.9,6.5-1.9,6.5s0,1,2.6,2.3c2.6,1.2,25.5,14.5,25.5,14.5s2,0.7,0.3,3.2s-21.6,37.9-21.6,37.9l19.3,67.1l1.3,33.8
+  l-2.9,18.2c0,0-0.6,0.9,2.1,3c2,1.5,35.8,29.2,55,45c0.5-0.5,0.7-0.8,0.7-0.8h0.1c10.2-14.2,24.7-34.6,25.9-36.5c2-3,4.2-9.2,4.4-11
+  s5.8-9.7,6.8-11.9c1-2.3,4.2-7.1,4.2-7.1s4.5-9.4,5.2-11.5c0.7-2,1.8-3.5,4.4-4.2c2.6-0.7,3.5-3.6,3.5-3.6l8.5-20.4l7.3-0.3l0.1-8
+  l0,0l-4.4-40.9l8.2,4.1l35.2-59.1l19.1-39.7C721.6,428.6,721.3,428.6,721.1,428.5z"/>
+<path class="st st12" d="M240.9,520.4l6-0.6l18.1-8.7l12.5,1.7c0,0,6.8,0.6,9.8-2.7s11-10.4,12.7-11.5s4.2-0.9,7.5-6.3
+  c3.9-4.5,9-10.4,9-10.4l10.8-5.3l7.8-8.4l4-1.3c0,0,1.6-0.7,1.4,2.8c-0.1,3.5-0.9,9.6-0.9,9.6l-1.1,3c0,0,0.2,5.1,2.8,0.6
+  c2.6-4.5,2.6-4.5,2.6-4.5h8.7c0,0,1.4-0.2,2,1.8s0.6,2,0.6,2l17.4,8.9c0,0,2.5,3.4,4.2-2.5s1.7-5.9,1.7-5.9l1.2-11.3l3.4-2.8
+  l0.7-11.1c0,0-0.9-1.8,4.7-1.9c5.7-0.1,18.1-2.1,18.1-2.1h0.6c0,0-2.6-6.8-5.4-9s-2.8-2.1-2.8-2.1l-3.5-9.9c0,0-4,0.9-5.4-1.3
+  c0-0.5-5.9,3.2-5.9,3.2l-10.5,13.4l-8.3-8l-11.1,0.2l-8.1,7.2l-57.8,0.5l-7.5-18.4L248,451.6c-1.5,1.1-3.7,2.7-6.8,5
+  c-31.4,17-53.1,27.6-55.7,28.6c-2.6,0.9-2.1,3.1-2.1,3.1s6.6,15.8,9.2,22.2c2.9,5.9,4.8,16.8,5.1,19.1c5-0.7,10.2-1.4,12.7-2.1
+  C216.2,525.8,240.9,520.4,240.9,520.4z"/>
+<path class="st st13" d="M398.5,482.9c1.9,1.3,17.6,3.8,20.1,3.8s10.4,1.9,10.4,1.9s-0.3,2.5,2.5,3.8s11.9,6.6,11.9,6.6l11.6,5.3
+  c0,0,3.8,21.1-13.2,55.3c1,0.8,71.2,37.8,96.6,51.2l-1.2-31.2L518,512.5c0,0,19.9-35.4,21.6-37.9c1.7-2.5-0.3-3.2-0.3-3.2
+  s-22.9-13.2-25.5-14.5c-2.6-1.3-2.6-2.3-2.6-2.3s0.4-2.8,1.9-6.5c1.8-3.5,2.9-2.7,5.3-4.6c2.5-1.8,3.9-0.7,3.9-0.7s9,4.6,12.3,6
+  s3.4-0.5,3.4-0.5l11.2-19.2l23.4-3.9l0.4-2.3l-8.3-31l-6.6-60.6l-119.9,14.2v7.3l2.2,8.3l4,26.2c0,0,3.1,25.2-6.1,37.5
+  S417.5,451,417.5,451l-10.6,2.4h-0.6c0,0-12.4,2-18.1,2.1s-4.7,1.9-4.7,1.9l-0.7,11.1l-3.4,2.8l-1.2,11.2
+  C384.9,482.3,394.6,482.1,398.5,482.9z"/>
+<path class="st st14" d="M202.1,570.4c3.5-5,5.7-7.1,6.6-10.7c0.9-3.6,4-8.4,6.1-12.6c1.3-2.7,5.1-14.3,7.7-22.5
+  c-5.2,1.2-10,2.4-12.1,3c-2.5,0.7-7.6,1.5-12.6,2.1c0,0.3,0,0.5,0,0.5L167.2,544l-3.5,5.2v7.3l-9.2,3.5l-9.2,1.2c0,0-4-0.7-9.2-1.9
+  c-5.2-0.7-9.4-7.3-9.4-7.3s7.8-15.8,8.7-16c0.9-0.2,2.6-5.4,2.8-8.5c3.5-11.1,11.1-18.6,11.1-18.6l-13-15.6l-15.8-1.4l-14.9-16.3
+  v-7.1l-40.8-8.7L55,498l-24.3-3.7c-0.6,1-2.6,4.3-4.9,7c-2.7,3.2-3.1,8.2-2.7,8.7c0.3,0.6,5.3,7.1,7.2,11.6c1.4,4.6-1.6,5.9-1.6,5.9
+  s-1.4-0.7-7.9-1.9s-3.3,7-2.7,7.1c12.9,7.3,11.7,18.8,11.7,18.8s0,0-3,0c-1.2,0-2.1,0.7-2.8,1.5c-0.9,1.1-1.1,2.7-0.7,4.1l2.1,6
+  c0.6,1.9,2.4,3.1,4.4,3l5.1-0.2l11.5,16.4l10,5.1c0.7,0.3,0.9,1.2,0.5,1.8c-0.8,1.2-2.1,3-3.4,4.7c-3.9,3.3-0.9,6.6-0.9,6.6l5.4,5.9
+  l-1.7,5.1c-0.5,1.3-0.1,2.8,1,3.8l3.5,3.1l-1.6,8.7c-0.1,0.8-0.5,1.5-1.1,2.1l-1.7,1.8c-1,1.1-1.3,2.6-0.6,4h0
+  c0.5,0.9,0.2,2.1-0.6,2.7l-24,17.9l-1.2,7.3l-7.8,9.5c-1,1.3-0.8,3.2,0.5,4.2L38,688c0,0,0,1.1-2.6,4c-1.9,2.5-3.8,3.7-5.1,4.3
+  c-1.4,0.6-2.2,2-2.2,3.5l-0.1,7.9l-0.9,4.9c-0.1,0.8,0,1.6,0.4,2.3l3.2,6.2c0,0-0.9,4.4-1.7,7.9c-0.3,1.5,0.3,3.1,1.7,4
+  c2.7,1.6,7.4,1.7,8.5,1.4c2.5-1.2,5.2-1.2,7.1-0.9c1.5,0.2,3-0.4,3.9-1.5l6.4-7.5c0.7-0.9,2-1.2,3-0.7l4.6,1.9h4.6
+  c0.9,0,1.8,0.4,2.4,1l4.3,4.5c0.7,0.7,1.1,1.7,1.1,2.7l0,2.6c0,0.8-0.2,1.5-0.6,2.2l-1.8,2.6c-0.4,0.6-0.6,1.4-0.6,2.1l0.4,12.2
+  l-5.6,6.9c-0.7,0.8-1,1.8-1.1,2.9l-0.1,1.4c0.4,7.8,5.7,5.2,11.3,3.8c5.7-1.4,8.9,0.9,10.6,2.4c1.7,1.4,5.1,4.5,7.5,5.6
+  c1.2,0.5,2.5,1.2,3.5,1.7c1.1,0.5,1.8,1.7,1.8,2.9l0.1,20.7l-7.8,9.4c-0.7,0.9-1.1,2-1.1,3.2l0.5,10.9c0,0.8,0.2,1.5,0.6,2.2l4,8.3
+  l-9.5,9.6c-0.4,0.4-0.8,0.9-1,1.5l-0.7,1.8c0,0.1-0.1,0.2-0.1,0.2l-6.6,14.4c-0.3,0.6-0.4,1.2-0.4,1.8c0.1,3.6,0.3,16.7,1.3,21.5
+  c1.1,5.5,7.1,3.8,7.1,3.8l15.6-1c1.3-0.1,2.5,0.5,3.2,1.6l3.3,5.1c0.8,1.3,2.3,2.1,3.9,2.2l4.3,0.1c1,0,2-0.2,2.8-0.7l6-3.3
+  c0.7-0.4,1.3-1,1.8-1.7l2.6-4.1c0.5-0.7,1.1-1.3,1.9-1.6l23.6-9.5c1.2-0.5,2.1-1.4,2.6-2.5c1.2-3,3.8-8.5,5.3-7.8
+  c2,0.9,1.7,6.4,1.7,6.4l-5.7,4.7l-8.6,7.9l-4,10.5c-0.7,1.7-0.3,3.6,0.8,5.1l2.4,2.9c0.9,1.1,2.4,1.7,3.8,1.6
+  c1.5-0.1,3.3-0.2,4.6-0.3c1-0.1,2.1,0.3,2.9,0.9c3,2.4,5.1,3.7,6.3,4.4c1,0.5,2.1,0.6,3.2,0.4l17-4.4c0.5-0.1,1.1-0.3,1.5-0.6
+  l24.8-13.9c0.9-0.5,1.6-1.2,2-2.1l13.4-25L213,801.3l-25.9-13.5l-38.2,8.5c0,0-3.2-0.3-0.8-4.9c2.4-4.6,16.2-34.6,16.2-34.6
+  l-2.5-3.9l-1.7-13.1l-5.7-13.5L133,714.8l-2.5,1.9l-3-1.9l0.8-5.8l15.6-17.3l-0.5-9.3l-10-11.2c0,0,0.9-1.1,2.8-2.7
+  c1.9-1.6,8.8-7.4,8.8-7.4l0.3-4.9l-5.4-6.9c0,0-1.1-2.7,1.3-5.8c2.4-3.2,5.8-8.8,5.8-8.8l6.3,1.3c0,0,3.6,2.4,6.3-0.5
+  c2.7-2.8,12.6-11.3,12.6-11.3s1.9-1.7,3.1,1c1.1,1.7,2.7,1.7,3.7,0.7s3.5-2.2,3.5-2.2s1.1-1.6,0.8-2.8c-0.4-1.3-0.8-3.2,0.7-5
+  s4.8-7.4,4.8-7.4s1.8-0.9,3.9-0.9c1.2-0.5,2.5-1.2,5-1.5c0-11.1,0-24.5,0-27C197.9,575.1,198.6,575.3,202.1,570.4z"/>
+<path class="st st15" d="M455.1,504.3l-11.6-5.3c0,0-9.1-5.3-11.9-6.6c-2.8-1.3-2.5-3.8-2.5-3.8s-7.9-1.9-10.4-1.9s-18.3-2.5-20.1-3.8
+  c-4-0.8-13.6-0.6-20.1-0.3v0.1c0,0,0,0-1.7,5.9s-4.2,2.5-4.2,2.5l-17.4-8.9c0,0,0,0-0.6-2s-2-1.8-2-1.8h-8.7c0,0,0,0-2.6,4.5
+  s-2.8-0.6-2.8-0.6l1.1-3c0,0,0.8-6,0.9-9.6c0.1-3.5-1.4-2.8-1.4-2.8l-4,1.3l-7.7,8.5l-10.8,5.3c0,0-5.1,5.9-9,10.4
+  c-3.3,5.3-5.8,5.2-7.5,6.3c-1.7,1.1-9.8,8.2-12.7,11.5c-2.9,3.3-9.8,2.7-9.8,2.7l-12.5-1.7l-18.1,8.7l-6,0.6c0,0-9.7,2.1-18.3,4.1
+  c-2.6,8.3-6.4,19.9-7.7,22.5c-2.1,4.2-5.2,9-6.1,12.6c-0.9,3.6-3,5.7-6.6,10.6s-4.2,4.7-4.2,9.2c0,2.5,0,15.9,0,27
+  c1.8-0.2,4.2-0.2,7.6,0.3c8,1.3,10.2,2.8,13.2-3s5.5-9.3,5.5-9.3h5.7l3.9,3.3l-2.2,19.5c0,0-1.2,4.1,3.7,1.9
+  c4.4-1.4,19.5-7.5,19.5-7.5s2.5-0.6,4.2,2s11.5,14.5,11.5,14.5l16.9,7.2c0,0,58.6-9.2,62.6-12.1c2.2-0.9,3.3-1.3,4.2-2.9
+  c0.9-1.7,5.1-7.7,5.1-7.7s0.3-0.7,2.5-0.3c2.1,0.4,29.3,4.2,29.3,4.2l15.3,7.9l1.1,0.2l34.6-65.1h-0.1
+  C458.9,525.3,455.1,504.3,455.1,504.3z"/>
+<path class="st st16" d="M273.9,784.3l-1.9-23c0,0-0.1-2.5,3.5-1.7s5.2,1.2,8.3-0.1c3.1-1.4,43.3-14.2,43.3-14.2s8.3-1.8,9.6-2.9
+  c1.3-1.1,5.6-5.9,5.6-5.9s0.9-1.4,4-0.5s12.6,3.5,12.6,3.5s3.2,1.2,4.5-2s8-17.5,9.4-18.3s5.8-1.3,7.2-5c1.5-3.7,5.8-10.8,7.3-12.5
+  c0.8-1.2,2-4,3-14.6c1.5-10.6,7-42.1,7-42.1l11.1-22.2l-1,1.8l-1.1-0.2l-15.2-7.9c0,0-27.2-3.9-29.3-4.2s-2.5,0.3-2.5,0.3
+  s-4.2,6-5.1,7.7s-2,2-4.2,2.9c-3.9,2.9-62.6,12.1-62.6,12.1l-16.9-7.2c0,0-9.7-11.9-11.5-14.5s-4.2-2-4.2-2s-15.1,6.1-19.5,7.5
+  c-4.9,2.2-3.7-1.9-3.7-1.9l2.2-19.5l-3.9-3.3h-5.7c0,0-2.5,3.4-5.5,9.3c-3,5.8-5.2,4.2-13.2,3c-8-1.3-10.6,0.3-12.6,1.1
+  c-2.1,0-3.9,0.9-3.9,0.9s-3.3,5.6-4.8,7.4c-1.5,1.8-1.1,3.7-0.7,5c0.4,1.3-0.8,2.8-0.8,2.8s-2.5,1.2-3.5,2.2s-2.6,1-3.7-0.7
+  c-1.2-2.7-3.1-1-3.1-1s-9.9,8.5-12.6,11.3c-2.7,2.8-6.3,0.5-6.3,0.5l-6.3-1.3c0,0-3.4,5.7-5.8,8.8s-1.3,5.8-1.3,5.8l5.3,6.9
+  l-0.3,4.9c0,0-6.9,5.8-8.8,7.4c-1.9,1.6-2.8,2.7-2.8,2.7l10,11.2l0.5,9.3l-15.6,17.3l-0.8,5.8l3,1.9l2.5-1.9l21.4,11.5l5.7,13.5
+  l1.7,13.1l2.5,3.9c0,0-13.8,30-16.2,34.6s0.8,4.9,0.8,4.9l38.2-8.5l25.9,13.5l18.4,66.3l0.5-0.8l14.9-10.6l7.3,0.7l0.5,0.1L256,819
+  L273.9,784.3z"/>
+<path class="st st17" d="M537.8,634.5c-2.7-2-2.1-3-2.1-3l2.9-18.2l-0.1-2.6c-25-13.2-93.7-49.4-96.5-51.1l-33.7,63.2L397.2,645
+  c0,0-5.5,31.5-7,42.1c-0.9,10.6-2.2,13.4-3,14.6c-1.5,1.7-5.8,8.8-7.3,12.5s-5.8,4.2-7.2,5c-1.4,0.8-8.1,15.2-9.4,18.3
+  c-1.3,3.2-4.5,2-4.5,2s-9.5-2.6-12.6-3.5s-4,0.5-4,0.5s-4.2,4.8-5.6,5.9c-1.3,1.1-9.6,2.9-9.6,2.9s-40.2,12.8-43.3,14.2
+  c-3.1,1.4-4.6,0.8-8.3,0.1s-3.5,1.7-3.5,1.7l1.9,23L256,819.1l-1.4,38.4l29.5,7.9c0,0,1.1,1.1,6.8,4.7c6.6,5.9,14.1-0.1,14.1-0.1
+  l3.8-0.1l19.6-8.6c0.6-0.2,1.2-0.4,1.8-0.4l7.4-0.1c0.7,0,1.3,0.1,1.9,0.4l14.3,6.5c0.8,0.4,1.6,0.5,2.5,0.6l15.4,0.4
+  c0.8,0,1.6,0.3,2.2,0.7l7.4,5c0.6,0.4,1.2,0.7,1.9,0.9l16.4,5.1l0.7,1.8l5.9,5.4c0,0,3.4,0.7,8.4,1.7c18.9,3.9,21.8,2.3,21.8,2.3
+  l23.7-13.8l6.7-3.5l-48.6-82.9l13.1-54.9l44.9-21l5.8,3.5l10.8-5.8c0,0,42.4,1.2,45,1.1c37.1-17.7,51.4-31.4,54.6-34.8
+  C573.7,663.8,539.8,636,537.8,634.5z"/>
+
+</svg>
+
+  </div>
+</template>
+
+<script>
+const navs = {
+  0: '淇澳社区',
+  1: '北沙社区',
+  3: '永丰社区',
+  5: '上栅社区',
+  13: '下栅社区',
+  12: '金峰社区',
+  14: '那洲社区',
+  15: '官塘社区',
+  16: '会同社区',
+  17: '宁堂社区',
+  11: '东岸社区',
+  8: '鸡山社区',
+  6: '银星社区',
+  10: '唐家社区',
+  9: '唐乐社区',
+  7: '后环社区'
+}
+
+export default {
+  methods: {
+    clickHandle (ev) {
+      let title = navs[ev.target.className.baseVal.substring(5)]
+      if (title) {
+        this.$router.push({name: 'map', params: {title: title}})
+      }
+    }
+  }
+}
+</script>
+
+<style type="text/css">
+.st {
+  transition: all .3s linear;
+  cursor: pointer;
+  stroke-width: 2px;
+  stroke: #fff;
+}
+.st:hover {
+  fill: #f13800;
+}
+
+.st0 {
+  transform-origin: 900px 180px;
+  fill: #9ead9d;
+}
+.st1 {
+  transform-origin: 330px 260px;
+  fill: #c7cadb;
+}
+.st2 {
+  transform-origin: 250px 430px;
+  fill: #ce6767;
+}
+.st3 {
+  transform-origin: 120px 360px;
+  fill: #8d95aa;
+}
+.st4 {
+  fill: none;
+}
+.st5 {
+  transform-origin: 360px 420px;
+  fill: #a1abbd;
+}
+.st6 {
+  transform-origin: 700px 820px;
+  fill: #818a79;
+}
+.st7 {
+  transform-origin: 780px 540px;
+  fill: #a49b92;
+}
+.st8 {
+  transform-origin: 570px 720px;
+  fill: #9fa490;
+}
+.st9 {
+  transform-origin: 700px 580px;
+  fill: #bab0a6;
+}
+.st10 {
+  transform-origin: 680px 620px;
+  fill: #cfb9ac;
+}
+.st11 {
+  transform-origin: 560px 480px;
+  fill: #dfcdb5;
+}
+.st12 {
+  transform-origin: 260px 480px;
+  fill: #7f7180;
+}
+.st13 {
+  transform-origin: 460px 430px;
+  fill: #b2b1b6;
+}
+.st14 {
+  transform-origin: 150px 640px;
+  fill: #959595;
+}
+.st15 {
+  transform-origin: 310px 540px;
+  fill: #c1c0c5;
+}
+.st16 {
+  transform-origin: 240px 670px;
+  fill: #d7d3d2;
+}
+.st17 {
+  transform-origin: 420px 690px;
+  fill: #bbc5bc;
+}
+</style>

src/main.js

@@ -0,0 +1,24 @@
+// 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 'babel-polyfill'
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import axios from 'axios'
+import '@/assets/icon/iconfont.css'
+
+// axios.defaults.baseURL = 'http://192.168.0.249:8080/'
+// axios.defaults.baseURL = '/'
+Vue.config.productionTip = false
+Vue.prototype.$http = axios
+Vue.prototype.$bus = new Vue()
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})
+
+document.documentElement.className += ' ie' + document.documentMode

src/pages/external/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="iframe-layout"  :class="{mobile: ismobile}">
+    <div v-if="ismobile" class="top-layer">
+      <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
+      <a @click="exitHandle" class="xiangce" v-if="key" :class="{active: big}">大场景</a>
+      <a @click="xiangceHandle" class="xiangce" v-if="key" :class="{active: !big}">相册</a>
+    </div>
+    <template v-else>
+      <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
+      <!-- <a @click="xiangceHandle" class="xiangce" v-if="key">相册</a> -->
+      <select @change="changeHandle" class="ncxihiasj" v-model="asdasd" v-if="key">
+        <option value="big">大场景</option>
+        <option value="xiangce">相册</option>
+      </select>
+    </template>
+
+    <template v-if="ismobile">
+      <iframe :src="url" frameborder="0" v-if="big"></iframe>
+
+      <div class="asjdfioasfhuioasfh" v-else>
+        <div class="image-layout">
+          <Slide :screens="screens" :current="0">
+            <i class="iconfont icon-left" slot="up"></i>
+            <img slot="item" slot-scope="{data}" :src="data" class="image-item">
+            <i class="iconfont icon-right" slot="next"></i>
+          </Slide>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <iframe :src="url" frameborder="0"></iframe>
+      <imageQuery :screens="screens" @exitHandle="exitHandle" />
+    </template>
+  </div>
+</template>
+
+<script>
+import data from '@/data.js'
+import imageQuery from '@/pages/imageQuery'
+import browser from '@/util/browser'
+import Slide from '@/components/Slide'
+
+export default {
+  components: { imageQuery, Slide },
+  data () {
+    let key = Object.keys(data.data).find(id => this.$route.params.id === id)
+    if (!data.data[key].data) {
+      key = null
+    }
+    return {
+      asdasd: 'big',
+      urls: [],
+      key,
+      big: true,
+      ismobile: browser.mobile,
+      screens: null
+    }
+  },
+  computed: {
+    url () {
+      return this.$route.params.url
+    }
+  },
+  methods: {
+    changeHandle () {
+      if (this.asdasd === 'xiangce') {
+        if (data.data[this.key]) {
+          this.screens = data.data[this.key].data
+          this.big = false
+        }
+      }
+    },
+    xiangceHandle () {
+      if (data.data[this.key]) {
+        this.screens = data.data[this.key].data
+        this.big = false
+      }
+    },
+    exitHandle () {
+      this.screens = null
+      this.big = true
+      this.asdasd = 'big'
+    },
+    clickHandle () {
+      this.$router.back()
+      // while (global.paths.length !== 0) {
+      //   let path = global.paths.pop()
+
+      //   if (path.name !== 'external' && path.name) {
+      //     return this.$router.push({path: path.path})
+      //   }
+      // }
+      // this.$router.push({name: 'home'})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.top-layer {
+  padding-top: 4px;
+  height: 42px;
+}
+.iframe-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.iframe-layout iframe {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.iframe-layout a {
+  position: absolute;
+  color: #fff;
+  background-color: #fa3800;
+  left: 10px;
+  top: 10px;
+  padding: 8px 15px;
+  cursor: pointer;
+  z-index: 999;
+}
+
+.iframe-layout a.xiangce {
+  left: 100px;
+}
+
+.mobile a {
+  margin-right: 20px;
+  padding: 4px 10px;
+}
+
+.mobile .top-layer{
+  height: 15px;
+  padding: 10px;
+  background-color: #f1f2f3;
+}
+
+.asjdfioasfhuioasfh {
+  height: calc(100% - 50px);
+  background-color: #000;
+}
+
+.iframe-layout a i {
+  font-size: 0.8em;
+  vertical-align: middle;
+}
+
+.top-layer a{
+  position: relative;
+}
+
+.top-layer a.xiangce {
+  background: none;
+  color: #000;
+  padding-left: 3px;
+  padding-right: 3px;
+  margin-left: 5px;
+  margin-right: 5px
+}
+
+.top-layer a.xiangce.active {
+  color: #fa3800;
+}
+
+.mobile a {
+  left: inherit !important;
+  top: inherit !important;
+}
+
+.mobile iframe {
+  height: calc(100% - 35px);
+}
+
+.ncxihiasj {
+  position: absolute;
+  left: 100px;
+  border: 1px solid #fff;
+  z-index: 999;
+  background-color: transparent;
+  color: #fff;
+  top: 12px;
+  width: 65px;
+  border-radius: 3px;
+  height: 30px;
+  text-align: center;
+  padding: 0 10px;
+  appearance:none;
+  -moz-appearance:none;
+  -webkit-appearance:none;
+}
+
+.ncxihiasj option{
+  color: black;
+  background: #fff;
+  line-height: 20px;
+}
+
+</style>
+
+<style scoped>
+
+.image-dialog {
+  position: fixed;
+  z-index: 9999999999999999999;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.8);
+}
+
+.image-dialog a {
+  position: absolute;
+  color: #fff;
+  background-color: #fa3800;
+  left: 10px;
+  top: 10px;
+  padding: 8px 15px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.image-layout {
+  width: 100%;
+  padding-left: 20px;
+  padding-right: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+}
+
+.image-item {
+  width: 100%;
+}
+</style>

src/pages/home/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="layout" :class="{wide: isWide}" @touchmove.prevent>
+    <div>
+      <ViewOperation height="100%" v-if="!isWide" :scale="0.7">
+        <div class="address">
+          <!-- <img src="@/assets/images/address.png" alt=""> -->
+          <maps />
+          <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
+          <router-link v-for="item in address" :key="item.name" :class="item.name" :to="{name: 'map', params: {title: item.text}}">
+            {{item.text}}<span>{{item.count}}</span>
+          </router-link>
+        </div>
+      </ViewOperation>
+      <div class="address wide" v-else>
+        <!-- <img src="@/assets/images/address.png" alt=""> -->
+        <maps />
+        <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
+        <router-link v-for="item in address" :key="item.name" :class="item.name" :to="{name: 'map', params: {title: item.text}}">
+          {{item.text}}<span>{{item.count}}</span>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import data from '@/data'
+import browser from '@/util/browser'
+import ViewOperation from '@/components/ViewOperation'
+import maps from '@/components/maps'
+
+// const maps = [
+//   {cls: 'bs', img: require('@/assets/images/bs.png')},
+//   {cls: 'da', img: require('@/assets/images/da.png')},
+//   {cls: 'gt', img: require('@/assets/images/gt.png')},
+//   {cls: 'hh', img: require('@/assets/images/hh.png')},
+//   {cls: 'ht', img: require('@/assets/images/ht.png')},
+//   {cls: 'jf', img: require('@/assets/images/jf.png')},
+//   {cls: 'js', img: require('@/assets/images/js.png')},
+//   {cls: 'nt', img: require('@/assets/images/nt.png')},
+//   {cls: 'nz', img: require('@/assets/images/nz.png')},
+//   {cls: 'qa', img: require('@/assets/images/qa.png')},
+//   {cls: 'sc', img: require('@/assets/images/sc.png')},
+//   {cls: 'tj', img: require('@/assets/images/tj.png')},
+//   {cls: 'tl', img: require('@/assets/images/tl.png')},
+//   {cls: 'xc', img: require('@/assets/images/xc.png')},
+//   {cls: 'yf', img: require('@/assets/images/yf.png')},
+//   {cls: 'yx', img: require('@/assets/images/yx.png')}
+// ]
+const setting = [
+  {name: 'yf', text: '永丰社区'},
+  {name: 'bs', text: '北沙社区'},
+  {name: 'sc', text: '上栅社区'},
+  {name: 'jf', text: '金峰社区'},
+  {name: 'nz', text: '那洲社区'},
+  {name: 'gt', text: '官塘社区'},
+  {name: 'ht', text: '会同社区'},
+  {name: 'nt', text: '宁堂社区'},
+  {name: 'xc', text: '下栅社区'},
+  {name: 'da', text: '东岸社区'},
+  {name: 'js', text: '鸡山社区'},
+  {name: 'yx', text: '银星社区'},
+  {name: 'hh', text: '后环社区'},
+  {name: 'tl', text: '唐乐社区'},
+  {name: 'tj', text: '唐家社区'},
+  {name: 'qa', text: '淇澳社区'}
+]
+const wh = {width: window.innerWidth, height: window.innerHeight}
+
+setting.forEach(item => {
+  item.count = data.modules.find(m => m.title === item.text).children.length
+})
+
+window.addEventListener('resize', function () {
+  wh.width = window.innerWidth
+  wh.height = window.innerHeight
+})
+
+export default {
+  data () {
+    return {
+      ismobile: browser.mobile,
+      address: setting,
+      wh: wh
+    }
+  },
+  computed: {
+    isWide () {
+      return this.wh.width > 1085
+    }
+  },
+  components: {
+    ViewOperation,
+    maps
+  }
+}
+</script>
+
+<style scoped>
+@import url('./style.css');
+</style>

src/pages/home/style.css

@@ -0,0 +1,154 @@
+.layout {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background: #fff url('~@/assets/images/bg.jpg') center center;
+}
+
+.layout.wide {
+  padding-right: 350px;
+}
+
+.layout > div {
+  position: relative;
+  height: 100%;
+}
+
+.address {
+  width: 1085px;
+  height: 851px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+
+.address > a {
+  position: absolute;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  text-decoration: none;
+  pointer-events: none;
+}
+
+.address > a > span {
+  width: 26px;
+  height: 26px;
+  text-align: center;
+  line-height: 26px;
+  background-color: #fa3800;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 8px;
+  font-size: 16px;
+}
+
+.yf {
+  left: 7%;
+  top: 40%;
+}
+
+.bs {
+  left: 25%;
+  top: 29%;
+}
+
+.sc {
+  top: 42.5%;
+  left: 24%;
+}
+
+.jf {
+  top: 48%;
+  left: 20%;
+}
+
+.nz {
+  top: 60%;
+  left: 5%;
+}
+
+.ht {
+  top: 70%;
+  left: 17%;
+}
+
+.gt {
+  top: 57%;
+  left: 22%;
+}
+
+.xc {
+  top: 48.5%;
+  left: 33.5%;
+}
+
+.nt {
+  top: 69%;
+  left: 34%;
+}
+
+.js {
+  left: 45%;
+  top: 82%;
+}
+
+.da {
+  left: 45%;
+  top: 53.5%;
+}
+
+.tj {
+  left: 51%;
+  top: 69%;
+}
+
+.tl {
+  top: 61.3%;
+  left: 56%;
+}
+
+.hh {
+  top: 60%;
+  left: 67%;
+}
+
+.qa {
+  top: 20%;
+  left: 75%;
+}
+
+.yx {
+  top: 96%;
+  left: 58%;
+}
+
+
+
+.map-item {
+  position: absolute;
+  background-color: rgba(0,0,0,0.1);
+  opacity: 0.8
+}
+
+.map-yf {
+  left: 0;
+  top: 21%;
+  width: 21%;
+}
+
+.map-bs {
+  top: 20.3%;
+  left: 15.3%;
+  width: 30.5%;
+}
+
+.map-nz {
+  left: 1.5%;
+  width: 17.5%;
+  top: 47.5%;
+}

src/pages/imageQuery/index.vue

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

src/pages/layout/aside/down.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="down-item" ref="layout">
+    <h3 @click="parentClickHandle" :class="{active: showContent}" v-show="!key">
+      <div>
+        <span :class="{aactive: aaaactive}">{{title}}</span>
+        <a>{{children.length}}</a>
+      </div>
+      <span>
+          <i class="iconfont" :class="showContent ? 'icon-shouqi' : 'icon-xl'"></i>
+      </span>
+    </h3>
+    <ul v-show="showContent && children.length > 0">
+      <li v-for="(item, key) in children" :key="key" @click="clickHandle(item)" :class="{active: item.name === active}">
+        <p>• {{item.name}} <i class="iconfont icon-wancheng1" v-if="item.link || item.data"></i> </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['setting', 'keyword', 'show', 'aaaactive'],
+  data () {
+    return {
+      key: this.keyword,
+      showAll: false,
+      title: this.setting.title,
+      showContent: false,
+      active: null,
+      isReq: false
+    }
+  },
+  methods: {
+    clickHandle (item) {
+      this.$emit('checkItem', item)
+    },
+    parentClickHandle () {
+      this.showContent = !this.showContent
+      if (this.showContent) {
+        this.$emit('showcontent')
+      }
+    }
+  },
+  computed: {
+    children () {
+      let children = [...this.setting.children]
+
+      if (this.key) {
+        children = children.filter(item => {
+          return ~item.name.indexOf(this.keyword)
+        })
+      }
+      return children
+    }
+  },
+  watch: {
+    show (newVal) {
+      if (newVal === this.title) {
+        this.showContent = false
+        this.parentClickHandle()
+      }
+    },
+    '$route': {
+      deep: true,
+      immediate: true,
+      handler (newVal) {
+        this.active = newVal.params.show
+      }
+    },
+    keyword (newVal) {
+      this.key = newVal
+      this.showContent = !!this.key
+    },
+    async showAll (newVal) {
+      if (newVal) {
+        if (!this.isReq) {
+          await this.getData()
+        }
+
+        this.content.forEach(item => {
+          if (!~this.actives.indexOf(item)) {
+            this.actives.push(item)
+            this.$emit('selected', item)
+          }
+        })
+      } else {
+        this.actives.forEach(item => {
+          this.$emit('cancel', item)
+        })
+        this.actives = []
+      }
+    },
+    showContent: {
+      immediate: true,
+      handler: function (newVal) {
+        if (newVal) {
+          setTimeout(() => {
+            this.$refs.layout.parentNode.scrollTop = this.$refs.layout.offsetTop
+          }, 50)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.quxiaoHandle = () => {
+      this.showAll = false
+    }
+    this.$bus.$on('quxiao', this.quxiaoHandle)
+  },
+  beforeDestroy () {
+    this.$bus.$off('quxiao', this.quxiaoHandle)
+  }
+}
+</script>
+
+<style scoped>
+.down-item {
+  margin-top: 10px;
+}
+.down-item > h3 {
+  background-color: #ffffff;
+  /* padding: 8px 20px; */
+  height: 30px;
+  display: flex;
+  color: #fff;
+  font-size: 16px;
+  align-items: center;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.down-item > h3 input {
+  -webkit-appearance: checkbox;
+  cursor: pointer;
+}
+
+.down-item > h3 div {
+  flex: 1;
+  color: #2b2521;
+  font-size: 14px;
+  flex: 0 0 'auto';
+}
+
+.down-item > h3 i {
+  color: #eac1a3;
+  font-size: 16px;
+}
+
+.down-item > h3 div span {
+  font-weight: bold;
+}
+
+.down-item > ul > li {
+  margin: 16px 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.down-item > ul > li img {
+  flex: 0 0 auto;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.down-item > ul > li p {
+  flex: 1;
+  color: #2b2521;
+  font-size: 14px;
+}
+
+.down-item > ul > li.active p {
+  color: #f13800;
+}
+
+.aactive {
+  color: #f13800 !important;
+}
+
+.down-item > h3 a {
+  background-color: #f13800;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  border-radius: 9px;
+  width: 24px;
+  height: 18px;
+  line-height: 18px;
+  display: inline-block;
+  margin-left: 5px;
+}
+</style>

src/pages/layout/aside/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="mobile-z" :class="{show: show}" v-if="ismobile" @click="show = false" @touchmove.prevent></div>
+
+    <div class="search mobileSearch" v-if="ismobile" @touchmove.prevent>
+      <a  @click="show = true"><i class="iconfont icon-menu"></i></a>
+      <div @click="$router.push({name: 'search'})">
+        <input placeholder="搜索">
+      </div>
+      <a><i class="iconfont icon-sousuo"></i></a>
+    </div>
+
+    <div class="right-layout" :class="{show: show, mobile: ismobile}">
+      <div class="info" @touchmove.prevent @click="$router.push({name: 'home'})">
+        <i class="iconfont icon-guojiagaoxinqu"></i>
+        <h1>珠海国家高新区</h1>
+        <p>不可移动文物一张图</p>
+      </div>
+
+      <div class="search rad" v-if="!ismobile">
+        <input placeholder="搜索" type="search" v-model="keyword" >
+        <a><i class="iconfont icon-sousuo"></i></a>
+      </div>
+
+      <div class="list-layout">
+        <div class="tabs">
+          <a @click="showTab = 'module'" :class="{active: showTab === 'module'}">区域划分</a>
+          <a @click="showTab = 'type'" :class="{active: showTab === 'type'}">类型划分</a>
+        </div>
+        <div class="content" v-show="showTab === 'module'">
+          <down
+            :aaaactive="showTitle === type.title"
+            :keyword="keyword"
+            :setting="type"
+            v-for="(type, key) in modules"
+            :key="key"
+            @showcontent="handleChange(type)"
+            @checkItem="item => checkHandle(type, item)"
+            :show="showTitle"
+          />
+        </div>
+        <div class="content" v-show="showTab === 'type'">
+          <down
+            :aaaactive="showTitle === type.title"
+            :setting="type"
+            v-for="(type, key) in types"
+            :key="key"
+            @showcontent="handleChange(type)"
+            @checkItem="item => checkHandle(type, item)"
+            :show="showTitle"
+          />
+        </div>
+      </div>
+
+      <a class="switch" v-if="!ismobile" @click="show = !show" @touchmove.prevent>
+        <i class="iconfont" :class="show ? 'icon-right' : 'icon-left'"></i>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import browser from '@/util/browser'
+import data from '@/data'
+import down from './down'
+
+export default {
+  components: { down },
+  data () {
+    return {
+      show: !browser.mobile,
+      types: data.types,
+      modules: data.modules,
+      showTab: 'module',
+      keyword: '',
+      ismobile: browser.mobile,
+      showTitle: ''
+    }
+  },
+  methods: {
+    handleChange (type) {
+      if (this.$route.params.title !== type.title) {
+        this.$router.push({name: 'map', params: {title: type.title}})
+      }
+    },
+    checkHandle (type, item) {
+      this.$router.push({name: 'info',
+        params: {
+          title: type.title,
+          show: item.name
+        }
+      })
+    }
+  },
+  watch: {
+    '$route': {
+      deep: true,
+      immediate: true,
+      handler (newVal) {
+        setTimeout(() => {
+          this.showTitle = newVal.params.title
+
+          if (this.types.find(item => item.title === this.showTitle)) {
+            this.showTab = 'type'
+          } else {
+            this.showTab = 'module'
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import url('./style.css');
+</style>

src/pages/layout/aside/style.css

@@ -0,0 +1,229 @@
+
+.right-layer {
+  position: relative;
+  z-index: 9999999;
+}
+.right-layout {
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 350px;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  border-left: 1px solid #eac1a3;
+  transform: translateX(350px);
+  transition: transform .3s ease;
+}
+
+.right-layout.show {
+  transform: translateX(0);
+}
+
+.info {
+  cursor: pointer;
+  text-align: center;
+  margin: 0 0 30px;
+}
+
+.info i {
+  font-size: 80px;
+  color: #fa3800
+}
+
+.info h1 {
+  font-size: 24px; 
+  color: #2b2521;
+  margin: 8px 0;
+}
+
+.info p {
+  font-size: 18px;
+  color: #2b2521;
+}
+
+.list-layout {
+  margin-top: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+}
+
+.tabs {
+  margin-bottom: 10px;
+  display: flex;
+  border-bottom: 1px solid #ecc7ac;
+}
+
+.tabs a {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  color: #2b2521;
+  height: 44px;
+  line-height: 44px;
+  position: relative;
+  cursor: pointer;
+}
+
+.tabs a.active {
+  font-weight: bold;
+}
+
+.tabs a.active::after {
+  content: '';
+  height: 4px;
+  background-color: #fa4c19;
+  width: 100%;
+  position: absolute;
+  top: 100%;
+  margin-top: -2px;
+  z-index: 2;
+  left: 0;
+}
+
+.content {
+  position: relative;
+  box-sizing: content-box;
+  width: 100%;
+  padding-right: 10px;
+  flex: 1;
+  overflow-y: scroll;
+}
+
+
+.search {
+  position: relative;
+  background-color: #ffffff;
+  display: block;
+  height: 38px;
+  padding-right: 50px;
+  border: 1px solid #eac1a3;
+}
+
+.search input {
+  width: 100%;
+  height: 38px;
+  line-height: 38px;
+  font-size: 14px;
+  box-sizing: border-box;
+  border: none;
+  padding: 0 5px;
+}
+
+.search > a {
+  position: absolute;
+  width: 50px;
+  height: 100%;
+  right: 0;
+  top: 0;
+  background-color: #fa3800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search > a > i {
+  font-size: 20px;
+  color: #fff;
+}
+
+
+
+.switch {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #fa3800;
+  width: 14px;
+  height: 80px;
+  color: #fff;
+  line-height: 80px;
+  text-align: center;
+  cursor: pointer;
+}
+
+
+.mobile {
+  width: 280px;
+  right: none;
+  left: 0;
+  border-left: none;
+  border-right: 1px solid #ecc7ac;
+  transform: translateX(-300px);
+  z-index: 999992;
+  position: absolute;
+}
+
+.mobile.show {
+  transform: translateX(0)
+}
+
+.mobile .switch {
+  display: none;
+}
+
+.mobile-z {
+  position: fixed !important;
+  background-color: rgba(0,0,0,0.6);
+  z-index: 999991;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: none;
+}
+
+.show.mobile-z {
+  display: block;
+}
+
+.mobileSearch.search {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  right: 10px;
+  width: auto;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+  border: none;
+  height: 46px;
+  line-height: 46px;
+  padding: 0 50px;
+}
+
+.mobileSearch.search div {
+  position: relative;
+}
+
+.mobileSearch.search div::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 999999
+}
+
+.mobileSearch.search input {
+  text-align: center;
+}
+
+.mobileSearch.search a {
+  background: none;
+}
+
+.mobileSearch.search a i {
+  font-size: 26px;
+  color: #2b2521;
+}
+
+.mobileSearch.search a:first-child {
+  left: 0;
+}

src/pages/layout/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class='layout-con'>
+    <router-view :showside='isSide' @sidestatus='getSideStatus'></router-view>
+    <Aside />
+  </div>
+</template>
+
+<script>
+import Aside from './aside'
+
+export default {
+  components: {
+    Aside
+  },
+  data () {
+    return {
+      isShow: true,
+      isSide: true
+    }
+  },
+  methods: {
+    getSideStatus (data) {
+      this.isShow = data
+    },
+    getSide (data) {
+      this.isSide = data
+    },
+    showIframe (path) {
+      this.src = path
+      this.showPage = true
+    }
+  }
+}
+</script>
+<style scoped>
+.layout-con{
+  height: 100%;
+  width: 100%;
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

src/pages/map/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="layout" @touchmove.prevent>
+    <div id="map"></div>
+
+    <div class="dialog" v-show="showDialog">
+      <a class="close" @click="showDialog = false"></a>
+      <a class="jleft" @click="slideHandle(--imgIndex)">
+        <img src="@/assets/images/jiantou.png">
+      </a>
+      <a class="jright" @click="slideHandle(++imgIndex)">
+        <img src="@/assets/images/jiantou2.png">
+      </a>
+    </div>
+
+    <div class="map-bottom-layout" :class="{mobile: ismobile}">
+      <div class="map-tabs clear" :class="{mobile: ismobile}" v-if="dmodel && dmodel.link">
+        <template v-if="ismobile">
+          <span v-if="mapTab === 1" @click="goto(dmodel)">
+            <i class="iconfont icon-leixing_hangpai"></i>航拍
+          </span>
+          <span v-if="mapTab === 0" @click="mapTab = 1 && goto(dmodel)">
+            <i class="iconfont icon-tuceng"></i>平面
+          </span>
+        </template>
+        <template v-else>
+          <a :class="{active: mapTab === 1}" class="rad">
+            俯视整个{{$route.params.title}}
+          </a>
+          <a @click="goto(dmodel)" :class="{active: mapTab === 0}" class="rad">
+            航拍视角
+          </a>
+        </template>
+      </div>
+
+      <div class="focus-info" v-if="info && ismobile">
+        <h3>{{info.name}}</h3>
+        <div class="tags">
+          <span>{{info.parent}}</span>
+        </div>
+        <div class="tags">
+          <span>{{info.tagType}}</span>
+        </div>
+        <p>{{info.address}}</p>
+        <div class="types">
+          <i v-for="type in info.showType" :key="type" class="iconfont" :class="'icon-'+type"></i>
+        </div>
+        <a @click="goto(info)" v-if="info.link || info.data">
+          <span>点击</span><span>参观</span>
+        </a>
+        <a class="nolink" v-else>
+          <span>正在</span><span>拍摄</span>
+        </a>
+      </div>
+    </div>
+
+    <imageQuery :screens="screens" @exitHandle="screens = null" />
+    <!-- <div class="image-dialog" v-if="screens">
+      <a @click="screens = null"><i class="iconfont icon-left"></i>返回</a>
+      <div class="image-layout">
+        <Slide :screens="screens" :current="0">
+          <i class="iconfont icon-left" slot="up"></i>
+          <img slot="item" slot-scope="{data}" :src="data" class="image-item">
+          <i class="iconfont icon-right" slot="next"></i>
+        </Slide>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import imageQuery from '@/pages/imageQuery'
+import browser from '@/util/browser'
+import data from '@/data'
+const AMap = global.AMap
+
+export default {
+  components: { imageQuery },
+  data () {
+    return {
+      cacheMakers: [],
+      showDialog: false,
+      imgIndex: 0,
+      mapTab: 1,
+      ismobile: browser.mobile,
+      info: null,
+      dmodel: {},
+      screens: null
+    }
+  },
+  methods: {
+    grentHtml (item, cls) {
+      var $maker = document.createElement('div')
+
+      if (!this.ismobile) {
+        var types = item.showType.map(type => `<i class="iconfont icon-${type}"></i>`)
+
+        if (item.link || item.data) {
+          $maker.classList.add('link')
+        } else {
+          $maker.classList.add('nolink')
+        }
+
+        $maker.classList.add('maker-info')
+        $maker.classList.add('rad')
+        cls && $maker.classList.add(cls)
+        $maker.innerHTML = `
+          <h3>
+            <i class="iconfont icon-${item.type}"></i>
+            <span>${item.name}</span>
+          </h3>
+          <div class="content">
+            <div><span>${item.parent}</span><span>${item.tagType}</span></div>
+            <p>${item.address}</p>
+            <div class="oper">
+              <div>${types.join('')}</div>
+              <a class='query-image'>${(item.link || item.data) ? '点击参观' : '正在拍摄'}</a>
+            </div>
+          </div>
+        `
+
+        if (item.data) {
+          $maker.querySelector('.query-image').addEventListener('click', () => {
+            this.queryImage(item)
+          })
+        }
+      } else {
+        console.log('???')
+        $maker.classList.add('maker-info-mobile')
+        $maker.innerHTML = `
+          <div>
+            <i class="iconfont icon-dingwei"></i>
+            <i class="icon-tub iconfont icon-${item.type}"></i>
+          </div>`
+      }
+      return $maker
+    },
+    loadding (item, showTitle) {
+      this.cacheMakers.forEach(marker => {
+        marker.seftadditional.removeSeft()
+      })
+
+      let showMaker
+      let markers = item.children.map(c => {
+        let maker = this.grentMakter([parseFloat(c.lng), parseFloat(c.lat)], c)
+        c.name === showTitle && (showMaker = maker)
+        return maker
+      })
+
+      this.cacheMakers = markers
+      showMaker && showMaker.seftadditional.play()
+    },
+    grentMakter (point, item) {
+      let infoWindow, infoDom
+      let show = false
+      let dom = this.grentHtml(item)
+      let position = new global.AMap.LngLat(Number(point[0]), Number(point[1]))
+      let marker = new global.AMap.Marker({
+        position: position,
+        content: dom,
+        offset: new global.AMap.Pixel(-80, -30)
+      })
+      let clickHandle = () => {
+        this.goto.bind(this)(item)
+      }
+
+      marker.seftadditional = {
+        removeSeft: () => {
+          marker.seftadditional.pause()
+          this.map.remove(marker)
+          if (!this.ismobile) {
+            infoDom.querySelector('h3').removeEventListener('click', marker.seftadditional.pause)
+            infoDom.querySelector('a').removeEventListener('click', clickHandle)
+          }
+        },
+        play: () => {
+          this.$bus.$emit('showMaker', dom)
+          if (this.ismobile) {
+            dom.classList.add('show')
+            this.info = item
+          } else {
+            infoWindow.open(this.map, position)
+          }
+          this.map.setCenter(position)
+          show = true
+        },
+        pause: () => {
+          if (!this.ismobile) {
+            infoWindow.close()
+          } else {
+            dom.classList.remove('show')
+            this.info = null
+          }
+          show = false
+        }
+      }
+
+      this.$bus.$on('showMaker', showDom => {
+        if (dom !== showDom) {
+          if (show) {
+            marker.seftadditional.pause()
+          }
+          show = false
+        }
+      })
+
+      global.AMap.event.addListener(marker, 'click', e => {
+        if (!show) {
+          this.$router.push({name: 'info', params: {title: this.$route.params.title, show: item.name}})
+          // marker.seftadditional.play()
+        } else {
+          this.$router.push({name: 'map', params: {title: this.$route.params.title}})
+          // marker.seftadditional.pause()
+        }
+      })
+
+      if (!this.ismobile) {
+        infoDom = this.grentHtml(item, 'show')
+        infoWindow = new AMap.InfoWindow({
+          content: infoDom
+        })
+        infoDom.querySelector('h3').addEventListener('click', () => {
+          this.$router.push({name: 'map', params: {title: this.$route.params.title}})
+          // marker.seftadditional.pause()
+        })
+        infoDom.querySelector('a').addEventListener('click', clickHandle)
+      }
+      this.map.add(marker)
+      return marker
+    },
+    initial () {
+      let params = this.$route.params
+      let item = this.dmodel = data.modules.find(item => item.title === params.title)
+      if (!item) {
+        item = data.types.find(item => item.title === params.title)
+      }
+      this.loadding(item, params.show)
+    },
+    goto (info) {
+      if (info.link) {
+        let id = null
+        Object.keys(data.data).forEach(key => {
+          if (data.data[key] === info) {
+            id = key
+          }
+        })
+        this.$router.push({name: 'external', params: {url: info.link, id: id}})
+      } else if (info.data) {
+        this.screens = info.data
+      }
+    },
+    queryImage (item) {
+      this.screens = item.data
+    }
+  },
+  watch: {
+    mapTab (newVal) {
+      if (newVal) {
+        this.map.remove(this.satellite)
+      } else {
+        this.map.add(this.satellite)
+      }
+    },
+    '$route.params.title': {
+      handler: function (newVal, oldVal) {
+        setTimeout(() => {
+          if (newVal !== oldVal) {
+            let params = this.$route.params
+            let item = data.modules.find(item => item.title === params.title)
+            if (!item) {
+              item = data.types.find(item => item.title === params.title)
+            }
+
+            this.map.setCenter(item.center)
+            this.map.setZoom(item.zoom)
+          }
+          this.initial()
+        })
+      },
+      immediate: true
+    },
+    '$route.params.show': function () {
+      this.initial()
+    }
+  },
+  mounted () {
+    this.map = new global.AMap.Map('map', {
+      mapStyle: 'amap://styles/fresh',
+      zoom: 18,
+      center: [113.590951, 22.359473]
+    })
+    this.satellite = new AMap.TileLayer.Satellite()
+    this.initial()
+  }
+}
+</script>
+
+<style scoped>
+@import url(./style);
+</style>
+
+<style>
+@import url(./map_style);
+</style>