第二次提交

.babelrc

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

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

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

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

README.md

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

build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

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

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,82 @@
+'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)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

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

config/dev.env.js

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

config/index.js

@@ -0,0 +1,78 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target : 'http://132.232.92.186:8888/api',    //设置你调用的接口域名和端口号.别忘了加http
+        changeOrigin : true,   //允许跨域
+        pathRewrite : {
+             '^/api':'/'
+            // '/'这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替。比如我要调用'http://api.douban.com/v2/movie/top250'，直接写‘/api/v2/movie/top250’即可
+
+         }
+        }
+    },
+    
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,5 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"',
+  API_HOST:'"http://132.232.92.186:8888/api"'
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" type="image/png" href="/static/logo2.png"/>
+    <title>OA-泛美国际</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,71 @@
+{
+  "name": "oa-system",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "@fullcalendar/core": "^6.1.4",
+    "@fullcalendar/daygrid": "^6.1.4",
+    "@fullcalendar/interaction": "^6.1.4",
+    "@fullcalendar/timegrid": "^6.1.4",
+    "@fullcalendar/vue": "^6.1.4",
+    "axios": "^1.3.4",
+    "element-ui": "^2.15.13",
+    "tippy.js": "^6.3.7",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+#app {
+  margin: 0px;
+  padding: 0px;
+}
+</style>

src/assets/icon/demo.css

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

src/assets/icon/demo_index.html

@@ -0,0 +1,556 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3950759" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">现场管控</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe752;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe752;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">地接</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64b;</span>
+                <div class="name">76项目策划</div>
+                <div class="code-name">&amp;#xe64b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">市场部</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">人民币</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe753;</span>
+                <div class="name">HCplan数量</div>
+                <div class="code-name">&amp;#xe753;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe635;</span>
+                <div class="name">服务器</div>
+                <div class="code-name">&amp;#xe635;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">通知</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">实用工具</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cb;</span>
+                <div class="name">首页</div>
+                <div class="code-name">&amp;#xe6cb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">统计图</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">菜单收起</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">菜单展开</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">账户</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65e;</span>
+                <div class="name">密码</div>
+                <div class="code-name">&amp;#xe65e;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1679044803754') format('woff2'),
+       url('iconfont.woff?t=1679044803754') format('woff'),
+       url('iconfont.ttf?t=1679044803754') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xianchangguankong"></span>
+            <div class="name">
+              现场管控
+            </div>
+            <div class="code-name">.icon-xianchangguankong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dijie"></span>
+            <div class="name">
+              地接
+            </div>
+            <div class="code-name">.icon-dijie
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangmucehua"></span>
+            <div class="name">
+              76项目策划
+            </div>
+            <div class="code-name">.icon-xiangmucehua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shichangbu"></span>
+            <div class="name">
+              市场部
+            </div>
+            <div class="code-name">.icon-shichangbu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-renminbi"></span>
+            <div class="name">
+              人民币
+            </div>
+            <div class="code-name">.icon-renminbi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-HCplanshuliang"></span>
+            <div class="name">
+              HCplan数量
+            </div>
+            <div class="code-name">.icon-HCplanshuliang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fuwuqi"></span>
+            <div class="name">
+              服务器
+            </div>
+            <div class="code-name">.icon-fuwuqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongzhi"></span>
+            <div class="name">
+              通知
+            </div>
+            <div class="code-name">.icon-tongzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shiyonggongju"></span>
+            <div class="name">
+              实用工具
+            </div>
+            <div class="code-name">.icon-shiyonggongju
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye"></span>
+            <div class="name">
+              首页
+            </div>
+            <div class="code-name">.icon-shouye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongjitu"></span>
+            <div class="name">
+              统计图
+            </div>
+            <div class="code-name">.icon-tongjitu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caidanshouqi"></span>
+            <div class="name">
+              菜单收起
+            </div>
+            <div class="code-name">.icon-caidanshouqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caidanzhankai"></span>
+            <div class="name">
+              菜单展开
+            </div>
+            <div class="code-name">.icon-caidanzhankai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhanghu"></span>
+            <div class="name">
+              账户
+            </div>
+            <div class="code-name">.icon-zhanghu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mima"></span>
+            <div class="name">
+              密码
+            </div>
+            <div class="code-name">.icon-mima
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xianchangguankong"></use>
+                </svg>
+                <div class="name">现场管控</div>
+                <div class="code-name">#icon-xianchangguankong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dijie"></use>
+                </svg>
+                <div class="name">地接</div>
+                <div class="code-name">#icon-dijie</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangmucehua"></use>
+                </svg>
+                <div class="name">76项目策划</div>
+                <div class="code-name">#icon-xiangmucehua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shichangbu"></use>
+                </svg>
+                <div class="name">市场部</div>
+                <div class="code-name">#icon-shichangbu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-renminbi"></use>
+                </svg>
+                <div class="name">人民币</div>
+                <div class="code-name">#icon-renminbi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-HCplanshuliang"></use>
+                </svg>
+                <div class="name">HCplan数量</div>
+                <div class="code-name">#icon-HCplanshuliang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fuwuqi"></use>
+                </svg>
+                <div class="name">服务器</div>
+                <div class="code-name">#icon-fuwuqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongzhi"></use>
+                </svg>
+                <div class="name">通知</div>
+                <div class="code-name">#icon-tongzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shiyonggongju"></use>
+                </svg>
+                <div class="name">实用工具</div>
+                <div class="code-name">#icon-shiyonggongju</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye"></use>
+                </svg>
+                <div class="name">首页</div>
+                <div class="code-name">#icon-shouye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongjitu"></use>
+                </svg>
+                <div class="name">统计图</div>
+                <div class="code-name">#icon-tongjitu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caidanshouqi"></use>
+                </svg>
+                <div class="name">菜单收起</div>
+                <div class="code-name">#icon-caidanshouqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caidanzhankai"></use>
+                </svg>
+                <div class="name">菜单展开</div>
+                <div class="code-name">#icon-caidanzhankai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhanghu"></use>
+                </svg>
+                <div class="name">账户</div>
+                <div class="code-name">#icon-zhanghu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mima"></use>
+                </svg>
+                <div class="name">密码</div>
+                <div class="code-name">#icon-mima</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/icon/iconfont.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3950759 */
+  src: url('iconfont.woff2?t=1679044803754') format('woff2'),
+       url('iconfont.woff?t=1679044803754') format('woff'),
+       url('iconfont.ttf?t=1679044803754') format('truetype');
+}
+
+.iconfont,[class^="icon-"],[class*=" icon-"] {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xianchangguankong:before {
+  content: "\e616";
+}
+
+.icon-sousuo:before {
+  content: "\e752";
+}
+
+.icon-dijie:before {
+  content: "\e639";
+}
+
+.icon-xiangmucehua:before {
+  content: "\e64b";
+}
+
+.icon-shichangbu:before {
+  content: "\e609";
+}
+
+.icon-renminbi:before {
+  content: "\e600";
+}
+
+.icon-HCplanshuliang:before {
+  content: "\e753";
+}
+
+.icon-fuwuqi:before {
+  content: "\e635";
+}
+
+.icon-tongzhi:before {
+  content: "\e61c";
+}
+
+.icon-shiyonggongju:before {
+  content: "\e614";
+}
+
+.icon-shouye:before {
+  content: "\e6cb";
+}
+
+.icon-tongjitu:before {
+  content: "\e617";
+}
+
+.icon-caidanshouqi:before {
+  content: "\e611";
+}
+
+.icon-caidanzhankai:before {
+  content: "\e615";
+}
+
+.icon-zhanghu:before {
+  content: "\e62b";
+}
+
+.icon-mima:before {
+  content: "\e65e";
+}
+

src/assets/icon/iconfont.json

@@ -0,0 +1,121 @@
+{
+  "id": "3950759",
+  "name": "oa",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "31307121",
+      "name": "现场管控",
+      "font_class": "xianchangguankong",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "577365",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e752",
+      "unicode_decimal": 59218
+    },
+    {
+      "icon_id": "4251711",
+      "name": "地接",
+      "font_class": "dijie",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "6605919",
+      "name": "76项目策划",
+      "font_class": "xiangmucehua",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "8947228",
+      "name": "市场部",
+      "font_class": "shichangbu",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "1265",
+      "name": "人民币",
+      "font_class": "renminbi",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "4773946",
+      "name": "HCplan数量",
+      "font_class": "HCplanshuliang",
+      "unicode": "e753",
+      "unicode_decimal": 59219
+    },
+    {
+      "icon_id": "11760227",
+      "name": "服务器",
+      "font_class": "fuwuqi",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "6844398",
+      "name": "通知",
+      "font_class": "tongzhi",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "13412652",
+      "name": "实用工具",
+      "font_class": "shiyonggongju",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "673799",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e6cb",
+      "unicode_decimal": 59083
+    },
+    {
+      "icon_id": "7587965",
+      "name": "统计图",
+      "font_class": "tongjitu",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "11556685",
+      "name": "菜单收起",
+      "font_class": "caidanshouqi",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "11556695",
+      "name": "菜单展开",
+      "font_class": "caidanzhankai",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "924728",
+      "name": "账户",
+      "font_class": "zhanghu",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "1112266",
+      "name": "密码",
+      "font_class": "mima",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    }
+  ]
+}

src/components/Enroll.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="enroll-all">
+    <div class="enroll-form-box">
+      <div class="enroll-title">员工注册</div>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <div class="form-li">
+          <el-form-item label="中文名称" prop="mandarinName">
+            <el-input v-model="ruleForm.mandarinName"></el-input>
+          </el-form-item>
+          <el-form-item label="英文名称" prop="eflName">
+            <el-input v-model="ruleForm.eflName"></el-input>
+          </el-form-item>
+        </div>
+        <div class="form-li">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="ruleForm.email"></el-input>
+          </el-form-item>
+          <el-form-item label="性别" prop="sex">
+            <el-radio-group v-model="ruleForm.sex">
+              <el-radio label="男"></el-radio>
+              <el-radio label="女"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </div>
+        <div class="form-li">
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="ruleForm.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="紧急电话" prop="urgentphone">
+            <el-input v-model="ruleForm.urgentphone"></el-input>
+          </el-form-item>
+        </div>
+        <div class="form-li">
+          <el-form-item label="密码" prop="pass">
+            <el-input v-model="ruleForm.pass"></el-input>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="checkPass">
+            <el-input v-model="ruleForm.checkPass"></el-input>
+          </el-form-item>
+        </div>
+        <div class="form-li">
+          <el-form-item label="身份证号" prop="IDnumber">
+            <el-input v-model="ruleForm.IDnumber"></el-input>
+          </el-form-item>
+          <el-form-item label="出生日期" prop="datebirth">
+            <el-input v-model="ruleForm.datebirth"></el-input>
+          </el-form-item>
+        </div>
+        <div class="form-li">
+          <el-form-item label="学历" prop="educated">
+            <el-input v-model="ruleForm.educated"></el-input>
+          </el-form-item>
+          <el-form-item label="专业" prop="specialized">
+            <el-input v-model="ruleForm.specialized"></el-input>
+          </el-form-item>
+          <el-form-item label="毕业院校" prop="school">
+            <el-input v-model="ruleForm.school"></el-input>
+          </el-form-item>
+          <el-form-item label="统招/成教" prop="recruitment">
+            <el-input v-model="ruleForm.recruitment"></el-input>
+          </el-form-item>
+          <el-form-item label="婚姻状况" prop="maritalstatus">
+            <el-input v-model="ruleForm.maritalstatus"></el-input>
+          </el-form-item>
+          <el-form-item label="家庭地址" prop="address">
+            <el-input v-model="ruleForm.address"></el-input>
+          </el-form-item>
+        </div>
+        <div class="form-li">
+          <el-form-item label="所属公司" prop="corporation">
+            <el-select
+              v-model="ruleForm.corporation"
+              placeholder="请选择所属公司"
+            >
+              <el-option label="A" value="A"></el-option>
+              <el-option label="B" value="B"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属部门" prop="division">
+            <el-select v-model="ruleForm.division" placeholder="请选择所属部门">
+              <el-option label="A" value="A"></el-option>
+              <el-option label="B" value="B"></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label="工作经历" prop="desc">
+          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+        </el-form-item>
+        <div class="enroll-btn">
+          <el-button type="primary" @click="submitForm('ruleForm')"
+            >立即注册</el-button
+          >
+          <el-button @click="resetForm('ruleForm')">重置</el-button>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (this.ruleForm.checkPass !== "") {
+          this.$refs.ruleForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.ruleForm.pass) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      ruleForm: {
+        mandarinName: "",
+        eflName: "",
+        sex: "",
+        email: "",
+        phone: "",
+        urgentphone: "",
+        pass: "",
+        checkPass: "",
+        IDnumber: "",
+        educated: "",
+        specialized: "",
+        school: "",
+        recruitment: "",
+        datebirth: "",
+        maritalstatus: "",
+        address: "",
+        corporation: "",
+        division: "",
+        desc: "",
+      },
+      rules: {
+        mandarinName: [
+          { required: true, message: "中文名称", trigger: "blur" },
+          { min: 2, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        eflName: [
+          { required: true, message: "英文名称", trigger: "blur" },
+          { min: 0, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
+        email: [
+          { required: true, message: "请输入邮箱地址", trigger: "blur" },
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"],
+          },
+        ],
+        phone: [
+          { required: true, message: "手机号必填", trigger: "blur" },
+          {
+            pattern: /^1[3456789]\d{9}$/,
+            message: "手机号码格式不正确",
+            trigger: "blur",
+          },
+        ],
+        urgentphone: [
+          { required: true, message: "紧急号码必填", trigger: "blur" },
+          {
+            pattern: /^1[3456789]\d{9}$/,
+            message: "紧急号码格式不正确",
+            trigger: "blur",
+          },
+        ],
+        pass: [
+          { required: true, validator: validatePass, trigger: "blur" },
+          {
+            min: 6,
+            max: 18,
+            message: "长度在 6 到 18 个字符",
+            trigger: "blur",
+          },
+        ],
+        checkPass: [
+          { required: true, validator: validatePass2, trigger: "blur" },
+          {
+            min: 6,
+            max: 18,
+            message: "长度在 6 到 18 个字符",
+            trigger: "blur",
+          },
+        ],
+        IDnumber: [
+          { required: true, message: "请填写证件号码", trigger: "blur" },
+          {
+            pattern:
+              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
+            message: "证件号码格式有误！",
+            trigger: "blur",
+          },
+        ],
+        datebirth: [
+          {
+            required: true,
+            message: "请填写证件号码匹配出生日期",
+            trigger: "blur",
+          },
+        ],
+        educated: [{ required: true, message: "请填写学历", trigger: "blur" }],
+        specialized: [
+          { required: true, message: "请填写专业", trigger: "blur" },
+        ],
+        school: [
+          { required: true, message: "请填写毕业院校", trigger: "blur" },
+        ],
+        recruitment: [
+          { required: true, message: "请填写统招/成教", trigger: "blur" },
+        ],
+        maritalstatus: [
+          { required: true, message: "请填写婚姻状况", trigger: "blur" },
+        ],
+        address: [
+          { required: true, message: "请填写家庭地址", trigger: "blur" },
+        ],
+        corporation: [
+          { required: true, message: "请选择所属公司", trigger: "change" },
+        ],
+        division: [
+          { required: true, message: "请选择所属部门", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写工作经历", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+.enroll-all {
+  background-color: #f1f1f1;
+  padding-top: 100px;
+  height: 900px;
+  /*background-image: url("../assets/back.png");*/
+  /*background-repeat: no-repeat;*/
+  /*background-size: 100% 100%;*/
+}
+.enroll-form-box {
+  width: 800px;
+  margin: 0 auto;
+  box-shadow: 0 0 5px #0005;
+  padding: 20px 20px 20px 0px;
+  border-radius: 5px;
+  background-color: #fff;
+}
+.enroll-title {
+  text-align: center;
+  font-size: 26px;
+  font-weight: 600;
+  color: #555;
+  margin-bottom: 20px;
+}
+.form-li {
+  display: flex;
+  flex-wrap: wrap;
+}
+.form-li > div {
+  width: 50%;
+}
+.el-select {
+  width: 100%;
+}
+.enroll-btn {
+  text-align: center;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+        >
+          Core Docs
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+        >
+          Forum
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+        >
+          Community Chat
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+        >
+          Twitter
+        </a>
+      </li>
+      <br>
+      <li>
+        <a
+          href="http://vuejs-templates.github.io/webpack/"
+          target="_blank"
+        >
+          Docs for This Template
+        </a>
+      </li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li>
+        <a
+          href="http://router.vuejs.org/"
+          target="_blank"
+        >
+          vue-router
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vuex.vuejs.org/"
+          target="_blank"
+        >
+          vuex
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vue-loader.vuejs.org/"
+          target="_blank"
+        >
+          vue-loader
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+        >
+          awesome-vue
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/Login.vue

@@ -0,0 +1,314 @@
+<template>
+    <div class="login-all">
+        <div class="login-haed">
+            <div class="img-logo">
+                <div class="logos">
+                    <img src="../assets/logo2.png" />
+                </div>
+                <div class="names">PAN-AMEPICAN INTERNATIONAL</div>
+            </div>
+            <div class="help-box">
+                <div class="help-title">没有企业账户？</div>
+                <div class="help-btn">去注册</div>
+            </div>
+        </div>
+        <div class="login-dominant">
+            <div class="login-box">
+                <div class="login-title">泛美国际 - AI智能办公系统</div>
+                <div class="login-input">
+                    <el-input class="accounts" placeholder="请输入您的账户" v-model="usernum">
+                        <i slot="prefix" class="el-input__icon icon-zhanghu"></i>
+                    </el-input>
+                    <el-input class="passwords" placeholder="请输入您的密码" show-password v-model="password">
+                        <i slot="prefix" class="el-input__icon icon-mima"></i>
+                    </el-input>
+                    <div class="el-input remembers">
+                        <div class="el-input-box">
+                            <input id="ckxjz" :checked="msgs" type="checkbox">
+                            <span class="two" @click="ckxclick"></span>
+                            <label for="ckxjz">记住账户</label>
+                        </div>
+                        <div class="fotger-pass">
+                            忘记密码？
+                        </div>
+                    </div>
+                    <div class="loginbtn-box">
+                        <el-button @click="Login()" class="loginbtn" v-loading.fullscreen.lock="fullscreenLoading" round>登 录</el-button>
+                    </div>
+                </div>
+                <div></div>
+            </div>
+        </div>
+        <div class="fout-box">
+            PAN AMEPICAN INTERNATIONAL OA AI SYSTEM<br>
+            © 2023 PAN AMEPICAN INTERNATIONAL CORPOPATION.ALL Rights Reserved.
+        </div>
+    </div>
+</template>
+
+<script>
+import Vuex from 'vuex';
+import { mapMutations, mapActions } from 'vuex'
+
+export default {
+    ...mapMutations(['setphone']),//引入保存phone数据方法
+    data() {
+        return {
+            usernum: '',
+            password: '',
+            msgs: false,
+            fullscreenLoading:false
+        }
+    },
+    methods: {
+        ...mapActions(['vlogin']),
+        //记住账户click
+        ckxclick() {
+            if (document.getElementById("ckxjz").checked == true) {
+                document.getElementById("ckxjz").checked = false;
+            } else {
+                document.getElementById("ckxjz").checked = true;
+            }
+        },
+        //登录
+        Login() {
+            this.fullscreenLoading=true;
+            var url="/api/login"
+            var that=this
+            this.$axios({
+                method: 'post',
+                url:url,
+                data:{
+                    number: this.usernum,
+                    password: this.password
+                }
+            }).then(function(res){
+                console.log(res)
+                if(res.data.code==200){
+                    localStorage.setItem('token', res.data.data.token);
+                    that.fullscreenLoading=false;
+                    that.$router.push('/home/index')
+                }else{
+                    that.fullscreenLoading=false;
+                    that.$message({
+                        message: res.data.msg,
+                        type: 'warning'
+                    });
+                }
+            })
+        }
+    },
+    mounted() {
+        document.querySelector(".login-all").style.height = window.innerHeight + "px";
+    }
+}
+</script>
+<style scoped>
+.fout-box {
+    width: 100%;
+    text-align: center;
+    background-color: #0008;
+    padding: 20px;
+    color: #fff;
+    line-height: 34px;
+    position: fixed;
+    bottom: 0;
+    font-size: 14px;
+}
+
+#ckxjz {
+    cursor: pointer;
+    opacity: 0;
+}
+
+#ckxjz[type=checkbox]+span {
+    display: inline-block;
+    border-radius: 2px;
+    width: 15px;
+    height: 15px;
+    border: 1px solid #FFF;
+    background-color: transparent;
+    position: absolute;
+    left: 0px;
+    top: 3px;
+    cursor: pointer;
+}
+
+#ckxjz[type=checkbox]:checked+span::after {
+    content: '\2714';
+    color: #fff;
+    position: absolute;
+    font-size: 20px;
+    left: 2px;
+    bottom: -2px;
+}
+
+.login-all {
+    background-image: url("../assets/back.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.login-haed {
+    padding: 50px 100px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.img-logo {
+    display: flex;
+    align-items: center;
+}
+
+.logos {
+    color: #fff;
+    font-size: 48px;
+    font-weight: 600;
+    font-family: fangsong;
+    width: 80px;
+    height: 80px;
+}
+
+.logos img {
+    width: 100%;
+}
+
+.names {
+    color: #fff;
+    margin-left: 20px;
+    font-size: 24px;
+    font-weight: 600;
+    font-family: fangsong;
+}
+
+.help-box {
+    display: flex;
+    align-items: center;
+}
+
+.help-title {
+    color: #fff;
+}
+
+.help-btn {
+    margin-left: 20px;
+    color: #1DA3D8;
+}
+
+.login-box {
+    width: 400px;
+    height: 300px;
+    background-color: rgba(26, 30, 42, 0.7);
+    /*background-color: rgba(42,53,88);*/
+    margin: 0 auto;
+    border-radius: 20px;
+    padding: 20px 50px;
+    margin-top: 120px;
+}
+
+.login-title {
+    color: #fff;
+    font-size: 24px;
+    font-weight: 600;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.icon-mima {
+    font-weight: 600;
+
+}
+
+.icon-zhanghu {
+    color: #1DA3D8;
+}
+
+.icon-mima {
+    color: #1DA3D8;
+
+}
+
+.remembers {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+}
+
+.fotger-pass {
+    color: #1DA3D8;
+}
+
+.loginbtn {
+    background-color: transparent;
+    color: #1DA3D8;
+    border: 1px solid #1DA3D8;
+}
+
+.loginbtn-box {
+    text-align: center;
+    padding: 25px;
+}
+</style>
+<style >
+body {
+    margin: 0;
+    padding: 0;
+
+}
+
+.login-input .el-input input {
+    border-radius: 20px;
+    background-color: transparent;
+    color: #fff;
+}
+
+.loginbtn-box .el-button.is-round {
+    border-radius: 25px;
+    padding: 12px 50px;
+    font-size: 20px;
+}
+
+.login-input .el-input {
+    margin-top: 20px;
+}
+
+.el-input label {
+    color: #fff;
+}
+
+.el-input__prefix {
+    width: 40px;
+}
+
+.el-input--prefix .el-input__inner {
+    padding-left: 50px;
+}
+
+/*.accounts{
+        position: relative;
+    }
+    .accounts::after{
+        content: "请输入您的账户";
+        display: inline-block;
+        position: absolute;
+        color: #fff;
+        left: 50px;
+        top: -10px;
+        background-color: rgba(42,53,88);
+        /*background-image: url("../assets/zhedang.png");
+    }
+    .passwords{
+        position: relative;
+    }
+    .passwords::after{
+        content: "请输入您的密码";
+        display: inline-block;
+        position: absolute;
+        color: #fff;
+        left: 50px;
+        top: -10px;
+        background-color: rgba(42,53,88);
+        /*background-image: url("../assets/zhedang.png");
+    }*/</style>

src/components/child/Aideindex.vue

@@ -0,0 +1,415 @@
+<template>
+    <div>
+        <div class="all-box">
+            <div class="list-staff">
+                <div class="aide-schedule">
+                    <!-- 代办任务  日程表 -->
+                    <div class="top" style="background: #fff; padding: 8px 6px">
+                        <div class="modelBox">
+                        <span class="radis"></span>
+                        </div>
+                        <div class="tabs" style="width: 100%">
+                        <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar" />
+                        </div>
+                    </div>
+                </div>
+                <div class="staff-list">
+                    <div class="staff-title">
+                        <div>员工列表</div>
+                        <div class="staff-box">
+                            <el-input
+                                placeholder="请输入内容"
+                                v-model="input"
+                                clearable>
+                            </el-input>
+                            <el-button type="primary"><i class="icon-sousuo"></i></el-button>
+                        </div>
+                    </div>
+                    <template>
+                        <el-table
+                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                        border
+                        style="width: 100%">
+                            <el-table-column
+                                prop="num"
+                                label="序 号"
+                                width="60">
+                            </el-table-column>
+                            <el-table-column
+                                prop="name"
+                                width="100"
+                                label="员工号">
+                            </el-table-column>
+                            <el-table-column
+                                width="100" 
+                                prop="name"
+                                label="姓 名">
+                            </el-table-column>
+                            <el-table-column
+                                prop="date"
+                                label="分属公司"
+                                width="220">
+                            </el-table-column>
+                            <el-table-column
+                                prop="date"
+                                label="职 位"
+                                width="200">
+                            </el-table-column>
+                            <el-table-column
+                                prop="date"
+                                label="分机号"
+                                width="100">
+                            </el-table-column>
+                            <el-table-column
+                                prop="pnum"
+                                label="手机号"
+                                width="200">
+                            </el-table-column>
+                            <el-table-column
+                                prop="pnum"
+                                label="紧急联络电话"
+                                width="200">
+                            </el-table-column>
+                            <el-table-column
+                                prop="date"
+                                label="电子邮箱">
+                            </el-table-column>
+                        </el-table>
+                    </template>
+                    <div class="block">
+                        <el-pagination align='center' 
+                            @size-change="handleSizeChange" 
+                            @current-change="handleCurrentChange"
+                            :current-page="currentPage" 
+                            :page-sizes="[10,15,20]" 
+                            :page-size="pageSize" 
+                            layout="total, sizes, prev, pager, next" 
+                            :total="tableData.length">
+                        </el-pagination>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
+import tippy from 'tippy.js';
+export default {
+    components:{
+        FullCalendar
+    },
+    data(){
+        return{
+            tableData: [
+                {
+                    num:'1',
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'2',
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'3',
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'4',
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'5',
+                    date: '2016-05-08',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'6',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'7',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'8',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'9',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'10',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'11',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'12',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'13',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'14',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'15',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'16',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'17',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }
+            ],
+            currentPage: 1, // 当前页码
+            pageSize: 8 ,// 每页的数据条数
+            input:'',
+            //日程数据
+            calendarOptions: {
+                plugins: [
+                // 加载插件，V5采用插件模块方式加入
+                dayGridPlugin,
+                timeGridPlugin,
+                interactionPlugin, // needed for dateClick
+                ],
+                //height: 660, //日历高度
+                width: 600,
+                headerToolbar: {
+                // 头部toolba
+                left: 'prev,next today',
+                center: 'title',
+                right: 'timeGridDay,timeGridWeek,dayGridMonth',
+                // right: 'dayGridMonth'
+                },
+                handleWindowResize: true, //随浏览器窗口变化
+                initialView: 'dayGridMonth', // 初始化插件显示
+                // initialDate:""//初始化日期
+                // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
+                //editable: true, //是否可编辑
+                // droppable: true,//可拖拽的
+                // timeZone: 'local',//采用时区
+                selectable: true,
+                // selectMirror: true,
+                dayMaxEvents: true,
+                // weekends: true, // 是否显示一周七天
+                // select: this.handleDateSelect,
+                // eventClick: this.handleEventClick, // 日程点击事件
+                eventMouseEnter: this.handleEventMouseEnter, // 用户将鼠标悬停在事件上时触发
+                // eventsSet: this.handleEvents,
+                dateClick: this.handleDateClick,//日期方格点击事件
+                eventClick: this.handleEventClick, //日程点击事件
+                locale: zhCnLocale,
+                nextDayThreshold: '01:00:00',
+                events: [
+                //日程事件的json
+                    { title: '雷怡', date: '2023-03-24 12:00:00',color:'#ff9900'},
+                    { title: '雷怡', date: '2023-03-24 15:00:00',color:'#ff9900'},
+                    { title: 'event 1', start: '2023-03-25 10:59:23',end:'2023-03-26 14:59:23' },
+                    { title: 'event 3', date: '2023-03-25 08:23:00' },
+                    { title: 'event 4', date: '2023-03-25 09:30:00' },
+                    { title: 'event 5', date: '2023-03-26 12:00:00' },
+                    { title: 'event 2', date: '2023-03-26 15:00:00' }
+                ],
+                // datesSet: this.handleDateSet,
+                /* you can update a remote database when these fire:
+                eventAdd:
+                eventChange:
+                eventRemove:
+                */
+            }
+        }
+    },
+    methods:{
+        //每页条数改变时触发 选择一页显示多少行
+        handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        },
+        handleEventMouseEnter(info) {
+            console.log(info, 'yyyy')
+            let col = info.event.borderColor
+            let eve = info.event._def.extendedProps
+            let category = info.event._def.extendedProps.category
+
+            tippy(info.el, {
+                // content:"<div style='width: 280px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999'>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称：" + info.event.title+"</div>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型："+eve.type+"</div>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间："+eve.times+"</div>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态："+eve.status+"</div>" +
+                //         "</div>",
+                content: `<div style='width: 260px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999;'>
+                        <div style='display:flex;color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}">
+                            <div><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称： </div>
+                            <div style="width:161px;white-space:normal;overflow: auto;table-layout:fixed; word-break: break-all; height:auto;display:inner-block">${info.event.title}</div>
+                        </div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型：${eve.type}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间：${eve.times}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态：${eve.status}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>年份：${eve.year}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>领域角色：${eve.depRoleName}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>姓名：${eve.name}</div>
+                        </div>`,
+                theme: 'light', //主题选取
+                // trigger: 'click', //触发类型
+                interactive: true, //可交互的
+                placement: 'top-start', //悬浮框位置
+                allowHTML: true, //是否允许html文本
+                zIndex: 99999,
+            })
+        },
+        handleEventClick(info){
+            console.log(info)
+        },
+        handleDateClick(inif){
+            // console.log(info)
+        }
+    }
+}
+</script>
+<style>
+    .staff-list{
+        background-color: #fff;
+        padding: 10px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 10px;
+    }
+    .staff-title{
+        display: flex;
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .staff-box{
+        display: flex;
+    }
+    .staff-box>button{
+        margin-left: 10px;
+        padding: 8px 20px;
+    }
+    .aide-schedule{
+        margin-bottom: 20px;
+        border-radius: 10px;
+        box-shadow: 0 0 5px #0005;
+        overflow: hidden;
+    }
+
+    /*element*/
+    .el-table td.el-table__cell div{
+        text-align: center;
+    }
+    .el-table th.el-table__cell>.cell{
+        text-align: center;
+    }
+
+    /*FullCalendar*/
+    .fc .fc-toolbar-title{
+        color: #555;
+    }
+    .fc .fc-button-primary{
+        background-color: #5EADFF;
+        border-color: #5EADFF;
+    }
+    .fc .fc-button-primary:hover{
+        background-color: #108dff;
+        border-color: #108dff;
+    }
+    .fc .fc-button-primary:not(:disabled):active:focus {
+        box-shadow: none;
+    }
+    .fc .fc-button-primary:not(:disabled):active {
+        background-color: #108dff;
+        border-color: #108dff;
+    }
+    .fc .fc-button-primary:focus {
+        box-shadow: none;
+    }
+    .fc .fc-button-primary:disabled {
+        background-color: #5EADFF;
+        border-color: #5EADFF;
+    }
+    .fc .fc-button-primary:not(:disabled).fc-button-active:focus{
+        box-shadow:none;
+    }
+    .fc .fc-button-primary:not(:disabled).fc-button-active{
+        background-color: #108dff;
+        border-color: #108dff;
+    }
+    .fc .fc-toolbar.fc-header-toolbar{
+        margin-bottom: 0.1em;
+    }
+</style>

src/components/child/AuthorityJob.vue

@@ -0,0 +1,356 @@
+<template>
+    <div>
+        <div class="job-box">
+            <div class="job-head">
+                <div>
+                    <el-select @change="Inquirechange()" v-model="value" clearable placeholder="权限模块">
+                        <el-option
+                        v-for="item in authority"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div>
+                    <el-select v-model="valuecorporation" clearable placeholder="公司">
+                        <el-option
+                        v-for="item in corporation"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                    <el-select v-model="valuedepartmental" clearable placeholder="部门">
+                        <el-option
+                        v-for="item in departmental"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                    <el-select v-model="valueposition" clearable placeholder="职位">
+                        <el-option
+                        v-for="item in position"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                    <el-button type="primary">保 存</el-button>
+                </div>
+            </div>
+            <div class="job-table">
+                <el-table
+                    :data="authorityLists.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                    border
+                    @select="handleSelect"
+                    style="width: 100%">
+                        <el-table-column
+                        type="selection"
+                        width="55">
+                        </el-table-column>
+                        <el-table-column
+                        prop="title"
+                        label="权限页面"
+                        width="180">
+                        </el-table-column>
+                        <el-table-column width="55" label="查看" >
+                            <template slot-scope="scope">
+                                <el-checkbox v-model="authorityLists[scope.$index].ck"   @change="selectRadiocheck(scope.$index,scope.row)" :disabled="authorityLists[scope.$index].disabled"></el-checkbox>
+                            </template>
+                        </el-table-column>
+                        <el-table-column width="55" label="删除" >
+                            <template slot-scope="scope">
+                                <el-checkbox v-model="authorityLists[scope.$index].sc"   @change="selectRadioerase(scope.$index,scope.row)" :disabled="authorityLists[scope.$index].disabled"></el-checkbox>
+                            </template>
+                        </el-table-column>
+                        <el-table-column width="55" label="编辑" >
+                            <template slot-scope="scope">
+                                <el-checkbox v-model="authorityLists[scope.$index].bj"   @change="selectRadioedit(scope.$index,scope.row)" :disabled="authorityLists[scope.$index].disabled"></el-checkbox>
+                            </template>
+                        </el-table-column>
+                        <el-table-column width="55" label="下载" >
+                            <template slot-scope="scope">
+                                <el-checkbox v-model="authorityLists[scope.$index].xz"   @change="selectRadiodown(scope.$index,scope.row)" :disabled="authorityLists[scope.$index].disabled"></el-checkbox>
+                            </template>
+                        </el-table-column>
+                        <el-table-column width="55" label="上传" >
+                            <template slot-scope="scope">
+                                <el-checkbox v-model="authorityLists[scope.$index].scc"   @change="selectRadioup(scope.$index,scope.row)" :disabled="authorityLists[scope.$index].disabled"></el-checkbox>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                        prop="address"
+                        label="备注">
+                        </el-table-column>
+                </el-table>
+                <div class="block">
+                    <el-pagination align='center' 
+                        @size-change="handleSizeChange" 
+                        @current-change="handleCurrentChange"
+                        :current-page="currentPage" 
+                        :page-sizes="[14,20]" 
+                        :page-size="pageSize" 
+                        layout="total, sizes, prev, pager, next" 
+                        :total="authorityLists.length">
+                    </el-pagination>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            authority: [{
+                value: '1',
+                label: '人事'
+                }, 
+                {
+                value: '2',
+                label: '国交'
+                }, 
+                {
+                value: '3',
+                label: '财务'
+                }, 
+                {
+                value: '4',
+                label: '报批'
+                }, 
+                {
+                value: '5',
+                label: '酒店'
+                }],
+            value: '',
+
+            corporation: [{
+                value: '选项1',
+                label: '四川'
+                }, 
+                {
+                value: '选项2',
+                label: '成都'
+                }
+            ],
+            valuecorporation: '',
+
+            departmental: [{
+                value: '选项1',
+                label: '信息部'
+                }, 
+                {
+                value: '选项2',
+                label: '市场部'
+                }
+            ],
+            valuedepartmental: '',
+
+            position: [{
+                value: '选项1',
+                label: '后端'
+                }, 
+                {
+                value: '选项2',
+                label: 'UI'
+                }
+            ],
+            valueposition: '',
+
+            authorityLists:[],
+            authorityList:[
+                {
+                    title:"人事权限1",
+                    moduleId:"1",
+                    ck:false,
+                    sc:false,
+                    bj:true,
+                    xz:false,
+                    scc:false
+                },
+                {
+                    title:"人事权限2",
+                    moduleId:"1"
+                },
+                {
+                    title:"人事权限3",
+                    moduleId:"1"
+                },
+                {
+                    title:"人事权限4",
+                    moduleId:"1"
+                },
+                {
+                    title:"人事权限5",
+                    moduleId:"1"
+                },
+                {
+                    title:"国交权限1",
+                    moduleId:"2"
+                },
+                {
+                    title:"国交权限2",
+                    moduleId:"2"
+                },
+                {
+                    title:"国交权限3",
+                    moduleId:"2"
+                },
+                {
+                    title:"国交权限4",
+                    moduleId:"2"
+                },
+                {
+                    title:"国交权限5",
+                    moduleId:"2"
+                },
+                {
+                    title:"财务权限1",
+                    moduleId:"3"
+                },
+                {
+                    title:"财务权限2",
+                    moduleId:"3"
+                },
+                {
+                    title:"财务权限3",
+                    moduleId:"3"
+                },
+                {
+                    title:"财务权限4",
+                    moduleId:"3"
+                },
+                {
+                    title:"财务权限5",
+                    moduleId:"3"
+                },
+                {
+                    title:"报批权限1",
+                    moduleId:"4"
+                },
+                {
+                    title:"报批权限2",
+                    moduleId:"4"
+                },
+                {
+                    title:"报批权限3",
+                    moduleId:"4"
+                },
+                {
+                    title:"报批权限4",
+                    moduleId:"4"
+                },
+                {
+                    title:"报批权限5",
+                    moduleId:"4"
+                },
+                {
+                    title:"酒店权限1",
+                    moduleId:"5"
+                },
+                {
+                    title:"酒店权限2",
+                    moduleId:"5"
+                },
+                {
+                    title:"酒店权限3",
+                    moduleId:"5"
+                },
+                {
+                    title:"酒店权限4",
+                    moduleId:"5"
+                },
+                {
+                    title:"酒店权限5",
+                    moduleId:"5"
+                }
+            ],
+            currentPage: 1, // 当前页码
+            pageSize: 14 ,// 每页的数据条数
+            stateArr:[],
+            selectedAccount:[],
+        }
+    },
+    methods:{
+        //每页条数改变时触发 选择一页显示多少行
+        handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        },
+        Inquirechange(){
+            console.log(this.value)
+            var newarr=[];
+            if(this.input==""){
+                newarr=this.authorityList;
+            }else{
+                for(var i=0;i<this.authorityList.length;i++){
+                    if(this.authorityList[i].moduleId.includes(this.value)){
+                        newarr.push(this.authorityList[i]);
+                    }
+                }
+            }
+            this.authorityLists=newarr;
+        },
+        //多选框选中方法
+        handleSelect(selection, row) {
+            console.log(selection)
+            this.stateArr[this.currentPage - 1] = selection
+            this.selectedAccount = this.stateArr.flat()
+            console.log(this.selectedAccount)
+        },
+        selectRadiocheck(index,row){
+            console.log(index)
+            console.log(row)
+        },
+        selectRadioerase(index,row){
+            console.log(index,row)
+        },
+        selectRadioedit(index,row){
+            console.log(index,row)
+        },
+        selectRadiodown(index,row){
+            console.log(index,row)
+        },
+        selectRadioup(index,row){
+            console.log(index,row)
+        },
+    },
+    mounted(){
+        this.authorityLists=this.authorityList
+    }
+}
+</script>
+<style>
+    body{
+        margin: 0;
+        padding: 0;
+    }
+    .job-head{
+        display: flex;
+        justify-content: space-between;
+    }
+    .job-box{
+        background-color: #fff;
+        padding: 10px;
+        border-radius: 10px;
+    }
+    .job-table{
+        margin-top: 10px;
+    }
+    .job-table .block{
+        margin-top: 10px;
+    }
+    .job-table .el-table--enable-row-transition .el-table__body td.el-table__cell{
+        text-align: center;
+    }
+    .job-table .el-table--border .el-table__cell:first-child .cell{
+        text-align: center;
+    }
+</style>

src/components/child/Generalindex.vue

@@ -0,0 +1,556 @@
+<template>
+    <div>
+        <div class="num-ul">
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>市场客户总数量</p>
+                    <p>4% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-renminbi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>当月需对接客户数量</p>
+                    <p>1% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-fuwuqi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>当月出团数量</p>
+                    <p>3% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-HCplanshuliang"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>至今未收款项(团组数)</p>
+                    <p>5% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-tongjitu"></i>
+                </div>
+            </div>
+        </div>
+        <div class="tabular-all">
+            <div class="list-groups">
+                <div class="groups-list">
+                    <div class="list-title">
+                        <div>团组列表</div>
+                        <div class="search-box">
+                            <el-input
+                                placeholder="请输入内容"
+                                v-model="input"
+                                clearable>
+                            </el-input>
+                            <el-button type="primary"><i class="icon-sousuo"></i></el-button>
+                        </div>
+                    </div>
+                    <template>
+                        <el-table
+                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                        border
+                        style="width: 100%">
+                            <el-table-column
+                                prop="date"
+                                label="团组名"
+                                width="220">
+                            </el-table-column>
+                            <el-table-column
+                                prop="name"
+                                label="团组单位">
+                            </el-table-column>
+                            <el-table-column
+                                width="260" 
+                                prop="address"
+                                label="出访时间">
+                            </el-table-column>
+                            <el-table-column width="80" label="管控">
+                                    <el-button type="primary" size="mini">
+                                    <i class="icon-xianchangguankong"></i>
+                                    </el-button>
+                            </el-table-column>
+                        </el-table>
+                    </template>
+                    <div class="block">
+                        <el-pagination align='center' 
+                            @size-change="handleSizeChange" 
+                            @current-change="handleCurrentChange"
+                            :current-page="currentPage" 
+                            :page-sizes="[8,10,15,20]" 
+                            :page-size="pageSize" 
+                            layout="total, sizes, prev, pager, next" 
+                            :total="tableData.length">
+                        </el-pagination>
+                    </div>
+                </div>
+                <div class="sources-ul">
+                    <div class="sources-li">
+                        <div class="sources-tlite">
+                            <p>市场客户资源</p>
+                        </div>
+                        <div class="sources-icon">
+                            <i class="icon-shichangbu"></i>
+                        </div>
+                    </div>
+                    <div class="sources-li">
+                        <div class="sources-tlite">
+                            <p>车导地接资源</p>
+                        </div>
+                        <div class="sources-icon">
+                            <i class="icon-dijie"></i>
+                        </div>
+                    </div>
+                    <div class="sources-li">
+                        <div class="sources-tlite">
+                            <p>策划活动资源</p>
+                        </div>
+                        <div class="sources-icon">
+                            <i class="icon-xiangmucehua"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="schedule-box">
+                <div class="schedule">
+                    <!-- 代办任务  日程表 -->
+                    <div class="top" style="background: #fff; padding: 8px 6px">
+                        <div class="modelBox">
+                        <span class="radis"></span>
+                        </div>
+                        <div class="tabs" style="width: 100%">
+                        <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
+import tippy from 'tippy.js';
+export default {
+    components:{
+        FullCalendar
+    },
+    data() {
+        return {
+            tableData: [
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-08',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }
+            ],
+            currentPage: 1, // 当前页码
+            pageSize: 8 ,// 每页的数据条数
+            //日程数据
+            calendarOptions: {
+                plugins: [
+                // 加载插件，V5采用插件模块方式加入
+                dayGridPlugin,
+                timeGridPlugin,
+                interactionPlugin, // needed for dateClick
+                ],
+                height: 660, //日历高度
+                width: 600,
+                headerToolbar: {
+                // 头部toolba
+                left: 'prev,next today',
+                center: 'title',
+                right: 'timeGridDay,timeGridWeek,dayGridMonth',
+                // right: 'dayGridMonth'
+                },
+                handleWindowResize: true, //随浏览器窗口变化
+                initialView: 'dayGridMonth', // 初始化插件显示
+                // initialDate:""//初始化日期
+                // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
+                //editable: true, //是否可编辑
+                // droppable: true,//可拖拽的
+                // timeZone: 'local',//采用时区
+                selectable: true,
+                // selectMirror: true,
+                dayMaxEvents: true,
+                // weekends: true, // 是否显示一周七天
+                // select: this.handleDateSelect,
+                // eventClick: this.handleEventClick, // 日程点击事件
+                eventMouseEnter: this.handleEventMouseEnter, // 用户将鼠标悬停在事件上时触发
+                // eventsSet: this.handleEvents,
+                dateClick: this.handleDateClick,//日期方格点击事件
+                eventClick: this.handleEventClick, //日程点击事件
+                locale: zhCnLocale,
+                nextDayThreshold: '01:00:00',
+                events: [
+                //日程事件的json
+                    { title: '雷怡', date: '2023-03-24 12:00:00',color:'#ff9900'},
+                    { title: '雷怡', date: '2023-03-24 15:00:00',color:'#ff9900'},
+                    { title: 'event 1', start: '2023-03-25 10:59:23',end:'2023-03-26 14:59:23' },
+                    { title: 'event 3', date: '2023-03-25 08:23:00' },
+                    { title: 'event 4', date: '2023-03-25 09:30:00' },
+                    { title: 'event 5', date: '2023-03-26 12:00:00' },
+                    { title: 'event 2', date: '2023-03-26 15:00:00' }
+                ],
+                // datesSet: this.handleDateSet,
+                /* you can update a remote database when these fire:
+                eventAdd:
+                eventChange:
+                eventRemove:
+                */
+            },
+            input: ''
+        }
+    },
+    methods:{
+        //每页条数改变时触发 选择一页显示多少行
+        handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        },
+        handleEventMouseEnter(info) {
+            console.log(info, 'yyyy')
+            let col = info.event.borderColor
+            let eve = info.event._def.extendedProps
+            let category = info.event._def.extendedProps.category
+
+            tippy(info.el, {
+                // content:"<div style='width: 280px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999'>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称：" + info.event.title+"</div>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型："+eve.type+"</div>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间："+eve.times+"</div>" +
+                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态："+eve.status+"</div>" +
+                //         "</div>",
+                content: `<div style='width: 260px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999;'>
+                        <div style='display:flex;color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}">
+                            <div><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称： </div>
+                            <div style="width:161px;white-space:normal;overflow: auto;table-layout:fixed; word-break: break-all; height:auto;display:inner-block">${info.event.title}</div>
+                        </div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型：${eve.type}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间：${eve.times}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态：${eve.status}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>年份：${eve.year}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>领域角色：${eve.depRoleName}</div>
+                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>姓名：${eve.name}</div>
+                        </div>`,
+                theme: 'light', //主题选取
+                // trigger: 'click', //触发类型
+                interactive: true, //可交互的
+                placement: 'top-start', //悬浮框位置
+                allowHTML: true, //是否允许html文本
+                zIndex: 99999,
+            })
+        },
+        handleEventClick(info){
+            console.log(info)
+        },
+        handleDateClick(inif){
+            // console.log(info)
+        }
+    },
+    mounted(){
+        // this.calendarOptions.events.push({
+        // color: '#ff9900', 
+        // title: "kljkl",
+        // date: "yuuyjyu",
+        // status: "jtyjtyj",
+        // type: "hfghfghfg",
+        // times: "gererg",
+        // category: "wefwefw"
+        // // title: element.name,
+        // // date: element.time,
+        // // status: this.statusName,
+        // // type: element.type,
+        // // times: element.time,
+        // // category: element.category
+        // })
+    }
+}
+</script>
+<style>
+    .num-ul{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+    .num-li{
+        width: 21%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 10px;
+        padding: 25px 20px;
+    }
+    .num-li:nth-child(1){
+        background-color: #6bafbd !important;
+    }
+    .num-li:nth-child(2){
+        background-color: #fc8675 !important;
+    }
+    .num-li:nth-child(3){
+        background-color: #f3ce85 !important;
+    }
+    .num-li:nth-child(4){
+        background-color: #65cea7 !important;
+    }
+    .num-icon i{
+        width: 70px;
+        height: 90px;
+        display: inline-block;
+        font-size: 70px;
+        display: flex;
+        align-items: center;
+        color: #fff8;
+    }
+    .num-tlite div{
+        font-size: 30px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(2){
+        font-size: 14px;
+        margin: 5px  0px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(3){
+        font-size: 12px;
+        color: #fff;
+    }
+    .list-groups{
+        width: 60%;
+       
+    }
+    .groups-list{
+        background-color: #fff;
+        padding: 10px;
+        border-radius: 10px;
+        box-shadow: 0 0 5px #0003;
+    }
+    .list-groups .block{
+        margin-top: 20px;
+    }
+    .list-title{
+        display: flex;
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .sources-ul{
+        margin-top: 25px;
+        display: flex;
+        justify-content: space-between;
+    }
+    .sources-li{
+        width: 30%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 10px;
+        padding: 14px 0px;
+    }
+    .sources-icon i{
+        width: 70px;
+        height: 90px;
+        display: inline-block;
+        font-size: 70px;
+        display: flex;
+        align-items: center;
+        color: #fff8;
+    }
+    .sources-tlite{
+        width: 70%;
+    }
+    .sources-icon{
+        margin-right: 20px;
+    }
+    .sources-tlite p{
+        text-align: center;
+        color: #fff;
+        font-size: 24px;
+        font-weight: 600;
+    }
+    .sources-li:nth-child(1){
+        background-color: #6bafbd !important;
+    }
+    .sources-li:nth-child(2){
+        background-color: #f3ce85 !important;
+    }
+    .sources-li:nth-child(3){
+        background-color: #65cea7 !important;
+    }
+    .tabular-all{
+        display: flex;
+        justify-content: space-between;
+    }
+    .schedule-box{
+        width: 39%;
+    }
+    .schedule{
+        padding: 10px;
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 0 5px #0005;
+    }
+    .fc-toolbar-chunk .fc-toolbar-title{
+        color: #555;
+    }
+    .search-box{
+        display: flex;
+    }
+    .search-box>button{
+        margin-left: 10px;
+        padding: 8px 20px;
+    }
+    .icon-shichangbu{
+        font-size: 58px;
+    }
+    .groups-list .el-table .el-table__cell{
+        padding: 8px 0;
+    }
+    .fc .fc-button-primary{
+        background-color: #5EADFF;
+        border-color: #5EADFF;
+    }
+    .fc .fc-button-primary:hover{
+        background-color: #108dff;
+        border-color: #108dff;
+    }
+    .fc .fc-button-primary:not(:disabled):active:focus {
+        box-shadow: none;
+    }
+    .fc .fc-button-primary:not(:disabled):active {
+        background-color: #108dff;
+        border-color: #108dff;
+    }
+    .fc .fc-button-primary:focus {
+        box-shadow: none;
+    }
+    .fc .fc-button-primary:disabled {
+        background-color: #5EADFF;
+        border-color: #5EADFF;
+    }
+    .fc .fc-button-primary:not(:disabled).fc-button-active:focus{
+        box-shadow:none;
+    }
+    .fc .fc-button-primary:not(:disabled).fc-button-active{
+        background-color: #108dff;
+        border-color: #108dff;
+    }
+    .fc .fc-toolbar.fc-header-toolbar{
+        margin-bottom: 0.1em;
+    }
+    @media screen and (max-width: 1600px) {
+        .tabular-all{
+            display: inline-block;
+            width:100% ;
+        }
+        .list-groups{
+            width:100% ;
+        }
+        .schedule-box{
+            margin-top: 20px;
+            width: 100%;
+        }
+      }
+</style>

src/components/child/Globalindex.vue

@@ -0,0 +1,342 @@
+<template>
+    <div>
+        <div class="num-ul">
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>今年出团数量</p>
+                    <p>4% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-renminbi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>报批管理</p>
+                    <p>1% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-fuwuqi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>团组资料库</p>
+                    <p>3% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-HCplanshuliang"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>费用报账</p>
+                    <p>5% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-tongjitu"></i>
+                </div>
+            </div>
+        </div>
+        <div class="global-list">
+            <div class="global-title">
+                <div>团组列表</div>
+                <div class="global-box">
+                    <el-input
+                        placeholder="请输入内容"
+                        v-model="input"
+                        clearable>
+                    </el-input>
+                    <el-button type="primary"><i class="icon-sousuo"></i></el-button>
+                </div>
+            </div>
+            <template>
+                <el-table
+                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                border
+                style="width: 100%">
+                    <el-table-column
+                        prop="num"
+                        label="序 号"
+                        width="60">
+                    </el-table-column>
+                    <el-table-column
+                        prop="name"
+                        width="100"
+                        label="员工号">
+                    </el-table-column>
+                    <el-table-column
+                        width="100" 
+                        prop="name"
+                        label="姓 名">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="分属公司"
+                        width="220">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="职 位"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="分机号"
+                        width="100">
+                    </el-table-column>
+                    <el-table-column
+                        prop="pnum"
+                        label="手机号"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="pnum"
+                        label="紧急联络电话"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="电子邮箱">
+                    </el-table-column>
+                    <el-table-column width="80" label="管控">
+                        <el-button type="primary" size="mini">
+                            <i class="icon-xianchangguankong"></i>
+                        </el-button>
+                    </el-table-column>
+                </el-table>
+            </template>
+            <div class="block">
+                <el-pagination align='center' 
+                    @size-change="handleSizeChange" 
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage" 
+                    :page-sizes="[10,15,20]" 
+                    :page-size="pageSize" 
+                    layout="total, sizes, prev, pager, next" 
+                    :total="tableData.length">
+                </el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            tableData: [
+                {
+                    num:'1',
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'2',
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'3',
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'4',
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'5',
+                    date: '2016-05-08',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'6',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'7',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'8',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'9',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'10',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'11',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'12',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'13',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'14',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'15',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'16',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'17',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }
+            ],
+            currentPage: 1, // 当前页码
+            pageSize: 10 ,// 每页的数据条数
+            input:'',
+        }
+    },
+    methods:{
+         //每页条数改变时触发 选择一页显示多少行
+         handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        }
+    }
+}
+</script>
+<style>
+    .num-ul{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+    .num-li{
+        width: 21%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 10px;
+        padding: 25px 20px;
+    }
+    .num-li:nth-child(1){
+        background-color: #6bafbd !important;
+    }
+    .num-li:nth-child(2){
+        background-color: #fc8675 !important;
+    }
+    .num-li:nth-child(3){
+        background-color: #f3ce85 !important;
+    }
+    .num-li:nth-child(4){
+        background-color: #65cea7 !important;
+    }
+    .num-icon i{
+        width: 70px;
+        height: 90px;
+        display: inline-block;
+        font-size: 70px;
+        display: flex;
+        align-items: center;
+        color: #fff8;
+    }
+    .num-tlite div{
+        font-size: 30px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(2){
+        font-size: 14px;
+        margin: 5px  0px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(3){
+        font-size: 12px;
+        color: #fff;
+    }
+    .global-list{
+        background-color: #fff;
+        padding: 10px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 10px;
+    }
+    .global-title{
+        display: flex;
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .global-box{
+        display: flex;
+    }
+    .global-box>button{
+        margin-left: 10px;
+        padding: 8px 20px;
+    }
+</style>

src/components/child/Marketindex.vue

@@ -0,0 +1,337 @@
+<template>
+    <div>
+        <div class="num-ul">
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>市场客户资源</p>
+                    <p>4% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-renminbi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>当月需对接客户数量</p>
+                    <p>1% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-fuwuqi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>费用报账</p>
+                    <p>3% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-HCplanshuliang"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>岗位提成</p>
+                    <p>5% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-tongjitu"></i>
+                </div>
+            </div>
+        </div>
+        <div class="market-list">
+            <div class="market-title">
+                <div>员工列表</div>
+                <div class="market-box">
+                    <el-input
+                        placeholder="请输入内容"
+                        v-model="input"
+                        clearable>
+                    </el-input>
+                    <el-button type="primary"><i class="icon-sousuo"></i></el-button>
+                </div>
+            </div>
+            <template>
+                <el-table
+                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                border
+                style="width: 100%">
+                    <el-table-column
+                        prop="num"
+                        label="序 号"
+                        width="60">
+                    </el-table-column>
+                    <el-table-column
+                        prop="name"
+                        width="100"
+                        label="员工号">
+                    </el-table-column>
+                    <el-table-column
+                        width="100" 
+                        prop="name"
+                        label="姓 名">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="分属公司"
+                        width="220">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="职 位"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="分机号"
+                        width="100">
+                    </el-table-column>
+                    <el-table-column
+                        prop="pnum"
+                        label="手机号"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="pnum"
+                        label="紧急联络电话"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="电子邮箱">
+                    </el-table-column>
+                </el-table>
+            </template>
+            <div class="block">
+                <el-pagination align='center' 
+                    @size-change="handleSizeChange" 
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage" 
+                    :page-sizes="[10,15,20]" 
+                    :page-size="pageSize" 
+                    layout="total, sizes, prev, pager, next" 
+                    :total="tableData.length">
+                </el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            tableData: [
+                {
+                    num:'1',
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'2',
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'3',
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'4',
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'5',
+                    date: '2016-05-08',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'6',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'7',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'8',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'9',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'10',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'11',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'12',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'13',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'14',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'15',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'16',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'17',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }
+            ],
+            currentPage: 1, // 当前页码
+            pageSize: 10 ,// 每页的数据条数
+            input:'',
+        }
+    },
+    methods:{
+         //每页条数改变时触发 选择一页显示多少行
+         handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        }
+    }
+}
+</script>
+<style>
+    .num-ul{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+    .num-li{
+        width: 21%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 10px;
+        padding: 25px 20px;
+    }
+    .num-li:nth-child(1){
+        background-color: #6bafbd !important;
+    }
+    .num-li:nth-child(2){
+        background-color: #fc8675 !important;
+    }
+    .num-li:nth-child(3){
+        background-color: #f3ce85 !important;
+    }
+    .num-li:nth-child(4){
+        background-color: #65cea7 !important;
+    }
+    .num-icon i{
+        width: 70px;
+        height: 90px;
+        display: inline-block;
+        font-size: 70px;
+        display: flex;
+        align-items: center;
+        color: #fff8;
+    }
+    .num-tlite div{
+        font-size: 30px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(2){
+        font-size: 14px;
+        margin: 5px  0px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(3){
+        font-size: 12px;
+        color: #fff;
+    }
+    .market-list{
+        background-color: #fff;
+        padding: 10px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 10px;
+    }
+    .market-title{
+        display: flex;
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .market-box{
+        display: flex;
+    }
+    .market-box>button{
+        margin-left: 10px;
+        padding: 8px 20px;
+    }
+</style>

src/components/child/financeindex.vue

@@ -0,0 +1,337 @@
+<template>
+    <div>
+        <div class="num-ul">
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>团组费用审核</p>
+                    <p>4% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-renminbi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>日常费用审核</p>
+                    <p>1% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-fuwuqi"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>付款申请</p>
+                    <p>3% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-HCplanshuliang"></i>
+                </div>
+            </div>
+            <div class="num-li">
+                <div class="num-tlite">
+                    <div>2442</div>
+                    <p>至今未收款项(团组数)</p>
+                    <p>5% Higher than last week</p>
+                </div>
+                <div class="num-icon">
+                    <i class="iconfont icon-tongjitu"></i>
+                </div>
+            </div>
+        </div>
+        <div class="finance-list">
+            <div class="finance-title">
+                <div>员工列表</div>
+                <div class="finance-box">
+                    <el-input
+                        placeholder="请输入内容"
+                        v-model="input"
+                        clearable>
+                    </el-input>
+                    <el-button type="primary"><i class="icon-sousuo"></i></el-button>
+                </div>
+            </div>
+            <template>
+                <el-table
+                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                border
+                style="width: 100%">
+                    <el-table-column
+                        prop="num"
+                        label="序 号"
+                        width="60">
+                    </el-table-column>
+                    <el-table-column
+                        prop="name"
+                        width="100"
+                        label="员工号">
+                    </el-table-column>
+                    <el-table-column
+                        width="100" 
+                        prop="name"
+                        label="姓 名">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="分属公司"
+                        width="220">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="职 位"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="分机号"
+                        width="100">
+                    </el-table-column>
+                    <el-table-column
+                        prop="pnum"
+                        label="手机号"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="pnum"
+                        label="紧急联络电话"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="date"
+                        label="电子邮箱">
+                    </el-table-column>
+                </el-table>
+            </template>
+            <div class="block">
+                <el-pagination align='center' 
+                    @size-change="handleSizeChange" 
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage" 
+                    :page-sizes="[10,15,20]" 
+                    :page-size="pageSize" 
+                    layout="total, sizes, prev, pager, next" 
+                    :total="tableData.length">
+                </el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            tableData: [
+                {
+                    num:'1',
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'2',
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'3',
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'4',
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'5',
+                    date: '2016-05-08',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'6',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'7',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'8',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'9',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'10',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'11',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'12',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'13',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'14',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'15',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'16',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'17',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }
+            ],
+            currentPage: 1, // 当前页码
+            pageSize: 10 ,// 每页的数据条数
+            input:'',
+        }
+    },
+    methods:{
+         //每页条数改变时触发 选择一页显示多少行
+         handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        }
+    }
+}
+</script>
+<style>
+    .num-ul{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+    .num-li{
+        width: 21%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 10px;
+        padding: 25px 20px;
+    }
+    .num-li:nth-child(1){
+        background-color: #6bafbd !important;
+    }
+    .num-li:nth-child(2){
+        background-color: #fc8675 !important;
+    }
+    .num-li:nth-child(3){
+        background-color: #f3ce85 !important;
+    }
+    .num-li:nth-child(4){
+        background-color: #65cea7 !important;
+    }
+    .num-icon i{
+        width: 70px;
+        height: 90px;
+        display: inline-block;
+        font-size: 70px;
+        display: flex;
+        align-items: center;
+        color: #fff8;
+    }
+    .num-tlite div{
+        font-size: 30px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(2){
+        font-size: 14px;
+        margin: 5px  0px;
+        color: #fff;
+    }
+    .num-tlite p:nth-child(3){
+        font-size: 12px;
+        color: #fff;
+    }
+    .finance-list{
+        background-color: #fff;
+        padding: 10px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 10px;
+    }
+    .finance-title{
+        display: flex;
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .finance-box{
+        display: flex;
+    }
+    .finance-box>button{
+        margin-left: 10px;
+        padding: 8px 20px;
+    }
+</style>

src/components/child/index.vue

@@ -0,0 +1,308 @@
+<template>
+    <div>
+        <div class="communal-list">
+            <div class="communal-title">
+                <div>员工列表</div>
+                <div class="communal-box">
+                    <el-input
+                        @input="Inquireclick()"
+                        placeholder="请输入内容"
+                        v-model="input"
+                        clearable>
+                    </el-input>
+                    <el-button @click="Inquireclick()" type="primary"><i class="icon-sousuo"></i></el-button>
+                </div>
+            </div>
+            <template>
+                <el-table
+                :data="tableDatas.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                border
+                style="width: 100%">
+                    <el-table-column
+                        prop="num"
+                        label="序 号"
+                        width="60">
+                        <template slot-scope="scope">
+                            {{(currentPage - 1) * pageSize + scope.$index + 1}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="number"
+                        width="100"
+                        label="员工号">
+                    </el-table-column>
+                    <el-table-column
+                        width="100" 
+                        prop="cnName"
+                        label="姓 名">
+                    </el-table-column>
+                    <el-table-column
+                        prop="companyName"
+                        label="分属公司"
+                        width="220">
+                    </el-table-column>
+                    <el-table-column
+                        prop="jobName"
+                        label="职 位"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="ext"
+                        label="分机号"
+                        width="100">
+                    </el-table-column>
+                    <el-table-column
+                        prop="phone"
+                        label="手机号"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="urgentPhone"
+                        label="紧急联络电话"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="email"
+                        label="电子邮箱">
+                    </el-table-column>
+                </el-table>
+            </template>
+            <div class="block">
+                <el-pagination align='center' 
+                    @size-change="handleSizeChange" 
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage" 
+                    :page-sizes="[10,15,20]" 
+                    :page-size="pageSize" 
+                    layout="total, sizes, prev, pager, next" 
+                    :total="tableDatas.length">
+                </el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { co, el } from '@fullcalendar/core/internal-common';
+export default {
+    data() {
+        return {
+            tableDatas:[],
+            tableData: [
+                {
+                    num:'1',
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'2',
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'3',
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'4',
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'5',
+                    date: '2016-05-08',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'6',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'7',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'8',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'9',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'10',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'11',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'12',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'13',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'14',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'15',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'16',
+                    date: '2016-05-06',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, 
+                {
+                    num:'17',
+                    date: '2016-05-07',
+                    name: '王小虎',
+                    pnum:'15896358421',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }
+            ],
+            currentPage: 1, // 当前页码
+            pageSize: 15 ,// 每页的数据条数
+            input:'',
+            token:''
+        }
+    },
+    methods:{
+         //每页条数改变时触发 选择一页显示多少行
+         handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        },
+        Inquireclick(){
+            console.log(this.tableData)
+            var newarr=[];
+            if(this.input==""){
+                newarr=this.tableData;
+            }else{
+                for(var i=0;i<this.tableData.length;i++){
+                    if(this.tableData[i].number.includes(this.input)){
+                        newarr.push(this.tableData[i]);
+                    }
+                    else if(this.tableData[i].cnName.includes(this.input)){
+                        newarr.push(this.tableData[i]);
+                    }
+                    else if(this.tableData[i].companyName.includes(this.input)){
+                        newarr.push(this.tableData[i]);
+                    }
+                    else if(this.tableData[i].ext.includes(this.input)){
+                        newarr.push(this.tableData[i]);
+                    }
+                    else if(this.tableData[i].phone.includes(this.input)){
+                        newarr.push(this.tableData[i]);
+                    }
+                    else if(this.tableData[i].urgentPhone.includes(this.input)){
+                        newarr.push(this.tableData[i]);
+                    }
+                    else if(this.tableData[i].email.includes(this.input)){
+                        newarr.push(this.tableData[i]);
+                    }
+                }
+            }
+            this.tableDatas=newarr;
+        },
+        Getemployees(){
+            var url="/api/System/GetUserList"
+            var that=this
+            this.$axios({
+                method: 'GET',
+                url:url,
+                headers:{
+                    Authorization:'Bearer '+this.token
+                }
+            }).then(function(res){
+                console.log(res)
+                if(res.data.code==200){
+                    that.tableData=res.data.data
+                    that.tableDatas=that.tableData;
+                    console.log(that.tableData)
+                }
+            })
+        }
+    },
+    mounted(){
+        this.token=localStorage.getItem('token');
+        this.Getemployees();
+    }
+}
+</script>
+<style>
+    .communal-list{
+        background-color: #fff;
+        padding: 10px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 10px;
+    }
+    .communal-title{
+        display: flex;
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .communal-box{
+        display: flex;
+    }
+    .communal-box>button{
+        margin-left: 10px;
+        padding: 8px 20px;
+    }
+</style>

src/components/child/test.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+            <el-radio-button :label="false">展开</el-radio-button>
+            <el-radio-button :label="true">收起</el-radio-button>
+          </el-radio-group>
+          <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
+            <el-submenu index="1">
+              <template slot="title">
+                <i class="el-icon-location"></i>
+                <span slot="title">导航一</span>
+              </template>
+              <el-menu-item-group>
+                <span slot="title">分组一</span>
+                <el-menu-item index="1-1">选项1</el-menu-item>
+                <el-menu-item index="1-2">选项2</el-menu-item>
+              </el-menu-item-group>
+              <el-menu-item-group title="分组2">
+                <el-menu-item index="1-3">选项3</el-menu-item>
+              </el-menu-item-group>
+              <el-submenu index="1-4">
+                <span slot="title">选项4</span>
+                <el-menu-item index="1-4-1">选项1</el-menu-item>
+              </el-submenu>
+            </el-submenu>
+            <el-menu-item index="2">
+              <i class="el-icon-menu"></i>
+              <span slot="title">导航二</span>
+            </el-menu-item>
+            <el-menu-item index="3" disabled>
+              <i class="el-icon-document"></i>
+              <span slot="title">导航三</span>
+            </el-menu-item>
+            <el-menu-item index="4">
+              <i class="el-icon-setting"></i>
+              <span slot="title">导航四</span>
+            </el-menu-item>
+          </el-menu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        isCollapse: true
+      };
+    },
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+}
+</script>
+<style>
+    
+</style>

src/components/home.vue

@@ -0,0 +1,582 @@
+<template>
+  <div class="all-box">
+    <el-container class="all">
+      <el-aside class="delwh">
+        <el-menu
+        :default-active="indexs"
+        class="el-menu-vertical-demo menubar"
+        @open="handleOpen"
+        @close="handleClose"
+        :collapse="isCollapse" 
+        >
+          <div class="user">
+            <div class="user-box">
+              <div class="user-img">
+                <img src="../assets/logo2.png" />
+              </div>
+              <div v-if="panduan" class="user-text">
+                泛美国际 - AI智能办公系统
+              </div>
+            </div>
+          </div>
+          <div class="avatar-box">
+            <div class="nei-avatar">
+              <div class="avatar">
+                <div class="avatar-img">
+                  <img src="../assets/avatar.jpg" alt="" />
+                </div>
+                <div v-if="panduan" class="avatar-text">
+                  <div class="avatar-name">姓名: 王洪 部门: 信息部</div>
+                  <div class="avatar-division">职位: 后端开发</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-menu-item index="1" @click="toURL($event.index)">
+            <i class="iconfont icon-shouye"></i>
+            <span slot="title">首页</span>
+          </el-menu-item>
+          <el-menu-item index="2" @click="toURL($event.index)">
+            <i class="el-icon-menu"></i>
+            <span slot="title">企业数据</span>
+          </el-menu-item>
+          <el-menu-item index="3" @click="toURL($event.index)">
+            <i class="el-icon-setting"></i>
+            <span slot="title">主业务加价设置</span>
+          </el-menu-item>
+          <el-menu-item index="4" @click="toURL($event.index)">
+            <i class="iconfont icon-tongjitu"></i>
+            <span slot="title">数据统计</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <div class="btnradio">
+            <el-radio-group v-model="isCollapse" @change="radioChange($event)">
+              <el-radio-button class="radiobox" :label="false"
+                ><span class="iconfont icon-caidanzhankai icon"></span
+              ></el-radio-button>
+              <el-radio-button class="radiobox" :label="true"
+                ><span class="iconfont icon-caidanshouqi icon"></span
+              ></el-radio-button>
+            </el-radio-group>
+            <div class="header-title">首页</div>
+          </div>
+          <div class="name-box">
+            <div
+              class="instrument"
+              @click="instrumentclick('.instrument-box', $event)"
+            >
+              <i class="icon-shiyonggongju"></i>
+            </div>
+            <div class="message">
+              <i class="icon-tongzhi"></i>
+            </div>
+            <div class="user-inif" @click="instrumentclick('.user-operate', $event)">
+              <div class="user-inifs">
+                <img src="../assets/avatar.jpg" alt="" />
+              </div>
+            </div>
+          </div>
+          <div class="instrument-box">
+            <div class="instrument-box-title">实用工具</div>
+            <div class="instrument-box-inif">
+              <div class="box-inif-ul">
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+                <div class="box-inif-li">
+                  <div class="inif-li-img">
+                    <img src="../assets/QuNaEr.jpg" alt="" />
+                  </div>
+                  <div class="inif-li-text">去哪儿</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="user-operate">
+            <div class="operate-title">
+              <div class="avatar">
+                <div class="avatar-img">
+                  <img src="../assets/avatar.jpg" alt="" />
+                </div>
+                <div class="avatar-text">
+                  <div class="avatar-name">姓名: 王洪 部门: 信息部</div>
+                  <div class="avatar-division">职位: 后端开发</div>
+                </div>
+              </div>
+            </div>
+            <div class="operate-ul">
+              <div class="operate-li">全屏</div>
+              <div class="operate-li">修改密码</div>
+              <div class="operate-li">个人资料</div>
+              <div class="operate-li">登出</div>
+            </div>
+          </div>
+        </el-header>
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+  <script>
+    export default {
+      data() {
+        return {
+          isCollapse: false,
+          panduan:"",
+          username:"雷怡",
+          indexs:"1",
+          pdinstrument: true,
+        };
+      },
+      methods: {
+        handleOpen(key, keyPath) {
+          console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+          console.log(key, keyPath);
+        },
+        //移除element行内样式
+        removal() {
+          document.querySelector(".menubar").style.height =window.innerHeight + "px";
+          document.querySelector(".all").style.height = window.innerHeight + "px";
+          document.querySelector(".delwh").style.width = "";
+        },
+        toURL(val) {
+          if (val == "2") {
+            this.$router.push({ path: "/home/test" });
+            document.querySelector(".header-title").innerHTML = "企业数据";
+          } else if (val == "3") {
+            this.$router.push({ path: "/home/Advancement" });
+            document.querySelector(".header-title").innerHTML = "主业务加价设置";
+          } else if (val == "1") {
+            this.$router.push({ path: "/home/index" });
+            document.querySelector(".header-title").innerHTML = "首页";
+          } else if (val == "4") {
+            this.$router.push({ path: "/home/Statistics" });
+            document.querySelector(".header-title").innerHTML = "数据统计";
+          }
+        },
+        radioChange(val) {
+          var radiobox = document.querySelectorAll(".radiobox");
+          if (val == true) {
+            this.panduan = false;
+            document.querySelector(".user-text").style.display = "none";
+            document.querySelector(".avatar-text").style.display = "none";
+            radiobox[1].style.display = "none";
+            radiobox[0].style.display = "inline-block";
+          } else if (val == false) {
+            this.panduan = true;
+            radiobox[1].style.display = "inline-block";
+            radiobox[0].style.display = "none";
+          }
+        },
+        ifIndexValue(){
+          const url=this.$route.path;
+          console.log(url)
+          if(url=="/home/test"){
+            this.indexs="2";
+          }else if(url=="/home/Advancement"){
+            this.indexs="3";
+          }else if(url=="/home/index"){
+            this.indexs="1";
+          }else if(url=="/home/Statistics"){
+            this.indexs="4";
+          }else if(url=="/home/OrderManagement"){
+            this.indexs="5";
+          }
+          console.log(this.indexs)
+        },
+        //实用工具
+        instrumentclick(val, evt) {
+          if (document.querySelector(val).style.top!="60px") {
+            evt.currentTarget.style.backgroundImage ="linear-gradient(rgba(29,33,41,.03),rgba(29,33,41,.1))";
+            evt.currentTarget.firstElementChild.style.color = "#666";
+            document.querySelector(val).style.top = 60 + "px";
+          } else {
+            evt.currentTarget.style.backgroundImage = "";
+            evt.currentTarget.firstElementChild.style.color = "";
+            document.querySelector(val).style.top = -570 + "px";
+          }
+        },
+      },
+      mounted() {
+        this.removal();
+        this.radioChange(false);
+        this.ifIndexValue();
+      },
+      created() {
+        console.log(this.$route);
+      },
+    };
+  </script>
+  <style>
+    .el-menu .el-menu-item.is-active{
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    html {
+      background-color: #fff;
+    }
+    .el-menu-vertical-demo:not(.el-menu--collapse) {
+      width: 260px;
+      min-height: 400px;
+    }
+    .el-menu {
+      border-right: none;
+    }
+    .delwh {
+      border-right: solid 1px #e6e6e6;
+      background-image: linear-gradient(
+        270deg,
+        rgba(178, 45, 226, 0.18),
+        transparent
+      );
+      background-color: #0f619f;
+    }
+    .el-menu-vertical-demo {
+      background-image: linear-gradient(
+        270deg,
+        rgba(178, 45, 226, 0.18),
+        transparent
+      );
+      background-color: #0f619f;
+    }
+    .el-header {
+      border-bottom: solid 1px #e6e6e6;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      z-index: 3;
+    }
+    .instrument-box {
+      position: absolute;
+      z-index: 2;
+      right: 20px;
+      top: -400px;
+      width: 350px;
+      border-radius: 5px;
+      overflow: hidden;
+      box-shadow: 0 0 5px #0005;
+      transition: all 0.5s;
+    }
+    .instrument-box-title {
+      background: linear-gradient(250deg, #3e93d6, #8a75aa);
+      padding: 20px;
+      text-align: center;
+      color: #fff;
+    }
+    .instrument-box-inif {
+      background-color: #fff;
+      height: 320px;
+      overflow-y: auto;
+    }
+    .box-inif-ul {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 10px;
+    }
+    .inif-li-text {
+      font-size: 12px;
+    }
+    .box-inif-li {
+      width: 25%;
+      height: 81px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      padding: 10px;
+      margin: 0 3px;
+      cursor: pointer;
+    }
+    .box-inif-li:hover {
+      background-image: linear-gradient(
+        rgba(29, 33, 41, 0.03),
+        rgba(29, 33, 41, 0.04)
+      );
+      color: #967bbd;
+    }
+    .btnradio {
+      display: flex;
+      align-items: center;
+    }
+    .name-box {
+      display: flex;
+      font-size: 14px;
+    }
+    .user-operate {
+      position: absolute;
+      z-index: 2;
+      right: 20px;
+      top: -300px;
+      width: 260px;
+      border-radius: 5px;
+      overflow: hidden;
+      box-shadow: 0 0 5px #0005;
+      transition: all 0.5s;
+    }
+    .operate-title {
+      background: linear-gradient(250deg, #3e93d6, #8a75aa);
+      padding: 20px;
+      text-align: center;
+      color: #fff;
+    }
+    .operate-ul{
+      background-color: #fff;
+    }
+    .operate-li{
+      padding: 12px 24px;
+      cursor: pointer;
+      color: #555;
+    }
+    .operate-li:hover{
+      background-image: linear-gradient(
+        rgba(29, 33, 41, 0.03),
+        rgba(29, 33, 41, 0.04)
+      );
+      color: #967bbd;
+    }
+    .names {
+      margin-right: 20px;
+    }
+    .quit {
+      cursor: pointer;
+    }
+    .el-radio-button:first-child .el-radio-button__inner {
+      border: none;
+    }
+    .el-radio-button:last-child .el-radio-button__inner {
+      border: none;
+    }
+    .icon {
+      font-size: 20px;
+    }
+    .el-radio-button__inner {
+      padding: 0;
+    }
+    .header-title {
+      margin-left: 20px;
+    }
+    .icon-shouye {
+      margin-right: 5px;
+      width: 24px;
+      text-align: center;
+      font-size: 18px;
+      vertical-align: middle;
+      display: inline-block;
+      font-weight: 600;
+    }
+    .icon-tongjitu {
+      margin-right: 5px;
+      width: 24px;
+      text-align: center;
+      font-size: 18px;
+      vertical-align: middle;
+      display: inline-block;
+      font-weight: 600;
+    }
+    .user-img {
+      width: 40px;
+      height: 40px;
+    }
+    .user-img img {
+      width: 100%;
+      height: 100%;
+    }
+    .user-box {
+      padding: 10px 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .user-text {
+      /*margin-left: 15px;*/
+      font-size: 16px;
+      /*font-weight: 600;*/
+      color: #fff;
+    }
+    .naem-box {
+      font-size: 16px;
+    }
+    .naem-box div {
+      padding-left: 20px;
+    }
+    .el-menu-vertical-demo .el-menu-item {
+      color: #82c2f3;
+    }
+    .el-menu-vertical-demo .el-menu-item:focus,
+    .el-menu-vertical-demo .el-menu-item:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+      color: #fff;
+    }
+    .el-menu-vertical-demo .el-menu-item i {
+      color: #2595ea;
+    }
+    .avatar-box {
+      height: 9.53rem;
+      background-image: url("../assets/cover-2-lg.png");
+      background-repeat: no-repeat;
+    }
+    .nei-avatar {
+      height: 100%;
+      background-color: rgba(27, 92, 164, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: all 1.5s;
+    }
+    .nei-avatar:hover {
+      background-color: rgba(27, 92, 164, 0);
+    }
+    .avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .avatar-text {
+      color: #fff;
+      margin-left: 15px;
+      font-size: 14px;
+      text-align: left;
+    }
+    .avatar-text > div {
+      line-height: 28px;
+    }
+    .avatar-img {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    .avatar-img img {
+      width: 100%;
+    }
+    .user-inifs {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    .user-inif img {
+      width: 100%;
+    }
+    i.icon-shiyonggongju {
+      font-size: 32px;
+      color: #2198f3;
+    }
+    i.icon-tongzhi {
+      font-size: 32px;
+      color: #2198f3;
+    }
+    .name-box > div {
+      cursor: pointer;
+      margin-left: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+    .name-box i:hover {
+      color: #666;
+    }
+    .el-main {
+      background-color: #ebf6fd;
+    }
+    .inif-li-img {
+      width: 50px;
+      height: 50px;
+    }
+    .inif-li-img img {
+      width: 100%;
+    }
+
+    .instrument-box-inif::-webkit-scrollbar {
+      width: 5px;
+      height: 16px;
+      background-color: transparent;
+    }
+    /*定义滚动条轨道
+    内阴影+圆角*/
+    .instrument-box-inif::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+      border-radius: 10px;
+      background-color: transparent;
+    }
+    /*定义滑块
+    内阴影+圆角*/
+    .instrument-box-inif::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+      background-color: #b9bcc0;
+    }
+  </style>

src/main.js

@@ -0,0 +1,24 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import './assets/icon/iconfont.css'
+import store from './store/index.js';
+
+import axios from 'axios';
+ 
+Vue.prototype.$axios=axios;
+
+Vue.config.productionTip = false
+Vue.use(ElementUI);
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  components: { App },
+  template: '<App/>'
+})

src/router/index.js

@@ -0,0 +1,78 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import HelloWorld from '@/components/HelloWorld'
+import Login from '@/components/Login'
+import home from '@/components/home'
+import Enroll from '@/components/Enroll'
+import index from '@/components/child/index'
+import test from '@/components/child/test'
+import Aideindex from '@/components/child/Aideindex'
+import Marketindex from '@/components/child/Marketindex'
+import financeindex from '@/components/child/financeindex'
+import Globalindex from '@/components/child/Globalindex'
+import Generalindex from '@/components/child/Generalindex'
+import AuthorityJob from '@/components/child/AuthorityJob'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Login',
+      component: Login
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: home,
+      children:[
+        {
+          path: '/home/index',
+          name: 'index',
+          component: index
+        },
+        {
+          path: '/home/Generalindex',
+          name: 'Generalindex',
+          component: Generalindex
+        },
+        {
+          path: '/home/test',
+          name: 'test',
+          component: test
+        },
+        {
+          path: '/home/Aideindex',
+          name: 'Aideindex',
+          component: Aideindex
+        },
+        {
+          path: '/home/Marketindex',
+          name: 'Marketindex',
+          component: Marketindex
+        },
+        {
+          path: '/home/financeindex',
+          name: 'financeindex',
+          component: financeindex
+        },
+        {
+          path: '/home/Globalindex',
+          name: 'financeindex',
+          component: Globalindex
+        },
+        {
+          path: '/home/AuthorityJob',
+          name: 'AuthorityJob',
+          component: AuthorityJob
+        }
+      ]
+    },
+    {
+      path: '/Enroll',
+      name: 'Enroll',
+      component: Enroll
+    }
+  ]
+})

src/store/index.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from "axios"
+
+Vue.use(Vuex)
+
+// 创建一个新的 store 实例
+const store = new Vuex.Store({
+	// 状态数据声明
+	state () {
+		return {
+			phone :'',
+		}
+	},
+	// 在 mutations 内封装数据更新方法
+	mutations: {
+		setphone(state,phone){
+            state.phone=phone 
+        }
+	},
+    actions:{
+        vlogin(context,form){
+            console.log(form)
+            return new Promise((resolve,reject)=>{//Promise异步任务执行 抛出错误
+                axios.post(//axios的基本操作
+                "http://132.232.92.186:8888/api/login",
+                `number=${form.number}&password=${form.password}`
+                ).then(result=>{
+                console.log(result)
+                if(result.status>=200 && result.status<300){
+                    resolve();//抛出正确
+                }else{
+                    reject(result.data);//抛出错误
+                }
+                })
+            })
+        }
+    }
+});
+// 导出状态对象
+export default store