feat: 增加首页

.babelrc

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

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintignore

+.DS_Store
+node_modules/
+/build/
+/config/
+/dist/
+/*.js
+

.eslintrc.js

+// 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.
+    // "standard",
+    "plugin:vue/essential",
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    "plugin:prettier/recommended"
+  ],
+  // required to lint *.vue files
+  plugins: ["vue", "prettier"],
+  // add your custom rules here
+  rules: {
+    "prettier/prettier": "error",
+    // allow async-await
+    "generator-star-spacing": "off",
+    "no-console": process.env.NODE_ENV === "production" ? 2 : 0,
+    "no-alert": process.env.NODE_ENV === "production" ? 2 : 0, //禁止使用alert confirm prompt
+    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
+    // --------------------静态检测-----------------------------
+    /**
+     * 静态检测：
+     * 以下基本位能够帮助发现代码错误的规则
+     * */
+    // 禁止与负零进行比较
+    "no-compare-neg-zero": 2,
+    // 禁止将常量作为 if 或三元表达式的测试条件，比如 if (true), let foo = 0 ? 'foo' : 'bar'
+    "no-constant-condition": [
+      2,
+      {
+        checkLoops: false
+      }
+    ],
+    // 禁止在函数参数中出现重复名称的参数 【辅助检测】
+    "no-dupe-args": 2,
+    // 禁止在对象字面量中出现重复名称的键名 【辅助检测】
+    "no-dupe-keys": 2,
+    // 禁止出现空代码块  【可读性差】
+    "no-empty": [
+      2,
+      {
+       "allowEmptyCatch": true
+      }
+    ],
+    // 禁止将 catch 的第一个参数 error 重新赋值  【重新赋值，error将没有意义】
+    "no-ex-assign": 2,
+    // @fixable 禁止函数表达式中出现多余的括号，比如 let foo = (function () { return 1 })  【一般不会这么写，可读性差】
+    "no-extra-parens": [2, "functions"],
+    // 禁止将一个函数申明重新赋值，如：
+    // function foo() {}
+    // foo = bar   [静态检测：无意义]
+    "no-func-assign": 2,
+    // 禁止在 if 内出现函数申明或使用 var 定义变量
+    "no-inner-declarations": [2, "both"],
+    // 禁止使用特殊空白符（比如全角空格），除非是出现在字符串、正则表达式或模版字符串中
+    "no-irregular-whitespace": [
+      2,
+      {
+        skipStrings: true,
+        skipComments: false,
+        skipRegExps: true,
+        skipTemplates: true
+      }
+    ],
+    // typeof 表达式比较的对象必须是 'undefined', 'object', 'boolean', 'number', 'string', 'function' 或 'symbol'
+    "valid-typeof": 2,
+    // -----------------------------------最佳实践----------------------------------------------
+    /**
+     * 最佳实践
+     * 这些规则通过一些最佳实践帮助你避免问题
+     */
+    // 禁止函数的循环复杂度超过 20，【https://en.wikipedia.org/wiki/Cyclomatic_complexity】
+    complexity: [
+      2,
+      {
+        max: 20
+      }
+    ],
+    // 不允许有空函数，除非是将一个空函数设置为某个项的默认值  【否则空函数并没有实际意义】
+    "no-empty-function": [
+      2,
+      {
+        allow: ["functions", "arrowFunctions"]
+      }
+    ],
+    // 禁止修改原生对象   【例如 Array.protype.xxx=funcion(){}，很容易出问题，比如for in 循环数组 会出问题】
+    "no-extend-native": 2,
+    // @fixable 表示小数时，禁止省略 0，比如 .5  【可读性】
+    "no-floating-decimal": 2,
+    // 禁止直接 new 一个类而不赋值 【 那么除了占用内存还有什么意义呢？ @off vue语法糖大量存在此类语义 先手动关闭】
+    "no-new": 0,
+    // 禁止使用 new Function，比如 let x = new Function("a", "b", "return a + b"); 【可读性差】
+    "no-new-func": 2,
+    // 禁止将自己赋值给自己    [规则帮助检测]
+    "no-self-assign": 2,
+    // 禁止将自己与自己比较 [规则帮助检测]
+    "no-self-compare": 2,
+    // @fixable 立即执行的函数必须符合如下格式 (function () { alert('Hello') })() 【立即函数写法很多，这个是最易读最标准的】
+    "wrap-iife": [
+      2,
+      "inside",
+      {
+        functionPrototypeMethods: true
+      }
+    ],
+    // 禁止使用保留字作为变量名 [规则帮助检测保留字，通常ide难以发现，生产会出现问题]
+    "no-shadow-restricted-names": 2,
+    // 禁止使用未定义的变量
+    "no-undef": [
+      2,
+      {
+        typeof: false
+      }
+    ],
+    // 定义过的变量必须使用   【正规应该是这样的，具体可以大家讨论】
+    "no-unused-vars": [
+      2,
+      {
+        vars: "all",
+        args: "none",
+        caughtErrors: "none",
+        ignoreRestSiblings: true
+      }
+    ],
+    // 变量必须先定义后使用   【ps:涉及到es6存在不允许变量提升的问题，以免引起意想不到的错误，具体可以大家讨论】
+    "no-use-before-define": [
+      2,
+      {
+        functions: false,
+        classes: false,
+        variables: false
+      }
+    ],
+    // ----------------------------------------------------代码规范----------------------------------------------------------
+    /**
+     * 代码规范
+     * 有关【空格】、【链式换行】、【缩进】、【=、{}、（）、首位空格】规范没有添加，怕大家一时间接受不了，目前所挑选的规则都是：保障我们的代码可读性、可维护性的
+     * */
+    // 变量名必须是 camelcase 驼峰风格的
+    // @off 【涉及到 很多 api 或文件名可能都不是 camelcase 先关闭】
+    camelcase: 0,
+    // @fixable 禁止在行首写逗号
+    "comma-style": [2, "last"],
+    // @fixable 一个缩进必须用两个空格替代
+    // @off 【不限制大家，为了关闭eslint默认值，所以手动关闭，off不可去掉】 讨论
+    indent: [2, 2,{ "SwitchCase": 1 }],
+    //@off 手动关闭//前面需要回车的规则  注释
+    "spaced-comment": 0,
+    //@off 手动关闭: 禁用行尾空白
+    "no-trailing-spaces": 2,
+    //@off 手动关闭: 不允许多行回车
+    "no-multiple-empty-lines": 1,
+    //@off 手动关闭: 逗号前必须加空格
+    "comma-spacing": 0,
+    //@off 手动关闭: 冒号后必须加空格
+    "key-spacing": 1,
+    // @fixable 结尾禁止使用分号
+    //@off [vue官方推荐无分号,不知道大家是否可以接受？先手动off掉] 讨论
+    //    "semi": [2,"never"],
+    semi: 0,
+    // 代码块嵌套的深度禁止超过 5 层
+    "max-depth": [1, 5],
+    // 回调函数嵌套禁止超过 4 层，多了请用 async await 替代
+    "max-nested-callbacks": [2, 4],
+    // 函数的参数禁止超过 7 个
+    "max-params": [2, 7],
+    // new 后面的类名必须首字母大写  【面向对象编程原则】
+    "new-cap": [
+      2,
+      {
+        newIsCap: true,
+        capIsNew: false,
+        properties: true
+      }
+    ],
+    // @fixable new 后面的类必须有小括号  【没有小括号、指针指过去没有意义】
+    "new-parens": 2,
+    // @fixable 禁止属性前有空格，比如 foo. bar() 【可读性太差，一般也没人这么写】
+    "no-whitespace-before-property": 2,
+    // @fixable 禁止 if 后面不加大括号而写两行代码   eg: if(a>b) a=0  b=0
+    "nonblock-statement-body-position": [
+      2,
+      "beside",
+      { overrides: { while: "below" } }
+    ],
+    // 禁止变量申明时用逗号一次申明多个 eg: let a,b,c,d,e,f,g = []   【debug并不好审查、并且没办法单独写注释】
+    "one-var": [2, "never"],
+    // @fixable 【变量申明必须每行一个，同上】
+    "one-var-declaration-per-line": [2, "always"],
+    //是否使用全等
+    eqeqeq: 0,
+    //this别名
+    "consistent-this": [2, "that"],
+    // -----------------------------ECMAScript 6-------------------------------------
+    /**
+     * ECMAScript 6
+     * 这些规则与 ES6 有关 【请大家 尝试使用正确使用const和let代替var，以后大家熟悉之后可能会提升规则】
+     * */
+    // 禁止对定义过的 class 重新赋值
+    "no-class-assign": 2,
+    // @fixable 禁止出现难以理解的箭头函数，比如 let x = a => 1 ? 2 : 3
+    "no-confusing-arrow": [2, { allowParens: true }],
+    // 禁止对使用 const 定义的常量重新赋值
+    "no-const-assign": 2,
+    // 禁止重复定义类
+    "no-dupe-class-members": 2,
+    // 禁止重复 import 模块
+    "no-duplicate-imports": 2,
+    //@off 以后可能会开启 禁止 var
+    "no-var": 0,
+    //  ---------------------------------被关闭的规则-----------------------
+    // parseInt必须指定第二个参数  parseInt("071",10);
+    radix: 0,
+    //强制使用一致的反勾号、双引号或单引号 (quotes) 关闭
+    quotes: 0,
+    //要求或禁止函数圆括号之前有一个空格
+    "space-before-function-paren": [0, "always"],
+    //禁止或强制圆括号内的空格
+    "space-in-parens": [0, "never"],
+    //关键字后面是否要空一格
+    "space-after-keywords": [0, "always"],
+    // 要求或禁止在函数标识符和其调用之间有空格
+    "func-call-spacing": [0, "never"]
+  }
+};

.gitignore

+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

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

.prettierrc

+{
+  "printWidth": 2800,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "insertPragma": false,
+  "jsxBracketSameLine": true,
+  "proseWrap": "preserve"
+}

README.md

+# api-gateway
+
+> API 网关前端代码
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8008
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+
+

build/build.js

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

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

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

build/vue-loader.conf.js

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

+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: "eslint-loader",
+  enforce: "pre",
+  include: [resolve("src"), resolve("test")],
+  options: {
+    fix: true,
+    formatter: require("eslint-friendly-formatter"),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+});
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: ["babel-polyfill", "./src/main.js"]
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  externals: {
+    'vue': 'Vue',
+    'vue-router': 'VueRouter',
+    'vuex': 'Vuex'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+      'components': resolve('src/components'),
+      'views': resolve('src/views')
+    }
+  },
+  module: {
+    rules: [
+      /* {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          fix: true,
+          formatter: require('eslint-friendly-formatter'),
+          emitWarning: !config.dev.showEslintErrorsInOverlay,
+        }
+      }, */
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.scss$/,
+        loaders: ["style", "css", "scss", "sass"]
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

+'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,
+      favicon: './favicon.ico'
+    }),
+    // 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

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

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

config/index.js

+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path');
+const proxyConfig = require('./proxyList');
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: proxyConfig.proxyList, //{}, //proxyConfig.proxyList,
+
+    // Various Dev Server settings
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: 'localhost',//'192.168.1.20',//
+    port: 8098, // 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: false,
+    // 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

+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

config/proxyList.js

+module.exports = {
+  proxyList: {
+    '/gateway-manage/': {
+      target: 'https://four.gicdev.com/gateway-manage/',
+      changeOrigin: true,
+      pathRewrite: {
+        '^/gateway-manage': ''
+      }
+    }
+  }
+}

dist/index.html

+<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>API网关管理平台</title><link href=./static/css/app.77abf7f22727f9303e0e263d3e44f54e.css rel=stylesheet></head><body style="min-width: 1400px;"><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script>// Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install();</script><script type=text/javascript src=./static/js/manifest.4d659aaf880002144911.js></script><script type=text/javascript src=./static/js/vendor.bb8c036d7dd62f4cb37a.js></script><script type=text/javascript src=./static/js/app.d9731092a9496b107621.js></script></body></html>
\ No newline at end of file

index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="./favicon.ico"/>
+    <title>达摩开放平台</title>
+  </head>
+  <body style="min-width: 1400px;" class="damolish">
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <!-- 公共库引用 cdn -->
+    <script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js"></script>
+    <!-- <script src="https://cdn.ravenjs.com/3.26.2/vue/raven.min.js" crossorigin="anonymous"></script> -->
+    <script>
+      // Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install();
+    </script>
+  </body>
+</html>

package.json

+{
+  "name": "api-gateway",
+  "version": "1.0.0",
+  "description": "api-gateway",
+  "author": "fairyly",
+  "private": false,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js",
+    "format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}",
+    "formater": "onchange \"test/**/*.js\" \"src/**/*.js\" \"src/**/*.vue\" -- prettier --write {{changed}}",
+    "version": "conventional-changelog -p angular -i changelog.md -s -r 0 && git add changelog.md"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "element-ui": "^2.6.3",
+    "file-saver": "^1.3.8",
+    "html2canvas": "^1.0.0-alpha.12",
+    "js-md5": "^0.7.3",
+    "jspdf": "^1.5.3",
+    "qrcodejs2": "0.0.2",
+    "requset": "0.0.1-security",
+    "script-loader": "^0.7.2",
+    "vue-clipboard2": "^0.2.0",
+    "xlsx": "^0.13.5"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "axios": "^0.18.0",
+    "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.11",
+    "es6-promise": "^4.2.6",
+    "eslint": "^4.15.0",
+    "eslint-config-prettier": "^3.6.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-prettier": "^3.0.1",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
+    "node-notifier": "^5.1.2",
+    "node-sass": "^4.9.0",
+    "onchange": "^5.2.0",
+    "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",
+    "prettier": "^1.16.4",
+    "rimraf": "^2.6.0",
+    "sass-loader": "^7.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-axios": "^2.1.1",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "vuedraggable": "^2.17.0",
+    "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

+<template>
+  <div id="app">
+    <transition name="fade" mode="out-in">
+      <router-view></router-view>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {};
+  }
+};
+</script>
+<style></style>

src/api/api.js

+import Vue from 'vue';
+// import axios from 'axios';
+import qs from 'qs';
+import { Message } from 'element-ui';
+
+Vue.axios.defaults.timeout = 25000;
+let local = window.location.origin;
+/* if (local.indexOf('localhost') != -1) {
+  local = 'http://www.gicdev.com';
+} */
+
+Vue.axios.interceptors.request.use(
+  config => {
+    return config;
+  },
+  err => {
+    Message.error({ message: '请求超时!' });
+    return Promise.resolve(err);
+  }
+);
+
+Vue.axios.interceptors.response.use(
+  data => {
+    // console.log(data);
+    if (data.status && data.status == 200 && data.data.code != '0000') {
+      // Message.error({message: data.data.message});
+      return data;
+    }
+    return data;
+  },
+  err => {
+    // Message.error({message: err.response.message});
+    if (err.response.status == 504 || err.response.status == 404) {
+      // Message.error({message: '服务异常⊙﹏⊙∥'});
+    } else if (err.response.status == 403) {
+      // Message.error({message: '权限不足,请联系管理员!'});
+    } else {
+      // Message.error({message: '未知错误!'});
+    }
+    return Promise.resolve(err);
+  }
+);
+
+/*
+ *
+ * 统一 get 请求方法
+ * @url: 请求的 url
+ * @params: 请求带的参数
+ * @header: 带 token
+ *
+ */
+export const getRequest = (url, params) => {
+  params.requestProject = 'api-gateway-web';
+  return Vue.axios({
+    method: 'get',
+    url: `${local}${url}`,
+    data: {},
+    params: params,
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded'
+    }
+  });
+};
+
+/**
+ *
+ * 统一 post 请求方法
+ * url: 请求的 url
+ * @params: 请求带的参数
+ * @header:
+ *
+ */
+export const postRequest = (url, params) => {
+  params.requestProject = 'api-gateway-web';
+  return Vue.axios({
+    method: 'post',
+    url: `${local}${url}`,
+    data: qs.stringify(params),
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded'
+    }
+  });
+};
+
+export const postJsonRequest = (url, params) => {
+  params.requestProject = 'api-gateway-web';
+  return Vue.axios({
+    method: 'post',
+    url: `${local}${url}`,
+    data: '{}',
+    params: params,
+    headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+  });
+};
+
+/**
+ * method: 'post'
+ * 'Content-Type': 'application/json;charset=UTF-8'
+ * @data: params
+ * @requestProject: 'api-gateway-web'
+ *
+ */
+export const postJson = (url, params) => {
+  // params.requestProject = "api-gateway-web";
+  return Vue.axios({
+    method: 'post',
+    url: `${local}${url}`,
+    data: params,
+    params: { requestProject: 'api-gateway-web' },
+    headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+  });
+};
+
+/**
+ *  method: 'post'
+ *  data: params
+ *
+ */
+export const postForm = (url, params) => {
+  params.requestProject = 'api-gateway-web';
+  return Vue.axios({
+    method: 'post',
+    url: `${local}${url}`,
+    data: params,
+    headers: {}
+  });
+};
+
+/**
+ * post excel
+ */
+
+export const postExcel = (url, params) => {
+  params.requestProject = 'api-gateway-web';
+  return Vue.axios({
+    method: 'post',
+    url: `${local}${url}`,
+    data: qs.stringify(params),
+    responseType: 'blob',
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded'
+    }
+  });
+};

src/api/index.js

+import * as api from './api';
+
+export default api;

src/assets/403_images/error_403.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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 400 335" style="enable-background:new 0 0 400 335;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FAFCFF;}
+	.st1{fill:#DBE5F1;}
+	.st2{fill:#DEE7F4;}
+	.st3{fill:#B9C7DB;}
+	.st4{fill:#FFFFFF;}
+	.st5{fill:none;stroke:#B9C7DB;stroke-width:4;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#B6C7D8;stroke-miterlimit:10;}
+</style>
+<path class="st5" d="M274.5,241.3c-5.3-5.3-4.4,4.4-6.7,6.7c-3.1,3.1-6.3,6-9.7,8.6H125.2c-3.4-2.7-6.6-5.6-9.7-8.7
+	c-28.4-28.5-38.6-70.5-26.6-109l-10.5-10.6c-5.3-5.3-5.3-13.8,0-19.2c5.2-5.3,13.7-5.3,19-0.1c0,0,0,0,0.1,0.1l6.6,6.8
+	c3.1,3.2,8.2,3.2,11.4,0l0,0c3.2-3.2,3.2-8.3,0-11.5L103.1,92c-3.2-3.2-3.2-8.3,0-11.5c3.1-3.2,8.2-3.2,11.4,0l0,0l17.2,17.2
+	c-0.9,3.7,0.9,7.6,4.4,9.3c3.5,1.7,7.7,0.6,9.9-2.5c2.3-3.1,2.1-7.4-0.5-10.3c-3.3-3.8-6.5-7.2-6.5-7.2l-7.3-7.4
+	c34.8-21.3,82.6-21.7,117.2,0c34.5,21.7,53.9,61.2,50,101.9l15.4,15.6c3.2,3.2,3.2,8.3,0,11.5c-3.1,3.2-8.2,3.2-11.4,0l0,0
+	l-15.1-15.3c-3.1-3.2-8.2-3.2-11.4,0l0,0c-3.2,3.2-3.2,8.3,0,11.5l17.1,17.2c5.2,5.3,5.2,13.8,0,19.1
+	C288.4,246.6,279.9,246.6,274.5,241.3C274.6,241.3,274.6,241.3,274.5,241.3L274.5,241.3z"/>
+<path class="st3" d="M86.6,71.4c0,4.7,3.8,8.5,8.5,8.5c1.5,0,3-0.4,4.3-1.1c4.1-2.3,5.5-7.5,3.1-11.6c-1.5-2.6-4.3-4.3-7.4-4.3
+	C90.4,62.9,86.6,66.7,86.6,71.4"/>
+<path class="st3" d="M216.4,145.4h24.3l-7.4,17.9c2.6,1.8,4.5,3.8,5.8,6c1.2,2.2,1.9,4.8,1.9,7.8c0,4.6-1.6,8.4-4.8,11.2
+	c-3.2,2.9-7.3,4.3-12.3,4.3c-2.5,0-5.1-0.4-7.5-1.1v-13.1c2,0.9,3.9,1.4,5.5,1.4s2.9-0.5,3.7-1.4c0.9-1,1.3-2.3,1.3-4.1
+	c0-1.9-0.8-3.4-2.4-4.6c-1.6-1.2-3.7-1.7-6.4-1.7l3.4-9.1h-5.1V145.4L216.4,145.4z M207.5,181.6c0,1.5-0.3,3-0.8,4.3
+	s-1.3,2.5-2.3,3.5s-2.2,1.8-3.4,2.3c-1.3,0.6-2.8,0.9-4.3,0.9h-9.6c-1.5,0-2.9-0.3-4.3-0.9c-1.3-0.6-2.5-1.3-3.4-2.3
+	c-0.4-0.4-0.8-0.9-1.2-1.4l11.7-17.3v6c0,0.6,0.2,1.1,0.6,1.4c0.4,0.4,0.8,0.6,1.4,0.6c1.1,0,2-0.8,2-1.9v-0.1v-11.9l10.9-16.1
+	c1.8,2,2.8,4.6,2.7,7.3L207.5,181.6L207.5,181.6L207.5,181.6z M177.1,185.9c-0.6-1.4-0.9-2.8-0.8-4.3V156c0-1.5,0.3-3,0.8-4.3
+	s1.3-2.5,2.3-3.5s2.2-1.8,3.4-2.3c1.3-0.6,2.8-0.9,4.3-0.9h9.6c1.5,0,2.9,0.3,4.3,0.9c1.3,0.5,2.4,1.3,3.4,2.3l-10.5,15.4v-2.7
+	c0-0.5-0.2-1.1-0.6-1.4c-0.4-0.4-0.9-0.6-1.4-0.6c-1.1,0-2,0.8-2,1.9v0.1v8.6l-12.1,17.9C177.5,186.9,177.3,186.4,177.1,185.9
+	L177.1,185.9z M243.8,192.7c3.5-7.4,5.3-15.5,5.3-23.7c0-30.5-24.4-55.2-54.6-55.2s-54.6,24.7-54.6,55.2c0,0.4,0,0.8,0,1.1
+	l19.6-24.6h11.4L154,171.3h5.5v-6.5l11.7-18.5v46.8h-11.7v-9.8h-17.8c5.1,19.2,20.1,34.3,39.2,39.2c-1.2,3.1-4.8,10.7-10.7,12
+	c-7.3,1.7,19.9,0.4,39.4-12.5c14.9-4.4,27.2-15,33.9-28.9L243.8,192.7L243.8,192.7z"/>
+<path class="st4" d="M238.9,154.3l-24.4,35.4l0.5,0.3l24.4-35.4L238.9,154.3z"/>
+<path class="st3" d="M266.2,66.6h8c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.4-0.1,0.7-0.4,1c-0.2,0.3-0.6,0.4-0.9,0.4h-8
+	c-0.4,0-0.7-0.1-0.9-0.4c-0.5-0.5-0.5-1.4,0-1.9C265.5,66.7,265.8,66.6,266.2,66.6 M116.5,201.9c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
+	s8-3.6,8-8.1S120.9,201.9,116.5,201.9L116.5,201.9z M121.4,212.1c-0.8,2-2.8,3.3-4.9,3.3c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.1,3.3-5
+	c2-0.8,4.3-0.4,5.8,1.2C121.8,207.7,122.2,210,121.4,212.1L121.4,212.1z M191.3,78.7c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
+	c2.1,0,4.2-0.9,5.7-2.4s2.3-3.6,2.3-5.7C199.3,82.4,195.7,78.7,191.3,78.7z M196.3,88.9c-0.8,2-2.8,3.3-4.9,3.3
+	c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2C196.6,84.6,197.1,86.9,196.3,88.9L196.3,88.9z M270.2,162.6
+	c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1s8-3.6,8-8.1C278.2,166.3,274.6,162.6,270.2,162.6z M275.1,172.8c-0.8,2-2.8,3.3-4.9,3.3
+	c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2S275.9,170.8,275.1,172.8z M230.1,31.4c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
+	c2.1,0,4.2-0.9,5.7-2.4s2.3-3.6,2.3-5.7C238.1,35,234.5,31.4,230.1,31.4z M235,41.6c-0.8,2-2.8,3.3-4.9,3.3c-3,0-5.3-2.4-5.3-5.4
+	c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2C235.4,37.2,235.8,39.5,235,41.6z"/>
+<path class="st3" d="M163.2,45.9h8.2c0.4,0,0.7,0.1,1,0.4c0.5,0.5,0.5,1.3,0,1.9l0,0c-0.3,0.3-0.6,0.4-1,0.4h-8.2
+	c-0.4,0-0.7-0.1-1-0.4c-0.5-0.5-0.5-1.3,0-1.9l0,0C162.4,46.1,162.8,45.9,163.2,45.9 M271.7,63.5v8c0,0.4-0.1,0.7-0.4,0.9
+	c-0.3,0.3-0.6,0.4-1,0.4c-0.7,0-1.4-0.6-1.4-1.3l0,0v-8c0-0.4,0.1-0.7,0.4-0.9c0.5-0.5,1.4-0.5,1.9,0
+	C271.6,62.8,271.7,63.2,271.7,63.5"/>
+<path class="st3" d="M107.4,154.8h8.2c0.4,0,0.7,0.1,1,0.4c0.3,0.2,0.4,0.6,0.4,0.9c0,0.7-0.6,1.3-1.4,1.3h-8.2
+	c-0.5,0-0.9-0.3-1.2-0.7c-0.2-0.4-0.2-0.9,0-1.3C106.4,155.1,106.9,154.8,107.4,154.8 M169,42.7v8c0,0.4-0.1,0.7-0.4,0.9
+	c-0.5,0.5-1.4,0.5-2,0c-0.2-0.2-0.4-0.6-0.4-0.9v-8c0-0.4,0.1-0.7,0.4-0.9c0.5-0.5,1.4-0.5,1.9,0C168.8,42,169,42.3,169,42.7"/>
+<path class="st3" d="M230.9,110.3h8.1c0.7,0,1.3,0.6,1.3,1.4c0,0.7-0.6,1.3-1.3,1.4h-8.1c-0.8,0-1.4-0.6-1.4-1.4
+	c0-0.4,0.1-0.7,0.4-1C230.2,110.4,230.6,110.3,230.9,110.3"/>
+<path class="st3" d="M114.6,163.8v8.2c0,0.4-0.1,0.7-0.4,1c-0.5,0.5-1.4,0.5-1.9,0c-0.3-0.3-0.4-0.6-0.4-1v-8.2c0-0.4,0.1-0.7,0.4-1
+	c0.5-0.5,1.4-0.5,1.9,0l0,0C114.4,163.1,114.6,163.4,114.6,163.8"/>
+<path class="st1" d="M126,272.7h60.4c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.4H126c-0.7,0-1.3-0.6-1.3-1.3
+	C124.7,273.3,125.3,272.7,126,272.7"/>
+<path class="st1" d="M218.6,272.7h34.9c0.7,0,1.3,0.6,1.3,1.3c0,0.7-0.6,1.3-1.3,1.3h-34.9c-0.7,0-1.3-0.6-1.4-1.3
+	c0-0.4,0.1-0.7,0.4-1C217.9,272.9,218.2,272.7,218.6,272.7"/>
+<path class="st1" d="M158.2,282.2h131.5c0.7,0,1.3,0.6,1.4,1.3c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H158.2
+	c-0.7,0-1.3-0.6-1.3-1.3l0,0C156.9,282.8,157.5,282.2,158.2,282.2"/>
+<path class="st1" d="M93.8,282.2h34.9c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.4l0,0H93.8c-0.7,0-1.3-0.6-1.4-1.3
+	c0-0.4,0.1-0.7,0.4-1C93.1,282.3,93.5,282.2,93.8,282.2"/>
+<path class="st1" d="M197.1,272.7h8.1c0.7,0,1.3,0.6,1.3,1.3c0,0.7-0.6,1.3-1.3,1.3h-8.1c-0.7,0.1-1.4-0.5-1.4-1.3
+	c-0.1-0.7,0.5-1.4,1.3-1.4C197,272.7,197.1,272.7,197.1,272.7"/>
+<path class="st1" d="M284.4,264.6h8.1c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.3h-8.1c-0.7,0-1.3-0.6-1.3-1.3
+	C283,265.3,283.6,264.6,284.4,264.6"/>
+<path class="st1" d="M99.2,264.6h171.7c0.4,0,0.7,0.1,0.9,0.4c0.4,0.4,0.5,1,0.3,1.5c-0.2,0.5-0.7,0.8-1.2,0.8H99.1
+	c-0.7,0-1.3-0.6-1.3-1.3C97.8,265.3,98.4,264.6,99.2,264.6"/>
+<path class="st3" d="M235,95.8v8.1c0,0.7-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3v-8.1c0-0.7,0.6-1.3,1.3-1.4C234.4,94.4,235,95,235,95.8"
+	/>
+</svg>

src/assets/js/error.js

+/* 后台返回消息提示 */
+import { Message } from 'element-ui';
+
+// 后台返回异常提示
+export default {
+  errorMsg: function(response) {
+    let local = window.location.origin;
+    /* if (local.indexOf('localhost') != -1) {
+      local = 'http://www.gicdev.com';
+    } */
+    if (response.code != '0000') {
+      Message.error({
+        duration: 1000,
+        message: response.message
+      });
+      if (response.code == '2003') {
+        window.location.href = local + '/gateway-web/#/index';
+        return false;
+      }
+    }
+  }
+};

src/assets/js/public.js

+// 防抖
+export function _debounce(fn, delay) {
+  var delay = delay || 200;
+  var timer;
+  // console.log(fn)
+  return function() {
+    var that = this;
+    var args = arguments;
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(function() {
+      timer = null;
+      fn.apply(that, args);
+    }, delay);
+  };
+}
+// 节流
+export function _throttle(fn, interval) {
+  var last;
+  var timer;
+  var interval = interval || 200;
+  return function() {
+    var that = this;
+    var args = arguments;
+    var now = +new Date();
+    if (last && now - last < interval) {
+      clearTimeout(timer);
+      timer = setTimeout(function() {
+        last = now;
+        fn.apply(that, args);
+      }, interval);
+    } else {
+      last = now;
+      fn.apply(that, args);
+    }
+  };
+}
+
+/**
+ * 手机号格式化
+ * @param {String} phone
+ */
+export function formatPhone(phone) {
+  phone = phone.toString();
+  return phone.substr(0, 3) + '****' + phone.substr(7, 11);
+}
+
+/**
+ * 时间戳格式化
+ */
+
+function formatDig(num) {
+  return num > 9 ? '' + num : '0' + num;
+}
+export function formatDate(time) {
+  let now = new Date(time);
+  let year = now.getFullYear();
+  let month = now.getMonth() + 1;
+  let date = now.getDate();
+  let hour = now.getHours();
+  let minute = now.getMinutes();
+  let second = now.getSeconds();
+  let data = year + '-' + formatDig(month) + '-' + formatDig(date) + ' ' + formatDig(hour) + ':' + formatDig(minute) + ':' + formatDig(second);
+  return data;
+}
+
+/**
+ *  千位分割
+ */
+export function formatNum(num) {
+  let number = num.toString().split('.'); // 分隔小数点
+  let dot = '0.' + (number[1] || 0);
+  var reg = /\d{1,3}(?=(\d{3})+$)/g;
+  return (
+    (number[0] + '').replace(reg, '$&,') +
+    '.' +
+    Number(dot)
+      .toFixed(2)
+      .toString()
+      .split('.')[1]
+  );
+}
+
+/**
+ * 重复判断
+ */
+export function isRepeat(arr) {
+  let hash = {};
+  for (let i in arr) {
+    if (hash[arr[i]]) {
+      return true;
+    }
+    hash[arr[i]] = true;
+  }
+  return false;
+}

src/assets/js/showmsg.js

+/* 消息提示 */
+import { Message } from 'element-ui';
+
+export default {
+  showmsg: function(msg, type) {
+    Message({
+      duration: 1000,
+      message: msg,
+      type: type
+    });
+  }
+};

src/assets/js/strlen.js

+/**
+ * 判断字符长度
+ * @param: str
+ */
+
+export default {
+  /**
+   * 一个汉字算两个字符,一个英文字母或数字算一个字符
+   */
+  getByteLen: function(val) {
+    let valStr = val == '' || val == null ? '' : val;
+    let len = 0;
+    for (let i = 0; i < valStr.length; i++) {
+      let a = valStr.charAt(i);
+      if (a.match(/[^\x00-\xff]/gi) != null) {
+        len += 2;
+      } else {
+        len += 1;
+      }
+    }
+    return len;
+  },
+  /**
+   * 一个汉字算一个字,一个英文字母或数字算半个字
+   */
+  getZhLen: function(val) {
+    let valStr = val == '' || val == null ? '' : val;
+    let len = 0;
+    for (let i = 0; i < valStr.length; i++) {
+      let a = valStr.charAt(i);
+      if (a.match(/[^\x00-\xff]/gi) != null) {
+        len += 1;
+      } else {
+        len += 0.5;
+      }
+    }
+    return Math.ceil(len);
+  },
+
+  /*暂无用*/
+  cutStr: function(str, len, type) {
+    let char_length = 0;
+    for (let i = 0; i < str.length; i++) {
+      let son_str = str.charAt(i);
+      if (type == 1) {
+        encodeURI(son_str).length > 2 ? (char_length += 1) : (char_length += 0.5);
+      }
+      if (type == 2) {
+        char_length += 1;
+      }
+      if (char_length >= len) {
+        let sub_len = char_length == len ? i + 1 : i;
+        return str.substr(0, sub_len);
+      }
+    }
+  },
+
+  /**
+   * 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
+   */
+  getByteVal: function(val, max) {
+    let valStr = val == '' || val == null ? '' : val;
+    let returnValue = '';
+    let byteValLen = 0;
+    for (let i = 0; i < valStr.length; i++) {
+      if (valStr[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
+      else byteValLen += 0.5;
+      if (byteValLen > max) break;
+      returnValue += valStr[i];
+    }
+    return returnValue;
+  },
+
+  /**
+   * 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符
+   */
+  getCharVal: function(val, max) {
+    let valStr = val == '' || val == null ? '' : val;
+    let returnValue = '';
+    let byteValLen = 0;
+    for (let i = 0; i < valStr.length; i++) {
+      if (valStr[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 2;
+      else byteValLen += 1;
+      if (byteValLen > max) break;
+      returnValue += valStr[i];
+    }
+    return returnValue;
+  },
+
+  /**
+   * 正则校验,校验非负数字
+   */
+  regPos: function(v) {
+    let regTest = /^\d+(\.\d+)?$/;
+    return regTest.test(v);
+  }
+};

src/assets/js/timeFormat.js

+
+/*
+ * 时间日期转换
+ * @param: "10:00-22:00"/ new Date()
+ */
+
+export default {
+  /*
+  * var storeBusinessTime="10:00-22:00"  to
+  */
+  timeToDate: function(val) {
+    var date = new Date()
+    var y = date.getFullYear();
+    var m = date.getMonth() +1;
+    var day = date.getDate();
+
+    var d = [],newArr = [];
+    var dArr = val.split('-');
+    dArr.forEach(function(ele,index){
+      newArr.push(ele.split(':'))
+    })
+    d = [new Date(y,m,day,newArr[0][0],newArr[0][1]),new Date(y,m,day,newArr[1][0],newArr[1][1])]
+    return d;
+  },
+
+
+
+  dateToTime(val) {
+    console.log(val)
+    //  (0-9)年月数字的显示
+    function formatDig(num) {
+      return num > 9 ? '' + num : '0' + num;
+    }
+    var t;
+    var t1 = formatDig(new Date(val[0]).getHours())+':'+formatDig(new Date(val[0]).getMinutes())
+    var t2 = formatDig(new Date(val[1]).getHours())+':'+formatDig(new Date(val[1]).getMinutes())
+    t= t1+'-'+t2
+    return t;
+  }
+}

src/assets/js/util.js

+var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
+var DEFAULT_PATTERN = 'yyyy-MM-dd';
+function padding(s, len) {
+    var len = len - (s + '').length;
+    for (var i = 0; i < len; i++) { s = '0' + s; }
+    return s;
+};
+
+export default {
+    getQueryStringByName: function (name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        var r = window.location.search.substr(1).match(reg);
+        var context = "";
+        if (r != null)
+            context = r[2];
+        reg = null;
+        r = null;
+        return context == null || context == "" || context == "undefined" ? "" : context;
+    },
+    formatDate: {
+
+        format: function (date, pattern) {
+            pattern = pattern || DEFAULT_PATTERN;
+            return pattern.replace(SIGN_REGEXP, function ($0) {
+                switch ($0.charAt(0)) {
+                    case 'y': return padding(date.getFullYear(), $0.length);
+                    case 'M': return padding(date.getMonth() + 1, $0.length);
+                    case 'd': return padding(date.getDate(), $0.length);
+                    case 'w': return date.getDay() + 1;
+                    case 'h': return padding(date.getHours(), $0.length);
+                    case 'm': return padding(date.getMinutes(), $0.length);
+                    case 's': return padding(date.getSeconds(), $0.length);
+                }
+            });
+        },
+        parse: function (dateString, pattern) {
+            var matchs1 = pattern.match(SIGN_REGEXP);
+            var matchs2 = dateString.match(/(\d)+/g);
+            if (matchs1.length == matchs2.length) {
+                var _date = new Date(1970, 0, 1);
+                for (var i = 0; i < matchs1.length; i++) {
+                    var _int = parseInt(matchs2[i]);
+                    var sign = matchs1[i];
+                    switch (sign.charAt(0)) {
+                        case 'y': _date.setFullYear(_int); break;
+                        case 'M': _date.setMonth(_int - 1); break;
+                        case 'd': _date.setDate(_int); break;
+                        case 'h': _date.setHours(_int); break;
+                        case 'm': _date.setMinutes(_int); break;
+                        case 's': _date.setSeconds(_int); break;
+                    }
+                }
+                return _date;
+            }
+            return null;
+        }
+
+    }
+
+};

src/components/limit-input.vue

+<!--
+  限制输入框组件
+   <limitInput
+    :inputWidth="500"
+    :limitClass="'limit-color'"
+    :disflag='!childItem.fieldEdited'
+    :inputValue.sync="ruleForm.addressDetail"
+    :holder="'请输入详细地址'"
+    :getByType="'word'"
+    :maxLength="40">
+  </limitInput>
+ -->
+<template>
+  <div :class="['input-line-cell', limitClass]" :style="{ width: inputWidth + 'px' }">
+    <el-input :style="{ width: inputWidth + 'px' }" v-model="itemValue" :disabled="disflag" :placeholder="holder" @blur="inputBlur()" @focus="inputFocus()" @keyup.native="value => toInput(value)"> </el-input>
+    <span class="tip"
+      ><span class="len_span">{{ inputNum }}</span
+      >/{{ limitLength }}</span
+    >
+  </div>
+</template>
+<script>
+import strLength from '@/assets/js/strlen';
+export default {
+  name: 'limitinput',
+  props: {
+    // 传入 input value
+    inputValue: {
+      type: [String, Number],
+      default() {
+        return '';
+      }
+    },
+    // 限制长度
+    maxLength: {
+      type: Number,
+      default: 10
+    },
+    // input 长度
+    inputWidth: {
+      type: Number,
+      default: 500
+    },
+    // 字或字符判断类型
+    getByType: {
+      type: String,
+      default: 'word' // word: 字, char: 字符
+    },
+
+    holder: {
+      type: String,
+      default: '请输入'
+    },
+
+    disflag: {
+      type: Boolean,
+      default: false
+    },
+
+    limitClass: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      inputNum: 0,
+      limitLength: 10,
+      itemValue: ''
+    };
+  },
+  methods: {
+    /* eslint-disable */
+    inputFocus(num) {},
+    // 输入
+    toInput: function(value) {
+      const that = this;
+      let temp = '';
+      if (that.getByType == 'word') {
+        temp = strLength.getByteVal(value.target.value, that.limitLength);
+        that.itemValue = temp.trim();
+        that.inputNum = strLength.getZhLen(that.itemValue);
+      } else {
+        temp = strLength.getCharVal(value.target.value, that.limitLength);
+        that.itemValue = temp.trim();
+        that.inputNum = strLength.getByteLen(that.itemValue);
+      }
+      that.$emit('update:inputValue', that.itemValue);
+    },
+    inputBlur() {
+      const that = this;
+      that.$emit('update:inputValue', that.itemValue);
+    }
+  },
+  watch: {
+    maxLength: function(newData, oldData) {
+      const that = this;
+      that.limitLength = newData;
+    },
+    inputValue: function(newData, oldData) {
+      let that = this;
+      that.itemValue = newData || '';
+      if (that.getByType == 'word') {
+        that.inputNum = strLength.getZhLen(that.itemValue);
+      } else {
+        that.inputNum = strLength.getByteLen(that.itemValue);
+      }
+    }
+  },
+  /* 接收数据 */
+  mounted() {
+    let that = this;
+    that.limitLength = that.maxLength;
+    that.itemValue = that.inputValue || '';
+    if (that.getByType == 'word') {
+      that.inputNum = strLength.getZhLen(that.inputValue);
+    } else {
+      that.inputNum = strLength.getByteLen(that.inputValue);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.input-line-cell {
+  position: relative;
+  display: inline-block;
+
+  &.limit-color {
+    .tip {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}
+
+.w-340 {
+  width: 340px;
+  /deep/ .el-input__inner {
+    font-size: 14px;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+.el-input {
+  /deep/ .el-input__inner {
+    font-size: 14px;
+    color: #606266;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+  }
+
+  .is-disabled {
+    /deep/ .el-input__inner {
+      font-size: 14px;
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+.tip {
+  position: absolute;
+  top: 2px;
+  right: 10px;
+  display: inline-block;
+  line-height: 32px;
+  text-align: right;
+  font-size: 12px;
+  color: #c0c4cc;
+}
+</style>

src/components/limit-textarea.vue

+<!--
+  限制文本框组件
+  <limit-textarea
+    :inputWidth="500"
+    :inputValue.sync="ruleForm.addressDetail"
+    :holder="'请输入详细地址'"
+    :getByType="'word'"
+    :disinput=""
+    :maxLength="40">
+  </limit-textarea>
+ -->
+<template>
+  <div class="input-line-cell" :style="{ width: inputWidth + 'px' }">
+    <el-input :style="{ width: inputWidth + 'px' }" v-model="itemValue" :placeholder="holder" type="textarea" :rows="3" :disabled="disInput" @blur="inputBlur()" @focus="inputFocus()" @keyup.native="value => toInput(value)"> </el-input>
+    <span class="tip"
+      ><span class="len_span">{{ inputNum }}</span
+      >/{{ limitLength }}</span
+    >
+  </div>
+</template>
+<script>
+import strLength from '@/assets/js/strlen';
+export default {
+  name: 'limittextarea',
+  props: {
+    inputValue: {
+      // 传入 input value
+      type: String,
+      default: ''
+    },
+
+    maxLength: {
+      // 限制长度
+      type: Number,
+      default: 10
+    },
+
+    inputWidth: {
+      // input 长度
+      type: Number,
+      default: 500
+    },
+
+    getByType: {
+      // 字或字符判断类型
+      type: String,
+      default: 'word' // word: 字, char: 字符
+    },
+
+    holder: {
+      type: String,
+      default: '请输入'
+    },
+
+    disInput: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      inputNum: 0,
+      limitLength: 10,
+      itemValue: ''
+    };
+  },
+  methods: {
+    /* eslint-disable */
+    inputFocus(num) {},
+    // 输入
+    toInput: function(value) {
+      const that = this;
+      let temp = '';
+      if (that.getByType == 'word') {
+        temp = strLength.getByteVal(value.target.value, that.limitLength);
+        that.itemValue = temp.trim();
+        that.inputNum = strLength.getZhLen(that.itemValue);
+      } else {
+        temp = strLength.getCharVal(value.target.value, that.limitLength);
+        that.itemValue = temp.trim();
+        that.inputNum = strLength.getByteLen(that.itemValue);
+      }
+      that.$emit('update:inputValue', that.itemValue);
+    },
+    inputBlur() {
+      const that = this;
+      that.$emit('update:inputValue', that.itemValue);
+    }
+  },
+  watch: {
+    maxLength: function(newData, oldData) {
+      const that = this;
+      that.limitLength = newData;
+    },
+    inputValue: function(newData, oldData) {
+      const that = this;
+      that.itemValue = newData;
+      if (that.getByType == 'word') {
+        that.inputNum = strLength.getZhLen(that.itemValue);
+      }else {
+        that.inputNum = strLength.getByteLen(that.itemValue);
+      }
+    }
+  },
+  /* 接收数据 */
+  mounted() {
+    const that = this;
+    that.limitLength = that.maxLength;
+    that.itemValue = that.inputValue || '';
+    if (that.getByType == 'word') {
+      that.inputNum = strLength.getZhLen(that.inputValue);
+    }else {
+      that.inputNum = strLength.getByteLen(that.inputValue);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.input-line-cell {
+  position: relative;
+  display: inline-block;
+}
+
+.w-340 {
+  width: 340px;
+  /deep/ .el-input__inner {
+    font-size: 14px;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.el-textarea {
+  /deep/ .el-textarea__inner {
+    font-size: 14px;
+    color: #606266;
+    background-color: rgba(255, 255, 255, 0.1);
+    resize: none;
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+  }
+}
+
+.el-input {
+  .is-disabled {
+    /deep/ .el-input__inner {
+      font-size: 14px;
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+.tip {
+  position: absolute;
+  bottom: -4px;
+  right: 10px;
+  display: inline-block;
+  line-height: 32px;
+  text-align: right;
+  font-size: 12px;
+  color: #c0c4cc;
+}
+</style>

src/components/nav/nav-bread.vue

+<template>
+  <div class="nav-wrap boxbttom border-box">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <template v-for="(item, index) in navPath">
+        <template v-if="!!item.path">
+          <el-breadcrumb-item :key="'nav' + index" @click="changeRoute(item.path, item.relocation)">
+            <span class="el-breadcrumb__inner is-link" @click="changeRoute(item.path, item.relocation)">
+              {{ item.name
+              }}<!-- :to="{ path: item.path }" -->
+            </span>
+          </el-breadcrumb-item>
+        </template>
+        <template v-else>
+          <el-breadcrumb-item :key="'nav' + index">{{ item.name }}</el-breadcrumb-item>
+        </template>
+      </template>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script>
+import { postRequest } from '@/api/api';
+import errMsg from '@/assets/js/error';
+export default {
+  name: 'nav-bread',
+  data() {
+    return {
+      projectName: 'api-gateway-web' // 当前项目名
+    };
+  },
+  props: {
+    navPath: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    slotFlag: {
+      type: Boolean,
+      default: false
+    },
+    navtip: {
+      type: Boolean,
+      default: false
+    },
+    subNavText: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    changeRoute(path, relocation) {
+      let that = this;
+      if (relocation) {
+        window.location.href = path;
+      } else {
+        // 为了返回带参数
+        if (that.$route.fullPath.includes('?')) {
+          let hash = '?' + that.$route.fullPath.split('?')[1];
+          let newPath = path + hash;
+          that.$router.push(newPath);
+          return false;
+        }
+        that.$router.push(path);
+      }
+    },
+    // get nav path
+    getNavPath() {
+      let that = this;
+      let para = {
+        project: that.projectName,
+        path: that.$route.path.split('/')[1]
+      };
+
+      postRequest('/api-auth/get-current-memu-data', para)
+        .then(res => {
+          // console.log(res,res.data,res.data.errorCode)
+          var resData = res.data;
+          if (resData.errorCode == 0) {
+            if (!resData.result) {
+              return false;
+            }
+
+            that.navpath = [];
+            if (!!resData.result.list && !!resData.result.list.length) {
+              resData.result.list.forEach(function(ele, index) {
+                ele.name = ele.menuName;
+                ele.path = '';
+                if (index == resData.result.list.length - 1) {
+                  ele.path = '/' + ele.menuUrl;
+                }
+
+                if (index > 0) {
+                  that.navpath.push(ele);
+                }
+              });
+
+              // that.navpath = resData.result.list
+            }
+
+            // that.navpath[0].name = resData.result.level2.menuName;
+            // that.navpath[0].path = ''
+
+            // that.navpath[1].name = resData.result.level3.menuName;
+            // that.navpath[1].path = ''
+            // if (!!resData.result.level4) {
+            //   that.navpath[2] = {
+            //     name:'',
+            //     path: ''
+            //   }
+            //   that.navpath[2].name = resData.result.level4.menuName;
+            //   that.navpath[2].path = ''
+            // }
+
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          // that.toLogin()
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    }
+  },
+  /* eslint-disable */
+  mounted() {
+    // var that = this;
+    // that.getNavPath();
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.nav-wrap {
+  padding: 12px 0 0 21px;
+  height: 40px;
+  background-color: #fff;
+  border-radius: 2px;
+}
+.boxbttom {
+  border-bottom: 1px solid #e4e7ed;
+}
+.boxshow {
+  border-bottom: 1px solid #e4e7ed;
+  box-shadow: 5px -1px 5px #dfdfdf;
+}
+.navtitle {
+  margin: 24px 0 0 0;
+  font-size: 20px;
+  color: #303133;
+  font-weight: 500;
+}
+.navtip {
+  width: 100%;
+  height: 38px;
+  line-height: 38px;
+  font-size: 13px;
+  border-radius: 2px;
+  color: #606266;
+  background-color: #f4f4f5;
+}
+.navmTop {
+  margin-top: 25px;
+}
+.navtipcolor {
+  margin: 0 12px;
+  color: #1890ff;
+}
+
+.el-breadcrumb__item:last-child .el-breadcrumb__inner,
+.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
+.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
+.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+  color: #303133;
+}
+.el-breadcrumb__item:last-child {
+  /deep/.el-breadcrumb__inner {
+    font-weight: 700;
+    color: #303133;
+  }
+}
+.el-breadcrumb__inner.is-link {
+  font-weight: 500;
+  color: #606266;
+}
+</style>

src/components/single-upload.vue

+<!--
+  单个上传组件
+   <single-upload
+    :imgSrc.sync=""
+    :field="''">
+  </single-upload>
+ -->
+<template>
+  <div class="single-upload-wrap">
+    <el-upload class="avatar-uploader" :action="uploadUrl()" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+      <img v-if="imgSrc" :src="imgSrc" class="avatar" @mouseover="showImage(imgSrc)" />
+      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+    <p class="upload-tip w-500" v-if="field == 'businessCard'">
+      上传营业执照复印件加盖公章，手写“仅用于好办认证”字样；照片搜索信息要求清晰可见，内容真实有效，不得做任何修改；支持jpp、jpeg、bmg、gif、png格式，大小不超过8M。
+    </p>
+    <p class="upload-tip w-500" v-if="field == 'cardUrl'">
+      支持jpg、jpeg、pdf、bmg、gif格式照片，大小不超过2M，只能上传一张，再次上传覆盖前一张
+    </p>
+    <p class="upload-tip w-500" v-if="field == 'authUrl'">点击可以<a class="color-1890ff" href="https://other-1251519181.cos.ap-shanghai.myqcloud.com/doc/20190529092413/好办认证授权书.docx" download="好办认证授权书.docx">下载授权书</a>模板，支持jpg、jpeg、pdf、bmg、gif格式照片，大小不超过2M，只能上传一张，再次上传覆盖前一张</p>
+    <!-- 图片预览 -->
+    <vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
+  </div>
+</template>
+<script>
+// import strLength from '@/common/js/strlen';
+// import showMsg from '@/common/js/showmsg';
+import errMsg from '@/common/js/error';
+// import { _debounce } from '@/common/js/public';
+// import { getRequest } from '@/api/api';
+export default {
+  name: 'single-upload',
+  props: {
+    imgSrc: {
+      // 传入 input value
+      type: String,
+      default: ''
+    },
+    field: {
+      type: String,
+      default: ''
+    },
+    uploadLimit: {
+      type: Number,
+      default: 2
+    }
+  },
+  data() {
+    return {
+      projectName: '', // 当前项目名
+      imgShowFlag: false, // 是否弹框显示,true: 显示；false: 不显示
+      imgUrl: '' // 传递的图片 src
+    };
+  },
+  beforeMount() {
+    const that = this;
+    let host = window.location.origin;
+    if (host.indexOf('localhost') != -1) {
+      that.baseUrl = 'http://www.gicdev.com';
+    } else {
+      that.baseUrl = host;
+    }
+
+    // that.upUrl = that.baseUrl + '/api-plug/upload-img?wxFlag=1'
+  },
+  methods: {
+    /**
+     * 上传图片
+     */
+    uploadUrl() {
+      const that = this;
+      let host = window.location.origin;
+      let baseUrl;
+      if (host.indexOf('localhost') != '-1') {
+        baseUrl = 'http://www.gicdev.com';
+      } else {
+        baseUrl = host;
+      }
+
+      that.upUrl = baseUrl + '/haoban-manage-web/upload-img';
+      return that.upUrl;
+    },
+
+    /**
+     * 上传图片
+     */
+    handleAvatarSuccess(res, file, type) {
+      const that = this;
+      if (res.errorCode == 1) {
+        that.$emit('update:imgSrc', res.result[0].qcloudImageUrl);
+      } else {
+        errMsg.errorMsg(res);
+      }
+    },
+    beforeAvatarUpload(file) {
+      const that = this;
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp';
+      const isLt2M = file.size / 1024 / 1024 < that.uploadLimit;
+      // if (!isJPG) {
+      //   that.$message.error('上传头像图片只能是 JPG 格式!');
+      // }
+      if (!isLt2M) {
+        that.$message.error(`上传头像图片大小不能超过 ${that.uploadLimit}MB!`);
+      }
+      return (
+        isJPG &&
+        isLt2M &&
+        new Promise(function(resolve, reject) {
+          let reader = new FileReader();
+          reader.onload = function(event) {
+            let image = new Image();
+            image.onload = function() {
+              /* eslint-disable */
+              let width = this.width;
+              let height = this.height;
+              // if (width !== 750 && height !== 750){
+              //   that.$message.error('图片尺寸必须为750px*750px!');
+              //   reject();
+              // }
+              resolve();
+            };
+            image.src = event.target.result;
+            // that.$emit('update:imgSrc',event.target.result)
+          };
+          reader.readAsDataURL(file);
+        })
+      );
+    },
+
+    /**
+     * 上传图片预览
+     */
+    showImage(src) {
+      const that = this;
+      if (!src || src == '') {
+        return false;
+      }
+      that.imgShowFlag = true;
+      that.imgUrl = src;
+    },
+    hideImage(val) {
+      const that = this;
+      that.imgShowFlag = val;
+    }
+  }
+  // mounted() {}
+};
+</script>
+<style lang="less" scoped>
+.w-500 {
+  width: 500px;
+}
+.avatar-uploader {
+  /deep/ .el-upload {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    width: 180px;
+    height: 180px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+}
+
+/* flex */
+.flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.flex-1 {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.flex-column {
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+}
+
+.flex-row {
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
+}
+
+.flex-align-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.flex-pack-center {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 180px;
+  height: 180px;
+  line-height: 180px;
+  text-align: center;
+}
+.avatar {
+  max-width: 180px;
+  max-height: 180px;
+  display: block;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  color: #606266;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.color-1890ff {
+  color: #1890ff;
+}
+</style>

src/components/vue-api-aside.vue

+<!--
+<vue-api-aside :activeSelTab="activeSelTab" @setSelectTab="setSelectTab"></vue-api-aside>
+import vueApiAside from '@/components/vue-api-aside.vue';
+
+activeSelTab: ''
+
+
+-->
+<template>
+  <div class="api-body-left border-box">
+    <ul class="tab-left-list border-box">
+      <template v-for="(item, index) in leftMenuData">
+        <li :class="['tab-left-list-cell color-606266 font-14 border-box my-first-level', item.tabCode == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item, false, index)">
+          <i :class="['iconfont tab-icon', item.tabIcon, !!item.onlyIconActive ? 'iconActive' : '']"></i>{{ item.tabName }}
+          <!-- <i v-if="!!item.children && !!item.children.length" :class="[!!item.collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i> -->
+        </li>
+        <ul class="child-tab-left-list" :key="'childitem' + index" v-if="item.collapsFlag">
+          <template v-for="(childitem, childIndex) in item.children">
+            <li :class="['tab-left-list-cell color-606266 font-14 border-box', childitem.tabCode == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem, 'child', index)">{{ childitem.tabName }}</li>
+          </template>
+        </ul>
+      </template>
+    </ul>
+  </div>
+</template>
+<script>
+import { getRequest } from '@/api/api';
+export default {
+  name: 'vue-api-aside',
+  props: {
+    activeSelTab: {
+      type: String,
+      default() {
+        return '1';
+      }
+    }
+  },
+  data() {
+    return {
+      activeTab: this.activeSelTab,
+      leftMenuData: [
+        {
+          tabId: 1,
+          tabCode: 1,
+          tabName: '概览',
+          tabIcon: 'icongailan-',
+          collapsFlag: false,
+          tabUrl: '/overview',
+          children: []
+        },
+        {
+          tabId: 2,
+          tabCode: 2,
+          tabName: 'API管理',
+          tabIcon: 'iconapi',
+          collapsFlag: true,
+          tabUrl: '/apiProgram',
+          children: [
+            {
+              tabId: 21,
+              tabCode: 21,
+              tabName: '项目列表',
+              tabIcon: '',
+              tabUrl: '/apiProgram'
+            },
+            {
+              tabId: 22,
+              tabCode: 22,
+              tabName: 'API列表',
+              tabIcon: '',
+              tabUrl: '/apiList'
+            }
+          ]
+        },
+        {
+          tabId: 3,
+          tabCode: 3,
+          tabName: '环境管理',
+          tabIcon: 'iconhuanjingguanli',
+          collapsFlag: false,
+          tabUrl: '/envManage',
+          children: []
+        },
+        {
+          tabId: 4,
+          tabCode: 4,
+          tabName: '发布记录',
+          tabIcon: 'iconfabu',
+          collapsFlag: false,
+          tabUrl: '/releaseRecords',
+          children: []
+        },
+        {
+          tabId: 5,
+          tabCode: 5,
+          tabName: '插件管理',
+          tabIcon: 'iconchajianguanli',
+          collapsFlag: false,
+          tabUrl: '/pluginManage',
+          children: []
+        },
+        {
+          tabId: 6,
+          tabCode: 6,
+          tabName: '错误码',
+          tabIcon: 'iconcuowu',
+          collapsFlag: false,
+          tabUrl: '/errorCode',
+          children: []
+        },
+        {
+          tabId: 7,
+          tabCode: 7,
+          tabName: '预警系统',
+          tabIcon: 'iconRectangleCopy',
+          collapsFlag: false,
+          tabUrl: '/',
+          children: []
+        },
+        {
+          tabId: 8,
+          tabCode: 8,
+          tabName: '日志管理',
+          tabIcon: 'iconrizhiguanli',
+          collapsFlag: false,
+          tabUrl: '/',
+          children: []
+        },
+        {
+          tabId: 9,
+          tabCode: 9,
+          tabName: '权限管理',
+          tabIcon: 'iconquanxian',
+          collapsFlag: false,
+          tabUrl: '/',
+          children: []
+        }
+      ]
+    };
+  },
+  methods: {
+    /**
+     * 选择后触发方法，返回 code
+     */
+    selectTab(item, flag, index) {
+      let that = this;
+      if (!!flag) {
+        that.leftMenuData[index].onlyIconActive = true;
+      } else {
+        that.leftMenuData.forEach(ele => {
+          ele.onlyIconActive = false;
+        });
+        item.collapsFlag = !!item.collapsFlag && item.hasOwnProperty('children') && item.children.length > 0 ? false : true;
+        that.$forceUpdate();
+      }
+      // 判断已选 item, 判断只让 icon 变色
+      if (item.hasOwnProperty('children') && item.children.length > 0) {
+        that.leftMenuData[index].onlyIconActive = true;
+        if (item.children[0].hasOwnProperty('children') && item.children[0].hasOwnProperty('children').length > 0) {
+          that.activeTab = item.children[0].children[0].tabCode;
+          that.$emit('setSelectTab', item);
+          return false;
+        }
+        that.activeTab = item.children[0].tabCode;
+        that.$emit('setSelectTab', item);
+        return false;
+      }
+      that.activeTab = item.tabCode;
+      that.$emit('setSelectTab', item);
+    },
+    /**
+     *  获取左侧菜单
+     */
+    getLeftMenu() {
+      const that = this;
+      let para = {
+        project: that.repProjectName,
+        router: that.pathName,
+        requestProject: that.repProjectName
+      };
+      getRequest('/haoban-manage-web/menu-detail', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            if (!resData.result) {
+              that.$message.error({
+                duration: 1000,
+                message: '暂无数据'
+              });
+              return;
+            }
+            return;
+          }
+          that.$message.error({
+            duration: 1000,
+            message: resData.message
+          });
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(val, oldVal) {},
+      // 深度观察监听
+      deep: true
+    },
+    activeSelTab: function(val, oldVal) {
+      this.activeTab = val;
+    }
+  },
+
+  /* 接收数据 */
+  mounted() {
+    const that = this;
+    that.activeTab = that.activeSelTab;
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.tab-left-list {
+  .tab-icon {
+    padding-right: 10px;
+    display: inline-block;
+    vertical-align: middle;
+    &.iconRectangleCopy {
+      width: 16px;
+      font-size: 20px;
+    }
+    &.icongailan- {
+      font-size: 14px;
+    }
+  }
+  li {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .tab-left-list-cell {
+    position: relative;
+    text-align: left;
+    height: 40px;
+    line-height: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    color: #909399;
+    &.my-first-level {
+      padding: 0 0 0 30px;
+    }
+    .iconActive {
+      color: #5584ff;
+    }
+    &:hover {
+      color: #5584ff;
+      background: #f5f7fa;
+      i {
+        color: #5584ff;
+      }
+    }
+    &.active-tab {
+      color: #5584ff;
+      background: #f5f7fa;
+      /* &::before {
+        content: ' ';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: #5584ff;
+        z-index: 1;
+      } */
+      i {
+        color: #5584ff;
+      }
+    }
+  }
+  .child-tab-left-list {
+    -webkit-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    li {
+      position: relative;
+      text-align: left;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 0 0 55px;
+      white-space: nowrap;
+      overflow: hidden;
+      cursor: pointer;
+
+      &:hover {
+        color: #5584ff;
+        background: #f5f7fa;
+        i {
+          color: #5584ff;
+        }
+      }
+      &.active-tab {
+        color: #5584ff;
+        background: #f5f7fa;
+        /* &::before {
+          content: ' ';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          background: #5584ff;
+          z-index: 1;
+        } */
+        i {
+          color: #5584ff;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/vue-open-footer.vue

+<template>
+  <div class="home-footer-content">
+    <div class="home-footer">
+      <div class="home-footer-body flex flex-space-between">
+        <div class="home-footer-left">
+          <a class="demogic" href="javascript:;">
+            <img src="../assets/demogic.png" draggable="false" />
+          </a>
+          <p class="fonr-14 color-9ba5b4 m-t-9">浙江达摩网络科技有限公司</p>
+          <div class="qrcode-content m-t-30 font-0">
+            <template v-for="(item, index) in qrcodeList">
+              <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper" :key="index + 'qrcode'">
+                <img :src="item.img_qrcode" alt="" style="width: 70px" />
+                <span slot="reference" :class="[index != 0 ? 'qrcode-popper' : '']">
+                  <img class="qrcode-wx qrcode-common-img font-12" :src="activeIndex == index ? item.img_active : item.img" alt="" @blur="changeIndex" @click="changeSrc(item, index)" />
+                </span>
+              </el-popover>
+            </template>
+            <!-- <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper">
+              <img src="../assets/index/wx_qrcode.png" alt="" style="width: 70px" />
+              <span slot="reference">
+                <img class="qrcode-wx qrcode-common-img font-12" src="../assets/index/wx.png" alt="" />
+              </span>
+            </el-popover>
+            <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper">
+              <img src="../assets/index/app_qrcode.png" alt="" style="width: 70px" />
+              <span slot="reference" class="qrcode-popper">
+                <img class="qrcode-wx qrcode-common-img font-12" src="../assets/index/iOS.png" alt="" />
+              </span>
+            </el-popover>
+            <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper">
+              <img src="../assets/index/app_qrcode.png" alt="" style="width: 70px" />
+              <span slot="reference" class="qrcode-popper">
+                <img class="qrcode-wx qrcode-common-img font-12" src="../assets/index/android.png" alt="" />
+              </span>
+            </el-popover> -->
+          </div>
+        </div>
+        <div class="content clearfix flex flex-space-between">
+          <ul class="flex-1">
+            <li>关于我们</li>
+            <li><a href="">达摩官网</a></li>
+            <li><a href="">达摩商户后台</a></li>
+            <li><a href="">达摩开发者中心</a></li>
+          </ul>
+          <ul class="flex-1">
+            <li>用户指南</li>
+            <li><a href="">开发者接入</a></li>
+            <li><a href="">解决方案</a></li>
+          </ul>
+          <ul class="flex-1">
+            <li>快捷入口</li>
+            <li><a href="">GIC服务市场</a></li>
+            <li><a href="">好办服务市场</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="home-site-footer">
+      <p>Copyright © {{ new Date().getFullYear() }} 浙江达摩网络科技有限公司 ｜ 浙ICP备15033117号-1</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'index',
+  data() {
+    return {
+      /* eslint-disable */
+      activeIndex: null,
+      qrcodeList: [
+        {
+          img: require('../assets/index/wx.png'),
+          img_active: require('../assets/index/wx_active.png'),
+          img_qrcode: require('../assets/index/wx_qrcode.png')
+        },
+        {
+          img: require('../assets/index/iOS.png'),
+          img_active: require('../assets/index/iOS_active.png'),
+          img_qrcode: require('../assets/index/app_qrcode.png')
+        },
+        {
+          img: require('../assets/index/android.png'),
+          img_active: require('../assets/index/android_active.png'),
+          img_qrcode: require('../assets/index/app_qrcode.png')
+        }
+      ]
+    };
+  },
+  methods: {
+    changeSrc(item, index) {
+      const that = this;
+      that.activeIndex = index;
+    },
+    changeIndex(e) {
+      const that = this;
+      if (!e.target.className.includes('qrcode-common-img')) {
+        that.activeIndex = null;
+      }
+    }
+  },
+  mounted() {
+    const that = this;
+    document.body.addEventListener('click', that.changeIndex);
+  },
+  beforeDestroy() {
+    const that = this;
+    document.body.removeEventListener('click', that.changeIndex);
+  },
+};
+</script>
+<style lang="less" scoped>
+.home-footer-content {
+  width: 100%;
+  height: 320px;
+  .home-footer {
+    width: 100%;
+    height: 268px;
+    background: #0a1633;
+    .home-footer-body {
+      width: 1200px;
+      margin: 0 auto;
+      .home-footer-left {
+        padding-top: 40px;
+        .qrcode-content {
+          .qrcode-popper {
+            margin-left: 20px;
+          }
+          .qrcode-common-img {
+            width: 34px;
+            height: 34px;
+            cursor: pointer;
+          }
+        }
+      }
+      .content {
+        padding-top: 40px;
+        padding-left: 400px;
+        ul {
+          width: 120px;
+          margin-right: 110px;
+          &:last-child {
+            margin-right: 0;
+          }
+          li {
+            line-height: 32px;
+            height: 32px;
+          }
+          a {
+            height: 32px;
+            line-height: 32px;
+            display: inline-block;
+            -webkit-transition: all 0.2s ease;
+            transition: all 0.2s ease;
+            &:hover {
+              color: white;
+            }
+          }
+          li,
+          a {
+            font-size: 13px;
+            color: #9ba5b4;
+          }
+          li:first-child {
+            margin-bottom: 20px;
+            border-bottom: 1px solid rgba(89, 114, 153, 0.36);
+          }
+        }
+      }
+    }
+  }
+  .home-site-footer {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    background: #071025;
+    text-align: center;
+    font-size: 13px;
+    color: #9ba5b4;
+  }
+}
+</style>

src/components/vue-open-header.vue

+<!--
+  <vue-open-header></vue-open-header>
+-->
+<template>
+  <div class="open-header">
+    <div class="open-header-wrap border-box flex ">
+      <div class="open-header-left"><img src="../assets/logo_01.png" alt="" /></div>
+      <div class="open-header-right">
+        <ul class="flex">
+          <li v-for="(item, index) in openMenuData" :key="index + 'menu'" class="menu-li" @click.stop.prevent="toRedirect(item)">
+            <span>{{ item.menuName }}</span
+            ><span v-if="item.children && item.children.length"><i class="font_family icon-arrow_right color-16214a font-14"></i></span>
+            <div v-if="item.children && item.children.length" class="menu-child">
+              <ul class="child-menu-ul">
+                <li v-for="(childItem, child) in item.children" :key="child + 'child'" class="child-item-menu" @click.stop.prevent="toRedirect(childItem)">{{ childItem.menuName }}</li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vue-open-header',
+  data() {
+    return {
+      openMenuData: [
+        {
+          menuName: '开发者接入',
+          menuUrl: ''
+        },
+        {
+          menuName: '解决方案',
+          menuUrl: ''
+        },
+        {
+          menuName: '开发者中心',
+          menuUrl: ''
+        },
+        {
+          menuName: '服务市场',
+          menuUrl: '',
+          children: [
+            {
+              menuName: '好办服务市场',
+              menuUrl: ''
+            },
+            {
+              menuName: 'GIC服务市场',
+              menuUrl: ''
+            }
+          ]
+        },
+        {
+          menuName: '达摩官网',
+          menuUrl: ''
+        }
+      ]
+    };
+  },
+
+  methods: {
+    toRedirect(item) {
+      const that = this;
+      that.$router.push(item.menuUrl);
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(val, oldVal) {
+        // console.log('获取当前路由:', val);
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  /* 接收数据 */
+  mounted() {
+    var that = this;
+    that.pathName = that.$route.path;
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.open-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 58px;
+  line-height: 58px;
+  background: #fff;
+  z-index: 3;
+  &-wrap {
+    width: 1200px;
+    margin: 0 auto;
+    height: 56px;
+    line-height: 56px;
+    .open-header-left {
+      img {
+        display: inline-block;
+        vertical-align: middle;
+        padding-right: 36px;
+        -webkit-transform: translateY(-4px);
+        -moz-transform: translateY(-4px);
+        -ms-transform: translateY(-4px);
+        transform: translateY(-4px);
+      }
+      span {
+        font-size: 17px;
+      }
+    }
+    .open-header-right {
+      ul {
+        .menu-li {
+          position: relative;
+          margin-right: 32px;
+          font-size: 14px;
+          color: #16214a;
+          cursor: pointer;
+          .el-icon-arrow-down {
+            -webkit-transition: 0.3s all;
+            -moz-transition: 0.3s all;
+            -o-transition: 0.3s all;
+            -ms-transition: 0.3s all;
+            transition: 0.3s all;
+          }
+          &:hover {
+            color: #4c70e8;
+            border-bottom: 2px solid #4c70e8;
+            .el-icon-arrow-down {
+              color: #4c70e8;
+              -webkit-transform: rotate(180deg);
+              -moz-transform: rotate(180deg);
+              -o-transform: rotate(180deg);
+              -ms-transform: rotate(180deg);
+              transform: rotate(180deg);
+            }
+            .menu-child {
+              display: block;
+            }
+          }
+          .menu-child {
+            display: none;
+            position: absolute;
+            top: 58px;
+            left: -30px;
+            width: 140px;
+            // border: 1px solid #ebeef5;
+            border-radius: 0px;
+            background: #ffffff;
+            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
+            z-index: 1;
+            .child-menu-ul {
+              padding: 20px 0 20px 32px;
+            }
+            .child-item-menu {
+              line-height: 40px;
+              margin: 0;
+              cursor: pointer;
+              outline: none;
+              font-size: 14px;
+              color: #16214a;
+              &:hover {
+                color: #4c70e8;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/filters/index.js

+/* 全局过滤器 */
+
+const dateFormat = function(timeSpan, format) {
+  if (!timeSpan) return;
+  timeSpan = timeSpan.toString().length === 10 ? timeSpan * 1000 : timeSpan;
+  let date = new Date(timeSpan);
+  let o = {
+    'M+': date.getMonth() + 1,
+    'D+': date.getDate(),
+    W: '日一二三四五六'.charAt(date.getDay()),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    S: date.getMilliseconds()
+  };
+  if (/(Y+)/.test(format)) {
+    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  for (let k in o) {
+    if (new RegExp('(' + k + ')').test(format)) {
+      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+    }
+  }
+  return format;
+};
+
+/**
+ * 时间戳---> 年-月-日 时:分:秒
+ * @param timestamp
+ */
+const formatTimeStamp = function(data) {
+  let date = new Date(data);
+  let month = date.getMonth() + 1;
+  let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  let newMonth = month < 10 ? '0' + month : month;
+  let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+  let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+  let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return `${date.getFullYear()}-${newMonth}-${day} ${hours}:${minutes}:${seconds}`;
+};
+
+/**
+ * 时间戳---> 年-月-日
+ * @param timestamp
+ */
+const timeStampToYmd = function(data) {
+  let date = new Date(data);
+  let month = date.getMonth() + 1;
+  let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  let newMonth = month < 10 ? '0' + month : month;
+  return `${date.getFullYear()}-${newMonth}-${day}`;
+};
+
+/**
+ * 时间戳---> 时:分:秒
+ * @param timestamp
+ */
+const timeStampToHms = function(data) {
+  let date = new Date(data);
+  let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+  let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+  let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return `${hours}:${minutes}:${seconds}`;
+};
+
+export default {
+  dateFormat,
+  formatTimeStamp,
+  timeStampToYmd,
+  timeStampToHms
+};

src/main.js

+import 'babel-polyfill';
+import promise from 'es6-promise';
+promise.polyfill();
+// import Vue from 'vue';
+import App from './App';
+import router from './router';
+import ElementUI from 'element-ui';
+import VueAxios from 'vue-axios';
+import axios from 'axios';
+import store from './store/store';
+/* eslint-disable  */
+import * as types from './store/types';
+import '../static/css/index.less';
+// import 'element-ui/lib/theme-chalk/index.css'
+import '../static/font/iconfont.css';
+import '../theme/index.css';
+import filters from './filters/index.js';
+
+Vue.config.productionTip = false;
+Vue.use(ElementUI, { size: 'large' });
+Vue.use(VueAxios, axios);
+
+Vue.axios.defaults.withCredentials = true; // 允许携带 cookie
+// 全局注册过滤器
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key]);
+});
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  components: { App },
+  template: '<App/>'
+});

src/router/_import.js

+/* eslint-disable */
+module.exports = (parantfile, file) => r => {
+  import('views/' + parantfile + '/' + file + '.vue').then(module => {
+    r(module);
+  });
+};

src/router/index.js

+import Vue from 'vue';
+import Router from 'vue-router';
+import _import from './_import.js';
+Vue.use(Router);
+
+// const error403 = (r) => {
+//   import('views/errorPage/403.vue').then((module) => {
+//     r(module)
+//   })
+// };
+// const error404 = (r) => {
+//   import('views/errorPage/404.vue').then((module) => {
+//     r(module)
+//   })
+// };
+// const error500 = (r) => {
+//   import('views/errorPage/500.vue').then((module) => {
+//     r(module)
+//   })
+// };
+const errorPage = r => {
+  import('views/errorPage/index.vue').then(module => {
+    r(module);
+  });
+};
+
+export const constantRouterMap = [
+  {
+    path: '/',
+    name: '/',
+    redirect: 'index'
+  },
+  {
+    path: '/login',
+    name: '登录',
+    component: _import('login', 'index')
+  },
+  {
+    path: '/index',
+    name: '首页',
+    component: _import('index', 'index')
+  },
+  {
+    path: '/403',
+    name: '无权访问',
+    component: errorPage
+  },
+  {
+    path: '/404',
+    name: 'error404',
+    component: errorPage
+  },
+  {
+    path: '/500',
+    name: 'error500',
+    component: errorPage
+  },
+  { path: '*', redirect: '/404', hidden: true }
+];
+export default new Router({
+  // mode:'history',
+  routes: constantRouterMap,
+  scrollBehavior: () => ({ y: 0 })
+});

src/store/store.js

+import Vuex from 'vuex';
+import Vue from 'vue';
+import * as types from './types';
+
+Vue.use(Vuex);
+export default new Vuex.Store({
+  state: {
+    userInfo: {}, // 用户信息
+    token: null,
+    title: '',
+    show: false,
+    bgHeight: window.screen.availHeight - 440 - 24 + 'px',
+    baseInfo: {}, // 基础信息
+    frontInfo: {}, // 前端配置
+    backInfo: {}, // 后端配置
+    resultInfo: {} // 返回结果配置
+  },
+  mutations: {
+    [types.LOGIN]: (state, data) => {
+      sessionStorage.token = data;
+      state.token = data;
+    },
+    [types.LOGOUT]: state => {
+      sessionStorage.removeItem('token');
+      state.token = null;
+    },
+    [types.TITLE]: (state, data) => {
+      state.title = data;
+    },
+    [types.SHOW]: (state, data) => {
+      state.show = data;
+    },
+    saveUser: (state, data) => {
+      localStorage.removeItem('userInfo');
+      localStorage.setItem('userInfo', JSON.stringify(data));
+      state.userInfo = JSON.parse(localStorage.getItem('userInfo'));
+    },
+    clearUser: state => {
+      state.userInfo = {};
+      if (localStorage.getItem('userInfo')) {
+        localStorage.removeItem('userInfo');
+      }
+    },
+    saveBase: (state, data) => {
+      state.baseInfo = data;
+    },
+    saveFront: (state, data) => {
+      state.frontInfo = data;
+    },
+    saveBack: (state, data) => {
+      state.backInfo = data;
+    },
+    saveResult: (state, data) => {
+      state.resultInfo = data;
+    },
+    clearData: state => {
+      state.baseInfo = {};
+      state.frontInfo = {};
+      state.backInfo = {};
+      state.resultInfo = {};
+    }
+  },
+  actions: {
+    saveUserInfo(context, data) {
+      context.commit('saveUser', data);
+    },
+    clearUserInfo(context, data) {
+      context.commit('clearUser', data);
+    },
+    saveBaseInfo(context, data) {
+      context.commit('saveBase', data);
+    },
+    saveFrontInfo(context, data) {
+      context.commit('saveFront', data);
+    },
+    saveBackInfo(context, data) {
+      context.commit('saveBack', data);
+    },
+    saveResultInfo(context, data) {
+      context.commit('saveResult', data);
+    },
+    clearApiData(context, data) {
+      context.commit('clearData');
+    }
+  }
+});

src/store/types.js

+export const LOGIN = 'login';
+
+export const LOGOUT = 'logout';
+
+export const TITLE = 'title';
+
+export const SHOW = 'show';

src/utils/clipboard.js

+import Vue from 'vue'
+import Clipboard from 'clipboard'
+
+function clipboardSuccess() {
+  Vue.prototype.$message({
+    message: 'Copy successfully',
+    type: 'success',
+    duration: 1500
+  })
+}
+
+function clipboardError() {
+  Vue.prototype.$message({
+    message: 'Copy failed',
+    type: 'error'
+  })
+}
+
+export default function handleClipboard(text, event) {
+  const clipboard = new Clipboard(event.target, {
+    text: () => text
+  })
+  clipboard.on('success', () => {
+    clipboardSuccess()
+    clipboard.off('error')
+    clipboard.off('success')
+    clipboard.destroy()
+  })
+  clipboard.on('error', () => {
+    clipboardError()
+    clipboard.off('error')
+    clipboard.off('success')
+    clipboard.destroy()
+  })
+  clipboard.onClick(event)
+}

src/utils/cookie.js

+/*设置cookie*/
+export function setCookie(c_name,value,expire) {
+  var date=new Date();
+  date.setSeconds(date.getSeconds()+expire);
+  document.cookie = c_name + "="+ encodeURI(value)+"; expires="+date.toGMTString();
+}
+
+/*获取cookie*/
+export function getCookie(c_name){
+  if(document.cookie.length>0){
+    var name = encodeURI(c_name);
+    var allcookies = document.cookie;
+    name += "=";
+    var pos = allcookies.indexOf(name);
+    if(pos != -1){
+      var start = pos + name.length;
+      var end = allcookies.indexOf(";",start);
+      if(end == -1){
+        end = allcookies.length;
+      }
+      var value = allcookies.substring(start,end);
+      return decodeURI(value);
+    } else{
+      return "";
+    }
+  }
+}
+
+/*删除cookie*/
+export function delCookie(c_name){
+  setCookie(c_name, "", -1);
+}

src/utils/createUniqueString.js

+/**
+ * Created by jiachenpan on 17/3/8.
+ */
+export default function createUniqueString() {
+  const timestamp = +new Date() + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  return (+(randomNum + timestamp)).toString(32)
+}

src/utils/formatDate.js

+import { date } from "index";
+
+export default function (value, format) {
+	if (!value) return "";
+	value = date.getdate(value, format);
+	return value;
+};

src/utils/openWindow.js

+/**
+ *Created by jiachenpan on 16/11/29.
+ * @param {Sting} url
+ * @param {Sting} title
+ * @param {Number} w
+ * @param {Number} h
+ */
+
+export default function openWindow(url, title, w, h) {
+  // Fixes dual-screen position                            Most browsers       Firefox
+  const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
+  const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
+
+  const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
+  const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
+
+  const left = ((width / 2) - (w / 2)) + dualScreenLeft
+  const top = ((height / 2) - (h / 2)) + dualScreenTop
+  const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)
+
+  // Puts focus on the newWindow
+  if (window.focus) {
+    newWindow.focus()
+  }
+}
+

src/utils/request.js

+import axios from 'axios'
+import { Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.BASE_API, // api的base_url
+  timeout: 5000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(config => {
+  // Do something before request is sent
+  if (store.getters.token) {
+    config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+  }
+  return config
+}, error => {
+  // Do something with request error
+  console.log(error) // for debug
+  Promise.reject(error)
+})
+
+// respone interceptor
+service.interceptors.response.use(
+  response => response,
+  /**
+  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
+  */
+  //  const res = response.data;
+  //     if (res.code !== 20000) {
+  //       Message({
+  //         message: res.message,
+  //         type: 'error',
+  //         duration: 5 * 1000
+  //       });
+  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+  //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+  //           confirmButtonText: '重新登录',
+  //           cancelButtonText: '取消',
+  //           type: 'warning'
+  //         }).then(() => {
+  //           store.dispatch('FedLogOut').then(() => {
+  //             location.reload();// 为了重新实例化vue-router对象 避免bug
+  //           });
+  //         })
+  //       }
+  //       return Promise.reject('error');
+  //     } else {
+  //       return response.data;
+  //     }
+  error => {
+    console.log('err' + error)// for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  })
+
+export default service

src/utils/validate.js

+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+export function isvalidUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
+
+/* 合法uri*/
+export function validateURL(textval) {
+  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return urlregex.test(textval)
+}
+
+/* 小写字母*/
+export function validateLowerCase(str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/* 大写字母*/
+export function validateUpperCase(str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/* 大小写字母*/
+export function validateAlphabets(str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * validate email
+ * @param email
+ * @returns {boolean}
+ */
+export function validateEmail(email) {
+  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return re.test(email)
+}
+

src/views/errorPage/403.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_403" alt="403" />
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">403</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/companyGroup" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_403 from '@/assets/403_images/error_403.svg';
+
+export default {
+  name: 'page403',
+  data() {
+    return {
+      img_403
+    };
+  },
+  computed: {
+    message() {
+      return '抱歉，你无权访问该页面';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/errorPage/404.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404" />
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">404</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/companyGroup" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_404 from '@/assets/404_images/error_404.svg';
+
+export default {
+  name: 'page404',
+  data() {
+    return {
+      img_404
+    };
+  },
+  computed: {
+    message() {
+      return '抱歉，你访问的页面不存在';
+    }
+  },
+  /* eslint-disable */
+  mounted() {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/errorPage/500.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_500" alt="500" />
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">500</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/companyGroup" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_500 from '@/assets/500_images/error_500.svg';
+
+export default {
+  name: 'page500',
+  data() {
+    return {
+      img_500
+    };
+  },
+  computed: {
+    message() {
+      return '抱歉，服务器出错了';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/errorPage/index.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="imgSrc" alt="404" />
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">404</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/index" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_403 from '@/assets/403_images/error_403.svg';
+import img_404 from '@/assets/404_images/error_404.svg';
+import img_500 from '@/assets/500_images/error_500.svg';
+
+export default {
+  name: 'errpage',
+  data() {
+    return {
+      imgSrc: '',
+      message: '',
+      srcList: {
+        403: img_403,
+        404: img_404,
+        500: img_500
+      },
+      msgList: {
+        403: '抱歉，你无权访问该页面',
+        404: '抱歉，你访问的页面不存在',
+        500: '抱歉，服务器出错了'
+      }
+    };
+  },
+  mounted() {
+    var that = this;
+    var path = that.$route.path.split('/')[1];
+    that.imgSrc = that.srcList[path];
+    that.message = that.msgList[path];
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+      &:hover {
+        color: #fff;
+        background-color: #40a9ff;
+        border-color: #40a9ff;
+      }
+      &:active {
+        background: #096dd9;
+        border-color: #096dd9;
+        color: #fff;
+      }
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/login/index.vue

+<template>
+  <div class="login-wrap" :style="{ height: windowH }">
+    <header>
+      <div class="login-wrap-header">
+        <img class="login-wrap-inline" src="../../assets/logo_01.png" alt="logo" />
+        <span class="login-wrap-inline">API网关管理后台</span>
+      </div>
+    </header>
+    <section>
+      <div class="login-wrap-body">
+        <div class="login-wrap-form">
+          <div class="form-title font-24 color-303133 text-center">登录</div>
+          <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
+            <el-form-item label="" prop="userName">
+              <el-input class="w-318" v-model="loginForm.userName" placeholder="请输入账号">
+                <i slot="prefix" class="el-input__icon el-icon-search"></i>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="" prop="password">
+              <el-input class="w-318" type="password" v-model="loginForm.password" placeholder="请输入密码">
+                <i slot="prefix" class="el-input__icon el-icon-search"></i>
+              </el-input>
+            </el-form-item>
+            <!-- <el-form-item label="" prop="checked">
+              <el-checkbox v-model="loginForm.checked">记住我的登录状态</el-checkbox>
+            </el-form-item> -->
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </section>
+    <div class="login-footer font-12 color-909399">Copyright {{ new Date().getFullYear() }} Demogic.com All Rights Reserved 浙ICP备15033117号-1</div>
+  </div>
+</template>
+<script>
+import { _debounce } from '@/assets/js/public';
+import errMsg from '@/assets/js/error';
+import showMsg from '@/assets/js/showmsg';
+import { postRequest } from '@/api/api';
+import md5 from 'js-md5';
+export default {
+  name: 'login',
+  data() {
+    return {
+      windowH: window.screen.availHeight - 104 + 'px',
+      // 登录
+      loginForm: {
+        userName: '',
+        password: '',
+        checked: false
+      },
+      rules: {
+        userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+      }
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 处理路由跳转
+     */
+    toRouterView(val) {
+      const that = this;
+      // 模拟检查数据,有两个参数
+      /*{
+       name:,
+       path:
+      }*/
+      that.$router.push({
+        path: val.path
+      });
+    },
+
+    /**
+     * 登录
+     */
+    submitForm: _debounce(function(formName) {
+      const that = this;
+      that.$refs[formName].validate(valid => {
+        if (valid) {
+          that.postPassLogin();
+        } else {
+          return false;
+        }
+      });
+    }, 500),
+    postPassLogin() {
+      const that = this;
+      let para = {
+        userName: that.loginForm.userName,
+        password: md5(that.loginForm.password)
+      };
+      postRequest('/gateway-manage/login', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.code == '0000') {
+            showMsg.showmsg('登录成功', 'success');
+            that.$router.push('/overview');
+            return false;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    /**
+     * 获取用户信息-判断用户是否登录
+     */
+    getUserInfo() {
+      const that = this;
+      postRequest('/gateway-manage/get-login-userInfo', {})
+        .then(res => {
+          const resData = res.data;
+          if (resData.code == '0000') {
+            showMsg.showmsg('用户已登录', 'success');
+            that.$router.push('/overview');
+            return;
+          }
+        })
+        .catch(function(error) {});
+    }
+  },
+  mounted() {
+    const that = this;
+    that.getUserInfo();
+    // console.log(that.$store.state.userInfo);
+  },
+  components: {}
+};
+</script>
+<style lang="less" scoped>
+.login-wrap {
+  position: relative;
+  width: 100%;
+  height: 640px;
+  background-color: #fff;
+  background: url('../../assets/bg.svg') no-repeat left center;
+  background-size: auto 100%;
+
+  header {
+    position: relative;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  &-header {
+    position: relative;
+    width: 100%;
+    min-width: 1400px;
+    padding: 39px 43px 0 0;
+    margin: 0 auto;
+    text-align: right;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    /*-webkit-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
+      -moz-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
+      box-shadow: 0px 0px 10px rgba(147,165,184,0.13);*/
+    img {
+      padding-right: 8px;
+    }
+  }
+
+  &-inline {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 17px;
+    color: #303133;
+  }
+
+  &-body {
+    position: relative;
+    width: 100%;
+    min-width: 1400px;
+    .login-wrap-form {
+      position: absolute;
+      width: 318px;
+      height: 281px;
+      top: 204px;
+      right: 228px;
+      .form-title {
+        font-size: 24px;
+        margin-bottom: 56px;
+      }
+      .loginForm {
+        width: 100%;
+        padding: 0;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        .w-318 {
+          width: 318px;
+        }
+
+        .code-item {
+          text-align: left;
+        }
+        .el-button {
+          width: 100%;
+          padding: 0;
+          height: 40px;
+          line-height: 40px;
+          background: #5584ff;
+        }
+        .el-input {
+          /deep/ .el-input__inner {
+            height: 40px;
+            line-height: 40px;
+          }
+        }
+      }
+    }
+  }
+  .login-footer {
+    position: absolute;
+    right: 181px;
+    bottom: 28px;
+  }
+}
+</style>

static/css/index.less

+@import './public.css';

static/css/variable.less

+@base-color: #353944;
+@hover-color: #3c92eb;
+@hoverbg-color: #20242d;
+@main-color: #5584ff;
+@navbgcolor: #04143a;
+@sidebgcolor: #343c4c;
+@userinfobgcolor: #ecf5ff;
+@contentbgcolor: #f5f7fa;
+@bordercolor: #dcdfe6;
+@customnavcolor: #04143a;
+@btnbgcolor: #f5f7fa;
+@iconbgcolor: #e6e9f2;
+.flex1(@width,@height) {
+  flex: 0 0 @width;
+  width: @width;
+  height: @height;
+}