web-style - npm Package Compare versions

Comparing version 0.2.5 to 0.4.0

.babelrc

+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.js

+module.exports = {
+  root: true,
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    "eqeqeq": 0
+  }
+}

build/build.js

+// https://github.com/shelljs/shelljs
+require('shelljs/global')
+env.NODE_ENV = 'production'
+
+var path = require('path')
+var config = require('../config')
+var ora = require('ora')
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.prod.conf')
+
+console.log(
+  '  Tip:\n' +
+  '  Built files are meant to be served over an HTTP server.\n' +
+  '  Opening index.html over file:// won\'t work.\n'
+)
+
+var spinner = ora('building for production...')
+spinner.start()
+
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+cp('-R', 'static/', assetsPath)
+
+webpack(webpackConfig, function (err, stats) {
+  spinner.stop()
+  if (err) throw err
+  var clearPath = path.resolve('dist')
+  rm(path.join(clearPath, 'css/static.css'))
+  process.stdout.write(stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n')
+})

build/dev-client.js

+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var config = require('../config')
+var proxyMiddleware = require('http-proxy-middleware')
+var shelljs = require('shelljs')
+var webpackConfig = process.env.NODE_ENV === 'testing'
+  ? require('./webpack.prod.conf')
+  : require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  stats: {
+    colors: true,
+    chunks: false
+  }
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler)
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+module.exports = app.listen(port, function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+  console.log('Listening at http://localhost:' + port + '\n')
+  shelljs.exec(`open http://localhost:${config.dev.port}/index.html`)
+})

build/static.js

+// https://github.com/shelljs/shelljs
+require('shelljs/global')
+env.NODE_ENV = 'production'
+
+var path = require('path')
+var config = require('../config')
+var ora = require('ora')
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.static.conf')
+
+console.log(
+  '  Tip:\n' +
+  ' 开始打包公共css.\n'
+)
+
+var spinner = ora('正在打包公共的css...')
+spinner.start()
+
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+cp('-R', 'static/', assetsPath)
+
+webpack(webpackConfig, function (err, stats) {
+  spinner.stop()
+  if (err) throw err
+
+  var clearPath = path.resolve('static')
+  rm('-rf', path.join(clearPath, 'js'))
+  process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n')
+})

build/utils.js

+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  return path.posix.join(config.build.assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loaders) {
+    var sourceLoader = loaders.map(function (loader) {
+      var extraParamChar
+      if (/\?/.test(loader)) {
+        loader = loader.replace(/\?/, '-loader?')
+        extraParamChar = '&'
+      } else {
+        loader = loader + '-loader'
+        extraParamChar = '?'
+      }
+      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
+    }).join('!')
+
+    if (options.extract) {
+      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+    } else {
+      return ['vue-style-loader', sourceLoader].join('!')
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
+  return {
+    css: generateLoaders(['css']),
+    postcss: generateLoaders(['css']),
+    less: generateLoaders(['css', 'less']),
+    sass: generateLoaders(['css', 'postcss', 'sass?indentedSyntax']),
+    scss: generateLoaders(['css','postcss', 'sass']),
+    stylus: generateLoaders(['css', 'stylus']),
+    styl: generateLoaders(['css', 'stylus'])
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      loader: loader
+    })
+  }
+  return output
+}

build/webpack.base.conf.js

+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var projectRoot = path.resolve(__dirname, '../')
+var autoprefixer = require('autoprefixer')
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+    filename: '[name].js'
+  },
+  resolve: {
+    extensions: ['', '.js', '.vue'],
+    fallback: [path.join(__dirname, '../node_modules')],
+    alias: {
+      'src': path.resolve(__dirname, '../src'),
+      'assets': path.resolve(__dirname, '../src/assets'),
+      'components': path.resolve(__dirname, '../src/components')
+    }
+  },
+  resolveLoader: {
+    fallback: [path.join(__dirname, '../node_modules')]
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.html$/,
+        loader: 'vue-html'
+      },
+      {
+        test: /\.(png|jpe?g|gif)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[ext]')
+        }
+      }
+    ]
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  },
+  vue: {
+    loaders: utils.cssLoaders()
+  },
+  postcss: [autoprefixer({
+    browsers: ['android >= 4.0']
+  })]
+}

build/webpack.dev.conf.js

+var config = require('../config')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var utils = require('./utils')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // eval-source-map is faster for development
+  devtool: '#eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    })
+  ]
+})

build/webpack.prod.conf.js

+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  entry: {
+    app: './src/components/index.js'
+  },
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+  },
+  output: {
+    path: 'dist',
+    publicPath: '../',
+    filename: 'js/web-style.js'
+  },
+  vue: {
+    loaders: utils.cssLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    // extract css into its own file
+    new ExtractTextPlugin(utils.assetsPath('css/web-style.css')),
+    // 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
+  ]
+})
+
+if (config.build.productionGzip) {
+  var 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
+    })
+  )
+}
+
+module.exports = webpackConfig

build/webpack.static.conf.js

+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  entry: {
+    app: './src/assets/sass/index.js'
+  },
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+  },
+  output: {
+    path: 'static',
+    publicPath: '../',
+    // filename: utils.assetsPath('js/static.js'),
+    filename: 'js/static.js',
+  },
+  vue: {
+    loaders: utils.cssLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    // extract css into its own file
+    new ExtractTextPlugin(utils.assetsPath('css/static.css')),
+    // 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
+    // split vendor js into its own file
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+  ]
+})
+
+if (config.build.productionGzip) {
+  var 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
+    })
+  )
+}
+
+module.exports = webpackConfig

config/dev.env.js

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

config/index.js

+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: '/',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // 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']
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false,
+  }
+}

config/prod.env.js

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

config/test.env.js

+var merge = require('webpack-merge')
+var devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})

demo/api.html

+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>web-style文档</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <link rel="stylesheet" href="../dist/css/web-style.css">
+
+    <style>
+        .container{
+            width: 1170px;
+            margin: 0 auto;
+        }
+        .navbar-header{
+            height: 50px;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .navbar-header a{
+            font-weight: 500;
+            padding: 15px;
+            box-sizing: border-box;
+            display: block;
+            font-size: 14px;
+        }
+        .navbar-brand{
+            float: left;
+            height: 50px;
+            box-sizing: border-box;
+
+        }
+        .navbar-brand a{
+            font-size: 20px;
+            font-weight: 500;
+            padding-top: 10px;
+            height: 50px;
+        }
+        .navbar-ul{
+            height: 100%;
+        }
+        .navbar-ul li{
+            float: left;
+            height: 50px;
+            box-sizing: border-box;
+        }
+
+    </style>
+</head>
+<body>
+
+
+
+<header class="navbar-header">
+    <div class="container">
+        <div class="navbar-brand">
+            <a href="">web-style</a>
+        </div>
+
+        <ul class="navbar-ul">
+            <li><a href="">起步</a></li>
+            <li><a href="">css样式</a></li>
+            <li><a href="">vue组件</a></li>
+        </ul>
+
+    </div>
+</header>
+
+<div class="container">
+    <div class="row">
+        <div class="col-9">
+            <h1>下载安装</h1>
+            <p>web-style 推荐使用npm下载使用或者 <a href="https://github.com/cycgit/web-style">项目地址</a></p>
+            <code>$ npm install web-style  --save</code>
+
+
+            <h1>使用方法</h1>
+
+            <p>web-style组件全部依赖 <a href="">vue</a>, 因此vue必须在web-style.js之前引入。</p>
+
+            <ul>
+                <li>把</li>
+            </ul>
+
+            <h1>基础模版</h1>
+            <p></p>
+
+        </div>
+        <div class="col-3">
+            <div class="nav">
+                <ul>
+                    <li><a href="">概览</a></li>
+                    <li><a href="">栅格系统</a></li>
+                    <li><a href="">排版</a></li>
+                </ul>
+
+            </div>
+        </div>
+
+
+    </div>
+
+
+</div>
+
+
+<script>
+
+
+</script>
+</body>
+</html>

dist/css/static.css

+article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}body,html{width:100%;height:100%;position:relative;color:#666}ol,ul{list-style:none}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;font-size:14px}h1,h2,h3,h4,h5{font-weight:500;line-height:1.1;margin-top:20px;margin-bottom:10px}h1{font-size:20px}h2{font-size:18px}p{margin:8px 0}a{color:#2db7f5;text-decoration:none;-webkit-transition:color .3s ease;transition:color .3s ease;cursor:pointer}a:hover{color:#4dc4f0}.clear:after{content:"";height:0;display:block;clear:both}.row{position:relative;width:100%;height:auto;display:block}.row:after{content:"";display:block;height:0;clear:both}.row .center{float:none;margin:0 auto}.col-1{padding-right:8px;width:8.33333%;position:relative;min-height:1px}.col-1,.col-offset-1{float:left;box-sizing:border-box}.col-offset-1{margin-left:8.33333%}.col-2{padding-right:8px;width:16.66667%;position:relative;min-height:1px}.col-2,.col-offset-2{float:left;box-sizing:border-box}.col-offset-2{margin-left:16.66667%}.col-3{padding-right:8px;width:25%;position:relative;min-height:1px}.col-3,.col-offset-3{float:left;box-sizing:border-box}.col-offset-3{margin-left:25%}.col-4{padding-right:8px;width:33.33333%;position:relative;min-height:1px}.col-4,.col-offset-4{float:left;box-sizing:border-box}.col-offset-4{margin-left:33.33333%}.col-5{padding-right:8px;width:41.66667%;position:relative;min-height:1px}.col-5,.col-offset-5{float:left;box-sizing:border-box}.col-offset-5{margin-left:41.66667%}.col-6{padding-right:8px;width:50%;position:relative;min-height:1px}.col-6,.col-offset-6{float:left;box-sizing:border-box}.col-offset-6{margin-left:50%}.col-7{padding-right:8px;width:58.33333%;position:relative;min-height:1px}.col-7,.col-offset-7{float:left;box-sizing:border-box}.col-offset-7{margin-left:58.33333%}.col-8{padding-right:8px;width:66.66667%;position:relative;min-height:1px}.col-8,.col-offset-8{float:left;box-sizing:border-box}.col-offset-8{margin-left:66.66667%}.col-9{padding-right:8px;width:75%;position:relative;min-height:1px}.col-9,.col-offset-9{float:left;box-sizing:border-box}.col-offset-9{margin-left:75%}.col-10{padding-right:8px;width:83.33333%;position:relative;min-height:1px}.col-10,.col-offset-10{float:left;box-sizing:border-box}.col-offset-10{margin-left:83.33333%}.col-11{padding-right:8px;width:91.66667%;position:relative;min-height:1px}.col-11,.col-offset-11{float:left;box-sizing:border-box}.col-offset-11{margin-left:91.66667%}.col-12{padding-right:8px;width:100%;position:relative;min-height:1px}.col-12,.col-offset-12{float:left;box-sizing:border-box}.col-offset-12{margin-left:100%}.text-center{text-align:center}.loading{font-family:iconfont!important;font-size:14px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale;display:inline-block;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.loading:after{content:"\E6A1"}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@media only screen and (max-width:640px){.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{float:left;width:100%;padding-right:0;box-sizing:border-box}}.box-920{width:920px;box-sizing:border-box;margin:0 auto}@media only screen and (max-width:640px){.box-920{width:100%;margin:0}}.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(55,55,55,.6);z-index:100;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.fade-transition{-webkit-transition:opacity .3s;transition:opacity .3s}.fade-enter,.fade-leave{opacity:0}.slide-transition{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;-webkit-transform:translate(0);transform:translate(0)}.slide-enter{-webkit-transform:translateY(5px);transform:translateY(5px);opacity:0}.slide-leave{-webkit-transform:translateY(30px);transform:translateY(30px);opacity:0}.btn{display:inline-block;margin-bottom:0;font-weight:500;text-align:center;cursor:pointer;border:1px solid #d9d9d9;white-space:nowrap;line-height:1.5;padding:2px 14px;font-size:14px;border-radius:6px;-webkit-user-select:none;user-select:none;color:#666;outline:none;background-color:#fff}.btn:hover{background:#f7f7f7}.btn:active{background:#efefef;-webkit-transition:none;transition:none}.btn:disabled{color:#ccc;cursor:no-drop}.btn-primary{color:#fff;background-color:#2db7f5;border-color:#2db7f5}.btn-primary:hover{color:#fff;background-color:#45bff6;border-color:#45bff6}.btn-primary:active{background-color:#15aff4;border-color:#15aff4}.btn-primary:active,.btn-primary:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-primary:disabled{background-color:#8ed8fa;border-color:#8ed8fa;cursor:no-drop}.btn-success{color:#fff;background-color:#5fbc29;border-color:#5fbc29}.btn-success:hover{color:#fff;background-color:#6ad12e;border-color:#6ad12e}.btn-success:active{background-color:#54a724;border-color:#54a724}.btn-success:active,.btn-success:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-success:disabled{background-color:#96df6c;border-color:#96df6c;cursor:no-drop}.btn-info{color:#fff;background-color:#01b3ca;border-color:#01b3ca}.btn-info:hover{color:#fff;background-color:#01c9e3;border-color:#01c9e3}.btn-info:active{background-color:#019db1;border-color:#019db1}.btn-info:active,.btn-info:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-info:disabled{background-color:#33e7fe;border-color:#33e7fe;cursor:no-drop}.btn-warning{color:#fff;background-color:#fac450;border-color:#fac450}.btn-warning:hover{color:#fff;background-color:#fbcc69;border-color:#fbcc69}.btn-warning:active{background-color:#f9bc37;border-color:#f9bc37}.btn-warning:active,.btn-warning:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-warning:disabled{background-color:#fde5b3;border-color:#fde5b3;cursor:no-drop}.btn-danger{color:#fff;background-color:#e01515;border-color:#e01515}.btn-danger:hover{color:#fff;background-color:#ea2424;border-color:#ea2424}.btn-danger:active{background-color:#c91313;border-color:#c91313}.btn-danger:active,.btn-danger:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-danger:disabled{background-color:#f16a6a;border-color:#f16a6a;cursor:no-drop}.btn-lg{padding:6px 18px}.btn-sm{padding:0 10px}.btn-block{display:block;width:100%}@font-face{font-family:iconfont;src:url(..//fonts/iconfont.eot);src:url(..//fonts/iconfont.eot#iefix) format("embedded-opentype"),url(..//fonts/iconfont.woff) format("woff"),url(..//fonts/iconfont.ttf) format("truetype"),url(..//fonts/iconfont.svg#iconfont) format("svg")}.iconfont{font-family:iconfont!important;font-size:14px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}.icon-arrowleft:before{content:"\E620"}.icon-arrowright:before{content:"\E621"}.icon-arrowup:before{content:"\E622"}.icon-arrowdown:before{content:"\E623"}.icon-caretcircleleft:before{content:"\E604"}.icon-caretcircleright:before{content:"\E605"}.icon-caretcircleup:before{content:"\E606"}.icon-caretcircledown:before{content:"\E607"}.icon-forward:before{content:"\E608"}.icon-backward:before{content:"\E609"}.icon-caretcircleoleft:before{content:"\E60B"}.icon-caretcircleoright:before{content:"\E60D"}.icon-caretcircleodown:before{content:"\E60E"}.icon-caretright:before{content:"\E60A"}.icon-caretleft:before{content:"\E60F"}.icon-caretup:before{content:"\E610"}.icon-caretdown:before{content:"\E611"}.icon-fastforward:before{content:"\E612"}.icon-fastbackward:before{content:"\E613"}.icon-stepbackward:before{content:"\E614"}.icon-stepforward:before{content:"\E615"}.icon-circleodown:before{content:"\E617"}.icon-circleoup:before{content:"\E618"}.icon-circleoleft:before{content:"\E619"}.icon-circleoright:before{content:"\E616"}.icon-circleright:before{content:"\E61A"}.icon-circleup:before{content:"\E61C"}.icon-playcircle:before{content:"\E61E"}.icon-playcircleo:before{content:"\E61F"}.icon-circleleft:before{content:"\E61B"}.icon-right:before{content:"\E600"}.icon-left:before{content:"\E601"}.icon-up:before{content:"\E602"}.icon-down:before{content:"\E603"}.icon-reload:before{content:"\E626"}.icon-doubleleft:before{content:"\E624"}.icon-doubleright:before{content:"\E625"}.icon-retweet:before{content:"\E627"}.icon-shrink:before{content:"\E628"}.icon-arrowsalt:before{content:"\E629"}.icon-rollback:before{content:"\E62A"}.icon-verticleleft:before{content:"\E62B"}.icon-verticleright:before{content:"\E62C"}.icon-cross:before{content:"\E62D"}.icon-check:before{content:"\E62E"}.icon-checkcircle:before{content:"\E62F"}.icon-checkcircleo:before{content:"\E630"}.icon-crosscircle:before{content:"\E631"}.icon-crosscircleo:before{content:"\E632"}.icon-exclamation:before{content:"\E633"}.icon-exclamationcircle:before{content:"\E634"}.icon-exclamationcircleo:before{content:"\E635"}.icon-info:before{content:"\E636"}.icon-infocircle:before{content:"\E637"}.icon-infocircleo:before{content:"\E638"}.icon-minuscircle:before{content:"\E639"}.icon-minuscircleo:before{content:"\E63A"}.icon-minus:before{content:"\E63B"}.icon-pluscircleo:before{content:"\E63C"}.icon-pluscircle:before{content:"\E63D"}.icon-plus:before{content:"\E63E"}.icon-swapleft:before{content:"\E63F"}.icon-swapright:before{content:"\E640"}.icon-swap:before{content:"\E641"}.icon-clockcircle:before{content:"\E642"}.icon-clockcircleo:before{content:"\E643"}.icon-pausecircle:before{content:"\E644"}.icon-pausecircleo:before{content:"\E645"}.icon-pause:before{content:"\E646"}.icon-questioncircle:before{content:"\E647"}.icon-questioncircleo:before{content:"\E648"}.icon-question:before{content:"\E649"}.icon-areachart:before{content:"\E64C"}.icon-appstore:before{content:"\E64D"}.icon-apple:before{content:"\E64E"}.icon-android:before{content:"\E64F"}.icon-bars:before{content:"\E650"}.icon-barchart:before{content:"\E651"}.icon-calendar:before{content:"\E654"}.icon-book:before{content:"\E655"}.icon-chrome:before{content:"\E65C"}.icon-code:before{content:"\E65D"}.icon-creditcard:before{content:"\E65F"}.icon-customerservice:before{content:"\E65E"}.icon-copy:before{content:"\E660"}.icon-delete:before{content:"\E661"}.icon-ellipsis:before{content:"\E667"}.icon-edit:before{content:"\E668"}.icon-export:before{content:"\E669"}.icon-exception:before{content:"\E66A"}.icon-file:before{content:"\E66B"}.icon-filetext:before{content:"\E66C"}.icon-filter:before{content:"\E66F"}.icon-folder:before{content:"\E670"}.icon-frowncircle:before{content:"\E672"}.icon-frown:before{content:"\E673"}.icon-smilecircle:before{content:"\E676"}.icon-smile:before{content:"\E677"}.icon-mehcircle:before{content:"\E678"}.icon-meh:before{content:"\E679"}.icon-github:before{content:"\E674"}.icon-laptop:before{content:"\E67A"}.icon-inbox:before{content:"\E67B"}.icon-ie:before{content:"\E67C"}.icon-home:before{content:"\E67D"}.icon-linechart:before{content:"\E67F"}.icon-link:before{content:"\E67E"}.icon-logout:before{content:"\E681"}.icon-mail:before{content:"\E682"}.icon-menuunfold:before{content:"\E683"}.icon-menufold:before{content:"\E684"}.icon-mobile:before{content:"\E685"}.icon-notification:before{content:"\E686"}.icon-paperclip:before{content:"\E687"}.icon-phone:before{content:"\E688"}.icon-picture:before{content:"\E689"}.icon-piechart:before{content:"\E68A"}.icon-poweroff:before{content:"\E68B"}.icon-setting:before{content:"\E68D"}.icon-sharealt:before{content:"\E68E"}.icon-search:before{content:"\E690"}.icon-poweroff1:before{content:"\E691"}.icon-solution:before{content:"\E68F"}.icon-tablet:before{content:"\E695"}.icon-team:before{content:"\E680"}.icon-totop:before{content:"\E69A"}.icon-videocamera:before{content:"\E69B"}.icon-user:before{content:"\E69C"}.icon-save:before{content:"\E69E"}.icon-unlock:before{content:"\E69F"}.icon-shoppingcart:before{content:"\E692"}.icon-windows:before{content:"\E6A0"}.icon-aliwangwango:before{content:"\E64A"}.icon-aliwangwang:before{content:"\E64B"}.icon-camerao:before{content:"\E652"}.icon-camera:before{content:"\E653"}.icon-eyeo:before{content:"\E66D"}.icon-eye:before{content:"\E66E"}.icon-enviroment:before{content:"\E665"}.icon-enviromento:before{content:"\E666"}.icon-staro:before{content:"\E693"}.icon-star:before{content:"\E694"}.icon-tags:before{content:"\E656"}.icon-tagso:before{content:"\E657"}.icon-tag:before{content:"\E658"}.icon-tago:before{content:"\E659"}.icon-cloud:before{content:"\E65A"}.icon-clouddownload:before{content:"\E65B"}.icon-cloudupload:before{content:"\E696"}.icon-clouduploado:before{content:"\E697"}.icon-clouddownloado:before{content:"\E698"}.icon-cloudo:before{content:"\E699"}.icon-iconfontcaretcircleoup:before{content:"\E60C"}.icon-loading:before{content:"\E6A1"}.icon-dislike:before{content:"\E6A2"}.icon-like:before{content:"\E6A3"}.icon-message:before{content:"\E6A4"}.icon-download:before{content:"\E663"}.icon-upload:before{content:"\E664"}.icon-paycircle:before{content:"\E6A8"}.icon-paycircleo:before{content:"\E6A9"}.icon-exclefile:before{content:"\E6AC"}.icon-pdffile:before{content:"\E6AB"}.icon-pptfile:before{content:"\E6A7"}.icon-jpgfile:before{content:"\E6AA"}.icon-unknowfile:before{content:"\E6A6"}.icon-minussquareo:before{content:"\E6AD"}.icon-plussquareo:before{content:"\E6AE"}.icon-iconfontdesktop:before{content:"\E662"}.icon-hdd:before{content:"\E675"}.icon-folderopen:before{content:"\E671"}.icon-circledown:before{content:"\E61D"}.icon-qrcode:before{content:"\E6A5"}.icon-scan:before{content:"\E6AF"}.icon-heart:before{content:"\E68C"}.icon-hearto:before{content:"\E6B0"}.icon-calculator:before{content:"\E6B1"}.icon-appstoreo:before{content:"\E6B2"}.icon-lock:before{content:"\E69D"}.table{width:100%;margin-bottom:24px;border-spacing:0;border-collapse:collapse;border:1px solid #ddd}.table tbody th,.table td{border-top:1px solid #ddd}.table thead th{border-bottom:2px solid #ddd}.table td,.table th{text-align:left;padding:8px;border-left:1px solid #ddd}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}.table-hover tbody tr:hover,.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9}.table-sm td,.table-sm th{padding:5px}.table-responsive{overflow:scroll}.table-responsive thead tr{white-space:nowrap}.table-responsive tbody td{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pagination{float:right}.pagination:after{content:' ';clear:both}.pagination .quick{float:left;width:100px;padding-left:8px;line-height:30px;height:30px;text-align:right}.pagination .quick input{width:40px;margin:0 5px}.pagination li{float:left;border-radius:6px;-webkit-user-select:none;user-select:none;min-width:28px;height:28px;border:1px solid #d9d9d9;background-color:#fff;text-align:center;line-height:28px;margin:0 5px;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease}.pagination li:hover{border-color:#2db7f5;color:#2db7f5}.pagination a{color:#666;padding:0 6px;display:inline-block}.pagination .next:before{content:"\E600"}.pagination .active{background-color:#2db7f5;color:#fff;cursor:default}.pagination .active:hover{color:#fff}.pagination .jump{border:none}.pagination .jump:before{content:"\2022\2022\2022";letter-spacing:2px}.form .row{margin-bottom:24px}.search-8>div{padding:8px}.padding-08>div{padding-right:8px}input,textarea{background:#fff none;outline:none;-webkit-appearance:none}.form input[type=checkbox]{-webkit-appearance:checkbox}.form input[type=radio]{-webkit-appearance:radio}.form textarea{position:relative;display:inline-block;vertical-align:bottom;line-height:1.5;background-color:#fff;background-image:none;min-height:100px}.form textarea,.input{cursor:text;font-size:14px;color:#666;border:1px solid #d9d9d9;border-radius:6px;width:100%;padding:4px 7px;box-sizing:border-box}.input{height:28px;line-height:1;-webkit-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.input:focus,.input:hover{border-color:#57c5f7}.input:focus{box-shadow:0 0 0 2px rgba(45,183,245,.2)}.require:before{display:inline-block;margin-right:4px;content:"*";font-family:SimSun;font-size:12px;color:#f60}.label{text-align:right;height:28px;line-height:28px;float:left;box-sizing:border-box;padding-right:8px}@media only screen and (max-width:640px){.label{text-align:left}}.form .text{height:28px;line-height:28px;padding-right:8px}.form .input{width:100%}.split{margin-right:8px;float:left}.select,.split{line-height:28px;height:28px}.select{border:1px solid #d9d9d9;border-radius:6px;background-color:#fff;margin:0;outline:0;width:100%}.checkbox,.radio{font-size:14px;cursor:pointer;height:28px;line-height:28px;margin-right:8px}.checkbox span,.radio span{margin:0 8px;display:inline-block}.checkbox input,.radio input{width:14px;height:14px}.drop{position:absolute;top:0;left:0}.drop .drop-ul{outline:none;position:relative;list-style-type:none;padding:0;margin:0;text-align:left;background-color:#fff;border-radius:6px;box-shadow:0 1px 6px rgba(99,99,99,.2);background-clip:padding-box;border:1px solid #d9d9d9}.drop .drop-ul li{padding:7px 15px;-webkit-transition:background .3s ease;transition:background .3s ease}.drop .drop-ul li:hover{background-color:#eaf8fe}.tags-wrap{width:100%;height:100%;outline:none}.tags-wrap:after{content:"";display:block;height:0;clear:both}.tags,.tags-input{position:relative;float:left;color:#fff;line-height:28px;margin:0 4px 4px 0;padding:0 22px 0 10px;border-radius:6px}.tags-input .content,.tags .content{line-height:28px}.tags-input .del,.tags .del{width:22px;height:28px;text-align:center;cursor:pointer;position:absolute;top:-1px;right:0}.tags-input{font-size:14px;padding:0;background-color:inherit;border:none;color:inherit;width:10em}.tags-enter,.tags-leave{-webkit-transform:scale(.9);transform:scale(.9);opacity:0}.tags-transition{-webkit-transition:all .3s ease;transition:all .3s ease}

index.html

+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="/static/css/static.css">
+</head>
+<body>
+
+  <menu :source="menuData"></menu>
+</body>
+</html>

src/App.vue

+<template>
+  <div id="app">
+    <div>hello</div>
+  </div>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
+
+<style>
+
+</style>

src/assets/sass/animate.scss

+.fade-transition {
+  transition: opacity .3s;
+}
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-leave {
+  opacity: 0;
+}
+.slide-transition {
+  transition: transform .3s ease, opacity .3s ease;
+  transform: translate(0, 0);
+}
+.slide-enter{
+  transform: translate(0, 5px);
+  opacity: 0;
+}
+.slide-leave{
+  transform: translate(0, 30px);
+  opacity: 0;
+}
+
+.modal-enter, .modal-leave {
+  opacity: 0;
+}
+.modal-transition{
+  transition: all .3s ease;
+}
+
+.modal-enter .modal-confirm,
+.modal-leave .modal-confirm {
+  transform: scale(1.1);
+}
+.modal-enter .modal-box,
+.modal-leave .modal-box {
+  transform: scale(1.1);
+}

src/assets/sass/base.scss

+$text-color: #666;
+$help-color: #999;
+$error-color: #f60;
+
+$primary-color: #2db7f5;
+
+$disable-color: #ccc;
+$font-size-base: 14px;
+$link-color: #2db7f5;
+$link-hover-color: #4DC4F0;
+$font-family:  "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+
+
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section {
+  margin: 0;
+  padding: 0;
+}
+html,body{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: $text-color;
+}
+
+ul,ol{
+  list-style: none;
+}
+
+body{
+  font-family: $font-family;
+  font-size: $font-size-base;
+}
+
+h1,h2,h3,h4,h5{
+  font-weight: 500;
+  line-height: 1.1;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+h1{
+  font-size: 20px;
+}
+h2{
+  font-size: 18px;
+}
+p{
+  margin: 8px 0;
+}
+a{
+  color: $link-color;
+  text-decoration: none;
+  transition: color .3s ease;
+  cursor: pointer;
+  &:hover{
+    color: $link-hover-color
+  }
+}
+
+.clear{
+  &::after{
+    content: "";
+    height: 0;
+    display: block;
+    clear:both;
+  }
+}
+
+.row{
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: block;
+    &::after{
+        content: "";
+        display: block;
+        height: 0;
+        clear:both;
+    }
+
+    .center{
+      float: none;
+      margin: 0 auto;
+    }
+}
+$allwidth: 100%;
+
+@for $i from 1 through 12{
+    .col-#{$i} {
+        float: left;
+        padding-right: 8px;
+        width: #{$i * $allwidth/12};
+        box-sizing: border-box;
+        position: relative;
+        min-height: 1px;
+    }
+    .col-offset-#{$i}{
+        float: left;
+        margin-left: #{$i * $allwidth/12};
+        box-sizing: border-box;
+
+    }
+}
+
+
+.text-center{
+  text-align: center;
+}
+
+.loading{
+  font-family:"iconfont" !important;
+  font-size:14px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  &::after{
+    content: "\e6a1";
+  }
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin{
+  from { transform: rotate(0deg);}
+  to { transform: rotate(360deg)}
+
+}
+
+
+
+@media only screen and (max-width: 640px) {
+
+  @for $i from 1 through 12{
+      .col-#{$i} {
+          float: left;
+          width: 100%;
+          padding-right: 0;
+          box-sizing: border-box;
+      }
+  }
+
+}
+
+.box-920{
+  width: 920px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
+
+
+@media only screen and (max-width: 640px) {
+  .box-920{
+    width: 100%;
+    margin: 0
+  }
+}
+
+
+.modal-mask{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(55,55,55,.6);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/assets/sass/button.scss

+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #d9d9d9;
+  white-space: nowrap;
+  line-height: 1.5;
+  padding: 2px 14px;
+  font-size: 14px;
+  border-radius: 6px;
+  -webkit-user-select: none;
+  user-select: none;
+  // -webkit-transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
+  // transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
+  color: #666;
+  outline: none;
+  background-color: #fff;
+  &:hover {
+    background: #f7f7f7;
+  }
+  &:active {
+    background: darken(#f7f7f7, 3%);
+    transition: none;
+  }
+  &:disabled{
+    color: #ccc;
+    cursor: no-drop;
+  }
+}
+
+@mixin color($color: #fff) {
+  color: #fff;
+  background-color: $color;
+  border-color: $color;
+}
+
+@mixin active($color: #fff) {
+  color: #fff;
+  background-color: $color;
+  border-color: $color;
+  transition: none;
+}
+$primary-color: #2db7f5;
+$success-color: #5FBC29;
+$info-color: #01B3CA;
+$warning-color: #FAC450;
+$danger-color: #E01515;
+
+
+@mixin btn($color: #fff) {
+  @include color($color);
+  &:hover {
+    @include color(lighten($color, 5%));
+  }
+  &:active {
+    @include active(darken($color, 5%));
+  }
+  &:disabled{
+    @include active(lighten($color, 20%));
+    cursor: no-drop;
+  }
+}
+
+.btn-primary {
+  @include btn($primary-color)
+}
+
+.btn-success {
+  @include btn($success-color)
+}
+
+.btn-info {
+  @include btn($info-color)
+}
+
+.btn-warning {
+  @include btn($warning-color)
+}
+
+.btn-danger {
+  @include btn($danger-color)
+}
+
+.btn-lg {
+  padding: 6px 18px;
+}
+
+.btn-sm {
+  padding: 0px 10px;
+}
+
+
+.btn-block {
+  display: block;
+  width: 100%;
+}

src/assets/sass/fonts.scss

+
+@font-face {font-family: "iconfont";
+  src: url('../fonts/iconfont.eot?t=1458285388'); /* IE9*/
+  src: url('../fonts/iconfont.eot?t=1458285388#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/iconfont.woff?t=1458285388') format('woff'), /* chrome, firefox */
+  url('../fonts/iconfont.ttf?t=1458285388') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('../fonts/iconfont.svg?t=1458285388#iconfont') format('svg'); /* iOS 4.1- */
+}
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:14px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-arrowleft:before { content: "\e620"; }
+.icon-arrowright:before { content: "\e621"; }
+.icon-arrowup:before { content: "\e622"; }
+.icon-arrowdown:before { content: "\e623"; }
+.icon-caretcircleleft:before { content: "\e604"; }
+.icon-caretcircleright:before { content: "\e605"; }
+.icon-caretcircleup:before { content: "\e606"; }
+.icon-caretcircledown:before { content: "\e607"; }
+.icon-forward:before { content: "\e608"; }
+.icon-backward:before { content: "\e609"; }
+.icon-caretcircleoleft:before { content: "\e60b"; }
+.icon-caretcircleoright:before { content: "\e60d"; }
+.icon-caretcircleodown:before { content: "\e60e"; }
+.icon-caretright:before { content: "\e60a"; }
+.icon-caretleft:before { content: "\e60f"; }
+.icon-caretup:before { content: "\e610"; }
+.icon-caretdown:before { content: "\e611"; }
+.icon-fastforward:before { content: "\e612"; }
+.icon-fastbackward:before { content: "\e613"; }
+.icon-stepbackward:before { content: "\e614"; }
+.icon-stepforward:before { content: "\e615"; }
+.icon-circleodown:before { content: "\e617"; }
+.icon-circleoup:before { content: "\e618"; }
+.icon-circleoleft:before { content: "\e619"; }
+.icon-circleoright:before { content: "\e616"; }
+.icon-circleright:before { content: "\e61a"; }
+.icon-circleup:before { content: "\e61c"; }
+.icon-playcircle:before { content: "\e61e"; }
+.icon-playcircleo:before { content: "\e61f"; }
+.icon-circleleft:before { content: "\e61b"; }
+.icon-right:before { content: "\e600"; }
+.icon-left:before { content: "\e601"; }
+.icon-up:before { content: "\e602"; }
+.icon-down:before { content: "\e603"; }
+.icon-reload:before { content: "\e626"; }
+.icon-doubleleft:before { content: "\e624"; }
+.icon-doubleright:before { content: "\e625"; }
+.icon-retweet:before { content: "\e627"; }
+.icon-shrink:before { content: "\e628"; }
+.icon-arrowsalt:before { content: "\e629"; }
+.icon-rollback:before { content: "\e62a"; }
+.icon-verticleleft:before { content: "\e62b"; }
+.icon-verticleright:before { content: "\e62c"; }
+.icon-cross:before { content: "\e62d"; }
+.icon-check:before { content: "\e62e"; }
+.icon-checkcircle:before { content: "\e62f"; }
+.icon-checkcircleo:before { content: "\e630"; }
+.icon-crosscircle:before { content: "\e631"; }
+.icon-crosscircleo:before { content: "\e632"; }
+.icon-exclamation:before { content: "\e633"; }
+.icon-exclamationcircle:before { content: "\e634"; }
+.icon-exclamationcircleo:before { content: "\e635"; }
+.icon-info:before { content: "\e636"; }
+.icon-infocircle:before { content: "\e637"; }
+.icon-infocircleo:before { content: "\e638"; }
+.icon-minuscircle:before { content: "\e639"; }
+.icon-minuscircleo:before { content: "\e63a"; }
+.icon-minus:before { content: "\e63b"; }
+.icon-pluscircleo:before { content: "\e63c"; }
+.icon-pluscircle:before { content: "\e63d"; }
+.icon-plus:before { content: "\e63e"; }
+.icon-swapleft:before { content: "\e63f"; }
+.icon-swapright:before { content: "\e640"; }
+.icon-swap:before { content: "\e641"; }
+.icon-clockcircle:before { content: "\e642"; }
+.icon-clockcircleo:before { content: "\e643"; }
+.icon-pausecircle:before { content: "\e644"; }
+.icon-pausecircleo:before { content: "\e645"; }
+.icon-pause:before { content: "\e646"; }
+.icon-questioncircle:before { content: "\e647"; }
+.icon-questioncircleo:before { content: "\e648"; }
+.icon-question:before { content: "\e649"; }
+.icon-areachart:before { content: "\e64c"; }
+.icon-appstore:before { content: "\e64d"; }
+.icon-apple:before { content: "\e64e"; }
+.icon-android:before { content: "\e64f"; }
+.icon-bars:before { content: "\e650"; }
+.icon-barchart:before { content: "\e651"; }
+.icon-calendar:before { content: "\e654"; }
+.icon-book:before { content: "\e655"; }
+.icon-chrome:before { content: "\e65c"; }
+.icon-code:before { content: "\e65d"; }
+.icon-creditcard:before { content: "\e65f"; }
+.icon-customerservice:before { content: "\e65e"; }
+.icon-copy:before { content: "\e660"; }
+.icon-delete:before { content: "\e661"; }
+.icon-ellipsis:before { content: "\e667"; }
+.icon-edit:before { content: "\e668"; }
+.icon-export:before { content: "\e669"; }
+.icon-exception:before { content: "\e66a"; }
+.icon-file:before { content: "\e66b"; }
+.icon-filetext:before { content: "\e66c"; }
+.icon-filter:before { content: "\e66f"; }
+.icon-folder:before { content: "\e670"; }
+.icon-frowncircle:before { content: "\e672"; }
+.icon-frown:before { content: "\e673"; }
+.icon-smilecircle:before { content: "\e676"; }
+.icon-smile:before { content: "\e677"; }
+.icon-mehcircle:before { content: "\e678"; }
+.icon-meh:before { content: "\e679"; }
+.icon-github:before { content: "\e674"; }
+.icon-laptop:before { content: "\e67a"; }
+.icon-inbox:before { content: "\e67b"; }
+.icon-ie:before { content: "\e67c"; }
+.icon-home:before { content: "\e67d"; }
+.icon-linechart:before { content: "\e67f"; }
+.icon-link:before { content: "\e67e"; }
+.icon-logout:before { content: "\e681"; }
+.icon-mail:before { content: "\e682"; }
+.icon-menuunfold:before { content: "\e683"; }
+.icon-menufold:before { content: "\e684"; }
+.icon-mobile:before { content: "\e685"; }
+.icon-notification:before { content: "\e686"; }
+.icon-paperclip:before { content: "\e687"; }
+.icon-phone:before { content: "\e688"; }
+.icon-picture:before { content: "\e689"; }
+.icon-piechart:before { content: "\e68a"; }
+.icon-poweroff:before { content: "\e68b"; }
+.icon-setting:before { content: "\e68d"; }
+.icon-sharealt:before { content: "\e68e"; }
+.icon-search:before { content: "\e690"; }
+.icon-poweroff1:before { content: "\e691"; }
+.icon-solution:before { content: "\e68f"; }
+.icon-tablet:before { content: "\e695"; }
+.icon-team:before { content: "\e680"; }
+.icon-totop:before { content: "\e69a"; }
+.icon-videocamera:before { content: "\e69b"; }
+.icon-user:before { content: "\e69c"; }
+.icon-save:before { content: "\e69e"; }
+.icon-unlock:before { content: "\e69f"; }
+.icon-shoppingcart:before { content: "\e692"; }
+.icon-windows:before { content: "\e6a0"; }
+.icon-aliwangwango:before { content: "\e64a"; }
+.icon-aliwangwang:before { content: "\e64b"; }
+.icon-camerao:before { content: "\e652"; }
+.icon-camera:before { content: "\e653"; }
+.icon-eyeo:before { content: "\e66d"; }
+.icon-eye:before { content: "\e66e"; }
+.icon-enviroment:before { content: "\e665"; }
+.icon-enviromento:before { content: "\e666"; }
+.icon-staro:before { content: "\e693"; }
+.icon-star:before { content: "\e694"; }
+.icon-tags:before { content: "\e656"; }
+.icon-tagso:before { content: "\e657"; }
+.icon-tag:before { content: "\e658"; }
+.icon-tago:before { content: "\e659"; }
+.icon-cloud:before { content: "\e65a"; }
+.icon-clouddownload:before { content: "\e65b"; }
+.icon-cloudupload:before { content: "\e696"; }
+.icon-clouduploado:before { content: "\e697"; }
+.icon-clouddownloado:before { content: "\e698"; }
+.icon-cloudo:before { content: "\e699"; }
+.icon-iconfontcaretcircleoup:before { content: "\e60c"; }
+.icon-loading:before { content: "\e6a1"; }
+.icon-dislike:before { content: "\e6a2"; }
+.icon-like:before { content: "\e6a3"; }
+.icon-message:before { content: "\e6a4"; }
+.icon-download:before { content: "\e663"; }
+.icon-upload:before { content: "\e664"; }
+.icon-paycircle:before { content: "\e6a8"; }
+.icon-paycircleo:before { content: "\e6a9"; }
+.icon-exclefile:before { content: "\e6ac"; }
+.icon-pdffile:before { content: "\e6ab"; }
+.icon-pptfile:before { content: "\e6a7"; }
+.icon-jpgfile:before { content: "\e6aa"; }
+.icon-unknowfile:before { content: "\e6a6"; }
+.icon-minussquareo:before { content: "\e6ad"; }
+.icon-plussquareo:before { content: "\e6ae"; }
+.icon-iconfontdesktop:before { content: "\e662"; }
+.icon-hdd:before { content: "\e675"; }
+.icon-folderopen:before { content: "\e671"; }
+.icon-circledown:before { content: "\e61d"; }
+.icon-qrcode:before { content: "\e6a5"; }
+.icon-scan:before { content: "\e6af"; }
+.icon-heart:before { content: "\e68c"; }
+.icon-hearto:before { content: "\e6b0"; }
+.icon-calculator:before { content: "\e6b1"; }
+.icon-appstoreo:before { content: "\e6b2"; }
+.icon-lock:before { content: "\e69d"; }

src/assets/sass/form.scss

+.form .row{
+  margin-bottom: 24px;
+}
+.search-8>div{
+  padding: 8px
+}
+.padding-08>div{
+     padding-right:8px
+}
+input,textarea{
+  background: #fff none;
+  outline: none;
+  -webkit-appearance:none; /*去除input默认样式*/
+}
+
+.form input[type=checkbox]{
+    -webkit-appearance:checkbox
+}
+
+.form input[type=radio]{
+-webkit-appearance:radio
+}
+.form textarea{
+    position: relative;
+    display: inline-block;
+    vertical-align: bottom;
+    cursor: text;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #666;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    background-color: #fff;
+    background-image: none;
+    width: 100%;
+    min-height: 100px;
+    padding: 4px 7px;
+    box-sizing: border-box;
+}
+
+.input{
+  padding: 4px 7px;
+  width: 100%;
+  height: 28px;
+  cursor: text;
+  font-size: 14px;
+  line-height: 1;
+  color: #666;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-sizing: border-box;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+
+  &:hover{
+      border-color: #57c5f7;
+    }
+  &:focus{
+    box-shadow: 0 0 0 2px rgba(45,183,245,.2);
+    border-color: #57c5f7;
+  }
+
+}
+
+.require:before{
+  display: inline-block;
+  margin-right: 4px;
+  content: "*";
+  font-family: SimSun;
+  font-size: 12px;
+  color: #f60;
+}
+
+.label{
+  text-align: right;
+  height: 28px;
+  line-height: 28px;
+  float: left;
+  box-sizing: border-box;
+  padding-right: 8px
+}
+
+@media only screen and (max-width: 640px) {
+  .label{
+    text-align: left;
+  }
+}
+
+.form .text{
+  height: 28px;
+  line-height: 28px;
+  padding-right: 8px;
+}
+
+.form .input{
+  width: 100%;
+}
+
+.split{
+  margin-right: 8px;
+  line-height: 28px;
+  height:28px;
+  float: left;
+}
+
+.select{
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background-color: #fff;
+  margin: 0;
+  outline: 0;
+  height: 28px;
+  line-height: 28px;
+  width: 100%;
+}
+.radio,.checkbox{
+    font-size: 14px;
+    cursor: pointer;
+    height: 28px;
+    line-height: 28px;
+    margin-right: 8px;
+
+    span{
+        margin: 0 8px;
+        display: inline-block;
+    }
+    input{
+        width: 14px;
+        height: 14px
+    }
+}
+
+.drop{
+  position: absolute;
+  top: 0px;
+  left: 0;
+  .drop-ul{
+    outline: none;
+    position: relative;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 0 1px 6px hsla(0,0%,39%,.2);
+    background-clip: padding-box;
+    border: 1px solid #d9d9d9;
+    li{
+      padding: 7px 15px;
+      transition: background .3s ease;
+      &:hover{
+        background-color: #eaf8fe;
+      }
+    }
+  }
+}
+
+//输入框tags
+.tags-wrap{
+  width: 100%;
+  height: 100%;
+  outline: none;
+  &::after{
+    content: "";
+    display: block;
+    height: 0;
+    clear: both;
+    }
+}
+
+.tags, .tags-input{
+  position: relative;
+  float: left;
+  color: #fff;
+  line-height: 28px;
+  margin: 0 4px 4px 0;
+  padding: 0 22px 0 10px;
+  border-radius: 6px;
+  .content{
+    line-height: 28px;
+  }
+  .del{
+    width: 22px;
+    height: 28px;
+    text-align: center;
+    cursor: pointer;
+    position: absolute;
+    top: -1px;
+    right: 0;
+  }
+}
+
+.tags-input{
+  font-size: 14px;
+  padding: 0;
+  background-color: inherit;
+  border: none;
+  color: inherit;
+  width: 10em;
+}
+.tags-enter, .tags-leave{
+  transform: scale(0.9);
+  opacity: 0;
+}
+.tags-transition{
+  transition: all .3s ease;
+}

src/assets/sass/index.js

+require('./index.scss')

src/assets/sass/index.scss

+@import "base";
+@import "animate";
+@import "button";
+@import "fonts";
+@import "table";
+@import "form";

src/assets/sass/table.scss

+.table {
+  width: 100%;
+  margin-bottom: 24px;
+  border-spacing: 0;
+  border-collapse: collapse;
+  border: 1px solid #ddd;
+
+  tbody th, td {
+    border-top: 1px solid #ddd;
+  }
+
+  thead th {
+    border-bottom: 2px solid #ddd;
+  }
+  th, td {
+    text-align: left;
+    padding: 8px;
+    border-left: 1px solid #ddd;
+  }
+}
+
+caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+
+.table-striped {
+  tbody tr:nth-of-type(odd) {
+    background-color: #f9f9f9;
+  }
+}
+
+.table-hover {
+  tbody tr:hover {
+    background-color: #f9f9f9;
+  }
+}
+
+.table-sm {
+  th, td {
+    padding: 5px;
+  }
+}
+
+.table-responsive {
+  thead tr {
+    white-space: nowrap;
+  }
+  thead th {
+    //min-width: 75px;
+  }
+  tbody td{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  overflow: scroll;
+}
+
+.pagination {
+  float: right;
+  &:after {
+    content: ' ';
+    clear: both;
+  }
+  .quick{
+    float: left;
+    width: 100px;
+    padding-left: 8px;
+    line-height: 30px;
+    height: 30px;
+    text-align: right;
+    input{
+      width: 40px;
+      margin: 0 5px;
+    }
+  }
+
+  li {
+    float: left;
+    border-radius: 6px;
+    -webkit-user-select: none;
+    user-select: none;
+    min-width: 28px;
+    height: 28px;
+    border: 1px solid #d9d9d9;
+    background-color: #fff;
+    text-align: center;
+    line-height: 28px;
+    margin: 0 5px;
+    cursor: pointer;
+    transition: all .3s ease;
+    &:hover{
+      border-color: #2db7f5;
+      color: #2db7f5;
+    }
+  }
+  a {
+    color: #666;
+    padding: 0 6px;
+    display: inline-block;
+  }
+  .next {
+    &:before {
+      content: "\E600";
+    }
+  }
+  .active {
+
+    background-color: #2db7f5;
+    color: #fff;
+    cursor: default;
+
+    &:hover{
+      color: #fff;
+    }
+
+
+  }
+
+  .jump {
+      border: none;
+      &:before{
+        content: "\2022\2022\2022";
+        letter-spacing: 2px;
+      }
+  }
+}

src/components/Box.vue

+<template>
+
+  <div class="list" v-for="item in source">
+    <div class="menu-line" @click="toggle(item)" :class="{'active-line': item.open}">
+      <i class="iconfont{{item.icon? ' icon-' + item.icon: '' }}"></i> <span class="menu-name">{{ item.name }}</span><b class="iconfont">&#xe600;</b>
+    </div>
+
+    <ul :style="{ height: item.open? 34*item.routes.length + 'px': '0px'}">
+      <li v-for="route in item.routes" :class="{active: route.url == curPath}"><a :href="route.url">{{ route.name }}</a></li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
+
+<style lang="scss">
+
+</style>

src/components/components/autoComplete.scss

+.v-auto {
+  outline: none;
+}
+
+.v-drop {
+  border: 1px solid #E4E6E7;
+  margin-right: 2px;
+  border-radius: 0 0 2px 2px;
+  background-color: #fff;
+  position: relative;
+  ul {
+  }
+  li {
+    padding: 4px 7px;
+    cursor: pointer;
+  }
+  .active {
+    background-color: #eee;
+  }
+}

src/components/components/carousel.scss

+//轮播组件样式
+.v-carousel-wrap{
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+.v-carousel-content{
+  position: relative;
+  transition: left .6s ease;
+}
+.v-carousel-one{
+  height: 100%;
+  float: left;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.v-carousel-dots{
+  background-color: inherit;
+  text-align: center;
+  overflow: hidden;
+  li{
+    display: inline-block;
+    width: 20px;
+    height: 18px;
+    margin: auto 5px;
+    cursor: pointer;
+    font-size: 16px;
+    color: #999;
+    position: relative;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    &:hover{
+      color: #666;
+    }
+  }
+  .active{
+    color: #000 !important;
+  }
+}

src/components/components/datePicker.scss

+.dp-out{
+  position: relative;
+  i{
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -7px;
+  }
+}
+
+.dp{
+  width: 231px;
+  //height: 310px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  border:1px solid #d9d9d9;
+  border-radius: 6px;
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  background: #fff;
+  z-index:10;
+  .dp-text{
+    height: 100%;
+    line-height: 1.5;
+    padding-left: 4px;
+  }
+  .icon-crosscircle{
+    cursor: pointer;
+    color: #ccc;
+    position: absolute;
+    right: 5px;
+    top: 10px;
+    font-size: 12px;
+    transition: color .3s ease ;
+
+    &:hover{
+      color: #999;
+    }
+  }
+  .dp-body{
+    padding: 4px 8px;
+  }
+}
+.dp-table{
+  width: 100%;
+  text-align: center;
+  border-collapse: collapse;
+  th{
+    padding: 6px 0;
+    border: 0;
+  }
+  td{
+    padding: 4px 0;
+    border: 0;
+  }
+  th span{
+    display: block;
+    font-weight: normal;
+  }
+  td span{
+    display: block;
+    width: 20px;
+    height: 20px;
+    border: 1px solid transparent;
+    margin: 0 auto;
+    transition: background 0.3s ease;
+    border-radius: 4px;
+    padding: 0;
+    box-sizing: border-box;
+    font-size: 12px;
+    line-height: 20px;
+    &:hover{
+      background: #eaf8fe;
+      cursor: pointer;
+    }
+  }
+}
+.dp-table .dp-last span{
+  color: #ccc
+}
+.dp-table .dp-today span{
+  border-color: #2db7f5;
+  font-weight: bold;
+  color: #2db7f5;
+}
+.dp-table .dp-select span{
+  background: #2db7f5;
+  color: #fff;
+  border: 1px solid transparent;
+  &:hover{
+    background: #2db7f5;
+  }
+}
+.dp-header1{
+  position: relative;
+  padding: 6px;
+  height: 34px;
+  border-bottom: 1px solid #e9e9e9;
+  box-sizing: border-box;
+}
+
+.dp-header2{
+  position: relative;
+  text-align: center;
+  height: 34px;
+  border-bottom: 1px solid #e9e9e9;
+  box-sizing: border-box;
+  line-height: 34px;
+  .dp-ym{
+    font-weight: bold;
+  }
+  a{
+    color: #999;
+    line-height: 34px;
+    height: 34px;
+    font-size: 16px;
+    display: inline-block;
+    padding: 0 5px;
+    position: absolute;
+    font-family: Arial,Hiragino Sans GB,Microsoft Yahei,Microsoft Sans Serif,sans-serif;
+    &:hover{
+      color:#2db7f5;
+      cursor: pointer;
+    }
+  }
+  .dp-h-1{
+    left: 7px
+  }
+  .dp-h-2{
+    left: 29px;
+  }
+  .dp-h-3{
+    right: 29px;
+  }
+  .dp-h-4{
+    right: 7px;
+  }
+}
+.dp-footer{
+  height: 38px;
+  border-top: 1px solid #e9e9e9;
+  text-align: center;
+  position: relative;
+  a{
+    display: inline-block;
+    line-height: 34px;
+    height: 34px;
+    cursor: pointer;
+    font-size: 12px;
+  }
+  span{
+    position: absolute;
+    right: 16px;
+    top: 4px;
+    padding: 2px 4px;
+    font-size: 12px;
+    border: 1px solid transparent
+  }
+}
+
+.dp-input-wrap{
+  width: 96px;
+  float: left;
+  margin-right: 5px;
+  position: relative;
+  .input{
+    box-sizing: border-box;
+    margin-right: 5px;
+    height: 22px;
+    font-size: 12px;
+    border-radius: 4px;
+
+  }
+}
+
+
+.tp-out{
+  position: relative;
+  width: 96px;
+  min-width: 80px;
+  i{
+    position: absolute;
+    right: 10px;
+    top: 6px;
+  }
+  .input{
+    font-size: 12px;
+  }
+
+  &:after{
+    content: "\e643";
+    font-family: iconfont!important;
+    font-size: 14px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: .2px;
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    right: 8px;
+  }
+}
+
+.tp{
+  width: 168px;
+  height: 178px;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  border: 1px solid #ccc;
+  line-height: 1.5;
+  background: #fff;
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  z-index: 102;
+}
+.tp-header{
+  padding: 6px;
+  position: relative;
+  border-bottom: 1px solid #e9e9e9;
+  input{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    cursor: auto;
+    line-height: 1.5;
+    outline: 0;
+    color: #666;
+    &::selection {
+      background: #4BB8FF;
+      color: #fff;
+    }
+  }
+  i{
+    position: absolute;
+    right: 10px;
+    top: 6px;
+    font-size: 12px;
+    color: #ccc;
+    transition: color ease .3s;
+    cursor: pointer;
+    &:hover{
+      color: #999;
+    }
+  }
+}
+.tp-body{
+  ul{
+    float: left;
+    height: 144px;
+    width: 55px;
+    overflow-y: scroll;
+
+    .tp-active{
+      background: #f7f7f7;
+      font-weight: 700;
+
+      &:hover{
+        background: #f7f7f7;
+      }
+    }
+    li{
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      transition: background 0.3s ease;
+      cursor: pointer;
+      &:hover{
+        background: #eaf8fe;
+      }
+    }
+    &:after{
+      content: '';
+      display: block;
+      height:120px;
+
+    }
+  }
+  .tp-line{
+    float: left;
+    width: 1px;
+    height: 144px;
+    background: #e9e9e9
+  }
+}

src/components/components/menu.scss

+.menu{
+  width: 220px;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: fixed;
+  border-right: 1px solid #ddd;
+  box-sizing: border-box;
+
+  ul{
+    background: #FAFAFA;
+    transition: height .3s;
+    overflow: hidden;
+  }
+  li{
+    padding: 7px 0 7px 46px;
+    :hover{
+      color: #61b98e;
+    }
+  }
+  a{
+    color: #666;
+  }
+
+  .menu-top{
+    text-align: center;
+    padding: 20px 0;
+    color: #61b98e;
+  }
+  .active a{
+    color: #61b98e;
+  }
+}
+
+.main{
+  display: flex;
+  margin-left: 220px;
+  height: 100vh;
+  flex-direction: column;
+  .content{
+    flex-grow: 1;
+    overflow: scroll;
+    padding: 0 10px;
+  }
+}
+
+.menu-line{
+  height: 20px;
+  padding-top: 14px;
+  padding-bottom: 6px;
+  cursor: pointer;
+
+
+  .menu-name{
+    width: 130px;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    text-overflow: ellipsis;
+  }
+
+   i{
+    margin-left: 10px;
+    padding: 3px 12px 0;
+    font-size: 12px;
+    float: left;
+    min-width: 12px;
+  }
+
+
+  b{
+    margin-right: 20px;
+    font-size: 12px;
+    font-weight: bold;
+    transform: scale(0.8);
+    transition: transform .3s;
+    float: right;
+  }
+}
+
+.active-line{
+  b{
+    font-size: 12px;
+    font-weight: bold;
+    transform: scale(0.8) rotate(90deg);
+  }
+}
+
+
+
+.header{
+  height: 64px;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #f5f5f5;
+
+  .left-part{
+    float: left;
+  }
+  ul{
+    float: right;
+  }
+  li{
+    display: inline-block;
+    margin: 0 5px;
+    a{
+      color:#61b98e;
+    }
+  }
+}
+
+@media screen and (max-width: 640px){
+  .menu{
+    display: none;
+  }
+  .main{
+    margin-left: 0;
+  }
+}

src/components/components/message.scss

+
+
+//弹出框样式
+.modal-mask{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(55,55,55,.6);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.confirm-content{
+  padding-left: 30px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+
+
+.modal-confirm{
+  width: 400px;
+  box-sizing: border-box;
+  padding: 30px 40px;
+  background-color: #fff;
+  border-radius: 6px;
+  transition: transform .3s ease;
+  i{
+    color: #fa0;
+    font-size: 24px;
+    position: relative;
+    top: 2px;
+  }
+
+  .confirm-btns{
+    text-align: right;
+  }
+}
+
+.modal-box{
+  width: 520px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 6px;
+  transition: transform .3s ease;
+}
+
+
+@media only screen and (max-width: 640px) {
+
+  .modal-confirm{
+    width: 100%;
+    margin: 0 20px;
+    padding: 10px 20px;
+
+  }
+  .modal-box{
+    width: 100%;
+    margin: 0 20px;
+  }
+
+}
+
+.modal-header{
+  padding: 13px 18px 14px 16px;
+  border-bottom: 1px solid #e9e9e9;
+  position: relative;
+  i{
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  h3{
+    font-size: 14px;
+  }
+}
+
+.modal-body{
+  padding: 16px;
+}
+
+.modal-footer{
+  padding: 10px 18px 10px 10px;
+  border-top: 1px solid #e9e9e9;
+  background: #fff;
+  border-radius: 0 0 6px 6px;
+  text-align: right;
+}
+
+.modal-enter, .modal-leave {
+  opacity: 0;
+}
+.modal-transition{
+  transition: all .3s ease;
+}
+
+.modal-enter .modal-confirm,
+.modal-leave .modal-confirm {
+  transform: scale(1.1);
+}
+.modal-enter .modal-box,
+.modal-leave .modal-box {
+  transform: scale(1.1);
+}
+
+//popover
+.v-popover-tag{
+  display: inline-block;
+}
+.v-popover-wrap{
+  position: absolute;
+}
+.v-popover-box{
+  box-sizing: border-box;
+  width: 177px;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 1px 6px hsla(0,0%,39%,.2);
+  position: relative;
+}
+.v-popover-title{
+  padding: 0 16px;
+  line-height: 32px;
+  height: 32px;
+  border-bottom: 1px solid #e9e9e9;
+  color: #666;
+}
+.v-popover-content{
+  padding: 8px 16px;
+  color: #666;
+  word-break: break-all;
+}
+.v-popover-arrow{
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  // left: 50%;
+  margin-left: -5px;
+  &:after{
+    content: " ";
+    margin-left: -4px;
+    border: 4px solid transparent;
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+}
+.v-popover-arrow-top{
+  border-bottom-width: 0;
+  border-top-color: #d9d9d9;
+  bottom: -5px;
+  &:after{
+    border-top-color: #fff;
+    bottom: -3px;
+  }
+}
+.v-popover-arrow-bottom{
+  border-top-width: 0;
+  border-bottom-color: #d9d9d9;
+  top: -5px;
+  &:after{
+    border-bottom-color: #fff;
+    top: -3px;
+  }
+}

src/components/components/tabs.scss

+.v-tabs-nav-wrap{
+  width: 100%;
+  overflow-x: hidden;
+  height: 37px;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 16px;
+  .v-tabs-nav{
+    position: relative;
+    height: 100%;
+    transition: left .6s ease;
+    .v-tabs-nav-item{
+      float: left;
+      padding: 8px 20px;
+      margin-right: 24px;
+      cursor: pointer;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-bottom-color: transparent;
+      &:last-child{
+        margin-right: 0;
+      }
+    }
+    .v-tabs-nav-active{
+      border-bottom-color: #2db7f5;
+    }
+  }
+}
+.v-tabs-wrap{
+  width: 100%;
+  overflow-x: hidden;
+  .v-tabs-content{
+    position: relative;
+    display: flex;
+    transition: left .6s cubic-bezier(0.65, 0.05, 0.36, 1);;
+    &>*{
+      display: block;
+      flex: 1;
+    }
+  }
+}

src/components/Confirm.vue

+<template>
+  <div class="modal-mask" v-show="show" transition="modal">
+    <div class="modal-confirm">
+      <h2 class="confirm-header">
+        <i class="iconfont icon-questioncircle"></i> {{ title }}
+      </h2>
+      <div class="confirm-content">
+        {{ content }}
+      </div>
+      <div class="confirm-btns">
+        <button class="btn" @click="op('cancel')">取 消</button>
+        <button class="btn btn-primary" @click="op('ok')">确 定</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        show: false,
+        onCancel: false,
+        onOk: false,
+        title: '',
+        content: ''
+      }
+    },
+    methods: {
+      alert (setting) {
+        this.title = setting.title || '确认操作'
+        this.content = setting.content || '确认内容'
+        this.onOk = setting.onOk || false
+        this.onCancel = setting.onCancel || false
+        this.show = true
+        document.body.style.overflow = 'hidden'
+      },
+      op (type) {
+        this.show = false
+        if (type === 'cancel') {
+          if (this.onCancel) this.onCancel()
+        } else {
+          if (this.onOk) this.onOk()
+        }
+
+        this.onCancel = false
+        this.onOk = false
+
+        document.body.style.overflow = ''
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .confirm-content{
+    padding-left: 30px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  .modal-confirm{
+    width: 400px;
+    box-sizing: border-box;
+    padding: 30px 40px;
+    background-color: #fff;
+    border-radius: 6px;
+    transition: transform .3s ease;
+    i{
+      color: #fa0;
+      font-size: 24px;
+      position: relative;
+      top: 2px;
+    }
+
+    .confirm-btns{
+      text-align: right;
+    }
+  }
+</style>

src/components/DateLine.vue

+<template>
+  <tr>
+    <td v-for="item in items" v-bind:class="{'dp-last': month!= item.month, 'dp-today': cur == item.data, 'dp-select': sel == item.data}">
+      <span @click="click(item)">{{ item.day }}</span>
+    </td>
+  </tr>
+</template>
+
+<script>
+  export default {
+    props: ['items', 'cur', 'sel', 'month'],
+    methods: {
+      click (item) {
+        this.$dispatch('click', item.data)
+      }
+    }
+  }
+</script>
+

src/components/DatePicker.vue

+<template>
+  <div v-el:dp>
+    <div class="dp-out">
+      <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">
+      <i class="iconfont icon-calendar"></i>
+    </div>
+    <div class="dp" v-show="show" v-el:dp2 transition="slide">
+      <div class="dp-header1">
+        <div class="dp-input-wrap" v-if="showtime">
+          <input class="input" placeholder="请选择日期" :value="outd">
+        </div>
+
+        <div class="dp-input-wrap" v-if="showtime">
+          <div class="input-wrap">
+            <v-time :val="time" v-on:time-change="change" v-ref:time></v-time>
+          </div>
+        </div>
+
+        <div class="dp-text" v-if="!showtime">{{out? out: '请选择时间'}}</div>
+        <i class="iconfont icon-crosscircle" @click="show=false"></i>
+      </div>
+      <div class="dp-header2"><a class="dp-h-1" @click="cy(-1)">«</a><a class="dp-h-2" @click="cm(-1)">‹</a>
+        <span class="dp-ym">{{y}}年 {{m}}月</span>
+        <a class="dp-h-3" @click="cm(1)">›</a><a class="dp-h-4" @click="cy(1)">»</a></div>
+      <div class="dp-body">
+        <table class="dp-table">
+          <thead>
+          <tr>
+            <th><span>一</span></th>
+            <th><span>二</span></th>
+            <th><span>三</span></th>
+            <th><span>四</span></th>
+            <th><span>五</span></th>
+            <th><span>六</span></th>
+            <th><span>日</span></th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr is="v-line" v-for="cell in lineDate" :items="cell" :month="m" :cur="cur" :sel="sel"></tr>
+          </tbody>
+        </table>
+
+      </div>
+      <div class="dp-footer"><a>今天</a> <span class="btn btn-primary btn-sm" @click="show=false">确 定</span></div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import TimePicker from './TimePicker.vue'
+  import DateLine from './DateLine.vue'
+  function getCalendar (y, m) {
+    // 输出一个日历数据源  月份不必减1
+    y = parseInt(y)
+    m = parseInt(m)
+    var time = new Date(y, m - 1, 1)
+    var lastDate,
+      nextDate
+    var lastMonth = m - 1
+    var nextMonth = m + 1
+    if (m == 1) {
+      lastDate = '' + (y - 1) + '-' + +12 + '-'
+      nextDate = '' + y + '-' + 2 + '-'
+      lastMonth = 12
+    } else if (m == 12) {
+      lastDate = '' + y + '-' + 11 + '-'
+      nextDate = '' + (y + 1) + '-' + 1 + '-'
+      nextMonth = 1
+    } else {
+      lastDate = '' + y + '-' + (m - 1) + '-'
+      nextDate = '' + y + '-' + (m + 1) + '-'
+    }
+    var maxNumber = 42
+    var r1 = []
+    var r2 = []
+    var r3 = []
+    var lastFix = time.getDay() - 1
+    lastFix = lastFix < 0 ? lastFix + 7 : lastFix
+    var lastMaxDate = new Date(y, m - 1, 0).getDate() // 上个月份最大天数
+    var maxDate = new Date(y, m, 0).getDate()  // 当前月份的
+    var i, t
+    for (i = 0; i < lastFix; i++) {
+      t = lastMaxDate - lastFix + i + 1
+      r1[i] = {month: lastMonth, day: t, data: lastDate + t}
+    }
+    for (i = 0; i < maxDate; i++) {
+      t = i + 1
+      r2[i] = {month: m, day: t, data: '' + y + '-' + +m + '-' + t}
+    }
+    var nextFix = maxNumber - maxDate - lastFix
+    for (i = 0; i < nextFix; i++) {
+      t = i + 1
+      r3[i] = {month: nextMonth, day: t, data: nextDate + t}
+    }
+    var result = r1.concat(r2, r3)
+    var ar = []
+    for (i = 0; i < 6; i++) {
+      ar.push(result.splice(0, 7))
+    }
+    return ar
+  }
+
+  export default {
+    props: {
+      val: {
+        coerce (val) {
+          return val
+        }
+      },
+      short: {
+        coerce (val) {
+          // 支持10位
+          return Boolean(val)
+        }
+      },
+      showtime: {
+        coerce (val) {
+          // 支持显示时间
+          return Boolean(val)
+        }
+      }
+    },
+    data () {
+      var show = new Date()
+      var time = ''
+      if (this.val) {
+        let stamp = this.short ? this.val * 1000 : this.val
+        show = new Date(parseInt(stamp))
+        var sel = show.getFullYear() + '-' + (show.getMonth() + 1) + '-' + show.getDate()
+        time = show.getHours() + ':' + show.getMinutes() + ':' + show.getSeconds()
+      }
+
+      let n = new Date()
+      let cur = '' + n.getFullYear() + '-' + (n.getMonth() + 1) + '-' + n.getDate() // 当前日期
+
+      let y = show.getFullYear()
+      let m = show.getMonth() + 1
+
+      var lineDate = getCalendar(y, m)  // 显示的日历
+
+      return {
+        cur,
+        sel,
+        y,
+        m,
+        lineDate,
+        time,   // 用于时间组件
+        show: false
+      }
+    },
+    computed: {
+      out () {
+        if (!this.val) return ''
+        var d = this.short ? new Date(this.val * 1000) : new Date(parseInt(this.val))
+
+        var dy = (d.getFullYear()) + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2)
+        var dm = ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2) + ':' + ('0' + d.getSeconds()).slice(-2)
+        if (this.showtime) {
+          return dy + ' ' + dm
+        } else {
+          return dy
+        }
+      },
+      outd () {
+        if (!this.val) return ''
+
+        var d = this.short ? new Date(this.val * 1000) : new Date(parseInt(this.val))
+
+        var dy = (d.getFullYear()) + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2)
+        return dy
+      }
+    },
+    ready () {
+      var dp = this.$els.dp
+      var dp2 = this.$els.dp2
+      var time = this.$refs.time
+      dp2.addEventListener('click', function (e) {
+        console.log(111)
+        if (time) time.show = false
+        e.stopPropagation()
+      })
+
+      dp.addEventListener('click', function (e) {
+        e.stopPropagation()
+      })
+
+      document.body.addEventListener('click', function () {
+        this.show = false
+      }.bind(this))
+    },
+    methods: {
+      cm: function (flag) {
+        // 前进后退月
+        if (flag == -1) {
+          if (this.m == 1) {
+            this.init(parseInt(this.y) - 1, 12)
+          } else {
+            this.init(this.y, parseInt(this.m) - 1)
+          }
+        } else {
+          if (this.m == 12) {
+            this.init(parseInt(this.y) + 1, 1)
+          } else {
+            this.init(this.y, parseInt(this.m) + 1)
+          }
+        }
+      },
+      cy: function (flag) {
+        // 前进后退年
+        let y = flag == -1 ? parseInt(this.y) - 1 : parseInt(this.y) + 1
+        this.init(y, this.m)
+      },
+      init (y, m) {
+        this.lineDate = getCalendar(y, m)
+        this.y = y
+        this.m = m
+      },
+      change (time) {
+        var sp = time.split(':')
+        if (this.sel) {
+          var sp2 = this.sel.split('-')
+
+          for (var i = 0; i < sp.length; i++) {
+            sp[i] = parseInt(sp[i])
+            sp2[i] = parseInt(sp2[i])
+          }
+          this.val = new Date(sp2[0], sp2[1] - 1, sp2[2], sp[0], sp[1], sp[2]).getTime()   // 更新时间错
+
+          if (this.short) {
+            this.val = this.val / 1000
+          }
+        } else {
+          // todo
+        }
+      }
+    },
+    events: {
+      click (data) {
+        // 点击事件
+
+        this.sel = data
+        var ar = data.split('-')
+        var m = ar[1]
+        var y = ar[0]
+
+        if (this.showtime) {
+          var n = this.short ? new Date(this.val * 1000) : new Date(parseInt(this.val))
+          this.val = new Date(ar[0], ar[1] - 1, ar[2], n.getHours(), n.getMinutes(), n.getSeconds()).getTime()
+        } else {
+          this.val = new Date(ar[0], ar[1] - 1, ar[2]).getTime()
+        }
+
+        if (this.short) {
+          this.val = this.val / 1000
+        }
+
+        if (m != this.m) {
+          this.init(y, m)
+        }
+      }
+    },
+    components: {
+      'v-line': DateLine,
+      'v-time': TimePicker
+    }
+  }
+</script>
+
+<style lang="scss">
+  .dp-out{
+    position: relative;
+    i{
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      margin-top: -7px;
+    }
+  }
+
+  .dp{
+    width: 231px;
+    //height: 310px;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+    border:1px solid #d9d9d9;
+    border-radius: 6px;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    background: #fff;
+    z-index:10;
+    .dp-text{
+      height: 100%;
+      line-height: 1.5;
+      padding-left: 4px;
+    }
+    .icon-crosscircle{
+      cursor: pointer;
+      color: #ccc;
+      position: absolute;
+      right: 5px;
+      top: 10px;
+      font-size: 12px;
+      transition: color .3s ease ;
+
+      &:hover{
+        color: #999;
+      }
+    }
+    .dp-body{
+      padding: 4px 8px;
+    }
+  }
+  .dp-table{
+    width: 100%;
+    text-align: center;
+    border-collapse: collapse;
+    th{
+      padding: 6px 0;
+      border: 0;
+    }
+    td{
+      padding: 4px 0;
+      border: 0;
+    }
+    th span{
+      display: block;
+      font-weight: normal;
+    }
+    td span{
+      display: block;
+      width: 20px;
+      height: 20px;
+      border: 1px solid transparent;
+      margin: 0 auto;
+      transition: background 0.3s ease;
+      border-radius: 4px;
+      padding: 0;
+      box-sizing: border-box;
+      font-size: 12px;
+      line-height: 20px;
+      &:hover{
+        background: #eaf8fe;
+        cursor: pointer;
+      }
+    }
+  }
+  .dp-table .dp-last span{
+    color: #ccc
+  }
+  .dp-table .dp-today span{
+    border-color: #2db7f5;
+    font-weight: bold;
+    color: #2db7f5;
+  }
+  .dp-table .dp-select span{
+    background: #2db7f5;
+    color: #fff;
+    border: 1px solid transparent;
+    &:hover{
+      background: #2db7f5;
+    }
+  }
+  .dp-header1{
+    position: relative;
+    padding: 6px;
+    height: 34px;
+    border-bottom: 1px solid #e9e9e9;
+    box-sizing: border-box;
+  }
+
+  .dp-header2{
+    position: relative;
+    text-align: center;
+    height: 34px;
+    border-bottom: 1px solid #e9e9e9;
+    box-sizing: border-box;
+    line-height: 34px;
+    .dp-ym{
+      font-weight: bold;
+    }
+    a{
+      color: #999;
+      line-height: 34px;
+      height: 34px;
+      font-size: 16px;
+      display: inline-block;
+      padding: 0 5px;
+      position: absolute;
+      font-family: Arial,Hiragino Sans GB,Microsoft Yahei,Microsoft Sans Serif,sans-serif;
+      &:hover{
+        color:#2db7f5;
+        cursor: pointer;
+      }
+    }
+    .dp-h-1{
+      left: 7px
+    }
+    .dp-h-2{
+      left: 29px;
+    }
+    .dp-h-3{
+      right: 29px;
+    }
+    .dp-h-4{
+      right: 7px;
+    }
+  }
+  .dp-footer{
+    height: 38px;
+    border-top: 1px solid #e9e9e9;
+    text-align: center;
+    position: relative;
+    a{
+      display: inline-block;
+      line-height: 34px;
+      height: 34px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+    span{
+      position: absolute;
+      right: 16px;
+      top: 4px;
+      padding: 2px 4px;
+      font-size: 12px;
+      border: 1px solid transparent
+    }
+  }
+
+  .dp-input-wrap{
+    width: 96px;
+    float: left;
+    margin-right: 5px;
+    position: relative;
+    .input{
+      box-sizing: border-box;
+      margin-right: 5px;
+      height: 22px;
+      font-size: 12px;
+      border-radius: 4px;
+
+    }
+  }
+</style>

src/components/index.js

+import Box from './Box.vue'
+import Message from './Message.vue'
+import Confirm from './Confirm.vue'
+import TimePicker from './TimePicker.vue'
+import DatePicker from './DatePicker.vue'
+import Menu from './Menu.vue'
+
+const WebStyle = {
+  Box,
+  Message,
+  Confirm,
+  TimePicker,
+  DatePicker,
+  Menu
+}
+
+window.WebStyle = WebStyle
+
+if (process.env.NODE_ENV === 'production') {
+  require('../assets/sass/index.scss')
+}
+
+module.exports = WebStyle

src/components/Menu.vue

+<template>
+  <div class="menu" id="app">
+    <div class="menu-top">
+      <h2>TMS系统</h2>
+    </div>
+  <div class="list" v-for="item in source">
+    <div class="menu-line" @click="toggle(item)" :class="{'active-line': item.open}">
+      <i class="iconfont{{item.icon? ' icon-' + item.icon: '' }}"></i> <span class="menu-name">{{ item.name }}</span><b class="iconfont">&#xe600;</b>
+    </div>
+
+    <ul :style="{ height: item.open? 34*item.routes.length + 'px': '0px'}">
+      <li v-for="route in item.routes" :class="{active: route.url == curPath}"><a :href="route.url">{{ route.name }}</a></li>
+    </ul>
+
+  </div>
+  </div>
+
+</template>
+
+<script>
+  var location = window.location
+  export default {
+    props: {
+      source: {
+        coerce: function (ar) {
+//          var path = location.href.replace(location.origin, '')
+//          ar.forEach(function (it) {
+//            if (it.routes.some(function (route) {
+//              return route.url == path
+//              })) {
+//              Vue.set(it, 'open', true)
+//            } else {
+//              Vue.set(it, 'open', false)
+//            }
+//          })
+
+          return ar
+        }
+      }
+    },
+    data () {
+      // 返回当前路由
+      return {curPath: location.href.replace(location.origin, '')}
+    },
+    methods: {
+      toggle (item) {
+        if (item.open) return
+
+        item.open = false
+
+        this.source.forEach(function (it) {
+          it.open = false
+        })
+        item.open = true
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss">
+  .menu {
+    width: 220px;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: fixed;
+    border-right: 1px solid #ddd;
+    box-sizing: border-box;
+
+    ul {
+      background: #FAFAFA;
+      transition: height .3s;
+      overflow: hidden;
+    }
+    li {
+      padding: 7px 0 7px 46px;
+      :hover {
+        color: #61b98e;
+      }
+    }
+    a {
+      color: #666;
+    }
+
+    .menu-top {
+      text-align: center;
+      padding: 20px 0;
+      color: #61b98e;
+    }
+    .active a {
+      color: #61b98e;
+    }
+  }
+
+  .main {
+    display: flex;
+    margin-left: 220px;
+    height: 100vh;
+    flex-direction: column;
+    .content {
+      flex-grow: 1;
+      overflow: scroll;
+      padding: 0 10px;
+    }
+  }
+
+  .menu-line {
+    height: 20px;
+    padding-top: 14px;
+    padding-bottom: 6px;
+    cursor: pointer;
+
+    .menu-name {
+      width: 130px;
+      white-space: nowrap;
+      overflow: hidden;
+      display: inline-block;
+      text-overflow: ellipsis;
+    }
+
+    i {
+      margin-left: 10px;
+      padding: 3px 12px 0;
+      font-size: 12px;
+      float: left;
+      min-width: 12px;
+    }
+
+    b {
+      margin-right: 20px;
+      font-size: 12px;
+      font-weight: bold;
+      transform: scale(0.8);
+      transition: transform .3s;
+      float: right;
+    }
+  }
+
+  .active-line {
+    b {
+      font-size: 12px;
+      font-weight: bold;
+      transform: scale(0.8) rotate(90deg);
+    }
+  }
+
+  .header {
+    height: 64px;
+    box-sizing: border-box;
+    padding: 20px;
+    background-color: #f5f5f5;
+
+    .left-part {
+      float: left;
+    }
+    ul {
+      float: right;
+    }
+    li {
+      display: inline-block;
+      margin: 0 5px;
+      a {
+        color: #61b98e;
+      }
+    }
+  }
+
+  @media screen and (max-width: 640px) {
+    .menu {
+      display: none;
+    }
+    .main {
+      margin-left: 0;
+    }
+  }
+
+</style>

src/components/Message.vue

+<template>
+  <div class="message" :class="{'message-move': show}">
+    <div class="message-content">
+      <i class="iconfont" :class="{'icon-checkcircle': type == 1, 'icon-crosscircle': type == 2}"></i>
+      <span>{{ content }}</span>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        show: false,
+        type: '1',
+        content: '',
+        flag: {}
+      }
+    },
+    methods: {
+      success (content) {
+        this.appear(content, 1)
+      },
+      error (content) {
+        this.appear(content, 2)
+      },
+      appear (content, type) {
+        this.content = content
+        this.type = type
+        this.show = true
+        clearTimeout(this.flag)
+        this.flag = setTimeout(function () {
+          this.show = false
+        }.bind(this), 2000)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  /*提示框*/
+  .message {
+    position: fixed;
+    left: 50%;
+    top: -45px;
+    box-sizing: border-box;
+    transition: top .5s ease;
+    z-index: 10001;
+    .message-content {
+      position: relative;
+      right: 50%;
+      padding: 5px 14px;
+      border-radius: 6px;
+      border: 1px solid #d9d9d9;
+      background: #fff;
+      display: block;
+      box-sizing: border-box;
+      box-shadow: 0 1px 8px hsla(0, 0%, 39%, .2);
+    }
+
+    .icon-checkcircle {
+      color: #87d068;
+      font-size: 12px;
+      -webkit-text-stroke-width: 0;
+
+    }
+    .icon-crosscircle {
+      color: #f50;
+      font-size: 12px;
+      -webkit-text-stroke-width: 0;
+    }
+  }
+
+  .message-move {
+    top: 24px;
+  }
+</style>

src/components/TimePicker.vue

+<template>
+  <div>
+    <div class="tp-out">
+      <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">
+    </div>
+    <div class="tp" v-show="show" v-el:tp transition="slide">
+      <div class="tp-header">
+        <input placeholder="请选择时间" :value="out">
+        <i class="iconfont icon-crosscircle" @click="show=false"></i>
+      </div>
+      <div class="tp-body">
+        <ul v-el:h>
+          <li v-for="n in h" :class="{'tp-active': n == sh}" @click="click(n, 'h')">{{n}}</li>
+        </ul>
+        <div class="tp-line"></div>
+        <ul v-el:m>
+          <li v-for="n in m" :class="{'tp-active': n == sm}" @click="click(n, 'm')">{{n}}</li>
+        </ul>
+        <div class="tp-line"></div>
+        <ul v-el:s>
+          <li v-for="n in s" :class="{'tp-active': n == ss}" @click="click(n, 's')">{{n}}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    props: {
+      val: {
+        coerce: function (val) {
+          if (!val) return ''
+          if (val.indexOf(':') != -1) {
+            let sp = val.split(':')
+            val = parseInt(sp[0]) + ':' + parseInt(sp[1]) + ':' + parseInt(sp[2])
+          }
+          return val
+        }
+      }
+    },
+    data () {
+      var sp = this.val.split(':')
+      if (!this.val) sp = [-1, -1, -1]
+      return {
+        sh: sp[0],
+        sm: sp[1],
+        ss: sp[2],
+        show: false,
+        op: false
+      }
+    },
+    ready () {
+      this.$els.h.scrollTop = this.sh * 24
+      this.$els.m.scrollTop = this.sm * 24
+      this.$els.s.scrollTop = this.ss * 24
+
+      this.$els.tp.addEventListener('click', function (e) {
+        e.stopPropagation()
+        return false
+      })
+
+      document.body.addEventListener('click', function () {
+        this.show = false
+        // if(this.show){
+        //   this.show = false
+        // }
+      }.bind(this))
+    },
+    computed: {
+      h () {
+        return 24
+      },
+      m () {
+        return 60
+      },
+      s () {
+        return 60
+      },
+      out () {
+        if (!this.val) return ''
+        let sp = this.val.split(':')
+
+        return ('0' + sp[0]).slice(-2) + ':' + ('0' + sp[1]).slice(-2) + ':' + ('0' + sp[2]).slice(-2)
+      }
+    },
+    watch: {
+      val (val) {
+        if (this.op) {
+          this.$dispatch('time-change', this.val)
+        } else {
+          if (val) {
+            let sp = val.split(':')
+            this.sh = parseInt(sp[0])
+            this.sm = parseInt(sp[1])
+            this.ss = parseInt(sp[2])
+            this.$els.h.scrollTop = this.sh * 24
+            this.$els.m.scrollTop = this.sm * 24
+            this.$els.s.scrollTop = this.ss * 24
+          } else {
+            this.clear()
+          }
+        }
+        this.op = false
+      }
+    },
+    methods: {
+      click (num, type) {
+        this.op = true
+        this['s' + type] = num
+        this.scroll(num, type)
+        this.change()
+      },
+      scroll (num, type) {
+        var dom = this.$els[type]
+        /* eslint-disable */
+        requestAnimationFrame(step)
+        function step () {
+          var pg = num * 24 - dom.scrollTop
+          if (pg > 0) {
+            dom.scrollTop += 12
+            requestAnimationFrame(step)
+          } else if (pg < -12) {
+            dom.scrollTop -= 12
+            requestAnimationFrame(step)
+          } else {
+            dom.scrollTop += pg
+          }
+        }
+      },
+      /* eslint-enable */
+      change () {
+        if (this.sh == -1) {
+          this.sh = 0
+        }
+        if (this.sm == -1) {
+          this.sm = 0
+        }
+        if (this.ss == -1) {
+          this.ss = 0
+        }
+        let val = ('0' + this.sh).slice(-2) + ':' + ('0' + this.sm).slice(-2) + ':' + ('0' + this.ss).slice(-2)
+        this.val = val
+      },
+      clear () {
+        this.sh = -1
+        this.sm = -1
+        this.ss = -1
+        this.op = false
+        this.$els.h.scrollTop = 0
+        this.$els.m.scrollTop = 0
+        this.$els.s.scrollTop = 0
+        this.val = ''
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+.tp{
+  width: 168px;
+  height: 178px;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  border: 1px solid #ccc;
+  line-height: 1.5;
+  background: #fff;
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  z-index: 102;
+}
+.tp-header{
+  padding: 6px;
+  position: relative;
+  border-bottom: 1px solid #e9e9e9;
+  input{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    cursor: auto;
+    line-height: 1.5;
+    outline: 0;
+    color: #666;
+    &::selection {
+      background: #4BB8FF;
+      color: #fff;
+    }
+  }
+  i{
+    position: absolute;
+    right: 10px;
+    top: 6px;
+    font-size: 12px;
+    color: #ccc;
+    transition: color ease .3s;
+    cursor: pointer;
+    &:hover{
+      color: #999;
+    }
+  }
+}
+.tp-body{
+  ul{
+    float: left;
+    height: 144px;
+    width: 55px;
+    overflow-y: scroll;
+
+    .tp-active{
+      background: #f7f7f7;
+      font-weight: 700;
+
+      &:hover{
+        background: #f7f7f7;
+      }
+    }
+    li{
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      transition: background 0.3s ease;
+      cursor: pointer;
+      &:hover{
+        background: #eaf8fe;
+      }
+    }
+    &:after{
+      content: '';
+      display: block;
+      height:120px;
+
+    }
+  }
+  .tp-line{
+    float: left;
+    width: 1px;
+    height: 144px;
+    background: #e9e9e9
+  }
+}
+</style>

src/js/tabs.js

+;(function (Vue, components) {
+  var template = `
+  <div class="v-tabs-nav-wrap" v-el:tabs>
+    <div class="v-tabs-nav clear" :style="{width: navWidth + 'px'}">
+      <div class="v-tabs-nav-item" v-for="item in source" @click="switch($index)">{{item.title}}</div>
+    </div>
+  </div>
+  <div class="v-tabs-wrap">
+    <div class="v-tabs-content" :style="{width: source.length * 100 + '%', left: - active + '00%'}">
+      <slot></slot>
+    </div>
+  </div>`
+
+  var tabs = Vue.extend({
+    template,
+    compute: {
+
+    },
+    props: {
+      source: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {
+        active: 0,
+        navWidth: 'auto',
+      }
+    },
+    methods: {
+      switch(index){
+        if(this.active != index){
+          this.active = index
+        }
+      }
+    },
+    ready: function () {
+      // 计算宽度
+      var arr = this.$els['tabs'].querySelectorAll('.v-tabs-nav-item');
+      var width = 0
+      arr.forEach(function (item) {
+        // 不能用offsetWidth
+        width+=Math.ceil(getComputedStyle(item, null).width.slice(0, -2)) + 64
+      })
+      this.navWidth = width - 24
+    }
+  })
+
+  components.tabs = tabs
+})(Vue, function () {
+  window.components = window.components ? window.components : {}
+  return window.components
+}())

src/main.js

+import Vue from 'vue'
+import WebStyle from './components/index'
+/* eslint-disable no-new */
+
+var data = [
+  {
+    'name': '库存',
+    'icon': 'tago',
+    'routes': [
+      {
+        'name': 'SKU查询',
+        'url': '/index.html'
+      },
+      {
+        'name': '库存预警',
+        'url': '/p2'
+      },
+      {
+        'name': '安全损耗比',
+        'url': '/p3'
+      }
+    ],
+    'open': true
+  },
+  {
+    'name': '人员管理',
+    'icon': 'solution',
+    'routes': [
+      {
+        'name': '修改权限',
+        'url': '/p4'
+      },
+      {
+        'name': '人员列表',
+        'url': '/p5'
+      }
+    ],
+    'open': false
+  },
+  {
+    'name': '全英雄联盟最骚的骚猪',
+    'icon': 'enviromento',
+    'routes': [
+      {
+        'name': '小轩在不在',
+        'url': '/p7'
+      },
+      {
+        'name': '我是娇妹',
+        'url': '/p6'
+      }
+    ],
+    'open': false
+  }
+]
+
+new Vue({
+  el: 'body',
+  data: {
+    menuData: data
+  },
+  methods: {
+    toggle () {
+      this.$refs.confirm.alert('显示成功')
+    }
+  },
+  components: {
+    menu: WebStyle.Menu
+  }
+})

static/css/static.css

+article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}body,html{width:100%;height:100%;position:relative;color:#666}ol,ul{list-style:none}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;font-size:14px}h1,h2,h3,h4,h5{font-weight:500;line-height:1.1;margin-top:20px;margin-bottom:10px}h1{font-size:20px}h2{font-size:18px}p{margin:8px 0}a{color:#2db7f5;text-decoration:none;-webkit-transition:color .3s ease;transition:color .3s ease;cursor:pointer}a:hover{color:#4dc4f0}.clear:after{content:"";height:0;display:block;clear:both}.row{position:relative;width:100%;height:auto;display:block}.row:after{content:"";display:block;height:0;clear:both}.row .center{float:none;margin:0 auto}.col-1{padding-right:8px;width:8.33333%;position:relative;min-height:1px}.col-1,.col-offset-1{float:left;box-sizing:border-box}.col-offset-1{margin-left:8.33333%}.col-2{padding-right:8px;width:16.66667%;position:relative;min-height:1px}.col-2,.col-offset-2{float:left;box-sizing:border-box}.col-offset-2{margin-left:16.66667%}.col-3{padding-right:8px;width:25%;position:relative;min-height:1px}.col-3,.col-offset-3{float:left;box-sizing:border-box}.col-offset-3{margin-left:25%}.col-4{padding-right:8px;width:33.33333%;position:relative;min-height:1px}.col-4,.col-offset-4{float:left;box-sizing:border-box}.col-offset-4{margin-left:33.33333%}.col-5{padding-right:8px;width:41.66667%;position:relative;min-height:1px}.col-5,.col-offset-5{float:left;box-sizing:border-box}.col-offset-5{margin-left:41.66667%}.col-6{padding-right:8px;width:50%;position:relative;min-height:1px}.col-6,.col-offset-6{float:left;box-sizing:border-box}.col-offset-6{margin-left:50%}.col-7{padding-right:8px;width:58.33333%;position:relative;min-height:1px}.col-7,.col-offset-7{float:left;box-sizing:border-box}.col-offset-7{margin-left:58.33333%}.col-8{padding-right:8px;width:66.66667%;position:relative;min-height:1px}.col-8,.col-offset-8{float:left;box-sizing:border-box}.col-offset-8{margin-left:66.66667%}.col-9{padding-right:8px;width:75%;position:relative;min-height:1px}.col-9,.col-offset-9{float:left;box-sizing:border-box}.col-offset-9{margin-left:75%}.col-10{padding-right:8px;width:83.33333%;position:relative;min-height:1px}.col-10,.col-offset-10{float:left;box-sizing:border-box}.col-offset-10{margin-left:83.33333%}.col-11{padding-right:8px;width:91.66667%;position:relative;min-height:1px}.col-11,.col-offset-11{float:left;box-sizing:border-box}.col-offset-11{margin-left:91.66667%}.col-12{padding-right:8px;width:100%;position:relative;min-height:1px}.col-12,.col-offset-12{float:left;box-sizing:border-box}.col-offset-12{margin-left:100%}.text-center{text-align:center}.loading{font-family:iconfont!important;font-size:14px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale;display:inline-block;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.loading:after{content:"\E6A1"}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@media only screen and (max-width:640px){.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{float:left;width:100%;padding-right:0;box-sizing:border-box}}.box-920{width:920px;box-sizing:border-box;margin:0 auto}@media only screen and (max-width:640px){.box-920{width:100%;margin:0}}.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(55,55,55,.6);z-index:100;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.fade-transition{-webkit-transition:opacity .3s;transition:opacity .3s}.fade-enter,.fade-leave{opacity:0}.slide-transition{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;-webkit-transform:translate(0);transform:translate(0)}.slide-enter{-webkit-transform:translateY(5px);transform:translateY(5px);opacity:0}.slide-leave{-webkit-transform:translateY(30px);transform:translateY(30px);opacity:0}.modal-enter,.modal-leave{opacity:0}.modal-transition{-webkit-transition:all .3s ease;transition:all .3s ease}.modal-enter .modal-box,.modal-enter .modal-confirm,.modal-leave .modal-box,.modal-leave .modal-confirm{-webkit-transform:scale(1.1);transform:scale(1.1)}.btn{display:inline-block;margin-bottom:0;font-weight:500;text-align:center;cursor:pointer;border:1px solid #d9d9d9;white-space:nowrap;line-height:1.5;padding:2px 14px;font-size:14px;border-radius:6px;-webkit-user-select:none;user-select:none;color:#666;outline:none;background-color:#fff}.btn:hover{background:#f7f7f7}.btn:active{background:#efefef;-webkit-transition:none;transition:none}.btn:disabled{color:#ccc;cursor:no-drop}.btn-primary{color:#fff;background-color:#2db7f5;border-color:#2db7f5}.btn-primary:hover{color:#fff;background-color:#45bff6;border-color:#45bff6}.btn-primary:active{background-color:#15aff4;border-color:#15aff4}.btn-primary:active,.btn-primary:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-primary:disabled{background-color:#8ed8fa;border-color:#8ed8fa;cursor:no-drop}.btn-success{color:#fff;background-color:#5fbc29;border-color:#5fbc29}.btn-success:hover{color:#fff;background-color:#6ad12e;border-color:#6ad12e}.btn-success:active{background-color:#54a724;border-color:#54a724}.btn-success:active,.btn-success:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-success:disabled{background-color:#96df6c;border-color:#96df6c;cursor:no-drop}.btn-info{color:#fff;background-color:#01b3ca;border-color:#01b3ca}.btn-info:hover{color:#fff;background-color:#01c9e3;border-color:#01c9e3}.btn-info:active{background-color:#019db1;border-color:#019db1}.btn-info:active,.btn-info:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-info:disabled{background-color:#33e7fe;border-color:#33e7fe;cursor:no-drop}.btn-warning{color:#fff;background-color:#fac450;border-color:#fac450}.btn-warning:hover{color:#fff;background-color:#fbcc69;border-color:#fbcc69}.btn-warning:active{background-color:#f9bc37;border-color:#f9bc37}.btn-warning:active,.btn-warning:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-warning:disabled{background-color:#fde5b3;border-color:#fde5b3;cursor:no-drop}.btn-danger{color:#fff;background-color:#e01515;border-color:#e01515}.btn-danger:hover{color:#fff;background-color:#ea2424;border-color:#ea2424}.btn-danger:active{background-color:#c91313;border-color:#c91313}.btn-danger:active,.btn-danger:disabled{color:#fff;-webkit-transition:none;transition:none}.btn-danger:disabled{background-color:#f16a6a;border-color:#f16a6a;cursor:no-drop}.btn-lg{padding:6px 18px}.btn-sm{padding:0 10px}.btn-block{display:block;width:100%}@font-face{font-family:iconfont;src:url(..//fonts/iconfont.eot);src:url(..//fonts/iconfont.eot#iefix) format("embedded-opentype"),url(..//fonts/iconfont.woff) format("woff"),url(..//fonts/iconfont.ttf) format("truetype"),url(..//fonts/iconfont.svg#iconfont) format("svg")}.iconfont{font-family:iconfont!important;font-size:14px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}.icon-arrowleft:before{content:"\E620"}.icon-arrowright:before{content:"\E621"}.icon-arrowup:before{content:"\E622"}.icon-arrowdown:before{content:"\E623"}.icon-caretcircleleft:before{content:"\E604"}.icon-caretcircleright:before{content:"\E605"}.icon-caretcircleup:before{content:"\E606"}.icon-caretcircledown:before{content:"\E607"}.icon-forward:before{content:"\E608"}.icon-backward:before{content:"\E609"}.icon-caretcircleoleft:before{content:"\E60B"}.icon-caretcircleoright:before{content:"\E60D"}.icon-caretcircleodown:before{content:"\E60E"}.icon-caretright:before{content:"\E60A"}.icon-caretleft:before{content:"\E60F"}.icon-caretup:before{content:"\E610"}.icon-caretdown:before{content:"\E611"}.icon-fastforward:before{content:"\E612"}.icon-fastbackward:before{content:"\E613"}.icon-stepbackward:before{content:"\E614"}.icon-stepforward:before{content:"\E615"}.icon-circleodown:before{content:"\E617"}.icon-circleoup:before{content:"\E618"}.icon-circleoleft:before{content:"\E619"}.icon-circleoright:before{content:"\E616"}.icon-circleright:before{content:"\E61A"}.icon-circleup:before{content:"\E61C"}.icon-playcircle:before{content:"\E61E"}.icon-playcircleo:before{content:"\E61F"}.icon-circleleft:before{content:"\E61B"}.icon-right:before{content:"\E600"}.icon-left:before{content:"\E601"}.icon-up:before{content:"\E602"}.icon-down:before{content:"\E603"}.icon-reload:before{content:"\E626"}.icon-doubleleft:before{content:"\E624"}.icon-doubleright:before{content:"\E625"}.icon-retweet:before{content:"\E627"}.icon-shrink:before{content:"\E628"}.icon-arrowsalt:before{content:"\E629"}.icon-rollback:before{content:"\E62A"}.icon-verticleleft:before{content:"\E62B"}.icon-verticleright:before{content:"\E62C"}.icon-cross:before{content:"\E62D"}.icon-check:before{content:"\E62E"}.icon-checkcircle:before{content:"\E62F"}.icon-checkcircleo:before{content:"\E630"}.icon-crosscircle:before{content:"\E631"}.icon-crosscircleo:before{content:"\E632"}.icon-exclamation:before{content:"\E633"}.icon-exclamationcircle:before{content:"\E634"}.icon-exclamationcircleo:before{content:"\E635"}.icon-info:before{content:"\E636"}.icon-infocircle:before{content:"\E637"}.icon-infocircleo:before{content:"\E638"}.icon-minuscircle:before{content:"\E639"}.icon-minuscircleo:before{content:"\E63A"}.icon-minus:before{content:"\E63B"}.icon-pluscircleo:before{content:"\E63C"}.icon-pluscircle:before{content:"\E63D"}.icon-plus:before{content:"\E63E"}.icon-swapleft:before{content:"\E63F"}.icon-swapright:before{content:"\E640"}.icon-swap:before{content:"\E641"}.icon-clockcircle:before{content:"\E642"}.icon-clockcircleo:before{content:"\E643"}.icon-pausecircle:before{content:"\E644"}.icon-pausecircleo:before{content:"\E645"}.icon-pause:before{content:"\E646"}.icon-questioncircle:before{content:"\E647"}.icon-questioncircleo:before{content:"\E648"}.icon-question:before{content:"\E649"}.icon-areachart:before{content:"\E64C"}.icon-appstore:before{content:"\E64D"}.icon-apple:before{content:"\E64E"}.icon-android:before{content:"\E64F"}.icon-bars:before{content:"\E650"}.icon-barchart:before{content:"\E651"}.icon-calendar:before{content:"\E654"}.icon-book:before{content:"\E655"}.icon-chrome:before{content:"\E65C"}.icon-code:before{content:"\E65D"}.icon-creditcard:before{content:"\E65F"}.icon-customerservice:before{content:"\E65E"}.icon-copy:before{content:"\E660"}.icon-delete:before{content:"\E661"}.icon-ellipsis:before{content:"\E667"}.icon-edit:before{content:"\E668"}.icon-export:before{content:"\E669"}.icon-exception:before{content:"\E66A"}.icon-file:before{content:"\E66B"}.icon-filetext:before{content:"\E66C"}.icon-filter:before{content:"\E66F"}.icon-folder:before{content:"\E670"}.icon-frowncircle:before{content:"\E672"}.icon-frown:before{content:"\E673"}.icon-smilecircle:before{content:"\E676"}.icon-smile:before{content:"\E677"}.icon-mehcircle:before{content:"\E678"}.icon-meh:before{content:"\E679"}.icon-github:before{content:"\E674"}.icon-laptop:before{content:"\E67A"}.icon-inbox:before{content:"\E67B"}.icon-ie:before{content:"\E67C"}.icon-home:before{content:"\E67D"}.icon-linechart:before{content:"\E67F"}.icon-link:before{content:"\E67E"}.icon-logout:before{content:"\E681"}.icon-mail:before{content:"\E682"}.icon-menuunfold:before{content:"\E683"}.icon-menufold:before{content:"\E684"}.icon-mobile:before{content:"\E685"}.icon-notification:before{content:"\E686"}.icon-paperclip:before{content:"\E687"}.icon-phone:before{content:"\E688"}.icon-picture:before{content:"\E689"}.icon-piechart:before{content:"\E68A"}.icon-poweroff:before{content:"\E68B"}.icon-setting:before{content:"\E68D"}.icon-sharealt:before{content:"\E68E"}.icon-search:before{content:"\E690"}.icon-poweroff1:before{content:"\E691"}.icon-solution:before{content:"\E68F"}.icon-tablet:before{content:"\E695"}.icon-team:before{content:"\E680"}.icon-totop:before{content:"\E69A"}.icon-videocamera:before{content:"\E69B"}.icon-user:before{content:"\E69C"}.icon-save:before{content:"\E69E"}.icon-unlock:before{content:"\E69F"}.icon-shoppingcart:before{content:"\E692"}.icon-windows:before{content:"\E6A0"}.icon-aliwangwango:before{content:"\E64A"}.icon-aliwangwang:before{content:"\E64B"}.icon-camerao:before{content:"\E652"}.icon-camera:before{content:"\E653"}.icon-eyeo:before{content:"\E66D"}.icon-eye:before{content:"\E66E"}.icon-enviroment:before{content:"\E665"}.icon-enviromento:before{content:"\E666"}.icon-staro:before{content:"\E693"}.icon-star:before{content:"\E694"}.icon-tags:before{content:"\E656"}.icon-tagso:before{content:"\E657"}.icon-tag:before{content:"\E658"}.icon-tago:before{content:"\E659"}.icon-cloud:before{content:"\E65A"}.icon-clouddownload:before{content:"\E65B"}.icon-cloudupload:before{content:"\E696"}.icon-clouduploado:before{content:"\E697"}.icon-clouddownloado:before{content:"\E698"}.icon-cloudo:before{content:"\E699"}.icon-iconfontcaretcircleoup:before{content:"\E60C"}.icon-loading:before{content:"\E6A1"}.icon-dislike:before{content:"\E6A2"}.icon-like:before{content:"\E6A3"}.icon-message:before{content:"\E6A4"}.icon-download:before{content:"\E663"}.icon-upload:before{content:"\E664"}.icon-paycircle:before{content:"\E6A8"}.icon-paycircleo:before{content:"\E6A9"}.icon-exclefile:before{content:"\E6AC"}.icon-pdffile:before{content:"\E6AB"}.icon-pptfile:before{content:"\E6A7"}.icon-jpgfile:before{content:"\E6AA"}.icon-unknowfile:before{content:"\E6A6"}.icon-minussquareo:before{content:"\E6AD"}.icon-plussquareo:before{content:"\E6AE"}.icon-iconfontdesktop:before{content:"\E662"}.icon-hdd:before{content:"\E675"}.icon-folderopen:before{content:"\E671"}.icon-circledown:before{content:"\E61D"}.icon-qrcode:before{content:"\E6A5"}.icon-scan:before{content:"\E6AF"}.icon-heart:before{content:"\E68C"}.icon-hearto:before{content:"\E6B0"}.icon-calculator:before{content:"\E6B1"}.icon-appstoreo:before{content:"\E6B2"}.icon-lock:before{content:"\E69D"}.table{width:100%;margin-bottom:24px;border-spacing:0;border-collapse:collapse;border:1px solid #ddd}.table tbody th,.table td{border-top:1px solid #ddd}.table thead th{border-bottom:2px solid #ddd}.table td,.table th{text-align:left;padding:8px;border-left:1px solid #ddd}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}.table-hover tbody tr:hover,.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9}.table-sm td,.table-sm th{padding:5px}.table-responsive{overflow:scroll}.table-responsive thead tr{white-space:nowrap}.table-responsive tbody td{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pagination{float:right}.pagination:after{content:' ';clear:both}.pagination .quick{float:left;width:100px;padding-left:8px;line-height:30px;height:30px;text-align:right}.pagination .quick input{width:40px;margin:0 5px}.pagination li{float:left;border-radius:6px;-webkit-user-select:none;user-select:none;min-width:28px;height:28px;border:1px solid #d9d9d9;background-color:#fff;text-align:center;line-height:28px;margin:0 5px;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease}.pagination li:hover{border-color:#2db7f5;color:#2db7f5}.pagination a{color:#666;padding:0 6px;display:inline-block}.pagination .next:before{content:"\E600"}.pagination .active{background-color:#2db7f5;color:#fff;cursor:default}.pagination .active:hover{color:#fff}.pagination .jump{border:none}.pagination .jump:before{content:"\2022\2022\2022";letter-spacing:2px}.form .row{margin-bottom:24px}.search-8>div{padding:8px}.padding-08>div{padding-right:8px}input,textarea{background:#fff none;outline:none;-webkit-appearance:none}.form input[type=checkbox]{-webkit-appearance:checkbox}.form input[type=radio]{-webkit-appearance:radio}.form textarea{position:relative;display:inline-block;vertical-align:bottom;line-height:1.5;background-color:#fff;background-image:none;min-height:100px}.form textarea,.input{cursor:text;font-size:14px;color:#666;border:1px solid #d9d9d9;border-radius:6px;width:100%;padding:4px 7px;box-sizing:border-box}.input{height:28px;line-height:1;-webkit-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.input:focus,.input:hover{border-color:#57c5f7}.input:focus{box-shadow:0 0 0 2px rgba(45,183,245,.2)}.require:before{display:inline-block;margin-right:4px;content:"*";font-family:SimSun;font-size:12px;color:#f60}.label{text-align:right;height:28px;line-height:28px;float:left;box-sizing:border-box;padding-right:8px}@media only screen and (max-width:640px){.label{text-align:left}}.form .text{height:28px;line-height:28px;padding-right:8px}.form .input{width:100%}.split{margin-right:8px;float:left}.select,.split{line-height:28px;height:28px}.select{border:1px solid #d9d9d9;border-radius:6px;background-color:#fff;margin:0;outline:0;width:100%}.checkbox,.radio{font-size:14px;cursor:pointer;height:28px;line-height:28px;margin-right:8px}.checkbox span,.radio span{margin:0 8px;display:inline-block}.checkbox input,.radio input{width:14px;height:14px}.drop{position:absolute;top:0;left:0}.drop .drop-ul{outline:none;position:relative;list-style-type:none;padding:0;margin:0;text-align:left;background-color:#fff;border-radius:6px;box-shadow:0 1px 6px rgba(99,99,99,.2);background-clip:padding-box;border:1px solid #d9d9d9}.drop .drop-ul li{padding:7px 15px;-webkit-transition:background .3s ease;transition:background .3s ease}.drop .drop-ul li:hover{background-color:#eaf8fe}.tags-wrap{width:100%;height:100%;outline:none}.tags-wrap:after{content:"";display:block;height:0;clear:both}.tags,.tags-input{position:relative;float:left;color:#fff;line-height:28px;margin:0 4px 4px 0;padding:0 22px 0 10px;border-radius:6px}.tags-input .content,.tags .content{line-height:28px}.tags-input .del,.tags .del{width:22px;height:28px;text-align:center;cursor:pointer;position:absolute;top:-1px;right:0}.tags-input{font-size:14px;padding:0;background-color:inherit;border:none;color:inherit;width:10em}.tags-enter,.tags-leave{-webkit-transform:scale(.9);transform:scale(.9);opacity:0}.tags-transition{-webkit-transition:all .3s ease;transition:all .3s ease}

demo/datePicker.html

@@ -38,5 +38,3 @@ <!doctype html>
 <script src="../dist/js/vue.js"></script>
-<script src="../src/js/timePicker.js"></script>
-<script src="../src/js/datePicker.js"></script>
-
+<script src="../dist/js/web-style.js"></script>
 <script>
@@ -50,3 +48,3 @@
         data: {
-            date: '1466653094167',
+            date: '',
             time: ''
@@ -68,2 +66,2 @@ },
 </body>
-</html>
+</html>

demo/index.html

@@ -13,3 +13,3 @@ <!doctype html>
     <script src="../dist/js/vue.js"></script>
-    <script src="../src/js/message.js"></script>
+    <script src="../dist/js/web-style.js"></script>
     <script>
@@ -16,0 +16,0 @@

demo/table.html

@@ -231,2 +231,2 @@ <!doctype html>
 </body>
-</html>
+</html>

demo/tabs.html

@@ -8,2 +8,9 @@ <!DOCTYPE html>
   <link rel="stylesheet" href="../dist/css/web-style.css">
+  <style media="screen">
+    #app{
+      width: 500px;
+      margin-top: 10px;
+      border-top: 1px solid black;
+    }
+  </style>
 </head>
@@ -13,7 +20,14 @@ <body>
   <div id="app">
-
+    <v-tabs :source="source">
+      <div v-for="item in source">{{item.content}}</div>
+      <!-- <div slot="slot-item-0">awefaw</div>
+      <div slot="slot-item-1"></div>
+      <div slot="slot-item-2"></div>
+      <div slot="slot-item-3"></div>
+      <div slot="slot-item-4"></div> -->
+    </v-tabs>
   </div>
 
   <script src="../dist/js/vue.js"></script>
-  <script src=""></script>
+  <script src="../src/js/tabs.js"></script>
   <script>
@@ -29,3 +43,3 @@ var app = new Vue({
         {
-          title: '选项卡二',
+          title: '选项卡awdawdqwa二',
           content: '选项卡二的内容'
@@ -36,4 +50,15 @@ },
           content: '选项卡三的内容'
+        },
+        {
+          title: '选项卡四',
+          content: '选项卡四的内容'
+        },
+        {
+          title: '选项卡五',
+          content: '选项卡五的内容'
         }
       ]
+    },
+    components: {
+      'v-tabs': components.tabs
     }
@@ -40,0 +65,0 @@ })

package.json

 {
   "name": "web-style",
-  "version": "0.2.5",
+  "version": "0.4.0",
   "description": "web style components",
@@ -8,4 +8,5 @@ "main": "index.js",
     "test": "test",
-    "push": "sh commit.sh",
-    "pack": "gulp pack"
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "static": "node build/static.js"
   },
@@ -29,15 +30,44 @@ "repository": {
   "dependencies": {
-    "vue": "^1.0.24"
+    "vue": "^1.0.26",
+    "babel-runtime": "^6.0.0"
   },
   "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-sass": "^2.3.1",
-    "gulp-uglify": "^1.5.4",
-    "gulp-clean-css": "^2.0.8",
-    "gulp-concat": "^2.6.0",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-babel": "^6.1.2",
-    "babel-preset-es2015": "^6.6.0"
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "connect-history-api-fallback": "^1.1.0",
+    "css-loader": "^0.23.0",
+    "eslint": "^2.10.2",
+    "eslint-friendly-formatter": "^2.0.5",
+    "eslint-loader": "^1.3.0",
+    "eslint-plugin-html": "^1.3.0",
+    "eslint-config-standard": "^5.1.0",
+    "eslint-plugin-promise": "^1.0.8",
+    "eslint-plugin-standard": "^1.3.2",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.13.3",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.4",
+    "function-bind": "^1.0.2",
+    "html-webpack-plugin": "^2.8.1",
+    "http-proxy-middleware": "^0.12.0",
+    "json-loader": "^0.5.4",
+    "ora": "^0.2.0",
+    "shelljs": "^0.6.0",
+    "url-loader": "^0.5.7",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^8.3.0",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.12.2",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-hot-middleware": "^2.6.0",
+    "webpack-merge": "^0.8.3",
+    "sass-loader": "^4.0.0",
+    "node-sass": "^3.8.0",
+    "autoprefixer": "^6.3.7",
+    "postcss-loader": "^0.9.1"
   }
-}
+}

README.md

 ## web-style
 基于vue的一套简单精美的web组件。
+<a href="http://cycgit.coding.me/ws-document/">
+参考文档
+</a>
 
@@ -16,2 +19,3 @@ ## 开始
 
+
 ```
@@ -18,0 +22,0 @@ new Vue({

src/js/message.js

@@ -18,3 +18,2 @@ (function (Vue, window) {
 
-
   var element = document.createElement('div');
@@ -55,2 +54,2 @@ element.id = 'V-message'
 
-})(Vue, window)
+})(Vue, window)

src/js/modal.js

@@ -16,6 +16,6 @@ (function (Vue, components) {
             <div class="modal-body">
-            
+
                 <slot></slot>
-                
-                
+
+
             </div>
@@ -50,4 +50,1 @@ <div class="modal-footer">
 }())
-
-
-

src/js/tags.js

@@ -8,3 +8,3 @@ /**
 
-(function (Vue, window) {
+(function (Vue, components) {
   var template = `
@@ -11,0 +11,0 @@ <div class="input tags-wrap" @paste="pasteText($event)">

src/js/timePicker.js

@@ -85,3 +85,2 @@
 
-
       this.$els.tp.addEventListener('click', function (e) {
@@ -91,4 +90,3 @@ e.stopPropagation()
       })
-
-
+      
       document.body.addEventListener('click', function () {
@@ -95,0 +93,0 @@ this.show = false

dist/css/web-style.css

-@charset "UTF-8";.clear:after,.row:after{content:" ";display:block;clear:both}.btn,.text-center{text-align:center}.btn,a{cursor:pointer}.btn,.form textarea{border:1px solid #d9d9d9}.dp-table,.table{border-collapse:collapse}.fade-enter,.fade-leave,.modal-enter,.modal-leave,.slide-enter,.slide-leave{opacity:0}.btn,.menu-line .menu-name,.table-responsive thead tr{white-space:nowrap}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-7,.col-8,.col-9{padding-right:8px;min-height:1px;position:relative}body,html{width:100%;height:100%;position:relative;color:#666}ol,ul{list-style:none}body{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size:14px}.iconfont,.loading{font-family:iconfont!important;-moz-osx-font-smoothing:grayscale;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px}h1,h2,h3,h4,h5{font-weight:500;line-height:1.1}h1{font-size:20px}h2{font-size:18px}p{margin:8px 0}a{color:#2db7f5;text-decoration:none;transition:color .3s ease}a:hover{color:#4DC4F0}.row{position:relative;width:100%;height:auto;display:block}.btn,.loading{display:inline-block;font-size:14px}.row .center{float:none;margin:0 auto}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-offset-1,.col-offset-10,.col-offset-11,.col-offset-12,.col-offset-2,.col-offset-3,.col-offset-4,.col-offset-5,.col-offset-7,.col-offset-8,.col-offset-9{float:left;box-sizing:border-box}.col-1{width:8.33333%}.col-offset-1{margin-left:8.33333%}.col-2{width:16.66667%}.col-offset-2{margin-left:16.66667%}.col-3{width:25%}.col-offset-3{margin-left:25%}.col-4{width:33.33333%}.col-offset-4{margin-left:33.33333%}.col-5{width:41.66667%}.col-offset-5{margin-left:41.66667%}.col-6{padding-right:8px;width:50%;position:relative;min-height:1px}.col-offset-6{float:left;margin-left:50%;box-sizing:border-box}.col-7{width:58.33333%}.col-offset-7{margin-left:58.33333%}.col-8{width:66.66667%}.col-offset-8{margin-left:66.66667%}.col-9{width:75%}.col-offset-9{margin-left:75%}.col-10{width:83.33333%}.col-offset-10{margin-left:83.33333%}.col-11{width:91.66667%}.col-offset-11{margin-left:91.66667%}.col-12{width:100%}.col-offset-12{margin-left:100%}.loading{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.loading:after{content:"\e6a1"}@-webkit-keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media only screen and (max-width:640px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{float:left;width:100%;padding-right:0;box-sizing:border-box}}.box-920{width:920px;box-sizing:border-box;margin:0 auto}@media only screen and (max-width:640px){.box-920{width:100%;margin:0}}.fade-transition{transition:opacity .3s}.slide-transition{transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;-webkit-transform:translate(0,0);transform:translate(0,0)}.slide-enter{-webkit-transform:translate(0,5px);transform:translate(0,5px)}.slide-leave{-webkit-transform:translate(0,30px);transform:translate(0,30px)}.btn{margin-bottom:0;font-weight:500;line-height:1.5;padding:2px 14px;border-radius:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666;outline:0;background-color:#fff}.btn:hover{background:#f7f7f7}.btn:active{background:#efefef;transition:none}.btn:disabled{color:#ccc;cursor:no-drop}.btn-primary{color:#fff;background-color:#2db7f5;border-color:#2db7f5}.btn-primary:hover{color:#fff;background-color:#45bff6;border-color:#45bff6}.btn-primary:active{color:#fff;background-color:#15aff4;border-color:#15aff4;transition:none}.btn-primary:disabled{color:#fff;background-color:#8ed8fa;border-color:#8ed8fa;transition:none;cursor:no-drop}.btn-success{color:#fff;background-color:#5FBC29;border-color:#5FBC29}.btn-success:hover{color:#fff;background-color:#6ad12e;border-color:#6ad12e}.btn-success:active{color:#fff;background-color:#54a724;border-color:#54a724;transition:none}.btn-success:disabled{color:#fff;background-color:#96df6c;border-color:#96df6c;transition:none;cursor:no-drop}.btn-info{color:#fff;background-color:#01B3CA;border-color:#01B3CA}.btn-info:hover{color:#fff;background-color:#01c9e3;border-color:#01c9e3}.btn-info:active{color:#fff;background-color:#019db1;border-color:#019db1;transition:none}.btn-info:disabled{color:#fff;background-color:#33e7fe;border-color:#33e7fe;transition:none;cursor:no-drop}.btn-warning{color:#fff;background-color:#FAC450;border-color:#FAC450}.btn-warning:hover{color:#fff;background-color:#fbcc69;border-color:#fbcc69}.btn-warning:active{color:#fff;background-color:#f9bc37;border-color:#f9bc37;transition:none}.btn-warning:disabled{color:#fff;background-color:#fde5b3;border-color:#fde5b3;transition:none;cursor:no-drop}.btn-danger{color:#fff;background-color:#E01515;border-color:#E01515}.btn-danger:hover{color:#fff;background-color:#ea2424;border-color:#ea2424}.btn-danger:active{color:#fff;background-color:#c91313;border-color:#c91313;transition:none}.btn-danger:disabled{color:#fff;background-color:#f16a6a;border-color:#f16a6a;transition:none;cursor:no-drop}.btn-lg{padding:6px 18px}.btn-sm{padding:0 10px}.btn-block{display:block;width:100%}@font-face{font-family:iconfont;src:url(../fonts/iconfont.eot?t=1458285388);src:url(../fonts/iconfont.eot?t=1458285388#iefix) format("embedded-opentype"),url(../fonts/iconfont.woff?t=1458285388) format("woff"),url(../fonts/iconfont.ttf?t=1458285388) format("truetype"),url(../fonts/iconfont.svg?t=1458285388#iconfont) format("svg")}.iconfont{font-size:14px}.icon-arrowleft:before{content:"\e620"}.icon-arrowright:before{content:"\e621"}.icon-arrowup:before{content:"\e622"}.icon-arrowdown:before{content:"\e623"}.icon-caretcircleleft:before{content:"\e604"}.icon-caretcircleright:before{content:"\e605"}.icon-caretcircleup:before{content:"\e606"}.icon-caretcircledown:before{content:"\e607"}.icon-forward:before{content:"\e608"}.icon-backward:before{content:"\e609"}.icon-caretcircleoleft:before{content:"\e60b"}.icon-caretcircleoright:before{content:"\e60d"}.icon-caretcircleodown:before{content:"\e60e"}.icon-caretright:before{content:"\e60a"}.icon-caretleft:before{content:"\e60f"}.icon-caretup:before{content:"\e610"}.icon-caretdown:before{content:"\e611"}.icon-fastforward:before{content:"\e612"}.icon-fastbackward:before{content:"\e613"}.icon-stepbackward:before{content:"\e614"}.icon-stepforward:before{content:"\e615"}.icon-circleodown:before{content:"\e617"}.icon-circleoup:before{content:"\e618"}.icon-circleoleft:before{content:"\e619"}.icon-circleoright:before{content:"\e616"}.icon-circleright:before{content:"\e61a"}.icon-circleup:before{content:"\e61c"}.icon-playcircle:before{content:"\e61e"}.icon-playcircleo:before{content:"\e61f"}.icon-circleleft:before{content:"\e61b"}.icon-right:before{content:"\e600"}.icon-left:before{content:"\e601"}.icon-up:before{content:"\e602"}.icon-down:before{content:"\e603"}.icon-reload:before{content:"\e626"}.icon-doubleleft:before{content:"\e624"}.icon-doubleright:before{content:"\e625"}.icon-retweet:before{content:"\e627"}.icon-shrink:before{content:"\e628"}.icon-arrowsalt:before{content:"\e629"}.icon-rollback:before{content:"\e62a"}.icon-verticleleft:before{content:"\e62b"}.icon-verticleright:before{content:"\e62c"}.icon-cross:before{content:"\e62d"}.icon-check:before{content:"\e62e"}.icon-checkcircle:before{content:"\e62f"}.icon-checkcircleo:before{content:"\e630"}.icon-crosscircle:before{content:"\e631"}.icon-crosscircleo:before{content:"\e632"}.icon-exclamation:before{content:"\e633"}.icon-exclamationcircle:before{content:"\e634"}.icon-exclamationcircleo:before{content:"\e635"}.icon-info:before{content:"\e636"}.icon-infocircle:before{content:"\e637"}.icon-infocircleo:before{content:"\e638"}.icon-minuscircle:before{content:"\e639"}.icon-minuscircleo:before{content:"\e63a"}.icon-minus:before{content:"\e63b"}.icon-pluscircleo:before{content:"\e63c"}.icon-pluscircle:before{content:"\e63d"}.icon-plus:before{content:"\e63e"}.icon-swapleft:before{content:"\e63f"}.icon-swapright:before{content:"\e640"}.icon-swap:before{content:"\e641"}.icon-clockcircle:before{content:"\e642"}.icon-clockcircleo:before{content:"\e643"}.icon-pausecircle:before{content:"\e644"}.icon-pausecircleo:before{content:"\e645"}.icon-pause:before{content:"\e646"}.icon-questioncircle:before{content:"\e647"}.icon-questioncircleo:before{content:"\e648"}.icon-question:before{content:"\e649"}.icon-areachart:before{content:"\e64c"}.icon-appstore:before{content:"\e64d"}.icon-apple:before{content:"\e64e"}.icon-android:before{content:"\e64f"}.icon-bars:before{content:"\e650"}.icon-barchart:before{content:"\e651"}.icon-calendar:before{content:"\e654"}.icon-book:before{content:"\e655"}.icon-chrome:before{content:"\e65c"}.icon-code:before{content:"\e65d"}.icon-creditcard:before{content:"\e65f"}.icon-customerservice:before{content:"\e65e"}.icon-copy:before{content:"\e660"}.icon-delete:before{content:"\e661"}.icon-ellipsis:before{content:"\e667"}.icon-edit:before{content:"\e668"}.icon-export:before{content:"\e669"}.icon-exception:before{content:"\e66a"}.icon-file:before{content:"\e66b"}.icon-filetext:before{content:"\e66c"}.icon-filter:before{content:"\e66f"}.icon-folder:before{content:"\e670"}.icon-frowncircle:before{content:"\e672"}.icon-frown:before{content:"\e673"}.icon-smilecircle:before{content:"\e676"}.icon-smile:before{content:"\e677"}.icon-mehcircle:before{content:"\e678"}.icon-meh:before{content:"\e679"}.icon-github:before{content:"\e674"}.icon-laptop:before{content:"\e67a"}.icon-inbox:before{content:"\e67b"}.icon-ie:before{content:"\e67c"}.icon-home:before{content:"\e67d"}.icon-linechart:before{content:"\e67f"}.icon-link:before{content:"\e67e"}.icon-logout:before{content:"\e681"}.icon-mail:before{content:"\e682"}.icon-menuunfold:before{content:"\e683"}.icon-menufold:before{content:"\e684"}.icon-mobile:before{content:"\e685"}.icon-notification:before{content:"\e686"}.icon-paperclip:before{content:"\e687"}.icon-phone:before{content:"\e688"}.icon-picture:before{content:"\e689"}.icon-piechart:before{content:"\e68a"}.icon-poweroff:before{content:"\e68b"}.icon-setting:before{content:"\e68d"}.icon-sharealt:before{content:"\e68e"}.icon-search:before{content:"\e690"}.icon-poweroff1:before{content:"\e691"}.icon-solution:before{content:"\e68f"}.icon-tablet:before{content:"\e695"}.icon-team:before{content:"\e680"}.icon-totop:before{content:"\e69a"}.icon-videocamera:before{content:"\e69b"}.icon-user:before{content:"\e69c"}.icon-save:before{content:"\e69e"}.icon-unlock:before{content:"\e69f"}.icon-shoppingcart:before{content:"\e692"}.icon-windows:before{content:"\e6a0"}.icon-aliwangwango:before{content:"\e64a"}.icon-aliwangwang:before{content:"\e64b"}.icon-camerao:before{content:"\e652"}.icon-camera:before{content:"\e653"}.icon-eyeo:before{content:"\e66d"}.icon-eye:before{content:"\e66e"}.icon-enviroment:before{content:"\e665"}.icon-enviromento:before{content:"\e666"}.icon-staro:before{content:"\e693"}.icon-star:before{content:"\e694"}.icon-tags:before{content:"\e656"}.icon-tagso:before{content:"\e657"}.icon-tag:before{content:"\e658"}.icon-tago:before{content:"\e659"}.icon-cloud:before{content:"\e65a"}.icon-clouddownload:before{content:"\e65b"}.icon-cloudupload:before{content:"\e696"}.icon-clouduploado:before{content:"\e697"}.icon-clouddownloado:before{content:"\e698"}.icon-cloudo:before{content:"\e699"}.icon-iconfontcaretcircleoup:before{content:"\e60c"}.icon-loading:before{content:"\e6a1"}.icon-dislike:before{content:"\e6a2"}.icon-like:before{content:"\e6a3"}.icon-message:before{content:"\e6a4"}.icon-download:before{content:"\e663"}.icon-upload:before{content:"\e664"}.icon-paycircle:before{content:"\e6a8"}.icon-paycircleo:before{content:"\e6a9"}.icon-exclefile:before{content:"\e6ac"}.icon-pdffile:before{content:"\e6ab"}.icon-pptfile:before{content:"\e6a7"}.icon-jpgfile:before{content:"\e6aa"}.icon-unknowfile:before{content:"\e6a6"}.icon-minussquareo:before{content:"\e6ad"}.icon-plussquareo:before{content:"\e6ae"}.icon-iconfontdesktop:before{content:"\e662"}.icon-hdd:before{content:"\e675"}.icon-folderopen:before{content:"\e671"}.icon-circledown:before{content:"\e61d"}.icon-qrcode:before{content:"\e6a5"}.icon-scan:before{content:"\e6af"}.icon-heart:before{content:"\e68c"}.icon-hearto:before{content:"\e6b0"}.icon-calculator:before{content:"\e6b1"}.icon-appstoreo:before{content:"\e6b2"}.icon-lock:before{content:"\e69d"}.table{width:100%;margin-bottom:24px;border-spacing:0;border:1px solid #ddd}.table tbody th,.table td{border-top:1px solid #ddd}.table thead th{border-bottom:2px solid #ddd}.table td,.table th{text-align:left;padding:8px;border-left:1px solid #ddd}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}.table-hover tbody tr:hover,.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9}.table-sm td,.table-sm th{padding:5px}.table-responsive{overflow:scroll}.table-responsive tbody td{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pagination{float:right}.pagination:after{content:' ';clear:both}.pagination .quick{float:left;width:100px;padding-left:8px;line-height:30px;height:30px;text-align:right}.pagination .quick input{width:40px;margin:0 5px}.pagination li{float:left;border-radius:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:28px;height:28px;border:1px solid #d9d9d9;background-color:#fff;text-align:center;line-height:28px;margin:0 5px;cursor:pointer;transition:all .3s ease}.label,.modal-confirm .confirm-btns,.modal-footer{text-align:right}.pagination li:hover{border-color:#2db7f5;color:#2db7f5}.pagination a{color:#666;padding:0 6px;display:inline-block}.pagination .next:before{content:"\E600"}.pagination .active{background-color:#2db7f5;color:#fff;cursor:default}.drop .drop-ul,.form textarea,.select{background-color:#fff}.pagination .active:hover{color:#fff}.pagination .jump{border:none}.pagination .jump:before{content:"\2022\2022\2022";letter-spacing:2px}.form .row{margin-bottom:24px}.search-8>div{padding:8px}.padding-08>div{padding-right:8px}.form textarea,.input{padding:4px 7px;cursor:text;font-size:14px;color:#666;width:100%;box-sizing:border-box}input,textarea{background:#fff;outline:0;-webkit-appearance:none}.form input[type=checkbox]{-webkit-appearance:checkbox}.form input[type=radio]{-webkit-appearance:radio}.form textarea{position:relative;display:inline-block;vertical-align:bottom;line-height:1.5;border-radius:6px;background-image:none;min-height:100px}.input{height:28px;line-height:1;border:1px solid #d9d9d9;border-radius:6px;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form .text,.label{padding-right:8px;height:28px}.checkbox,.form .text,.label,.radio,.select,.split,.tags .content,.tags-input .content{line-height:28px}.input:focus,.input:hover{border-color:#57c5f7}.input:focus{box-shadow:0 0 0 2px rgba(45,183,245,.2)}.require:before{display:inline-block;margin-right:4px;content:"*";font-family:SimSun;font-size:12px;color:#f60}.label{float:left;box-sizing:border-box}@media only screen and (max-width:640px){.label{text-align:left}}.form .input{width:100%}.split{margin-right:8px;height:28px;float:left}.select{border:1px solid #d9d9d9;border-radius:6px;margin:0;outline:0;height:28px;width:100%}.checkbox,.radio{font-size:14px;cursor:pointer;height:28px;margin-right:8px}.checkbox span,.radio span{margin:0 8px;display:inline-block}.checkbox input,.radio input{width:14px;height:14px}.drop{position:absolute;top:0;left:0}.drop .drop-ul{outline:0;position:relative;list-style-type:none;padding:0;margin:0;text-align:left;border-radius:6px;box-shadow:0 1px 6px rgba(99,99,99,.2);background-clip:padding-box;border:1px solid #d9d9d9}.dp-footer,.dp-header2,.dp-table,.tp-body ul li,.v-carousel-dots{text-align:center}.dp,.tp{box-shadow:0 0 4px rgba(0,0,0,.17)}.drop .drop-ul li{padding:7px 15px;transition:background .3s ease}.drop .drop-ul li:hover{background-color:#eaf8fe}.tags-wrap{width:100%;height:100%;outline:0}.tags-wrap::after{content:"";display:block;height:0;clear:both}.tags,.tags-input{position:relative;float:left;color:#fff;line-height:28px;margin:0 4px 4px 0;padding:0 22px 0 10px;border-radius:6px}.tags .del,.tags-input .del{width:22px;height:28px;text-align:center;cursor:pointer;position:absolute;top:-1px;right:0}.dp-out,.v-carousel-dots li,.v-drop{position:relative}.tags-input{font-size:14px;padding:0;background-color:inherit;border:none;color:inherit;width:10em}.tags-enter,.tags-leave{-webkit-transform:scale(.9);transform:scale(.9);opacity:0}.tags-transition{transition:all .3s ease}.v-auto{outline:0}.v-drop{border:1px solid #E4E6E7;margin-right:2px;border-radius:0 0 2px 2px;background-color:#fff}.v-drop li{padding:4px 7px;cursor:pointer}.v-drop .active{background-color:#eee}.v-carousel-wrap{width:100%;height:100%;overflow-x:hidden}.v-carousel-content{position:relative;transition:left .6s ease}.v-carousel-one{height:100%;float:left;background-repeat:no-repeat;background-position:center;background-size:cover}.v-carousel-dots{background-color:inherit;overflow:hidden}.menu,.tp-body ul{overflow-y:scroll}.v-carousel-dots li{display:inline-block;width:20px;height:18px;margin:auto 5px;cursor:pointer;font-size:16px;color:#999;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.v-carousel-dots li:hover{color:#666}.v-carousel-dots .active{color:#000!important}.dp,.dp-out i{position:absolute}.dp-out i{right:10px;top:50%;margin-top:-7px}.dp{width:231px;border:1px solid #d9d9d9;border-radius:6px;top:-2px;left:-2px;background:#fff;z-index:10}.dp .dp-text{height:100%;line-height:1.5;padding-left:4px}.dp .icon-crosscircle{cursor:pointer;color:#ccc;position:absolute;right:5px;top:10px;font-size:12px;transition:color .3s ease}.dp .icon-crosscircle:hover{color:#999}.dp .dp-body{padding:4px 8px}.dp-table{width:100%}.dp-table th{padding:6px 0;border:0}.dp-table td{padding:4px 0;border:0}.dp-table th span{display:block;font-weight:400}.dp-table td span{display:block;width:20px;height:20px;border:1px solid transparent;margin:0 auto;transition:background .3s ease;border-radius:4px;padding:0;box-sizing:border-box;font-size:12px;line-height:20px}.dp-footer a,.dp-header2 a{display:inline-block;line-height:34px}.dp-table td span:hover{background:#eaf8fe;cursor:pointer}.dp-table .dp-last span{color:#ccc}.dp-table .dp-today span{border-color:#2db7f5;font-weight:700;color:#2db7f5}.dp-table .dp-select span{background:#2db7f5;color:#fff;border:1px solid transparent}.dp-header1,.dp-header2{position:relative;border-bottom:1px solid #e9e9e9;height:34px;box-sizing:border-box}.dp-table .dp-select span:hover{background:#2db7f5}.dp-header1{padding:6px}.dp-header2{line-height:34px}.dp-header2 .dp-ym{font-weight:700}.dp-header2 a{color:#999;height:34px;font-size:16px;padding:0 5px;position:absolute;font-family:Arial,Hiragino Sans GB,Microsoft Yahei,Microsoft Sans Serif,sans-serif}.dp-footer a,.dp-footer span,.tp-out .input{font-size:12px}.dp-header2 a:hover{color:#2db7f5;cursor:pointer}.dp-header2 .dp-h-1{left:7px}.dp-header2 .dp-h-2{left:29px}.dp-header2 .dp-h-3{right:29px}.dp-header2 .dp-h-4{right:7px}.dp-footer{height:38px;border-top:1px solid #e9e9e9;position:relative}.dp-footer a{height:34px;cursor:pointer}.dp-footer span{position:absolute;right:16px;top:4px;padding:2px 4px;border:1px solid transparent}.dp-input-wrap,.tp-out{position:relative;width:96px}.dp-input-wrap{float:left;margin-right:5px}.dp-input-wrap .input{box-sizing:border-box;margin-right:5px;height:22px;font-size:12px;border-radius:4px}.tp-out{min-width:80px}.tp,.tp-out i,.tp-out:after{position:absolute}.tp-out i{right:10px;top:6px}.tp-out:after{content:"\e643";font-family:iconfont!important;font-size:14px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;top:50%;margin-top:-8px;right:8px}.tp{width:168px;height:178px;border-radius:6px;border:1px solid #ccc;line-height:1.5;background:#fff;top:-2px;left:-2px;z-index:102}.tp-header{padding:6px;position:relative;border-bottom:1px solid #e9e9e9}.tp-header input{margin:0;padding:0;border:0;width:100%;cursor:auto;line-height:1.5;outline:0;color:#666}.tp-header input::-moz-selection{background:#4BB8FF;color:#fff}.tp-header input::selection{background:#4BB8FF;color:#fff}.tp-header i{position:absolute;right:10px;top:6px;font-size:12px;color:#ccc;transition:color ease .3s;cursor:pointer}.tp-header i:hover{color:#999}.tp-body ul{float:left;height:144px;width:55px}.tp-body ul .tp-active{background:#f7f7f7;font-weight:700}.tp-body ul .tp-active:hover{background:#f7f7f7}.tp-body ul li{height:24px;line-height:24px;transition:background .3s ease;cursor:pointer}.tp-body ul li:hover{background:#eaf8fe}.tp-body ul:after{content:'';display:block;height:120px}.tp-body .tp-line{float:left;width:1px;height:144px;background:#e9e9e9}.message{position:fixed;left:50%;top:-45px;box-sizing:border-box;transition:top .5s ease;z-index:10001}.message .message-content{position:relative;right:50%;padding:5px 14px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;display:block;box-sizing:border-box;box-shadow:0 1px 8px rgba(99,99,99,.2)}.message .icon-checkcircle{color:#87d068;font-size:12px;-webkit-text-stroke-width:0}.message .icon-crosscircle{color:#f50;font-size:12px;-webkit-text-stroke-width:0}.message-move{top:24px}.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(55,55,55,.6);z-index:100;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.modal-box,.modal-confirm,.v-popover-box{background-color:#fff;box-sizing:border-box}.confirm-content{padding-left:30px;padding-top:30px;padding-bottom:30px}.modal-confirm{width:400px;padding:30px 40px;border-radius:6px;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.modal-confirm i{color:#fa0;font-size:24px;position:relative;top:2px}.modal-box{width:520px;border-radius:6px;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}@media only screen and (max-width:640px){.modal-box,.modal-confirm{width:100%;margin:0 20px}.modal-confirm{padding:10px 20px}}.modal-header{padding:13px 18px 14px 16px;border-bottom:1px solid #e9e9e9;position:relative}.modal-header i,.v-popover-wrap{position:absolute}.modal-header i{right:20px;top:15px;font-size:14px;cursor:pointer}.modal-header h3{font-size:14px}.modal-body{padding:16px}.modal-footer{padding:10px 18px 10px 10px;border-top:1px solid #e9e9e9;background:#fff;border-radius:0 0 6px 6px}.modal-transition{transition:all .3s ease}.modal-enter .modal-box,.modal-enter .modal-confirm,.modal-leave .modal-box,.modal-leave .modal-confirm{-webkit-transform:scale(1.1);transform:scale(1.1)}.v-popover-tag{display:inline-block}.v-popover-box{width:177px;background-clip:padding-box;border:1px solid #d9d9d9;border-radius:6px;box-shadow:0 1px 6px rgba(99,99,99,.2);position:relative}.v-popover-title{padding:0 16px;line-height:32px;height:32px;border-bottom:1px solid #e9e9e9;color:#666}.v-popover-content{padding:8px 16px;color:#666;word-break:break-all}.v-popover-arrow{position:absolute;width:0;height:0;border:5px solid transparent;margin-left:-5px}.v-popover-arrow:after{content:" ";margin-left:-4px;border:4px solid transparent;position:absolute;width:0;height:0}.main,.menu{height:100vh}.v-popover-arrow-top{border-bottom-width:0;border-top-color:#d9d9d9;bottom:-5px}.v-popover-arrow-top:after{border-top-color:#fff;bottom:-3px}.v-popover-arrow-bottom{border-top-width:0;border-bottom-color:#d9d9d9;top:-5px}.v-popover-arrow-bottom:after{border-bottom-color:#fff;top:-3px}.menu{width:220px;overflow-x:hidden;position:fixed;border-right:1px solid #ddd;box-sizing:border-box}.menu ul{background:#FAFAFA;transition:height .3s;overflow:hidden}.menu li{padding:7px 0 7px 46px}.menu li :hover{color:#61b98e}.menu a{color:#666}.header li a,.menu .active a{color:#61b98e}.menu .menu-top{text-align:center;padding:20px 0;color:#61b98e}.main{display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:220px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.main .content{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:scroll;padding:0 10px}.menu-line{height:20px;padding-top:14px;padding-bottom:6px;cursor:pointer}.menu-line .menu-name{width:130px;overflow:hidden;display:inline-block;text-overflow:ellipsis}.menu-line i{margin-left:10px;padding:3px 12px 0;font-size:12px;float:left;min-width:12px}.menu-line b{margin-right:20px;font-size:12px;font-weight:700;-webkit-transform:scale(.8);transform:scale(.8);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;float:right}.active-line b{font-size:12px;font-weight:700;-webkit-transform:scale(.8) rotate(90deg);transform:scale(.8) rotate(90deg)}.header{height:64px;box-sizing:border-box;padding:20px;background-color:#f5f5f5}.header .left-part{float:left}.header ul{float:right}.header li{display:inline-block;margin:0 5px}@media screen and (max-width:640px){.menu{display:none}.main{margin-left:0}}

dist/js/web-style.js

-"use strict";!function(e,t){var n='<div class="v-auto" tabindex="-1"\n                 @keydown="keyDown"\n                 @keydown.enter="enter"\n                 @keyup="keyUp"\n                 v-el:box>\n                <div class="v-input">\n                    <input type="text" class="input" :placeholder="placeholder" v-model="val" autocomplete="off"\n                           @focus="show=true">\n                </div>\n                <div class="v-drop" v-show="show">\n                    <ul>\n                        <li v-for="item in source"\n                            :class="{active: $index == select}"\n                            @click="click(item)"\n                            @mouseenter="select = $index"\n                            @mouseleave="select = -1"\n                        >{{item.title}}\n                        </li>\n                    </ul>\n                </div>\n            </div>',o=e.extend({template:n,props:{val:{coerce:function(e){return e}},max:{coerce:function(e){return e?parseInt(e):4}},placeholder:{coerce:function(e){return e?e:""}}},data:function(){return{show:!1,source:[],flag:null}},ready:function(){this.$els.box.addEventListener("click",function(e){e.stopPropagation()});var e=this;document.body.addEventListener("click",function(t){e.show=!1})},methods:{keyDown:function(e){var t=e.keyCode;if(38==t||40==t){var n=this.select,o=this.max;return 40==t&&(this.select=n==o-1?-1:n+1),38==t&&(this.select=n==-1?o-1:n-1),e.stopPropagation(),e.preventDefault(),!1}},keyUp:function(e){var t=e.keyCode;if(38!=t&&40!=t)return 8==t&&""==this.val?(this.select=-1,this.show=!1,void(this.source=[])):void this.search()},enter:function(){if(this.select!=-1){var e=this;this.source.forEach(function(t,n){n==e.select&&(e.val=t.title)}),e.show=!1,e.select=-1}},click:function(e){this.select=-1,this.show=!1,this.val=e.title},search:function(){}}});t.autoComplete=o}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(t,e){var i='\n  <div class="v-carousel-wrap">\n    <div class="v-carousel-content" :style="{width: source.length + \'00%\', height: contentHeight, left: -100 * activeIndex + \'%\'}" >\n      <div class="v-carousel-one" :style="{backgroundImage: \'url(\' + item + \')\', width: 100 / ( source.length ) + \'%\' }" v-for="item in source"></div>\n    </div>\n    <ul class="v-carousel-dots" :style="{height: ctrlHeight}">\n      <li v-for="item in source" @click="toTarget($index)" :class="$index == activeIndex ? \'active\' : \'\'">&bull;</li>\n    </ul>\n  </div>',n=t.extend({template:i,props:{source:{type:Array,"default":[]},contentHeight:{type:String,"default":"100%"},ctrlHeight:{type:String,"default":"0"},delayTime:{type:Number,"default":3e3}},data:function(){return"0%"!=this.ctrlHeight&&"0px"!=this.ctrlHeight&&"0em"!=this.ctrlHeight||(this.ctrlHeight=0),this.delayTime>0&&this.autoPlay(),{activeIndex:0,timer:""}},methods:{toTarget:function(t){this.activeIndex!=t&&(clearInterval(this.timer),this.activeIndex=t,this.move(this.activeIndex),this.autoPlay())},autoPlay:function(){this.timer=setInterval(function(){console.log(Date.now()),this.activeIndex++,this.move(this.activeIndex)}.bind(this),this.delayTime)},move:function(t){this.activeIndex>=this.source.length&&(this.activeIndex=0)}}});components.carousel=n}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(n,t){var o='<div class="modal-mask" v-show="show" transition="modal">\n          <div class="modal-confirm">\n            <h2 class="confirm-header">\n                <i class="iconfont icon-questioncircle"></i> {{ title }}\n            </h2>\n            <div class="confirm-content">\n                {{ content }}\n            </div>\n            <div class="confirm-btns">\n                <button class="btn" @click="op(1)">取 消</button>\n                <button class="btn btn-primary" @click="op(2)">确 定</button>\n            </div>\n        </div>\n    </div>',i=document.createElement("div");i.id="V-confirm",i.innerHTML=o,document.body.appendChild(i);var c=new n({el:"#V-confirm",data:{show:!1,onCancel:!1,onOk:!1,title:"",content:""},methods:{op:function(n){this.show=!1,"1"==n?this.onCancel&&this.onCancel():this.onOk&&this.onOk(),this.onCancel=!1,this.onOk=!1,document.body.style.overflow=""},alert:function(n){this.title=n.title||"提示信息",this.content=n.content||"确认操作",this.onOk=n.onOk||!1,this.onCancel=n.onCancel||!1,this.show=!0,document.body.style.overflow="hidden"}}});t.$confirm=c}(Vue,window);
-"use strict";!function(t,e){function n(t,e){t=parseInt(t),e=parseInt(e);var n,s,i=new Date(t,e-1,1),a=e-1,c=e+1;1==e?(n=""+(t-1)+"-12-",s=""+t+"-2-",a=12):12==e?(n=""+t+"-11-",s=""+(t+1)+"-1-",c=1):(n=""+t+"-"+(e-1)+"-",s=""+t+"-"+(e+1)+"-");var o=42,h=[],l=[],r=[],d=i.getDay()-1;d=d<0?d+7:d;var p,v,u=new Date(t,e-1,0).getDate(),m=new Date(t,e,0).getDate();for(p=0;p<d;p++)v=u-d+p+1,h[p]={month:a,day:v,data:n+v};for(p=0;p<m;p++)v=p+1,l[p]={month:e,day:v,data:""+t+"-"+ +e+"-"+v};var f=o-m-d;for(p=0;p<f;p++)v=p+1,r[p]={month:c,day:v,data:s+v};var w=h.concat(l,r),g=[];for(p=0;p<6;p++)g.push(w.splice(0,7));return g}var s=t.extend({props:["items","cur","sel","month"],data:function(){return{}},template:"<tr>\n                     <td v-for=\"item in items\" v-bind:class=\"{'dp-last': month!= item.month, 'dp-today': cur == item.data, 'dp-select': sel == item.data}\">\n                                <span @click=\"click(item)\">{{ item.day }}</span>\n                            </td>\n                        </tr>",methods:{click:function(t){this.$dispatch("click",t.data)}}}),i=' \n                    <div v-el:dp>\n                      <div class="dp-out">\n                      <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">\n                        <i class="iconfont icon-calendar"></i>\n                      </div>\n                    <div class="dp" v-show="show" v-el:dp2 transition="slide">\n                    <div class="dp-header1">\n                       <div class="dp-input-wrap" v-if="showtime">\n                            <input class="input" placeholder="请选择日期" :value="outd">\n                        </div>\n                        \n                          <div class="dp-input-wrap" v-if="showtime">\n                            <div class="input-wrap">\n                                <v-time :val="time" v-on:time-change="change" v-ref:time></v-time>\n                            </div>\n                          </div>\n                          \n                        <div class="dp-text" v-if="!showtime">{{out}}</div>  \n                        <i class="iconfont icon-crosscircle" @click="show=false"></i>\n                    </div>\n                    <div class="dp-header2"><a class="dp-h-1" @click="cy(-1)">«</a><a class="dp-h-2" @click="cm(-1)">‹</a>\n                        <span class="dp-ym">{{y}}年 {{m}}月</span>\n                        <a class="dp-h-3" @click="cm(1)">›</a><a class="dp-h-4" @click="cy(1)">»</a></div>\n                    <div class="dp-body">\n                        <table class="dp-table">\n                            <thead>\n                            <tr>\n                                <th><span>一</span></th>\n                                <th><span>二</span></th>\n                                <th><span>三</span></th>\n                                <th><span>四</span></th>\n                                <th><span>五</span></th>\n                                <th><span>六</span></th>\n                                <th><span>日</span></th>\n                            </tr>\n                            </thead>\n                            <tbody>\n                                  <tr is="v-line" v-for="cell in lineDate" :items="cell" :month="m" :cur="cur" :sel="sel"></tr>   \n                            </tbody>\n                        </table>\n\n                    </div>\n                    <div class="dp-footer"><a>今天</a>  <span class="btn btn-primary btn-sm" @click="show=false">确 定</span></div>\n                </div>\n                </div>\n',a=t.extend({template:i,props:{val:{coerce:function(t){return t}},"short":{coerce:function(t){return!!t}},showtime:{coerce:function(t){return!!t}}},data:function(){var t=new Date,e="";if(this.val){var s=this["short"]?1e3*this.val:this.val;t=new Date(parseInt(s));var i=t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();e=t.getHours()+":"+t.getMinutes()+":"+t.getSeconds()}var a=new Date,c=""+a.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate(),o=t.getFullYear(),h=t.getMonth()+1,l=n(o,h);return{cur:c,sel:i,y:o,m:h,lineDate:l,time:e,show:!1}},computed:{out:function(){if(!this.val)return"";var t=this["short"]?new Date(1e3*this.val):new Date(parseInt(this.val)),e=t.getFullYear()+"-"+("0"+(t.getMonth()+1)).slice(-2)+"-"+("0"+t.getDate()).slice(-2),n=("0"+t.getHours()).slice(-2)+":"+("0"+t.getMinutes()).slice(-2)+":"+("0"+t.getSeconds()).slice(-2);return this.showtime?e+" "+n:e},outd:function(){if(!this.val)return"";var t=this["short"]?new Date(1e3*this.val):new Date(parseInt(this.val)),e=t.getFullYear()+"-"+("0"+(t.getMonth()+1)).slice(-2)+"-"+("0"+t.getDate()).slice(-2);return e}},ready:function(){var t=this.$els.dp,e=this.$els.dp2,n=this.$refs.time;e.addEventListener("click",function(t){console.log(111),n&&(n.show=!1),t.stopPropagation()}),t.addEventListener("click",function(t){t.stopPropagation()}),document.body.addEventListener("click",function(){this.show=!1}.bind(this))},methods:{cm:function(t){t==-1?1==this.m?this.init(parseInt(this.y)-1,12):this.init(this.y,parseInt(this.m)-1):12==this.m?this.init(parseInt(this.y)+1,1):this.init(this.y,parseInt(this.m)+1)},cy:function(t){var e=t==-1?parseInt(this.y)-1:parseInt(this.y)+1;this.init(e,this.m)},init:function(t,e){this.lineDate=n(t,e),this.y=t,this.m=e},change:function(t){var e=t.split(":");if(this.sel){for(var n=this.sel.split("-"),s=0;s<e.length;s++)e[s]=parseInt(e[s]),n[s]=parseInt(n[s]);this.val=new Date(n[0],n[1]-1,n[2],e[0],e[1],e[2]).getTime(),this["short"]&&(this.val=this.val/1e3)}}},events:{click:function(t){this.sel=t;var e=t.split("-"),n=e[1],s=e[0];if(this.showtime){var i=this["short"]?new Date(1e3*this.val):new Date(parseInt(this.val));this.val=new Date(e[0],e[1]-1,e[2],i.getHours(),i.getMinutes(),i.getSeconds()).getTime()}else this.val=new Date(e[0],e[1]-1,e[2]).getTime();this["short"]&&(this.val=this.val/1e3),n!=this.m&&this.init(s,n)}},components:{"v-line":s,"v-time":e.timePicker}});e.datePicker=a}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(n,e){var o='<div class="list" v-for="item in source">\n        <div class="menu-line" @click="toggle(item)" :class="{\'active-line\': item.open}">\n          <i class="iconfont{{item.icon? \' icon-\' + item.icon: \'\' }}"></i> <span class="menu-name">{{ item.name }}</span><b class="iconfont">&#xe600;</b>\n        </div>\n\n        <ul :style="{ height: item.open? 34*item.routes.length + \'px\': \'0px\'}">\n            <li v-for="route in item.routes" :class="{active: route.url == curPath}"><a :href="route.url">{{ route.name }}</a></li>\n        </ul>\n\n    </div>',t=n.extend({props:{source:{coerce:function(e){var o=location.href.replace(location.origin,"");return e.forEach(function(e){e.routes.some(function(n){return n.url==o})?n.set(e,"open",!0):n.set(e,"open",!1)}),e}}},data:function(){return{curPath:location.href.replace(location.origin,"")}},template:o,methods:{toggle:function(n){return n.open?n.open=!1:(this.source.forEach(function(n){n.open=!1}),void(n.open=!0))}}});components.menu=t}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(n,o){var t='<div class="modal-mask" @click="show=false" v-show="show" transition="modal">\n        <div class="modal-box">\n            <div class="modal-header">\n                <h3>{{title}}</h3>\n                <i class="iconfont icon-cross" @click="show=false"></i>\n            </div>\n            <div class="modal-body">\n            \n                <slot></slot>\n                \n                \n            </div>\n            <div class="modal-footer">\n                <button class="btn">取 消</button>\n                <button class="btn btn-primary">确 定</button>\n            </div>\n        </div>\n    </div>',s=n.extend({template:t,props:{title:{"default":"标题"}},data:function(){return{show:!1}}});o.modal=s}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(i,n){var l='\n    <ul class="pagination">\n        <li v-show="cur!=1" @click="page(cur-1)">«</li>\n        <li v-for="item in tags" :class="{active: cur == item}" @click="page(item)">{{item}}</li>\n        <li class="jump" v-show="all>10"></li>\n        <li v-show="all>10" @click="page(all)"><a>{{all}}</a></li>\n        <li v-show="cur!=all" @click="page(cur+1)">»</li>\n        <div class="quick" v-if="quick" @keydown.enter="page(num)"> 跳至 <input class="input" v-model="num"> 页</div>\n    </ul>',t=i.extend({template:l,props:{cur:null,all:null,quick:{"default":!0}},data:function(){return{num:""}},computed:{tags:function(){var i=1,n=this.all,l=[];for(this.all>10&&(this.cur>5&&this.cur<this.all-4?(i=this.cur-5,n=this.cur+4):this.cur<=5?(i=1,n=10):(n=this.all,i=this.all-9));i<=n;)l.push(i),i++;return l}},methods:{page:function(i){isNaN(parseInt(i))||i!=this.cur&&(this.num="",this.$dispatch("page-change",i))}}});n.pagination=t}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(t,o){var e="\n  <div class=\"v-popover-tag\" @click.stop=\"pop($event)\">\n    <slot></slot>\n  </div>\n  <div class=\"v-popover-wrap\" :style=\"{left: x + 'px', top: y + 'px', visibility: show ? 'visible' : 'hidden'}\" v-el:pop>\n    <div class=\"v-popover-box\">\n      <div class=\"v-popover-title\">{{title}}</div>\n      <div class=\"v-popover-content\">{{content}}</div>\n      <div :class=\"['v-popover-arrow', placement == 'top' ? 'v-popover-arrow-top' : 'v-popover-arrow-bottom']\" :style=\"{left: arrowLeft + 'px'}\"></div>\n    </div>\n  </div>",p=t.extend({template:e,props:{title:{type:String,"default":"标题"},content:{type:String,"default":"内容"},placement:{type:String,"default":"top"}},data:function(){return{show:!1,arrowLeft:0,x:0,y:0}},methods:{pop:function(t){if(this.show)return void(this.show=!1);var o=t.target;this.arrowLeft=o.offsetWidth/2,this.x=o.offsetLeft,"top"==this.placement?this.y=o.offsetTop-this.$els.pop.offsetHeight-3:this.y=o.offsetTop+o.offsetHeight+3,this.show=!0}}});components.popover=p}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(t,e){var s='\n  <div class="input tags-wrap" @paste="pasteText($event)">\n    <div class="tags" transition="tags" :style="{backgroundColor: bgc[item.bgc_no]}" v-for="item in disSource">\n      <span class="content">{{item.text}}</span><span class="del" @click="delTag($index, false)">&times;</span>\n    </div>\n    <input class="tags-input" type="text" placeholder="标签，按 enter 创建" v-model="text" @keyup.enter="addTag(text)" @keydown.delete="delTag(source.length - 1, true)">\n  </div>',n=t.extend({template:s,props:{source:{type:Array,"default":[]}},data:function(){var t=[];return this.source.forEach(function(e){var s={text:e,bgc_no:Math.ceil(10*Math.random())-1};t.push(s)}),{text:"",bgc:["#e961b4","#ed664b","#7b6ac7","#56abd1","#f7af4c","#fe5467","#52c7bd","#a479b7","#cb81ce","#5eabc5"],disSource:t}},methods:{pasteText:function(t){t.preventDefault();var s=(t.clipboardData||e.clipboardData).getData("text");this.addTag(s)},addTag:function(t){if(""!=t.trim()){var e=this.source.length;this.source.$set(e,t),this.disSource.$set(e,{text:t,bgc_no:Math.ceil(10*Math.random())-1}),this.text=""}},delTag:function(t,e){e?t>=0&&""==this.text&&(this.source.splice(t,1),this.disSource.splice(t,1)):(this.source.splice(t,1),this.disSource.splice(t,1))}}});components.tags=n}(Vue,function(){return window.components=window.components?window.components:{},window.components}());
-"use strict";!function(s,i){var t='\n                    <div>\n\n                      <div class="tp-out">\n                            <input type="text" class="input" placeholder="请选择时间" @focus="show=true" :value="out">\n                      </div>\n\n                      <div class="tp" v-show="show" v-el:tp transition="slide">\n                        <div class="tp-header">\n                            <input placeholder="请选择时间" :value="out">\n                            <i class="iconfont icon-crosscircle" @click="show=false"></i>\n                        </div>\n                        <div class="tp-body">\n                            <ul v-el:h>\n                                <li v-for="n in h" :class="{\'tp-active\': n == sh}" @click="click(n, \'h\')">{{n}}</li>\n                            </ul>\n                            <div class="tp-line"></div>\n                            <ul v-el:m>\n                                <li v-for="n in m" :class="{\'tp-active\': n == sm}" @click="click(n, \'m\')">{{n}}</li>\n                            </ul>\n                            <div class="tp-line"></div>\n                            <ul v-el:s>\n                               <li v-for="n in s" :class="{\'tp-active\': n == ss}" @click="click(n, \'s\')">{{n}}</li>\n                            </ul>\n                        </div>\n                      </div>\n\n                    </div>\n\n                ',n=s.extend({template:t,props:{val:{coerce:function(s){if(!s)return"";if(s.indexOf(":")!=-1){var i=s.split(":");s=parseInt(i[0])+":"+parseInt(i[1])+":"+parseInt(i[2])}return s}}},data:function(){var s=this.val.split(":");return this.val||(s=[-1,-1,-1]),{sh:s[0],sm:s[1],ss:s[2],show:!1,op:!1}},ready:function(){this.$els.h.scrollTop=24*this.sh,this.$els.m.scrollTop=24*this.sm,this.$els.s.scrollTop=24*this.ss,this.$els.tp.addEventListener("click",function(s){return s.stopPropagation(),!1}),document.body.addEventListener("click",function(){this.show=!1}.bind(this))},computed:{h:function(){return 24},m:function(){return 60},s:function(){return 60},out:function(){if(!this.val)return"";var s=this.val.split(":");return("0"+s[0]).slice(-2)+":"+("0"+s[1]).slice(-2)+":"+("0"+s[2]).slice(-2)}},watch:{val:function(s){if(this.op)this.$dispatch("time-change",this.val);else if(s){var i=s.split(":");this.sh=parseInt(i[0]),this.sm=parseInt(i[1]),this.ss=parseInt(i[2]),this.$els.h.scrollTop=24*this.sh,this.$els.m.scrollTop=24*this.sm,this.$els.s.scrollTop=24*this.ss}else this.clear();this.op=!1}},methods:{click:function(s,i){this.op=!0,this["s"+i]=s,this.scroll(s,i),this.change()},scroll:function(s,i){function t(){var i=24*s-n.scrollTop;i>0?(n.scrollTop+=12,requestAnimationFrame(t)):i<-12?(n.scrollTop-=12,requestAnimationFrame(t)):n.scrollTop+=i}var n=this.$els[i];requestAnimationFrame(t)},change:function(){this.sh==-1&&(this.sh=0),this.sm==-1&&(this.sm=0),this.ss==-1&&(this.ss=0);var s=("0"+this.sh).slice(-2)+":"+("0"+this.sm).slice(-2)+":"+("0"+this.ss).slice(-2);this.val=s},clear:function(){this.sh=-1,this.sm=-1,this.ss=-1,this.op=!1,this.$els.h.scrollTop=0,this.$els.m.scrollTop=0,this.$els.s.scrollTop=0,this.val=""}}});i.timePicker=n}(Vue,function(){return window.components=window.components?window.components:{},window.components}());

gulpfile.js

-const gulp = require('gulp')
-const sass = require('gulp-sass')
-const clean = require('gulp-clean-css')
-const rename = require("gulp-rename");
-const autoprefixer = require('gulp-autoprefixer')
-const babel = require('gulp-babel')
-const concat = require('gulp-concat')
-const uglify = require('gulp-uglify')
-
-
-const SASS_PATH = ['src/sass/*.scss', 'src/sass/components/*.scss']
-const JS_PATH = ['src/js/*.js']
-
-var AUTOPREFIXER_BROWSERS = [
-  'ie >= 10',
-  'ff >= 30',
-  'chrome >= 34',
-  'safari >= 7',
-  'ios >= 7',
-  'android >= 4.4'
-]
-
-
-gulp.task('default', ['sass', 'js', 'watch'])
-
-
-gulp.task('sass', function () {
-  gulp.src('src/sass/index.scss')
-    .pipe(sass())
-    .pipe(autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
-    .pipe(clean())
-    .pipe(rename('web-style.css'))
-    .pipe(gulp.dest('dist/css'))
-})
-
-gulp.task('js', function () {
-  gulp.src(JS_PATH)
-    .pipe(babel({
-      presets: ['es2015']
-    }))
-    .pipe(uglify())
-    .pipe(concat('web-style.js'))
-    .pipe(gulp.dest('dist/js'))
-})
-
-gulp.task('watch', function () {
-  gulp.watch(SASS_PATH, ['sass'])
-  gulp.watch(JS_PATH, ['js'])
-})

src/sass/animate.scss

-.fade-transition {
-  transition: opacity .3s;
-}
-.fade-enter {
-  opacity: 0;
-}
-
-.fade-leave {
-  opacity: 0;
-}
-.slide-transition {
-  transition: transform .3s ease, opacity .3s ease;
-  transform: translate(0, 0);
-}
-.slide-enter{
-  transform: translate(0, 5px);
-  opacity: 0;
-}
-.slide-leave{
-  transform: translate(0, 30px);
-  opacity: 0;
-}

src/sass/base.scss

-$text-color: #666;
-$help-color: #999;
-$error-color: #f60;
-
-$primary-color: #2db7f5;
-
-$disable-color: #ccc;
-$font-size-base: 14px;
-$link-color: #2db7f5;
-$link-hover-color: #4DC4F0;
-$font-family:  "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-
-
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section {
-  margin: 0;
-  padding: 0;
-}
-html,body{
-  width: 100%;
-  height: 100%;
-  position: relative;
-  color: $text-color;
-}
-
-ul,ol{
-  list-style: none;
-}
-
-body{
-  font-family: $font-family;
-  font-size: $font-size-base;
-}
-
-h1,h2,h3,h4,h5{
-  font-weight: 500;
-  line-height: 1.1;
-}
-h1{
-  font-size: 20px;
-}
-h2{
-  font-size: 18px;
-}
-p{
-  margin: 8px 0;
-}
-
-a{
-  color: $link-color;
-  text-decoration: none;
-  transition: color .3s ease;
-  cursor: pointer;
-  &:hover{
-    color: $link-hover-color
-  }
-}
-
-.clear{
-  &:after{
-    content: " ";
-    display: block;
-    clear:both;
-  }
-}
-
-.row{
-    position: relative;
-    width: 100%;
-    height: auto;
-    display: block;
-    &:after{
-        content: " ";
-        display: block;
-        clear:both;
-    }
-
-    .center{
-      float: none;
-      margin: 0 auto;
-    }
-}
-$allwidth: 100%;
-
-@for $i from 1 through 12{
-    .col-#{$i} {
-        float: left;
-        padding-right: 8px;
-        width: #{$i * $allwidth/12};
-        box-sizing: border-box;
-        position: relative;
-        min-height: 1px;
-    }
-    .col-offset-#{$i}{
-        float: left;
-        margin-left: #{$i * $allwidth/12};
-        box-sizing: border-box;
-
-    }
-}
-
-
-.text-center{
-  text-align: center;
-}
-
-.loading{
-  font-family:"iconfont" !important;
-  font-size:14px;
-  font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0.2px;
-  -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  &:after{
-    content: "\e6a1";
-  }
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin{
-  from { transform: rotate(0deg);}
-  to { transform: rotate(360deg)}
-
-}
-
-
-
-@media only screen and (max-width: 640px) {
-
-  @for $i from 1 through 12{
-      .col-#{$i} {
-          float: left;
-          width: 100%;
-          padding-right: 0;
-          box-sizing: border-box;
-      }
-  }
-
-}
-
-.box-920{
-  width: 920px;
-  box-sizing: border-box;
-  margin: 0 auto;
-}
-
-
-@media only screen and (max-width: 640px) {
-  .box-920{
-    width: 100%;
-    margin: 0
-  }
-}

src/sass/button.scss

-.btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: 500;
-  text-align: center;
-  cursor: pointer;
-  border: 1px solid #d9d9d9;
-  white-space: nowrap;
-  line-height: 1.5;
-  padding: 2px 14px;
-  font-size: 14px;
-  border-radius: 6px;
-  -webkit-user-select: none;
-  user-select: none;
-  // -webkit-transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
-  // transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
-  color: #666;
-  outline: none;
-  background-color: #fff;
-  &:hover {
-    background: #f7f7f7;
-  }
-  &:active {
-    background: darken(#f7f7f7, 3%);
-    transition: none;
-  }
-  &:disabled{
-    color: #ccc;
-    cursor: no-drop;
-  }
-}
-
-@mixin color($color: #fff) {
-  color: #fff;
-  background-color: $color;
-  border-color: $color;
-}
-
-@mixin active($color: #fff) {
-  color: #fff;
-  background-color: $color;
-  border-color: $color;
-  transition: none;
-}
-$primary-color: #2db7f5;
-$success-color: #5FBC29;
-$info-color: #01B3CA;
-$warning-color: #FAC450;
-$danger-color: #E01515;
-
-
-@mixin btn($color: #fff) {
-  @include color($color);
-  &:hover {
-    @include color(lighten($color, 5%));
-  }
-  &:active {
-    @include active(darken($color, 5%));
-  }
-  &:disabled{
-    @include active(lighten($color, 20%));
-    cursor: no-drop;
-  }
-}
-
-.btn-primary {
-  @include btn($primary-color)
-}
-
-.btn-success {
-  @include btn($success-color)
-}
-
-.btn-info {
-  @include btn($info-color)
-}
-
-.btn-warning {
-  @include btn($warning-color)
-}
-
-.btn-danger {
-  @include btn($danger-color)
-}
-
-.btn-lg {
-  padding: 6px 18px;
-}
-
-.btn-sm {
-  padding: 0px 10px;
-}
-
-
-.btn-block {
-  display: block;
-  width: 100%;
-}

src/sass/components/autoComplete.scss

-.v-auto {
-  outline: none;
-}
-
-.v-drop {
-  border: 1px solid #E4E6E7;
-  margin-right: 2px;
-  border-radius: 0 0 2px 2px;
-  background-color: #fff;
-  position: relative;
-  ul {
-  }
-  li {
-    padding: 4px 7px;
-    cursor: pointer;
-  }
-  .active {
-    background-color: #eee;
-  }
-}

src/sass/components/carousel.scss

-//轮播组件样式
-.v-carousel-wrap{
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-.v-carousel-content{
-  position: relative;
-  transition: left .6s ease;
-}
-.v-carousel-one{
-  height: 100%;
-  float: left;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-}
-.v-carousel-dots{
-  background-color: inherit;
-  text-align: center;
-  overflow: hidden;
-  li{
-    display: inline-block;
-    width: 20px;
-    height: 18px;
-    margin: auto 5px;
-    cursor: pointer;
-    font-size: 16px;
-    color: #999;
-    position: relative;
-    top: 50%;
-    transform: translate3d(0, -50%, 0);
-    &:hover{
-      color: #666;
-    }
-  }
-  .active{
-    color: #000 !important;
-  }
-}

src/sass/components/datePicker.scss

-.dp-out{
-  position: relative;
-  i{
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    margin-top: -7px;
-  }
-}
-
-.dp{
-  width: 231px;
-  //height: 310px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
-  border:1px solid #d9d9d9;
-  border-radius: 6px;
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  background: #fff;
-  z-index:10;
-  .dp-text{
-    height: 100%;
-    line-height: 1.5;
-    padding-left: 4px;
-  }
-  .icon-crosscircle{
-    cursor: pointer;
-    color: #ccc;
-    position: absolute;
-    right: 5px;
-    top: 10px;
-    font-size: 12px;
-    transition: color .3s ease ;
-
-    &:hover{
-      color: #999;
-    }
-  }
-  .dp-body{
-    padding: 4px 8px;
-  }
-}
-.dp-table{
-  width: 100%;
-  text-align: center;
-  border-collapse: collapse;
-  th{
-    padding: 6px 0;
-    border: 0;
-  }
-  td{
-    padding: 4px 0;
-    border: 0;
-  }
-  th span{
-    display: block;
-    font-weight: normal;
-  }
-  td span{
-    display: block;
-    width: 20px;
-    height: 20px;
-    border: 1px solid transparent;
-    margin: 0 auto;
-    transition: background 0.3s ease;
-    border-radius: 4px;
-    padding: 0;
-    box-sizing: border-box;
-    font-size: 12px;
-    line-height: 20px;
-    &:hover{
-      background: #eaf8fe;
-      cursor: pointer;
-    }
-  }
-}
-.dp-table .dp-last span{
-  color: #ccc
-}
-.dp-table .dp-today span{
-  border-color: #2db7f5;
-  font-weight: bold;
-  color: #2db7f5;
-}
-.dp-table .dp-select span{
-  background: #2db7f5;
-  color: #fff;
-  border: 1px solid transparent;
-  &:hover{
-    background: #2db7f5;
-  }
-}
-.dp-header1{
-  position: relative;
-  padding: 6px;
-  height: 34px;
-  border-bottom: 1px solid #e9e9e9;
-  box-sizing: border-box;
-}
-
-.dp-header2{
-  position: relative;
-  text-align: center;
-  height: 34px;
-  border-bottom: 1px solid #e9e9e9;
-  box-sizing: border-box;
-  line-height: 34px;
-  .dp-ym{
-    font-weight: bold;
-  }
-  a{
-    color: #999;
-    line-height: 34px;
-    height: 34px;
-    font-size: 16px;
-    display: inline-block;
-    padding: 0 5px;
-    position: absolute;
-    font-family: Arial,Hiragino Sans GB,Microsoft Yahei,Microsoft Sans Serif,sans-serif;
-    &:hover{
-      color:#2db7f5;
-      cursor: pointer;
-    }
-  }
-  .dp-h-1{
-    left: 7px
-  }
-  .dp-h-2{
-    left: 29px;
-  }
-  .dp-h-3{
-    right: 29px;
-  }
-  .dp-h-4{
-    right: 7px;
-  }
-}
-.dp-footer{
-  height: 38px;
-  border-top: 1px solid #e9e9e9;
-  text-align: center;
-  position: relative;
-  a{
-    display: inline-block;
-    line-height: 34px;
-    height: 34px;
-    cursor: pointer;
-    font-size: 12px;
-  }
-  span{
-    position: absolute;
-    right: 16px;
-    top: 4px;
-    padding: 2px 4px;
-    font-size: 12px;
-    border: 1px solid transparent
-  }
-}
-
-.dp-input-wrap{
-  width: 96px;
-  float: left;
-  margin-right: 5px;
-  position: relative;
-  .input{
-    box-sizing: border-box;
-    margin-right: 5px;
-    height: 22px;
-    font-size: 12px;
-    border-radius: 4px;
-
-  }
-}
-
-
-.tp-out{
-  position: relative;
-  width: 96px;
-  min-width: 80px;
-  i{
-    position: absolute;
-    right: 10px;
-    top: 6px;
-  }
-  .input{
-    font-size: 12px;
-  }
-
-  &:after{
-    content: "\e643";
-    font-family: iconfont!important;
-    font-size: 14px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: .2px;
-    position: absolute;
-    top: 50%;
-    margin-top: -8px;
-    right: 8px;
-  }
-}
-
-.tp{
-  width: 168px;
-  height: 178px;
-  border-radius: 6px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
-  border: 1px solid #ccc;
-  line-height: 1.5;
-  background: #fff;
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  z-index: 102;
-}
-.tp-header{
-  padding: 6px;
-  position: relative;
-  border-bottom: 1px solid #e9e9e9;
-  input{
-    margin: 0;
-    padding: 0;
-    border: 0;
-    width: 100%;
-    cursor: auto;
-    line-height: 1.5;
-    outline: 0;
-    color: #666;
-    &::selection {
-      background: #4BB8FF;
-      color: #fff;
-    }
-  }
-  i{
-    position: absolute;
-    right: 10px;
-    top: 6px;
-    font-size: 12px;
-    color: #ccc;
-    transition: color ease .3s;
-    cursor: pointer;
-    &:hover{
-      color: #999;
-    }
-  }
-}
-.tp-body{
-  ul{
-    float: left;
-    height: 144px;
-    width: 55px;
-    overflow-y: scroll;
-
-    .tp-active{
-      background: #f7f7f7;
-      font-weight: 700;
-
-      &:hover{
-        background: #f7f7f7;
-      }
-    }
-    li{
-      height: 24px;
-      line-height: 24px;
-      text-align: center;
-      transition: background 0.3s ease;
-      cursor: pointer;
-      &:hover{
-        background: #eaf8fe;
-      }
-    }
-    &:after{
-      content: '';
-      display: block;
-      height:120px;
-
-    }
-  }
-  .tp-line{
-    float: left;
-    width: 1px;
-    height: 144px;
-    background: #e9e9e9
-  }
-}

src/sass/components/menu.scss

-.menu{
-  width: 220px;
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  position: fixed;
-  border-right: 1px solid #ddd;
-  box-sizing: border-box;
-
-  ul{
-    background: #FAFAFA;
-    transition: height .3s;
-    overflow: hidden;
-  }
-  li{
-    padding: 7px 0 7px 46px;
-    :hover{
-      color: #61b98e;
-    }
-  }
-  a{
-    color: #666;
-  }
-
-  .menu-top{
-    text-align: center;
-    padding: 20px 0;
-    color: #61b98e;
-  }
-  .active a{
-    color: #61b98e;
-  }
-}
-
-.main{
-  display: flex;
-  margin-left: 220px;
-  height: 100vh;
-  flex-direction: column;
-  .content{
-    flex-grow: 1;
-    overflow: scroll;
-    padding: 0 10px;
-  }
-}
-
-.menu-line{
-  height: 20px;
-  padding-top: 14px;
-  padding-bottom: 6px;
-  cursor: pointer;
-
-
-  .menu-name{
-    width: 130px;
-    white-space: nowrap;
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis;
-  }
-
-   i{
-    margin-left: 10px;
-    padding: 3px 12px 0;
-    font-size: 12px;
-    float: left;
-    min-width: 12px;
-  }
-
-
-  b{
-    margin-right: 20px;
-    font-size: 12px;
-    font-weight: bold;
-    transform: scale(0.8);
-    transition: transform .3s;
-    float: right;
-  }
-}
-
-.active-line{
-  b{
-    font-size: 12px;
-    font-weight: bold;
-    transform: scale(0.8) rotate(90deg);
-  }
-}
-
-
-
-.header{
-  height: 64px;
-  box-sizing: border-box;
-  padding: 20px;
-  background-color: #f5f5f5;
-
-  .left-part{
-    float: left;
-  }
-  ul{
-    float: right;
-  }
-  li{
-    display: inline-block;
-    margin: 0 5px;
-    a{
-      color:#61b98e;
-    }
-  }
-}
-
-@media screen and (max-width: 640px){
-  .menu{
-    display: none;
-  }
-  .main{
-    margin-left: 0;
-  }
-}

src/sass/components/message.scss

-/*提示框*/
-.message {
-  position: fixed;
-  left: 50%;
-  top: -45px;
-  box-sizing: border-box;
-  transition: top .5s ease;
-  z-index: 10001;
-  .message-content{
-    position: relative;
-    right: 50%;
-    padding: 5px 14px;
-    border-radius: 6px;
-    border: 1px solid #d9d9d9;
-    background: #fff;
-    display: block;
-    box-sizing: border-box;
-    box-shadow: 0 1px 8px hsla(0,0%,39%,.2);
-  }
-
-
-  .icon-checkcircle{
-    color: #87d068;
-    font-size: 12px;
-    -webkit-text-stroke-width: 0;
-
-  }
-  .icon-crosscircle{
-    color: #f50;
-    font-size: 12px;
-    -webkit-text-stroke-width: 0;
-  }
-}
-.message-move{
-  top: 24px;
-}
-
-
-//弹出框样式
-.modal-mask{
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(55,55,55,.6);
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-}
-
-.confirm-content{
-  padding-left: 30px;
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-
-
-
-.modal-confirm{
-  width: 400px;
-  box-sizing: border-box;
-  padding: 30px 40px;
-  background-color: #fff;
-  border-radius: 6px;
-  transition: transform .3s ease;
-  i{
-    color: #fa0;
-    font-size: 24px;
-    position: relative;
-    top: 2px;
-  }
-
-  .confirm-btns{
-    text-align: right;
-  }
-}
-
-.modal-box{
-  width: 520px;
-  box-sizing: border-box;
-  background-color: #fff;
-  border-radius: 6px;
-  transition: transform .3s ease;
-}
-
-
-@media only screen and (max-width: 640px) {
-
-  .modal-confirm{
-    width: 100%;
-    margin: 0 20px;
-    padding: 10px 20px;
-
-  }
-  .modal-box{
-    width: 100%;
-    margin: 0 20px;
-  }
-
-}
-
-.modal-header{
-  padding: 13px 18px 14px 16px;
-  border-bottom: 1px solid #e9e9e9;
-  position: relative;
-  i{
-    position: absolute;
-    right: 20px;
-    top: 15px;
-    font-size: 14px;
-    cursor: pointer;
-  }
-  h3{
-    font-size: 14px;
-  }
-}
-
-.modal-body{
-  padding: 16px;
-}
-
-.modal-footer{
-  padding: 10px 18px 10px 10px;
-  border-top: 1px solid #e9e9e9;
-  background: #fff;
-  border-radius: 0 0 6px 6px;
-  text-align: right;
-}
-
-.modal-enter, .modal-leave {
-  opacity: 0;
-}
-.modal-transition{
-  transition: all .3s ease;
-}
-
-.modal-enter .modal-confirm,
-.modal-leave .modal-confirm {
-  transform: scale(1.1);
-}
-.modal-enter .modal-box,
-.modal-leave .modal-box {
-  transform: scale(1.1);
-}
-
-//popover
-.v-popover-tag{
-  display: inline-block;
-}
-.v-popover-wrap{
-  position: absolute;
-}
-.v-popover-box{
-  box-sizing: border-box;
-  width: 177px;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  box-shadow: 0 1px 6px hsla(0,0%,39%,.2);
-  position: relative;
-}
-.v-popover-title{
-  padding: 0 16px;
-  line-height: 32px;
-  height: 32px;
-  border-bottom: 1px solid #e9e9e9;
-  color: #666;
-}
-.v-popover-content{
-  padding: 8px 16px;
-  color: #666;
-  word-break: break-all;
-}
-.v-popover-arrow{
-  position: absolute;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  // left: 50%;
-  margin-left: -5px;
-  &:after{
-    content: " ";
-    margin-left: -4px;
-    border: 4px solid transparent;
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-}
-.v-popover-arrow-top{
-  border-bottom-width: 0;
-  border-top-color: #d9d9d9;
-  bottom: -5px;
-  &:after{
-    border-top-color: #fff;
-    bottom: -3px;
-  }
-}
-.v-popover-arrow-bottom{
-  border-top-width: 0;
-  border-bottom-color: #d9d9d9;
-  top: -5px;
-  &:after{
-    border-bottom-color: #fff;
-    top: -3px;
-  }
-}

src/sass/fonts.scss

-
-@font-face {font-family: "iconfont";
-  src: url('../fonts/iconfont.eot?t=1458285388'); /* IE9*/
-  src: url('../fonts/iconfont.eot?t=1458285388#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/iconfont.woff?t=1458285388') format('woff'), /* chrome, firefox */
-  url('../fonts/iconfont.ttf?t=1458285388') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('../fonts/iconfont.svg?t=1458285388#iconfont') format('svg'); /* iOS 4.1- */
-}
-.iconfont {
-  font-family:"iconfont" !important;
-  font-size:14px;
-  font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0.2px;
-  -moz-osx-font-smoothing: grayscale;
-}
-.icon-arrowleft:before { content: "\e620"; }
-.icon-arrowright:before { content: "\e621"; }
-.icon-arrowup:before { content: "\e622"; }
-.icon-arrowdown:before { content: "\e623"; }
-.icon-caretcircleleft:before { content: "\e604"; }
-.icon-caretcircleright:before { content: "\e605"; }
-.icon-caretcircleup:before { content: "\e606"; }
-.icon-caretcircledown:before { content: "\e607"; }
-.icon-forward:before { content: "\e608"; }
-.icon-backward:before { content: "\e609"; }
-.icon-caretcircleoleft:before { content: "\e60b"; }
-.icon-caretcircleoright:before { content: "\e60d"; }
-.icon-caretcircleodown:before { content: "\e60e"; }
-.icon-caretright:before { content: "\e60a"; }
-.icon-caretleft:before { content: "\e60f"; }
-.icon-caretup:before { content: "\e610"; }
-.icon-caretdown:before { content: "\e611"; }
-.icon-fastforward:before { content: "\e612"; }
-.icon-fastbackward:before { content: "\e613"; }
-.icon-stepbackward:before { content: "\e614"; }
-.icon-stepforward:before { content: "\e615"; }
-.icon-circleodown:before { content: "\e617"; }
-.icon-circleoup:before { content: "\e618"; }
-.icon-circleoleft:before { content: "\e619"; }
-.icon-circleoright:before { content: "\e616"; }
-.icon-circleright:before { content: "\e61a"; }
-.icon-circleup:before { content: "\e61c"; }
-.icon-playcircle:before { content: "\e61e"; }
-.icon-playcircleo:before { content: "\e61f"; }
-.icon-circleleft:before { content: "\e61b"; }
-.icon-right:before { content: "\e600"; }
-.icon-left:before { content: "\e601"; }
-.icon-up:before { content: "\e602"; }
-.icon-down:before { content: "\e603"; }
-.icon-reload:before { content: "\e626"; }
-.icon-doubleleft:before { content: "\e624"; }
-.icon-doubleright:before { content: "\e625"; }
-.icon-retweet:before { content: "\e627"; }
-.icon-shrink:before { content: "\e628"; }
-.icon-arrowsalt:before { content: "\e629"; }
-.icon-rollback:before { content: "\e62a"; }
-.icon-verticleleft:before { content: "\e62b"; }
-.icon-verticleright:before { content: "\e62c"; }
-.icon-cross:before { content: "\e62d"; }
-.icon-check:before { content: "\e62e"; }
-.icon-checkcircle:before { content: "\e62f"; }
-.icon-checkcircleo:before { content: "\e630"; }
-.icon-crosscircle:before { content: "\e631"; }
-.icon-crosscircleo:before { content: "\e632"; }
-.icon-exclamation:before { content: "\e633"; }
-.icon-exclamationcircle:before { content: "\e634"; }
-.icon-exclamationcircleo:before { content: "\e635"; }
-.icon-info:before { content: "\e636"; }
-.icon-infocircle:before { content: "\e637"; }
-.icon-infocircleo:before { content: "\e638"; }
-.icon-minuscircle:before { content: "\e639"; }
-.icon-minuscircleo:before { content: "\e63a"; }
-.icon-minus:before { content: "\e63b"; }
-.icon-pluscircleo:before { content: "\e63c"; }
-.icon-pluscircle:before { content: "\e63d"; }
-.icon-plus:before { content: "\e63e"; }
-.icon-swapleft:before { content: "\e63f"; }
-.icon-swapright:before { content: "\e640"; }
-.icon-swap:before { content: "\e641"; }
-.icon-clockcircle:before { content: "\e642"; }
-.icon-clockcircleo:before { content: "\e643"; }
-.icon-pausecircle:before { content: "\e644"; }
-.icon-pausecircleo:before { content: "\e645"; }
-.icon-pause:before { content: "\e646"; }
-.icon-questioncircle:before { content: "\e647"; }
-.icon-questioncircleo:before { content: "\e648"; }
-.icon-question:before { content: "\e649"; }
-.icon-areachart:before { content: "\e64c"; }
-.icon-appstore:before { content: "\e64d"; }
-.icon-apple:before { content: "\e64e"; }
-.icon-android:before { content: "\e64f"; }
-.icon-bars:before { content: "\e650"; }
-.icon-barchart:before { content: "\e651"; }
-.icon-calendar:before { content: "\e654"; }
-.icon-book:before { content: "\e655"; }
-.icon-chrome:before { content: "\e65c"; }
-.icon-code:before { content: "\e65d"; }
-.icon-creditcard:before { content: "\e65f"; }
-.icon-customerservice:before { content: "\e65e"; }
-.icon-copy:before { content: "\e660"; }
-.icon-delete:before { content: "\e661"; }
-.icon-ellipsis:before { content: "\e667"; }
-.icon-edit:before { content: "\e668"; }
-.icon-export:before { content: "\e669"; }
-.icon-exception:before { content: "\e66a"; }
-.icon-file:before { content: "\e66b"; }
-.icon-filetext:before { content: "\e66c"; }
-.icon-filter:before { content: "\e66f"; }
-.icon-folder:before { content: "\e670"; }
-.icon-frowncircle:before { content: "\e672"; }
-.icon-frown:before { content: "\e673"; }
-.icon-smilecircle:before { content: "\e676"; }
-.icon-smile:before { content: "\e677"; }
-.icon-mehcircle:before { content: "\e678"; }
-.icon-meh:before { content: "\e679"; }
-.icon-github:before { content: "\e674"; }
-.icon-laptop:before { content: "\e67a"; }
-.icon-inbox:before { content: "\e67b"; }
-.icon-ie:before { content: "\e67c"; }
-.icon-home:before { content: "\e67d"; }
-.icon-linechart:before { content: "\e67f"; }
-.icon-link:before { content: "\e67e"; }
-.icon-logout:before { content: "\e681"; }
-.icon-mail:before { content: "\e682"; }
-.icon-menuunfold:before { content: "\e683"; }
-.icon-menufold:before { content: "\e684"; }
-.icon-mobile:before { content: "\e685"; }
-.icon-notification:before { content: "\e686"; }
-.icon-paperclip:before { content: "\e687"; }
-.icon-phone:before { content: "\e688"; }
-.icon-picture:before { content: "\e689"; }
-.icon-piechart:before { content: "\e68a"; }
-.icon-poweroff:before { content: "\e68b"; }
-.icon-setting:before { content: "\e68d"; }
-.icon-sharealt:before { content: "\e68e"; }
-.icon-search:before { content: "\e690"; }
-.icon-poweroff1:before { content: "\e691"; }
-.icon-solution:before { content: "\e68f"; }
-.icon-tablet:before { content: "\e695"; }
-.icon-team:before { content: "\e680"; }
-.icon-totop:before { content: "\e69a"; }
-.icon-videocamera:before { content: "\e69b"; }
-.icon-user:before { content: "\e69c"; }
-.icon-save:before { content: "\e69e"; }
-.icon-unlock:before { content: "\e69f"; }
-.icon-shoppingcart:before { content: "\e692"; }
-.icon-windows:before { content: "\e6a0"; }
-.icon-aliwangwango:before { content: "\e64a"; }
-.icon-aliwangwang:before { content: "\e64b"; }
-.icon-camerao:before { content: "\e652"; }
-.icon-camera:before { content: "\e653"; }
-.icon-eyeo:before { content: "\e66d"; }
-.icon-eye:before { content: "\e66e"; }
-.icon-enviroment:before { content: "\e665"; }
-.icon-enviromento:before { content: "\e666"; }
-.icon-staro:before { content: "\e693"; }
-.icon-star:before { content: "\e694"; }
-.icon-tags:before { content: "\e656"; }
-.icon-tagso:before { content: "\e657"; }
-.icon-tag:before { content: "\e658"; }
-.icon-tago:before { content: "\e659"; }
-.icon-cloud:before { content: "\e65a"; }
-.icon-clouddownload:before { content: "\e65b"; }
-.icon-cloudupload:before { content: "\e696"; }
-.icon-clouduploado:before { content: "\e697"; }
-.icon-clouddownloado:before { content: "\e698"; }
-.icon-cloudo:before { content: "\e699"; }
-.icon-iconfontcaretcircleoup:before { content: "\e60c"; }
-.icon-loading:before { content: "\e6a1"; }
-.icon-dislike:before { content: "\e6a2"; }
-.icon-like:before { content: "\e6a3"; }
-.icon-message:before { content: "\e6a4"; }
-.icon-download:before { content: "\e663"; }
-.icon-upload:before { content: "\e664"; }
-.icon-paycircle:before { content: "\e6a8"; }
-.icon-paycircleo:before { content: "\e6a9"; }
-.icon-exclefile:before { content: "\e6ac"; }
-.icon-pdffile:before { content: "\e6ab"; }
-.icon-pptfile:before { content: "\e6a7"; }
-.icon-jpgfile:before { content: "\e6aa"; }
-.icon-unknowfile:before { content: "\e6a6"; }
-.icon-minussquareo:before { content: "\e6ad"; }
-.icon-plussquareo:before { content: "\e6ae"; }
-.icon-iconfontdesktop:before { content: "\e662"; }
-.icon-hdd:before { content: "\e675"; }
-.icon-folderopen:before { content: "\e671"; }
-.icon-circledown:before { content: "\e61d"; }
-.icon-qrcode:before { content: "\e6a5"; }
-.icon-scan:before { content: "\e6af"; }
-.icon-heart:before { content: "\e68c"; }
-.icon-hearto:before { content: "\e6b0"; }
-.icon-calculator:before { content: "\e6b1"; }
-.icon-appstoreo:before { content: "\e6b2"; }
-.icon-lock:before { content: "\e69d"; }

src/sass/form.scss

-.form .row{
-  margin-bottom: 24px;
-}
-.search-8>div{
-  padding: 8px
-}
-.padding-08>div{
-     padding-right:8px
-}
-input,textarea{
-  background: #fff none;
-  outline: none;
-  -webkit-appearance:none; /*去除input默认样式*/
-}
-
-.form input[type=checkbox]{
-    -webkit-appearance:checkbox
-}
-
-.form input[type=radio]{
--webkit-appearance:radio
-}
-.form textarea{
-    position: relative;
-    display: inline-block;
-    vertical-align: bottom;
-    cursor: text;
-    font-size: 14px;
-    line-height: 1.5;
-    color: #666;
-    border: 1px solid #d9d9d9;
-    border-radius: 6px;
-    background-color: #fff;
-    background-image: none;
-    width: 100%;
-    min-height: 100px;
-    padding: 4px 7px;
-    box-sizing: border-box;
-}
-
-.input{
-  padding: 4px 7px;
-  width: 100%;
-  height: 28px;
-  cursor: text;
-  font-size: 14px;
-  line-height: 1;
-  color: #666;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  box-sizing: border-box;
-  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-
-  &:hover{
-      border-color: #57c5f7;
-    }
-  &:focus{
-    box-shadow: 0 0 0 2px rgba(45,183,245,.2);
-    border-color: #57c5f7;
-  }
-
-}
-
-.require:before{
-  display: inline-block;
-  margin-right: 4px;
-  content: "*";
-  font-family: SimSun;
-  font-size: 12px;
-  color: #f60;
-}
-
-.label{
-  text-align: right;
-  height: 28px;
-  line-height: 28px;
-  float: left;
-  box-sizing: border-box;
-  padding-right: 8px
-}
-
-@media only screen and (max-width: 640px) {
-  .label{
-    text-align: left;
-  }
-}
-
-.form .text{
-  height: 28px;
-  line-height: 28px;
-  padding-right: 8px;
-}
-
-.form .input{
-  width: 100%;
-}
-
-.split{
-  margin-right: 8px;
-  line-height: 28px;
-  height:28px;
-  float: left;
-}
-
-.select{
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  background-color: #fff;
-  margin: 0;
-  outline: 0;
-  height: 28px;
-  line-height: 28px;
-  width: 100%;
-}
-.radio,.checkbox{
-    font-size: 14px;
-    cursor: pointer;
-    height: 28px;
-    line-height: 28px;
-    margin-right: 8px;
-
-    span{
-        margin: 0 8px;
-        display: inline-block;
-    }
-    input{
-        width: 14px;
-        height: 14px
-    }
-}
-
-.drop{
-  position: absolute;
-  top: 0px;
-  left: 0;
-  .drop-ul{
-    outline: none;
-    position: relative;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    text-align: left;
-    background-color: #fff;
-    border-radius: 6px;
-    box-shadow: 0 1px 6px hsla(0,0%,39%,.2);
-    background-clip: padding-box;
-    border: 1px solid #d9d9d9;
-    li{
-      padding: 7px 15px;
-      transition: background .3s ease;
-      &:hover{
-        background-color: #eaf8fe;
-      }
-    }
-  }
-}
-
-//输入框tags
-.tags-wrap{
-  width: 100%;
-  height: 100%;
-  outline: none;
-  &::after{
-    content: "";
-    display: block;
-    height: 0;
-    clear: both;
-    }
-}
-
-.tags, .tags-input{
-  position: relative;
-  float: left;
-  color: #fff;
-  line-height: 28px;
-  margin: 0 4px 4px 0;
-  padding: 0 22px 0 10px;
-  border-radius: 6px;
-  .content{
-    line-height: 28px;
-  }
-  .del{
-    width: 22px;
-    height: 28px;
-    text-align: center;
-    cursor: pointer;
-    position: absolute;
-    top: -1px;
-    right: 0;
-  }
-}
-
-.tags-input{
-  font-size: 14px;
-  padding: 0;
-  background-color: inherit;
-  border: none;
-  color: inherit;
-  width: 10em;
-}
-.tags-enter, .tags-leave{
-  transform: scale(0.9);
-  opacity: 0;
-}
-.tags-transition{
-  transition: all .3s ease;
-}

src/sass/index.scss

-@import "base";
-@import "animate";
-@import "button";
-@import "fonts";
-@import "table";
-@import "form";
-
-@import "components/autoComplete";
-@import "components/carousel";
-@import "components/datePicker";
-@import "components/message";
-@import "components/menu";

src/sass/table.scss

-.table {
-  width: 100%;
-  margin-bottom: 24px;
-  border-spacing: 0;
-  border-collapse: collapse;
-  border: 1px solid #ddd;
-
-  tbody th, td {
-    border-top: 1px solid #ddd;
-  }
-
-  thead th {
-    border-bottom: 2px solid #ddd;
-  }
-  th, td {
-    text-align: left;
-    padding: 8px;
-    border-left: 1px solid #ddd;
-  }
-}
-
-caption {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: #777;
-  text-align: left;
-}
-
-.table-striped {
-  tbody tr:nth-of-type(odd) {
-    background-color: #f9f9f9;
-  }
-}
-
-.table-hover {
-  tbody tr:hover {
-    background-color: #f9f9f9;
-  }
-}
-
-.table-sm {
-  th, td {
-    padding: 5px;
-  }
-}
-
-.table-responsive {
-  thead tr {
-    white-space: nowrap;
-  }
-  thead th {
-    //min-width: 75px;
-  }
-  tbody td{
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  overflow: scroll;
-}
-
-.pagination {
-  float: right;
-  &:after {
-    content: ' ';
-    clear: both;
-  }
-  .quick{
-    float: left;
-    width: 100px;
-    padding-left: 8px;
-    line-height: 30px;
-    height: 30px;
-    text-align: right;
-    input{
-      width: 40px;
-      margin: 0 5px;
-    }
-  }
-
-  li {
-    float: left;
-    border-radius: 6px;
-    -webkit-user-select: none;
-    user-select: none;
-    min-width: 28px;
-    height: 28px;
-    border: 1px solid #d9d9d9;
-    background-color: #fff;
-    text-align: center;
-    line-height: 28px;
-    margin: 0 5px;
-    cursor: pointer;
-    transition: all .3s ease;
-    &:hover{
-      border-color: #2db7f5;
-      color: #2db7f5;
-    }
-  }
-  a {
-    color: #666;
-    padding: 0 6px;
-    display: inline-block;
-  }
-  .next {
-    &:before {
-      content: "\E600";
-    }
-  }
-  .active {
-
-    background-color: #2db7f5;
-    color: #fff;
-    cursor: default;
-
-    &:hover{
-      color: #fff;
-    }
-
-
-  }
-
-  .jump {
-      border: none;
-      &:before{
-        content: "\2022\2022\2022";
-        letter-spacing: 2px;
-      }
-  }
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

958526

1.42%

Number of package files

89

61.82%

Number of low quality alerts

1

-50%

Number of lines in readme file

27

17.39%

Number of low supply chain risk alerts

12

-81.82%

Number of medium supply chain risk alerts

2

-71.43%

Worsened metrics

Dependency count

2

100%

Dev dependency count

37

311.11%

Lines of code

1666

-83.54%

Dependency changes

• + Added

  babel-runtime@^6.0.0

• + Added

  babel-runtime@6.26.0
  (transitive)

• + Added

  core-js@2.6.12
  (transitive)

• + Added

  regenerator-runtime@0.11.1
  (transitive)

• Updated

  vue@^1.0.26