初次提交

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+VUE_APP_NODE_ENV=dev

.env.production

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_NODE_ENV=prod

.env.production.sit

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_NODE_ENV=prod:sit

.env.production.uat

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_NODE_ENV=prod:uat

.eslintignore

@@ -0,0 +1 @@
+/src/icons/iconfont.js

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+*.lock

Dockerfile

@@ -0,0 +1,7 @@
+FROM base/nginx1.14-alpine
+
+EXPOSE 80
+#设置时区
+#RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone
+
+COPY dist/   /usr/share/nginx/html

README.md

@@ -0,0 +1,21 @@
+# security-enterprise-admin
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3'
+services:
+  sys-graph-mana:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      image: sys-graph-mana:latest
+    container_name: sys-graph-mana
+    restart: always
+    ports:
+      - 9082:80
+#    volumes:
+#      - /Users/zhjh/Documents/front/wwwroot:/usr/share/nginx/html
+#      - /Users/zhjh/Documents/front/nginx:/etc/nginx
+#      - /Users/zhjh/Documents/front/logs:/var/log/nginx

gulpfile.js

@@ -0,0 +1,103 @@
+var gulp   = require('gulp')
+var $      = require('gulp-load-plugins')()
+var fs     = require('fs')
+var path   = require('path')
+var del    = require('del')
+var colors = require('colors')
+var child_process = require('child_process')
+
+var theme            = {}
+var themeList        = require('./src/element-ui/config.js').filter(item => !item.hasBuild)
+var styleFileDir     = './src/assets/scss'
+var styleFileDirTemp = `${styleFileDir}-temp`
+var themeFileDir     = './public/element-theme'
+var et               = require('element-theme')
+var etOptions        = require('./package.json')['element-theme']
+var themeFileName    = etOptions.config.replace(/.*\/(.+\.scss)/, '$1')
+
+/**
+ * 构建生成主题
+ */
+gulp.task('themes', () => {
+  if (themeList.length <= 0) { return del(styleFileDirTemp) }
+
+  // 删除临时文件，保证本次操作正常执行
+  del(styleFileDirTemp)
+
+  // 拷贝一份scss样式文件夹，作为构建的临时处理文件夹
+  child_process.spawnSync('cp', ['-r', styleFileDir, styleFileDirTemp])
+
+  // 拷贝element组件scss变量样式文件至临时处理文件夹中，并修改相应配置信息
+  child_process.spawnSync('cp', ['-r', etOptions.config, styleFileDirTemp])
+  etOptions.config = `${styleFileDirTemp}/${themeFileName}`
+
+  // 开始构建生成
+  fnCreate(themeList)
+
+  function fnCreate (themeList) {
+    if (themeList.length >= 1) {
+      // 保存当前构建生成的主题对象
+      theme = themeList[0]
+
+      console.log('\n')
+      console.log(colors.green('-------------------- 待构建，主题 -------------------------'))
+      console.log(themeList)
+      console.log('\n')
+      console.log(colors.green('-------------------- 构建中，主题 -------------------------'))
+      console.log(theme)
+      console.log('\n')
+
+      // 修改.scss临时文件中的$--color-primary主题变量值
+      var data = fs.readFileSync(etOptions.config, 'utf8')
+      var result = data.replace(/\$--color-primary:(.*) !default;/, `$--color-primary:${theme.color} !default;`)
+      fs.writeFileSync(path.resolve(etOptions.config), result)
+
+      // 修改aui.scss临时文件中引入element组件主题变量文件路径
+      var data = fs.readFileSync(`${styleFileDirTemp}/aui.scss`, 'utf8')
+      var result = data.replace(new RegExp(`(@import \")(.*\/)(${themeFileName}\";)`), '$1./$3')
+      fs.writeFileSync(path.resolve(`${styleFileDirTemp}/aui.scss`), result)
+
+      // 调用element-theme插件，生成element组件主题
+      etOptions.out = `${themeFileDir}/${theme.name}`
+      et.run(etOptions, () => {
+        // 生成后，构建同主题色aui.css项目主题
+        gulp.start(['styles'], () => {
+          // 递归下一步
+          themeList.splice(0, 1)
+          fnCreate(themeList)
+        })
+      })
+    } else {
+      // 删除临时文件
+      del(styleFileDirTemp)
+      console.log('\n')
+      console.log(colors.green('-------------------- 构建完毕，删除临时文件 -------------------------'))
+      console.log(styleFileDirTemp)
+      console.log('\n')
+      
+      // 删除主题不需要的部分文件
+      var files = [
+        `${themeFileDir}/**/*.css`,
+        `!${themeFileDir}/**/index.css`,
+        `!${themeFileDir}/**/aui.css`,
+        `!${themeFileDir}/**/fonts`
+      ]
+      del(files)
+      console.log(colors.green('-------------------- 构建完毕，删除主题独立组件文件 -------------------------'))
+      console.log(files)
+      console.log('\n')
+    }
+  }
+})
+
+gulp.task('styles', () => {
+  return gulp.src([`${styleFileDirTemp}/aui.scss`])
+    .pipe($.sass().on('error', $.sass.logError))
+    .pipe($.autoprefixer({
+      browsers: etOptions.browsers,
+      cascade: false
+    }))
+    .pipe($.cleanCss())
+    .pipe($.rename('aui.css'))
+    .pipe(gulp.dest(`${themeFileDir}/${theme.name}`))
+})

package.json

@@ -0,0 +1,90 @@
+{
+  "name": "front-manager",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build:sit": "vue-cli-service build --mode production.sit",
+    "build:uat": "vue-cli-service build --mode production.uat",
+    "build:prod": "vue-cli-service build --mode production",
+    "lint": "vue-cli-service lint",
+    "et": "node_modules/.bin/et",
+    "et:init": "node_modules/.bin/et -i",
+    "et:list": "gulp themes"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "babel-plugin-component": "^1.1.1",
+    "element-theme": "^2.0.1",
+    "element-theme-chalk": "^2.4.7",
+    "element-ui": "2.12.0",
+    "gulp-autoprefixer": "^6.0.0",
+    "gulp-clean-css": "^3.10.0",
+    "gulp-load-plugins": "^1.5.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.11",
+    "moment": "^2.24.0",
+    "node-sass": "^4.9.3",
+    "qs": "^6.5.2",
+    "quill": "^1.3.6",
+    "sass-loader": "^7.1.0",
+    "screenfull": "^3.3.3",
+    "svg-sprite-loader": "^4.1.1",
+    "vue": "^2.5.17",
+    "vue-i18n": "^8.1.0",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.3.0",
+    "@vue/cli-plugin-eslint": "^3.3.0",
+    "@vue/cli-service": "^3.3.0",
+    "@vue/eslint-config-standard": "^3.0.4",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/standard"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "engines": {
+    "node": ">= 8.11.1",
+    "npm": ">= 5.6.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
+  "element-theme": {
+    "config": "./src/element-ui/theme-variables.scss",
+    "out": "./src/element-ui/theme",
+    "minimize": true,
+    "browsers": [
+      "> 1%",
+      "last 2 versions",
+      "not ie <= 10"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="./libs/d3.v4.min.js"></script>
+  <script src="./libs/d3.layout.cloud.js"></script>
+  <script src="./libs/jquery-1.11.3.min.js"></script>
+  <script src="./libs/commonArrayList.js"></script>
+  <script src="./libs/commonMap.js"></script>
+  <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="base_aui" href="./element-theme/blue/aui.css">
+  <!-- 站点配置 -->
+  <script>
+    window.SITE_CONFIG = {};
+    window.SITE_CONFIG['version'] = 'v2.0.0';
+    window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
+    window.SITE_CONFIG['apiURL'] = '';                      // api请求地址
+    window.SITE_CONFIG['storeState'] = {};                  // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
+    window.SITE_CONFIG['contentTabDefault'] = {             // 内容标签页默认属性对象
+      'name': '',        // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
+      'params': {},      // 参数, 由 this.$route.params 自动赋值
+      'query': {},       // 查询参数, 由 this.$route.query 自动赋值
+      'menuId': '',      // 菜单id（用于选中侧边栏菜单，与this.$store.state.sidebarMenuActiveName进行匹配）
+      'title': '',       // 标题
+      'isTab': true,     // 是否通过tab展示内容?
+      'iframeURL': ''    // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配)
+    };
+    window.SITE_CONFIG['menuList'] = [];                     // 左侧菜单列表（后台返回，未做处理）
+    window.SITE_CONFIG['permissions'] = [];                  // 页面按钮操作权限（后台返回，未做处理）
+    window.SITE_CONFIG['dynamicRoutes'] = [];                // 动态路由列表
+    window.SITE_CONFIG['dynamicMenuRoutes'] = [];            // 动态(菜单)路由列表
+    window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false; // 动态(菜单)路由是否已经添加的状态标示（用于判断是否需要重新拉取数据并进行动态添加操作）
+    window.SITE_CONFIG['isNavbar'] = true;// 是否展示navbar内容?
+    window.SITE_CONFIG['isSidebar'] = true;// 是否展示sidebar内容?
+  </script>
+
+  <!-- 开发环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:31403';</script>
+  <% } %>
+  <!-- 集成测试环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://59.212.147.49:9081';</script>
+  <% } %>
+  <!-- 验收测试环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://59.212.147.49:9081';</script>
+  <% } %>
+  <!-- 生产环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://59.212.147.49:9081';</script>
+  <% } %>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

public/libs/commonArrayList.js

@@ -0,0 +1,149 @@
+/**
+ * js模拟列表集合
+ * @param win
+ */
+(function(win) {
+	var ArrayList = function() {
+		this.datas = [];
+	};
+
+	var proto = ArrayList.prototype;
+
+	proto.size = function() {
+		return this.datas.length;
+	};
+
+	proto.isEmpty = function() {
+		return this.size() === 0;
+	};
+
+	proto.contains = function(value) {
+		return this.datas.indexOf(value) !== -1;
+	};
+
+	proto.indexOf = function(value) {
+		for ( var index in this.datas) {
+			if (this.datas[index] === value) {
+				return index;
+			}
+		}
+
+		return -1;
+	};
+
+	proto.lastIndexOf = function(value) {
+		for (var index = this.size(); index >= 0; index--) {
+			if (this.datas[index] === value) {
+				return index;
+			}
+		}
+	};
+
+	proto.toArray = function() {
+		return this.datas;
+	};
+
+	proto.outOfBound = function(index) {
+		return index < 0 || index > (this.size() - 1);
+	};
+
+	proto.get = function(index) {
+		if (this.outOfBound(index)) {
+			return null;
+		}
+
+		return this.datas[index];
+	};
+
+	proto.set = function(index, value) {
+		this.datas[index] = value;
+	};
+
+	proto.add = function(value) {
+		this.datas.push(value);
+	};
+
+	proto.insert = function(index, value) {
+		if (this.outOfBound(index)) {
+			return;
+		}
+
+		this.datas.splice(index, 0, value);
+	};
+
+	proto.remove = function(index) {
+		if (this.outOfBound(index)) {
+			return false;
+		}
+
+		this.datas.splice(index, 1);
+		return true;
+	};
+
+	proto.removeValue = function(value) {
+		if (this.contains(value)) {
+			this.remove(this.indexOf(value));
+			return true;
+		}
+		return false;
+	};
+
+	proto.clear = function() {
+		this.datas.splice(0, this.size());
+	};
+
+	proto.addAll = function(list) {
+		if (!list instanceof ArrayList) {
+			return false;
+		}
+
+		for ( var index in list.datas) {
+			this.add(list.get(index));
+		}
+
+		return true;
+	};
+
+	proto.insertAll = function(index, list) {
+		if (this.outOfBound(index)) {
+			return false;
+		}
+
+		if (!list instanceof ArrayList) {
+			return false;
+		}
+
+		var pos = index;
+		for ( var index in list.datas) {
+			this.insert(pos++, list.get(index));
+		}
+		return true;
+	};
+
+	function numberorder(a, b) {
+		return a - b;
+	}
+
+	proto.sort = function(isNumber) {
+		if (isNumber) {
+			this.datas.sort(numberorder);
+			return;
+		}
+
+		this.datas.sort();
+	};
+
+	proto.toStringJoin = function() {
+		return this.datas.join();
+	};
+
+	proto.toString = function() {
+		return "[" + this.datas.join() + "]";
+	};
+
+	proto.valueOf = function() {
+		return this.toString();
+	};
+
+	win.ArrayList = ArrayList;
+})(window);

public/libs/commonMap.js

@@ -0,0 +1,109 @@
+/*
+ * 
+ * JavaScript - CommonUtils
+ */
+
+// js模拟java中map，提供Map的add get remove cut方法----start
+(function(win) {
+	var FastMap = function(){
+		this.version = '1.0'; // 版本标识
+		this.buf = new Object(); // 缓存Key和Value的对象
+	};
+	
+	FastMap.prototype = {
+		put:function(sKey, oValue){
+			this.buf[sKey] = oValue;
+		},
+		get:function(sKey){
+			return this.buf[sKey];
+		},
+		remove:function(sKey){
+			delete(this.buf[sKey]);
+		},
+		cut:function(sKey){
+			var buf = this.buf;
+			var result = buf[sKey];
+			delete buf[sKey];
+			return result;
+		},
+		getBuf:function(){
+			return this.buf;
+		},
+		size:function(){
+			var buf = this.buf;
+			var i = 0; 
+			for(var ele in buf){
+				i++;
+			}
+			return i;
+		},
+		toJson:function(){
+			var b = this.buf;
+			var buf = [];
+			for(var ele in b){
+				buf.push('Key:');
+				buf.push(ele);
+				buf.push(' Value:');
+				buf.push(b[ele]);
+				buf.push('\n');
+			}
+			return buf.join('');
+		},
+		toString:function(){
+			var b = this.buf;
+			var buf = [];
+			buf.push("{");
+			var index = 0
+			for(var ele in b){
+				if(index == 0){
+					buf.push("\""+ele+"\":");
+				}else{
+					buf.push(",\""+ele+"\":");
+				}
+				if(b[ele].constructor==String){
+					buf.push("\""+b[ele]+"\"");
+				}else{
+					buf.push(b[ele]);
+				}
+				index++;
+			}
+			buf.push("}");
+			return buf.join('');
+		},
+		toIterator:function(){
+			var key = [];
+			var b = this.buf;
+			for(var ele in b){
+				key.push(ele);
+			}
+			return key;
+		},
+		clear:function(){
+			var b = this.buf;
+			for(var ele in b){
+				delete(this.buf[ele]);
+			}
+		},
+		toStrings:function(){
+			var b = this.buf;
+			var buf = [];
+			for(var ele in b){
+				buf.push(b[ele]);
+			}
+			return buf.join('');
+		},
+		toStringKeys:function(){
+			var key = [];
+			var b = this.buf;
+			for(var ele in b){
+				key.push(ele);
+			}
+			return key.toString();
+		}
+	};
+	win.FastMap = FastMap;
+})(window);
+//js模拟java中map，提供Map的add get remove cut方法----end
+
+
+

src/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <transition name="el-fade-in-linear">
+    <router-view />
+  </transition>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import { messages } from '@/i18n'
+export default {
+  watch: {
+    '$i18n.locale': 'i18nHandle'
+  },
+  created () {
+    this.i18nHandle(this.$i18n.locale)
+  },
+  methods: {
+    i18nHandle (val, oldVal) {
+      Cookies.set('language', val)
+      document.querySelector('html').setAttribute('lang', val)
+      document.title = messages[val].brand.lg
+      // 非登录页面，切换语言刷新页面
+      if (this.$route.name !== 'login' && oldVal) {
+        window.location.reload()
+      }
+    }
+  }
+}
+</script>

src/api/index.js

@@ -0,0 +1,284 @@
+import http from '@/utils/request'
+
+const postReq = {
+  // 获取船舶类型
+  async getShipType () {
+    const { data } = await http.get('/sys/dict/type/ship_type')
+    return data
+  },
+
+  /* 研判报告-B */
+  // 获取船舶信息
+  async loadShipData (mmsi) {
+    const { data } = await http.get('/hkship/ship/getByMmsi/' + mmsi)
+    return data
+  },
+  // 船主信息
+  async shipownerd (mmsi) {
+    const { data } = await http.get('/ship/shipowner/' + mmsi)
+    return data
+  },
+  // 异常标签
+  async exceptionlabel (mmsi) {
+    const { data } = await http.get('/report/exLabelNew/' + mmsi)
+    return data
+  },
+  // 可能出发的海港
+  async departurePort (mmsi) {
+    const { data } = await http.get('/model/prosshipharbor/latest/' + mmsi)
+    return data
+  },
+  //    研判报告
+  async getReport (mmsi) {
+    const { data } = await http.get('/report/getExceptionData/' + mmsi)
+    return data
+  },
+
+  /* 研判报告-D */
+
+  /* 模型配置 */
+  async DiurnalNightOut (params) {
+    const { data } = await http.post('/sys/params/addCrouchingNight/', params)
+    return data
+  },
+  async keyAreas (params) {
+    const { data } = await http.post('/sys/params/addKeyAreasAppear/', params)
+    return data
+  },
+  async KeyShip (params) {
+    const { data } = await http.post('/sys/params/addKeyShipConn/', params)
+    return data
+  },
+  // 停靠
+  async longBerth (params) {
+    const { data } = await http.post('/sys/params/addLongTimgStop/', params)
+    return data
+  },
+  // 停泊
+  async longBerthing (params) {
+    const { data } = await http.post('/sys/params/addLongTimeMooring/', params)
+    return data
+  },
+  async modelConfiguration (params) {
+    const { data } = await http.post('/sys/params/addDatapreproConfig/', params)
+    return data
+  },
+  async refutation (params) {
+    const { data } = await http.post('/sys/params/addMultipleTimes/', params)
+    return data
+  },
+  async shipGather (params) {
+    const { data } = await http.post('/sys/params/addShipGather/', params)
+    return data
+  },
+  /** 模型配置数据回显 **/
+  async DiurnalNightOutS () {
+    const { data } = await http.get('/sys/params/getCrouchingNight/')
+    return data
+  },
+  async keyAreasS () {
+    const { data } = await http.get('/sys/params/getKeyAreasAppear/')
+    return data
+  },
+  async KeyShipS () {
+    const { data } = await http.get('/sys/params/getKeyShipConn/')
+    return data
+  },
+  // 停靠
+  async longBerthS () {
+    const { data } = await http.get('/sys/params/getLongTimgStop/')
+    return data
+  },
+  // 停泊
+  async longBerthingS () {
+    const { data } = await http.get('/sys/params/getLongTimeMooring/')
+    return data
+  },
+  async modelConfigurationS () {
+    const { data } = await http.get('/sys/params/getDatapreproConfig/')
+    return data
+  },
+  async refutationS () {
+    const { data } = await http.get('/sys/params/getMultipleTimes/')
+    return data
+  },
+  async shipGatherS () {
+    const { data } = await http.get('/sys/params/getShipGather/')
+    return data
+  },
+
+  /** ***详情*****/
+  // 异常线索列表
+  async dayAndNight (params) {
+    const { data } = await http.get('/model/bat/page/', { params })
+    return data
+  },
+  async multibar (params) {
+    const { data } = await http.get('/model/refutation/selectMultipleTransferPage/', { params })
+    return data
+  },
+  async vesinvo (params) {
+    const { data } = await http.get('/casedata/involvedship/page/', { params })
+    return data
+  },
+  async keyShip (params) {
+    const { data } = await http.get('/model/refutation/selectKeyShipTransePage/', { params })
+    return data
+  },
+  async inforReport (params) {
+    const { data } = await http.get('/informerreport/informerreport/page/', { params })
+    return data
+  },
+  async keyareas (params) {
+    const { data } = await http.get('/keyarea/keyarearecord/page/', { params })
+    return data
+  },
+  // 停泊
+  async longBerthMet (params) {
+    const { data } = await http.get('/model/anchor/page/', { params })
+    return data
+  },
+  // 停靠
+  async longBerthingMet (params) {
+    const { data } = await http.get('/model/docked/page/', { params })
+    return data
+  },
+  /* 异常等级-B */
+  // 删除
+  async deleteData (id) {
+    const { data } = await http.delete('/sys/sysabnormallevel/deleteById/' + id)
+    return data
+  },
+
+  //  涉案次数异常等级
+  // 获取
+  async findInformants () {
+    const { data } = await http('/sys/sysabnormallevel/findInformants')
+    return data
+  },
+  // 涉案次数 添加
+  async addInformants (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addInformants', params)
+    return data
+  },
+  // 涉案次数 修改
+  async updateInformants (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateInformants', params)
+    return data
+  },
+
+  // 与重点船舶交驳交驳次数
+  // 保存
+  async addKeyShip (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addKeyShip', params)
+    return data
+  },
+  // 获取
+  async findKeyShip () {
+    const { data } = await http('/sys/sysabnormallevel/findKeyShip')
+    return data
+  },
+  // 修改
+  async updateKeyShip (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateKeyShip', params)
+    return data
+  },
+  // 线人举报次数
+  // 获取
+  async findInfomerReport () {
+    const { data } = await http('/sys/sysabnormallevel/findInfomerReport')
+    return data
+  },
+  // 保存
+  async addInfomerReport (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addInfomerReport', params)
+    return data
+  },
+  // 修改
+  async updateInfomerReport (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateInfomerReport', params)
+    return data
+  },
+
+  // 重点区域出现
+  // 获取
+  async findKeyArea () {
+    const { data } = await http('/sys/sysabnormallevel/findKeyArea')
+    return data
+  },
+  // 保存
+  async addKeyArea (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addKeyArea', params)
+    return data
+  },
+  // 修改
+  async updateKeyArea (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateKeyArea', params)
+    return data
+  },
+  // 船舶昼伏夜出
+  // 获取
+  async findCrouchingNight () {
+    const { data } = await http('/sys/sysabnormallevel/findCrouchingNight')
+    return data
+  },
+  // 保存
+  async addCrouchingNight (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addCrouchingNight', params)
+    return data
+  },
+  // 修改
+  async updateCrouchingNight (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateCrouchingNight', params)
+    return data
+  },
+  // 多次交驳
+  // 获取
+  async findMultipleTrans () {
+    const { data } = await http('/sys/sysabnormallevel/findMultipleTrans')
+    return data
+  },
+  // 保存
+  async addMultipleTrans (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addMultipleTrans', params)
+    return data
+  },
+  // 修改
+  async updateMultipleTrans (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateMultipleTrans', params)
+    return data
+  },
+  // 长时间停泊
+  // 获取
+  async findLongtimeMooring () {
+    const { data } = await http('/sys/sysabnormallevel/findLongtimeMooring')
+    return data
+  },
+  // 保存
+  async addLongtimeMooring (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addLongtimeMooring', params)
+    return data
+  },
+  // 修改
+  async updateLongtimeMooring (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateLongtimeMooring', params)
+    return data
+  },
+  // 长时间停靠
+  // 获取
+  async findLongtimgStop () {
+    const { data } = await http('/sys/sysabnormallevel/findLongtimgStop')
+    return data
+  },
+  // 保存
+  async addLongtimgStop (params) {
+    const { data } = await http.post('/sys/sysabnormallevel/addLongtimgStop', params)
+    return data
+  },
+  // 修改
+  async updateLongtimgStop (params) {
+    const { data } = await http.put('/sys/sysabnormallevel/updateLongtimgStop', params)
+    return data
+  }
+}
+export default postReq

src/assets/css/model.css

@@ -0,0 +1,36 @@
+.boxWidth{
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    color: #fff;
+    background: #fff;
+}
+.boxWidth > h3{
+    width: 30%;
+    color: #666666;
+
+    padding: 15px 0 15px 40px;
+}
+.mainBox > div{
+    height: 40px;
+    line-height: 40px;
+    margin-left: 40px;
+    margin-bottom: 15px;
+}
+.mainBox > div label{
+    color: #666;
+    display: inline-block;
+}
+.el-input{
+    max-width: 200px!important;
+    margin-right: 15px;
+}
+.mainBox .btnRight {
+    text-align: right;
+    padding-right: 20px;
+}
+
+/*详情页*/
+.aui-wrapper .el-pagination{
+    text-align: center!important;
+}

src/assets/js/abnormallevelconfig.js

@@ -0,0 +1,11 @@
+export default class SetObj {
+  constructor(casesNum, level, firstCondition, firstConditionValue, secondCondition, secondConditionvalue, colour) {
+    this.casesNum = casesNum
+    this.level = level
+    this.firstCondition = firstCondition
+    this.firstConditionValue = firstConditionValue
+    this.secondCondition = secondCondition
+    this.secondConditionvalue = secondConditionvalue
+    this.colour = colour
+  }
+}

src/assets/scss/aui.scss

@@ -0,0 +1,11 @@
+// 变量
+@import "~@/element-ui/theme-variables.scss";
+@import "./variables.scss";
+// 公共
+@import "./normalize.scss";
+@import "./common.scss";
+// 页面
+@import "./pages/login.scss";
+@import "./pages/404.scss";
+// 模块
+@import "./modules/home.scss";

src/assets/scss/common.scss

@@ -0,0 +1,704 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+body {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-size: $--font-size-base;
+  line-height: $base--line-height;
+  color: $--color-text-primary;
+  background-color: #fff;
+}
+a {
+  color: mix(#fff, $--color-primary, 20%);
+  text-decoration: none;
+  &:focus,
+  &:hover {
+    color: $--color-primary;
+    text-decoration: underline;
+  }
+}
+img {
+  vertical-align: middle;
+}
+:focus,
+:hover {
+  outline: none;
+}
+
+/* Utils
+------------------------------ */
+[v-cloak] {
+  display: none;
+}
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.fr {
+  float: right !important;
+}
+.fl {
+  float: left !important;
+}
+.fi {
+  float: initial !important;
+}
+.m-auto {
+  margin: auto !important;
+}
+.mt-auto {
+  margin-top: auto !important;
+}
+.mr-auto {
+  margin-right: auto !important;
+}
+.mb-auto {
+  margin-bottom: auto !important;
+}
+.ml-auto {
+  margin-left: auto !important;
+}
+.text-right {
+  text-align: right !important;
+}
+.text-center {
+  text-align: center !important;
+}
+.text-left {
+  text-align: left !important;
+}
+.w-percent-100 {
+  width: 100% !important;
+}
+.base-line-height {
+  line-height: $base--line-height !important;
+}
+
+
+/* Reset element-ui
+------------------------------ */
+.aui-wrapper {
+  .el-card + .el-card {
+    margin-top: 15px;
+  }
+  .el-input__prefix .el-input__icon {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .el-date-editor .el-range-separator {
+    width: 8%;
+  }
+  .el-table th {
+    color: $--color-text-primary;
+    background-color: $--background-color-base;
+  }
+  .el-pagination {
+    margin-top: 15px;
+    text-align: right;
+  }
+}
+
+
+/* Common
+------------------------------ */
+// 图标
+.icon-svg {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  vertical-align: middle;
+  overflow: hidden;
+}
+// 卡片
+.aui-card--fill .el-card__header {
+  height: $content--card-header-height;
+  line-height: $content--card-header-height - 36px;
+}
+.aui-card__title {
+  font-size: 16px;
+}
+// 表单
+.aui-form__label-icon {
+  display: inline-block;
+  margin: 0 3px;
+  vertical-align: middle;
+  font-size: 18px;
+  color: $--color-text-secondary;
+}
+// 按钮
+.aui-button--dashed {
+  border-style: dashed;
+  &:focus,
+  &:hover {
+    background-color: transparent;
+  }
+  &-add {
+    > span > *[class*="el-icon-"],
+    > span > *[class*="icon"] {
+      vertical-align: middle;
+      font-size: 18px;
+      margin-right: 5px;
+    }
+  }
+}
+// 主题工具
+.aui-theme-tools {
+  position: fixed;
+  top: $navbar--height + $content--tabs-header-height + 15px;
+  right: -210px;
+  bottom: 0;
+  z-index: 1010;
+  width: 210px;
+  transition: right .3s;
+  &--open {
+    right: 0;
+  }
+  &__toggle {
+    position: absolute;
+    top: 80px;
+    left: -40px;
+    width: 40px;
+    padding: 10px 8px;
+    text-align: center;
+    font-size: 20px;
+    border-right: 0;
+    border-radius: $--border-radius-base 0 0 $--border-radius-base;
+    color: #fff;
+    background-color: $--color-primary;
+    cursor: pointer;
+  }
+  &__content {
+    height: 100%;
+    padding: 5px 20px 20px;
+    border: 1px solid $--border-color-lighter;
+    border-radius: $--border-radius-base 0 0 $--border-radius-base;
+    background-color: #fff;
+    .el-radio {
+      display: block;
+      margin-left: 0 !important;
+      line-height: 28px;
+    }
+  }
+  &__item + &__item {
+    margin-top: 15px;
+    border-top: 1px solid $--border-color-lighter;
+  }
+}
+
+
+/* Layout
+------------------------------ */
+.aui-wrapper {
+  position: relative;
+  padding-top: $navbar--height;
+}
+
+
+/* Sidebar fold
+------------------------------ */
+.aui-sidebar--fold {
+  .aui-navbar {
+    &__header,
+    &__brand {
+      width: $sidebar--width-fold;
+    }
+    &__brand {
+      &-lg {
+        display: none;
+      }
+      &-mini {
+        display: inline-block;
+      }
+    }
+    &__icon-menu--switch {
+      transform: rotateZ(180deg);
+    }
+  }
+  .aui-sidebar {
+    &__inner {
+      width: $sidebar--width-fold + 20px;
+    }
+    &,
+    &__menu {
+      width: $sidebar--width-fold;
+    }
+    &__menu > li {
+      text-align: center;
+    }
+    &__menu-icon {
+      margin-right: 0;
+      font-size: 18px;
+    }
+  }
+  .aui-content {
+    &__wrapper {
+      margin-left: $sidebar--width-fold;
+    }
+    &--tabs > .el-tabs > .el-tabs__header {
+      left: $sidebar--width-fold;
+    }
+  }
+}
+
+
+/* Navbar
+------------------------------ */
+.aui-navbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  display: flex;
+  align-items: stretch;
+  height: $navbar--height;
+  background-color: $--color-primary;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
+  &--colorful {
+    .aui-navbar__body {
+      background-color: transparent;
+    }
+    .aui-navbar__menu {
+      > .el-menu-item,
+      > .el-submenu > .el-submenu__title {
+        color: #fff;
+        &:focus,
+        &:hover {
+          color: #fff;
+          background-color: mix(#000, $--color-primary, 15%);
+        }
+      }
+      > .el-menu-item.is-active,
+      > .el-submenu.is-active > .el-submenu__title {
+        color: #fff;
+        &:focus,
+        &:hover {
+          color: #fff;
+        }
+      }
+      .el-menu-item i,
+      .el-submenu__title i,
+      .el-menu-item svg,
+      .el-submenu__title svg,
+      .el-menu-item .el-dropdown {
+        color: #fff !important;
+      }
+      .el-button {
+        color: #fff;
+        background-color: transparent;
+      }
+    }
+    .aui-navbar__search {
+      &-txt {
+        .el-input__inner {
+          color: #fff;
+          border-color: #fff;
+          &::-webkit-input-placeholder {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  &__header {
+    position: relative;
+    width: $sidebar--width;
+    height: $navbar--height;
+    transition: width .3s;
+  }
+  &__brand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 20px;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: #fff;
+    overflow: hidden;
+    transition: width .3s;
+    &-lg,
+    &-mini {
+      max-width: 100%;
+      color: #fff;
+      cursor: pointer;
+      &:focus,
+      &:hover {
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+    &-mini {
+      display: none;
+    }
+  }
+  &__body {
+    position: relative;
+    display: flex;
+    flex: 1;
+    background-color: #fff;
+    overflow: hidden;
+  }
+  &__menu {
+    background-color: transparent;
+    border-bottom: 0 !important;
+    a:focus,
+    a:hover {
+      text-decoration: none;
+    }
+    .el-menu-item,
+    .el-submenu > .el-submenu__title {
+      height: $navbar--height;
+      padding: 0 15px;
+      line-height: $navbar--height;
+      border-color: transparent !important;
+    }
+    .el-menu-item.is-active,
+    .el-submenu.is-active > .el-submenu__title {
+      color: $--color-text-secondary;
+      &:focus,
+      &:hover {
+        color: $--color-text-primary;
+      }
+    }
+    .el-menu-item {
+      &:focus,
+      &:hover {
+        .aui-navbar__icon-menu {
+          color: $--color-text-primary;
+        }
+        .el-dropdown {
+          color: $--color-text-primary;
+          .el-icon-arrow-down {
+            transform: rotateZ(180deg);
+          }
+        }
+      }
+      * {
+        vertical-align: initial;
+      }
+      .aui-navbar__icon-menu {
+        vertical-align: middle;
+        font-size: 16px;
+      }
+      .el-dropdown {
+        color: $--color-text-secondary;
+        .el-icon-arrow-down {
+          width: auto;
+          font-size: 12px;
+          margin: 0 0 0 5px;
+          transition: transform .3s;
+        }
+      }
+    }
+    .el-badge {
+      display: inline;
+      z-index: 2;
+      &__content {
+        line-height: 16px;
+      }
+    }
+  }
+  &__search {
+    > *[class*="el-icon-"],
+    > *[class*="icon"] {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    &-txt {
+      width: 0;
+      transition: width .3s, margin-left .3s;
+      &.is-show {
+        width: 210px;
+        margin-left: 8px;
+      }
+      .el-input__inner {
+        height: $navbar--height - 20px;
+        padding: 0;
+        line-height: $navbar--height - 20px;
+        border-color: $--color-text-primary;
+        border-top: 0;
+        border-right: 0;
+        border-left: 0;
+        border-radius: 0;
+        background: transparent;
+      }
+    }
+  }
+  &__avatar {
+    .el-dropdown-link {
+      > img {
+        width: 36px;
+        height: auto;
+        margin-right: 5px;
+        border-radius: 100%;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+
+/* Sidebar
+------------------------------ */
+.aui-sidebar {
+  position: fixed;
+  top: $navbar--height;
+  left: 0;
+  bottom: 0;
+  z-index: 1020;
+  width: $sidebar--width;
+  background-color: #fff;
+  box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);
+  overflow: hidden;
+  transition: width .3s;
+  &--dark {
+    background-color: $sidebar--background-color-dark;
+    .aui-sidebar__menu,
+    > .el-menu--popup {
+      background-color: $sidebar--background-color-dark;
+      .el-menu-item,
+      .el-submenu > .el-submenu__title {
+        color: $sidebar--text-color-dark;
+        &:focus,
+        &:hover {
+          color: mix(#fff, $sidebar--text-color-dark, 50%);
+          background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
+        }
+      }
+      .el-menu,
+      .el-submenu.is-opened {
+        background-color: mix(#000, $sidebar--background-color-dark, 15%);
+      }
+      .el-menu-item.is-active,
+      .el-submenu.is-active > .el-submenu__title {
+        color: mix(#fff, $sidebar--text-color-dark, 80%);
+      }
+    }
+  }
+  &__inner {
+    position: relative;
+    z-index: 1;
+    width: $sidebar--width + 20px;
+    height: 100%;
+    padding-bottom: 15px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    transition: width .3s;
+  }
+  &__menu {
+    width: $sidebar--width;
+    border-right: 0;
+    transition: width .3s;
+    .el-menu-item,
+    .el-submenu__title {
+      height: $sidebar--menu-item-height;
+      line-height: $sidebar--menu-item-height;
+    }
+  }
+  &__menu-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 24px !important;
+    margin-right: 5px;
+    text-align: center;
+    font-size: 16px;
+    color: inherit !important;
+    transition: font-size .3s;
+  }
+}
+
+
+/* Content
+------------------------------ */
+.aui-content {
+  position: relative;
+  padding: $content--padding;
+  min-height: calc(100vh - #{$navbar--height});
+  &__wrapper {
+    position: relative;
+    margin-left: $sidebar--width;
+    min-height: calc(100vh - #{$navbar--height});
+    background-color: $content--background-color;
+    transition: margin-left .3s;
+  }
+  > .aui-card--fill > .el-card__body {
+    min-height: calc(#{$content--fill-height} - 2px);
+  }
+  > .aui-card--fill > .el-card__header + .el-card__body {
+    min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
+  }
+  &--tabs {
+    padding: $content--tabs-header-height 0 0;
+  }
+  &--tabs-tools {
+    position: fixed;
+    top: $navbar--height;
+    right: 0;
+    z-index: 931;
+    min-width: $content--tabs-header-height;
+    height: $content--tabs-header-height;
+    padding: 0 12px;
+    text-align: center;
+    font-size: 16px;
+    line-height: $content--tabs-header-height;
+    background-color: $--background-color-base;
+    cursor: pointer;
+  }
+  &--tabs-icon-nav {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+  }
+  > .el-tabs {
+    > .el-tabs__header {
+      position: fixed;
+      top: $navbar--height;
+      left: $sidebar--width;
+      right: 0;
+      z-index: 930;
+      padding: 0 55px 0 15px;
+      margin: 0;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+      background-color: #fff;
+      transition: left .3s;
+      > .el-tabs__nav-wrap {
+        margin-bottom: 0;
+        &:after {
+          display: none;
+        }
+        > .el-tabs__nav-next,
+        > .el-tabs__nav-prev {
+          line-height: $content--tabs-header-height;
+        }
+        > .el-tabs__nav-scroll > .el-tabs__nav {
+          & > .el-tabs__active-bar {
+            display: none;
+          }
+          & > .el-tabs__item {
+            height: $content--tabs-header-height;
+            padding: 0 15px;
+            line-height: $content--tabs-header-height;
+            border: 0;
+            color: $--color-text-regular;
+            &:focus,
+            &:hover,
+            &.is-active {
+              color: $--color-text-primary;
+              background-color: $--background-color-base;
+              &:after {
+                display: block;
+              }
+              > .el-icon-close {
+                color: $--color-text-primary;
+              }
+            }
+            &:after {
+              display: none;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              content: '';
+              width: 100%;
+              height: 2px;
+              background-color: $--color-primary;
+            }
+            + .el-tabs__item {
+              margin-left: 1px;
+            }
+            > .el-icon-close {
+              width: 14px;
+              margin-left: 15px;
+              color: $--color-text-secondary;
+            }
+            > i.icon {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 18px;
+            }
+          }
+        }
+      }
+    }
+    > .el-tabs__content {
+      padding: $content--padding;
+      > .el-tab-pane {
+        min-height: calc(#{$content--fill-height-tabs});
+        > .aui-card--fill > .el-card__body {
+          min-height: calc(#{$content--fill-height-tabs} - 2px);
+        }
+        > .aui-card--fill > .el-card__header + .el-card__body {
+          min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
+        }
+        &.is-iframe {
+          height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
+          margin: -$content--padding;
+          min-height: auto;
+          > .aui-card--fill {
+            background-color: transparent;
+          }
+          > .aui-card--fill > .el-card__header {
+            background-color: #fff;
+          }
+          > .aui-card--fill > .el-card__body {
+            height: calc(#{$content--fill-height-tabs} - 2px);
+            margin: $content--padding;
+            min-height: auto;
+            border: $--border-base;
+            border-color: $--border-color-lighter;
+            border-radius: $--border-radius-base;
+            background-color: #fff;
+          }
+          > .aui-card--fill > .el-card__header + .el-card__body {
+            height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
+          }
+        }
+      }
+    }
+  }
+  // quill富文本编辑器
+  .ql-toolbar {
+    line-height: 20px;
+    &.ql-snow {
+      border-color: $--border-color-base;
+    }
+    .ql-formats {
+      margin: 0 5px;
+    }
+  }
+  .ql-container {
+    height: 150px;
+    &.ql-snow {
+      border-color: $--border-color-base;
+    }
+  }
+}
+
+
+/* Page
+------------------------------ */
+*[class*="aui-page__"] {
+  padding-top: 0;
+  .aui-content {
+    min-height: auto;
+    &__wrapper {
+      min-height: 100vh;
+      margin-left: 0;
+    }
+    > .aui-card--fill > .el-card__body {
+      min-height: calc(100vh - #{$content--padding * 2} - 2px);
+    }
+    > .aui-card--fill > .el-card__header + .el-card__body {
+      min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
+    }
+  }
+}

src/assets/scss/modules/home.scss

@@ -0,0 +1,15 @@
+.mod-home {
+  table {
+    width: 100%;
+    border: 1px solid $--border-color-lighter;
+    border-collapse: collapse;
+    th,
+    td {
+      padding: 12px 10px;
+      border: 1px solid $--border-color-lighter;
+    }
+    th {
+      width: 30%;
+    }
+  }
+}

src/assets/scss/normalize.scss

@@ -0,0 +1,447 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}

src/assets/scss/pages/404.scss

@@ -0,0 +1,48 @@
+.aui-page__not-found {
+  .aui-content {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    min-height: 100vh;
+    padding: 15% 50px 50px;
+    text-align: center;
+    &__wrapper {
+      height: 100vh;
+      background-color: transparent;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+  .title {
+    margin: 0 0 15px;
+    font-size: 10em;
+    font-weight: 400;
+    color: $--color-text-regular;
+  }
+  .desc {
+    margin: 0 0 20px;
+    font-size: 26px;
+    color: $--color-text-secondary;
+    > em {
+      margin: 0 5px;
+      font-style: normal;
+      color: $--color-warning;
+    }
+  }
+  .btn-bar .el-button {
+    margin: 0 15px;
+  }
+}
+@media (max-width: 767px) {
+  .aui-page__not-found {
+    .title {
+      font-size: 8em;
+    }
+    .desc {
+      font-size: 20px;
+    }
+    .btn-bar .el-button {
+      margin: 0 7.5px;
+    }
+  }
+}

src/assets/scss/pages/login.scss

@@ -0,0 +1,220 @@
+.aui-page__login {
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: "";
+  }
+  &::before {
+    background-image: url(~@/assets/img/login_bg.jpg);
+    background-size: cover;
+  }
+  &::after {
+    background-color: rgba(38, 50, 56, .4);
+  }
+  .aui-content {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 50px 20px 150px;
+    text-align: center;
+    &__wrapper {
+      height: 100vh;
+      background-color: transparent;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+  .login-header {
+    padding: 20px;
+    color: #fff;
+    .login-brand {
+      margin: 0 0 15px;
+      font-size: 40px;
+      font-weight: 400;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+    }
+    .login-intro {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      > li {
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgba(255, 255, 255, .6);
+        & + li {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+  .login-body,
+  .login-footer {
+    width: 460px;
+  }
+  .login-body {
+    padding: 20px 30px;
+    background-color: #fff;
+    .login-title {
+      font-size: 18px;
+      font-weight: 400;
+    }
+    .el-input__prefix .el-input__icon {
+      font-size: 16px;
+    }
+    .login-captcha {
+      height: $--input-height;
+      line-height: $--input-height -2px;
+      > img {
+        max-width: 100%;
+        cursor: pointer;
+      }
+    }
+    .login-shortcut {
+      margin-bottom: 20px;
+      &__title {
+        position: relative;
+        margin: 0 0 15px;
+        font-weight: 400;
+        
+        &::before {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          left: 0;
+          z-index: 1;
+          content: "";
+          height: 1px;
+          margin-top: -.5px;
+          background-color: $--border-color-base;
+          overflow: hidden;
+        }
+        > span {
+          position: relative;
+          z-index: 2;
+          padding: 0 20px;
+          color: rgba(0, 0, 0, .3);
+          background-color: #fff;
+        }
+      }
+      &__list {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        font-size: 0;
+        > li {
+          display: inline-block;
+          vertical-align: middle;
+          margin: 0 10px;
+          font-size: 28px;
+        }
+      }
+    }
+    .login-guide {
+      color: rgba(0, 0, 0, .3);
+    }
+  }
+  .login-footer {
+    position: absolute;
+    bottom: 0;
+    padding: 20px;
+    color: rgba(255, 255, 255, .6);
+    p {
+      margin: 10px 0;
+    }
+    a {
+      padding: 0 5px;
+      color: rgba(255, 255, 255, .6);
+      &:focus,
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+  // 右侧垂直风格
+  &--right-vertical {
+    .aui-content {
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: stretch;
+      padding: 0;
+    }
+    .login-header {
+      flex: 1;
+      display: flex;
+      flex-flow: column wrap;
+      justify-content: center;
+      padding: 30px 120px;
+      text-align: left;
+    }
+    .login-body {
+      position: relative;
+      display: flex;
+      flex-flow: column wrap;
+      justify-content: center;
+      padding: 120px 30px 150px;
+      text-align: center;
+      .login-guide {
+        margin-top: 0;
+      }
+    }
+    .login-footer {
+      right: 0;
+      color: $--color-text-regular;
+      a {
+        color: $--color-text-regular;
+        &:focus,
+        &:hover {
+          color: $--color-primary;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 991px) {
+  .aui-page__login {
+    &--right-vertical {
+      .login-header {
+        padding: 30px;
+      }
+    }
+  }
+}
+@media (max-width: 767px) {
+  .aui-page__login {
+    &--right-vertical {
+      .login-header {
+        .login-brand,
+        .login-intro {
+          display: none;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 575px) {
+  .aui-page__login {
+    .login-body,
+    .login-footer {
+      width: 100%;
+    }
+    .login-captcha {
+      text-align: left;
+      > img {
+        width: 136px;
+      }
+    }
+    &--right-vertical {
+      .login-header {
+        display: none;
+      }
+    }
+  }
+}

src/assets/scss/variables.scss

@@ -0,0 +1,22 @@
+// Base
+$base--line-height: 1.15;
+
+// Navbar
+$navbar--height: 50px;
+
+// Sidebar
+$sidebar--width: 230px;
+$sidebar--width-fold: 64px;
+$sidebar--background-color-dark: #263238;
+$sidebar--text-color-dark: #8a979e;
+$sidebar--menu-item-height: 48px;
+
+// Content
+$content--padding: 15px; 
+$content--background-color: #f1f4f5;
+$content--card-header-height: 60px;
+$content--tabs-header-height: 38px;
+// Content, 填充整屏高度(非tabs状态) = 整屏高度 - 导航条高度 - aui-content上下内边距高度
+$content--fill-height: calc(100vh - #{$navbar--height} - #{$content--padding * 2});
+// Content, 填充整屏高度(是tabs状态) = 整屏高度 - 导航条高度 - tabs组件header高度 - tabs组件content上下内边距高度
+$content--fill-height-tabs: calc(100vh - #{$navbar--height} - #{$content--tabs-header-height} - #{$content--padding * 2});

src/components/chars/bar.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="svgcss" id="bar"></div>
+</template>
+<style lang="less">
+.svgcss{
+    width: 760px;
+    height: 400px;
+    margin-left: 20px;
+}
+</style>
+<script>
+export default {
+    data () {
+        return {
+            width:760,
+            height:380,
+            data:[]
+        }
+    },
+    methods: {
+        init (obj) {
+            setTimeout(() => {
+                this.bar(obj);
+            }, 200);
+        },
+        // 画图表
+        bar(obj) {
+            if(undefined != obj){
+                let _this = this;
+                let width = this.width;
+                if(undefined != obj.width){
+                    width = obj.width;
+                }
+                let height = this.height;
+                if(undefined != obj.height){
+                    height = obj.height;
+                }
+                let datas = this.data;
+                if(undefined != obj.data){
+                    datas = obj.data;
+                }
+                let rectPad = 15;
+                let padding = {left: 30,right: 30,top: 20,bottom: 20};
+                // 初始化svg画布
+                $('#bar').html("");
+                let svg = d3.select('#bar').append('svg');
+                svg.attr("width", width + 'px');
+                svg.attr("height", height + 'px');
+                // 创建比例尺
+                let min = 0;
+                let arr = [];
+                for(let i=0;i<datas.length;i++){
+                    arr.push(datas[i].value);
+                }
+                arr.sort(function (a, b) {
+                    return a-b;
+                });
+                // let min = parseInt(arr[0]);
+                let max = parseInt(arr[arr.length - 1]) + 5;
+
+                let xScale = d3.scaleBand().domain(datas.map(d=>d.key)).range([0, width - padding.left - padding.right]);
+                let yScale = d3.scaleLinear().domain([min, max]).range([0, height - padding.top - padding.bottom,0]);
+                let yScaleAxis = d3.scaleLinear().domain([min, max]).range([height - padding.top - padding.bottom,0]); // 坐标轴值域取反，因为坐标原点在左上角
+                // 设置x轴 y轴
+                let xAxis = d3.axisBottom().scale(xScale);
+                let yAxis = d3.axisLeft(yScaleAxis);
+                // 添加x轴
+                svg.append('g')
+                    .attr('class', 'axis')
+                    .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
+                    .call(xAxis);
+                // 添加y轴
+                svg.append('g')
+                    .attr('class', 'axis')
+                    .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
+                    .call(yAxis);
+                let color = d3.scaleOrdinal(d3.schemeCategory20)
+                // 添加柱状图
+                svg.selectAll('rect')
+                    .data(datas)
+                    .enter()
+                    .append('rect')
+                    // 设置矩形从x,y轴哪一点开始绘制
+                    .attr('x', function (d, i) {
+                        return padding.left + xScale(d.key) + rectPad;
+                    })
+                    .attr('y', function (d, i) {
+                        return height - padding.bottom - yScale(d.value)
+                    })
+                    // 设置矩形宽高
+                    .attr('width', xScale.bandwidth()-padding.left)
+                    .attr('height', function (d, i) {
+                        return yScale(d.value)
+                    })
+
+                    // 添加鼠标移入移出事件，有个填充简便的效果
+                    .on('mouseover', function (d, i) {
+                        d3.select(this)
+                            .transition()
+                            .duration(200)
+                            .attr('fill', 'green')
+                    })
+                    .on('mouseout', function (d, i) {
+                        d3.select(this)
+                            .transition()
+                            .duration(500)
+                            .attr('fill', 'steelblue')
+                    })
+                    .transition()
+                    // .delay(function (d, i) {//延迟加载
+                    //     return i * 10
+                    // })
+                    // .attr('fill', 'steelblue')
+                    .attr('fill', function(d, i) {
+                        return color(i);
+                    })
+                // 添加文字，同理
+                svg.selectAll('.MyText')
+                    .data(datas)
+                    .enter()
+                    .append('text')
+                    .attr('class', 'MyText')
+                    .attr('fill', 'black')
+                    .attr('text-anchor', 'middle')
+                    .attr('y', function (d, i) { return height - padding.bottom - yScale(d.value) - 20})
+                    .attr('x', function (d, i) {
+                        return padding.left + (width - padding.left - padding.right) / datas.length * i
+                    })
+                    .attr('dx', (width - padding.left - padding.right) / datas.length / 2)
+                    .attr('dy', function (d, i) {
+                        return '1.2em'
+                    })
+                    .text(function (d){
+                        return d.value;
+                    });
+            }
+        },
+        randomColor(){
+            let r = Math.floor(Math.random()*256);
+            let g = Math.floor(Math.random()*256);
+            let b = Math.floor(Math.random()*256);
+            return "rgb("+r+","+g+","+b+")";
+        }
+    }
+}
+</script>

src/components/chars/wordscloud.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="canvasCont"></div>
+</template>
+<style lang="less">
+.canvasCont{
+    width: 760px;
+    height: 400px;
+    margin-left: 10px;
+}
+</style>
+<script>
+export default {
+    data () {
+        return {
+            width:760,
+            height:380,
+            data:[]
+        }
+    },
+    methods: {
+        init (obj) {
+            setTimeout(() => {
+                this.wordsCloud(obj);
+            }, 200);
+        },
+        // 画图表
+        wordsCloud(obj) {
+            if(undefined != obj){
+                let _this = this;
+                let width = this.width;
+                if(undefined != obj.width){
+                    width = obj.width;
+                }
+                let height = this.height;
+                if(undefined != obj.height){
+                    height = obj.height;
+                }
+                let datas = this.data;
+                if(undefined != obj.data){
+                    datas = obj.data;
+                }
+                let layout = d3.layout.cloud()
+                    .size([width, height])
+                    .words(datas)
+                    .padding(5)
+                    .rotate(function() { return ~~(Math.random() * 2) * 90; })
+                    .font("Impact")
+                    .fontSize(function(d) { return d.size; })
+                    .on("end", draw);
+
+                layout.start();
+
+                function draw(words) {
+                    let color = d3.scaleOrdinal(d3.schemeCategory20)
+                    $(".canvasCont").html("");
+                    d3.select(".canvasCont").append("svg")
+                        .attr("width", layout.size()[0])
+                        .attr("height", layout.size()[1])
+                        .append("g")
+                        .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
+                        .selectAll("text")
+                        .data(words)
+                        .enter().append("text")
+                        .style("font-size", function(d) { return d.size + "px"; })
+                        .style("font-family", "Impact")
+                        .attr("text-anchor", "middle")
+                        .style("fill", function(d, i) {
+                            return color(i);
+                        })
+                        .attr("transform", function(d) {
+                            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
+                        })
+                        .text(function(d) { return d.text; });
+                }
+            }
+        },
+        randomColor(){
+            let r = Math.floor(Math.random()*256);
+            let g = Math.floor(Math.random()*256);
+            let b = Math.floor(Math.random()*256);
+            return "rgb("+r+","+g+","+b+")";
+        }
+    }
+}
+</script>

src/components/prints/prints.vue

@@ -0,0 +1,47 @@
+<template></template>
+<script>
+export default {
+    methods: {
+        init (obj) {
+            var this_ = this;
+            if(undefined != obj){
+                this_.writeIframe(obj);
+            }
+        },
+        writeIframe: function (content) {
+            var w, doc, iframe = document.createElement('iframe'),
+                f = document.body.appendChild(iframe);
+            iframe.id = "myIframe";
+            iframe.style = "position:absolute;width:0;height:0;";
+
+            w = f.contentWindow || f.contentDocument;
+            doc = f.contentDocument || f.contentWindow.document;
+            doc.open();
+            doc.write(content);
+            doc.close();
+            this.toPrint(w);
+
+            setTimeout(function () {
+                document.body.removeChild(iframe)
+            }, 100)
+        },
+        toPrint: function (frameWindow) {
+            try {
+                setTimeout(function () {
+                    frameWindow.focus();
+                    try {
+                        if (!frameWindow.document.execCommand('print', false, null)) {
+                            frameWindow.print();
+                        }
+                    } catch (e) {
+                        frameWindow.print();
+                    }
+                    frameWindow.close();
+                }, 10);
+            } catch (err) {
+                console.log('err', err);
+            }
+        }
+    }
+}
+</script>

src/components/table-tree-column/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-table-column :prop="prop" v-bind="$attrs">
+    <template slot-scope="scope">
+      <span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="{ 'padding-left': ((scope.row._level || 0) * 10) + 'px' }">
+        <i :class="[ scope.row._expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right' ]" :style="{ 'visibility': hasChild(scope.row) ? 'visible' : 'hidden' }"></i>
+        {{ scope.row[prop] }}
+      </span>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+  import isArray from 'lodash/isArray'
+  export default {
+    name: 'table-tree-column',
+    props: {
+      prop: {
+        type: String
+      },
+      treeKey: {
+        type: String,
+        default: 'id'
+      },
+      parentKey: {
+        type: String,
+        default: 'pid'
+      },
+      childKey: {
+        type: String,
+        default: 'children'
+      }
+    },
+    methods: {
+      hasChild (row) {
+        return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
+      },
+      // 切换处理
+      toggleHandle (index, row) {
+        if (!this.hasChild(row)) {
+          return false
+        }
+        var data = this.$parent.store.states.data.slice(0)
+        data[index]._expanded = !data[index]._expanded
+        if (data[index]._expanded) {
+          row[this.childKey].forEach(item => {
+            item._level = (row._level || 0) + 1
+            item._expanded = false
+          })
+          data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
+        } else {
+          data = this.removeChildNode(data, row[this.treeKey])
+        }
+        this.$parent.store.commit('setData', data)
+        this.$nextTick(() => {
+          this.$parent.doLayout()
+        })
+      },
+      // 移除子节点
+      removeChildNode (data, pid) {
+        var pids = isArray(pid) ? pid : [pid]
+        if (pid.length <= 0) {
+          return data
+        }
+        var ids = []
+        for (var i = 0; i < data.length; i++) {
+          if (pids.indexOf(data[i][this.parentKey]) !== -1 && pids.indexOf(data[i][this.treeKey]) === -1) {
+            ids.push(data.splice(i, 1)[0][this.treeKey])
+            i--
+          }
+        }
+        return this.removeChildNode(data, ids)
+      }
+    }
+  }
+</script>

src/element-ui/config.js

@@ -0,0 +1,23 @@
+/* eslint-disable */
+/**
+ * 主题配置信息
+ * 
+ * hasBuild 是否已构建？
+ *  true ：已构建，不再构建
+ *  false：未构建，执行命令后会自动构建
+ */
+module.exports = [
+  {  name: 'default',   color: '#409EFF', desc: '默认色', hasBuild: false },
+  {  name: 'cyan',      color: '#0BB2D4', desc: '青色',   hasBuild: false },
+  {  name: 'blue',      color: '#3E8EF7', desc: '蓝色',   hasBuild: false },
+  {  name: 'green',     color: '#11C26D', desc: '绿色',   hasBuild: false },
+  {  name: 'turquoise', color: '#17B3A3', desc: '蓝绿色', hasBuild: false },
+  {  name: 'indigo',    color: '#667AFA', desc: '靛青色', hasBuild: false },
+  {  name: 'brown',     color: '#997B71', desc: '棕色',   hasBuild: false },
+  {  name: 'purple',    color: '#9463F7', desc: '紫色',   hasBuild: false },
+  {  name: 'gray',      color: '#757575', desc: '灰色',   hasBuild: false },
+  {  name: 'orange',    color: '#EB6709', desc: '橙色',   hasBuild: false },
+  {  name: 'pink',      color: '#F74584', desc: '粉红色', hasBuild: false },
+  {  name: 'yellow',    color: '#FCB900', desc: '黄色',   hasBuild: false },
+  {  name: 'red',       color: '#FF4C52', desc: '红色',   hasBuild: false }
+]

src/element-ui/theme-variables.scss

@@ -0,0 +1,713 @@
+/* Element Chalk Variables */
+
+/* Transition
+-------------------------- */
+$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--fade-linear-transition: opacity 200ms linear !default;
+$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+
+/* Colors
+-------------------------- */
+$--color-white: #fff !default;
+$--color-black: #000 !default;
+
+$--color-primary: #3E8EF7 !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
+
+$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
+$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
+$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
+$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
+
+$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
+$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
+$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
+$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
+
+$--color-text-primary: #303133 !default;
+$--color-text-regular: #606266 !default;
+$--color-text-secondary: #909399 !default;
+$--color-text-placeholder: #c0c4cc !default;
+
+/* Link
+-------------------------- */
+$--link-color: $--color-primary-light-2 !default;
+$--link-hover-color: $--color-primary !default;
+
+/* Background
+-------------------------- */
+$--background-color-base: #f5f7fa !default;
+
+/* Border
+-------------------------- */
+$--border-width-base: 1px !default;
+$--border-style-base: solid !default;
+$--border-color-base: #dcdfe6 !default;
+$--border-color-light: #e4e7ed !default;
+$--border-color-lighter: #ebeef5 !default;
+$--border-color-extra-light: #f2f6fc !default;
+$--border-color-hover: $--color-text-placeholder !default;
+$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
+$--border-radius-base: 4px !default;
+$--border-radius-small: 2px !default;
+$--border-radius-circle: 100% !default;
+
+/* Box-shadow
+-------------------------- */
+$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
+
+/* Fill
+-------------------------- */
+$--fill-base: $--color-white !default;
+
+/* Font
+-------------------------- */
+$--font-path: 'fonts' !default;
+$--font-size-base: 14px !default;
+$--font-size-small: 13px !default;
+$--font-size-large: 18px !default;
+$--font-color-disabled-base: #bbb !default;
+$--font-weight-primary: 500 !default;
+$--font-line-height-primary: 24px !default;
+
+/* Size
+-------------------------- */
+$--size-base: 14px !default;
+
+/* z-index
+-------------------------- */
+$--index-normal: 1 !default;
+$--index-top: 1000 !default;
+$--index-popper: 2000 !default;
+
+/* Disable base
+-------------------------- */
+$--disabled-fill-base: $--background-color-base !default;
+$--disabled-color-base: $--color-text-placeholder !default;
+$--disabled-border-base: $--border-color-light !default;
+
+/* Icon
+-------------------------- */
+$--icon-color: #666 !default;
+$--icon-color-base: $--color-info !default;
+
+/* Checkbox
+-------------------------- */
+$--checkbox-font-size: 14px !default;
+$--checkbox-font-weight: $--font-weight-primary !default;
+$--checkbox-color: $--color-text-regular !default;
+$--checkbox-input-height: 14px !default;
+$--checkbox-input-width: 14px !default;
+$--checkbox-input-border-radius: $--border-radius-small !default;
+$--checkbox-input-fill: $--color-white !default;
+$--checkbox-input-border: $--border-base !default;
+$--checkbox-input-border-color: $--border-color-base !default;
+$--checkbox-icon-color: $--color-white !default;
+
+$--checkbox-disabled-input-border-color: $--border-color-base !default;
+$--checkbox-disabled-input-fill: #edf2fc !default;
+$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
+
+$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
+$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
+$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
+
+$--checkbox-checked-text-color: $--color-primary !default;
+$--checkbox-checked-input-border-color: $--color-primary !default;
+$--checkbox-checked-input-fill: $--color-primary !default;
+$--checkbox-checked-icon-color: $--fill-base !default;
+
+$--checkbox-input-border-color-hover: $--color-primary !default;
+
+$--checkbox-bordered-height: 40px !default;
+$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
+$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
+$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
+$--checkbox-bordered-medium-input-height: 14px !default;
+$--checkbox-bordered-medium-input-width: 14px !default;
+$--checkbox-bordered-medium-height: 36px !default;
+$--checkbox-bordered-small-input-height: 12px !default;
+$--checkbox-bordered-small-input-width: 12px !default;
+$--checkbox-bordered-small-height: 32px !default;
+$--checkbox-bordered-mini-input-height: 12px !default;
+$--checkbox-bordered-mini-input-width: 12px !default;
+$--checkbox-bordered-mini-height: 28px !default;
+
+$--checkbox-button-font-size: $--font-size-base !default;
+$--checkbox-button-checked-fill: $--color-primary !default;
+$--checkbox-button-checked-color: $--color-white !default;
+$--checkbox-button-checked-border-color: $--color-primary !default;
+
+
+
+/* Radio
+-------------------------- */
+$--radio-font-size: 14px !default;
+$--radio-font-weight: $--font-weight-primary !default;
+$--radio-color: $--color-text-regular !default;
+$--radio-input-height: 14px !default;
+$--radio-input-width: 14px !default;
+$--radio-input-border-radius: $--border-radius-circle !default;
+$--radio-input-fill: $--color-white !default;
+$--radio-input-border: $--border-base !default;
+$--radio-input-border-color: $--border-color-base !default;
+$--radio-icon-color: $--color-white !default;
+
+$--radio-disabled-input-border-color: $--disabled-border-base !default;
+$--radio-disabled-input-fill: $--disabled-fill-base !default;
+$--radio-disabled-icon-color: $--disabled-fill-base !default;
+
+$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
+$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
+$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
+
+$--radio-checked-text-color: $--color-primary !default;
+$--radio-checked-input-border-color: $--color-primary !default;
+$--radio-checked-input-fill: $--color-white !default;
+$--radio-checked-icon-color: $--color-primary !default;
+
+$--radio-input-border-color-hover: $--color-primary !default;
+
+$--radio-bordered-height: 40px !default;
+$--radio-bordered-padding: 12px 20px 0 10px !default;
+$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
+$--radio-bordered-small-padding: 8px 15px 0 10px !default;
+$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
+$--radio-bordered-medium-input-height: 14px !default;
+$--radio-bordered-medium-input-width: 14px !default;
+$--radio-bordered-medium-height: 36px !default;
+$--radio-bordered-small-input-height: 12px !default;
+$--radio-bordered-small-input-width: 12px !default;
+$--radio-bordered-small-height: 32px !default;
+$--radio-bordered-mini-input-height: 12px !default;
+$--radio-bordered-mini-input-width: 12px !default;
+$--radio-bordered-mini-height: 28px !default;
+
+$--radio-button-font-size: $--font-size-base !default;
+$--radio-button-checked-fill: $--color-primary !default;
+$--radio-button-checked-color: $--color-white !default;
+$--radio-button-checked-border-color: $--color-primary !default;
+$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
+
+/* Select
+-------------------------- */
+$--select-border-color-hover: $--border-color-hover !default;
+$--select-disabled-border: $--disabled-border-base !default;
+$--select-font-size: $--font-size-base !default;
+$--select-close-hover-color: $--color-text-secondary !default;
+
+$--select-input-color: $--color-text-placeholder !default;
+$--select-multiple-input-color: #666 !default;
+$--select-input-focus-background: $--color-primary !default;
+$--select-input-font-size: 14px !default;
+
+$--select-option-color: $--color-text-regular !default;
+$--select-option-disabled-color: $--color-text-placeholder !default;
+$--select-option-disabled-background: $--color-white !default;
+$--select-option-height: 34px !default;
+$--select-option-hover-background: $--background-color-base !default;
+$--select-option-selected: $--color-primary !default;
+$--select-option-selected-hover: $--background-color-base !default;
+
+$--select-group-color: $--color-info !default;
+$--select-group-height: 30px !default;
+$--select-group-font-size: 12px !default;
+
+$--select-dropdown-background: $--color-white !default;
+$--select-dropdown-shadow: $--box-shadow-light !default;
+$--select-dropdown-empty-color: #999 !default;
+$--select-dropdown-max-height: 274px !default;
+$--select-dropdown-padding: 6px 0 !default;
+$--select-dropdown-empty-padding: 10px 0 !default;
+$--select-dropdown-border: solid 1px $--border-color-light !default;
+
+/* Alert
+-------------------------- */
+$--alert-padding: 8px 16px !default;
+$--alert-border-radius: $--border-radius-base !default;
+$--alert-title-font-size: 13px !default;
+$--alert-description-font-size: 12px !default;
+$--alert-close-font-size: 12px !default;
+$--alert-close-customed-font-size: 13px !default;
+
+$--alert-success-color: $--color-success-lighter !default;
+$--alert-info-color: $--color-info-lighter !default;
+$--alert-warning-color: $--color-warning-lighter !default;
+$--alert-danger-color: $--color-danger-lighter !default;
+
+$--alert-icon-size: 16px !default;
+$--alert-icon-large-size: 28px !default;
+
+/* Message Box
+-------------------------- */
+$--msgbox-width: 420px !default;
+$--msgbox-border-radius: 4px !default;
+$--msgbox-font-size: $--font-size-large !default;
+$--msgbox-content-font-size: $--font-size-base !default;
+$--msgbox-content-color: $--color-text-regular !default;
+$--msgbox-error-font-size: 12px !default;
+$--msgbox-padding-primary: 15px !default;
+
+$--msgbox-success-color: $--color-success !default;
+$--msgbox-info-color: $--color-info !default;
+$--msgbox-warning-color: $--color-warning !default;
+$--msgbox-danger-color: $--color-danger !default;
+
+/* Message
+-------------------------- */
+$--message-shadow: $--box-shadow-base !default;
+$--message-min-width: 380px !default;
+$--message-background-color: #edf2fc !default;
+$--message-padding: 15px 15px 15px 20px !default;
+$--message-content-color: $--color-text-regular !default;
+$--message-close-color: $--color-text-placeholder !default;
+$--message-close-size: 16px !default;
+$--message-close-hover-color: $--color-text-secondary !default;
+
+$--message-success-color: $--color-success !default;
+$--message-info-color: $--color-info !default;
+$--message-warning-color: $--color-warning !default;
+$--message-danger-color: $--color-danger !default;
+
+/* Notification
+-------------------------- */
+$--notification-width: 330px !default;
+$--notification-padding: 14px 26px 14px 13px !default;
+$--notification-radius: 8px !default;
+$--notification-shadow: $--box-shadow-light !default;
+$--notification-border-color: $--border-color-lighter !default;
+$--notification-icon-size: 24px !default;
+$--notification-close-font-size: $--message-close-size !default;
+$--notification-group-margin: 13px !default;
+$--notification-font-size: $--font-size-base !default;
+$--notification-color: $--color-text-regular !default;
+$--notification-title-font-size: 16px !default;
+$--notification-title-color: $--color-text-primary !default;
+
+$--notification-close-color: $--color-text-secondary !default;
+$--notification-close-hover-color: $--color-text-regular !default;
+
+$--notification-success-color: $--color-success !default;
+$--notification-info-color: $--color-info !default;
+$--notification-warning-color: $--color-warning !default;
+$--notification-danger-color: $--color-danger !default;
+
+/* Input
+-------------------------- */
+$--input-font-size: $--font-size-base !default;
+$--input-color: $--color-text-regular !default;
+$--input-width: 140px !default;
+$--input-height: 40px !default;
+$--input-border: $--border-base !default;
+$--input-border-color: $--border-color-base !default;
+$--input-border-radius: $--border-radius-base !default;
+$--input-border-color-hover: $--border-color-hover !default;
+$--input-fill: $--color-white !default;
+$--input-fill-disabled: $--disabled-fill-base !default;
+$--input-color-disabled: $--font-color-disabled-base !default;
+$--input-icon-color: $--color-text-placeholder !default;
+$--input-placeholder-color: $--color-text-placeholder !default;
+$--input-max-width: 314px !default;
+
+$--input-hover-border: $--border-color-hover !default;
+$--input-clear-hover-color: $--color-text-secondary !default;
+
+$--input-focus-border: $--color-primary !default;
+$--input-focus-fill: $--color-white !default;
+
+$--input-disabled-fill: $--disabled-fill-base !default;
+$--input-disabled-border: $--disabled-border-base !default;
+$--input-disabled-color: $--disabled-color-base !default;
+$--input-disabled-placeholder-color: $--color-text-placeholder !default;
+
+$--input-medium-font-size: 14px !default;
+$--input-medium-height: 36px !default;
+
+$--input-small-font-size: 13px !default;
+$--input-small-height: 32px !default;
+
+$--input-mini-font-size: 12px !default;
+$--input-mini-height: 28px !default;
+
+/* Cascader
+-------------------------- */
+$--cascader-menu-fill: $--fill-base !default;
+$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-radius: $--border-radius-base !default;
+$--cascader-menu-border: $--border-base !default;
+$--cascader-menu-border-color: $--border-color-base !default;
+$--cascader-menu-border-width: $--border-width-base !default;
+$--cascader-menu-color: $--color-text-regular !default;
+$--cascader-menu-option-color-active: $--color-text-secondary !default;
+$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
+$--cascader-menu-option-color-hover: $--color-text-regular !default;
+$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
+$--cascader-menu-option-color-disabled: #999 !default;
+$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
+$--cascader-menu-option-empty-color: #666 !default;
+$--cascader-menu-group-color: #999 !default;
+$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
+$--cascader-menu-option-pinyin-color: #999 !default;
+$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
+
+/* Group
+-------------------------- */
+$--group-option-flex: 0 0 (1/5) * 100% !default;
+$--group-option-offset-bottom: 12px !default;
+$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
+$--group-title-color: $--color-black !default;
+$--group-title-font-size: $--font-size-base !default;
+$--group-title-width: 66px !default;
+
+/* Tab
+-------------------------- */
+$--tab-font-size: $--font-size-base !default;
+$--tab-border-line: 1px solid #e4e4e4 !default;
+$--tab-header-color-active: $--color-text-secondary !default;
+$--tab-header-color-hover: $--color-text-regular !default;
+$--tab-header-color: $--color-text-regular !default;
+$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
+$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
+$--tab-vertical-header-width: 90px !default;
+$--tab-vertical-header-count-color: $--color-white !default;
+$--tab-vertical-header-count-fill: $--color-text-secondary !default;
+
+/* Button
+-------------------------- */
+$--button-font-size: 14px !default;
+$--button-font-weight: $--font-weight-primary !default;
+$--button-border-radius: $--border-radius-base !default;
+$--button-padding-vertical: 12px !default;
+$--button-padding-horizontal: 20px !default;
+
+$--button-medium-font-size: 14px !default;
+$--button-medium-border-radius: $--border-radius-base !default;
+$--button-medium-padding-vertical: 10px !default;
+$--button-medium-padding-horizontal: 20px !default;
+
+$--button-small-font-size: 12px !default;
+$--button-small-border-radius: #{$--border-radius-base - 1} !default;
+$--button-small-padding-vertical: 9px !default;
+$--button-small-padding-horizontal: 15px !default;
+
+$--button-mini-font-size: 12px !default;
+$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+$--button-mini-padding-vertical: 7px !default;
+$--button-mini-padding-horizontal: 15px !default;
+
+$--button-default-color: $--color-text-regular !default;
+$--button-default-fill: $--color-white !default;
+$--button-default-border: $--border-color-base !default;
+
+$--button-disabled-color: $--color-text-placeholder !default;
+$--button-disabled-fill: $--color-white !default;
+$--button-disabled-border: $--border-color-lighter !default;
+
+$--button-primary-border: $--color-primary !default;
+$--button-primary-color: $--color-white !default;
+$--button-primary-fill: $--color-primary !default;
+
+$--button-success-border: $--color-success !default;
+$--button-success-color: $--color-white !default;
+$--button-success-fill: $--color-success !default;
+
+$--button-warning-border: $--color-warning !default;
+$--button-warning-color: $--color-white !default;
+$--button-warning-fill: $--color-warning !default;
+
+$--button-danger-border: $--color-danger !default;
+$--button-danger-color: $--color-white !default;
+$--button-danger-fill: $--color-danger !default;
+
+$--button-info-border: $--color-info !default;
+$--button-info-color: $--color-white !default;
+$--button-info-fill: $--color-info !default;
+
+$--button-hover-tint-percent: 20% !default;
+$--button-active-shade-percent: 10% !default;
+
+
+/* cascader
+-------------------------- */
+$--cascader-height: 200px !default;
+
+/* Switch
+-------------------------- */
+$--switch-on-color: $--color-primary !default;
+$--switch-off-color: $--border-color-base !default;
+$--switch-disabled-color: $--border-color-lighter !default;
+$--switch-disabled-text-color: $--color-text-placeholder !default;
+
+$--switch-font-size: $--font-size-base !default;
+$--switch-core-border-radius: 10px !default;
+$--switch-width: 40px !default;
+$--switch-height: 20px !default;
+$--switch-button-size: 16px !default;
+
+/* Dialog
+-------------------------- */
+$--dialog-background-color: $--color-primary-light-4 !default;
+$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
+$--dialog-close-hover-color: $--color-primary !default;
+$--dialog-title-font-size: $--font-size-large !default;
+$--dialog-font-size: 14px !default;
+$--dialog-line-height: $--font-line-height-primary !default;
+$--dialog-padding-primary: 20px !default;
+
+/* Table
+-------------------------- */
+$--table-border-color: $--border-color-lighter !default;
+$--table-border: 1px solid $--table-border-color !default;
+$--table-text-color: $--color-text-regular !default;
+$--table-header-color: $--color-text-secondary !default;
+$--table-row-hover-background: $--background-color-base !default;
+$--table-current-row-background: $--color-primary-light-9 !default;
+$--table-header-background: $--color-white !default;
+$--table-footer-background: $--color-text-placeholder !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
+
+/* Pagination
+-------------------------- */
+$--pagination-font-size: 13px !default;
+$--pagination-fill: $--color-white !default;
+$--pagination-color: $--color-text-primary !default;
+$--pagination-border-radius: 3px !default;
+$--pagination-button-color: $--color-text-primary !default;
+$--pagination-button-width: 35.5px !default;
+$--pagination-button-height: 28px !default;
+$--pagination-button-disabled-color: $--color-text-placeholder !default;
+$--pagination-button-disabled-fill: $--color-white !default;
+$--pagination-hover-fill: $--color-primary !default;
+$--pagination-hover-color: $--color-white !default;
+
+/* Popover
+-------------------------- */
+$--popover-fill: $--color-white !default;
+$--popover-font-size: $--font-size-base !default;
+$--popover-border-color: $--border-color-lighter !default;
+$--popover-arrow-size: 6px !default;
+$--popover-padding: 12px !default;
+$--popover-padding-large: 18px 20px !default;
+$--popover-title-font-size: 16px !default;
+$--popover-title-color: $--color-text-primary !default;
+
+/* Tooltip
+-------------------------- */
+$--tooltip-fill: $--color-text-primary !default;
+$--tooltip-color: $--color-white !default;
+$--tooltip-font-size: 12px !default;
+$--tooltip-border-color: $--color-text-primary !default;
+$--tooltip-arrow-size: 6px !default;
+$--tooltip-padding: 10px !default;
+
+/* Tag
+-------------------------- */
+$--tag-padding: 0 10px !default;
+$--tag-fill: rgba($--color-primary, 0.10) !default;
+$--tag-color: $--color-primary !default;
+$--tag-border: rgba($--color-primary, 0.20) !default;
+$--tag-font-size: 12px !default;
+$--tag-border-radius: 4px !default;
+
+$--tag-info-fill: rgba($--color-info, 0.10) !default;
+$--tag-info-border: rgba($--color-info, 0.20) !default;
+$--tag-info-color: $--color-info !default;
+
+$--tag-primary-fill: rgba($--color-primary, 0.10) !default;
+$--tag-primary-border: rgba($--color-primary, 0.20) !default;
+$--tag-primary-color: $--color-primary !default;
+
+$--tag-success-fill: rgba($--color-success, 0.10) !default;
+$--tag-success-border: rgba($--color-success, 0.20) !default;
+$--tag-success-color: $--color-success !default;
+
+$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
+$--tag-warning-border: rgba($--color-warning, 0.20) !default;
+$--tag-warning-color: $--color-warning !default;
+
+$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
+$--tag-danger-border: rgba($--color-danger, 0.20) !default;
+$--tag-danger-color: $--color-danger !default;
+
+/* Tree
+-------------------------- */
+$--tree-node-hover-color: $--background-color-base !default;
+$--tree-text-color: $--color-text-regular !default;
+$--tree-expand-icon-color: $--color-text-placeholder !default;
+
+/* Dropdown
+-------------------------- */
+$--dropdown-menu-box-shadow: $--box-shadow-light !default;
+$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
+$--dropdown-menuItem-hover-color: $--link-color !default;
+
+/* Badge
+-------------------------- */
+$--badge-fill: $--color-danger !default;
+$--badge-radius: 10px !default;
+$--badge-font-size: 12px !default;
+$--badge-padding: 6px !default;
+$--badge-size: 18px !default;
+
+/* Card
+--------------------------*/
+$--card-border-color: $--border-color-lighter !default;
+$--card-border-radius: 4px !default;
+$--card-padding: 20px !default;
+
+/* Slider
+--------------------------*/
+$--slider-main-background-color: $--color-primary !default;
+$--slider-runway-background-color: $--border-color-light !default;
+$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
+$--slider-stop-background-color: $--color-white !default;
+$--slider-disable-color: $--color-text-placeholder !default;
+
+$--slider-margin: 16px 0 !default;
+$--slider-border-radius: 3px !default;
+$--slider-height: 6px !default;
+$--slider-button-size: 16px !default;
+$--slider-button-wrapper-size: 36px !default;
+$--slider-button-wrapper-offset: -15px !default;
+
+/* Steps
+--------------------------*/
+$--steps-border-color: $--disabled-border-base !default;
+$--steps-border-radius: 4px !default;
+$--steps-padding: 20px !default;
+
+/* Menu
+--------------------------*/
+$--menu-item-font-size: $--font-size-base !default;
+$--menu-item-color: $--color-text-primary !default;
+$--menu-item-fill: $--color-white !default;
+$--menu-item-hover-fill: $--color-primary-light-9 !default;
+
+/* Rate
+--------------------------*/
+$--rate-height: 20px !default;
+$--rate-font-size: $--font-size-base !default;
+$--rate-icon-size: 18px !default;
+$--rate-icon-margin: 6px !default;
+$--rate-icon-color: $--color-text-placeholder !default;
+
+/* DatePicker
+--------------------------*/
+$--datepicker-color: $--color-text-regular !default;
+$--datepicker-off-color: $--color-text-placeholder !default;
+$--datepicker-header-color: $--color-text-regular !default;
+$--datepicker-icon-color: $--color-text-primary !default;
+$--datepicker-border-color: $--disabled-border-base !default;
+$--datepicker-inner-border-color: #e4e4e4 !default;
+$--datepicker-inrange-color: $--border-color-extra-light !default;
+$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
+$--datepicker-active-color: $--color-primary !default;
+$--datepicker-text-hover-color: $--color-primary !default;
+$--datepicker-cell-hover-color: #fff !default;
+
+/* Loading
+--------------------------*/
+$--loading-spinner-size: 42px !default;
+$--loading-fullscreen-spinner-size: 50px !default;
+
+/* Scrollbar
+--------------------------*/
+$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
+$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
+
+/* Carousel
+--------------------------*/
+$--carousel-arrow-font-size: 12px !default;
+$--carousel-arrow-size: 36px !default;
+$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
+$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
+$--carousel-indicator-width: 30px !default;
+$--carousel-indicator-height: 2px !default;
+$--carousel-indicator-padding-horizontal: 4px !default;
+$--carousel-indicator-padding-vertical: 12px !default;
+$--carousel-indicator-out-color: $--border-color-hover !default;
+
+/* Collapse
+--------------------------*/
+$--collapse-border-color: $--border-color-lighter !default;
+$--collapse-header-height: 48px !default;
+$--collapse-header-padding: 20px !default;
+$--collapse-header-fill: $--color-white !default;
+$--collapse-header-color: $--color-text-primary !default;
+$--collapse-header-size: 13px !default;
+$--collapse-content-fill: $--color-white !default;
+$--collapse-content-size: 13px !default;
+$--collapse-content-color: $--color-text-primary !default;
+
+/* Transfer
+--------------------------*/
+$--transfer-border-color: $--border-color-lighter !default;
+$--transfer-border-radius: $--border-radius-base !default;
+$--transfer-panel-width: 200px !default;
+$--transfer-panel-header-height: 40px !default;
+$--transfer-panel-header-background: $--background-color-base !default;
+$--transfer-panel-footer-height: 40px !default;
+$--transfer-panel-body-height: 246px !default;
+$--transfer-item-height: 30px !default;
+$--transfer-item-hover-background: $--color-text-secondary !default;
+$--transfer-filter-height: 32px !default;
+
+/* Header
+  --------------------------*/
+$--header-padding: 0 20px !default;
+
+/* Footer
+--------------------------*/
+$--footer-padding: 0 20px !default;
+
+/* Main
+--------------------------*/
+$--main-padding: 20px !default;
+
+/* Break-point
+--------------------------*/
+$--sm: 768px !default;
+$--md: 992px !default;
+$--lg: 1200px !default;
+$--xl: 1920px !default;
+
+$--breakpoints: (
+  'xs' : (max-width: $--sm),
+  'sm' : (min-width: $--sm),
+  'md' : (min-width: $--md),
+  'lg' : (min-width: $--lg),
+  'xl' : (min-width: $--xl)
+);
+
+$--breakpoints-spec: (
+  'xs-only' : (max-width: $--sm - 1),
+  'sm-and-up' : (min-width: $--sm),
+  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
+  'sm-and-down': (max-width: $--md - 1),
+  'md-and-up' : (min-width: $--md),
+  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
+  'md-and-down': (max-width: $--lg - 1),
+  'lg-and-up' : (min-width: $--lg),
+  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
+  'lg-and-down': (max-width: $--xl - 1),
+  'xl-only' : (min-width: $--xl),
+);

src/element-ui/theme/alert.css

@@ -0,0 +1,111 @@
+.el-alert {
+    width: 100%;
+    padding: 8px 16px;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border-radius: 4px;
+    position: relative;
+    background-color: #fff;
+    overflow: hidden;
+    opacity: 1;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-transition: opacity .2s;
+    transition: opacity .2s
+}
+
+.el-alert.is-center {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center
+}
+
+.el-alert--success {
+    background-color: #f0f9eb;
+    color: #67c23a
+}
+
+.el-alert--success .el-alert__description {
+    color: #67c23a
+}
+
+.el-alert--info {
+    background-color: #f4f4f5;
+    color: #909399
+}
+
+.el-alert--info .el-alert__description {
+    color: #909399
+}
+
+.el-alert--warning {
+    background-color: #fdf6ec;
+    color: #e6a23c
+}
+
+.el-alert--warning .el-alert__description {
+    color: #e6a23c
+}
+
+.el-alert--error {
+    background-color: #fef0f0;
+    color: #f56c6c
+}
+
+.el-alert--error .el-alert__description {
+    color: #f56c6c
+}
+
+.el-alert__content {
+    display: table-cell;
+    padding: 0 8px
+}
+
+.el-alert__icon {
+    font-size: 16px;
+    width: 16px
+}
+
+.el-alert__icon.is-big {
+    font-size: 28px;
+    width: 28px
+}
+
+.el-alert__title {
+    font-size: 13px;
+    line-height: 18px
+}
+
+.el-alert__title.is-bold {
+    font-weight: 700
+}
+
+.el-alert .el-alert__description {
+    font-size: 12px;
+    margin: 5px 0 0
+}
+
+.el-alert__closebtn {
+    font-size: 12px;
+    color: #c0c4cc;
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer
+}
+
+.el-alert__closebtn.is-customed {
+    font-style: normal;
+    font-size: 13px;
+    top: 9px
+}
+
+.el-alert-fade-enter, .el-alert-fade-leave-active {
+    opacity: 0
+}

src/element-ui/theme/aside.css

@@ -0,0 +1,7 @@
+.el-aside {
+    overflow: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -ms-flex-negative: 0;
+    flex-shrink: 0
+}

src/element-ui/theme/autocomplete.css

@@ -0,0 +1,599 @@
+.el-textarea {
+    display: inline-block;
+    width: 100%;
+    vertical-align: bottom;
+    font-size: 14px
+}
+
+.el-textarea__inner {
+    display: block;
+    resize: vertical;
+    padding: 5px 15px;
+    line-height: 1.5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+    font-size: inherit;
+    color: #606266;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+    transition: border-color .2s cubic-bezier(.645, .045, .355, 1)
+}
+
+.el-textarea__inner::-webkit-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-textarea__inner:-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-textarea__inner::-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-textarea__inner::placeholder {
+    color: #c0c4cc
+}
+
+.el-textarea__inner:hover {
+    border-color: #c0c4cc
+}
+
+.el-textarea__inner:focus {
+    outline: 0;
+    border-color: #3E8EF7
+}
+
+.el-textarea.is-disabled .el-textarea__inner {
+    background-color: #f5f7fa;
+    border-color: #e4e7ed;
+    color: #c0c4cc;
+    cursor: not-allowed
+}
+
+.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-textarea.is-disabled .el-textarea__inner::placeholder {
+    color: #c0c4cc
+}
+
+.el-input {
+    position: relative;
+    font-size: 14px;
+    display: inline-block;
+    width: 100%
+}
+
+.el-input::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px
+}
+
+.el-input::-webkit-scrollbar:horizontal {
+    height: 6px
+}
+
+.el-input::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    width: 6px;
+    background: #b4bccc
+}
+
+.el-input::-webkit-scrollbar-corner {
+    background: #fff
+}
+
+.el-input::-webkit-scrollbar-track {
+    background: #fff
+}
+
+.el-input::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px
+}
+
+.el-input .el-input__clear {
+    color: #c0c4cc;
+    font-size: 14px;
+    line-height: 16px;
+    cursor: pointer;
+    -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1);
+    transition: color .2s cubic-bezier(.645, .045, .355, 1)
+}
+
+.el-input .el-input__clear:hover {
+    color: #909399
+}
+
+.el-input__inner {
+    -webkit-appearance: none;
+    background-color: #fff;
+    background-image: none;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    font-size: inherit;
+    height: 40px;
+    line-height: 40px;
+    outline: 0;
+    padding: 0 15px;
+    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+    width: 100%
+}
+
+.el-input__prefix, .el-input__suffix {
+    position: absolute;
+    top: 0;
+    -webkit-transition: all .3s;
+    height: 100%;
+    color: #c0c4cc;
+    text-align: center
+}
+
+.el-input__inner::-webkit-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-input__inner:-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-input__inner::-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-input__inner::placeholder {
+    color: #c0c4cc
+}
+
+.el-input__inner:hover {
+    border-color: #c0c4cc
+}
+
+.el-input.is-active .el-input__inner, .el-input__inner:focus {
+    border-color: #3E8EF7;
+    outline: 0
+}
+
+.el-input__suffix {
+    right: 5px;
+    transition: all .3s;
+    pointer-events: none
+}
+
+.el-input__suffix-inner {
+    pointer-events: all
+}
+
+.el-input__prefix {
+    left: 5px;
+    transition: all .3s
+}
+
+.el-input__icon {
+    height: 100%;
+    width: 25px;
+    text-align: center;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+    line-height: 40px
+}
+
+.el-input__icon:after {
+    content: '';
+    height: 100%;
+    width: 0;
+    display: inline-block;
+    vertical-align: middle
+}
+
+.el-input__validateIcon {
+    pointer-events: none
+}
+
+.el-input.is-disabled .el-input__inner {
+    background-color: #f5f7fa;
+    border-color: #e4e7ed;
+    color: #c0c4cc;
+    cursor: not-allowed
+}
+
+.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-input.is-disabled .el-input__inner:-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
+    color: #c0c4cc
+}
+
+.el-input.is-disabled .el-input__inner::placeholder {
+    color: #c0c4cc
+}
+
+.el-input.is-disabled .el-input__icon {
+    cursor: not-allowed
+}
+
+.el-input--suffix .el-input__inner {
+    padding-right: 30px
+}
+
+.el-input--prefix .el-input__inner {
+    padding-left: 30px
+}
+
+.el-input--medium {
+    font-size: 14px
+}
+
+.el-input--medium .el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-input--medium .el-input__icon {
+    line-height: 36px
+}
+
+.el-input--small {
+    font-size: 13px
+}
+
+.el-input--small .el-input__inner {
+    height: 32px;
+    line-height: 32px
+}
+
+.el-input--small .el-input__icon {
+    line-height: 32px
+}
+
+.el-input--mini {
+    font-size: 12px
+}
+
+.el-input--mini .el-input__inner {
+    height: 28px;
+    line-height: 28px
+}
+
+.el-input--mini .el-input__icon {
+    line-height: 28px
+}
+
+.el-input-group {
+    line-height: normal;
+    display: inline-table;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0
+}
+
+.el-input-group > .el-input__inner {
+    vertical-align: middle;
+    display: table-cell
+}
+
+.el-input-group__append, .el-input-group__prepend {
+    background-color: #f5f7fa;
+    color: #909399;
+    vertical-align: middle;
+    display: table-cell;
+    position: relative;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 0 20px;
+    width: 1px;
+    white-space: nowrap
+}
+
+.el-input-group--prepend .el-input__inner, .el-input-group__append {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.el-input-group--append .el-input__inner, .el-input-group__prepend {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.el-input-group__append:focus, .el-input-group__prepend:focus {
+    outline: 0
+}
+
+.el-input-group__append .el-button, .el-input-group__append .el-select, .el-input-group__prepend .el-button, .el-input-group__prepend .el-select {
+    display: inline-block;
+    margin: -10px -20px
+}
+
+.el-input-group__append button.el-button, .el-input-group__append div.el-select .el-input__inner, .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, .el-input-group__prepend div.el-select .el-input__inner, .el-input-group__prepend div.el-select:hover .el-input__inner {
+    border-color: transparent;
+    background-color: transparent;
+    color: inherit;
+    border-top: 0;
+    border-bottom: 0
+}
+
+.el-input-group__append .el-button, .el-input-group__append .el-input, .el-input-group__prepend .el-button, .el-input-group__prepend .el-input {
+    font-size: inherit
+}
+
+.el-input-group__prepend {
+    border-right: 0
+}
+
+.el-input-group__append {
+    border-left: 0
+}
+
+.el-input-group--append .el-select .el-input.is-focus .el-input__inner, .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
+    border-color: transparent
+}
+
+.el-input__inner::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0
+}
+
+.el-scrollbar {
+    overflow: hidden;
+    position: relative
+}
+
+.el-scrollbar:active > .el-scrollbar__bar, .el-scrollbar:focus > .el-scrollbar__bar, .el-scrollbar:hover > .el-scrollbar__bar {
+    opacity: 1;
+    -webkit-transition: opacity 340ms ease-out;
+    transition: opacity 340ms ease-out
+}
+
+.el-scrollbar__wrap {
+    overflow: scroll;
+    height: 100%
+}
+
+.el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
+    width: 0;
+    height: 0
+}
+
+.el-scrollbar__thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: rgba(144, 147, 153, .3);
+    -webkit-transition: .3s background-color;
+    transition: .3s background-color
+}
+
+.el-scrollbar__thumb:hover {
+    background-color: rgba(144, 147, 153, .5)
+}
+
+.el-scrollbar__bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+    opacity: 0;
+    -webkit-transition: opacity 120ms ease-out;
+    transition: opacity 120ms ease-out
+}
+
+.el-scrollbar__bar.is-vertical {
+    width: 6px;
+    top: 2px
+}
+
+.el-scrollbar__bar.is-vertical > div {
+    width: 100%
+}
+
+.el-scrollbar__bar.is-horizontal {
+    height: 6px;
+    left: 2px
+}
+
+.el-scrollbar__bar.is-horizontal > div {
+    height: 100%
+}
+
+.el-popper .popper__arrow, .el-popper .popper__arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid
+}
+
+.el-popper .popper__arrow {
+    border-width: 6px;
+    -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03))
+}
+
+.el-popper .popper__arrow::after {
+    content: " ";
+    border-width: 6px
+}
+
+.el-popper[x-placement^=top] {
+    margin-bottom: 12px
+}
+
+.el-popper[x-placement^=top] .popper__arrow {
+    bottom: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-color: #ebeef5;
+    border-bottom-width: 0
+}
+
+.el-popper[x-placement^=top] .popper__arrow::after {
+    bottom: 1px;
+    margin-left: -6px;
+    border-top-color: #fff;
+    border-bottom-width: 0
+}
+
+.el-popper[x-placement^=bottom] {
+    margin-top: 12px
+}
+
+.el-popper[x-placement^=bottom] .popper__arrow {
+    top: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-width: 0;
+    border-bottom-color: #ebeef5
+}
+
+.el-popper[x-placement^=bottom] .popper__arrow::after {
+    top: 1px;
+    margin-left: -6px;
+    border-top-width: 0;
+    border-bottom-color: #fff
+}
+
+.el-popper[x-placement^=right] {
+    margin-left: 12px
+}
+
+.el-popper[x-placement^=right] .popper__arrow {
+    top: 50%;
+    left: -6px;
+    margin-bottom: 3px;
+    border-right-color: #ebeef5;
+    border-left-width: 0
+}
+
+.el-popper[x-placement^=right] .popper__arrow::after {
+    bottom: -6px;
+    left: 1px;
+    border-right-color: #fff;
+    border-left-width: 0
+}
+
+.el-popper[x-placement^=left] {
+    margin-right: 12px
+}
+
+.el-popper[x-placement^=left] .popper__arrow {
+    top: 50%;
+    right: -6px;
+    margin-bottom: 3px;
+    border-right-width: 0;
+    border-left-color: #ebeef5
+}
+
+.el-popper[x-placement^=left] .popper__arrow::after {
+    right: 1px;
+    bottom: -6px;
+    margin-left: -6px;
+    border-right-width: 0;
+    border-left-color: #fff
+}
+
+.el-autocomplete {
+    position: relative;
+    display: inline-block
+}
+
+.el-autocomplete-suggestion {
+    margin: 5px 0;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    border-radius: 4px
+}
+
+.el-autocomplete-suggestion__wrap {
+    max-height: 280px;
+    padding: 10px 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: auto;
+    background-color: #fff;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px
+}
+
+.el-autocomplete-suggestion__list {
+    margin: 0;
+    padding: 0
+}
+
+.el-autocomplete-suggestion li {
+    padding: 0 20px;
+    margin: 0;
+    line-height: 34px;
+    cursor: pointer;
+    color: #606266;
+    font-size: 14px;
+    list-style: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+
+.el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover {
+    background-color: #f5f7fa
+}
+
+.el-autocomplete-suggestion li.divider {
+    margin-top: 6px;
+    border-top: 1px solid #000
+}
+
+.el-autocomplete-suggestion li.divider:last-child {
+    margin-bottom: -6px
+}
+
+.el-autocomplete-suggestion.is-loading li {
+    text-align: center;
+    height: 100px;
+    line-height: 100px;
+    font-size: 20px;
+    color: #999
+}
+
+.el-autocomplete-suggestion.is-loading li::after {
+    display: inline-block;
+    content: "";
+    height: 100%;
+    vertical-align: middle
+}
+
+.el-autocomplete-suggestion.is-loading li:hover {
+    background-color: #fff
+}
+
+.el-autocomplete-suggestion.is-loading .el-icon-loading {
+    vertical-align: middle
+}