新建项目，基本框架搭好 2020年7月16日20:12:24

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.env.development

@@ -0,0 +1,3 @@
+# 本地开发模式
+# 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
+VUE_APP_TITLE=vue-module

.env.production

@@ -0,0 +1,3 @@
+# 生产模式
+# 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
+VUE_APP_TITLE=vue-module

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

.gitignore

@@ -0,0 +1,20 @@
+.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
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/cc.code-snippets

@@ -0,0 +1,17 @@
+{
+	// Place your huimv.cloud.client 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	"Print to console": {
+		"scope": "javascript,typescript",
+		"prefix": "cc",
+		"body": [
+			"console.log($1)",
+		],
+		"description": "Log output to console"
+	}
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "prettier.semi": false,
+  "prettier.singleQuote": true
+}

README.md

@@ -0,0 +1,3 @@
+# vue-module
+
+适用于[vue-module-loader](https://github.com/mqhe2007/vue-module-loader)的微前端模块工程

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

element-variables.scss

@@ -0,0 +1,995 @@
+/* Element Chalk Variables */
+
+// Special comment for theme configurator
+// type|skipAutoTranslation|Category|Order
+// skipAutoTranslation 1
+
+/* 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;
+
+/* Color
+-------------------------- */
+/// color|1|Brand Color|0
+// $--color-primary: #409EFF !default;
+$--color-primary: #029B62 !default;
+/// color|1|Background Color|4
+$--color-white: #FFFFFF !default;
+/// color|1|Background Color|4
+$--color-black: #000000 !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|1|Functional Color|1
+$--color-success: #67C23A !default;
+/// color|1|Functional Color|1
+$--color-warning: #E6A23C !default;
+/// color|1|Functional Color|1
+$--color-danger: #F56C6C !default;
+/// color|1|Functional Color|1
+$--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|1|Font Color|2
+$--color-text-primary: #303133 !default;
+/// color|1|Font Color|2
+$--color-text-regular: #606266 !default;
+/// color|1|Font Color|2
+$--color-text-secondary: #909399 !default;
+/// color|1|Font Color|2
+$--color-text-placeholder: #C0C4CC !default;
+/// color|1|Border Color|3
+$--border-color-base: #DCDFE6 !default;
+/// color|1|Border Color|3
+$--border-color-light: #E4E7ED !default;
+/// color|1|Border Color|3
+$--border-color-lighter: #EBEEF5 !default;
+/// color|1|Border Color|3
+$--border-color-extra-light: #F2F6FC !default;
+
+// Background
+/// color|1|Background Color|4
+$--background-color-base: #F5F7FA !default;
+
+/* Link
+-------------------------- */
+$--link-color: $--color-primary-light-2 !default;
+$--link-hover-color: $--color-primary !default;
+
+/* Border
+-------------------------- */
+$--border-width-base: 1px !default;
+$--border-style-base: solid !default;
+$--border-color-hover: $--color-text-placeholder !default;
+$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
+/// borderRadius|1|Radius|0
+$--border-radius-base: 4px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-small: 2px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-circle: 100% !default;
+/// borderRadius|1|Radius|0
+$--border-radius-zero: 0 !default;
+
+// Box-shadow
+/// boxShadow|1|Shadow|1
+$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+// boxShadow|1|Shadow|1
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+/// boxShadow|1|Shadow|1
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
+
+/* Fill
+-------------------------- */
+$--fill-base: $--color-white !default;
+
+/* Typography
+-------------------------- */
+$--font-path: 'fonts' !default;
+$--font-display: 'auto' !default;
+/// fontSize|1|Font Size|0
+$--font-size-extra-large: 20px !default;
+/// fontSize|1|Font Size|0
+$--font-size-large: 18px !default;
+/// fontSize|1|Font Size|0
+$--font-size-medium: 16px !default;
+/// fontSize|1|Font Size|0
+$--font-size-base: 14px !default;
+/// fontSize|1|Font Size|0
+$--font-size-small: 13px !default;
+/// fontSize|1|Font Size|0
+$--font-size-extra-small: 12px !default;
+/// fontWeight|1|Font Weight|1
+$--font-weight-primary: 500 !default;
+/// fontWeight|1|Font Weight|1
+$--font-weight-secondary: 100 !default;
+/// fontLineHeight|1|Line Height|2
+$--font-line-height-primary: 24px !default;
+/// fontLineHeight|1|Line Height|2
+$--font-line-height-secondary: 16px !default;
+$--font-color-disabled-base: #bbb !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
+-------------------------- */
+/// fontSize||Font|1
+$--checkbox-font-size: 14px !default;
+/// fontWeight||Font|1
+$--checkbox-font-weight: $--font-weight-primary !default;
+/// color||Color|0
+$--checkbox-font-color: $--color-text-regular !default;
+$--checkbox-input-height: 14px !default;
+$--checkbox-input-width: 14px !default;
+/// borderRadius||Border|2
+$--checkbox-border-radius: $--border-radius-small !default;
+/// color||Color|0
+$--checkbox-background-color: $--color-white !default;
+$--checkbox-input-border: $--border-base !default;
+
+/// color||Color|0
+$--checkbox-disabled-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;
+
+/// color||Color|0
+$--checkbox-checked-font-color: $--color-primary !default;
+$--checkbox-checked-input-border-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-background-color: $--color-primary !default;
+$--checkbox-checked-icon-color: $--fill-base !default;
+
+$--checkbox-input-border-color-hover: $--color-primary !default;
+/// height||Other|4
+$--checkbox-bordered-height: 40px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
+$--checkbox-bordered-medium-input-height: 14px !default;
+$--checkbox-bordered-medium-input-width: 14px !default;
+/// height||Other|4
+$--checkbox-bordered-medium-height: 36px !default;
+$--checkbox-bordered-small-input-height: 12px !default;
+$--checkbox-bordered-small-input-width: 12px !default;
+/// height||Other|4
+$--checkbox-bordered-small-height: 32px !default;
+$--checkbox-bordered-mini-input-height: 12px !default;
+$--checkbox-bordered-mini-input-width: 12px !default;
+/// height||Other|4
+$--checkbox-bordered-mini-height: 28px !default;
+
+/// color||Color|0
+$--checkbox-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-button-checked-font-color: $--color-white !default;
+/// color||Color|0
+$--checkbox-button-checked-border-color: $--color-primary !default;
+
+
+
+/* Radio
+-------------------------- */
+/// fontSize||Font|1
+$--radio-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
+$--radio-font-weight: $--font-weight-primary !default;
+/// color||Color|0
+$--radio-font-color: $--color-text-regular !default;
+$--radio-input-height: 14px !default;
+$--radio-input-width: 14px !default;
+/// borderRadius||Border|2
+$--radio-input-border-radius: $--border-radius-circle !default;
+/// color||Color|0
+$--radio-input-background-color: $--color-white !default;
+$--radio-input-border: $--border-base !default;
+/// color||Color|0
+$--radio-input-border-color: $--border-color-base !default;
+/// color||Color|0
+$--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;
+
+/// color||Color|0
+$--radio-checked-font-color: $--color-primary !default;
+/// color||Color|0
+$--radio-checked-input-border-color: $--color-primary !default;
+/// color||Color|0
+$--radio-checked-input-background-color: $--color-white !default;
+/// color||Color|0
+$--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;
+
+/// fontSize||Font|1
+$--radio-button-font-size: $--font-size-base !default;
+/// color||Color|0
+$--radio-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--radio-button-checked-font-color: $--color-white !default;
+/// color||Color|0
+$--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;
+/// fontSize||Font|1
+$--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;
+/// color||Color|0
+$--select-input-focus-border-color: $--color-primary !default;
+/// fontSize||Font|1
+$--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;
+/// height||Other|4
+$--select-option-height: 34px !default;
+$--select-option-hover-background: $--background-color-base !default;
+/// color||Color|0
+$--select-option-selected-font-color: $--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;
+/// height||Other|4
+$--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;
+/// borderRadius||Border|2
+$--alert-border-radius: $--border-radius-base !default;
+/// fontSize||Font|1
+$--alert-title-font-size: 13px !default;
+/// fontSize||Font|1
+$--alert-description-font-size: 12px !default;
+/// fontSize||Font|1
+$--alert-close-font-size: 12px !default;
+/// fontSize||Font|1
+$--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;
+
+/// height||Other|4
+$--alert-icon-size: 16px !default;
+/// height||Other|4
+$--alert-icon-large-size: 28px !default;
+
+/* MessageBox
+-------------------------- */
+/// color||Color|0
+$--messagebox-title-color: $--color-text-primary !default;
+$--msgbox-width: 420px !default;
+$--msgbox-border-radius: 4px !default;
+/// fontSize||Font|1
+$--messagebox-font-size: $--font-size-large !default;
+/// fontSize||Font|1
+$--messagebox-content-font-size: $--font-size-base !default;
+/// color||Color|0
+$--messagebox-content-color: $--color-text-regular !default;
+/// fontSize||Font|1
+$--messagebox-error-font-size: 12px !default;
+$--msgbox-padding-primary: 15px !default;
+/// color||Color|0
+$--messagebox-success-color: $--color-success !default;
+/// color||Color|0
+$--messagebox-info-color: $--color-info !default;
+/// color||Color|0
+$--messagebox-warning-color: $--color-warning !default;
+/// color||Color|0
+$--messagebox-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;
+/// color||Color|0
+$--message-close-icon-color: $--color-text-placeholder !default;
+/// height||Other|4
+$--message-close-size: 16px !default;
+/// color||Color|0
+$--message-close-hover-color: $--color-text-secondary !default;
+
+/// color||Color|0
+$--message-success-font-color: $--color-success !default;
+/// color||Color|0
+$--message-info-font-color: $--color-info !default;
+/// color||Color|0
+$--message-warning-font-color: $--color-warning !default;
+/// color||Color|0
+$--message-danger-font-color: $--color-danger !default;
+
+/* Notification
+-------------------------- */
+$--notification-width: 330px !default;
+/// padding||Spacing|3
+$--notification-padding: 14px 26px 14px 13px !default;
+$--notification-radius: 8px !default;
+$--notification-shadow: $--box-shadow-light !default;
+/// color||Color|0
+$--notification-border-color: $--border-color-lighter !default;
+$--notification-icon-size: 24px !default;
+$--notification-close-font-size: $--message-close-size !default;
+$--notification-group-margin-left: 13px !default;
+$--notification-group-margin-right: 8px !default;
+/// fontSize||Font|1
+$--notification-content-font-size: $--font-size-base !default;
+/// color||Color|0
+$--notification-content-color: $--color-text-regular !default;
+/// fontSize||Font|1
+$--notification-title-font-size: 16px !default;
+/// color||Color|0
+$--notification-title-color: $--color-text-primary !default;
+
+/// color||Color|0
+$--notification-close-color: $--color-text-secondary !default;
+/// color||Color|0
+$--notification-close-hover-color: $--color-text-regular !default;
+
+/// color||Color|0
+$--notification-success-icon-color: $--color-success !default;
+/// color||Color|0
+$--notification-info-icon-color: $--color-info !default;
+/// color||Color|0
+$--notification-warning-icon-color: $--color-warning !default;
+/// color||Color|0
+$--notification-danger-icon-color: $--color-danger !default;
+
+/* Input
+-------------------------- */
+$--input-font-size: $--font-size-base !default;
+/// color||Color|0
+$--input-font-color: $--color-text-regular !default;
+/// height||Other|4
+$--input-width: 140px !default;
+/// height||Other|4
+$--input-height: 40px !default;
+$--input-border: $--border-base !default;
+$--input-border-color: $--border-color-base !default;
+/// borderRadius||Border|2
+$--input-border-radius: $--border-radius-base !default;
+$--input-border-color-hover: $--border-color-hover !default;
+/// color||Color|0
+$--input-background-color: $--color-white !default;
+$--input-fill-disabled: $--disabled-fill-base !default;
+$--input-color-disabled: $--font-color-disabled-base !default;
+/// color||Color|0
+$--input-icon-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--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;
+
+/// fontSize||Font|1
+$--input-medium-font-size: 14px !default;
+/// height||Other|4
+$--input-medium-height: 36px !default;
+/// fontSize||Font|1
+$--input-small-font-size: 13px !default;
+/// height||Other|4
+$--input-small-height: 32px !default;
+/// fontSize||Font|1
+$--input-mini-font-size: 12px !default;
+/// height||Other|4
+$--input-mini-height: 28px !default;
+
+/* Cascader
+-------------------------- */
+/// color||Color|0
+$--cascader-menu-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--cascader-menu-selected-font-color: $--color-primary !default;
+$--cascader-menu-fill: $--fill-base !default;
+$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-radius: $--border-radius-base !default;
+$--cascader-menu-border: solid 1px $--border-color-light !default;
+$--cascader-menu-shadow: $--box-shadow-light !default;
+$--cascader-node-background-hover: $--background-color-base !default;
+$--cascader-node-color-disabled:$--color-text-placeholder !default;
+$--cascader-color-empty:$--color-text-placeholder !default;
+$--cascader-tag-background: #f0f2f5;
+
+/* 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
+-------------------------- */
+/// fontSize||Font|1
+$--button-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
+$--button-font-weight: $--font-weight-primary !default;
+/// borderRadius||Border|2
+$--button-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
+$--button-padding-vertical: 12px !default;
+/// padding||Spacing|3
+$--button-padding-horizontal: 20px !default;
+
+/// fontSize||Font|1
+$--button-medium-font-size: $--font-size-base !default;
+/// borderRadius||Border|2
+$--button-medium-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
+$--button-medium-padding-vertical: 10px !default;
+/// padding||Spacing|3
+$--button-medium-padding-horizontal: 20px !default;
+
+/// fontSize||Font|1
+$--button-small-font-size: 12px !default;
+$--button-small-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
+$--button-small-padding-vertical: 9px !default;
+/// padding||Spacing|3
+$--button-small-padding-horizontal: 15px !default;
+/// fontSize||Font|1
+$--button-mini-font-size: 12px !default;
+$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
+$--button-mini-padding-vertical: 7px !default;
+/// padding||Spacing|3
+$--button-mini-padding-horizontal: 15px !default;
+
+/// color||Color|0
+$--button-default-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--button-default-background-color: $--color-white !default;
+/// color||Color|0
+$--button-default-border-color: $--border-color-base !default;
+
+/// color||Color|0
+$--button-disabled-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--button-disabled-background-color: $--color-white !default;
+/// color||Color|0
+$--button-disabled-border-color: $--border-color-lighter !default;
+
+/// color||Color|0
+$--button-primary-border-color: $--color-primary !default;
+/// color||Color|0
+$--button-primary-font-color: $--color-white !default;
+/// color||Color|0
+$--button-primary-background-color: $--color-primary !default;
+/// color||Color|0
+$--button-success-border-color: $--color-success !default;
+/// color||Color|0
+$--button-success-font-color: $--color-white !default;
+/// color||Color|0
+$--button-success-background-color: $--color-success !default;
+/// color||Color|0
+$--button-warning-border-color: $--color-warning !default;
+/// color||Color|0
+$--button-warning-font-color: $--color-white !default;
+/// color||Color|0
+$--button-warning-background-color: $--color-warning !default;
+/// color||Color|0
+$--button-danger-border-color: $--color-danger !default;
+/// color||Color|0
+$--button-danger-font-color: $--color-white !default;
+/// color||Color|0
+$--button-danger-background-color: $--color-danger !default;
+/// color||Color|0
+$--button-info-border-color: $--color-info !default;
+/// color||Color|0
+$--button-info-font-color: $--color-white !default;
+/// color||Color|0
+$--button-info-background-color: $--color-info !default;
+
+$--button-hover-tint-percent: 20% !default;
+$--button-active-shade-percent: 10% !default;
+
+
+/* cascader
+-------------------------- */
+$--cascader-height: 200px !default;
+
+/* Switch
+-------------------------- */
+/// color||Color|0
+$--switch-on-color: $--color-primary !default;
+/// color||Color|0
+$--switch-off-color: $--border-color-base !default;
+/// fontSize||Font|1
+$--switch-font-size: $--font-size-base !default;
+$--switch-core-border-radius: 10px !default;
+// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
+$--switch-width: 40px !default;
+// height||Other|4
+$--switch-height: 20px !default;
+// height||Other|4
+$--switch-button-size: 16px !default;
+
+/* Dialog
+-------------------------- */
+$--dialog-background-color: $--color-white !default;
+$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
+/// fontSize||Font|1
+$--dialog-title-font-size: $--font-size-large !default;
+/// fontSize||Font|1
+$--dialog-content-font-size: 14px !default;
+/// fontLineHeight||LineHeight|2
+$--dialog-font-line-height: $--font-line-height-primary !default;
+/// padding||Spacing|3
+$--dialog-padding-primary: 20px !default;
+
+/* Table
+-------------------------- */
+/// color||Color|0
+$--table-border-color: $--border-color-lighter !default;
+$--table-border: 1px solid $--table-border-color !default;
+/// color||Color|0
+$--table-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--table-header-font-color: $--color-text-secondary !default;
+/// color||Color|0
+$--table-row-hover-background-color: $--background-color-base !default;
+$--table-current-row-background-color: $--color-primary-light-9 !default;
+/// color||Color|0
+$--table-header-background-color: $--color-white !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
+
+/* Pagination
+-------------------------- */
+/// fontSize||Font|1
+$--pagination-font-size: 13px !default;
+/// color||Color|0
+$--pagination-background-color: $--color-white !default;
+/// color||Color|0
+$--pagination-font-color: $--color-text-primary !default;
+$--pagination-border-radius: 3px !default;
+/// color||Color|0
+$--pagination-button-color: $--color-text-primary !default;
+/// height||Other|4
+$--pagination-button-width: 35.5px !default;
+/// height||Other|4
+$--pagination-button-height: 28px !default;
+/// color||Color|0
+$--pagination-button-disabled-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--pagination-button-disabled-background-color: $--color-white !default;
+/// color||Color|0
+$--pagination-hover-color: $--color-primary !default;
+
+/* Popup
+-------------------------- */
+/// color||Color|0
+$--popup-modal-background-color: $--color-black !default;
+/// opacity||Other|1
+$--popup-modal-opacity: 0.5 !default;
+
+/* Popover
+-------------------------- */
+/// color||Color|0
+$--popover-background-color: $--color-white !default;
+/// fontSize||Font|1
+$--popover-font-size: $--font-size-base !default;
+/// color||Color|0
+$--popover-border-color: $--border-color-lighter !default;
+$--popover-arrow-size: 6px !default;
+/// padding||Spacing|3
+$--popover-padding: 12px !default;
+$--popover-padding-large: 18px 20px !default;
+/// fontSize||Font|1
+$--popover-title-font-size: 16px !default;
+/// color||Color|0
+$--popover-title-font-color: $--color-text-primary !default;
+
+/* Tooltip
+-------------------------- */
+/// color|1|Color|0
+$--tooltip-fill: $--color-text-primary !default;
+/// color|1|Color|0
+$--tooltip-color: $--color-white !default;
+/// fontSize||Font|1
+$--tooltip-font-size: 12px !default;
+/// color||Color|0
+$--tooltip-border-color: $--color-text-primary !default;
+$--tooltip-arrow-size: 6px !default;
+/// padding||Spacing|3
+$--tooltip-padding: 10px !default;
+
+/* Tag
+-------------------------- */
+/// color||Color|0
+$--tag-info-color: $--color-info !default;
+/// color||Color|0
+$--tag-primary-color: $--color-primary !default;
+/// color||Color|0
+$--tag-success-color: $--color-success !default;
+/// color||Color|0
+$--tag-warning-color: $--color-warning !default;
+/// color||Color|0
+$--tag-danger-color: $--color-danger !default;
+/// fontSize||Font|1
+$--tag-font-size: 12px !default;
+$--tag-border-radius: 4px !default;
+$--tag-padding: 0 10px !default;
+
+/* Tree
+-------------------------- */
+/// color||Color|0
+$--tree-node-hover-background-color: $--background-color-base !default;
+/// color||Color|0
+$--tree-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--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
+-------------------------- */
+/// color||Color|0
+$--badge-background-color: $--color-danger !default;
+$--badge-radius: 10px !default;
+/// fontSize||Font|1
+$--badge-font-size: 12px !default;
+/// padding||Spacing|3
+$--badge-padding: 6px !default;
+/// height||Other|4
+$--badge-size: 18px !default;
+
+/* Card
+--------------------------*/
+/// color||Color|0
+$--card-border-color: $--border-color-lighter !default;
+$--card-border-radius: 4px !default;
+/// padding||Spacing|3
+$--card-padding: 20px !default;
+
+/* Slider
+--------------------------*/
+/// color||Color|0
+$--slider-main-background-color: $--color-primary !default;
+/// color||Color|0
+$--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;
+/// height|1|Other|4
+$--slider-height: 6px !default;
+/// height||Other|4
+$--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
+--------------------------*/
+/// fontSize||Font|1
+$--menu-item-font-size: $--font-size-base !default;
+/// color||Color|0
+$--menu-item-font-color: $--color-text-primary !default;
+/// color||Color|0
+$--menu-background-color: $--color-white !default;
+$--menu-item-hover-fill: $--color-primary-light-9 !default;
+
+/* Rate
+--------------------------*/
+$--rate-height: 20px !default;
+/// fontSize||Font|1
+$--rate-font-size: $--font-size-base !default;
+/// height||Other|3
+$--rate-icon-size: 18px !default;
+/// margin||Spacing|2
+$--rate-icon-margin: 6px !default;
+$--rate-icon-color: $--color-text-placeholder !default;
+
+/* DatePicker
+--------------------------*/
+$--datepicker-font-color: $--color-text-regular !default;
+/// color|1|Color|0
+$--datepicker-off-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--datepicker-header-font-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;
+/// color||Color|0
+$--datepicker-inrange-background-color: $--border-color-extra-light !default;
+/// color||Color|0
+$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
+/// color||Color|0
+$--datepicker-active-color: $--color-primary !default;
+/// color||Color|0
+$--datepicker-hover-font-color: $--color-primary !default;
+$--datepicker-cell-hover-color: #fff !default;
+
+/* Loading
+--------------------------*/
+/// height||Other|4
+$--loading-spinner-size: 42px !default;
+/// height||Other|4
+$--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
+--------------------------*/
+/// fontSize||Font|1
+$--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;
+/// width||Other|4
+$--carousel-indicator-width: 30px !default;
+/// height||Other|4
+$--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
+--------------------------*/
+/// color||Color|0
+$--collapse-border-color: $--border-color-lighter !default;
+/// height||Other|4
+$--collapse-header-height: 48px !default;
+/// color||Color|0
+$--collapse-header-background-color: $--color-white !default;
+/// color||Color|0
+$--collapse-header-font-color: $--color-text-primary !default;
+/// fontSize||Font|1
+$--collapse-header-font-size: 13px !default;
+/// color||Color|0
+$--collapse-content-background-color: $--color-white !default;
+/// fontSize||Font|1
+$--collapse-content-font-size: 13px !default;
+/// color||Color|0
+$--collapse-content-font-color: $--color-text-primary !default;
+
+/* Transfer
+--------------------------*/
+$--transfer-border-color: $--border-color-lighter !default;
+$--transfer-border-radius: $--border-radius-base !default;
+/// height||Other|4
+$--transfer-panel-width: 200px !default;
+/// height||Other|4
+$--transfer-panel-header-height: 40px !default;
+/// color||Color|0
+$--transfer-panel-header-background-color: $--background-color-base !default;
+/// height||Other|4
+$--transfer-panel-footer-height: 40px !default;
+/// height||Other|4
+$--transfer-panel-body-height: 246px !default;
+/// height||Other|4
+$--transfer-item-height: 30px !default;
+/// height||Other|4
+$--transfer-filter-height: 32px !default;
+
+/* Header
+  --------------------------*/
+$--header-padding: 0 20px !default;
+
+/* Footer
+--------------------------*/
+$--footer-padding: 0 20px !default;
+
+/* Main
+--------------------------*/
+$--main-padding: 20px !default;
+
+/* Timeline
+--------------------------*/
+$--timeline-node-size-normal: 12px !default;
+$--timeline-node-size-large: 14px !default;
+$--timeline-node-color: $--border-color-light !default;
+
+/* Backtop
+--------------------------*/
+/// color||Color|0
+$--backtop-background-color: $--color-white !default;
+/// color||Color|0
+$--backtop-font-color: $--color-primary !default;
+/// color||Color|0
+$--backtop-hover-background-color: $--border-color-extra-light !default;
+
+/* Link
+--------------------------*/
+/// fontSize||Font|1
+$--link-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
+$--link-font-weight: $--font-weight-primary !default;
+/// color||Color|0
+$--link-default-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--link-default-active-color: $--color-primary !default;
+/// color||Color|0
+$--link-disabled-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--link-primary-font-color: $--color-primary !default;
+/// color||Color|0
+$--link-success-font-color: $--color-success !default;
+/// color||Color|0
+$--link-warning-font-color: $--color-warning !default;
+/// color||Color|0
+$--link-danger-font-color: $--color-danger !default;
+/// color||Color|0
+$--link-info-font-color: $--color-info !default;
+/* Calendar
+--------------------------*/
+/// border||Other|4
+$--calendar-border: $--table-border !default;
+/// color||Other|4
+$--calendar-selected-background-color: #F2F8FE !default;
+$--calendar-cell-width: 85px !default;
+
+/* Form
+-------------------------- */
+/// fontSize||Font|1
+$--form-label-font-size: $--font-size-base !default;
+
+/* Avatar
+--------------------------*/
+/// color||Color|0
+$--avatar-font-color: #fff !default;
+/// color||Color|0
+$--avatar-background-color: #C0C4CC !default;
+/// fontSize||Font Size|1
+$--avatar-text-font-size: 14px !default;
+/// fontSize||Font Size|1
+$--avatar-icon-font-size: 18px !default;
+/// borderRadius||Border|2
+$--avatar-border-radius: $--border-radius-base !default;
+/// size|1|Avatar Size|3
+$--avatar-large-size: 40px !default;
+/// size|1|Avatar Size|3
+$--avatar-medium-size: 36px !default;
+/// size|1|Avatar Size|3
+$--avatar-small-size: 28px !default;
+
+/* Break-point
+--------------------------*/
+$--sm: 768px !default;
+$--md: 992px !default;
+$--lg: 1200px !default;
+$--xl: 1920px !default;
+
+$--breakpoints: (
+  'xs' : (max-width: $--sm - 1),
+  '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),
+);

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "test-vmc",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve -mode development",
+    "build:app": "vue-cli-service build -mode production",
+    "build:module": "vue-cli-service build --target lib src/module.js"
+  },
+  "dependencies": {
+    "cnpm": "^6.1.1",
+    "core-js": "^3.3.2",
+    "element-ui": "^2.13.2",
+    "vue": "^2.6.10",
+    "vue-module-loader": "^1.0.3",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-router": "^4.0.0",
+    "@vue/cli-plugin-vuex": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "@vue/eslint-config-prettier": "^5.0.0",
+    "axios": "^0.19.2",
+    "babel-eslint": "^10.0.3",
+    "element-theme-chalk": "^2.13.2",
+    "eslint": "^5.16.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.14.1",
+    "prettier": "^1.18.2",
+    "sass-loader": "^9.0.0",
+    "sass-resources-loader": "^2.0.3",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
+    "vue-axios": "^2.1.5",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "description": "test",
+  "author": "ln"
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>慧牧科技——云服务平台</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but admincraft-module doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

public/libs/H264SPSParser.js

@@ -0,0 +1,387 @@
+//import Map from './Map.js';
+
+let BITWISE0x00000007 = 0x00000007;
+let BITWISE0x7 = 0x7;
+let BITWISE2 = 2;
+let BITWISE3 = 3;
+let BITWISE4 = 4;
+let BITWISE5 = 5;
+let BITWISE6 = 6;
+let BITWISE8 = 8;
+let BITWISE12 = 12;
+let BITWISE15 = 15;
+let BITWISE16 = 16;
+let BITWISE32 = 32;
+let BITWISE64 = 64;
+let BITWISE255 = 255;
+let BITWISE256 = 256;
+
+function H264SPSParser() {
+    let vBitCount = 0;
+    let spsMap = null;
+    let fps = null;
+
+
+    function constructor() {
+        spsMap = new Map();
+    }
+
+    constructor.prototype = {
+        parse (pSPSBytes) {
+            //console.log("=========================SPS START=========================");
+            vBitCount = 0;
+            spsMap.clear();
+
+            // forbidden_zero_bit, nal_ref_idc, nal_unit_type
+            spsMap.set("forbidden_zero_bit", readBits(pSPSBytes, 1));
+            spsMap.set("nal_ref_idc", readBits(pSPSBytes, BITWISE2));
+            spsMap.set("nal_unit_type", readBits(pSPSBytes, BITWISE5));
+
+            // profile_idc
+            spsMap.set("profile_idc", readBits(pSPSBytes, BITWISE8));
+            spsMap.set("profile_compatibility", readBits(pSPSBytes, BITWISE8));
+
+            // spsMap.set("constrained_set0_flag", readBits(pSPSBytes, 1));
+            // spsMap.set("constrained_set1_flag", readBits(pSPSBytes, 1));
+            // spsMap.set("constrained_set2_flag", readBits(pSPSBytes, 1));
+            // spsMap.set("constrained_set3_flag", readBits(pSPSBytes, 1));
+            // spsMap.set("constrained_set4_flag", readBits(pSPSBytes, 1));
+            // spsMap.set("constrained_set5_flag", readBits(pSPSBytes, 1));
+            // spsMap.set("reserved_zero_2bits", readBits(pSPSBytes, 2));
+
+            // level_idc
+            spsMap.set("level_idc", readBits(pSPSBytes, BITWISE8));
+            spsMap.set("seq_parameter_set_id", ue(pSPSBytes, 0));
+
+            let profileIdc = spsMap.get("profile_idc");
+            let BITWISE100 = 100;
+            let BITWISE110 = 110;
+            let BITWISE122 = 122;
+            let BITWISE244 = 244;
+            let BITWISE44 = 44;
+            let BITWISE83 = 83;
+            let BITWISE86 = 86;
+            let BITWISE118 = 118;
+            let BITWISE128 = 128;
+            let BITWISE138 = 138;
+            let BITWISE139 = 139;
+            let BITWISE134 = 134;
+
+            if ((profileIdc === BITWISE100) || (profileIdc === BITWISE110) ||
+                (profileIdc === BITWISE122) || (profileIdc === BITWISE244) ||
+                (profileIdc === BITWISE44) || (profileIdc === BITWISE83) ||
+                (profileIdc === BITWISE86) || (profileIdc === BITWISE118) ||
+                (profileIdc === BITWISE128) || (profileIdc === BITWISE138) ||
+                (profileIdc === BITWISE139) || (profileIdc === BITWISE134)) {
+                spsMap.set("chroma_format_idc", ue(pSPSBytes, 0));
+                if (spsMap.get("chroma_format_idc") === BITWISE3) {
+                    spsMap.set("separate_colour_plane_flag", readBits(pSPSBytes, 1));
+                }
+
+                spsMap.set("bit_depth_luma_minus8", ue(pSPSBytes, 0));
+                spsMap.set("bit_depth_chroma_minus8", ue(pSPSBytes, 0));
+                spsMap.set("qpprime_y_zero_transform_bypass_flag", readBits(pSPSBytes, 1));
+                spsMap.set("seq_scaling_matrix_present_flag", readBits(pSPSBytes, 1));
+
+                if (spsMap.get("seq_scaling_matrix_present_flag")) {
+                    let num = spsMap.get("chroma_format_idc") !== BITWISE3 ? BITWISE8 : BITWISE12;
+                    let seqScalingListPresentFlag = new Array(num);
+                    for (let i = 0; i < num; i++) {
+                        seqScalingListPresentFlag[i] = readBits(pSPSBytes, 1);
+
+                        if (seqScalingListPresentFlag[i]) {
+                            let slNumber = i < BITWISE6 ? BITWISE16 : BITWISE64;
+                            let lastScale = 8;
+                            let nextScale = 8;
+                            let deltaScale = 0;
+
+                            for (let j = 0; j < slNumber; j++) {
+                                if (nextScale) {
+                                    deltaScale = se(pSPSBytes, 0);
+                                    nextScale = (lastScale + deltaScale + BITWISE256) % BITWISE256;
+                                }
+                                lastScale = (nextScale === 0) ? lastScale : nextScale;
+                            }
+                        }
+                    }
+                    spsMap.set("seq_scaling_list_present_flag", seqScalingListPresentFlag);
+                }
+            }
+            spsMap.set("log2_max_frame_num_minus4", ue(pSPSBytes, 0));
+            spsMap.set("pic_order_cnt_type", ue(pSPSBytes, 0));
+
+            if (spsMap.get("pic_order_cnt_type") === 0) {
+                spsMap.set("log2_max_pic_order_cnt_lsb_minus4", ue(pSPSBytes, 0));
+            } else if (spsMap.get("pic_order_cnt_type") === 1) {
+                spsMap.set("delta_pic_order_always_zero_flag", readBits(pSPSBytes, 1));
+                spsMap.set("offset_for_non_ref_pic", se(pSPSBytes, 0));
+                spsMap.set("offset_for_top_to_bottom_field", se(pSPSBytes, 0));
+                spsMap.set("num_ref_frames_in_pic_order_cnt_cycle", ue(pSPSBytes, 0));
+                for (let numR = 0; numR < spsMap.get("num_ref_frames_in_pic_order_cnt_cycle"); numR++) {
+                    spsMap.set("num_ref_frames_in_pic_order_cnt_cycle", se(pSPSBytes, 0));
+                }
+            }
+            spsMap.set("num_ref_frames", ue(pSPSBytes, 0));
+            spsMap.set("gaps_in_frame_num_value_allowed_flag", readBits(pSPSBytes, 1));
+            spsMap.set("pic_width_in_mbs_minus1", ue(pSPSBytes, 0));
+            spsMap.set("pic_height_in_map_units_minus1", ue(pSPSBytes, 0));
+            spsMap.set("frame_mbs_only_flag", readBits(pSPSBytes, 1));
+
+            if (spsMap.get("frame_mbs_only_flag") === 0) {
+                spsMap.set("mb_adaptive_frame_field_flag", readBits(pSPSBytes, 1));
+            }
+            spsMap.set("direct_8x8_interence_flag", readBits(pSPSBytes, 1));
+            spsMap.set("frame_cropping_flag", readBits(pSPSBytes, 1));
+            if (spsMap.get("frame_cropping_flag") === 1) {
+                spsMap.set("frame_cropping_rect_left_offset", ue(pSPSBytes, 0));
+                spsMap.set("frame_cropping_rect_right_offset", ue(pSPSBytes, 0));
+                spsMap.set("frame_cropping_rect_top_offset", ue(pSPSBytes, 0));
+                spsMap.set("frame_cropping_rect_bottom_offset", ue(pSPSBytes, 0));
+            }
+
+            //vui parameters
+            spsMap.set("vui_parameters_present_flag", readBits(pSPSBytes, 1));
+            if (spsMap.get("vui_parameters_present_flag")) {
+                vuiParameters(pSPSBytes);
+            }
+
+            //console.log("=========================SPS END=========================");
+
+
+            return true;
+        },
+        getSizeInfo () {
+            let SubWidthC = 0;
+            let SubHeightC = 0;
+
+            if (spsMap.get("chroma_format_idc") === 0) { //monochrome
+                SubWidthC = SubHeightC = 0;
+            } else if (spsMap.get("chroma_format_idc") === 1) { //4:2:0
+                SubWidthC = SubHeightC = BITWISE2;
+            } else if (spsMap.get("chroma_format_idc") === BITWISE2) { //4:2:2
+                SubWidthC = BITWISE2;
+                SubHeightC = 1;
+            } else if (spsMap.get("chroma_format_idc") === BITWISE3) { //4:4:4
+                if (spsMap.get("separate_colour_plane_flag") === 0) {
+                    SubWidthC = SubHeightC = 1;
+                } else if (spsMap.get("separate_colour_plane_flag") === 1) {
+                    SubWidthC = SubHeightC = 0;
+                }
+            }
+
+            let PicWidthInMbs = spsMap.get("pic_width_in_mbs_minus1") + 1;
+
+            let PicHeightInMapUnits = spsMap.get("pic_height_in_map_units_minus1") + 1;
+            let FrameHeightInMbs = (BITWISE2 - spsMap.get("frame_mbs_only_flag")) * PicHeightInMapUnits;
+
+            let cropLeft = 0;
+            let cropRight = 0;
+            let cropTop = 0;
+            let cropBottom = 0;
+
+            if (spsMap.get("frame_cropping_flag") === 1) {
+                cropLeft = spsMap.get("frame_cropping_rect_left_offset");
+                cropRight = spsMap.get("frame_cropping_rect_right_offset");
+                cropTop = spsMap.get("frame_cropping_rect_top_offset");
+                cropBottom = spsMap.get("frame_cropping_rect_bottom_offset");
+            }
+            let decodeSize = (PicWidthInMbs * BITWISE16) * (FrameHeightInMbs * BITWISE16);
+            let width = (PicWidthInMbs * BITWISE16) - (SubWidthC * (cropLeft + cropRight));
+            let height = (FrameHeightInMbs * BITWISE16) -
+                (SubHeightC * (BITWISE2 - spsMap.get("frame_mbs_only_flag")) * (cropTop + cropBottom));
+
+            let sizeInfo = {
+                'width': width,
+                'height': height,
+                'decodeSize': decodeSize,
+            };
+
+            return sizeInfo;
+        },
+        getSpsValue (key) {
+            return spsMap.get(key);
+        },
+        getCodecInfo () {
+            let profileIdc = spsMap.get("profile_idc").toString(BITWISE16);
+            let profileCompatibility = spsMap.get("profile_compatibility") < BITWISE15 ?
+                "0" + spsMap.get("profile_compatibility").toString(BITWISE16) :
+                spsMap.get("profile_compatibility").toString(BITWISE16);
+
+            let levelIdc = spsMap.get("level_idc").toString(BITWISE16);
+
+            //console.log("getCodecInfo = " + (profile_idc + profile_compatibility + level_idc));
+            return profileIdc + profileCompatibility + levelIdc;
+
+        },
+
+        getSpsMap() {
+            return spsMap;
+        },
+
+        getFPS() {
+            return fps;
+        }
+    }
+
+    return new constructor();
+
+    function getBit(base, offset) {
+        let offsetData = offset;
+        let vCurBytes = (vBitCount + offsetData) >> BITWISE3;
+        offsetData = (vBitCount + offset) & BITWISE0x00000007;
+        return (((base[(vCurBytes)])) >> (BITWISE0x7 - (offsetData & BITWISE0x7))) & 0x1;
+    }
+
+    function readBits(pBuf, vReadBits) {
+        let vOffset = 0;
+        let vTmp = 0,
+            vTmp2 = 0;
+
+        if (vReadBits === 1) {
+            vTmp = getBit(pBuf, vOffset);
+        } else {
+            for (let i = 0; i < vReadBits; i++) {
+                vTmp2 = getBit(pBuf, i);
+                vTmp = (vTmp << 1) + vTmp2;
+            }
+        }
+
+        vBitCount += vReadBits;
+        return vTmp;
+    }
+
+    function ue(base, offset) {
+        let zeros = 0,
+            vTmp = 0,
+            vReturn = 0;
+        let vIdx = offset;
+        do {
+            vTmp = getBit(base, vIdx++);
+            if (vTmp === 0) {
+                zeros++;
+            }
+        } while (0 === vTmp);
+
+        if (zeros === 0) {
+            vBitCount += 1;
+            return 0;
+        }
+
+        vReturn = 1 << zeros;
+
+        for (let i = zeros - 1; i >= 0; i--, vIdx++) {
+            vTmp = getBit(base, vIdx);
+            vReturn |= vTmp << i;
+        }
+
+        let addBitCount = (zeros * BITWISE2) + 1;
+        vBitCount += addBitCount;
+
+        return (vReturn - 1);
+    }
+
+    function se(base, offset) {
+        let vReturn = ue(base, offset);
+
+        if (vReturn & 0x1) {
+            return (vReturn + 1) / BITWISE2;
+        } else {
+            return -vReturn / BITWISE2;
+        }
+    }
+
+    function hrdParameters(pSPSBytes) {
+        spsMap.set("cpb_cnt_minus1", ue(pSPSBytes, 0));
+        spsMap.set("bit_rate_scale", readBits(pSPSBytes, BITWISE4));
+        spsMap.set("cpb_size_scale", readBits(pSPSBytes, BITWISE4));
+        let cpdCntMinus1 = spsMap.get("cpb_cnt_minus1");
+        let bitRateValueMinus1 = new Array(cpdCntMinus1);
+        let cpbSizeValueMinus1 = new Array(cpdCntMinus1);
+        let cbrFlag = new Array(cpdCntMinus1);
+        //Todo: 原本为i <= cpdCntMinus1，运行到此处时直接停住，原因不明，改为<后正常
+        for (let i = 0; i < cpdCntMinus1; i++) {
+            bitRateValueMinus1[i] = ue(pSPSBytes, 0);
+            cpbSizeValueMinus1[i] = ue(pSPSBytes, 0);
+            cbrFlag[i] = readBits(pSPSBytes, 1);
+        }
+        spsMap.set("bit_rate_value_minus1", bitRateValueMinus1);
+        spsMap.set("cpb_size_value_minus1", cpbSizeValueMinus1);
+        spsMap.set("cbr_flag", cbrFlag);
+
+        spsMap.set("initial_cpb_removal_delay_length_minus1", readBits(pSPSBytes, BITWISE4));
+        spsMap.set("cpb_removal_delay_length_minus1", readBits(pSPSBytes, BITWISE4));
+        spsMap.set("dpb_output_delay_length_minus1", readBits(pSPSBytes, BITWISE4));
+        spsMap.set("time_offset_length", readBits(pSPSBytes, BITWISE4));
+    }
+
+    function vuiParameters(pSPSBytes) {
+        spsMap.set("aspect_ratio_info_present_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("aspect_ratio_info_present_flag")) {
+            spsMap.set("aspect_ratio_idc", readBits(pSPSBytes, BITWISE8));
+            //Extended_SAR
+            if (spsMap.get("aspect_ratio_idc") === BITWISE255) {
+                spsMap.set("sar_width", readBits(pSPSBytes, BITWISE16));
+                spsMap.set("sar_height", readBits(pSPSBytes, BITWISE16));
+            }
+        }
+
+        spsMap.set("overscan_info_present_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("overscan_info_present_flag")) {
+            spsMap.set("overscan_appropriate_flag", readBits(pSPSBytes, 1));
+        }
+        spsMap.set("video_signal_type_present_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("video_signal_type_present_flag")) {
+            spsMap.set("video_format", readBits(pSPSBytes, BITWISE3));
+            spsMap.set("video_full_range_flag", readBits(pSPSBytes, 1));
+            spsMap.set("colour_description_present_flag", readBits(pSPSBytes, 1));
+            if (spsMap.get("colour_description_present_flag")) {
+                spsMap.set("colour_primaries", readBits(pSPSBytes, BITWISE8));
+                spsMap.set("transfer_characteristics", readBits(pSPSBytes, BITWISE8));
+                spsMap.set("matrix_coefficients", readBits(pSPSBytes, BITWISE8));
+            }
+        }
+        spsMap.set("chroma_loc_info_present_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("chroma_loc_info_present_flag")) {
+            spsMap.set("chroma_sample_loc_type_top_field", ue(pSPSBytes, 0));
+            spsMap.set("chroma_sample_loc_type_bottom_field", ue(pSPSBytes, 0));
+        }
+        spsMap.set("timing_info_present_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("timing_info_present_flag")) {
+            spsMap.set("num_units_in_tick", readBits(pSPSBytes, BITWISE32));
+            spsMap.set("time_scale", readBits(pSPSBytes, BITWISE32));
+            spsMap.set("fixed_frame_rate_flag", readBits(pSPSBytes, 1));
+
+            fps =  spsMap.get("time_scale") / spsMap.get("num_units_in_tick");
+            if(spsMap.get("fixed_frame_rate_flag")) {
+                fps = fps / 2;
+            }
+        }
+        spsMap.set("nal_hrd_parameters_present_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("nal_hrd_parameters_present_flag")) {
+            hrdParameters(pSPSBytes);
+        }
+        spsMap.set("vcl_hrd_parameters_present_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("vcl_hrd_parameters_present_flag")) {
+            hrdParameters(pSPSBytes);
+        }
+        if (spsMap.get("nal_hrd_parameters_present_flag") ||
+            spsMap.get("vcl_hrd_parameters_present_flag")) {
+            spsMap.set("low_delay_hrd_flag", readBits(pSPSBytes, 1));
+        }
+        spsMap.set("pic_struct_present_flag", readBits(pSPSBytes, 1));
+        spsMap.set("bitstream_restriction_flag", readBits(pSPSBytes, 1));
+        if (spsMap.get("bitstream_restriction_flag")) {
+            spsMap.set("motion_vectors_over_pic_boundaries_flag", readBits(pSPSBytes, 1));
+            spsMap.set("max_bytes_per_pic_denom", ue(pSPSBytes, 0));
+            spsMap.set("max_bits_per_mb_denom", ue(pSPSBytes, 0));
+            spsMap.set("log2_max_mv_length_horizontal", ue(pSPSBytes, 0));
+            spsMap.set("log2_max_mv_length_vertical", ue(pSPSBytes, 0));
+            spsMap.set("max_num_reorder_frames", ue(pSPSBytes, 0));
+            spsMap.set("max_dec_frame_buffering", ue(pSPSBytes, 0));
+        }
+    }
+}
+
+
+
+//export default H264SPSParser;

public/libs/H264Session.js

@@ -0,0 +1,667 @@
+function H264Session() {
+    let rtpTimeStamp = 0;
+    let size1M = 1048576; //1024 * 1024
+    let inputBuffer = new Uint8Array(size1M);
+    let spsSegment = null;
+    let ppsSegment = null;
+
+    let SPSParser = null;
+
+    let width = 0;
+    let height = 0;
+    let inputLength = 0;
+
+    let initalSegmentFlag = true; //用于确定是否是initSegment
+    let initalMediaFrameFlag = true;
+
+    let frameRate = null; //根据SDP或者SPS设置
+    let preSample = null; //上一个Sample
+    let durationTimeCount = 0;
+    let frameCount = 0;
+    let inputSegBufferSub = null;
+
+    //MSE使用的数据以及相关配置，顺序codecInfo -> initSegmentData -> mediaSample -> frameData
+    //时间戳用于绘制人脸框
+    let decodedData = {
+        frameData: null, //视频数据
+        timeStamp: null, //时间戳
+        initSegmentData: null, //MP4配置,用于initsegment
+        mediaSample: null, //使用duration控制每一帧的播放时间
+        codecInfo: "", //MSE init时传入，用于创建mediasource
+    };
+    let FRAMETYPE = {
+        1: 'P',
+        5: 'I',
+        6: 'SEI',
+        7: 'I'
+    };
+    let frameType = '';
+    let decodeMode = 'video';
+    let outputSize = 0;
+    let curSize = 0;
+
+    const PREFIX = new Uint8Array(['0x00', '0x00', '0x00', '0x01']);
+
+    let firstIframe = false;
+
+    let SEIInfo = {
+        ivs: null,
+        timestamp: null,
+    };
+
+    let preWidth = null,
+        preHeight = null;
+    let resetTimeCount = 0;
+    let lastTimeStamp = 0;
+    //const RESETTIME = 162000000;
+    const RESETTIME = 4320000;
+    let SEIBuffer = null;
+    let lastSEITime = 0;
+
+    function constructor() {
+
+    }
+
+    constructor.prototype = {
+        init() {
+            SPSParser = new H264SPSParser();
+            this.resolutionChangedCallback = () => {
+            };
+        },
+
+        remuxRTPData(rtspInterleaved, rtpHeader, rtpPayload) {
+            //console.log(rtspInterleaved)
+            //console.log(rtpHeader)
+            let PaddingSize = 0;
+            let extensionHeaderLen = 0; //如果RtpHeader.X=1，则在RTP报头后跟有一个扩展报头
+            let PAYLOAD = null;
+//console.log(rtpHeader)
+//console.log(rtspInterleaved, rtpHeader, rtpPayload.subarray(0,5))
+            let RtpHeader = {
+                V: rtpHeader[0] >>> 6,
+                P: rtpHeader[0] & 0x20,
+                X: rtpHeader[0] & 0x10,
+                CC: rtpHeader[0] & 0x0F,
+                M: (rtpHeader[1] & 0x80) >> 7,
+                PT: rtpHeader[1] & 127,
+                SN: (rtpHeader[2] << 8) + rtpHeader[3],
+                timeStamp: (rtpHeader[4] << 24) + (rtpHeader[5] << 16) + (rtpHeader[6] << 8) + rtpHeader[7],
+                SSRC: (rtpHeader[8] << 24) + (rtpHeader[9] << 16) + (rtpHeader[10] << 8) + rtpHeader[11],
+            };
+            if (RtpHeader.P) { //填充
+                PaddingSize = rtpPayload[rtpPayload.length - 1];
+                // console.log("Padding - " + PaddingSize);
+            }
+
+            if (RtpHeader.X) { //扩展
+                extensionHeaderLen = (((rtpPayload[2] << 8) | rtpPayload[3]) * 4) + 4;
+                console.log('X: ' + rtpPayload[0])
+            }
+//console.log('extensionHeaderLen: '+ extensionHeaderLen)
+            PAYLOAD = rtpPayload.subarray(extensionHeaderLen, rtpPayload.length - PaddingSize);
+            rtpTimeStamp = RtpHeader.timeStamp;
+
+            //console.log(rtpTimeStamp, rtpHeader[4], rtpHeader[5], rtpHeader[6] , rtpHeader[7], PAYLOAD[0] & 0x1f)
+            /* 载荷结构(https://blog.csdn.net/davebobo/article/details/52994596)
+            +---------------+
+            |0|1|2|3|4|5|6|7|
+            +-+-+-+-+-+-+-+-+
+            |F|NRI|  Type   |
+            +---------------+
+            Type = 1-23 单个NAL单元包
+            Type = 24,25, 26, 27聚合包
+            Type = 28，29, 分片单元
+            */
+            //console.log(rtspInterleaved,rtpHeader, PAYLOAD[0]);
+            let nalType = (PAYLOAD[0] & 0x1f);
+            //console.log(PAYLOAD[0] + ' nalType: ' + nalType);
+
+//console.log('rtpPayload.length: ' + rtpPayload.length)
+//console.log(nalType, PAYLOAD[0])
+//console.log('nalType: ' + nalType, RtpHeader.M)
+            switch (nalType) {
+                case 6: //SEI
+                    //console.log(PAYLOAD, String.fromCharCode.apply(null, PAYLOAD))
+                    if (SEIParse(PAYLOAD) === null) {
+                        return;
+                    }
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    break;
+                case 7: //SPS
+                    //console.log('SPS');
+                    SPSParser.parse(removeH264or5EmulationBytes(PAYLOAD));
+                    let sizeInfo = SPSParser.getSizeInfo();
+                    //console.log(SPSParser.getSpsMap())
+                    width = sizeInfo.width;
+                    height = sizeInfo.height;
+
+                    if (preWidth !== width || preHeight !== height) {
+                        console.log('resolution changed!');
+                        console.log('preWidth: ', preWidth, ' preHeight: ', preHeight, ' width: ', width, ' height: ', height);
+                        preWidth = width;
+                        preHeight = height;
+                    }
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    spsSegment = PAYLOAD;
+                    //console.log('width： ',width, 'height: ', height)
+                    curSize = sizeInfo.decodeSize;
+                    firstIframe = true;
+//console.log(spsSegment)
+                    if (frameRate === null) {
+                        frameRate = SPSParser.getFPS();
+                    }
+                    break;
+                case 8: //PPS
+                    //console.log('PPS')
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    ppsSegment = PAYLOAD;
+//console.log(ppsSegment)
+                    break;
+                case 28: //FU
+                    //console.log('FU');
+                    let startBit = ((PAYLOAD[1] & 0x80) === 0x80),
+                        endBit = ((PAYLOAD[1] & 0x40) === 0x40),
+                        fuType = PAYLOAD[1] & 0x1f,
+                        payloadStartIndex = 2;
+                    //console.log('startBit: ' + startBit + ' endBit: ' + endBit)
+                    //console.log('fuType: ' + fuType)
+                    if (startBit === true && endBit === false) {
+                        let newNalHeader = new Uint8Array(1);
+                        newNalHeader[0] = ((PAYLOAD[0] & 0xe0) | fuType);
+                        //console.log('newNalHeader： ', newNalHeader[0])
+                        //console.log('fuType: ' + fuType)
+                        //console.log((PAYLOAD[2] << 8) + PAYLOAD[3])
+//console.log(new Uint8Array(PAYLOAD.subarray(0, 100)));
+                        if (false) { //赛兰摄像头，SPS,PPS,I帧打在一个RTP包中
+                            PAYLOAD[1] = newNalHeader[0];
+                            SPSParser.parse(removeH264or5EmulationBytes(PAYLOAD.subarray(1, 27)));
+                            let sizeInfo = SPSParser.getSizeInfo();
+//console.log(sizeInfo, SPSParser.getSpsMap())
+                            //SPS
+                            width = sizeInfo.width;
+                            height = sizeInfo.height;
+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(1, 27));
+                            spsSegment = PAYLOAD.subarray(1, 27);
+                            //console.log('width： ',width, 'height: ', height)
+                            curSize = sizeInfo.decodeSize;
+                            firstIframe = true;
+
+                            //PPS
+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(30, 34));
+                            ppsSegment = PAYLOAD.subarray(30, 34);
+
+                            //I
+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(38, PAYLOAD.length));
+
+                        } else {
+                            //console.log(newNalHeader[0] & 0x1f)
+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
+                            inputBuffer = setBuffer(inputBuffer, newNalHeader);
+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                        }
+
+                    } else {
+                        //console.log(startBit, endBit, 'endBit')
+                        inputBuffer = setBuffer(inputBuffer,
+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                    }
+//console.log(startBit,endBit)
+                    // if(endBit === true) {
+                    //     end = true;
+                    // }
+                    break;
+                case 1:
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    break;
+                default:
+                    //console.log('nalType: ' + nalType);
+                    //console.log(PAYLOAD)
+                    break;
+            }
+//console.log('M: ' + RtpHeader.M + ' ' + (rtpHeader[1] & 0x80))
+            //check marker bit
+            if (RtpHeader.M) {
+                if (!firstIframe) {
+                    inputLength = 0;
+                    return;
+                }
+                let inputBufferSub = inputBuffer.subarray(0, inputLength);
+                frameType = FRAMETYPE[inputBufferSub[4] & 0x1f];
+
+                //只根据视频帧计算resetTimeCount
+                if (frameType !== 'SEI') {
+                    // rtp时间戳周期为RESETTIME，如果单向递增，设为0
+                    if (lastTimeStamp - rtpTimeStamp > (RESETTIME / 2)) { //判断lastTimeStamp远大于rtpTimeStamp，防止后一帧比前一帧先到的情况
+                        //console.log(lastTimeStamp - rtpTimeStamp)
+                        console.warn('时间戳重置', lastTimeStamp, rtpTimeStamp, frameType, new Date())
+                        resetTimeCount++;
+                    }
+                    rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
+                } else {
+                    //同一帧的SEI比视频发送慢时
+                    if (rtpTimeStamp - lastTimeStamp > (RESETTIME / 2)) {
+                        console.warn('SEI翻转', rtpTimeStamp, lastTimeStamp);
+                        rtpTimeStamp = rtpTimeStamp + RESETTIME * (resetTimeCount - 1);
+                    } else {
+                        rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
+                    }
+                    //同一帧的SEI比视频发送快时
+                    // if(rtpTimeStamp > lastTimeStamp) {
+                    //     rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
+                    // } else {
+                    //     rtpTimeStamp = rtpTimeStamp + RESETTIME * (resetTimeCount + 1);
+                    // }
+                }
+//console.log('frameType: ', frameType, 'rtpTimeStamp: ', rtpTimeStamp)
+                if (frameType === 'SEI') {
+                    //SEI被分片（nal === 28）时，分片包发送完后marker为1，不会和视频帧一起
+                    SEIBuffer = inputBuffer.subarray(4, inputLength);
+                    //console.log(SEIBuffer)
+                    inputBufferSub = new Uint8Array();
+                }
+                if (SEIBuffer) {
+                    let SEI = SEIParse(SEIBuffer);
+                    if (SEI) {
+                        SEIInfo.ivs = SEI;
+                        SEIInfo.timestamp = rtpTimeStamp;
+                        decodedData.SEIInfo = SEIInfo;
+                        if ((rtpTimeStamp - lastSEITime) !== (90000 / frameRate)) {
+                            //console.log('SEI 时间差：', (rtpTimeStamp - lastTime), rtpTimeStamp, lastTime)
+                        }
+                        lastSEITime = rtpTimeStamp;
+                        SEIInfo = {
+                            ivs: null,
+                            timestamp: 0,
+                        };
+                    }
+                    SEIBuffer = null;
+                }
+
+                if (!initalSegmentFlag) {
+                    decodedData.initSegmentData = null;
+                    decodedData.codecInfo = null;
+                } else {
+                    initalSegmentFlag = false;
+                    const info = {
+                        id: 1,
+                        width: width,
+                        height: height,
+                        type: "video",
+                        profileIdc: SPSParser.getSpsValue("profile_idc"),
+                        profileCompatibility: 0,
+                        levelIdc: SPSParser.getSpsValue("level_idc"),
+                        sps: [spsSegment],
+                        pps: [ppsSegment],
+                        timescale: 1e3,
+                        fps: frameRate
+                    };
+                    decodedData.initSegmentData = info;
+                    decodedData.codecInfo = SPSParser.getCodecInfo();
+                    //console.log(info.pps)
+                }
+
+                if (frameType === 'I') {
+//console.log('ppsSegment: ', ppsSegment)
+                    let h264parameterLength = spsSegment.length + ppsSegment.length + 8;
+                    inputSegBufferSub = inputBufferSub.subarray(h264parameterLength, inputBufferSub.length);
+                } else {
+                    inputSegBufferSub = inputBufferSub.subarray(0, inputBufferSub.length);
+                }
+                if (inputSegBufferSub.length) {
+                    let segSize = inputSegBufferSub.length - 4;
+                    //mp4 box头
+                    inputSegBufferSub[0] = (segSize & 0xFF000000) >>> 24;
+                    inputSegBufferSub[1] = (segSize & 0xFF0000) >>> 16;
+                    inputSegBufferSub[2] = (segSize & 0xFF00) >>> 8;
+                    inputSegBufferSub[3] = (segSize & 0xFF);
+
+                    decodedData.frameData = new Uint8Array(inputSegBufferSub);
+
+                    let sample = {
+                        duration: Math.round((1 / frameRate) * 1000),
+                        size: inputSegBufferSub.length,
+                        frame_time_stamp: null,
+                        frameDuration: null,
+                    };
+                    sample.frame_time_stamp = rtpTimeStamp; //Todo：暂时为null，通过帧率控制duration
+                    if (initalMediaFrameFlag) {
+                        sample.frameDuration = 0;
+                        initalMediaFrameFlag = false;
+                    } else {
+                        if (frameRate) {
+                            frameCount++;
+                            if (!(frameCount % frameRate)) { //每秒最后一帧时
+                                sample.frameDuration = 1000 - durationTimeCount;
+                                frameCount = 0;
+                                durationTimeCount = 0;
+                            } else {
+                                sample.frameDuration = Math.round(1000 / frameRate);
+                                durationTimeCount += Math.round(1000 / frameRate);
+                            }
+                        } else {
+                            sample.frameDuration = (sample.frame_time_stamp - preSample.frame_time_stamp) / 90; // 时钟频率90000，timescale=1000
+                        }
+                        //console.log(sample.frameDuration)
+                    }
+                    preSample = sample;
+                    decodedData.mediaSample = sample;
+                    decodedData.timeStamp = rtpTimeStamp;
+                }
+                this.handleDecodedData(decodedData);
+                inputLength = 0;
+                decodedData.SEIInfo = null;
+                inputSegBufferSub = null;
+                if (frameType !== 'SEI') {
+                    lastTimeStamp = RtpHeader.timeStamp;
+                }
+                frameType = '';
+            }
+            //console.log('xxxxxxxxxxxxxxxxxxxxxxxxx')
+        },
+
+        set rtpSessionCallback(func) {
+            this.handleDecodedData = func;
+        },
+
+        setFrameRate(fps) {
+            frameRate = fps;
+            //console.log('frameRate: ', frameRate)
+        },
+
+        setResolutionChangedCallback(callback) {
+            this.resolutionChangedCallback = callback;
+        }
+    }
+
+    return new constructor();
+
+    function setBuffer(buffer1, buffer2) {
+        let bufferTemp = buffer1;
+        if ((inputLength + buffer2.length) > buffer1.length) {
+            bufferTemp = new Uint8Array(buffer1.length + size1M);
+        }
+
+        bufferTemp.set(buffer2, inputLength);
+        inputLength += buffer2.length;
+        return bufferTemp;
+    }
+}
+
+
+/**
+ * 去除SPS中的Emulation字节
+ * @param data SPS源数据
+ * @returns {Array} 去除后Emulation字节后的SPS
+ */
+function removeH264or5EmulationBytes(data) {
+    let toSize = 0;
+    let i = 0;
+    let to = [];
+    let dataLength = data.length;
+    while (i < dataLength) {
+        if (i + 2 < dataLength && data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 3) {
+            to[toSize] = to[toSize + 1] = 0;
+            toSize += 2;
+            i += 3;
+        } else {
+            to[toSize] = data[i];
+            toSize += 1;
+            i += 1;
+        }
+    }
+    return to;
+}
+
+/**
+ * 解析SEI信息
+ * @param data
+ * @return {Array}
+ */
+function SEIParse(data) {
+    //console.log(data)
+    if ((data[0] & 0x1f) !== 6) {
+        //非SEI
+        return null;
+    }
+
+    if (data[1] !== 0x55 || data[2] !== 0x4C || data[3] !== 0x53 || data[4] !== 0x40) {
+        //ULS@开头
+        console.warn('unknown SEI type',data);
+        return null;
+    }
+
+    let dataLength = data.length;
+    let type = (data[5] << 8) + data[6];
+    let checkSum = (data[7] << 8) + data[8];
+    // if(dataLength !== (checkSum + 1 + 4 + 4)) {
+    //     console.log('SEI check fail!');
+    //     return null;
+    // }
+    let result;
+    data = data.subarray(9);
+    switch (type) {
+        case 0:
+            result = parseFace(data);
+            break;
+        case 1:
+            //console.log(parseBody(data))
+            result = parseBody(data);
+            break;
+        case 2:
+            result = parseRegion(data);
+            break;
+        case 3:
+            result = parseBodyEx(data);
+            break;
+        case 4:
+            result = parseOverSpeed(data);
+            break;
+        default:
+            result = null;
+            break;
+    }
+    return result;
+}
+
+function parseFace(data) {
+    //console.log(data)
+    let dataLength = data.length;
+    let contents = [];
+    while (dataLength > 0) {
+        //console.log('dataLength: ', dataLength)
+        let x0 = ((data[4] & 0x7f) << 8) + data[5],
+            y0 = ((data[6] & 0x7f) << 8) + data[7],
+            width = ((data[8] & 0x7f) << 8) + data[9] - x0,
+            height = ((data[10] & 0x7f) << 8) + data[11] - y0;
+        let content = {
+            type: 'rect',
+            id: (data[2] << 8) + data[3],
+            rect: [x0, y0, width, height],
+            state: data[1] & 0x01,
+            quality: (data[1] & 0x02) >> 1,
+        };
+        Array.prototype.push.apply(contents, [content]);
+        data = data.subarray(12);
+        dataLength = data.length;
+    }
+
+    return contents;
+}
+
+function parseBody(data) {
+    let dataLength = data.length;
+    let contents = [];
+    while (dataLength > 0) {
+        //console.log('dataLength: ', dataLength)
+        let x0 = ((data[4] & 0x7f) << 8) + data[5],
+            y0 = ((data[6] & 0x7f) << 8) + data[7],
+            width = ((data[8] & 0x7f) << 8) + data[9] - x0,
+            height = ((data[10] & 0x7f) << 8) + data[11] - y0,
+            boxConfidence = ((data[12] & 0x7f) << 8) + data[13];
+        let points = [];
+
+        for (let i = 0; i < 17; i++) {
+            let point = {
+                x: ((data[16 + i * 8] & 0x7f) << 8) + data[17 + i * 8],
+                y: ((data[18 + i * 8] & 0x7f) << 8) + data[19 + i * 8],
+                confidence: ((data[20 + i * 8] & 0x7f) << 8) + data[21 + i * 8],
+                // x: Math.random() * 8191,
+                // y: Math.random() * 8191,
+                // confidence: 1,
+            };
+            points.push(point);
+        }
+        let content = {
+            type: 'coco-pose',
+            id: (data[2] << 8) + data[3],
+            handsUp: data[1] & 0x04,
+            boundingBox: [x0, y0, width, height],
+            boxConfidence,
+            points: parseBodyToTree(points),
+            state: data[1] & 0x01,
+        };
+        Array.prototype.push.apply(contents, [content]);
+        data = data.subarray(152);
+        dataLength = data.length;
+
+    }
+    return contents;
+}
+
+function parseRegion(data) {
+    let dataLength = data.length;
+    let contents = [];
+    while (dataLength > 0) {
+        let pointNum = (data[0] << 8) + data[1],
+            state = data[3] & 0x03,
+            area = [];
+
+        for (let i = 0; i < pointNum; i++) {
+            let point = {
+                x: ((data[i * 4 + 4] & 0x7f) << 8) + data[i * 4 + 5],
+                y: ((data[i * 4 + 6] & 0x7f) << 8) + data[i * 4 + 7],
+            };
+            area.push(point);
+        }
+        let content = {
+            type: 'region-detect',
+            state,
+            area
+        };
+        Array.prototype.push.apply(contents, [content]);
+        data = data.subarray(pointNum * 4 + 4);
+        dataLength = data.length;
+    }
+    return contents;
+}
+
+function parseBodyEx(data) {
+    let dataLength = data.length;
+    let contents = [];
+    while (dataLength > 0) {
+        //console.log('dataLength: ', dataLength)
+        let x0 = ((data[4] & 0x7f) << 8) + data[5],
+            y0 = ((data[6] & 0x7f) << 8) + data[7],
+            width = ((data[8] & 0x7f) << 8) + data[9] - x0,
+            height = ((data[10] & 0x7f) << 8) + data[11] - y0,
+            boxConfidence = ((data[12] & 0x7f) << 8) + data[13];
+        let points = [];
+
+        for (let i = 0; i < 17; i++) {
+            let point = {
+                x: ((data[16 + i * 8] & 0x7f) << 8) + data[17 + i * 8],
+                y: ((data[18 + i * 8] & 0x7f) << 8) + data[19 + i * 8],
+                confidence: ((data[20 + i * 8] & 0x7f) << 8) + data[21 + i * 8],
+            };
+            points.push(point);
+        }
+        let guides = [
+            {
+                x: ((data[16 + 17 * 8] & 0x7f) << 8) + data[17 + 17 * 8],
+                y: ((data[18 + 17 * 8] & 0x7f) << 8) + data[19 + 17 * 8],
+            },
+            {
+                x: ((data[20 + 17 * 8] & 0x7f) << 8) + data[21 + 17 * 8],
+                y: ((data[22 + 17 * 8] & 0x7f) << 8) + data[23 + 17 * 8],
+            }
+        ];
+        let content = {
+            type: 'coco-poseex',
+            id: (data[2] << 8) + data[3],
+            Loiter: data[1] & 0x03,
+            Standing: (data[1] & 0x04) >> 2,
+            Alone: (data[1] & 0x08) >> 3,
+            boundingBox: [x0, y0, width, height],
+            boxConfidence,
+            points: parseBodyToTree(points),
+            guides,
+            state: 1
+        };
+        Array.prototype.push.apply(contents, [content]);
+        data = data.subarray(160);
+        dataLength = data.length;
+
+    }
+    return contents;
+}
+
+function parseOverSpeed(data) {
+    let dataLength = data.length;
+    let contents = [];
+    while (dataLength > 0) {
+        //console.log('dataLength: ', dataLength)
+        let speed = ((data[4] & 0x7f) << 8) + data[5],
+            overSpeed = data[1] & 0x01;
+        let content = {
+            type: 'over-speed',
+            id: (data[2] << 8) + data[3],
+            speed,
+            overSpeed,
+            state: 1,
+        };
+        Array.prototype.push.apply(contents, [content]);
+        data = data.subarray(8);
+        dataLength = data.length;
+    }
+    return contents;
+}
+
+/**
+ * 将智能帧中的人体姿态点转化为树结构(双亲表示法)
+ * @param points
+ */
+function parseBodyToTree(points) {
+    let newPoints = [];
+    newPoints[0] = {...points[0], parent: -1, pointColor: '#FF0002', lineColor: '#FF0002'};
+    newPoints[1] = {...points[1], parent: 0, pointColor: '#FF0002', lineColor: '#FF0002'};
+    newPoints[2] = {...points[2], parent: 0, pointColor: '#FF0002', lineColor: '#FF0002'};
+    newPoints[3] = {...points[5], parent: 17, pointColor: '#D9E34F', lineColor: '#FF0002'};
+    newPoints[4] = {...points[6], parent: 17, pointColor: '#D9E34F', lineColor: '#FF0002'};
+    newPoints[5] = {...points[3], parent: 1, pointColor: '#00FF00', lineColor: '#FF0002'};
+    newPoints[6] = {...points[4], parent: 2, pointColor: '#FFAC00', lineColor: '#FF0002'};
+    newPoints[7] = {...points[7], parent: 3, pointColor: '#00FF45', lineColor: '#'};
+    newPoints[8] = {...points[11], parent: 17, pointColor: '#EEC446', lineColor: '#'};
+    newPoints[9] = {...points[8], parent: 4, pointColor: '#43D3AF', lineColor: '#'};
+    newPoints[10] = {...points[12], parent: 17, pointColor: '#7A93E8', lineColor: '#'};
+    newPoints[11] = {...points[9], parent: 7, pointColor: '#EFB842', lineColor: '#'};
+    newPoints[12] = {...points[13], parent: 8, pointColor: '#E56C00', lineColor: '#'};
+    newPoints[13] = {...points[10], parent: 9, pointColor: '#47CD43', lineColor: '#0096FF'};
+    newPoints[14] = {...points[14], parent: 10, pointColor: '#3868D2', lineColor: '#00FF51'};
+    newPoints[15] = {...points[15], parent: 12, pointColor: '#DF4D01', lineColor: '#5100FF'};
+    newPoints[16] = {...points[16], parent: 14, pointColor: '#1E48D4', lineColor: '#00FFA0'};
+    newPoints[17] = {
+        x: (points[5].x + points[6].x) / 2,
+        y: (points[5].y + points[6].y) / 2,
+        parent: -1,
+        pointColor: '#D9E34F',
+        lineColor: '#00FFA0'
+    };
+    return newPoints;
+}

public/libs/videoWorker.js

@@ -0,0 +1,108 @@
+importScripts(
+    './H264SPSParser.js',
+    './H264Session.js',
+);
+
+
+addEventListener('message', receiveMessage);
+
+let sdpInfo = null;
+let rtpSession = null;
+let videoCHID = -1;
+let videoRtpSessionsArray = [];
+
+function  receiveMessage(event) {
+    //console.log(event.data)
+    var message = event.data;
+
+    switch (message.type) {
+        case 'sdpInfo':
+            sdpInfo = message.data;
+
+            initRTPSession(sdpInfo.sdpInfo);
+        case 'rtpDataArray':
+            //console.log(message.data.length)
+            for (let num = 0; num < message.data.length; num++) {
+                receiveMessage({
+                    'type': 'rtpData',
+                    'data': message.data[num],
+                });
+            }
+            break;
+        case 'rtpData':
+            videoCHID = message.data.rtspInterleave[1];
+            if (typeof videoRtpSessionsArray[videoCHID] !== "undefined") {
+                videoRtpSessionsArray[videoCHID].remuxRTPData(message.data.rtspInterleave,
+                    message.data.header, message.data.payload);
+            }else { // RTCP包
+                //console.log('Interleave:  ' + videoCHID);
+                //console.log(message.data.rtspInterleave, message.data.header);
+                //return;
+            }
+            break;
+    }
+}
+
+function initRTPSession(sdpInfo) {
+    for(let [i, len] = [0, sdpInfo.length]; i < len; i++) {
+        if(sdpInfo[i].codecName === 'H264') {
+            //console.log(sdpInfo)
+            rtpSession = new H264Session();
+            rtpSession.init();
+            rtpSession.rtpSessionCallback = RtpReturnCallback;
+            if(sdpInfo[i].Framerate) {
+                rtpSession.setFrameRate(sdpInfo[i].Framerate);
+            }
+        }
+
+        if(rtpSession !== null) {
+            videoCHID = sdpInfo[i].RtpInterlevedID;
+            videoRtpSessionsArray[videoCHID] = rtpSession;
+        }
+    }
+}
+
+function RtpReturnCallback(dataInfo) {
+
+    if(dataInfo === null || dataInfo === undefined) {
+        //console.log('数据为空')
+        return;
+    }
+    let mediaData = dataInfo;
+    if(mediaData.decodeMode === 'canvas') {
+        sendMessage('YUVData', mediaData.frameData);
+        return;
+    }
+    //console.log( mediaData.SEIInfo)
+    if(mediaData.initSegmentData !== null && mediaData.initSegmentData !== undefined) {
+        //sendMessage('codecInfo', mediaData.codecInfo)
+        //sendMessage('initSegment', mediaData.initSegmentData);
+        sendMessage('videoInit', mediaData);
+        sendMessage('firstvideoTimeStamp', mediaData.timeStamp);
+
+    }
+    if(mediaData.SEIInfo !== null && mediaData.SEIInfo !== undefined) {//SEI信息
+        sendMessage('SEI', mediaData.SEIInfo);
+    }
+
+    if (mediaData.frameData && mediaData.frameData.length > 0) {
+        sendMessage('videoTimeStamp', mediaData.timeStamp);
+        sendMessage('mediaSample', mediaData.mediaSample);
+        //console.log(mediaData.frameData.length)
+        sendMessage('videoRender', mediaData.frameData);
+    }
+    mediaData = null;
+}
+
+function sendMessage(type, data) {
+    let event = {
+        type: type,
+        data: data
+    }
+    if(type === 'videoRender') {
+        postMessage(event, [data.buffer]);
+    }else {
+        postMessage(event);
+    }
+    event = null;
+}

src/App.vue

@@ -0,0 +1,24 @@
+<template>
+    <div id="app">
+        <router-view />
+    </div>
+</template>
+
+<script>
+export default {
+    created() {}
+};
+</script>
+
+<style lang="scss">
+#app {
+    height: 100%;
+    margin: 0;
+}
+body,
+html {
+    height: 100%;
+    width: 100%;
+    margin: 0 0 0 0;
+}
+</style>

src/api/login.js

@@ -0,0 +1,14 @@
+import { ajax } from "../sdk/ajax";
+
+/*  */
+export const reqMyAsset = () => ajax("post", {
+    act: "f", 
+    cmd: "myinfo"
+})
+
+
+/* 登录 */
+export const reqLogin = (data) => ajax("post", "/core/auth/login", data)
+
+/* 选择组织 */
+export const reqOrgChoose = () => ajax("get", "/core/employ-relation/under-list")

src/assets/css/reset.scss

@@ -0,0 +1,4 @@
+/* 公用scss */
+
+$--color-primary: teal;
+/*css初始化完成*/

src/main.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+
+import ElementUI from 'element-ui';
+import '../theme/index.css'
+// import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import vueModuleLoader from 'vue-module-loader'
+import localModule from './module'
+
+
+Vue.use(vueModuleLoader, { store }).use(ElementUI);
+/* 
+Element-UI用到的图标 
+import {
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  Button,
+  ButtonGroup,
+  Form,
+  FormItem,
+  Icon,
+  Row,
+  Col,
+  Select,
+  Option
+} from 'element-ui';
+*/
+
+const app = new Vue({
+  router,
+  store,
+  render: h => h(App)
+})
+
+app.$moduleLoader(localModule)
+app.$mount('#app')

src/module.js

@@ -0,0 +1,11 @@
+import routes from './router/routes'
+import storeModule from './store/store-module'
+
+export default function(Vue) {
+  Vue.config.productionTip = false
+  this.$router.addRoutes(routes)
+  this.$store.registerModule('main', storeModule)
+  this.$eventBus.on('visitedAbout', () => {
+    alert('用户访问了about页面99。')
+  })
+}

src/router/index.js

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import store from '../store'
+
+import App from '../App.vue'
+import Login from '../views/Login/Login.vue'
+import Home from '../views/Home/Home.vue'
+
+
+Vue.use(VueRouter)
+
+const routes = [
+	{
+		path: '/',
+		component: App,
+		children: [
+			{
+				path: '',
+				redirect: '/login'
+			},
+		]
+	},
+	{
+		path: '/login',
+		name: 'login',
+		component: Login
+	},
+	{
+		path: '/home',
+		component: Home
+	},
+	{
+		path: '*',
+		name: '*',
+		component: Login
+	},
+]
+
+const router = new VueRouter({
+	routes
+})
+// 判断下是否需要登录
+router.beforeEach((to,from,next)=>{
+	// console.log(store.getters.token,to)
+    if(store.getters.token == null && !localStorage.getItem("token") && to.path !== '/login'){
+        next({
+            path:'/login',
+            query: {redirect:to.fullPath}
+        })
+    }else next()
+})
+export default router

src/router/routes.js

@@ -0,0 +1,73 @@
+import Home from '../views/Home/Home.vue'
+/* 个体管理 UnityTrace */
+import UnityTrace from '../views/unityManagement/UnityTrace.vue'
+
+/* 群体管理 */
+import GroupRecord from '../views/groupManagment/GroupRecord.vue'
+
+/* 模板 */
+import Aa from '../views/template/Aa.vue'
+import Ab from '../views/template/Ab.vue'
+import Ac from '../views/template/Ac.vue'
+import Ad from '../views/template/Ad.vue'
+import Ae from '../views/template/Ae.vue'
+import Af from '../views/template/Af.vue'
+
+
+export default [
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+  {
+		path: '/home',
+		component: Home,
+		children: [
+			// 个体管理
+			{
+				path: 'UnityTrace',
+				name: 'UnityTrace',
+				component: UnityTrace
+			},
+			// 群体管理
+			{
+				path: 'GroupRecord',
+				name: 'GroupRecord',
+				component: GroupRecord
+			},
+			// 模板
+			{
+				path: '/aa',
+				name: 'aa',
+				component: Aa
+			},
+			{
+				path: '/ab',
+				name: 'ab',
+				component: Ab
+			},
+			{
+				path: '/ac',
+				name: 'ac',
+				component: Ac
+			},
+			{
+				path: '/ad',
+				name: 'ad',
+				component: Ad
+			},
+			{
+				path: '/ae',
+				name: 'ae',
+				component: Ae
+			},
+			{
+				path: '/af',
+				name: 'af',
+				component: Af
+			}
+
+		]
+	},
+]

src/sdk/ajax.js

@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import axios from 'axios';
+import VueAxios from 'vue-axios';
+import config from './config'
+
+const { serverAddress } = config
+
+// import DEV from "@/dev_config"; // 导入上线配置
+// const { ONLINE_BASE_HREF, SERVER_HREF } = DEV;
+
+Vue.use(VueAxios, axios)
+
+
+/* 常用ajax封装 （固定URL） */
+export const ajax = function (type = "post", url, params) {
+    return new Promise((resole, reject) => {
+        axios({
+            method: type,
+            url: serverAddress + url,
+            params,
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+				'x-auth-token': localStorage.getItem("token")
+            }
+        }).then((res) => {
+            resole(res.data);
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}
+
+
+/* 登录 ajax封装 */
+export const ajax_login = function (type = "post", params, url = "/Salors") {
+    params.v = "webv09";
+    params.time = Date.parse(new Date()) / 1000;
+    params.app_type = "web";
+    params.sign = md5(params);
+
+    return new Promise((resole, reject) => {
+        axios({
+            method: type,
+            url: SERVER_HREF + url,
+            params,
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded; charset=utf-8;"
+            }
+        }).then((res) => {
+            resole(res);
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}
+
+

src/sdk/config.js

@@ -0,0 +1,10 @@
+export default {
+  serverAddress: 'http://115.238.57.190:8010',
+  timeout:50000,
+  method:'POST',
+  clientid:1,//客户端编号
+  errors:{
+    apiNotFound:'没找到api',
+    missingParam: "缺少必需的参数"
+  }
+}

src/sdk/index.js

@@ -0,0 +1,215 @@
+import config from './config'
+import axios from 'axios'
+import qs from 'qs'
+
+// 不需要授权的api
+const freeApis = [
+	'/core/auth/login'
+]
+class SDK {
+	constructor() {
+		this._delayedCall = [] // 延迟 处理单元
+		this._errHanlders = [] // 错误 处理器
+		// 创建一个文件上传用的 axios 对象
+		this.uploadInst = axios.create({
+			baseURL: config.serverAddress,
+			timeout: config.timeout,
+			headers: {
+				'Content-Type': 'multipart/form-data'
+			}
+		})
+	}
+	// 设置token 意味着重新登陆了
+	set token(token) {
+		this._token = token
+		// 每次设置token，都需要对延迟调用的 请求 做一次清楚
+		if (this._token) // 只有 token有值的时候才需要请求
+			this._delayedCall.forEach(params => {
+				this.fetch(params)
+			})
+		// 处理完清理,每次新的token来之后都要清理下 老的请求,不管token有没有
+		if (this._delayedCall.length > 0)
+			this._delayedCall.splice(0, this._delayedCall.length)
+	}
+	delDelayedCall(token) {
+		// 每次设置token，都需要对延迟调用的 请求 做一次清楚
+		if (token) // 只有 token有值的时候才需要请求
+			this._delayedCall.forEach(params => {
+				this.fetch(params, token)
+			})
+		// 处理完清理,每次新的token来之后都要清理下 老的请求,不管token有没有
+		if (this._delayedCall.length > 0)
+			this._delayedCall.splice(0, this._delayedCall.length)
+	}
+	// 注册 事件，提供异常过滤事件
+	regErrHanlder(hanlder) {
+		/**
+		 * 如：{
+		 *  errCode : 'token_is_invalid',
+		 *  action: (err,params) => {}
+		 * }
+		 */
+		// 结构正确才可以被接纳
+		if (hanlder.errCode && hanlder.action)
+			this._errHanlders.push(hanlder)
+	}
+
+	// api 请求
+	fetch(params, token) {
+		// console.log('记录请求-----------',params,token)
+		// 错误没必要这里处理，因为 业务有自己的具体处理方案，比如用户状态会维护自己的token,个人认为
+		if (token != null) this.doRequest(params, token)
+		else {
+			if (this.authCheck(params.api)) {
+				this._delayedCall.push(params)
+			} else this.doRequest(params)
+		}
+	}
+
+	/* ======================================================= */
+	// 检查是否需要授权
+	authCheck(api) {
+		return freeApis.findIndex(a => a === api) < 0 // 不存在就 是需要验证的
+	}
+	doRequest(params, token) {
+		// Loading.service({fullscreen: true, text: '拼命加载中....'} )
+		this.checkParams(params) // 异常处理 二选一
+		// 复制一份data
+		if (params.data) {
+			params.data = JSON.parse(JSON.stringify(params.data));
+			// 对 meta数据做下转换
+			if (params.data.meta && typeof params.data.meta === "object") {
+				params.data.meta = JSON.stringify(params.data.meta)
+			}
+		}
+		// if (token) sysParams.token = token // 用户token,新的方式加入header了
+		let method = params.method ? params.method : config.method
+		let timeout = config.timeout;
+		let prepareData = {
+			url: config.serverAddress + params.api,
+			header: {
+				'Content-Type': 'application/x-www-form-urlencoded',
+				'x-auth-token': token
+			},
+			data: {
+				clientid: config.clientid,
+				...params.data
+			},
+			dataType: 'json',
+		}
+		switch (method.toUpperCase()) {
+			case 'POST': {
+				axios.post(prepareData.url, qs.stringify(prepareData.data), { headers: prepareData.header, timeout })
+					.then(response => {
+						this.dealResponse(response, params)
+					}).catch(error => {
+						console.log('post---------', error)
+						if (error.response == null)
+							error.response = { errCode: 'net_error', errMsg: '网络异常' }
+						if (error.response.data && error.response.data.errCode) this.dealResponse(error.response, params)
+						else this.completeSDK(error.response, params)
+					})
+				break
+			}
+			case 'upload': {
+				this.upload(params.api, prepareData)
+					.then(response => {
+						this.dealResponse(response, params)
+					}).catch(error => {
+						console.log('upload---------', error)
+						if (error.response.data && error.response.data.errCode) this.dealResponse(error.response, params)
+						else this.completeSDK(error.response, params)
+					})
+				break
+			}
+			default:
+				axios.get(prepareData.url, { params: prepareData.data, headers: prepareData.header }, { timeout })
+					.then(response => {
+						this.dealResponse(response, params)
+					}).catch(error => {
+						if (error.response && error.response.data && error.response.data.errCode) this.dealResponse(error.response, params)
+						else this.completeSDK(error.response, params)
+					})
+				break
+		}
+	}
+	upload(apiName, prepareData) {
+		return new Promise((resolve, reject) => {
+			// console.log('看看 request',request)
+			// 组装formData
+			let fd = new FormData()
+			fd.append('file', prepareData.data.file, encodeURIComponent(prepareData.data.file.name))
+			Object.keys(prepareData.data).forEach(key => {
+				if (key !== 'file')
+					fd.append(key, prepareData.data[key])
+			})
+			this.uploadInst.post(apiName, fd)
+				.then(response => {
+					resolve(response)
+				}).catch(error => {
+					reject(error)
+				})
+		})
+	}
+	uploadCustom(params, token) {
+		//url,file,fieldName='file'
+		return new Promise((resolve, reject) => {
+			let fd = new FormData()
+			fd.append(params.fieldName, params.file, encodeURIComponent(params.file.name))
+			if (token)
+				fd.append("token", token)
+			this.uploadInst.post(params.url, fd)
+				.then(response => {
+					resolve(response)
+				}).catch(error => {
+					reject(error)
+				})
+		})
+	}
+	//集中处理get，post的respone
+	dealResponse(response, params) {
+		if (response.data.errCode) {
+			// console.log('delresponse-------',response)
+			if (this._errHanlders.length > 0) this.doErrHanlder(response, params)
+			if (params.fail) params.fail(response.data)
+		} else {
+			try {
+				if (params.success) {
+					params.success(response.data)
+				}
+				if (params.complete) params.complete(response.data)
+			} catch (e) {
+				// console.log('截获错误---------', e)
+			}
+		}
+		this.completeSDK(response, params)
+	}
+
+	// 错误回调 这里的错误是指 服务器端 的特定错误
+	doErrHanlder(res, params) {
+		console.log('处理指定错误------', res, params)
+		if (res.data && res.data.errCode) {
+			this._errHanlders.forEach(h => {
+				if (res.data.errCode === h.errCode) // 判断 错误编码是否匹配
+					h.action(res.data, params) // 回调
+			})
+		}
+	}
+
+	// 检查参数
+	checkParams(params) {
+		// console.log('throw error-------',params)
+		if (!params.api) throw new Error("api没有设置")
+	}
+	completeSDK(e, params) {
+		// console.log('----------------------------completeSDK----------------------------')
+		// console.log(e)
+		// console.log(params)
+		// console.log('----------------------------completeSDK end----------------------------')
+		// setTimeout(()=>{
+		//   Loading.service().close()
+		// },500)
+	}
+}
+
+export default new SDK()

src/store/index.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import sdk from "../sdk/index"
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	strict: true,
+	state: {
+		token: localStorage.getItem("token")
+	},
+	getters: {
+		token: state => state.token,
+	},
+	mutations: {
+		setToken(state, token) {
+			state.token = token
+		}
+	},
+	actions: {
+		login({ commit }, token) {
+			commit('setToken', token)
+			// commit('route/ROUTE_CHANGED',{to: {path: '/'}})
+		},
+		fetch({ state }, params) {
+			sdk.fetch(params, state.token)
+		},
+		upload({ state }, params) {
+			return sdk.uploadCustom(params, state.token)
+		}
+	}
+})

src/store/store-module.js

@@ -0,0 +1,7 @@
+export default {
+  namespaced: true,
+  state: {
+    title: 'vue-module'
+  },
+  mutations: {}
+}

src/views/About.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="about">
+    <h1>关于页面</h1>
+  </div>
+</template>
+<script>
+export default {
+  name: 'about',
+  mounted() {
+    setTimeout(() => {
+      this.$eventBus.emit('visitedAbout')
+    }, 500)
+  }
+}
+</script>
+

src/views/Home/Home.vue

@@ -0,0 +1,307 @@
+<template>
+    <div class="home">
+        <header class="header">
+            <div class="left">
+                慧牧科技
+                <el-button
+                    @click="onMenuCollapse"
+                    circle
+                    :icon="menuCollapse? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+                ></el-button>
+            </div>
+            <div class="right">
+                <span class="warp">
+                    <el-dropdown>
+                        <span class="el-dropdown-link">
+                            账号管理
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item>退出登录</el-dropdown-item>
+                            <el-dropdown-item>切换账号</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </span>
+                <span>
+                    <el-dropdown>
+                        <span class="el-dropdown-link">
+                            权限切换
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item disabled>权限一</el-dropdown-item>
+                            <el-dropdown-item divided>权限二</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </span>
+            </div>
+        </header>
+        <section class="section">
+            <div class="tac">
+                <div class="col1">
+                    <el-menu
+                        default-active="2"
+                        class="el-menu-vertical-demo"
+                        @open="handleOpen"
+                        @close="handleClose"
+                        :collapse="menuCollapse"
+                        :unique-opened="true"
+                        :default-openeds="defaultUnfoldedMenu"
+                        select="1-1"
+                        background-color="#545c64"
+                        text-color="#fff"
+                        active-text-color="#ffd04b"
+                    >
+                        <div v-for="(item) in menuData " :key="item.index">
+                            <el-submenu
+                                v-if="item.childList && item.childList.length > 0"
+                                :index="item.index"
+                            >
+                                <template slot="title">
+                                    <i :class="item.iconClassName"></i>
+                                    <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
+                                    <!-- <span slot="title">{{ item.oneMenuName }}</span> -->
+                                </template>
+                                <el-menu-item
+                                    v-for="(item1) in item.childList"
+                                    :key="item1.index"
+                                    :index="item1.index"
+                                    :routerName="item1.routerName"
+                                    @click="onClickMenu(item1)"
+                                >{{ item1.optionName }}</el-menu-item>
+                            </el-submenu>
+                            <el-menu-item
+                                v-else
+                                :index="item.index"
+                                :disabled="item.disabled"
+                                :routerName="item.routerName"
+                                @click="onClickMenu(item)"
+                            >
+                                <i :class="item.iconClassName"></i>
+                                <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
+                            </el-menu-item>
+                        </div>
+                    </el-menu>
+                </div>
+                <div class="col2">
+                    <header class="col2_header">
+                        <el-tag
+                            v-for="tag in tags"
+                            :key="tag.routerName"
+                            closable
+                            @close="close(tag)"
+                            @click="clickTag(tag)"
+                            :type="tag.type?tag.type:'info'"
+                            class="item"
+                        >{{tag.name}}</el-tag>
+                    </header>
+                    <div class="warp">
+                        <router-view />
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import { menuData } from "./mencCofig.js";
+
+export default {
+    data() {
+        return {
+            // 菜单配置
+            menuData,
+            menuCollapse: false, //是否水平折叠收起菜单
+            defaultUnfoldedMenu: [menuData[0].index], // 默认展开第一项
+            tags: []
+        };
+    },
+    created() {
+        this.defaultUnfoldedMenu = [
+            localStorage.getItem("defaultUnfoldedMenu")
+        ];
+        this.menuCollapse = JSON.parse(localStorage.getItem("menuCollapse"));
+        this.tags = JSON.parse(localStorage.getItem("tagsNavList")) || [
+            { name: "设备类型", routerName: "deviceInfo", key: "0" }
+        ];
+    },
+    methods: {
+        // 收取菜单按钮
+        onMenuCollapse() {
+            this.menuCollapse = !this.menuCollapse;
+            localStorage.setItem("menuCollapse", this.menuCollapse);
+            this.defaultUnfoldedMenu = [
+                localStorage.getItem("defaultUnfoldedMenu")
+            ];
+        },
+        // 菜单展开
+        handleOpen(key, keyPath) {
+            console.log(key, keyPath);
+            localStorage.setItem("defaultUnfoldedMenu", "" + key);
+        },
+        // 菜单收取
+        handleClose(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        // 点击菜单项
+        onClickMenu(item) {
+            let _this = this;
+            // 如果要跳转的路由和当前路由一致就 return
+            if (this.$router.history.current.name == item.routerName) return;
+            this.$router.push({
+                name: item.routerName
+            });
+            // 如果tags中已经存在 return
+            let temp = includes(item.routerName);
+            if (temp) {
+                this.tags.forEach(item => {
+                    item.type = "info";
+                });
+                temp.type = "success";
+                return;
+            }
+            this.tags.forEach(item => {
+                item.type = "info";
+            });
+            this.tags.push({
+                name: item.optionName,
+                routerName: item.routerName,
+                type: "success"
+            });
+
+            this.changeTagColor(item.routerName);
+            localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
+            // 查看当前 tags里有没有传进来的路由，返回 true false
+
+            function includes(routerName) {
+                let tags = _this.tags;
+                return tags.find(item => {
+                    return item.routerName == routerName;
+                });
+            }
+        },
+        // 点击 tag
+        clickTag(tag) {
+            console.log(tag.routerName);
+            if (this.$router.history.current.name == tag.routerName) return;
+            this.$router.push({
+                name: tag.routerName
+            });
+            this.changeTagColor(tag.routerName);
+            localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
+        },
+        // 点击 tag 的小×
+        close(tag) {
+            console.log(tag);
+            let spliceIndex = this.tags.findIndex(item => {
+                return item.routerName == tag.routerName;
+            });
+            console.log(spliceIndex);
+            this.tags.splice(spliceIndex, 1);
+            localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
+        },
+        // 改变tag的颜色 公用的
+        changeTagColor(routerName) {
+            this.tags.forEach(item => {
+                if (item.routerName == routerName) {
+                    item.type = "success";
+                } else {
+                    item.type = "info";
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    background-color: #eee;
+    display: flex;
+    flex-direction: column;
+    .header {
+        background-color: #029b62;
+        height: 40px;
+        padding: 10px 20px;
+        margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .left {
+            font-size: 25px;
+            color: #fff;
+            /deep/ .is-circle {
+                margin-left: 40px;
+            }
+        }
+        .right {
+            .warp {
+                margin-right: 20px;
+            }
+        }
+    }
+    .section {
+        flex: 1;
+        box-sizing: border-box;
+        overflow: auto;
+        .tac {
+            flex: 1;
+            display: flex;
+            height: 96%;
+            box-sizing: border-box;
+            .col1 {
+                margin-right: 5px;
+                border-radius: 5px;
+            }
+            .col2 {
+                flex: 1;
+                background-color: #fff;
+                padding: 0 15px 15px 15px;
+                border-radius: 5px;
+                margin-right: 5px;
+                height: 100%;
+                overflow: auto;
+                .col2_header {
+                    position: relative;
+                    width: 85%;
+                    height: 50px;
+                    overflow: hidden;
+                    border-bottom: 2px solid #eee;
+                    background-color: #fff;
+                    padding: 10px;
+                    display: flex;
+                    align-items: center;
+                    box-sizing: border-box;
+                    z-index: 1;
+                    position: fixed;
+                    .item {
+                        margin-right: 8px;
+                    }
+                }
+                .warp {
+                    margin: 15px;
+                    padding-top: 55px;
+                }
+            }
+        }
+    }
+    // border: 1px solid #f00;
+}
+
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+}
+// 下拉菜单
+.el-dropdown-link {
+    cursor: pointer;
+    color: #fff;
+}
+.el-icon-arrow-down {
+    font-size: 12px;
+}
+</style>

src/views/Home/mencCofig.js

@@ -0,0 +1,250 @@
+
+export const menuData = [
+    // 有子菜单 字菜单不分组的
+    {
+        oneMenuName: "档案管理",
+        iconClassName: "el-icon-setting",
+        index: '1',
+        disabled: false, // 是否禁用
+        childList: [
+            {
+                optionName: '企业信息',
+                index: '1-1',
+                routerName: "aa"
+            },
+            {
+                optionName: '牧场信息',
+                index: '1-2',
+                routerName: "aa"
+            },
+            {
+                optionName: '猪舍信息',
+                index: '1-3',
+                routerName: "aa"
+            },
+            {
+                optionName: '人员信息',
+                index: '1-4',
+                routerName: "aa"
+            }
+            
+        ]
+    },
+    
+    {
+        oneMenuName: "群体管理",
+        iconClassName: "el-icon-s-flag",
+        index: '2',
+        disabled: false,
+        childList: [ 
+            {
+                optionName: '群体档案',
+                index: '2-1',
+                routerName: "GroupRecord"
+            },
+            {
+                optionName: '健康分析',
+                index: '2-2',
+                routerName: "aa"
+            },
+            {
+                optionName: '转群记录',
+                index: '2-3',
+                routerName: "aa"
+            },
+            {
+                optionName: '群体盘点',
+                index: '2-4',
+                routerName: "aa"
+            }
+        ]
+    },
+    // 无子菜单的
+    {
+        oneMenuName: "个体管理",
+        iconClassName: "el-icon-message",
+        index: '3',
+        disabled: false,
+        childList: [ 
+            {
+                optionName: '种猪档案',
+                index: '3-1',
+                routerName: "aa"
+            },
+            {
+                optionName: '个体追踪',
+                index: '3-2',
+                routerName: "UnityTrace"
+            }
+            
+            
+        ]
+    },
+    {
+        oneMenuName: "系统配置",
+        iconClassName: "el-icon-coordinate",
+        index: '4',
+        disabled: false,
+        childList: [ 
+            {
+                optionName: '设备配置',
+                index: '4-1',
+                routerName: "aa"
+            },
+            {
+                optionName: '软件设置',
+                index: '4-2',
+                routerName: "aa"
+            },
+            {
+                optionName: '角色设置',
+                index: '4-3',
+                routerName: "aa"
+            },
+            {
+                optionName: '权限管理',
+                index: '4-4',
+                routerName: "aa"
+            }
+        ]
+    },
+    {
+        oneMenuName: "系统设置",
+        iconClassName: "el-icon-monitor",
+        index: '5',
+        disabled: false, // 是否禁用
+        childList: [ 
+            {
+                optionName: '群体广播',
+                index: '5-1',
+                routerName: "aa"
+            },
+            {
+                optionName: '设备配置',
+                index: '5-2',
+                routerName: "aa"
+            },
+            {
+                optionName: '系统参数',
+                index: '5-3',
+                routerName: "aa"
+            },
+            {
+                optionName: '角色配置',
+                index: '5-4',
+                routerName: "aa"
+            },
+            {
+                optionName: '权限分配',
+                index: '5-5',
+                routerName: "aa"
+            }
+        ]
+    },
+    {
+        oneMenuName: "开发用模板",
+        iconClassName: "el-icon-menu",
+        index: '100',
+        disabled: false, // 是否禁用
+        childList: [ 
+            {
+                optionName: '模板 1',
+                index: '100-1',
+                routerName: "aa"
+            },
+            {
+                optionName: '普通表格',
+                index: '100-2',
+                routerName: "ab"
+            },
+            {
+                optionName: '模板 3',
+                index: '100-3',
+                routerName: "ac"
+            },
+            {
+                optionName: '模板 4',
+                index: '100-4',
+                routerName: "ad"
+            },
+            {
+                optionName: '模板 5',
+                index: '100-5',
+                routerName: "ee"
+            },
+            {
+                optionName: '模板 6',
+                index: '100-6',
+                routerName: "af"
+            }
+            
+        ]
+    },
+    
+]
+
+// export default {menuData}
+
+
+
+
+/* 菜单配置 描述 */
+const menuData描述 = [
+    // 有子菜单 并且字菜单分组的
+    {
+        oneMenuName: "导航一", // 一级菜单名
+        iconClassName: "aaa", // element-ui图标名
+        index: '1', // 唯一标志
+        childList: [ // 分组的
+            {
+                groupName: '组名一',
+                index: '1-1-1',
+                list: [
+                    {
+                        optionName: '选项1',
+                        routerName: "home"
+                    },
+                    {}
+                ],
+            },
+            {
+                groupName: '组名二',
+                index: '1-1-2',
+                list: [
+                    {
+                        optionName: '选项1',
+                        routerName: "home"
+                    },
+                    {}
+                ],
+            }
+        ],
+    },
+    // 有子菜单 字菜单不分组的
+    {
+        oneMenuName: "导航二",
+        iconClassName: "el-icon-menu",
+        index: '2',
+        disabled: false, // 是否禁用
+        childList: [ // 不分组的
+            {
+                optionName: '选项1',
+                index: '2-1',
+                routerName: "home"
+            },
+            {}
+        ]
+    },
+    // 无子菜单的
+    {
+        oneMenuName: "导航三",
+        iconClassName: "el-icon-document",
+        routerName: "home",
+        index: '3',
+        disabled: false
+    },
+    
+    "导航四"
+]
+
+

src/views/Login/Login.vue

@@ -0,0 +1,198 @@
+<template>
+    <div class="login">
+        <div class="shade">
+            <header class="header">
+                <img class="logo" src="../../assets/logo.png" alt="慧牧科技LOGO" />
+                慧牧科技
+            </header>
+            <article class="article">
+                <h1>登录界面</h1>
+                <el-form label-position="right" label-width="80px" :model="form">
+                    <el-form-item label="账号：">
+                        <el-input v-model="form.userName" placeholder="请输入账号"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码：">
+                        <el-input v-model="form.userPwd" placeholder="请输入密码" show-password></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSignIn">登录</el-button>
+                    </el-form-item>
+                </el-form>
+            </article>
+            <el-dialog title="请选择一个组织" :visible.sync="isShowDialog" append-to-body>
+                <el-select v-model="orgSelected">
+                    <el-option
+                        v-for="item in orgList"
+                        :key="item.id"
+                        :value="item.id"
+                        :label="item.orgName"
+                    ></el-option>
+                </el-select>
+                <div slot="footer">
+                    <el-button @click="isShowDialog=false">取 消</el-button>
+                    <el-button type="primary" @click="handleSet">设置</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+import sdk from "../../sdk/index";
+
+import { reqLogin, reqOrgChoose } from "../../api/login";
+
+export default {
+    name: "login",
+    data() {
+        return {
+            form: {
+                userName: "yjj",
+                userPwd: "147414"
+            },
+            isShowDialog: false,
+            orgList: null,
+            orgSelected: null
+        };
+    },
+    created() {
+        //注册一个登录失败的事件
+        sdk.regErrHanlder({
+            errCode: "login_failed",
+            action: e => {
+                if (e.errMsg) {
+                    this.$message.error(e.errMsg);
+                }
+            }
+        });
+    },
+    methods: {
+        ...mapActions(["login", "fetch"]),
+        onSignIn() {
+            console.log(this.form)
+            reqLogin(this.form).then(res => {
+                console.log(res)
+                localStorage.setItem("token", res.token)
+            })
+        },
+
+
+        
+        handleSet: function() {
+            if (!this.orgSelected) {
+                this.$message.info("请先选择组织");
+            } else this.setOrganizationId(this.orgSelected);
+        },
+        /* 登录按钮 */
+        // onSignIn() {
+        //     this.fetch({
+        //         api: "/core/auth/login",
+        //         method: "POST",
+        //         data: this.form,
+        //         success: res => {
+        //             console.log("登录结果", res);
+        //             localStorage.setItem("token", res.token)
+        //             this.login(res.token);
+        //             // 显示一个dialog 让用户选择组
+        //             this.doOrganizationChoose();
+        //         },
+        //         fail: err => {
+        //             console.log("登录失败", err);
+        //         }
+        //     });
+        // },
+
+        reqOrgChoose() {},
+        doOrganizationChoose() {
+            this.loading = true;
+            this.fetch({
+                api: "/core/employ-relation/under-list",
+                method: "GET",
+                success: res => {
+                    if (res == null || res.length == 0) {
+                        this.$message.info("您没有加入任何组织!");
+                    } else if (res.length > 1) {
+                        this.isShowDialog = true;
+                        this.orgList = res;
+                    } else {
+                        this.setOrganizationId(res[0].id);
+                    }
+                },
+                fail: err => {},
+                complete: res => {
+                    this.loading = false;
+                }
+            });
+        },
+        setOrganizationId(id) {
+            if (!id) {
+                this.$message.error("发生了一点不愉快的错误！");
+                return;
+            }
+            this.loading = true;
+            this.fetch({
+                api: "/core/auth/choose-org",
+                method: "POST",
+                data: { orgId: id },
+                success: res => {
+                    this.isShowDialog = false;
+                    //导航到 正式页面
+                    this.$router.replace("/home");
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                },
+                complete: res => {
+                    this.loading = false;
+                }
+            });
+        }
+    },
+    mounted() {}
+};
+</script>
+
+<style lang="scss" scoped>
+.login {
+    width: 100%;
+    height: 100%;
+    background: url(../../assets/login_bg.jpg) 0 0 no-repeat;
+    background-size: 100%;
+    .shade {
+        height: 100%;
+        width: 100%;
+        background-color: #8899aa44;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .header {
+            font-size: 60px;
+            color: #eee;
+            margin: 180px 0 50px 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .logo {
+                height: 70px;
+                width: 70px;
+                margin-right: 20px;
+            }
+        }
+        .article {
+            width: 400px;
+            background-color: #ffffff44;
+            padding: 20px 60px 40px 20px;
+            border-radius: 20px;
+            h1 {
+                font-size: 20px;
+                color: #eee;
+                margin-left: 25px;
+            }
+            /deep/ .el-form-item .el-form-item__label {
+                color: #eee;
+            }
+        }
+    }
+}
+</style>

src/views/common/rtsp-player/index.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <video id="video" style="width: 100%"></video>
+        <canvas id="canvas" style="display: none"></canvas>
+        <canvas id="draw" style="display: none"></canvas>
+    </div>
+</template>
+
+<script>
+import Player from "./libs/player";
+
+export default {
+    name: "index",
+    props: ["rtspData"],
+    data() {
+        return {
+            options: {
+                video: null,
+                canvas: null,
+                drawer: null,
+                wsUrl: null,
+                rtspUrl: null
+            },
+            player: null
+        };
+    },
+    watch: {
+        rtspData: {
+            handler(nv, ov) {
+                console.log("新值1->", nv);
+                if (
+                    nv != null &&
+                    nv.rtsp &&
+                    nv.ws &&
+                    /rtsp:\/\/.+/.test(nv.rtsp) &&
+                    /ws:\/\/.+/.test(nv.ws)
+                ) {
+                    console.log("新值2->", nv);
+                    this.options.wsUrl = nv.ws;
+                    this.options.rtspUrl = nv.rtsp;
+
+                    if (
+                        this.options.video &&
+                        this.options.wsUrl &&
+                        this.options.rtspUrl
+                    ) {
+                        console.log("---watch player---");
+                        this.createPlayer();
+                    }
+                }
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        console.log("--mounted--");
+        this.options.video = document.getElementById("video");
+        this.options.canvas = document.getElementById("canvas");
+        this.options.drawer = document.getElementById("draw");
+        //this.player.connect()
+        if (this.options.rtspUrl && this.options.wsUrl) {
+            console.log("---mounted player---");
+            //直接播放
+            this.createPlayer();
+        }
+    },
+    destroyed() {
+        if (this.player) this.player.close();
+    },
+    methods: {
+        createPlayer() {
+            if (this.player != null) this.player.close();
+            this.player = new Player(this.options);
+            this.player.init(this);
+            this.player.on("error", function() {
+                console.log("连接失败");
+            });
+            this.player.on("noStream", function() {
+                console.log("noStream");
+                this.player.close();
+                this.player = null;
+                this.player = new Player(this.options);
+                this.player.init();
+                this.player.connect();
+            });
+
+            this.player.on("canplay", function() {
+                //player.close();
+            });
+
+            this.player.on("initialCompleted", function() {
+                // let data = [[
+                //     {x: 2861, y: 4395},
+                //     {x: 6403, y: 4013},
+                //     {x: 3260, y: 7986},
+                //     {x: 640, y: 6252}
+                // ]];
+                // console.log('initialCompleted')
+                // player.setROI(data);
+            });
+
+            this.player.on("ROIFinished", function() {
+                console.log("ROIFinished");
+            });
+            this.player.connect();
+        },
+        close() {
+            player.close();
+        }
+    }
+};
+</script>
+
+<style scoped>
+</style>

src/views/common/rtsp-player/libs/MP4Remux.js

@@ -0,0 +1,573 @@
+let _dtsBase;
+let _types = [];
+let datas = {};
+
+_types = {
+    avc1: [], avcC: [], btrt: [], dinf: [],
+    dref: [], esds: [], ftyp: [], hdlr: [],
+    mdat: [], mdhd: [], mdia: [], mfhd: [],
+    minf: [], moof: [], moov: [], mp4a: [],
+    mvex: [], mvhd: [], sdtp: [], stbl: [],
+    stco: [], stsc: [], stsd: [], stsz: [],
+    stts: [], tfdt: [], tfhd: [], traf: [],
+    trak: [], trun: [], trex: [], tkhd: [],
+    vmhd: [], smhd: []
+};
+
+class MP4Remux {
+    constructor() {
+
+    }
+
+    init() {
+        for (let name in _types) {
+            _types[name] = [
+                name.charCodeAt(0),
+                name.charCodeAt(1),
+                name.charCodeAt(2),
+                name.charCodeAt(3)
+            ];
+        }
+
+        _dtsBase = 0;
+
+        datas.FTYP = new Uint8Array([
+            0x69, 0x73, 0x6F, 0x6D, // major_brand: isom
+            0x0, 0x0, 0x0, 0x1,  // minor_version: 0x01
+            0x69, 0x73, 0x6F, 0x6D, // isom
+            0x61, 0x76, 0x63, 0x31  // avc1
+        ]);
+
+        datas.STSD_PREFIX = new Uint8Array([
+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
+            0x00, 0x00, 0x00, 0x01  // entry_count
+        ]);
+
+        datas.STTS = new Uint8Array([
+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
+            0x00, 0x00, 0x00, 0x00  // entry_count
+        ]);
+
+        datas.STSC = datas.STCO = datas.STTS;
+
+        datas.STSZ = new Uint8Array([
+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
+            0x00, 0x00, 0x00, 0x00, // sample_size
+            0x00, 0x00, 0x00, 0x00  // sample_count
+        ]);
+
+        datas.HDLR_VIDEO = new Uint8Array([
+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
+            0x00, 0x00, 0x00, 0x00, // pre_defined
+            0x76, 0x69, 0x64, 0x65, // handler_type: 'vide'
+            0x00, 0x00, 0x00, 0x00, // reserved: 3 * 4 bytes
+            0x00, 0x00, 0x00, 0x00,
+            0x00, 0x00, 0x00, 0x00,
+            0x56, 0x69, 0x64, 0x65,
+            0x6F, 0x48, 0x61, 0x6E,
+            0x64, 0x6C, 0x65, 0x72, 0x00 // name: VideoHandler
+        ]);
+
+        datas.HDLR_AUDIO = new Uint8Array([
+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
+            0x00, 0x00, 0x00, 0x00, // pre_defined
+            0x73, 0x6F, 0x75, 0x6E, // handler_type: 'soun'
+            0x00, 0x00, 0x00, 0x00, // reserved: 3 * 4 bytes
+            0x00, 0x00, 0x00, 0x00,
+            0x00, 0x00, 0x00, 0x00,
+            0x53, 0x6F, 0x75, 0x6E,
+            0x64, 0x48, 0x61, 0x6E,
+            0x64, 0x6C, 0x65, 0x72, 0x00 // name: SoundHandler
+        ]);
+
+        datas.DREF = new Uint8Array([
+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
+            0x00, 0x00, 0x00, 0x01, // entry_count
+            0x00, 0x00, 0x00, 0x0C, // entry_size
+            0x75, 0x72, 0x6C, 0x20, // type 'url '
+            0x00, 0x00, 0x00, 0x01  // version(0) + flags
+        ]);
+
+        // Sound media header
+        datas.SMHD = new Uint8Array([
+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
+            0x00, 0x00, 0x00, 0x00  // balance(2) + reserved(2)
+        ]);
+
+        // video media header
+        datas.VMHD = new Uint8Array([
+            0x00, 0x00, 0x00, 0x01, // version(0) + flags
+            0x00, 0x00,             // graphicsmode: 2 bytes
+            0x00, 0x00, 0x00, 0x00, // opcolor: 3 * 2 bytes
+            0x00, 0x00
+        ]);
+    }
+
+    initSegment(meta) {
+        let ftyp = box(_types.ftyp, datas.FTYP);
+        let moov = Moov(meta);
+        let seg = new Uint8Array(ftyp.byteLength + moov.byteLength);
+        seg.set(ftyp, 0);
+        seg.set(moov, ftyp.byteLength);
+        return seg;
+    }
+
+    mediaSegment(sequenceNumber, track, data) {
+        let moof = Moof(sequenceNumber, track);
+        let frameData = mdat(data);
+        let seg = new Uint8Array(moof.byteLength + frameData.byteLength);
+        seg.set(moof, 0);
+        seg.set(frameData, moof.byteLength);
+        return seg
+    }
+}
+
+//组装initSegment
+
+function Moov(meta) {
+    let mvhd = Mvhd(meta.timescale, meta.duration);
+    let trak = Trak(meta);
+    let mvex = Mvex(meta);
+
+    return box(_types.moov, mvhd, trak, mvex);
+}
+
+//组装moov
+function Mvhd(timescale, duration) {
+    return box(_types.mvhd, new Uint8Array([
+        0x00, 0x00, 0x00, 0x00,    // version(0) + flags
+        0x00, 0x00, 0x00, 0x00,    // creation_time
+        0x00, 0x00, 0x00, 0x00,    // modification_time
+        (timescale >>> 24) & 0xFF, // timescale: 4 bytes
+        (timescale >>> 16) & 0xFF,
+        (timescale >>>  8) & 0xFF,
+        (timescale) & 0xFF,
+        (duration >>> 24) & 0xFF,  // duration: 4 bytes
+        (duration >>> 16) & 0xFF,
+        (duration >>>  8) & 0xFF,
+        (duration) & 0xFF,
+        0x00, 0x01, 0x00, 0x00,    // Preferred rate: 1.0
+        0x01, 0x00, 0x00, 0x00,    // PreferredVolume(1.0, 2bytes) + reserved(2bytes)
+        0x00, 0x00, 0x00, 0x00,    // reserved: 4 + 4 bytes
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x01, 0x00, 0x00,    // ----begin composition matrix----
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x01, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x40, 0x00, 0x00, 0x00,    // ----end composition matrix----
+        0x00, 0x00, 0x00, 0x00,    // ----begin pre_defined 6 * 4 bytes----
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,    // ----end pre_defined 6 * 4 bytes----
+        0xFF, 0xFF, 0xFF, 0xFF     // next_track_ID
+    ]));
+}
+
+function Trak(meta) {
+    return box(_types.trak, Tkhd(meta), Mdia(meta));
+}
+
+function Mvex(meta) {
+    return box(_types.mvex, trex(meta));
+}
+
+//组装trak
+function Tkhd(meta) {
+    let trackId = meta.id;
+    let duration = meta.duration;
+    let width = meta.width;
+    let height = meta.height;
+
+    return box(_types.tkhd, new Uint8Array([
+        0x00, 0x00, 0x00, 0x07,   // version(0) + flags
+        0x00, 0x00, 0x00, 0x00,   // creation_time
+        0x00, 0x00, 0x00, 0x00,   // modification_time
+        (trackId >>> 24) & 0xFF,  // track_ID: 4 bytes
+        (trackId >>> 16) & 0xFF,
+        (trackId >>>  8) & 0xFF,
+        (trackId) & 0xFF,
+        0x00, 0x00, 0x00, 0x00,   // reserved: 4 bytes
+        (duration >>> 24) & 0xFF, // duration: 4 bytes
+        (duration >>> 16) & 0xFF,
+        (duration >>>  8) & 0xFF,
+        (duration) & 0xFF,
+        0x00, 0x00, 0x00, 0x00,   // reserved: 2 * 4 bytes
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,   // layer(2bytes) + alternate_group(2bytes)
+        0x00, 0x00, 0x00, 0x00,   // volume(2bytes) + reserved(2bytes)
+        0x00, 0x01, 0x00, 0x00,   // ----begin composition matrix----
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x01, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00,
+        0x40, 0x00, 0x00, 0x00,   // ----end composition matrix----
+        (width >>> 8) & 0xFF,     // width and height
+        (width) & 0xFF,
+        0x00, 0x00,
+        (height >>> 8) & 0xFF,
+        (height) & 0xFF,
+        0x00, 0x00
+    ]));
+}
+
+function Mdia(meta) {
+    return box(_types.mdia, mdhd(meta), hdlr(meta), minf(meta));
+}
+
+//组装mdia
+function mdhd(meta) {
+    let timescale = meta.timescale;
+    let duration = meta.duration;
+
+    return box(_types.mdhd, new Uint8Array([
+        0x00, 0x00, 0x00, 0x00,    // version(0) + flags
+        0x00, 0x00, 0x00, 0x00,    // creation_time
+        0x00, 0x00, 0x00, 0x00,    // modification_time
+        (timescale >>> 24) & 0xFF, // timescale: 4 bytes
+        (timescale >>> 16) & 0xFF,
+        (timescale >>>  8) & 0xFF,
+        (timescale) & 0xFF,
+        (duration >>> 24) & 0xFF,  // duration: 4 bytes
+        (duration >>> 16) & 0xFF,
+        (duration >>>  8) & 0xFF,
+        (duration) & 0xFF,
+        0x55, 0xC4,                // language: und (undetermined)
+        0x00, 0x00                 // pre_defined = 0
+    ]));
+}
+
+function hdlr(meta) {
+    let data = null;
+
+    if (meta.type === 'audio') {
+        data = datas.HDLR_AUDIO;
+    } else {
+        data = datas.HDLR_VIDEO;
+    }
+
+    return box(_types.hdlr, data);
+}
+
+function minf(meta) {
+    let xmhd = null;
+
+    if (meta.type === 'audio') {
+        xmhd = box(_types.smhd, datas.SMHD);
+    } else {
+        xmhd = box(_types.vmhd, datas.VMHD);
+    }
+
+    return box(_types.minf, xmhd, dinf(), stbl(meta));
+}
+
+//组装minf
+function dinf() {
+    return box(_types.dinf, box(_types.dref, datas.DREF));
+}
+
+function stbl(meta) {
+    let result = box(_types.stbl,   // type: stbl
+        stsd(meta),                   // Sample Description Table
+        box(_types.stts, datas.STTS), // Time-To-Sample
+        box(_types.stsc, datas.STSC), // Sample-To-Chunk
+        box(_types.stsz, datas.STSZ), // Sample size
+        box(_types.stco, datas.STCO)  // Chunk offset
+    );
+
+    return result;
+}
+
+//组装stbl
+function stsd(meta) {
+    if (meta.type === 'audio') {
+        return box(_types.stsd, datas.STSD_PREFIX, mp4a(meta));
+    } else {
+        return box(_types.stsd, datas.STSD_PREFIX, avc1(meta));
+    }
+}
+
+//组装stsd
+function mp4a(meta) {
+    let channelCount = meta.channelCount;
+    let sampleRate = meta.audioSampleRate;
+
+    let data = new Uint8Array([
+        0x00, 0x00, 0x00, 0x00,    // reserved(4)
+        0x00, 0x00, 0x00, 0x01,    // reserved(2) + data_reference_index(2)
+        0x00, 0x00, 0x00, 0x00,    // reserved: 2 * 4 bytes
+        0x00, 0x00, 0x00, 0x00,
+        0x00, channelCount,        // channelCount(2)
+        0x00, 0x10,                // sampleSize(2)
+        0x00, 0x00, 0x00, 0x00,    // reserved(4)
+        (sampleRate >>> 8) & 0xFF, // Audio sample rate
+        (sampleRate) & 0xFF,
+        0x00, 0x00
+    ]);
+
+    return box(_types.mp4a, data, esds(meta));
+}
+
+function avc1(meta) {
+    let width = meta.width;
+    let height = meta.height;
+
+    let sps = meta.sps || [], pps = meta.pps || [], sequenceParameterSets = [], pictureParameterSets = [];
+    for (let i = 0; i < sps.length; i++) {
+        sequenceParameterSets.push((sps[i].byteLength & 65280) >>> 8);
+        sequenceParameterSets.push(sps[i].byteLength & 255);
+        sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i]))
+    }
+    for (let i = 0; i < pps.length; i++) {
+        pictureParameterSets.push((pps[i].byteLength & 65280) >>> 8);
+        pictureParameterSets.push(pps[i].byteLength & 255);
+        pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]))
+    }
+
+    //Todo: 待测，如果视频有问题，修改这里
+    // let data = new Uint8Array([
+    //     0x00, 0x00, 0x00, 0x00, // reserved(4)
+    //     0x00, 0x00, 0x00, 0x01, // reserved(2) + data_reference_index(2)
+    //     0x00, 0x00, 0x00, 0x00, // pre_defined(2) + reserved(2)
+    //     0x00, 0x00, 0x00, 0x00, // pre_defined: 3 * 4 bytes
+    //     0x00, 0x00, 0x00, 0x00,
+    //     0x00, 0x00, 0x00, 0x00,
+    //     (width >>> 8) & 0xFF,   // width: 2 bytes
+    //     (width) & 0xFF,
+    //     (height >>> 8) & 0xFF,  // height: 2 bytes
+    //     (height) & 0xFF,
+    //     0x00, 0x48, 0x00, 0x00, // horizresolution: 4 bytes
+    //     0x00, 0x48, 0x00, 0x00, // vertresolution: 4 bytes
+    //     0x00, 0x00, 0x00, 0x00, // reserved: 4 bytes
+    //     0x00, 0x01,             // frame_count
+    //     0x0A,                   // strlen
+    //     0x78, 0x71, 0x71, 0x2F, // compressorname: 32 bytes
+    //     0x66, 0x6C, 0x76, 0x2E,
+    //     0x6A, 0x73, 0x00, 0x00,
+    //     0x00, 0x00, 0x00, 0x00,
+    //     0x00, 0x00, 0x00, 0x00,
+    //     0x00, 0x00, 0x00, 0x00,
+    //     0x00, 0x00, 0x00, 0x00,
+    //     0x00, 0x00, 0x00,
+    //     0x00, 0x18,             // depth
+    //     0xFF, 0xFF              // pre_defined = -1
+    // ]);
+
+    let data = new Uint8Array(
+        [0, 0, 0, 0,
+            0, 0, 0, 1,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            (65280 & width) >> 8,
+            255 & width,
+            (65280 & height) >> 8,
+            255 & height,
+            0, 72, 0, 0,
+            0, 72, 0, 0,
+            0, 0, 0, 0,
+            0, 1, 19, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 0,
+            0, 0, 0, 24, 17, 17]);
+
+    return box(_types.avc1, data, box(_types.avcC, new Uint8Array([1, meta.profileIdc, meta.profileCompatibility, meta.levelIdc, 255].concat([sps.length]).concat(sequenceParameterSets).concat([pps.length]).concat(pictureParameterSets))));
+}
+
+//组装mp4a
+function esds(meta) {
+    let config = meta.config;
+    let configSize = config.length;
+    let data = new Uint8Array([
+        0x00, 0x00, 0x00, 0x00, // version 0 + flags
+
+        0x03,                   // descriptor_type
+        0x17 + configSize,      // length3
+        0x00, 0x01,             // es_id
+        0x00,                   // stream_priority
+
+        0x04,                   // descriptor_type
+        0x0F + configSize,      // length
+        0x40,                   // codec: mpeg4_audio
+        0x15,                   // stream_type: Audio
+        0x00, 0x00, 0x00,       // buffer_size
+        0x00, 0x00, 0x00, 0x00, // maxBitrate
+        0x00, 0x00, 0x00, 0x00, // avgBitrate
+
+        0x05                    // descriptor_type
+    ].concat(
+        [configSize]
+    ).concat(
+        config
+    ).concat(
+        [0x06, 0x01, 0x02]      // GASpecificConfig
+    ));
+
+    return box(_types.esds, data);
+}
+
+//组装mvex
+function trex(meta) {
+    var trackId = meta.id;
+    var data = new Uint8Array([
+        0x00, 0x00, 0x00, 0x00,  // version(0) + flags
+        (trackId >>> 24) & 0xFF, // track_ID
+        (trackId >>> 16) & 0xFF,
+        (trackId >>>  8) & 0xFF,
+        (trackId) & 0xFF,
+        0x00, 0x00, 0x00, 0x01,  // default_sample_description_index
+        0x00, 0x00, 0x00, 0x00,  // default_sample_duration
+        0x00, 0x00, 0x00, 0x00,  // default_sample_size
+        0x00, 0x01, 0x00, 0x01   // default_sample_flags
+    ]);
+
+    return box(_types.trex, data);
+}
+
+//组装mediaSegment
+function Moof(sequenceNumber, track) {
+    return box(_types.moof, mfhd(sequenceNumber), traf(track));
+}
+
+function mdat(data) {
+    return box(_types.mdat, data);
+}
+
+//组装moof
+function mfhd(sequenceNumber) {
+    var data = new Uint8Array([
+        0x00, 0x00, 0x00, 0x00,
+        (sequenceNumber >>> 24) & 0xFF, // sequence_number: int32
+        (sequenceNumber >>> 16) & 0xFF,
+        (sequenceNumber >>>  8) & 0xFF,
+        (sequenceNumber) & 0xFF
+    ]);
+
+    return box(_types.mfhd, data);
+}
+
+function traf(track) {
+    //console.log(track)
+    var trackFragmentHeader = null, trackFragmentDecodeTime = null, trackFragmentRun = null, dataOffset = null;
+    trackFragmentHeader = box(_types.tfhd, new Uint8Array([0, 2, 0, 0, 0, 0, 0, 1]));
+    trackFragmentDecodeTime = box(_types.tfdt,
+        new Uint8Array([
+            0, 0, 0, 0,
+            track.baseMediaDecodeTime >>> 24 & 255,
+            track.baseMediaDecodeTime >>> 16 & 255,
+            track.baseMediaDecodeTime >>> 8 & 255,
+            track.baseMediaDecodeTime & 255
+        ]));
+    dataOffset = 16 + 16 + 8 + 16 + 8 + 8;
+    trackFragmentRun = trun(track, dataOffset);
+    return box(_types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun)
+}
+
+//组装traf
+function trun(track, offset) {
+    if (track.type === "audio") {
+        return audioTrun(track, offset)
+    }
+    return videoTrun(track, offset)
+}
+
+//组装trun
+function videoTrun(track, _offset) {
+    var bytes = null, samples = null, sample = null, i = 0;
+    var offset = _offset;
+    samples = track.samples || [];
+    if (samples[0].frameDuration === null) {
+        offset += 8 + 12 + 4 + 4 * samples.length;
+        bytes = trunHeader(samples, offset);
+        for (i = 0; i < samples.length; i++) {
+            sample = samples[i];
+            bytes = bytes.concat([(sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
+        }
+    } else {
+        offset += 8 + 12 + 4 + 4 * samples.length + 4 * samples.length;
+        bytes = trunHeader1(samples, offset);
+        for (i = 0; i < samples.length; i++) {
+            sample = samples[i];
+            bytes = bytes.concat([(sample.frameDuration & 4278190080) >>> 24, (sample.frameDuration & 16711680) >>> 16, (sample.frameDuration & 65280) >>> 8, sample.frameDuration & 255, (sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
+        }
+    }
+    return box(_types.trun, new Uint8Array(bytes))
+}
+
+function audioTrun(track, _offset) {
+    var bytes = null, samples = null, sample = null, i = 0;
+    var offset = _offset;
+    samples = track.samples || [];
+    offset += 8 + 12 + 8 * samples.length;
+    bytes = trunHeader(samples, offset);
+    for (i = 0; i < samples.length; i++) {
+        sample = samples[i];
+        bytes = bytes.concat([(sample.duration & 4278190080) >>> 24, (sample.duration & 16711680) >>> 16, (sample.duration & 65280) >>> 8, sample.duration & 255, (sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
+    }
+    return box(_types.trun, new Uint8Array(bytes))
+}
+
+//组装videoTurn
+function trunHeader(samples, offset) {
+    return [0, 0, 2, 5, (samples.length & 4278190080) >>> 24, (samples.length & 16711680) >>> 16, (samples.length & 65280) >>> 8, samples.length & 255, (offset & 4278190080) >>> 24, (offset & 16711680) >>> 16, (offset & 65280) >>> 8, offset & 255, 0, 0, 0, 0]
+}
+
+function trunHeader1(samples, offset) {
+    return [0, 0, 3, 5, (samples.length & 4278190080) >>> 24, (samples.length & 16711680) >>> 16, (samples.length & 65280) >>> 8, samples.length & 255, (offset & 4278190080) >>> 24, (offset & 16711680) >>> 16, (offset & 65280) >>> 8, offset & 255, 0, 0, 0, 0]
+}
+
+/**
+ *
+ * @param type
+ * @returns {Uint8Array}
+ */
+function box(type, ...items) {
+    let size = 8;
+    //Todo: 测试一下这里
+    //let arrs = Array.prototype.slice.call(arguments, 1);
+    let arrs = [];
+    arrs.push(...items);
+    for (let i = 0; i < arrs.length; i++) {
+        size += arrs[i].byteLength;
+    }
+
+    let data = new Uint8Array(size);
+    let pos = 0;
+
+    // set size
+    data[pos++] = size >>> 24 & 0xFF;
+    data[pos++] = size >>> 16 & 0xFF;
+    data[pos++] = size >>> 8 & 0xFF;
+    data[pos++] = size & 0xFF;
+
+    // set type
+    data.set(type, pos);
+    pos += 4;
+
+    // set data
+    for (let i = 0; i < arrs.length; i++) {
+        data.set(arrs[i], pos);
+        pos += arrs[i].byteLength;
+    }
+
+    return data;
+}
+
+// let mp4Remux = new MP4Remux();
+// mp4Remux.init();
+
+export default MP4Remux;

src/views/common/rtsp-player/libs/MediaSource.js

@@ -0,0 +1,414 @@
+
+
+function VideoMediaSource(element) {
+    let videoElement = null;
+    let codecInfo = null;
+
+    let mediaSource = null;
+    let sourceBuffer = null;
+
+    let initSegmentData = null;
+
+    let ctrlDelayFlag = false;
+    let delay = 4;
+    const DELAY = 0.5;
+    let waitingCount = 0;
+    let time = 0;
+
+    let segmentWaitDecode = [];
+
+    let firstTimeStamp = null;
+    let isFirstTimeStamp = false;
+
+
+    let onDurationChangeCallback = null;
+    let onCanplayCallback = null;
+    let startPlay = false;
+
+    function constructor(element) {
+        videoElement = element;
+    }
+
+    constructor.prototype = {
+        init() {
+            videoElement.controls = false;
+            videoElement.autoplay = 'autoplay';
+            //videoElement.preload = "auto";
+            videoElement.muted = true;
+
+            addVideoEventListener(videoElement);
+
+            appendInitSegment();
+        },
+
+        setMediaSegment(mediaSegment) {
+            appendNextMediaSegment(mediaSegment)
+        },
+
+        setFirstTimeStamp(time) {
+            if(!isFirstTimeStamp) {
+                console.log('set firstTimeStamp:', time)
+                firstTimeStamp = time;
+                isFirstTimeStamp = true;
+            }
+        },
+
+        setDurationChangeCallBack(callback) {
+            onDurationChangeCallback = callback;
+        },
+
+        set CodecInfo(CodecInfo) {
+            codecInfo = CodecInfo;
+        },
+
+        get CodecInfo() {
+            return codecInfo;
+        },
+
+        set InitSegment(data) {
+            initSegmentData = data;
+        },
+
+        get InitSegment() {
+            return initSegmentData;
+        },
+
+        onCanplayCallback(callback) {
+            onCanplayCallback = callback;
+        },
+
+        close() {
+            videoElement.pause();
+            removeEventListener();
+            mediaSource.removeSourceBuffer(sourceBuffer);
+            mediaSource.endOfStream();
+            sourceBuffer = null;
+            mediaSource = null;
+            videoElement = null;
+        }
+    }
+
+    return new constructor(element);
+
+    function appendInitSegment() {
+        if(mediaSource == null || mediaSource.readyState === 'end') {
+            mediaSource = new MediaSource();
+            addMediaSourceEventListener(mediaSource);
+            videoElement.src = window.URL.createObjectURL(mediaSource);
+            //console.log('new MediaSource');
+            return;
+        }
+
+        //console.log('appendInitSegment start');
+        if(mediaSource.sourceBuffers.length === 0) {
+            mediaSource.duration = 0;
+            let codecs = 'video/mp4;codecs="avc1.' + codecInfo + '"';
+            if(!MediaSource.isTypeSupported(codecs)) {
+                //console.log('要播放视频格式 video/mp4;codecs="avc1.64002a", video/mp4;codecs="avc1.64002a"，您还需要安装一个额外的微软组件，参见 https://support.mozilla.org/kb/fix-video-audio-problems-firefox-windows')
+                console.log('not support ' + codecs)
+                return;
+            }
+            sourceBuffer = mediaSource.addSourceBuffer(codecs);
+            addSourceBufferEventListener(sourceBuffer);
+        }
+
+        let initSegment = initSegmentData;
+        if(initSegment == null) {
+            mediaSource.endOfStream();
+            console.log('no initSegmentData');
+        }
+        //console.log(sourceBuffer)
+        sourceBuffer.appendBuffer(initSegment);
+        //console.log(sourceBuffer)
+        // saveAs(new File(initSegment, "test"));
+        //  Savesegments.set(initSegment, 0);
+        //  segmentsLength += initSegment.length;
+        //  segmentsNum --;
+        console.log('appendInitSegment end')
+        checkDelay();
+    }
+
+    function appendNextMediaSegment(mediaData) {
+
+
+        if(sourceBuffer == null) {
+            segmentWaitDecode.push(mediaData);
+            return;
+        }
+        //console.log(mediaSource.readyState, mediaSource.readyState,sourceBuffer.updating)
+        if(mediaSource.readyState === 'closed' || mediaSource.readyState === "ended") {
+            console.log('mediaSource closed or ended')
+            return;
+        }
+
+        if(onDurationChangeCallback) {
+            //90000为采样率，先写死
+            let rtpTimestamp = parseInt((videoElement.currentTime.toFixed(2) * 90000).toFixed(0)) + firstTimeStamp + 3600;//
+            //console.log('callback time: ', rtpTimestamp)
+            //console.log('sourceBuffer: ', sourceBuffer.timestampOffset)
+            onDurationChangeCallback(rtpTimestamp);
+        }
+
+        //console.count('一帧');
+
+        //try {
+        if(segmentWaitDecode.length) {
+            segmentWaitDecode.push(mediaData);
+            //console.log(segmentWaitDecode)
+        }else {
+            if(!sourceBuffer.updating) {
+                sourceBuffer.appendBuffer(mediaData);
+            } else {
+                segmentWaitDecode.push(mediaData);
+            }
+        }
+        //}catch (e){
+        //    console.log('appendNextMediaSegment Error')
+        //}
+
+        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length &&  sourceBuffer.buffered.end(0) > DELAY) {
+            if(!startPlay) {
+                videoElement.play();
+                console.warn('playbakrate: ', videoElement.playbackRate)
+                ctrlDelayFlag = true;
+            }
+            startPlay = true;
+        } else {
+            if(!startPlay) {
+                videoElement.pause();
+            }
+        }
+        //console.log(sourceBuffer)
+    }
+
+    /**
+     * Video事件
+     * @param videoElement video对象
+     */
+    function addVideoEventListener(videoElement) {
+        videoElement.addEventListener('loadstart', onloadstart);
+
+        videoElement.addEventListener('waiting', onWaiting);
+
+        videoElement.addEventListener('durationchange', onDurationChange);
+
+        videoElement.addEventListener('timeupdate', timeupdate);
+
+        videoElement.addEventListener('canplay', oncanplay);
+
+        videoElement.addEventListener('canplaythrough', oncanplaythrough);
+
+        videoElement.addEventListener('error', onVideoError);
+
+        document.addEventListener('visibilitychange', onVisibilityChange);
+    }
+
+    function onVisibilityChange(e) {
+        if(document.visibilityState === 'visible') {
+            ctrlDelayFlag = true;
+            checkDelay();
+            videoElement.play();
+        } else {
+            ctrlDelayFlag = false;
+            videoElement.pause();
+        }
+        console.warn('visibilityState: ', document.visibilityState)
+    }
+
+    function onloadstart() {
+        console.log('loadstart');
+    }
+
+    function onDurationChange() {
+        //console.log('durationchange');
+        if (mediaSource === null) {
+            return;
+        }
+
+        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length > 0) {
+            checkBuffer();
+        }
+        //console.log('currentTime：', videoElement.currentTime);
+        // if(onDurationChangeCallback) {
+        //     //90000为采样率，先写死
+        //     let rtpTimestamp = videoElement.currentTime * 90000 + firstTimeStamp ;
+        //     //console.log('callback time: ', rtpTimestamp)
+        //     onDurationChangeCallback(rtpTimestamp);
+        // }
+
+        //try {
+
+        //}catch(e) {
+        //    console.log('sourceBuffer has been moved')
+        //}
+
+    }
+
+    function checkDelay() {
+        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length > 0) {
+            if(ctrlDelayFlag) {
+                let startTime = sourceBuffer.buffered.start(0);
+                let endTime = sourceBuffer.buffered.end(0);
+                let diffTime = (videoElement.currentTime === 0 ? endTime - startTime: endTime - videoElement.currentTime).toFixed(2);
+                if(diffTime >= delay + 0.5) {
+                    if(sourceBuffer.updating) {
+                        return;
+                    }
+                    let tempCurrntTime = endTime - delay;
+                    //console.log('跳秒前', videoElement.currentTime)
+                    videoElement.currentTime = tempCurrntTime.toFixed(3);
+                    //console.log('跳秒后', videoElement.currentTime, sourceBuffer.buffered.end(0), videoElement.duration)
+                    //ctrlDelayFlag = false;
+                } else if((diffTime < DELAY + 0.2 ) && diffTime >= DELAY) {
+                    //console.warn('playbackRate:', 1, diffTime)
+                    videoElement.playbackRate = 1;
+                }
+                else if(diffTime < DELAY) {
+                    //console.warn('playbackRate:', 0.9, diffTime)
+                    videoElement.playbackRate = 0.9;
+                }else {
+                    //console.warn('playbackRate:', 1.1, diffTime)
+                    videoElement.playbackRate = 1.1;
+                }
+            }
+        }
+        window.requestAnimationFrame(checkDelay);
+    }
+
+    function timeupdate() {
+        // console.log('******timeupdate******');
+        // console.log(videoElement.currentTime);
+        // console.log('******timeupdate end******')
+    }
+
+    function oncanplay() {
+        // if(isFirstTimeStamp && (firstTimeStamp == null)) {
+        //     //firstTimeStamp =
+        //     isFirstTimeStamp = false;
+        // }
+
+        onCanplayCallback && onCanplayCallback(videoElement);
+        // console.log('canplay');
+    }
+
+    function oncanplaythrough() {
+        if(document.visibilityState === 'visible' && startPlay){ctrlDelayFlag = true};
+        // console.log('canplaythrough');
+    }
+
+    function onVideoError() {
+        console.error('error');
+        //console.log(e)
+        console.error(videoElement.currentTime);
+        console.error("Error " + videoElement.error.code + "; details: " + videoElement.error.message);
+    }
+
+
+    /**
+     * MediaSource事件
+     * @param mediaSource
+     */
+    function addMediaSourceEventListener(mediaSource) {
+        mediaSource.addEventListener('sourceopen', onSourceOpen);
+
+        mediaSource.addEventListener('error', onMediaSourceError);
+    }
+
+    function onSourceOpen() {
+        console.log('OnsourceOpen');
+        appendInitSegment(); //此处重新调用一次，是为了建立sourceBuffer
+    }
+
+    function onMediaSourceError() {
+        console.log('mediaSource error');
+        console.log(videoElement.currentTime)
+    }
+
+    /**
+     * sourceBuffer事件
+     */
+    function addSourceBufferEventListener(sourceBuffer) {
+        sourceBuffer.addEventListener('error', onSourceBufferError);
+
+        sourceBuffer.addEventListener('update', onUpdate);
+    }
+
+    function onSourceBufferError() {
+        console.log('sourceBuffer Error');
+        console.log(videoElement.currentTime)
+    }
+
+    function onUpdate() {
+        //console.log('sourceBuffer update');
+        if(segmentWaitDecode.length > 0) {
+            if(!sourceBuffer.updating) {
+                sourceBuffer.appendBuffer(segmentWaitDecode[0]);
+
+                //console.log('segmentWaitDecode:  ' + segmentWaitDecode.length)
+                segmentWaitDecode.shift();
+            }
+        }
+        //console.log(e)
+    }
+
+    function checkBuffer() {
+        let minute = 60;
+        let bufferTime = 30;
+        let startTime = sourceBuffer.buffered.start(0);
+        let endTime = sourceBuffer.buffered.end(0);
+        //console.log(endTime- videoElement.currentTime)
+        if (!sourceBuffer.updating && (endTime - startTime > minute)) {
+            sourceBuffer.remove(startTime, endTime - bufferTime);
+            videoElement.play();
+            console.log('remove buffer: ', startTime, ' - ', (endTime - bufferTime))
+        }else if(sourceBuffer.updating && (endTime - startTime > minute)) {
+            console.log('clear buffer failed!')
+        }
+    }
+
+    function onWaiting() {
+        // console.log('waiting....');
+        ctrlDelayFlag = false;
+        // if(delay < 0.7) {
+        //     if(waitingCount === 0) {
+        //         time = Date.now();
+        //         waitingCount++;
+        //     }else {
+        //         if((Date.now() - time) <= 5000) {
+        //             waitingCount ++;
+        //             if(waitingCount >= 5) {
+        //                 delay += 0.1;
+        //                 console.log('delay: ', delay);
+        //                 time = Date.now();
+        //                 waitingCount = 0;
+        //             }
+        //         } else {
+        //             waitingCount = 1;
+        //             time = Date.now();
+        //         }
+        //     }
+        // }
+    }
+
+    function removeEventListener() {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+        videoElement.removeEventListener('loadstart', onloadstart);
+        videoElement.removeEventListener('waiting', onWaiting);
+        videoElement.removeEventListener('durationchange', onDurationChange);
+        videoElement.removeEventListener('timeupdate', timeupdate);
+        videoElement.removeEventListener('canplay', oncanplay);
+        videoElement.removeEventListener('canplaythrough', oncanplaythrough);
+        videoElement.removeEventListener('error', onVideoError);
+
+        mediaSource.removeEventListener('sourceopen', onSourceOpen);
+        mediaSource.removeEventListener('error', onMediaSourceError);
+
+        sourceBuffer.removeEventListener('error', onSourceBufferError);
+        sourceBuffer.removeEventListener('update', onUpdate);
+    }
+
+}
+
+
+
+export default VideoMediaSource;

src/views/common/rtsp-player/libs/ROIDrawer.js

@@ -0,0 +1,629 @@
+import Drawer from './drawer.js';
+
+class ROIDrawer extends Drawer {
+    constructor(props) {
+        super(props);
+        this.currentState = 'end';
+        this.points = [];
+        this.polygons = [];
+        this.MAX_POLYGON = 1;
+        this.onDrawROIFinishedCallback = null;
+    }
+
+    _init() {
+        this.context.lineWidth = 2;
+        this.context.font = 'bold 20px Arial';
+
+        this.canvas.addEventListener('click', this._onClick.bind(this));
+        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
+        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
+    }
+
+    _onClick(e) {
+        switch (this.currentState) {
+            case 'begin':
+                this.points.push(getMousePos(this.canvas, e));
+                this.currentState = 'firstPoint';
+                break;
+            case 'firstPoint': // 防止初始点点两次
+                break;
+            case 'move':
+                this.currentState = 'points';
+                break;
+            case 'points':
+                let currentPoint = getMousePos(this.canvas, e);
+                if ((currentPoint.x === this.points[this.points.length - 1].x) && (currentPoint.y === this.points[this.points.length - 1].y)) {
+                    return;
+                }
+                this.points.push(currentPoint);
+                if (checkPolygon(this.points)) {
+                    this.points.pop();
+                }
+                //console.log(this.points);
+                break;
+            case 'end':
+                //console.log(this.points)
+                break;
+            default:
+                console.log('unknown state: ', this.currentState);
+                break;
+        }
+        // this._drawPolygons(this.points, true);
+    }
+
+    _oncontextmenu(e) {
+        e.preventDefault();
+        if (this.currentState === 'end') { //防止点击右键启动绘制
+            return;
+        }
+        if (this.points.length <= 2) {
+            this._resetPoints();
+        } else {
+            if ((this.points[0].x !== this.points[this.points.length - 1].x) || (this.points[0].y !== this.points[this.points.length - 1].y)) {
+                this.points.push(this.points[0]);
+            }
+            if (checkPolygon(this.points)) {
+                this.points.pop();
+            } else {
+                this.currentState = 'end';
+                this.polygons.push([...this.points]);
+                if (this.polygons.length < this.MAX_POLYGON) {
+                    this._resetPoints();
+                } else {
+                    this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
+                    this._drawPolygons([]);
+                }
+            }
+        }
+    }
+
+    _onmousemove(e) {
+        let pos = getMousePos(this.canvas, e);
+        //console.log('mousemove');
+        if (e.button === 0) {
+            if (this.currentState === 'firstPoint') {
+                this.currentState = 'move';
+                this.points.push(pos);
+            } else if (this.currentState === 'move') {
+                this.points.pop();
+                this.points.push(pos);
+            }
+            if (this.currentState !== 'end') {
+                this.points.push(pos);
+                this._drawPolygons(this.points);
+                this.points.pop();
+            } else {
+                //this._drawPolygons(this.points);
+            }
+            if (this.currentState === 'begin') {
+                this._drawText('区域' + (this.polygons.length + 1), pos.x, pos.y)
+            }
+        }
+    }
+
+    getROIData() {
+        if (this.currentState !== 'end') { //非完成状态
+            return null;
+        }
+        let polygons = [];
+        this.polygons.map((points, k) => {
+            let data = points.slice(0, points.length - 1);
+            data.map((point, k) => {
+                data[k] = this._to8191Coordinate(point, this.canvas);
+            });
+            polygons.push([...data]);
+        });
+
+        return polygons;
+    }
+
+    setROI(polygons) {
+        if (!polygons) {
+            return;
+        }
+        let data = [];
+        this.polygons = [];
+        polygons.map((points, k) => {
+            points.map((point, k) => {
+                let result = this._toRealCoordinate(point.x, point.y);
+                data[k] = { x: result[0], y: result[1] };
+            });
+            if (data.length) {
+                data[data.length] = data[0];
+            }
+            this.polygons.push([...data]);
+            data = [];
+        });
+        this.currentState = 'end';
+        this.points = [];
+        this._drawPolygons(this.points);
+    }
+
+    redrawROI() {
+        this._drawPolygons(this.points);
+    }
+
+    reset() {
+        this.currentState = 'begin';
+        this.polygons = [];
+        this.points.length = 0;
+        this._drawPolygons(this.points);
+    }
+
+    setROIFinishedCallback(callback) {
+        this.onDrawROIFinishedCallback = callback;
+    }
+
+    setPolygonNum(num) {
+        this.MAX_POLYGON = num;
+    }
+
+    terminate() {
+        this.clearCanvas();
+        this.canvas.width = 0;
+        this.canvas.height = 0;
+        this.currentState = 'end';
+        this.points.length = 0;
+        this.canvas.removeEventListener('click', this._onClick);
+        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
+        this.canvas.removeEventListener('mousemove', this._onmousemove);
+    }
+
+    _drawPolygons(points) {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.polygons.map((points, k) => {
+            this._drawPolygon(points);
+        });
+        this._drawPolygon(points);
+    }
+
+    _drawPolygon(points) {
+        if (!points.length) {
+            return;
+        }
+        const end = this.currentState === 'end';
+        //console.log(points)
+        this.context.strokeStyle = end ? '#0000ff' : "#ffff00";
+
+        this.context.beginPath();
+        this.context.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            this.context.lineTo(points[i].x, points[i].y);
+        }
+        if (end) {
+            // draw is done, fill polygon with a color
+            this.context.fillStyle = "rgba(255, 0, 0, 0.2)";
+            this.context.fill();
+        } else {
+            this.context.stroke();
+        }
+        this.context.closePath();
+
+        this.polygons.map((points, k) => {
+            this._drawText('区域' + (k + 1), points[0].x - 20, points[0].y - 10);
+        });
+    }
+
+    _resetPoints() {
+        this.currentState = 'begin';
+        this.points.length = 0;
+        this._drawPolygons(this.points);
+    }
+
+    _drawText(text, x, y) {
+        this.context.beginPath();
+        this.context.fillStyle = "rgba(255, 255, 0, 1)";
+        this.context.fillText(text, x, y);
+        this.context.closePath();
+    }
+
+}
+
+class StandingDrawer extends Drawer {
+    constructor(props) {
+        super(props);
+        this.currentState = 'end';
+        this.points = [];
+        this.onDrawROIFinishedCallback = null;
+    }
+
+    _init() {
+        this.context.lineWidth = 2;
+        this.context.font = 'bold 20px Arial';
+
+        this.canvas.addEventListener('click', this._onClick.bind(this));
+        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
+        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
+    }
+
+    _onClick(e) {
+        let pos = getMousePos(this.canvas, e);
+        switch (this.currentState) {
+            case 'begin':
+                this.points.push(pos);
+                this.currentState = 'firstPoint';
+                break;
+            case 'firstPoint': // 防止初始点点两次
+                break;
+            case 'move':
+                this.currentState = 'points';
+                break;
+            case 'points':
+                if (((pos.x === this.points[this.points.length - 1].x) && (pos.y === this.points[this.points.length - 1].y))
+                    || this.points.length > 6) {
+                    return;
+                }
+                this.points.push(pos);
+                let points = this.points.length > 4 ? this.points.slice(0, 4) : this.points;
+                if (checkPolygon(points)) {
+                    this.points.pop();
+                }
+                if (this.points.length === 6) {
+                    this.currentState = 'end';
+                    this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
+                }
+                this._drawArea(this.points);
+                break;
+            case 'end':
+                break;
+            default:
+                console.log('unknown state: ', this.currentState);
+                break;
+        }
+    }
+
+    _oncontextmenu(e) {
+        e.preventDefault();
+    }
+
+    _onmousemove(e) {
+        let pos = getMousePos(this.canvas, e);
+        if (e.button === 0) {
+            if (this.currentState === 'firstPoint') {
+                this.currentState = 'move';
+                this.points.push(pos);
+            } else if (this.currentState === 'move') {
+                this.points.pop();
+                this.points.push(pos);
+            }
+            if (this.currentState !== 'end') {
+                this.points.push(pos);
+                this._drawArea(this.points);
+                this.points.pop();
+            } else {
+            }
+            // if(this.currentState === 'begin') {
+            //     this._drawText('区域' + (this.polygons.length + 1), pos.x, pos.y)
+            // }
+        }
+    }
+
+    _drawArea(points) {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        let polygon = points.length > 4 ? points.slice(0, 4) : points;
+        this._drawPolygon(polygon);
+        let line = points.length > 4 ? points.slice(4) : [];
+        this._drawLine(line);
+    }
+
+    _drawPolygon(points) {
+        if (!points.length) {
+            return;
+        }
+        this.context.strokeStyle = '#00ff00';
+        this.context.beginPath();
+        this.context.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            this.context.lineTo(points[i].x, points[i].y);
+        }
+        this.points.length >= 4 && this.context.lineTo(points[0].x, points[0].y);
+        this.context.stroke();
+        this.context.closePath();
+    }
+
+    _drawLine(points) {
+        if (points.length !== 2) {
+            return;
+        }
+        this.context.strokeStyle = '#0000ff';
+        this.context.beginPath();
+        this.context.moveTo(points[0].x, points[0].y);
+        this.context.lineTo(points[1].x, points[1].y);
+        this.context.stroke();
+        this.context.closePath();
+    }
+
+    getROIData() {
+        if (this.currentState !== 'end') { //非完成状态
+            return null;
+        }
+        let points = [];
+        this.points.map((point, k) => {
+            points.push(this._to8191Coordinate(point, this.canvas));
+        });
+        return points;
+    }
+
+    setROI(points) {
+        if (!points) {
+            return;
+        }
+        let data = [];
+        points.map((point, k) => {
+            let result = this._toRealCoordinate(point.x, point.y);
+            data[k] = { x: result[0], y: result[1] };
+        });
+        this.points = [...data];
+        this._drawArea(data);
+        this.currentState = 'end';
+    }
+
+    redrawROI() {
+        this._drawArea(this.points);
+    }
+
+    reset() {
+        this.currentState = 'begin';
+        this.points.length = 0;
+        this._drawArea(this.points);
+    }
+
+    setROIFinishedCallback(callback) {
+        this.onDrawROIFinishedCallback = callback;
+    }
+
+    terminate() {
+        this.clearCanvas();
+        this.canvas.width = 0;
+        this.canvas.height = 0;
+        this.currentState = 'end';
+        this.points.length = 0;
+        this.canvas.removeEventListener('click', this._onClick);
+        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
+        this.canvas.removeEventListener('mousemove', this._onmousemove);
+    }
+
+}
+
+class SpeedLine extends Drawer {
+    constructor(canvas) {
+        super(canvas);
+        this.currentState = 'end';
+        this.MAXLINE = 2;
+        this.points = [];
+        this.onDrawROIFinishedCallback = null;
+    }
+
+    _init() {
+        this.canvas.addEventListener('click', this._onClick.bind(this));
+        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
+        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
+    }
+
+    _onClick(e) {
+        if (this.points.length === this.MAXLINE * 2) {
+            return;
+        }
+        switch (this.currentState) {
+            case 'begin':
+                this.points.push(getMousePos(this.canvas, e));
+                this.currentState = 'firstPoint';
+                break;
+            case 'firstPoint': // 防止初始点点两次
+                break;
+            case 'move':
+                this.currentState = 'points';
+                break;
+            case 'points':
+                let currentPoint = getMousePos(this.canvas, e);
+                if ((currentPoint.x === this.points[this.points.length - 1].x) && (currentPoint.y === this.points[this.points.length - 1].y)) {
+                    return;
+                }
+                this.points.push(currentPoint);
+                if (this.points.length === this.MAXLINE * 2) {
+                    if (this._checkLine(this.points)) {
+                        this.points.pop();
+                    } else {
+                        this.currentState = 'end';
+                        this._drawLines(this.points);
+                        this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
+                    }
+                }
+                break;
+            case 'end':
+                break;
+            default:
+                console.log('unknown state: ', this.currentState);
+                break;
+        }
+    }
+
+    _onmousemove(e) {
+        let pos = getMousePos(this.canvas, e);
+        if (e.button === 0) {
+            if (this.currentState === 'firstPoint') {
+                this.currentState = 'move';
+                this.points.push(pos);
+            } else if (this.currentState === 'move') {
+                this.points.pop();
+                this.points.push(pos);
+            }
+            if (this.currentState !== 'end' && this.currentState !== 'begin') {
+                this.points.push(pos);
+                this._drawLines(this.points);
+                this.points.pop();
+            }
+        }
+    }
+
+    _oncontextmenu(e) {
+        e.preventDefault();
+    }
+    /**
+     *
+     * @param points [] x1,y1,x2,y2...
+     * @private
+     */
+    _checkLine(points) {
+        for (let i = 0; i < points.length - 3; i = i + 2) {
+            for (let j = i + 2; j < points.length - 1; j = j + 2) {
+                let result = segmentsIntr(points[i], points[i + 1], points[j], points[j + 1]);
+                if (result) {
+                    console.log('intersect:');
+                    console.log(result)
+                    return result;
+                }
+            }
+        }
+        return false;
+    }
+
+    _drawLines(points) {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        if (!points.length) {
+            return;
+        }
+        const end = this.currentState === 'end';
+        this.context.strokeStyle = end ? '#00ff00' : "#ffff00";
+        this.context.beginPath();
+        for (let i = 0; i < points.length - 1; i = i + 2) {
+            this.context.moveTo(points[i].x, points[i].y);
+            this.context.lineTo(points[i + 1].x, points[i + 1].y);
+        }
+        this.context.stroke();
+        this.context.closePath();
+    }
+
+    getROIData() {
+        if (this.currentState !== 'end') { //非完成状态
+            return null;
+        }
+        let data = this.points;
+        data.map((point, k) => {
+            data[k] = this._to8191Coordinate(point, this.canvas);
+        });
+        return data;
+    }
+
+    setROI(data) {
+        data.map((point, k) => {
+            let result = this._toRealCoordinate(point.x, point.y);
+            data[k] = { x: result[0], y: result[1] };
+        });
+
+        this.currentState = 'end';
+        this.points = data;
+        this._drawLines(this.points);
+    }
+
+    redrawROI() {
+        this._drawLines(this.points);
+    }
+
+    reset() {
+        this.currentState = 'begin';
+        this.points.length = 0;
+        console.log(this.points)
+        this._drawLines(this.points);
+    }
+
+    setROIFinishedCallback(callback) {
+        this.onDrawROIFinishedCallback = callback;
+    }
+
+    setLineNum(num) {
+        this.MAXLINE = num;
+    }
+
+    terminate() {
+        this.clearCanvas();
+        this.canvas.width = 0;
+        this.canvas.height = 0;
+        this.currentState = 'end';
+        this.points.length = 0;
+        this.canvas.removeEventListener('click', this._onClick);
+        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
+        this.canvas.removeEventListener('mousemove', this._onmousemove);
+    }
+}
+
+class BlankROIDrawer extends Drawer {
+    constructor(canvas) {
+        super(canvas);
+    }
+    getROIData() {
+
+    }
+
+    setROI() {
+
+    }
+
+    redrawROI() {
+
+    }
+
+    reset() {
+
+    }
+
+    terminate() {
+
+    }
+}
+
+function getMousePos(canvas, event) {
+    var rect = canvas.getBoundingClientRect();
+    var x = event.clientX - rect.left * (canvas.width / rect.width);
+    var y = event.clientY - rect.top * (canvas.height / rect.height);
+    //console.log("x:"+x+",y:"+y);
+    return { x: x, y: y };
+}
+
+function checkPolygon(points) {
+    for (let i = 0, length = points.length - 1; i < length; i++) {
+        for (let j = i + 1, len = points.length - 1; j < len; j++) {
+            let result = segmentsIntr(points[i], points[i + 1], points[j], points[j + 1]);
+            if (result) {
+                console.log('intersect:');
+                console.log(result)
+                return result;
+            }
+        }
+    }
+    return false;
+}
+
+
+function segmentsIntr(a, b, c, d) {
+
+    // 三角形abc 面积的2倍
+    var area_abc = (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x);
+
+    // 三角形abd 面积的2倍
+    var area_abd = (a.x - d.x) * (b.y - d.y) - (a.y - d.y) * (b.x - d.x);
+
+    // 面积符号相同则两点在线段同侧,不相交 (对点在线段上的情况,本例当作不相交处理);
+    if (area_abc * area_abd >= 0) {
+        return false;
+    }
+
+    // 三角形cda 面积的2倍
+    var area_cda = (c.x - a.x) * (d.y - a.y) - (c.y - a.y) * (d.x - a.x);
+    // 三角形cdb 面积的2倍
+    // 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.
+    var area_cdb = area_cda + area_abc - area_abd;
+    if (area_cda * area_cdb >= 0) {
+        return false;
+    }
+
+    //计算交点坐标
+    var t = area_cda / (area_abd - area_abc);
+    var dx = t * (b.x - a.x),
+        dy = t * (b.y - a.y);
+    return { x: a.x + dx, y: a.y + dy };
+
+}
+
+
+export { ROIDrawer, StandingDrawer, SpeedLine, BlankROIDrawer };

src/views/common/rtsp-player/libs/drawer.js

@@ -0,0 +1,98 @@
+class Drawer {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.context = canvas.getContext('2d');
+        this._init();
+    }
+
+    _init() {
+
+    }
+
+    cover(video) {
+        //console.log('cover')
+        let offsetLeft = 0, //canvas和video同级时
+            offsetTop = 0,
+            //offsetLeft = getOffsetRect(video).left, //canvas为body的子元素时，根据DOM文档定位
+            //offsetTop = getOffsetRect(video).top,
+            videoHeight = video.videoHeight,
+            videoWidth = video.videoWidth,
+            width = video.getBoundingClientRect().width || videoWidth,
+            height = video.getBoundingClientRect().height || videoHeight;
+        this.canvas.style.position = 'absolute';
+
+        //this.canvas.style.top = offsetTop +'px';
+
+        //this.canvas.style.height = height +'px';
+
+        let tempHeight = width * videoHeight / videoWidth;
+        if (tempHeight > height) { // 如果缩放后的高度大于标签宽度，则按照height缩放width
+            this.canvas.height = height;
+            this.canvas.width = videoWidth / videoHeight * height;
+            this.canvas.style.height = height + 'px';
+            this.canvas.style.width = videoWidth / videoHeight * height + 'px';
+            this.canvas.style.top = offsetTop + 'px';
+            this.canvas.style.left = offsetLeft + (width - videoWidth / videoHeight * height) / 2 + 'px';
+        } else {
+            this.canvas.width = width;
+            this.canvas.height = width * videoHeight / videoWidth;
+            this.canvas.style.width = width +'px';
+            this.canvas.style.height = width * videoHeight / videoWidth +'px';
+            this.canvas.style.left = offsetLeft + 'px';
+            this.canvas.style.top = offsetTop + (height - width * videoHeight / videoWidth) / 2 + 'px';
+        }
+    }
+
+    clearCanvas() {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    terminate() {
+        this.clearCanvas();
+        this.canvas.width = 0;
+        this.canvas.height = 0;
+    }
+
+    /**
+     * 8191坐标系转真实坐标
+     * @param x 8191坐标系 x坐标
+     * @param y 8191坐标系 y坐标
+     * @returns {number[]} 数组
+     * @private
+     */
+    _toRealCoordinate(x, y) {
+        return [parseInt(x * this.canvas.width / 8191), parseInt(y * this.canvas.height / 8191)];
+    }
+
+    /**
+     * 真实坐标系转8191坐标系
+     * @param point {x: x, y: y}
+     * @param canvas 坐标系所在的画布
+     * return {x: x, y: y}
+     */
+     _to8191Coordinate(point, canvas) {
+        return {x: parseInt(point.x * 8191 / canvas.width), y: parseInt(point.y * 8191 / canvas.height)}
+    }
+}
+
+
+/**
+ * 获取元素相对于dom文档的坐标
+ * @param elem
+ * @returns {{top: number, left: number}}
+ */
+function getOffsetRect(elem) {
+    let box = elem.getBoundingClientRect();
+    let body = document.body;
+    let docElem = document.documentElement;
+    let scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    let scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+    let clientTop = docElem.clientTop || body.clientTop || 0;
+    let clientLeft = docElem.clientLeft || body.clientLeft || 0;
+    let top = box.top + scrollTop - clientTop;
+    let left = box.left + scrollLeft - clientLeft;
+    return {top: Math.round(top), left: Math.round(left)}
+}
+
+
+export default Drawer;

src/views/common/rtsp-player/libs/ivsDrawer.js

@@ -0,0 +1,275 @@
+import Drawer from './drawer.js';
+class IvsDrawer extends Drawer {
+    constructor(canvas) {
+        super(canvas);
+        this.confidence = 200; //关键点最低置信度
+        this.displayNum = 7; //大于等于该值时才绘制姿态
+    }
+
+    _init() {
+        this.context.textAlign = 'left';
+        this.context.textBaseline = 'bottom';
+    }
+
+    draw(data, time) {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        let rect = null,
+            length = 0,
+            undrawPoints = [],
+            bodyLineWidth = 0,
+            confidencePoint = [];
+        let bodyCount = 0,
+            speedBodyCount = 0;
+        data.map((content, k) => {
+            let {
+                points,
+                boundingBox,
+                handsUp,
+                boxConfidence,
+                Loiter,
+                Standing,
+                Alone,
+                guides,
+                speed,
+                overSpeed,
+                id
+            } = content;
+            switch (content.type) {
+                case 'rect':
+                    this.context.beginPath();
+                    this.context.strokeStyle = '#00ff00';
+                    this.context.fillStyle = '#00ff00';
+                    this.context.lineWidth = 1;//线条的宽度
+                    this.context.font = 'bold 20px Arial';
+                    if (!content.quality) {
+                        this.context.strokeStyle = '#ff0000';
+                    }
+
+                    rect = this._toRealCoordinate(content.rect[0], content.rect[1]);
+                    rect.push.apply(rect, this._toRealCoordinate(content.rect[2], content.rect[3]));
+                    this._drawRect(rect);
+
+                    //this.context.font = 'bold 20px Arial';
+                    //this.context.fillStyle = '#00ff00';
+                    // this._drawText(content.id, rect[0], rect[1]);
+                    // this._drawText(content.id, rect[0], rect[1]);
+                    // if (content.text) {
+                    //     this._drawText(content.text, rect[0], rect[1] - 20);
+                    // }
+                    if (content.text !== undefined) {
+                        this._drawText(content.text, rect[0], rect[1] - 5);
+                    }
+                    //console.log('绘制 ', time)
+                    this.context.stroke();
+                    this.context.closePath();
+                    break;
+                case 'text':
+                    break;
+                case 'coco-pose':
+                    length = points.length;
+                    undrawPoints = [];
+                    bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
+                    //过滤掉置信点不够的情况
+                    confidencePoint = points.filter((point) => {
+                        return point.confidence > this.confidence;
+                    });
+                    if (confidencePoint.length >= this.displayNum) {
+                        this.context.lineWidth = bodyLineWidth;
+                        //绘制实线
+                        for (let i = 0; i < length; i++) {
+                            if (undrawPoints.includes(i) || points[i].parent === -1) {
+                                continue;
+                            }
+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
+                            let parentNode = points[points[i].parent];
+                            let parentPoint = this._toRealCoordinate(parentNode.x, parentNode.y);
+
+                            this.context.strokeStyle = handsUp ? '#ff0000' : points[i].pointColor;
+                            //confidence高于阈值时画实线，否则透明度降低
+                            if ((points[i].confidence <= this.confidence) || (parentNode.confidence <= this.confidence)) {
+                                this.context.globalAlpha = 0.3;
+                            }
+                            this.context.beginPath();
+                            this.context.moveTo(point[0], point[1]);
+                            this.context.lineTo(parentPoint[0], parentPoint[1]);
+                            this.context.stroke();
+                            this.context.globalAlpha = 1;
+                            this.context.closePath();
+                        }
+                        //绘制圆
+                        for (let i = 0; i < length; i++) {
+                            if (undrawPoints.includes(i)) {
+                                continue;
+                            }
+                            this.context.fillStyle = handsUp ? '#ffff00' : points[i].pointColor;
+                            //if ((points[i].parent !== -1 && points[i].confidence > this.confidence && points[points[i].parent].confidence > this.confidence)
+                            //    || (points[i].parent === -1 && points[i].confidence > this.confidence)) {
+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
+                            this.context.beginPath();
+                            this._drawArc(point[0], point[1], bodyLineWidth);
+                            this.context.fill();
+                            this.context.closePath();
+                            //}
+                        }
+                    } else {
+                        //console.log('only', confidencePoint.length, ' points');
+                    }
+                    //绘制人体框
+                    if (boxConfidence >= 0) {
+                        this.context.beginPath();
+                        this.context.lineWidth = 1;//线条的宽度
+                        this.context.strokeStyle = handsUp ? '#ff0000': '#0000ff';
+                        this.context.fillStyle = '#ffff00';
+                        this.context.font = 'bold 20px Arial';
+                        rect = this._toRealCoordinate(boundingBox[0], boundingBox[1]);
+                        rect.push.apply(rect, this._toRealCoordinate(boundingBox[2], boundingBox[3]));
+                        this._drawRect(rect);
+                        this._drawText(content.id, rect[0], rect[1] - 10);
+                        this.context.stroke();
+                        this.context.closePath();
+                    }
+                    break;
+                case 'region-detect':
+                    let {state, area} = content;
+                    this.context.lineWidth = 2;
+                    this.context.strokeStyle = (state === 1) ? '#ffff00' : '#ff0000';
+
+                    this.context.beginPath();
+                    let beginPoint = this._toRealCoordinate(area[0].x, area[0].y);
+                    this.context.moveTo(beginPoint[0], beginPoint[1]);
+                    for (let i = 1; i < area.length; i++) {
+                        let point = this._toRealCoordinate(area[i].x, area[i].y);
+                        this.context.lineTo(point[0], point[1]);
+                    }
+                    this.context.lineTo(beginPoint[0], beginPoint[1]);
+                    this.context.stroke();
+                    this.context.closePath();
+                    break;
+                case 'coco-poseex':
+                    length = points.length;
+                    undrawPoints = [];
+                    bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
+                    //过滤掉置信点不够的情况
+                    confidencePoint = points.filter((point) => {
+                        return point.confidence > this.confidence;
+                    });
+                    if (confidencePoint.length >= this.displayNum) {
+                        this.context.lineWidth = bodyLineWidth;
+                        //绘制实线
+                        for (let i = 0; i < length; i++) {
+                            if (undrawPoints.includes(i) || points[i].parent === -1) {
+                                continue;
+                            }
+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
+                            let parentNode = points[points[i].parent];
+                            let parentPoint = this._toRealCoordinate(parentNode.x, parentNode.y);
+
+                            this.context.strokeStyle = handsUp ? '#ff0000' : points[i].pointColor;
+                            //confidence高于阈值时画实线，否则透明度降低
+                            if ((points[i].confidence <= this.confidence) || (parentNode.confidence <= this.confidence)) {
+                                this.context.globalAlpha = 0.3;
+                            }
+                            this.context.beginPath();
+                            this.context.moveTo(point[0], point[1]);
+                            this.context.lineTo(parentPoint[0], parentPoint[1]);
+                            this.context.stroke();
+                            this.context.globalAlpha = 1;
+                            this.context.closePath();
+                        }
+                        //绘制圆
+                        for (let i = 0; i < length; i++) {
+                            if (undrawPoints.includes(i)) {
+                                continue;
+                            }
+                            this.context.fillStyle = handsUp ? '#ffff00' : points[i].pointColor;
+                            //if ((points[i].parent !== -1 && points[i].confidence > this.confidence && points[points[i].parent].confidence > this.confidence)
+                            //    || (points[i].parent === -1 && points[i].confidence > this.confidence)) {
+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
+                            this.context.beginPath();
+                            this._drawArc(point[0], point[1], bodyLineWidth);
+                            this.context.fill();
+                            this.context.closePath();
+                            //}
+                        }
+                    } else {
+                        //console.log('only', confidencePoint.length, ' points');
+                    }
+                    //绘制人体框
+                    if (boxConfidence >= 0) {
+                        let strokeStyle = (Loiter === 2 || Standing || Alone) ? '#ff0000' : (Loiter ? '#EFB842' : '#0000ff');
+                        this.context.beginPath();
+                        this.context.lineWidth = 1;//线条的宽度
+                        this.context.strokeStyle = strokeStyle;
+                        this.context.fillStyle = '#ffff00';
+                        this.context.font = 'bold 20px Arial';
+                        rect = this._toRealCoordinate(boundingBox[0], boundingBox[1]);
+                        rect.push.apply(rect, this._toRealCoordinate(boundingBox[2], boundingBox[3]));
+                        this._drawRect(rect);
+                        this._drawText(content.id, rect[0], rect[1] - 10);
+                        this.context.stroke();
+                        this.context.closePath();
+                    }
+
+                    //绘制参考线
+                    if(guides) {
+                        this.context.strokeStyle = '#0000ff';
+                        let point0 = this._toRealCoordinate(guides[0].x, guides[0].y);
+                        let point1 = this._toRealCoordinate(guides[1].x, guides[1].y);
+                        this.context.beginPath();
+                        this.context.setLineDash([10]);
+                        this.context.moveTo(point0[0], point0[1]);
+                        this.context.lineTo(point1[0], point1[1]);
+                        this._drawText(content.id, point1[0], point1[1] - 10);
+                        this.context.stroke();
+                        this.context.setLineDash([]);
+                        this.context.closePath();
+                    }
+                    bodyCount++;
+                    break;
+                case 'over-speed':
+                    this.context.beginPath();
+                    this.context.fillStyle = overSpeed ? '#ff0000' : '#ffff00';
+                    this.context.font = 'bold 16px Arial';
+                    if(overSpeed) {
+                        this._drawText(`ID: ${id}  speed: ${(speed / 100).toFixed(2)} m/s PMD`, 10, speedBodyCount * 20 + 30);
+                    } else {
+                        this._drawText(`ID: ${id}  speed: ${(speed / 100).toFixed(2)} m/s`, 10, speedBodyCount * 20 + 30);
+                    }
+                    this.context.stroke();
+                    this.context.closePath();
+                    speedBodyCount++;
+                    break;
+                default:
+                    console.log('unknown ivs type: ', content.type);
+                    break;
+            }
+        });
+        //人数统计
+        if(bodyCount) {
+            this.context.beginPath();
+            this.context.fillStyle = '#ffff00';
+            this._drawText('人数:' + bodyCount, this.canvas.width - 100, 100);
+            this.context.closePath();
+        }
+    }
+
+
+    _drawRect(rect) {
+        //console.log(rect)
+        this.context.rect(rect[0], rect[1], rect[2], rect[3]);
+    }
+
+    _drawText(text, x, y) {
+        this.context.fillText(text, x, y);
+    }
+
+    _drawArc(x, y, r) {
+        this.context.arc(x, y, r, 0, 360);
+    }
+}
+
+function f() {
+
+}
+
+export default IvsDrawer;

src/views/common/rtsp-player/libs/md5.js

@@ -0,0 +1,257 @@
+/* eslint-disable */
+/*
+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+ * Digest Algorithm, as defined in RFC 1321.
+ * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for more info.
+ */
+
+/*
+ * Configurable variables. You may need to tweak these to be compatible with
+ * the server-side, but the defaults work in most cases.
+ */
+var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
+var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */
+var chrsz   = 8;  /* bits per input character. 8 - ASCII; 16 - Unicode      */
+
+/*
+ * These are the functions you'll usually want to call
+ * They take string arguments and return either hex or base-64 encoded strings
+ */
+export function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
+function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
+function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
+function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
+function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
+function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
+
+/*
+ * Perform a simple self-test to see if the VM is working
+ */
+function md5_vm_test()
+{
+  return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
+}
+
+/*
+ * Calculate the MD5 of an array of little-endian words, and a bit length
+ */
+function core_md5(x, len)
+{
+  /* append padding */
+  x[len >> 5] |= 0x80 << ((len) % 32);
+  x[(((len + 64) >>> 9) << 4) + 14] = len;
+
+  var a =  1732584193;
+  var b = -271733879;
+  var c = -1732584194;
+  var d =  271733878;
+
+  for(var i = 0; i < x.length; i += 16)
+  {
+    var olda = a;
+    var oldb = b;
+    var oldc = c;
+    var oldd = d;
+
+    a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
+    d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
+    c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
+    b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
+    a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
+    d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
+    c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
+    b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
+    a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
+    d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
+    c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
+    b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
+    a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
+    d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
+    c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
+    b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
+
+    a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
+    d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
+    c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
+    b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
+    a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
+    d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
+    c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
+    b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
+    a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
+    d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
+    c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
+    b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
+    a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
+    d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
+    c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
+    b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
+
+    a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
+    d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
+    c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
+    b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
+    a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
+    d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
+    c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
+    b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
+    a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
+    d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
+    c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
+    b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
+    a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
+    d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
+    c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
+    b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
+
+    a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
+    d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
+    c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
+    b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
+    a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
+    d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
+    c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
+    b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
+    a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
+    d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
+    c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
+    b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
+    a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
+    d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
+    c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
+    b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
+
+    a = safe_add(a, olda);
+    b = safe_add(b, oldb);
+    c = safe_add(c, oldc);
+    d = safe_add(d, oldd);
+  }
+  return Array(a, b, c, d);
+
+}
+
+/*
+ * These functions implement the four basic operations the algorithm uses.
+ */
+function md5_cmn(q, a, b, x, s, t)
+{
+  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
+}
+function md5_ff(a, b, c, d, x, s, t)
+{
+  return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
+}
+function md5_gg(a, b, c, d, x, s, t)
+{
+  return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
+}
+function md5_hh(a, b, c, d, x, s, t)
+{
+  return md5_cmn(b ^ c ^ d, a, b, x, s, t);
+}
+function md5_ii(a, b, c, d, x, s, t)
+{
+  return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
+}
+
+/*
+ * Calculate the HMAC-MD5, of a key and some data
+ */
+function core_hmac_md5(key, data)
+{
+  var bkey = str2binl(key);
+  if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
+
+  var ipad = Array(16), opad = Array(16);
+  for(var i = 0; i < 16; i++)
+  {
+    ipad[i] = bkey[i] ^ 0x36363636;
+    opad[i] = bkey[i] ^ 0x5C5C5C5C;
+  }
+
+  var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
+  return core_md5(opad.concat(hash), 512 + 128);
+}
+
+/*
+ * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+ * to work around bugs in some JS interpreters.
+ */
+function safe_add(x, y)
+{
+  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
+  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+  return (msw << 16) | (lsw & 0xFFFF);
+}
+
+/*
+ * Bitwise rotate a 32-bit number to the left.
+ */
+function bit_rol(num, cnt)
+{
+  return (num << cnt) | (num >>> (32 - cnt));
+}
+
+/*
+ * Convert a string to an array of little-endian words
+ * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
+ */
+function str2binl(str)
+{
+  var bin = Array();
+  var mask = (1 << chrsz) - 1;
+  for(var i = 0; i < str.length * chrsz; i += chrsz)
+    bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
+  return bin;
+}
+
+/*
+ * Convert an array of little-endian words to a string
+ */
+function binl2str(bin)
+{
+  var str = "";
+  var mask = (1 << chrsz) - 1;
+  for(var i = 0; i < bin.length * 32; i += chrsz)
+    str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
+  return str;
+}
+
+/*
+ * Convert an array of little-endian words to a hex string.
+ */
+function binl2hex(binarray)
+{
+  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
+  var str = "";
+  for(var i = 0; i < binarray.length * 4; i++)
+  {
+    str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
+           hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
+  }
+  return str;
+}
+
+/*
+ * Convert an array of little-endian words to a base-64 string
+ */
+function binl2b64(binarray)
+{
+  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  var str = "";
+  for(var i = 0; i < binarray.length * 4; i += 3)
+  {
+    var triplet = (((binarray[i   >> 2] >> 8 * ( i   %4)) & 0xFF) << 16)
+                | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
+                |  ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
+    for(var j = 0; j < 4; j++)
+    {
+      if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
+      else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
+    }
+  }
+  return str;
+}

src/views/common/rtsp-player/libs/player.js

@@ -0,0 +1,131 @@
+import WebSocketServer from './websocketServer.js';
+import {BlankROIDrawer, ROIDrawer, StandingDrawer, SpeedLine} from './ROIDrawer.js';
+
+let ROIdrawer = null;
+class Player {
+    constructor(option) {
+        this.ws = null;
+        this.options = option;
+        this.events = {
+            error: ()=>{}
+        };
+        this.ROI = {
+            ROIDrawer,
+        }
+    }
+
+    init(v) {
+        this.options.vue = v;
+        //console.log('init');
+        ROIdrawer = new ROIDrawer(this.options.drawer);
+        this.options.ROI = ROIdrawer;
+        this.ws = new WebSocketServer(this.options);
+        this.ws.init();
+    }
+
+    connect() {
+        for(let i in this.events) {
+            this.ws.setCallBack(i, this.events[i]);
+        }
+        this.ws.connect();
+    }
+
+    play() {
+        //console.log('player')
+        // this.close()
+        // this.ws = new WebSocketServer(this.options)
+        // this.ws.init();
+    }
+
+    pause() {
+        //console.log('pause')
+    }
+
+    close() {
+        if(this.ws)
+            this.ws.close();
+        if(ROIdrawer)
+            ROIdrawer.terminate();
+        //console.log('close1')
+    }
+
+    /**
+     * 绘制额外信息
+     * @param obj
+     */
+    updateInfo(obj) {
+        this.ws.updateInfo(obj);
+    }
+
+    changeROIType(type) {
+        ROIdrawer && ROIdrawer.terminate();
+        switch (type) {
+            case 'Polygon1':
+                ROIdrawer = new ROIDrawer(this.options.drawer);
+                ROIdrawer.setPolygonNum(1);
+                ROIdrawer.cover(this.options.video);
+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
+                break;
+            case 'Polygon2':
+                ROIdrawer = new ROIDrawer(this.options.drawer);
+                ROIdrawer.setPolygonNum(2);
+                ROIdrawer.cover(this.options.video);
+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
+                break;
+            case 'Polygon1Line1':
+                ROIdrawer = new StandingDrawer(this.options.drawer);
+                ROIdrawer.cover(this.options.video);
+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
+                break;
+            case 'Line2':
+                ROIdrawer = new SpeedLine(this.options.drawer);
+                ROIdrawer.setLineNum(2);
+                ROIdrawer.cover(this.options.video);
+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
+                break;
+            default:
+                ROIdrawer = new BlankROIDrawer(this.options.drawer);
+                break;
+        }
+        this.ws.setROIDrawer(ROIdrawer);
+    }
+
+
+    setROI(data) {
+        ROIdrawer && ROIdrawer.setROI(data);
+    }
+
+    resetROI() {
+        ROIdrawer && ROIdrawer.reset();
+    }
+
+    getROIData() {
+        if(ROIdrawer) {
+            return ROIdrawer.getROIData();
+        }
+        return null;
+    }
+
+    setPolygonNum(num) {
+        ROIdrawer && ROIdrawer.setPolygonNum(num);
+    }
+
+    /**
+     * 自定义事件
+     * 目前支持如下事件
+     * [error] websocket连接失败
+     * [noStream] 收不到码流
+     * [canplay] 视频能够播放时触发
+     * [initialCompleted] 视频初始化完成, 首次canplay
+     * [ROIFinished] 手动绘制ROI完成时触发
+     *
+     * @param event 事件名
+     * @param callback 事件响应函数
+     */
+    on(event, callback) {
+        this.events[event] = callback;
+    }
+}
+
+export default Player;
+

src/views/common/rtsp-player/libs/websocketServer.js

@@ -0,0 +1,652 @@
+import WorkerManager from './workerManager.js';
+import { hex_md5 } from "./md5.js";
+
+function WebSocketServer(options) {
+    let videoElement = null;
+    let canvasElement = null;
+    let ROIElement = null;
+    let websocket = null;
+    let wsURL = null;
+    let rtspURL = null;
+    let ip = null;
+    let port = null;
+    let username = null;
+    let password = null;
+    let CSeq = 1;
+    let IsDescribe = false; //RTSP响应报文中，describe时有两段，以'\r\n'分段
+    let currentState = "Options";
+    let describekey = false;
+    let Authentication = '\r\n'; //认证，信令最后四个字节为'\r\n\r\n'，为补足，默认为'\r\n'
+    let sessionID = '';
+    let rtspSDPData = {};
+    let SDPinfo = []; //SDP信息
+    let setupSDPIndex = 0;
+    let getParameterInterval = null; //保活
+    let AACCodecInfo = null;
+
+    //RTP包处理相关
+    let rtspinterleave = null;
+    let RTPPacketTotalSize = 0;
+    let rtpheader = null;
+    let rtpPacketArray = null;
+
+    let workerManager = null;
+    let connectFailCallback = null;
+
+    let lastStreamTime = null; //记录收到码流的时间
+    let getStreamInterval = null;
+    let noStreamCallback = null;
+
+    const RTSP_INTERLEAVE_LENGTH = 4; //交织头占4个字节
+    const RTSP_STATE = {
+        OK: 200,
+        UNAUTHORIZED: 401,
+        NOTFOUND: 404,
+        INVALID_RANGE: 457,
+        NOTSERVICE: 503,
+        DISCONNECT: 999
+    };
+    const SEND_GETPARM_INTERVAL = 20000; //保活时间
+
+    let v = null;
+
+    function constructor({ video, canvas, ROI, wsUrl, rtspUrl, vue } = { options }) {
+        videoElement = video;
+        canvasElement = canvas;
+        ROIElement = ROI;
+        rtspURL = rtspUrl;
+        //分解 rtspUrl
+        let ret = rtspUrl.match(/rtsp:\/\/(.+):(.+)@(.+):(\d+)(.+)/)
+        username = ret[1]
+        password = ret[2]
+        ip = ret[3]
+        port = ret[4]
+        wsURL = wsUrl + '?tcpaddr=' + encodeURIComponent(username + ":" + password + "@" + ip + ":" + port);
+        v = vue
+    }
+
+    constructor.prototype = {
+        init() {
+            workerManager = new WorkerManager();
+            workerManager.init(videoElement, canvasElement, ROIElement, v);
+        },
+        connect() {
+            websocket = new WebSocket(wsURL);
+            websocket.binaryType = 'arraybuffer';
+            websocket.onmessage = ReceiveMessage;
+            websocket.onopen = () => {
+                let option = StringToU8Array("OPTIONS " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n\r\n");
+                websocket.send(option);
+                //console.log('websocket connect')
+            };
+            websocket.onerror = () => {
+                if (connectFailCallback) {
+                    connectFailCallback('websocket connect fail');
+                }
+            }
+        },
+        close() {
+            clearInterval(getParameterInterval);
+            clearInterval(getStreamInterval);
+            SendRtspCommand(CommandConstructor("TEARDOWN", null));
+            websocket.close();
+            if (workerManager) {
+                workerManager.terminate();
+            }
+        },
+        setCallBack(event, callback) {
+            switch (event) {
+                case 'error':
+                    connectFailCallback = () => {
+                        callback();
+                        this.close();
+                    };
+                    break;
+                case 'noStream':
+                    noStreamCallback = () => {
+                        callback();
+                        this.close();
+                    };
+                    break;
+                case 'canplay':
+                case 'initialCompleted':
+                case 'ROIFinished':
+                    workerManager.setEventCallBack(event, callback);
+                    break;
+                default:
+                    console.log('unsupport event');
+            }
+        },
+        updateInfo(obj) {
+            workerManager.updateInfo(obj);
+        },
+        setROIDrawer(ROIElement) {
+            workerManager.setROIDrawer(ROIElement);
+        },
+    };
+
+
+
+    return new constructor(options);
+
+    /**
+     * websocket消息处理函数
+     * @param event
+     * @constructor
+     */
+    function ReceiveMessage(event) {
+        let data = event.data;
+        let receiveUint8 = new Uint8Array(data);
+        let PreceiveUint8 = new Uint8Array(receiveUint8.length);
+        PreceiveUint8.set(receiveUint8, 0);
+        let dataLength = PreceiveUint8.length;
+        // if(dataLength < 10) {
+        //     //console.log(String.fromCharCode.apply(null, PreceiveUint8))
+        // }
+        while (dataLength > 0) {
+            if (PreceiveUint8[0] != 36) {//非$符号表示RTSP
+                //console.log(PreceiveUint8[0], PreceiveUint8[1], PreceiveUint8[2], PreceiveUint8[3], PreceiveUint8[4])
+                //console.log(PreceiveUint8.length)
+                let PreceiveMsg = String.fromCharCode.apply(null, PreceiveUint8);
+                //console.log(PreceiveMsg)
+                let rtspendpos = null;
+                if (IsDescribe === true) {
+                    rtspendpos = PreceiveMsg.lastIndexOf("\r\n");
+                    IsDescribe = false
+                } else {
+                    rtspendpos = PreceiveMsg.search("\r\n\r\n");
+
+                }
+                let rtspstartpos = PreceiveMsg.search("RTSP");
+                if (rtspstartpos !== -1) {
+                    if (rtspendpos !== -1) {
+                        let RTSPResArray = PreceiveUint8.subarray(rtspstartpos, rtspendpos + RTSP_INTERLEAVE_LENGTH);
+                        PreceiveUint8 = PreceiveUint8.subarray(rtspendpos + RTSP_INTERLEAVE_LENGTH);
+                        let receiveMsg = String.fromCharCode.apply(null, RTSPResArray);
+                        RTSPResHandler(receiveMsg);
+                        dataLength = PreceiveUint8.length;
+                    } else {
+                        dataLength = PreceiveUint8.length;
+                        return
+                    }
+                } else {
+                    PreceiveUint8 = new Uint8Array;
+                    return
+                }
+            } else { //$表示RTP和RTCP
+                //console.log('RTP开始');
+                //console.log(PreceiveUint8.length)
+                // if(PreceiveUint8.length == 4) {
+                //    console.log(PreceiveUint8)
+                // }
+                lastStreamTime = Date.now();
+                rtspinterleave = PreceiveUint8.subarray(0, RTSP_INTERLEAVE_LENGTH);
+                //console.log(rtspinterleave)
+                RTPPacketTotalSize = rtspinterleave[2] * 256 + rtspinterleave[3];
+                if (RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH <= PreceiveUint8.length) {
+                    rtpheader = PreceiveUint8.subarray(RTSP_INTERLEAVE_LENGTH, 16);
+                    rtpPacketArray = PreceiveUint8.subarray(16, RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH);
+                    //rtpCallback(rtspinterleave, rtpheader, rtpPacketArray);
+                    workerManager.parseRtpData(rtspinterleave, rtpheader, rtpPacketArray);
+                    PreceiveUint8 = PreceiveUint8.subarray(RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH);
+                    //console.log('PreceiveUint8.length:  ' + PreceiveUint8.length)
+                    dataLength = PreceiveUint8.length;
+                } else {
+                    dataLength = PreceiveUint8.length;
+                    //console.count('11111111111')
+                    //console.log(PreceiveUint8)
+                    return
+                }
+            }
+        }
+    }
+
+    /**
+     * 将字符串转为arrayBuffer
+     * @param string
+     */
+    function StringToU8Array(string) {
+        CSeq++;
+        //console.log(string)
+        let stringLength = string.length;
+        let outputUint8Array = new Uint8Array(new ArrayBuffer(stringLength));
+        for (let i = 0; i < stringLength; i++) {
+            outputUint8Array[i] = string.charCodeAt(i);
+        }
+        //console.log(outputUint8Array)
+        return outputUint8Array;
+        //return string;
+    }
+
+    /**
+     * 处理收到的RTSP信令，解析后发送下一条
+     * @param stringMessage
+     * @constructor
+     */
+    function RTSPResHandler(stringMessage) {
+        //console.log(stringMessage)
+        //let seekPoint = stringMessage.search("CSeq: ") + 5;
+        let rtspResponseMsg = parseRtsp(stringMessage);
+        //console.log(rtspResponseMsg)
+        if (rtspResponseMsg.ResponseCode === RTSP_STATE.UNAUTHORIZED && Authentication === "\r\n") { //需要鉴权
+            if (currentState === "Describe") {
+                IsDescribe = false;
+                describekey = false;
+            }
+            // username= getUser(rtspURL).username;//用url里覆盖配置
+            // password = getUser(rtspURL).password;
+            //console.log(rtspResponseMsg)
+            SendRtspCommand(formDigest(rtspResponseMsg));
+            Authentication = "\r\n";
+
+        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.OK) { //服务器端返回成功
+            switch (currentState) {
+                case 'Options':
+                    currentState = "Describe";
+                    SendRtspCommand(CommandConstructor("DESCRIBE", null));
+                    break;
+                case "Describe":
+                    rtspSDPData = parseDescribeResponse(stringMessage);
+                    if (typeof rtspResponseMsg.ContentBase !== "undefined") {
+                        rtspSDPData.ContentBase = rtspResponseMsg.ContentBase
+                    }
+                    //console.log(rtspSDPData.Sessions)
+                    for (let idx = 0; idx < rtspSDPData.Sessions.length; idx++) {
+                        let sdpInfoObj = {};
+                        if (rtspSDPData.Sessions[idx].CodecMime === "H264") { //暂时只支持H264
+                            sdpInfoObj.codecName = rtspSDPData.Sessions[idx].CodecMime;
+                            //sdpInfoObj.trackID = rtspSDPData.Sessions[idx].ControlURL;
+                            sdpInfoObj.trackID = rtspSDPData.Sessions[idx].trackID;
+                            sdpInfoObj.ClockFreq = rtspSDPData.Sessions[idx].ClockFreq;
+                            sdpInfoObj.Port = parseInt(rtspSDPData.Sessions[idx].Port);
+                            if (typeof rtspSDPData.Sessions[idx].Framerate !== "undefined") {
+                                sdpInfoObj.Framerate = parseInt(rtspSDPData.Sessions[idx].Framerate)
+                            }
+                            if (typeof rtspSDPData.Sessions[idx].SPS !== "undefined") {
+                                sdpInfoObj.SPS = rtspSDPData.Sessions[idx].SPS;
+                            }
+                            SDPinfo.push(sdpInfoObj)
+                        } else {
+                            console.log("Unknown codec type:", rtspSDPData.Sessions[idx].CodecMime, rtspSDPData.Sessions[idx].ControlURL)
+                        }
+                    }
+                    setupSDPIndex = 0;
+                    currentState = "Setup";
+                    //console.log(SDPinfo[setupSDPIndex])
+                    SendRtspCommand(CommandConstructor("SETUP", SDPinfo[setupSDPIndex].trackID, setupSDPIndex));
+                    //SendRtspCommand(CommandConstructor("SETUP", 'track1'));
+                    break;
+                case "Setup":
+                    sessionID = rtspResponseMsg.SessionID;
+                    //多路流(如音频流)
+                    //在Describe中暂时只解析H264视频流，因此SDPinfo.length始终为1
+                    if (setupSDPIndex < SDPinfo.length) {
+                        SDPinfo[setupSDPIndex].RtpInterlevedID = rtspResponseMsg.RtpInterlevedID;
+                        SDPinfo[setupSDPIndex].RtcpInterlevedID = rtspResponseMsg.RtcpInterlevedID;
+                        setupSDPIndex += 1;
+                        if (setupSDPIndex !== SDPinfo.length) {
+                            SendRtspCommand(CommandConstructor("SETUP", SDPinfo[setupSDPIndex].trackID, setupSDPIndex));
+                        } else {
+                            workerManager.sendSdpInfo(SDPinfo);
+                            currentState = "Play";
+                            SendRtspCommand(CommandConstructor("PLAY"));
+                        }
+                    }
+
+                    sessionID = rtspResponseMsg.SessionID;
+                    //开始播放后，发送GET_PARAMETER进行保活
+                    clearInterval(getParameterInterval);
+                    getParameterInterval = setInterval(function () {
+                        SendRtspCommand(CommandConstructor("GET_PARAMETER", null))
+                    }, SEND_GETPARM_INTERVAL);
+
+                    getStreamInterval = setInterval(() => {
+                        if (!getBitStream()) {
+                            console.log('超时！');
+                            noStreamCallback && noStreamCallback();
+                        }
+                    }, 5000);
+                    break;
+                case "Play":
+
+                    break;
+                default:
+                    console.log('暂不支持的信令');
+                    break;
+            }
+        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.NOTSERVICE) { //服务不可用
+
+        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.NOTFOUND) { //Not Found
+
+        }
+    }
+
+    /**
+     * 发送rtsp信令
+     * @param sendMessage
+     * @constructor
+     */
+    function SendRtspCommand(sendMessage) {
+        //console.log(sendMessage)
+        if (websocket !== null && websocket.readyState === WebSocket.OPEN) {
+            if (describekey === false) {
+                let describeCmd = sendMessage.search("DESCRIBE");
+                if (describeCmd !== -1) {
+                    IsDescribe = true;
+                    describekey = true;
+                }
+            }
+            //console.log(sendMessage)
+            websocket.send(StringToU8Array(sendMessage))
+        } else {
+            console.log('websocket未连接')
+        }
+    }
+
+    /**
+     * 组装RTSP信令
+     * @param method
+     * @param trackID
+     * @returns {*}
+     * @constructor
+     */
+    function CommandConstructor(method, trackID, interleaved) {
+        let sendMessage;
+        switch (method) {
+            case "OPTIONS":
+            case "TEARDOWN":
+            case "SET_PARAMETERS":
+            case "DESCRIBE":
+                //TODO: 保活
+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n" + Authentication;
+                break;
+            case "SETUP":
+                //console.log(trackID)
+                //TODO 多trackID的时候测试一下
+                sendMessage = method + " " + rtspURL + "/" + trackID + " RTSP/1.0\r\nCSeq: " + CSeq + Authentication + "Transport:RTP/AVP/TCP;unicast;interleaved=" + 2 * interleaved + "-" + (2 * interleaved + 1) + "\r\n";
+                if (sessionID == 0) {
+                    sendMessage += "\r\n";
+                } else {
+                    sendMessage += "Session: " + sessionID + "\r\n\r\n";
+                }
+                break;
+            case "PLAY":
+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n" + "Range: npt=0.000-\r\n" + Authentication;
+                break;
+            case "PAUSE":
+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n\r\n";
+                break;
+            case "GET_PARAMETER":
+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n" + Authentication;
+                break;
+            default:
+                console.log('暂不支持的RTSP信令');
+        }
+        //console.log(sendMessage);
+        return sendMessage;
+    }
+
+    /**
+     * 解析RTSP信令
+     * @param message1
+     */
+    function parseRtsp(message1) {
+        let RtspResponseData = {};
+        let cnt = 0, cnt1 = 0, ttt = null, LineTokens = null;
+        let message = null;
+        if (message1.search("Content-Type: application/sdp") !== -1) {
+            let messageTok = message1.split("\r\n\r\n");
+            message = messageTok[0]
+        } else {
+            message = message1
+        }
+        let TokenziedResponseLines = message.split("\r\n");
+        let ResponseCodeTokens = TokenziedResponseLines[0].split(" ");
+        if (ResponseCodeTokens.length > 2) {
+            RtspResponseData.ResponseCode = parseInt(ResponseCodeTokens[1]);
+            RtspResponseData.ResponseMessage = ResponseCodeTokens[2]
+        }
+        if (RtspResponseData.ResponseCode === RTSP_STATE.OK) {
+            for (cnt = 1; cnt < TokenziedResponseLines.length; cnt++) {
+                LineTokens = TokenziedResponseLines[cnt].split(":");
+                if (LineTokens[0] === "Public") {
+                    RtspResponseData.MethodsSupported = LineTokens[1].split(",")
+                } else if (LineTokens[0] === "CSeq") {
+                    RtspResponseData.CSeq = parseInt(LineTokens[1])
+                } else if (LineTokens[0] === "Content-Type") {
+                    RtspResponseData.ContentType = LineTokens[1];
+                    if (RtspResponseData.ContentType.search("application/sdp") !== -1) {
+                        RtspResponseData.SDPData = parseDescribeResponse(message1)
+                    }
+                } else if (LineTokens[0] === "Content-Length") {
+                    RtspResponseData.ContentLength = parseInt(LineTokens[1])
+                } else if (LineTokens[0] === "Content-Base") {
+                    let ppos = TokenziedResponseLines[cnt].search("Content-Base:");
+                    if (ppos !== -1) {
+                        RtspResponseData.ContentBase = TokenziedResponseLines[cnt].substr(ppos + 13)
+                    }
+                } else if (LineTokens[0] === "Session") {
+                    let SessionTokens = LineTokens[1].split(";");
+                    //RtspResponseData.SessionID = parseInt(SessionTokens[0])
+                    //console.log(SessionTokens[0])
+                    RtspResponseData.SessionID = SessionTokens[0].trim();
+                } else if (LineTokens[0] === "Transport") {
+                    let TransportTokens = LineTokens[1].split(";");
+                    for (cnt1 = 0; cnt1 < TransportTokens.length; cnt1++) {
+                        let tpos = TransportTokens[cnt1].search("interleaved=");
+                        if (tpos !== -1) {
+                            let interleaved = TransportTokens[cnt1].substr(tpos + 12);
+                            let interleavedTokens = interleaved.split("-");
+                            if (interleavedTokens.length > 1) {
+                                RtspResponseData.RtpInterlevedID = parseInt(interleavedTokens[0]);
+                                RtspResponseData.RtcpInterlevedID = parseInt(interleavedTokens[1])
+                            }
+                        }
+                    }
+                } else if (LineTokens[0] === "RTP-Info") {
+                    LineTokens[1] = TokenziedResponseLines[cnt].substr(9);
+                    let RTPInfoTokens = LineTokens[1].split(",");
+                    RtspResponseData.RTPInfoList = [];
+                    for (cnt1 = 0; cnt1 < RTPInfoTokens.length; cnt1++) {
+                        let RtpTokens = RTPInfoTokens[cnt1].split(";");
+                        let RtpInfo = {};
+                        for (let cnt2 = 0; cnt2 < RtpTokens.length; cnt2++) {
+                            let poss = RtpTokens[cnt2].search("url=");
+                            if (poss !== -1) {
+                                RtpInfo.URL = RtpTokens[cnt2].substr(poss + 4)
+                            }
+                            poss = RtpTokens[cnt2].search("seq=");
+                            if (poss !== -1) {
+                                RtpInfo.Seq = parseInt(RtpTokens[cnt2].substr(poss + 4))
+                            }
+                        }
+                        RtspResponseData.RTPInfoList.push(RtpInfo)
+                    }
+                }
+            }
+        } else if (RtspResponseData.ResponseCode === RTSP_STATE.UNAUTHORIZED) {
+            for (cnt = 1; cnt < TokenziedResponseLines.length; cnt++) {
+                LineTokens = TokenziedResponseLines[cnt].split(":");
+                if (LineTokens[0] === "CSeq") {
+                    RtspResponseData.CSeq = parseInt(LineTokens[1])
+                } else if (LineTokens[0] === "WWW-Authenticate") {
+                    let AuthTokens = LineTokens[1].split(",");
+                    for (cnt1 = 0; cnt1 < AuthTokens.length; cnt1++) {
+                        let pos = AuthTokens[cnt1].search("Digest realm=");
+                        if (pos !== -1) {
+                            ttt = AuthTokens[cnt1].substr(pos + 13);
+                            let realmtok = ttt.split('"');
+                            RtspResponseData.Realm = realmtok[1]
+                        }
+                        pos = AuthTokens[cnt1].search("nonce=");
+                        if (pos !== -1) {
+                            ttt = AuthTokens[cnt1].substr(pos + 6);
+                            let noncetok = ttt.split('"');
+                            RtspResponseData.Nonce = noncetok[1]
+                        }
+                    }
+                }
+            }
+        }
+        return RtspResponseData
+    }
+
+    /**
+     * 解析Describe信令
+     * @param message1
+     */
+    function parseDescribeResponse(message1) {
+        //console.log(message1)
+        let SDPData = {};
+        let Sessions = [];
+        SDPData.Sessions = Sessions;
+        let message = null;
+        if (message1.search("Content-Type: application/sdp") !== -1) {
+            let messageTok = message1.split("\r\n\r\n");
+            message = messageTok[1]
+        } else {
+            message = message1
+        }
+        let TokenziedDescribe = message.split("\r\n");
+        let mediaFound = false;
+        for (let cnt = 0; cnt < TokenziedDescribe.length; cnt++) {
+            let SDPLineTokens = TokenziedDescribe[cnt].split("=");
+            if (SDPLineTokens.length > 0) {
+                switch (SDPLineTokens[0]) {
+                    case "a":
+                        let aLineToken = SDPLineTokens[1].split(":");
+                        if (aLineToken.length > 1) {
+                            if (aLineToken[0] === "control") {
+                                let pos = TokenziedDescribe[cnt].search("control:");
+                                if (mediaFound === true) {
+                                    if (pos !== -1) {
+                                        SDPData.Sessions[SDPData.Sessions.length - 1].ControlURL = TokenziedDescribe[cnt].substr(pos + 8);
+                                        let trackPos = TokenziedDescribe[cnt].search("track");
+                                        SDPData.Sessions[SDPData.Sessions.length - 1].trackID = TokenziedDescribe[cnt].substr(trackPos);
+                                    }
+                                } else {
+                                    if (pos !== -1) {
+                                        SDPData.BaseURL = TokenziedDescribe[cnt].substr(pos + 8)
+                                    }
+                                }
+                            } else if (aLineToken[0] === "rtpmap") {
+                                //console.log(aLineToken)
+                                let rtpmapLine = aLineToken[1].split(" ");
+                                //console.log(rtpmapLine)
+                                SDPData.Sessions[SDPData.Sessions.length - 1].PayloadType = rtpmapLine[0];
+                                let MimeLine = rtpmapLine[1].split("/");
+                                SDPData.Sessions[SDPData.Sessions.length - 1].CodecMime = MimeLine[0];
+                                if (MimeLine.length > 1) {
+                                    SDPData.Sessions[SDPData.Sessions.length - 1].ClockFreq = MimeLine[1]
+                                }
+                            } else if (aLineToken[0] === "framesize") {
+                                let framesizeLine = aLineToken[1].split(" ");
+                                if (framesizeLine.length > 1) {
+                                    let framesizeinf = framesizeLine[1].split("-");
+                                    SDPData.Sessions[SDPData.Sessions.length - 1].Width = framesizeinf[0];
+                                    SDPData.Sessions[SDPData.Sessions.length - 1].Height = framesizeinf[1]
+                                }
+                            } else if (aLineToken[0] === "framerate") {
+                                SDPData.Sessions[SDPData.Sessions.length - 1].Framerate = aLineToken[1]
+                            } else if (aLineToken[0] === "fmtp") {
+                                let sessLine = TokenziedDescribe[cnt].split(" ");
+                                if (sessLine.length < 2) {
+                                    continue
+                                }
+                                for (let ii = 1; ii < sessLine.length; ii++) {
+                                    let sessToken = sessLine[ii].split(";");
+                                    let sessprmcnt = 0;
+                                    for (sessprmcnt = 0; sessprmcnt < sessToken.length; sessprmcnt++) {
+                                        let ppos = sessToken[sessprmcnt].search("mode=");
+                                        if (ppos !== -1) {
+                                            SDPData.Sessions[SDPData.Sessions.length - 1].mode = sessToken[sessprmcnt].substr(ppos + 5)
+                                        }
+                                        ppos = sessToken[sessprmcnt].search("config=");
+                                        if (ppos !== -1) {
+                                            SDPData.Sessions[SDPData.Sessions.length - 1].config = sessToken[sessprmcnt].substr(ppos + 7);
+                                            AACCodecInfo.config = SDPData.Sessions[SDPData.Sessions.length - 1].config;
+                                            AACCodecInfo.clockFreq = SDPData.Sessions[SDPData.Sessions.length - 1].ClockFreq;
+                                            AACCodecInfo.bitrate = SDPData.Sessions[SDPData.Sessions.length - 1].Bitrate
+                                        }
+                                        ppos = sessToken[sessprmcnt].search("sprop-vps=");
+                                        if (ppos !== -1) {
+                                            SDPData.Sessions[SDPData.Sessions.length - 1].VPS = sessToken[sessprmcnt].substr(ppos + 10)
+                                        }
+                                        ppos = sessToken[sessprmcnt].search("sprop-sps=");
+                                        if (ppos !== -1) {
+                                            SDPData.Sessions[SDPData.Sessions.length - 1].SPS = sessToken[sessprmcnt].substr(ppos + 10)
+                                        }
+                                        ppos = sessToken[sessprmcnt].search("sprop-pps=");
+                                        if (ppos !== -1) {
+                                            SDPData.Sessions[SDPData.Sessions.length - 1].PPS = sessToken[sessprmcnt].substr(ppos + 10)
+                                        }
+                                        ppos = sessToken[sessprmcnt].search("sprop-parameter-sets=");
+                                        if (ppos !== -1) {
+                                            let SPSPPS = sessToken[sessprmcnt].substr(ppos + 21);
+                                            let SPSPPSTokenized = SPSPPS.split(",");
+                                            if (SPSPPSTokenized.length > 1) {
+                                                SDPData.Sessions[SDPData.Sessions.length - 1].SPS = SPSPPSTokenized[0];
+                                                SDPData.Sessions[SDPData.Sessions.length - 1].PPS = SPSPPSTokenized[1]
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        break;
+                    case "m":
+                        let mLineToken = SDPLineTokens[1].split(" ");
+                        let Session = {};
+                        Session.Type = mLineToken[0];
+                        Session.Port = mLineToken[1];
+                        Session.Payload = mLineToken[3];
+                        SDPData.Sessions.push(Session);
+                        mediaFound = true;
+                        break;
+                    case "b":
+                        if (mediaFound === true) {
+                            let bLineToken = SDPLineTokens[1].split(":");
+                            SDPData.Sessions[SDPData.Sessions.length - 1].Bitrate = bLineToken[1]
+                        }
+                        break
+                }
+            }
+        }
+        return SDPData
+    };
+
+    function formDigest(message) {
+        let { Nonce, Realm } = message;
+        //Realm = '54c415830ec4';
+        //Nonce = 'fb01c51948704e59eb5a474b33caff8b';
+        let user = {
+            username: username,
+            password: password,
+        };
+
+        let hex1 = hex_md5(user.username + ":" + Realm + ":" + user.password);
+        let hex2 = hex_md5(currentState.toUpperCase() + ":" + rtspURL);
+        let responce = hex_md5(hex1 + ":" + Nonce + ":" + hex2);
+        Authentication = 'Authorization: Digest username="' + user.username + '", realm="' + Realm + '", nonce="' + Nonce + '",uri="' + rtspURL + '", response="' + responce + '"\r\n' + "Accept: application/sdp\r\n" + '\r\n';
+
+        return currentState.toUpperCase() + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n" + Authentication;
+    }
+
+    function getUser(rtspUrl) {
+        let user = rtspUrl.split('rtsp://')[1].split('@')[0];
+        let username = user.split(':')[0],
+            password = user.split(':')[1];
+        return { username, password };
+    }
+
+    function getBitStream() {
+        if (lastStreamTime === null) {
+            lastStreamTime = Date.now();
+        } else {
+            //console.log(Date.now() - lastStreamTime)
+            return Date.now() - lastStreamTime < 5000;
+        }
+    }
+}
+
+export default WebSocketServer;

src/views/common/rtsp-player/libs/workerManager.js

@@ -0,0 +1,536 @@
+import VideoMediaSource from './MediaSource.js';
+import MP4Remux from './MP4Remux.js';
+import IvsDrawer from './ivsDrawer.js';
+
+function WorkerManager() {
+    let videoWorker;
+    let SDPInfo;
+    let messageArray = [];
+    let rtpStackCount = 0;
+    let videoElement = null;
+    let canvasElement = null;
+    let videoMS = null;
+
+    const rtpStackCheckNum = 10;
+
+    let codecInfo = null;
+    let initSegmentData = null;
+    let mediaInfo = {
+        id: 1,
+        samples: null,
+        baseMediaDecodeTime: 0
+    };
+    let numBox = 1;
+    let mediaSegNum = 0; //用于记录缓存的box个数
+    let mediaFrameData = null; //用于缓存未喂入mse的box
+    let mediaFrameSize = 0; //mediaFrameData的大小
+    let preBaseDecodeTime = 0; //上一个解码时间
+    let curBaseDecodeTime = 0; //从第一帧到当前帧的持续时间
+    let mediaSegmentData = null; //MP4化的数据
+    let sequenseNum = 1;
+
+    let mp4Remux;
+
+    let firstTimeStamp = null; //第一个视频帧的时间戳
+    let SEIinfo = null;
+    let ivsDrawer = null;
+    let info = null;
+    let MAX_INFO = 25; // 限制info最大长度
+    let startDrawIVS = false;
+    let onCanplayCallback = null;
+    let ROIdrawer = null;
+
+    let initialCompleted = false;
+    let onInitialCompletedCallback = null;
+    let frameRate = 25; //默认25
+    let resizeObserver = null;
+    let vw = null;
+    function constructor() {
+    }
+
+    constructor.prototype = {
+        init(video,canvas,ROIElement,vue) {
+            videoWorker = new Worker('/libs/videoWorker.js');
+            // vw = new VideoWorker();// 这里初始化
+            // videoWorker = vue.$worker.create([
+            //     {
+            //         message:'message',
+            //         func:(data)=>{
+            //             if(data.vw && data.vw.receive){
+            //                 let msg = {type:data.type,data:data.data}
+            //                 data.vw.receive(msg)
+            //             }
+            //         }
+            //     }
+            // ])
+
+            videoWorker.onmessage = videoWorkerMessage;
+            videoElement = video;
+            canvasElement = canvas;
+
+            mp4Remux = new MP4Remux();
+            mp4Remux.init();
+
+            SEIinfo = new IVSQueue();
+            info = new LruCache(MAX_INFO);
+            ivsDrawer = new IvsDrawer(canvasElement);
+            ROIdrawer = ROIElement;
+
+            resizeObserver = new ResizeObserver( entries => {
+                ivsDrawer.cover(videoElement);
+                ROIdrawer.cover(videoElement);
+                ROIdrawer.redrawROI();
+            });
+            resizeObserver.observe(videoElement);
+        },
+
+        sendSdpInfo(SDPinfo) {
+            SDPInfo = SDPinfo;
+            console.log(SDPinfo)
+            let message = {
+                type: "sdpInfo",
+                data: {
+                    sdpInfo: SDPInfo
+                }
+            };
+            videoWorker.postMessage(message);
+            //Todo:暂时采用第一路视频的帧率
+            if(SDPInfo.length && SDPInfo[0].Framerate) {
+                frameRate = SDPinfo[0].Framerate;
+            }
+        },
+
+        parseRtpData(rtspinterleave, rtpheader, rtpPacketArray) {
+            // console.log(rtspinterleave)
+            // console.log( rtpheader)
+            // //console.log(rtpPacketArray)
+            // console.log(rtpheader[3])
+
+            let mediaType = rtspinterleave[1];
+            let idx = parseInt(mediaType / 2, 10);
+            let markerBitHex = 128;
+            let message = {
+                type: "rtpData",
+                data: {rtspInterleave: rtspinterleave, header: rtpheader, payload: rtpPacketArray}
+            };
+            //console.log(rtspinterleave)
+            //console.log('idx: ',idx)
+
+            if(idx !== 0) {
+                console.log('idx: ',rtspinterleave);
+                //console.log(SDPInfo)
+                return;
+            }
+            switch (SDPInfo[idx].codecName) {
+                case"H264":
+                    messageArray.push(message);
+                    if (rtpStackCount >= rtpStackCheckNum || (rtpheader[1] & markerBitHex) === markerBitHex) {
+                        if((rtpheader[1] & markerBitHex) === markerBitHex) {
+                            //onsole.log('遇到终止位: ' + rtpheader[1])
+                        }
+                        let sendMessage = {type: "rtpDataArray", data: messageArray};
+                        if (videoWorker) {
+                            videoWorker.postMessage(sendMessage)
+                        }
+                        sendMessage = null;
+                        messageArray = [];
+                        rtpStackCount = 0
+                        //console.log('1111111111')
+                    } else {
+                        rtpStackCount++
+                    }
+                    break;
+                default:
+            }
+        },
+
+        /**
+         * 更新需要绘制的其它信息
+         * @param obj
+         */
+        updateInfo(obj) {
+            //if((obj.name !== '') && (obj.name !== undefined) && (obj.name !== null)) {
+            info.set(obj.id, obj.name);
+            //}
+        },
+
+        setEventCallBack(event, callback) {
+            switch (event) {
+                case 'canplay':
+                    onCanplayCallback = callback;
+                    break;
+                case 'initialCompleted':
+                    onInitialCompletedCallback = callback;
+                    break;
+                case 'ROIFinished':
+                    ROIdrawer.setROIFinishedCallback(callback);
+                    break;
+                default:
+                    break;
+            }
+        },
+
+        setROIDrawer(ROIElement) {
+            ROIdrawer = ROIElement;
+        },
+
+        terminate() {
+            videoWorker.terminate();
+            ivsDrawer.terminate();
+            resizeObserver && resizeObserver.unobserve(videoElement);
+            resizeObserver = null;
+            info.clear();
+            startDrawIVS = false;
+            window.onresize = null;
+            if(videoMS) {
+                videoMS.close();
+                videoMS = null;
+            }
+        }
+    }
+
+    return new constructor();
+
+    function videoWorkerMessage(event) {
+        let videoMessage = event.data;
+        let type = videoMessage.type;
+        //console.log(videoMessage.data)
+        switch (type) {
+            // case 'codecInfo': //设置codecType
+            //     break;
+            // case 'initSegment': //第一个buffer，设置SPS等
+            case 'videoInit'://合并codecInfo和initSegment
+                console.log(videoMessage)
+                codecInfo = videoMessage.data.codecInfo;
+                //console.log(videoMessage.data)
+                initSegmentData = mp4Remux.initSegment(videoMessage.data.initSegmentData);
+//console.log(initSegmentData)
+                videoMS = new VideoMediaSource(videoElement);
+                videoMS.CodecInfo = codecInfo;
+                videoMS.InitSegment = initSegmentData;
+                //console.log(videoMS.CodecInfo, videoMS.InitSegment)
+                videoMS.init();
+                videoMS.onCanplayCallback(()=>{
+                    ivsDrawer.cover(videoElement);
+                    onCanplayCallback && onCanplayCallback();
+                    if(!initialCompleted) {
+                        ROIdrawer.cover(videoElement);
+                        onInitialCompletedCallback && onInitialCompletedCallback();
+                        initialCompleted = true;
+                    }
+                });
+                break;
+            case 'firstvideoTimeStamp':
+                firstTimeStamp = videoMessage.data;
+
+                videoMS.setFirstTimeStamp(firstTimeStamp);
+                //videoMS.setDurationChangeCallBack(drawIVS);
+
+                console.log('first frame timestamp: ', firstTimeStamp);
+                startDrawIVS = true;
+                window.requestAnimationFrame(draw);
+                break;
+            case 'videoTimeStamp'://时间戳，用于智能同步
+                //videoMS.setFirstTimeStamp(videoMessage.data);
+                //console.log('frame timestamp: ', videoMessage.data);
+                //console.log('npt: ', ( videoMessage.data - firstTimeStamp)/90000)
+                break;
+            case 'mediaSample': //用于设置baseMediaDecodeTime
+                if(mediaInfo.samples == null) {
+                    mediaInfo.samples = new Array(numBox);
+                }
+                //console.log('frameDuration: ' + videoMessage.data.frameDuration)
+                curBaseDecodeTime += videoMessage.data.frameDuration;
+
+                mediaInfo.samples[mediaSegNum++] = videoMessage.data;
+                break;
+            case 'videoRender': //视频数据
+                //缓存该segment数据
+                let tempBuffer = new Uint8Array(videoMessage.data.length + mediaFrameSize);
+                if(mediaFrameSize !== 0) {
+                    tempBuffer.set(mediaFrameData);
+                }
+                //console.log(videoMessage)
+                tempBuffer.set(videoMessage.data, mediaFrameSize);
+                mediaFrameData = tempBuffer;
+                mediaFrameSize = mediaFrameData.length;
+
+                if(mediaSegNum % numBox === 0 && mediaSegNum !== 0) {
+                    if (sequenseNum === 1) {
+                        mediaInfo.baseMediaDecodeTime = 0
+                    } else {
+                        mediaInfo.baseMediaDecodeTime = preBaseDecodeTime;
+                    }
+                    preBaseDecodeTime = curBaseDecodeTime;
+                    mediaSegmentData = mp4Remux.mediaSegment(sequenseNum, mediaInfo, mediaFrameData);
+                    sequenseNum++;
+                    mediaSegNum = 0;
+                    mediaFrameData = null;
+                    mediaFrameSize = 0;
+
+                    if (videoMS !== null) {
+                        videoMS.setMediaSegment(mediaSegmentData)
+                    } else {
+
+                    }
+                }
+                break;
+            case 'YUVData'://FFMPEG解码的数据
+                //console.log(videoMessage.data)
+                //draw(videoMessage.data);
+                //yuv2canvas(videoMessage.data.data, videoMessage.data.width, videoMessage.data.height,canvasElement)
+
+                break;
+            case 'SEI': //处理SEI信息
+                //console.log('SEI timestamp: ', videoMessage.data.timestamp);
+                //console.log('SEI-npt: ', (videoMessage.data.timestamp - firstTimeStamp)/90000)
+                if(videoMessage.data.ivs !== null) {
+                    let ivs = [];
+                    videoMessage.data.ivs.map((content, k) => {
+                        if(content.state) { //state=1, 绘制该信息
+                            ivs.push(content);
+                        }else { //state=0, 清除info中对应的id:name
+                            // let id = content.id;
+                            // console.log('删除', id, info[id]);
+                            // delete info[id];
+                            // console.log(info)
+                        }
+                    });
+
+                    //console.log('PUSH SEI: ', videoMessage.data.timestamp)
+                    SEIinfo.push(videoMessage.data.timestamp, ivs);
+
+                    //console.log(videoMessage.data.timestamp - lastTime)
+                    //lastTime = videoMessage.data.timestamp;
+                }
+                //console.log('timestamp: ', videoMessage.data.timestamp)
+                //console.log(SEIinfo)
+                break;
+            default:
+                console.log('暂不支持其他类型');
+                break;
+        }
+    }
+
+    function draw() {
+        let timestamp = parseInt((videoElement.currentTime.toFixed(2) * 90000).toFixed(0)) + firstTimeStamp + 90000/frameRate;//
+        drawIVS(timestamp);
+        if(startDrawIVS) {
+            window.requestAnimationFrame(draw);
+        }
+    }
+
+    /**
+     * 根据时间戳获取相应的ivs信息
+     * @param timestamp 当前帧的时间戳
+     * @returns {*} ivs信息
+     */
+    function getIVS(timestamp) {
+        let preNode = null;
+        let nextNode = null;
+
+        preNode = SEIinfo.shift();
+        nextNode = SEIinfo.top();
+        while((preNode !== undefined) && (preNode !== null)) {
+            if(preNode[0] > timestamp) {
+                SEIinfo.unshift(preNode);
+                //console.log('SEI时间大于video: ', preNode[0], timestamp);
+                return null;
+            } else if(preNode[0] === timestamp) {
+                return preNode;
+            } else {
+
+                if(nextNode === undefined || nextNode === null) {
+                    console.log('last ivs info: ', timestamp, preNode[0], SEIinfo);
+                    //console.log(preNode[0] - lastTime);
+                    //lastTime = preNode[0];
+                    if(timestamp - preNode[0] < 90000/frameRate) {
+                        return preNode;//最后一个node
+                    }
+                    return null;
+                }
+                if(nextNode[0] > timestamp) {
+                    // console.log('video time: ', timestamp, preNode[0], SEIinfo.length());
+                    // if(SEIinfo.length()) {
+                    //     SEIinfo.map((v, k)=>{
+                    //         console.log(v);
+                    //     });
+                    // }
+                    //console.log(preNode[0] - lastTime);
+                    //lastTime = preNode[0];
+                    return preNode;
+                } else if(nextNode[0] === timestamp){
+
+                    nextNode = SEIinfo.shift();
+                    //console.log('video time: ', timestamp, nextNode[0], SEIinfo);
+                    //console.log(nextNode[0] - lastTime);
+                    //lastTime = nextNode[0];
+                    return nextNode;
+                } else {
+                    preNode = SEIinfo.shift();
+                    nextNode = SEIinfo.top();
+                }
+            }
+        }
+        return null;
+    }
+
+    /**
+     * 绘制智能信息
+     * @param timestamp
+     */
+    function drawIVS(timestamp) {
+        let data = getIVS(timestamp);
+        if(data === undefined || data === null) {
+            //清空画布
+            //ivsDrawer.clearCanvas();
+            if(!SEIinfo.length() || (SEIinfo.length() && (SEIinfo.list[0][0] - timestamp) > 90000/frameRate)) {
+                ivsDrawer.clearCanvas();
+            }
+        }else {
+            //console.log('GET SEI: ', data[0], ' videoTimestamp', timestamp);
+            data = data[1];
+            //console.log(info.map.length)
+            if(info.map.length > MAX_INFO) {
+                console.log('info length: ', info.map.length);
+            }
+            //获取鹰眼信息
+            data.map((content, k) =>{
+                let result = info.get(content.id);
+                if(result !== undefined && result !== null) {
+                    data[k].text = result.value;
+                }
+            });
+            ivsDrawer.draw(data, timestamp);
+        }
+    }
+}
+
+function ElementResizeCallback(someElement, callback) {
+    const ro = new ResizeObserver( entries => {
+        // for (let entry of entries) {
+        //     const cr = entry.contentRect;
+        //     console.log('Element:', entry.target);
+        //     console.log(`Element size: ${cr.width}px x ${cr.height}px`);
+        // }
+        callback();
+    });
+    ro.observe(someElement);
+}
+
+function yuv2canvas(yuv, width, height, canvas) {
+
+    canvas.width = width;
+    canvas.height = height;
+
+    var context    = canvas.getContext("2d");
+    var output     = context.createImageData(width, height);
+    var outputData = output.data;
+
+    var yOffset = 0;
+    var uOffset = width * height;
+    var vOffset = width * height + (width*height)/4;
+    for (var h=0; h<height; h++) {
+        for (var w=0; w<width; w++) {
+            var ypos = w + h * width + yOffset;
+
+            var upos = (w>>1) + (h>>1) * width/2 + uOffset;
+            var vpos = (w>>1) + (h>>1) * width/2 + vOffset;
+
+            var Y = yuv[ypos];
+            var U = yuv[upos] - 128;
+            var V = yuv[vpos] - 128;
+
+            var R =  (Y + 1.371*V);
+            var G =  (Y - 0.698*V - 0.336*U);
+            var B =  (Y + 1.732*U);
+
+            var outputData_pos = w*4 + width*h*4;
+            outputData[0+outputData_pos] = R;
+            outputData[1+outputData_pos] = G;
+            outputData[2+outputData_pos] = B;
+            outputData[3+outputData_pos] = 255;
+        }
+    }
+
+    context.putImageData(output, 0, 0);
+}
+
+class IVSQueue {
+    constructor() {
+        this.list = [];
+    }
+
+    push(timestamp, ivs) {
+        for (let i = 0, len = this.list.length; i < len; i++) {
+            if(this.list[i][0] === timestamp) {
+                let oldIvs = this.list[i][1];
+                Array.prototype.push.apply(oldIvs, ivs);
+                this.list[i][1] = oldIvs;
+                return;
+            }
+        }
+        this.list.push([timestamp, ivs]);
+    }
+
+    shift() {
+        let tmp = this.list.shift();
+        return tmp;
+    }
+
+    unshift(node) {
+        this.list.unshift(node);
+    }
+
+    top() {
+        let tmp = this.list[0];
+        return tmp;
+    }
+
+    length() {
+        return this.list.length;
+    }
+
+    map(v,k) {
+        return this.list.map(v,k);
+    }
+}
+
+class LruCache {
+    constructor(limit) {
+        this.limit = limit || 20;
+        this.map = [];
+    }
+    get(key) {
+        return this._search(key);
+    }
+    set(key, value) {
+        let result  = this._search(key);
+        if(!result) {
+            this.map.unshift({
+                key: key,
+                value: value
+            });
+            if(this.map.length > this.limit) {
+                this.map.pop();
+            }
+        }
+    }
+
+    //每次查找将该元素置于队首
+    _search(key) {
+        for(let i = 0, length = this.map.length; i < length; i++) {
+            if(this.map[i].key === key) {
+                let head = this.map.splice(i, 1);
+                this.map.unshift(head[0]);
+                return head[0];
+            }
+        }
+        return null;
+    }
+
+    clear() {
+        this.map = [];
+    }
+}
+export default WorkerManager;

src/views/groupManagment/GroupRecord.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="GroupRecord">
+        <h1>群体档案</h1>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+export default {
+    name: "GroupRecord",
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        ...mapActions(["fetch"]),
+        get() {
+            this.fetch({
+                api: "aaa",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>

src/views/template/Aa.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="MessageServicMer">
+        <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
+        <el-table :data="tableData" border style="width: 80%">
+            <el-table-column prop="id" label="服务商id" width="180"></el-table-column>
+            <el-table-column prop="name" label="服务商名" width="120"></el-table-column>
+            <el-table-column label="发送方式" width="100">
+                <template slot-scope="scope">
+                    <span v-for="item in sendMethodList" :key="item.code">
+                        <el-tag
+                            size="small"
+                            type="warning"
+                            v-if="scope.row.methodCode == item.code"
+                        >{{item.description}}</el-tag>
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="150">
+                <template slot-scope="scope">
+                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                    <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                        <el-button slot="reference" type="text" size="small">删除</el-button>
+                    </el-popconfirm>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog :title="isAdd?'添加消息点':'编辑消息点'" :visible.sync="showDialog">
+            <el-row type="flex">
+                <el-col :span="14">
+                    <el-form ref="dyForm" :model="dyForm" :rules="rules" label-width="140px">
+                        <el-form-item label="服务商名:" prop="name">
+                            <el-input v-model="dyForm.name"></el-input>
+                        </el-form-item>
+                        <el-form-item label="服务商配置信息:">
+                            <el-input v-model="dyForm.info" type="textarea"></el-input>
+                        </el-form-item>
+                        <el-form-item label="发送方式">
+                            <el-select v-model="dyForm.methodCode" placeholder="请选择发送方式">
+                                <el-option
+                                    v-for="item in sendMethodList"
+                                    :label="item.description"
+                                    :value="item.code"
+                                    :key="item.code"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="showDialog=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('dyForm')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+const rules = {
+    code: [{ required: true, message: "请输入消息点编码", trigger: "blur" }],
+    description: [
+        { required: true, message: "请输入消息点描述", trigger: "blur" }
+    ]
+};
+
+export default {
+    name: "MessageServicMer",
+    data() {
+        return {
+            tableData: [],
+            showDialog: false,
+            dyForm: {
+                name: "",
+                info: "",
+                methodCode: ""
+            },
+            sendMethodList: "",
+            rules,
+            isAdd: true
+        };
+    },
+    created() {},
+    mounted() {
+        this.getMessageServicMer();
+        this.getSendMethodList();
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        // 获取消息点
+        getMessageServicMer() {
+            this.fetch({
+                api: "/message/provider/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                    this.tableData = res;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 获取发送方式
+        getSendMethodList() {
+            this.fetch({
+                api: "/message/method/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    this.sendMethodList = res;
+                    console.log("sssssssss")
+                    this.dyForm.methodCode = res[0].code;
+                    console.log(this.dyForm)
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        add() {
+            this.isAdd = true;
+            this.showDialog = true;
+            this.dyForm = {
+                code: null,
+                description: "",
+                remark: ""
+            };
+        },
+        edit(row) {
+            this.isAdd = false;
+            this.showDialog = true;
+            this.dyForm = row;
+        },
+        del(row) {
+            this.fetch({
+                api: "/message/point/delete",
+                method: "POST",
+                data: { id: row.id },
+                success: res => {
+                    console.log(res);
+                    this.getMessageServicMer();
+                    this.$message, success("删除成功！");
+                    // this.$message.success(res.msg);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    console.log(this.dyForm);
+                    this.isAdd
+                        ? this.reqSave("/message/point/add")
+                        : this.reqSave("/message/point/update");
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 请求 保存 （添加 和 更新）
+        reqSave(api) {
+            this.fetch({
+                api,
+                method: "POST",
+                data: this.dyForm,
+                success: res => {
+                    console.log(res);
+                    this.getMessageServicMer();
+                    this.$message.success("添加消息点成功！");
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>
+

src/views/template/Ab.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="MessagePoint">
+        <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
+        <el-table :data="tableData" border style="width: 60%">
+            <el-table-column prop="id" label="序号" width="120"></el-table-column>
+            <el-table-column prop="code" label="消息点编码" width="120" ></el-table-column>
+            <el-table-column label="消息点描述">
+                <template slot-scope="scope">
+                    <p>{{scope.row.description}}</p>
+                </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" ></el-table-column>
+            <el-table-column fixed="right" label="操作" width="150">
+                <template slot-scope="scope">
+                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                    <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                        <el-button slot="reference" type="text" size="small">删除</el-button>
+                    </el-popconfirm>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog :title="isAdd?'添加消息点':'编辑消息点'" :visible.sync="showDialog">
+            <el-row type="flex">
+                <el-col :span="14">
+                    <el-form
+                        ref="dyForm"
+                        :model="dyForm"
+                        :rules="rules"
+                        label-width="100px"
+                        class="demo-dynamic"
+                    >
+                        <el-form-item label="消息点编码:" prop="code">
+                            <el-input v-model="dyForm.code"></el-input>
+                        </el-form-item>
+                        <el-form-item label="消息点描述:" prop="description">
+                            <el-input v-model="dyForm.description"></el-input>
+                        </el-form-item>
+                        <el-form-item label="备注:">
+                            <el-input type="textarea" v-model="dyForm.remark"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="showDialog=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('dyForm')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+const rules = {
+    code: [{ required: true, message: "请输入消息点编码", trigger: "blur" }],
+    description: [
+        { required: true, message: "请输入消息点描述", trigger: "blur" }
+    ]
+};
+
+export default {
+    name: "MessagePoint",
+    data() {
+        return {
+            tableData: [],
+            showDialog: false,
+            dyForm: {
+                code: null,
+                description: "",
+                remark: ""
+            },
+            rules,
+            isAdd: true
+        };
+    },
+    created() {},
+    mounted() {
+        this.getMessagePoint();
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        // 获取消息点
+        getMessagePoint() {
+            this.fetch({
+                api: "/message/point/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                    this.tableData = res;
+                    // this.subDeviceList = res;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        add() {
+            this.isAdd = true;
+            this.showDialog = true;
+            this.dyForm = {
+                code: null,
+                description: "",
+                remark: ""
+            }
+        },
+        edit(row) {
+            this.isAdd = false;
+            this.showDialog = true;
+            this.dyForm = row;
+        },
+        del(row) {
+            this.fetch({
+                api: "/message/point/delete",
+                method: "POST",
+                data: {id:row.id},
+                success: res => {
+                    console.log(res);
+                    this.getMessagePoint();
+                    this.$message,success("删除成功！")
+                    // this.$message.success(res.msg);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    console.log(this.dyForm);
+                    this.isAdd
+                        ? this.reqSave("/message/point/add")
+                        : this.reqSave("/message/point/update");
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 请求 保存 （添加 和 更新）
+        reqSave(api) {
+            this.fetch({
+                api,
+                method: "POST",
+                data: this.dyForm,
+                success: res => {
+                    console.log(res);
+                    this.getMessagePoint();
+                    this.$message.success('添加消息点成功！')
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>
+

src/views/template/Ac.vue

@@ -0,0 +1,339 @@
+<template>
+    <div class="MessageBind">
+        <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
+        <el-table :data="tableData" border>
+            <el-table-column prop="id" label="序号" width="120"></el-table-column>
+
+            <el-table-column label="发送方式" width="100">
+                <template slot-scope="scope">
+                    <span v-for="item in sendMethodList" :key="item.code">
+                        <el-tag
+                            size="small"
+                            type="warning"
+                            v-if="scope.row.methodCode == item.code"
+                        >{{item.description}}</el-tag>
+                    </span>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="消息点">
+                <template slot-scope="scope">
+                    <span v-for="item in messagePointList" :key="item.code">
+                        <el-tag
+                            size="small"
+                            type="info"
+                            v-if="scope.row.pointCode == item.code"
+                        >{{item.description}}</el-tag>
+                    </span>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="模板">
+                <template slot-scope="scope">
+                    <span v-for="item in messageTemplateList" :key="item.code">
+                        <el-tag
+                            size="small"
+                            type="info"
+                            v-if="scope.row.templateCode == item.code"
+                        >{{item.description}}</el-tag>
+                    </span>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="服务商">
+                <template slot-scope="scope">
+                    <span v-for="item in messageServicMerList" :key="item.code">
+                        <el-tag
+                            size="small"
+                            type="success"
+                            v-if="scope.row.providerId == item.id"
+                        >{{item.name}}</el-tag>
+                    </span>
+                </template>
+            </el-table-column>
+
+            <el-table-column fixed="right" label="操作" width="150">
+                <template slot-scope="scope">
+                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                    <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                        <el-button slot="reference" type="text" size="small">删除</el-button>
+                    </el-popconfirm>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog :title="isAdd?'新增消息绑定':'编辑消息绑定'" :visible.sync="showDialog">
+            <el-row type="flex">
+                <el-col :span="14">
+                    <el-form ref="dyForm" :model="dyForm" label-width="140px">
+                        <!-- <el-form-item label="消息点编码:" prop="point">
+                            <el-input v-model="dyForm.code"></el-input>
+                        </el-form-item>-->
+
+                        <el-form-item label="发送方式">
+                            <el-select v-model="dyForm.methodCode" placeholder="请选择发送方式">
+                                <el-option
+                                    v-for="item in sendMethodList"
+                                    :label="item.description"
+                                    :value="item.code"
+                                    :key="item.code"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="消息点">
+                            <el-select v-model="dyForm.pointCode" placeholder="请选择发送方式">
+                                <el-option
+                                    v-for="item in messagePointList"
+                                    :label="item.description"
+                                    :value="item.code"
+                                    :key="item.code"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="模板">
+                            <el-select v-model="dyForm.templateCode" placeholder="请选择发送方式">
+                                <el-option
+                                    v-for="item in messageTemplateList"
+                                    :label="item.description+'(' + comparisonTable[item.methodCode]+')'"
+                                    :value="item.code"
+                                    :key="item.code"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="服务商">
+                            <el-select v-model="dyForm.providerId" placeholder="请选择发送方式">
+                                <el-option
+                                    v-for="item in messageServicMerList"
+                                    :label="item.name+'(' + comparisonTable[item.methodCode]+')'"
+                                    :value="item.id"
+                                    :key="item.id"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <el-button @click="showDialog=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('dyForm')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+const rules = {
+    // code: [{ required: true, message: "请输入消息模板编码", trigger: "blur" }],
+    // description: [
+    //     { required: true, message: "请输入消息点描述", trigger: "blur" }
+    // ]
+};
+
+export default {
+    name: "MessageBind",
+    data() {
+        return {
+            tableData: [],
+            showDialog: false,
+            dyForm: {
+                methodCode: null,
+                pointCode: null,
+                templateCode: null,
+                providerId: null
+            },
+            sendMethodList: [],
+            messagePointList: [],
+            messageTemplateList: [],
+            messageServicMerList: [],
+            // 发送方式的 code 与 name对照表
+            comparisonTable: {},
+            rules,
+            isAdd: true
+        };
+    },
+    mounted() {
+        // 获取消息绑定 列表
+        this.getMessageBind();
+        // 获取发送方式 列表
+        this.getSendMethodList();
+        // 获取消息点 列表
+        this.getMessagePoint();
+        // 获取消息模板 列表
+        this.getMessageTemplate();
+        // 获取服务商 列表
+        this.getMessageServicMer();
+    },
+    
+    methods: {
+        ...mapActions(["fetch"]),
+        // 获取消息绑定 列表
+        getMessageBind() {
+            this.fetch({
+                api: "/message/bind/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    this.tableData = res;
+                    
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+
+        // 获取发送方式 列表
+        getSendMethodList() {
+            this.fetch({
+                api: "/message/method/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    this.sendMethodList = res;
+                    this.dyForm.methodCode = res[0].code;
+
+                    let comparisonTable = {}
+                    res.forEach(item => {
+                        comparisonTable[item.code] = item.description
+                    });
+                    this.comparisonTable = comparisonTable;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 获取消息点 列表
+        getMessagePoint() {
+            this.fetch({
+                api: "/message/point/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                    this.messagePointList = res;
+                    this.dyForm.pointCode = res[0].code;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 获取消息模板 列表
+        getMessageTemplate() {
+            this.fetch({
+                api: "/message/template/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    this.messageTemplateList = res;
+                    this.dyForm.templateCode = res[0].code;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 获取服务商 列表
+        getMessageServicMer() {
+            this.fetch({
+                api: "/message/provider/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                    this.messageServicMerList = res;
+                    this.dyForm.providerId = res[0].name;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        add() {
+            this.isAdd = true;
+            this.showDialog = true;
+            // this.dyForm = {
+            //     methodCode: this.sendMethodList[0].code,
+            //     pointCode: this.messagePointList[0].code,
+            //     templateCode: this.messageTemplateList[0].code,
+            //     providerId: this.messageServicMerList[0].id,
+            // };
+        },
+        edit(row) {
+            console.log(row);
+            this.isAdd = false;
+            this.showDialog = true;
+            this.dyForm = row;
+        },
+        del(row) {
+            this.fetch({
+                api: "/message/bind/delete",
+                method: "POST",
+                data: { id: row.id },
+                success: res => {
+                    console.log(res);
+                    this.getMessageBind();
+                    this.$message, success("删除成功！");
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    console.log(this.dyForm);
+                    this.isAdd
+                        ? this.reqSave("/message/bind/add")
+                        : this.reqSave("/message/bind/update");
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 请求 保存 （添加 和 更新）
+        reqSave(api) {
+            this.fetch({
+                api,
+                method: "POST",
+                data: this.dyForm,
+                success: res => {
+                    console.log(res);
+                    this.getMessageBind();
+                    this.$message.success("添加消息模板成功！");
+                    this.showDialog = false;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 
+        findSendMethodName(methodCode) {
+           
+        }
+    }
+};
+
+</script>
+

src/views/template/Ad.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="Ad">
+        <h1>Ad444999</h1>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+export default {
+    name: "Ad",
+    data() {
+        return {};
+    },
+    created() {
+        // this.get()
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        get() {
+            console.log('999')
+            this.fetch({
+                api: "core/memberInfo/list",
+                method: "GET",
+                data: {
+                    tableId: 1,
+                    breedingId: 1
+                },
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>

src/views/template/Ae.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="Ad">
+        <h1>Ad555</h1>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+export default {
+    name: "Ad",
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        ...mapActions(["fetch"]),
+        get() {
+            this.fetch({
+                api: "aaa",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>

src/views/template/Af.vue

@@ -0,0 +1,312 @@
+<template>
+    <div class="Ad">
+        <h1>Ad666</h1>
+        <el-cascader :options="options" :props="{ checkStrictly: true }" v-model="value" clearable>
+            <template slot-scope="{ node, data }">
+                <span>{{ data.label }}</span>
+                <span v-if="!node.isLeaf">({{ data.children.length }})</span>
+            </template>
+        </el-cascader>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+export default {
+    name: "Af",
+    data() {
+        return {
+            value: ["zhinan", "shejiyuanze"],
+            options: [
+                {
+                    value: "zhinan",
+                    label: "指南",
+                    children: [
+                        {
+                            value: "shejiyuanze",
+                            label: "设计原则",
+                            children: [
+                                {
+                                    value: "yizhi",
+                                    label: "一致"
+                                },
+                                {
+                                    value: "fankui",
+                                    label: "反馈"
+                                },
+                                {
+                                    value: "xiaolv",
+                                    label: "效率"
+                                },
+                                {
+                                    value: "kekong",
+                                    label: "可控"
+                                }
+                            ]
+                        },
+                        {
+                            value: "daohang",
+                            label: "导航",
+                            children: [
+                                {
+                                    value: "cexiangdaohang",
+                                    label: "侧向导航"
+                                },
+                                {
+                                    value: "dingbudaohang",
+                                    label: "顶部导航"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    value: "zujian",
+                    label: "组件",
+                    children: [
+                        {
+                            value: "basic",
+                            label: "Basic",
+                            children: [
+                                {
+                                    value: "layout",
+                                    label: "Layout 布局"
+                                },
+                                {
+                                    value: "color",
+                                    label: "Color 色彩"
+                                },
+                                {
+                                    value: "typography",
+                                    label: "Typography 字体"
+                                },
+                                {
+                                    value: "icon",
+                                    label: "Icon 图标"
+                                },
+                                {
+                                    value: "button",
+                                    label: "Button 按钮"
+                                }
+                            ]
+                        },
+                        {
+                            value: "form",
+                            label: "Form",
+                            children: [
+                                {
+                                    value: "radio",
+                                    label: "Radio 单选框"
+                                },
+                                {
+                                    value: "checkbox",
+                                    label: "Checkbox 多选框"
+                                },
+                                {
+                                    value: "input",
+                                    label: "Input 输入框"
+                                },
+                                {
+                                    value: "input-number",
+                                    label: "InputNumber 计数器"
+                                },
+                                {
+                                    value: "select",
+                                    label: "Select 选择器"
+                                },
+                                {
+                                    value: "cascader",
+                                    label: "Cascader 级联选择器"
+                                },
+                                {
+                                    value: "switch",
+                                    label: "Switch 开关"
+                                },
+                                {
+                                    value: "slider",
+                                    label: "Slider 滑块"
+                                },
+                                {
+                                    value: "time-picker",
+                                    label: "TimePicker 时间选择器"
+                                },
+                                {
+                                    value: "date-picker",
+                                    label: "DatePicker 日期选择器"
+                                },
+                                {
+                                    value: "datetime-picker",
+                                    label: "DateTimePicker 日期时间选择器"
+                                },
+                                {
+                                    value: "upload",
+                                    label: "Upload 上传"
+                                },
+                                {
+                                    value: "rate",
+                                    label: "Rate 评分"
+                                },
+                                {
+                                    value: "form",
+                                    label: "Form 表单"
+                                }
+                            ]
+                        },
+                        {
+                            value: "data",
+                            label: "Data",
+                            children: [
+                                {
+                                    value: "table",
+                                    label: "Table 表格"
+                                },
+                                {
+                                    value: "tag",
+                                    label: "Tag 标签"
+                                },
+                                {
+                                    value: "progress",
+                                    label: "Progress 进度条"
+                                },
+                                {
+                                    value: "tree",
+                                    label: "Tree 树形控件"
+                                },
+                                {
+                                    value: "pagination",
+                                    label: "Pagination 分页"
+                                },
+                                {
+                                    value: "badge",
+                                    label: "Badge 标记"
+                                }
+                            ]
+                        },
+                        {
+                            value: "notice",
+                            label: "Notice",
+                            children: [
+                                {
+                                    value: "alert",
+                                    label: "Alert 警告"
+                                },
+                                {
+                                    value: "loading",
+                                    label: "Loading 加载"
+                                },
+                                {
+                                    value: "message",
+                                    label: "Message 消息提示"
+                                },
+                                {
+                                    value: "message-box",
+                                    label: "MessageBox 弹框"
+                                },
+                                {
+                                    value: "notification",
+                                    label: "Notification 通知"
+                                }
+                            ]
+                        },
+                        {
+                            value: "navigation",
+                            label: "Navigation",
+                            children: [
+                                {
+                                    value: "menu",
+                                    label: "NavMenu 导航菜单"
+                                },
+                                {
+                                    value: "tabs",
+                                    label: "Tabs 标签页"
+                                },
+                                {
+                                    value: "breadcrumb",
+                                    label: "Breadcrumb 面包屑"
+                                },
+                                {
+                                    value: "dropdown",
+                                    label: "Dropdown 下拉菜单"
+                                },
+                                {
+                                    value: "steps",
+                                    label: "Steps 步骤条"
+                                }
+                            ]
+                        },
+                        {
+                            value: "others",
+                            label: "Others",
+                            children: [
+                                {
+                                    value: "dialog",
+                                    label: "Dialog 对话框"
+                                },
+                                {
+                                    value: "tooltip",
+                                    label: "Tooltip 文字提示"
+                                },
+                                {
+                                    value: "popover",
+                                    label: "Popover 弹出框"
+                                },
+                                {
+                                    value: "card",
+                                    label: "Card 卡片"
+                                },
+                                {
+                                    value: "carousel",
+                                    label: "Carousel 走马灯"
+                                },
+                                {
+                                    value: "collapse",
+                                    label: "Collapse 折叠面板"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    value: "ziyuan",
+                    label: "资源",
+                    children: [
+                        {
+                            value: "axure",
+                            label: "Axure Components"
+                        },
+                        {
+                            value: "sketch",
+                            label: "Sketch Templates"
+                        },
+                        {
+                            value: "jiaohu",
+                            label: "组件交互文档"
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    created() {},
+    methods: {
+        ...mapActions(["fetch"]),
+
+        get() {
+            this.fetch({
+                api: "core/memberInfo/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>

src/views/unityManagement/UnityTrace.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="UnityTrace">
+        <h1>个体追踪</h1>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+export default {
+    name: "UnityTrace",
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        ...mapActions(["fetch"]),
+        get() {
+            this.fetch({
+                api: "aaa",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>

theme/alert.css

@@ -0,0 +1,343 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.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: #FFFFFF;
+  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-light .el-alert__closebtn {
+    color: #C0C4CC; }
+  .el-alert.is-dark .el-alert__closebtn {
+    color: #FFFFFF; }
+  .el-alert.is-dark .el-alert__description {
+    color: #FFFFFF; }
+  .el-alert.is-center {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center; }
+  .el-alert--success.is-light {
+    background-color: #f0f9eb;
+    color: #67C23A; }
+    .el-alert--success.is-light .el-alert__description {
+      color: #67C23A; }
+  .el-alert--success.is-dark {
+    background-color: #67C23A;
+    color: #FFFFFF; }
+  .el-alert--info.is-light {
+    background-color: #f4f4f5;
+    color: #909399; }
+  .el-alert--info.is-dark {
+    background-color: #909399;
+    color: #FFFFFF; }
+  .el-alert--info .el-alert__description {
+    color: #909399; }
+  .el-alert--warning.is-light {
+    background-color: #fdf6ec;
+    color: #E6A23C; }
+    .el-alert--warning.is-light .el-alert__description {
+      color: #E6A23C; }
+  .el-alert--warning.is-dark {
+    background-color: #E6A23C;
+    color: #FFFFFF; }
+  .el-alert--error.is-light {
+    background-color: #fef0f0;
+    color: #F56C6C; }
+    .el-alert--error.is-light .el-alert__description {
+      color: #F56C6C; }
+  .el-alert--error.is-dark {
+    background-color: #F56C6C;
+    color: #FFFFFF; }
+  .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: bold; }
+  .el-alert .el-alert__description {
+    font-size: 12px;
+    margin: 5px 0 0 0; }
+  .el-alert__closebtn {
+    font-size: 12px;
+    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; }

theme/aside.css

@@ -0,0 +1,136 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+.el-aside {
+  overflow: auto;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -ms-flex-negative: 0;
+  flex-shrink: 0; }

theme/avatar.css

@@ -0,0 +1,284 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-avatar {
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: #fff;
+  background: #C0C4CC;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px; }
+  .el-avatar > img {
+    display: block;
+    height: 100%;
+    vertical-align: middle; }
+  .el-avatar--circle {
+    border-radius: 50%; }
+  .el-avatar--square {
+    border-radius: 4px; }
+  .el-avatar--icon {
+    font-size: 18px; }
+  .el-avatar--large {
+    width: 40px;
+    height: 40px;
+    line-height: 40px; }
+  .el-avatar--medium {
+    width: 36px;
+    height: 36px;
+    line-height: 36px; }
+  .el-avatar--small {
+    width: 28px;
+    height: 28px;
+    line-height: 28px; }

theme/backtop.css

@@ -0,0 +1,273 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-backtop {
+  position: fixed;
+  background-color: #FFFFFF;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: #029B62;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 20px;
+  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  z-index: 5; }
+  .el-backtop:hover {
+    background-color: #F2F6FC; }

theme/badge.css

@@ -0,0 +1,290 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-badge {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block; }
+  .el-badge__content {
+    background-color: #F56C6C;
+    border-radius: 10px;
+    color: #FFFFFF;
+    display: inline-block;
+    font-size: 12px;
+    height: 18px;
+    line-height: 18px;
+    padding: 0 6px;
+    text-align: center;
+    white-space: nowrap;
+    border: 1px solid #FFFFFF; }
+    .el-badge__content.is-fixed {
+      position: absolute;
+      top: 0;
+      right: 10px;
+      -webkit-transform: translateY(-50%) translateX(100%);
+      transform: translateY(-50%) translateX(100%); }
+      .el-badge__content.is-fixed.is-dot {
+        right: 5px; }
+    .el-badge__content.is-dot {
+      height: 8px;
+      width: 8px;
+      padding: 0;
+      right: 0;
+      border-radius: 50%; }
+    .el-badge__content--primary {
+      background-color: #029B62; }
+    .el-badge__content--success {
+      background-color: #67C23A; }
+    .el-badge__content--warning {
+      background-color: #E6A23C; }
+    .el-badge__content--info {
+      background-color: #909399; }
+    .el-badge__content--danger {
+      background-color: #F56C6C; }

theme/breadcrumb.css

@@ -0,0 +1,287 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-breadcrumb {
+  font-size: 14px;
+  line-height: 1; }
+  .el-breadcrumb::before,
+  .el-breadcrumb::after {
+    display: table;
+    content: ""; }
+  .el-breadcrumb::after {
+    clear: both; }
+  .el-breadcrumb__separator {
+    margin: 0 9px;
+    font-weight: bold;
+    color: #C0C4CC; }
+    .el-breadcrumb__separator[class*=icon] {
+      margin: 0 6px;
+      font-weight: normal; }
+  .el-breadcrumb__item {
+    float: left; }
+    .el-breadcrumb__inner {
+      color: #606266; }
+      .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
+        font-weight: bold;
+        text-decoration: none;
+        -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        color: #303133; }
+        .el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover {
+          color: #029B62;
+          cursor: pointer; }
+    .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
+    .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
+    .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
+      font-weight: normal;
+      color: #606266;
+      cursor: text; }
+    .el-breadcrumb__item:last-child .el-breadcrumb__separator {
+      display: none; }

theme/button.css

@@ -0,0 +1,762 @@
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+.el-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #FFFFFF;
+  border: 1px solid #DCDFE6;
+  border-color: #DCDFE6;
+  color: #606266;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  -webkit-transition: .1s;
+  transition: .1s;
+  font-weight: 500;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px; }
+  .el-button + .el-button {
+    margin-left: 10px; }
+  .el-button.is-round {
+    padding: 12px 20px; }
+  .el-button:hover, .el-button:focus {
+    color: #029B62;
+    border-color: #b3e1d0;
+    background-color: #e6f5ef; }
+  .el-button:active {
+    color: #028c58;
+    border-color: #028c58;
+    outline: none; }
+  .el-button::-moz-focus-inner {
+    border: 0; }
+  .el-button [class*="el-icon-"] + span {
+    margin-left: 5px; }
+  .el-button.is-plain:hover, .el-button.is-plain:focus {
+    background: #FFFFFF;
+    border-color: #029B62;
+    color: #029B62; }
+  .el-button.is-plain:active {
+    background: #FFFFFF;
+    border-color: #028c58;
+    color: #028c58;
+    outline: none; }
+  .el-button.is-active {
+    color: #028c58;
+    border-color: #028c58; }
+  .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus {
+    color: #C0C4CC;
+    cursor: not-allowed;
+    background-image: none;
+    background-color: #FFFFFF;
+    border-color: #EBEEF5; }
+  .el-button.is-disabled.el-button--text {
+    background-color: transparent; }
+  .el-button.is-disabled.is-plain, .el-button.is-disabled.is-plain:hover, .el-button.is-disabled.is-plain:focus {
+    background-color: #FFFFFF;
+    border-color: #EBEEF5;
+    color: #C0C4CC; }
+  .el-button.is-loading {
+    position: relative;
+    pointer-events: none; }
+    .el-button.is-loading:before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: inherit;
+      background-color: rgba(255, 255, 255, 0.35); }
+  .el-button.is-round {
+    border-radius: 20px;
+    padding: 12px 23px; }
+  .el-button.is-circle {
+    border-radius: 50%;
+    padding: 12px; }
+  .el-button--primary {
+    color: #FFFFFF;
+    background-color: #029B62;
+    border-color: #029B62; }
+    .el-button--primary:hover, .el-button--primary:focus {
+      background: #35af81;
+      border-color: #35af81;
+      color: #FFFFFF; }
+    .el-button--primary:active {
+      background: #028c58;
+      border-color: #028c58;
+      color: #FFFFFF;
+      outline: none; }
+    .el-button--primary.is-active {
+      background: #028c58;
+      border-color: #028c58;
+      color: #FFFFFF; }
+    .el-button--primary.is-disabled, .el-button--primary.is-disabled:hover, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:active {
+      color: #FFFFFF;
+      background-color: #81cdb1;
+      border-color: #81cdb1; }
+    .el-button--primary.is-plain {
+      color: #029B62;
+      background: #e6f5ef;
+      border-color: #9ad7c0; }
+      .el-button--primary.is-plain:hover, .el-button--primary.is-plain:focus {
+        background: #029B62;
+        border-color: #029B62;
+        color: #FFFFFF; }
+      .el-button--primary.is-plain:active {
+        background: #028c58;
+        border-color: #028c58;
+        color: #FFFFFF;
+        outline: none; }
+      .el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:hover, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:active {
+        color: #67c3a1;
+        background-color: #e6f5ef;
+        border-color: #ccebe0; }
+  .el-button--success {
+    color: #FFFFFF;
+    background-color: #67C23A;
+    border-color: #67C23A; }
+    .el-button--success:hover, .el-button--success:focus {
+      background: #85ce61;
+      border-color: #85ce61;
+      color: #FFFFFF; }
+    .el-button--success:active {
+      background: #5daf34;
+      border-color: #5daf34;
+      color: #FFFFFF;
+      outline: none; }
+    .el-button--success.is-active {
+      background: #5daf34;
+      border-color: #5daf34;
+      color: #FFFFFF; }
+    .el-button--success.is-disabled, .el-button--success.is-disabled:hover, .el-button--success.is-disabled:focus, .el-button--success.is-disabled:active {
+      color: #FFFFFF;
+      background-color: #b3e19d;
+      border-color: #b3e19d; }
+    .el-button--success.is-plain {
+      color: #67C23A;
+      background: #f0f9eb;
+      border-color: #c2e7b0; }
+      .el-button--success.is-plain:hover, .el-button--success.is-plain:focus {
+        background: #67C23A;
+        border-color: #67C23A;
+        color: #FFFFFF; }
+      .el-button--success.is-plain:active {
+        background: #5daf34;
+        border-color: #5daf34;
+        color: #FFFFFF;
+        outline: none; }
+      .el-button--success.is-plain.is-disabled, .el-button--success.is-plain.is-disabled:hover, .el-button--success.is-plain.is-disabled:focus, .el-button--success.is-plain.is-disabled:active {
+        color: #a4da89;
+        background-color: #f0f9eb;
+        border-color: #e1f3d8; }
+  .el-button--warning {
+    color: #FFFFFF;
+    background-color: #E6A23C;
+    border-color: #E6A23C; }
+    .el-button--warning:hover, .el-button--warning:focus {
+      background: #ebb563;
+      border-color: #ebb563;
+      color: #FFFFFF; }
+    .el-button--warning:active {
+      background: #cf9236;
+      border-color: #cf9236;
+      color: #FFFFFF;
+      outline: none; }
+    .el-button--warning.is-active {
+      background: #cf9236;
+      border-color: #cf9236;
+      color: #FFFFFF; }
+    .el-button--warning.is-disabled, .el-button--warning.is-disabled:hover, .el-button--warning.is-disabled:focus, .el-button--warning.is-disabled:active {
+      color: #FFFFFF;
+      background-color: #f3d19e;
+      border-color: #f3d19e; }
+    .el-button--warning.is-plain {
+      color: #E6A23C;
+      background: #fdf6ec;
+      border-color: #f5dab1; }
+      .el-button--warning.is-plain:hover, .el-button--warning.is-plain:focus {
+        background: #E6A23C;
+        border-color: #E6A23C;
+        color: #FFFFFF; }
+      .el-button--warning.is-plain:active {
+        background: #cf9236;
+        border-color: #cf9236;
+        color: #FFFFFF;
+        outline: none; }
+      .el-button--warning.is-plain.is-disabled, .el-button--warning.is-plain.is-disabled:hover, .el-button--warning.is-plain.is-disabled:focus, .el-button--warning.is-plain.is-disabled:active {
+        color: #f0c78a;
+        background-color: #fdf6ec;
+        border-color: #faecd8; }
+  .el-button--danger {
+    color: #FFFFFF;
+    background-color: #F56C6C;
+    border-color: #F56C6C; }
+    .el-button--danger:hover, .el-button--danger:focus {
+      background: #f78989;
+      border-color: #f78989;
+      color: #FFFFFF; }
+    .el-button--danger:active {
+      background: #dd6161;
+      border-color: #dd6161;
+      color: #FFFFFF;
+      outline: none; }
+    .el-button--danger.is-active {
+      background: #dd6161;
+      border-color: #dd6161;
+      color: #FFFFFF; }
+    .el-button--danger.is-disabled, .el-button--danger.is-disabled:hover, .el-button--danger.is-disabled:focus, .el-button--danger.is-disabled:active {
+      color: #FFFFFF;
+      background-color: #fab6b6;
+      border-color: #fab6b6; }
+    .el-button--danger.is-plain {
+      color: #F56C6C;
+      background: #fef0f0;
+      border-color: #fbc4c4; }
+      .el-button--danger.is-plain:hover, .el-button--danger.is-plain:focus {
+        background: #F56C6C;
+        border-color: #F56C6C;
+        color: #FFFFFF; }
+      .el-button--danger.is-plain:active {
+        background: #dd6161;
+        border-color: #dd6161;
+        color: #FFFFFF;
+        outline: none; }
+      .el-button--danger.is-plain.is-disabled, .el-button--danger.is-plain.is-disabled:hover, .el-button--danger.is-plain.is-disabled:focus, .el-button--danger.is-plain.is-disabled:active {
+        color: #f9a7a7;
+        background-color: #fef0f0;
+        border-color: #fde2e2; }
+  .el-button--info {
+    color: #FFFFFF;
+    background-color: #909399;
+    border-color: #909399; }
+    .el-button--info:hover, .el-button--info:focus {
+      background: #a6a9ad;
+      border-color: #a6a9ad;
+      color: #FFFFFF; }
+    .el-button--info:active {
+      background: #82848a;
+      border-color: #82848a;
+      color: #FFFFFF;
+      outline: none; }
+    .el-button--info.is-active {
+      background: #82848a;
+      border-color: #82848a;
+      color: #FFFFFF; }
+    .el-button--info.is-disabled, .el-button--info.is-disabled:hover, .el-button--info.is-disabled:focus, .el-button--info.is-disabled:active {
+      color: #FFFFFF;
+      background-color: #c8c9cc;
+      border-color: #c8c9cc; }
+    .el-button--info.is-plain {
+      color: #909399;
+      background: #f4f4f5;
+      border-color: #d3d4d6; }
+      .el-button--info.is-plain:hover, .el-button--info.is-plain:focus {
+        background: #909399;
+        border-color: #909399;
+        color: #FFFFFF; }
+      .el-button--info.is-plain:active {
+        background: #82848a;
+        border-color: #82848a;
+        color: #FFFFFF;
+        outline: none; }
+      .el-button--info.is-plain.is-disabled, .el-button--info.is-plain.is-disabled:hover, .el-button--info.is-plain.is-disabled:focus, .el-button--info.is-plain.is-disabled:active {
+        color: #bcbec2;
+        background-color: #f4f4f5;
+        border-color: #e9e9eb; }
+  .el-button--medium {
+    padding: 10px 20px;
+    font-size: 14px;
+    border-radius: 4px; }
+    .el-button--medium.is-round {
+      padding: 10px 20px; }
+    .el-button--medium.is-circle {
+      padding: 10px; }
+  .el-button--small {
+    padding: 9px 15px;
+    font-size: 12px;
+    border-radius: 3px; }
+    .el-button--small.is-round {
+      padding: 9px 15px; }
+    .el-button--small.is-circle {
+      padding: 9px; }
+  .el-button--mini {
+    padding: 7px 15px;
+    font-size: 12px;
+    border-radius: 3px; }
+    .el-button--mini.is-round {
+      padding: 7px 15px; }
+    .el-button--mini.is-circle {
+      padding: 7px; }
+  .el-button--text {
+    border-color: transparent;
+    color: #029B62;
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0; }
+    .el-button--text:hover, .el-button--text:focus {
+      color: #35af81;
+      border-color: transparent;
+      background-color: transparent; }
+    .el-button--text:active {
+      color: #028c58;
+      border-color: transparent;
+      background-color: transparent; }
+    .el-button--text.is-disabled, .el-button--text.is-disabled:hover, .el-button--text.is-disabled:focus {
+      border-color: transparent; }
+
+.el-button-group {
+  display: inline-block;
+  vertical-align: middle; }
+  .el-button-group::before,
+  .el-button-group::after {
+    display: table;
+    content: ""; }
+  .el-button-group::after {
+    clear: both; }
+  .el-button-group > .el-button {
+    float: left;
+    position: relative; }
+    .el-button-group > .el-button + .el-button {
+      margin-left: 0; }
+    .el-button-group > .el-button.is-disabled {
+      z-index: 1; }
+    .el-button-group > .el-button:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0; }
+    .el-button-group > .el-button:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0; }
+    .el-button-group > .el-button:first-child:last-child {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px; }
+      .el-button-group > .el-button:first-child:last-child.is-round {
+        border-radius: 20px; }
+      .el-button-group > .el-button:first-child:last-child.is-circle {
+        border-radius: 50%; }
+    .el-button-group > .el-button:not(:first-child):not(:last-child) {
+      border-radius: 0; }
+    .el-button-group > .el-button:not(:last-child) {
+      margin-right: -1px; }
+    .el-button-group > .el-button:hover, .el-button-group > .el-button:focus, .el-button-group > .el-button:active {
+      z-index: 1; }
+    .el-button-group > .el-button.is-active {
+      z-index: 1; }
+  .el-button-group > .el-dropdown > .el-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--primary:first-child {
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--primary:last-child {
+    border-left-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--primary:not(:first-child):not(:last-child) {
+    border-left-color: rgba(255, 255, 255, 0.5);
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--success:first-child {
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--success:last-child {
+    border-left-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--success:not(:first-child):not(:last-child) {
+    border-left-color: rgba(255, 255, 255, 0.5);
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--warning:first-child {
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--warning:last-child {
+    border-left-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--warning:not(:first-child):not(:last-child) {
+    border-left-color: rgba(255, 255, 255, 0.5);
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--danger:first-child {
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--danger:last-child {
+    border-left-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--danger:not(:first-child):not(:last-child) {
+    border-left-color: rgba(255, 255, 255, 0.5);
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--info:first-child {
+    border-right-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--info:last-child {
+    border-left-color: rgba(255, 255, 255, 0.5); }
+  .el-button-group .el-button--info:not(:first-child):not(:last-child) {
+    border-left-color: rgba(255, 255, 255, 0.5);
+    border-right-color: rgba(255, 255, 255, 0.5); }

theme/card.css

@@ -0,0 +1,271 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-card {
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  background-color: #FFFFFF;
+  overflow: hidden;
+  color: #303133;
+  -webkit-transition: 0.3s;
+  transition: 0.3s; }
+  .el-card.is-always-shadow {
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
+  .el-card.is-hover-shadow:hover, .el-card.is-hover-shadow:focus {
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
+  .el-card__header {
+    padding: 18px 20px;
+    border-bottom: 1px solid #EBEEF5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+  .el-card__body {
+    padding: 20px; }

theme/carousel-item.css

@@ -0,0 +1,291 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-carousel__item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+  z-index: 0; }
+  .el-carousel__item.is-active {
+    z-index: 2; }
+  .el-carousel__item.is-animating {
+    -webkit-transition: -webkit-transform .4s ease-in-out;
+    transition: -webkit-transform .4s ease-in-out;
+    transition: transform .4s ease-in-out;
+    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out; }
+  .el-carousel__item--card {
+    width: 50%;
+    -webkit-transition: -webkit-transform .4s ease-in-out;
+    transition: -webkit-transform .4s ease-in-out;
+    transition: transform .4s ease-in-out;
+    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out; }
+    .el-carousel__item--card.is-in-stage {
+      cursor: pointer;
+      z-index: 1; }
+      .el-carousel__item--card.is-in-stage:hover .el-carousel__mask,
+      .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask {
+        opacity: 0.12; }
+    .el-carousel__item--card.is-active {
+      z-index: 2; }
+
+.el-carousel__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #FFFFFF;
+  opacity: 0.24;
+  -webkit-transition: .2s;
+  transition: .2s; }

theme/carousel.css

@@ -0,0 +1,367 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-carousel {
+  position: relative; }
+  .el-carousel--horizontal {
+    overflow-x: hidden; }
+  .el-carousel--vertical {
+    overflow-y: hidden; }
+  .el-carousel__container {
+    position: relative;
+    height: 300px; }
+  .el-carousel__arrow {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    height: 36px;
+    width: 36px;
+    cursor: pointer;
+    -webkit-transition: .3s;
+    transition: .3s;
+    border-radius: 50%;
+    background-color: rgba(31, 45, 61, 0.11);
+    color: #FFFFFF;
+    position: absolute;
+    top: 50%;
+    z-index: 10;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    text-align: center;
+    font-size: 12px; }
+    .el-carousel__arrow--left {
+      left: 16px; }
+    .el-carousel__arrow--right {
+      right: 16px; }
+    .el-carousel__arrow:hover {
+      background-color: rgba(31, 45, 61, 0.23); }
+    .el-carousel__arrow i {
+      cursor: pointer; }
+  .el-carousel__indicators {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    z-index: 2; }
+    .el-carousel__indicators--horizontal {
+      bottom: 0;
+      left: 50%;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%); }
+    .el-carousel__indicators--vertical {
+      right: 0;
+      top: 50%;
+      -webkit-transform: translateY(-50%);
+      transform: translateY(-50%); }
+    .el-carousel__indicators--outside {
+      bottom: 26px;
+      text-align: center;
+      position: static;
+      -webkit-transform: none;
+      transform: none; }
+      .el-carousel__indicators--outside .el-carousel__indicator:hover button {
+        opacity: 0.64; }
+      .el-carousel__indicators--outside button {
+        background-color: #C0C4CC;
+        opacity: 0.24; }
+    .el-carousel__indicators--labels {
+      left: 0;
+      right: 0;
+      -webkit-transform: none;
+      transform: none;
+      text-align: center; }
+      .el-carousel__indicators--labels .el-carousel__button {
+        height: auto;
+        width: auto;
+        padding: 2px 18px;
+        font-size: 12px; }
+      .el-carousel__indicators--labels .el-carousel__indicator {
+        padding: 6px 4px; }
+  .el-carousel__indicator {
+    background-color: transparent;
+    cursor: pointer; }
+    .el-carousel__indicator:hover button {
+      opacity: 0.72; }
+    .el-carousel__indicator--horizontal {
+      display: inline-block;
+      padding: 12px 4px; }
+    .el-carousel__indicator--vertical {
+      padding: 4px 12px; }
+      .el-carousel__indicator--vertical .el-carousel__button {
+        width: 2px;
+        height: 15px; }
+    .el-carousel__indicator.is-active button {
+      opacity: 1; }
+  .el-carousel__button {
+    display: block;
+    opacity: 0.48;
+    width: 30px;
+    height: 2px;
+    background-color: #FFFFFF;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    -webkit-transition: .3s;
+    transition: .3s; }
+
+.carousel-arrow-left-enter,
+.carousel-arrow-left-leave-active {
+  -webkit-transform: translateY(-50%) translateX(-10px);
+  transform: translateY(-50%) translateX(-10px);
+  opacity: 0; }
+
+.carousel-arrow-right-enter,
+.carousel-arrow-right-leave-active {
+  -webkit-transform: translateY(-50%) translateX(10px);
+  transform: translateY(-50%) translateX(10px);
+  opacity: 0; }

theme/checkbox.css

@@ -0,0 +1,636 @@
+@charset "UTF-8";
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-checkbox {
+  color: #606266;
+  font-weight: 500;
+  font-size: 14px;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin-right: 30px; }
+  .el-checkbox.is-bordered {
+    padding: 9px 20px 9px 10px;
+    border-radius: 4px;
+    border: 1px solid #DCDFE6;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    line-height: normal;
+    height: 40px; }
+    .el-checkbox.is-bordered.is-checked {
+      border-color: #029B62; }
+    .el-checkbox.is-bordered.is-disabled {
+      border-color: #EBEEF5;
+      cursor: not-allowed; }
+    .el-checkbox.is-bordered + .el-checkbox.is-bordered {
+      margin-left: 10px; }
+    .el-checkbox.is-bordered.el-checkbox--medium {
+      padding: 7px 20px 7px 10px;
+      border-radius: 4px;
+      height: 36px; }
+      .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
+        line-height: 17px;
+        font-size: 14px; }
+      .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner {
+        height: 14px;
+        width: 14px; }
+    .el-checkbox.is-bordered.el-checkbox--small {
+      padding: 5px 15px 5px 10px;
+      border-radius: 3px;
+      height: 32px; }
+      .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label {
+        line-height: 15px;
+        font-size: 12px; }
+      .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner {
+        height: 12px;
+        width: 12px; }
+        .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after {
+          height: 6px;
+          width: 2px; }
+    .el-checkbox.is-bordered.el-checkbox--mini {
+      padding: 3px 15px 3px 10px;
+      border-radius: 3px;
+      height: 28px; }
+      .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label {
+        line-height: 12px;
+        font-size: 12px; }
+      .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner {
+        height: 12px;
+        width: 12px; }
+        .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after {
+          height: 6px;
+          width: 2px; }
+  .el-checkbox__input {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: middle; }
+    .el-checkbox__input.is-disabled .el-checkbox__inner {
+      background-color: #edf2fc;
+      border-color: #DCDFE6;
+      cursor: not-allowed; }
+      .el-checkbox__input.is-disabled .el-checkbox__inner::after {
+        cursor: not-allowed;
+        border-color: #C0C4CC; }
+      .el-checkbox__input.is-disabled .el-checkbox__inner + .el-checkbox__label {
+        cursor: not-allowed; }
+    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+      background-color: #F2F6FC;
+      border-color: #DCDFE6; }
+      .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+        border-color: #C0C4CC; }
+    .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
+      background-color: #F2F6FC;
+      border-color: #DCDFE6; }
+      .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before {
+        background-color: #C0C4CC;
+        border-color: #C0C4CC; }
+    .el-checkbox__input.is-disabled + span.el-checkbox__label {
+      color: #C0C4CC;
+      cursor: not-allowed; }
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: #029B62;
+      border-color: #029B62; }
+      .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        -webkit-transform: rotate(45deg) scaleY(1);
+        transform: rotate(45deg) scaleY(1); }
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #029B62; }
+    .el-checkbox__input.is-focus {
+      /*focus时 视觉上区分*/ }
+      .el-checkbox__input.is-focus .el-checkbox__inner {
+        border-color: #029B62; }
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: #029B62;
+      border-color: #029B62; }
+      .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+        content: '';
+        position: absolute;
+        display: block;
+        background-color: #FFFFFF;
+        height: 2px;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        left: 0;
+        right: 0;
+        top: 5px; }
+      .el-checkbox__input.is-indeterminate .el-checkbox__inner::after {
+        display: none; }
+  .el-checkbox__inner {
+    display: inline-block;
+    position: relative;
+    border: 1px solid #DCDFE6;
+    border-radius: 2px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    background-color: #FFFFFF;
+    z-index: 1;
+    -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); }
+    .el-checkbox__inner:hover {
+      border-color: #029B62; }
+    .el-checkbox__inner::after {
+      -webkit-box-sizing: content-box;
+      box-sizing: content-box;
+      content: "";
+      border: 1px solid #FFFFFF;
+      border-left: 0;
+      border-top: 0;
+      height: 7px;
+      left: 4px;
+      position: absolute;
+      top: 1px;
+      -webkit-transform: rotate(45deg) scaleY(0);
+      transform: rotate(45deg) scaleY(0);
+      width: 3px;
+      -webkit-transition: -webkit-transform .15s ease-in .05s;
+      transition: -webkit-transform .15s ease-in .05s;
+      transition: transform .15s ease-in .05s;
+      transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
+      -webkit-transform-origin: center;
+      transform-origin: center; }
+  .el-checkbox__original {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+    z-index: -1; }
+  .el-checkbox__label {
+    display: inline-block;
+    padding-left: 10px;
+    line-height: 19px;
+    font-size: 14px; }
+  .el-checkbox:last-of-type {
+    margin-right: 0; }
+
+.el-checkbox-button {
+  position: relative;
+  display: inline-block; }
+  .el-checkbox-button__inner {
+    display: inline-block;
+    line-height: 1;
+    font-weight: 500;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    background: #FFFFFF;
+    border: 1px solid #DCDFE6;
+    border-left: 0;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    position: relative;
+    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 12px 20px;
+    font-size: 14px;
+    border-radius: 0; }
+    .el-checkbox-button__inner.is-round {
+      padding: 12px 20px; }
+    .el-checkbox-button__inner:hover {
+      color: #029B62; }
+    .el-checkbox-button__inner [class*="el-icon-"] {
+      line-height: 0.9; }
+      .el-checkbox-button__inner [class*="el-icon-"] + span {
+        margin-left: 5px; }
+  .el-checkbox-button__original {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    z-index: -1; }
+  .el-checkbox-button.is-checked .el-checkbox-button__inner {
+    color: #FFFFFF;
+    background-color: #029B62;
+    border-color: #029B62;
+    -webkit-box-shadow: -1px 0 0 0 #67c3a1;
+    box-shadow: -1px 0 0 0 #67c3a1; }
+  .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
+    border-left-color: #029B62; }
+  .el-checkbox-button.is-disabled .el-checkbox-button__inner {
+    color: #C0C4CC;
+    cursor: not-allowed;
+    background-image: none;
+    background-color: #FFFFFF;
+    border-color: #EBEEF5;
+    -webkit-box-shadow: none;
+    box-shadow: none; }
+  .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner {
+    border-left-color: #EBEEF5; }
+  .el-checkbox-button:first-child .el-checkbox-button__inner {
+    border-left: 1px solid #DCDFE6;
+    border-radius: 4px 0 0 4px;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important; }
+  .el-checkbox-button.is-focus .el-checkbox-button__inner {
+    border-color: #029B62; }
+  .el-checkbox-button:last-child .el-checkbox-button__inner {
+    border-radius: 0 4px 4px 0; }
+  .el-checkbox-button--medium .el-checkbox-button__inner {
+    padding: 10px 20px;
+    font-size: 14px;
+    border-radius: 0; }
+    .el-checkbox-button--medium .el-checkbox-button__inner.is-round {
+      padding: 10px 20px; }
+  .el-checkbox-button--small .el-checkbox-button__inner {
+    padding: 9px 15px;
+    font-size: 12px;
+    border-radius: 0; }
+    .el-checkbox-button--small .el-checkbox-button__inner.is-round {
+      padding: 9px 15px; }
+  .el-checkbox-button--mini .el-checkbox-button__inner {
+    padding: 7px 15px;
+    font-size: 12px;
+    border-radius: 0; }
+    .el-checkbox-button--mini .el-checkbox-button__inner.is-round {
+      padding: 7px 15px; }
+
+.el-checkbox-group {
+  font-size: 0; }

theme/collapse.css

@@ -0,0 +1,543 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  -webkit-transition: opacity 200ms linear;
+  transition: opacity 200ms linear; }
+
+.fade-in-linear-enter,
+.fade-in-linear-leave,
+.fade-in-linear-leave-active {
+  opacity: 0; }
+
+.el-fade-in-linear-enter-active,
+.el-fade-in-linear-leave-active {
+  -webkit-transition: opacity 200ms linear;
+  transition: opacity 200ms linear; }
+
+.el-fade-in-linear-enter,
+.el-fade-in-linear-leave,
+.el-fade-in-linear-leave-active {
+  opacity: 0; }
+
+.el-fade-in-enter-active,
+.el-fade-in-leave-active {
+  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
+
+.el-fade-in-enter,
+.el-fade-in-leave-active {
+  opacity: 0; }
+
+.el-zoom-in-center-enter-active,
+.el-zoom-in-center-leave-active {
+  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
+
+.el-zoom-in-center-enter,
+.el-zoom-in-center-leave-active {
+  opacity: 0;
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0); }
+
+.el-zoom-in-top-enter-active,
+.el-zoom-in-top-leave-active {
+  opacity: 1;
+  -webkit-transform: scaleY(1);
+  transform: scaleY(1);
+  -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-transform-origin: center top;
+  transform-origin: center top; }
+
+.el-zoom-in-top-enter,
+.el-zoom-in-top-leave-active {
+  opacity: 0;
+  -webkit-transform: scaleY(0);
+  transform: scaleY(0); }
+
+.el-zoom-in-bottom-enter-active,
+.el-zoom-in-bottom-leave-active {
+  opacity: 1;
+  -webkit-transform: scaleY(1);
+  transform: scaleY(1);
+  -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom; }
+
+.el-zoom-in-bottom-enter,
+.el-zoom-in-bottom-leave-active {
+  opacity: 0;
+  -webkit-transform: scaleY(0);
+  transform: scaleY(0); }
+
+.el-zoom-in-left-enter-active,
+.el-zoom-in-left-leave-active {
+  opacity: 1;
+  -webkit-transform: scale(1, 1);
+  transform: scale(1, 1);
+  -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-transform-origin: top left;
+  transform-origin: top left; }
+
+.el-zoom-in-left-enter,
+.el-zoom-in-left-leave-active {
+  opacity: 0;
+  -webkit-transform: scale(0.45, 0.45);
+  transform: scale(0.45, 0.45); }
+
+.collapse-transition {
+  -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; }
+
+.horizontal-collapse-transition {
+  -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
+  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; }
+
+.el-list-enter-active,
+.el-list-leave-active {
+  -webkit-transition: all 1s;
+  transition: all 1s; }
+
+.el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  -webkit-transform: translateY(-30px);
+  transform: translateY(-30px); }
+
+.el-opacity-transition {
+  -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
+
+.el-collapse {
+  border-top: 1px solid #EBEEF5;
+  border-bottom: 1px solid #EBEEF5; }
+
+.el-collapse-item.is-disabled .el-collapse-item__header {
+  color: #bbb;
+  cursor: not-allowed; }
+
+.el-collapse-item__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 48px;
+  line-height: 48px;
+  background-color: #FFFFFF;
+  color: #303133;
+  cursor: pointer;
+  border-bottom: 1px solid #EBEEF5;
+  font-size: 13px;
+  font-weight: 500;
+  -webkit-transition: border-bottom-color .3s;
+  transition: border-bottom-color .3s;
+  outline: none; }
+  .el-collapse-item__arrow {
+    margin: 0 8px 0 auto;
+    -webkit-transition: -webkit-transform .3s;
+    transition: -webkit-transform .3s;
+    transition: transform .3s;
+    transition: transform .3s, -webkit-transform .3s;
+    font-weight: 300; }
+    .el-collapse-item__arrow.is-active {
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg); }
+  .el-collapse-item__header.focusing:focus:not(:hover) {
+    color: #029B62; }
+  .el-collapse-item__header.is-active {
+    border-bottom-color: transparent; }
+
+.el-collapse-item__wrap {
+  will-change: height;
+  background-color: #FFFFFF;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-bottom: 1px solid #EBEEF5; }
+
+.el-collapse-item__content {
+  padding-bottom: 25px;
+  font-size: 13px;
+  color: #303133;
+  line-height: 1.769230769230769; }
+
+.el-collapse-item:last-child {
+  margin-bottom: -1px; }

theme/color-picker.css

@@ -0,0 +1,545 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-color-predefine {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 12px;
+  margin-top: 8px;
+  width: 280px; }
+  .el-color-predefine__colors {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap; }
+  .el-color-predefine__color-selector {
+    margin: 0 0 8px 8px;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    cursor: pointer; }
+    .el-color-predefine__color-selector:nth-child(10n + 1) {
+      margin-left: 0; }
+    .el-color-predefine__color-selector.selected {
+      -webkit-box-shadow: 0 0 3px 2px #029B62;
+      box-shadow: 0 0 3px 2px #029B62; }
+    .el-color-predefine__color-selector > div {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      height: 100%;
+      border-radius: 3px; }
+    .el-color-predefine__color-selector.is-alpha {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); }
+
+.el-color-hue-slider {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background-color: #f00;
+  padding: 0 2px; }
+  .el-color-hue-slider__bar {
+    position: relative;
+    background: -webkit-gradient(linear, left top, right top, from(#f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(#f00));
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    height: 100%; }
+  .el-color-hue-slider__thumb {
+    position: absolute;
+    cursor: pointer;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    border-radius: 1px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    z-index: 1; }
+  .el-color-hue-slider.is-vertical {
+    width: 12px;
+    height: 180px;
+    padding: 2px 0; }
+    .el-color-hue-slider.is-vertical .el-color-hue-slider__bar {
+      background: -webkit-gradient(linear, left top, left bottom, from(#f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(#f00));
+      background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
+    .el-color-hue-slider.is-vertical .el-color-hue-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px; }
+
+.el-color-svpanel {
+  position: relative;
+  width: 280px;
+  height: 180px; }
+  .el-color-svpanel__white, .el-color-svpanel__black {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0; }
+  .el-color-svpanel__white {
+    background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0)));
+    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
+  .el-color-svpanel__black {
+    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0, 0, 0, 0)));
+    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }
+  .el-color-svpanel__cursor {
+    position: absolute; }
+    .el-color-svpanel__cursor > div {
+      cursor: head;
+      width: 4px;
+      height: 4px;
+      -webkit-box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
+      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
+      border-radius: 50%;
+      -webkit-transform: translate(-2px, -2px);
+      transform: translate(-2px, -2px); }
+
+.el-color-alpha-slider {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); }
+  .el-color-alpha-slider__bar {
+    position: relative;
+    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white));
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
+    height: 100%; }
+  .el-color-alpha-slider__thumb {
+    position: absolute;
+    cursor: pointer;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    border-radius: 1px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    z-index: 1; }
+  .el-color-alpha-slider.is-vertical {
+    width: 20px;
+    height: 180px; }
+    .el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar {
+      background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white));
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); }
+    .el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px; }
+
+.el-color-dropdown {
+  width: 300px; }
+  .el-color-dropdown__main-wrapper {
+    margin-bottom: 6px; }
+    .el-color-dropdown__main-wrapper::after {
+      content: "";
+      display: table;
+      clear: both; }
+  .el-color-dropdown__btns {
+    margin-top: 6px;
+    text-align: right; }
+  .el-color-dropdown__value {
+    float: left;
+    line-height: 26px;
+    font-size: 12px;
+    color: #000000;
+    width: 160px; }
+  .el-color-dropdown__btn {
+    border: 1px solid #dcdcdc;
+    color: #333;
+    line-height: 24px;
+    border-radius: 2px;
+    padding: 0 20px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: 12px; }
+    .el-color-dropdown__btn[disabled] {
+      color: #cccccc;
+      cursor: not-allowed; }
+    .el-color-dropdown__btn:hover {
+      color: #029B62;
+      border-color: #029B62; }
+  .el-color-dropdown__link-btn {
+    cursor: pointer;
+    color: #029B62;
+    text-decoration: none;
+    padding: 15px;
+    font-size: 12px; }
+    .el-color-dropdown__link-btn:hover {
+      color: tint(#029B62, 20%); }
+
+.el-color-picker {
+  display: inline-block;
+  position: relative;
+  line-height: normal;
+  height: 40px; }
+  .el-color-picker.is-disabled .el-color-picker__trigger {
+    cursor: not-allowed; }
+  .el-color-picker--medium {
+    height: 36px; }
+    .el-color-picker--medium .el-color-picker__trigger {
+      height: 36px;
+      width: 36px; }
+    .el-color-picker--medium .el-color-picker__mask {
+      height: 34px;
+      width: 34px; }
+  .el-color-picker--small {
+    height: 32px; }
+    .el-color-picker--small .el-color-picker__trigger {
+      height: 32px;
+      width: 32px; }
+    .el-color-picker--small .el-color-picker__mask {
+      height: 30px;
+      width: 30px; }
+    .el-color-picker--small .el-color-picker__icon,
+    .el-color-picker--small .el-color-picker__empty {
+      -webkit-transform: translate3d(-50%, -50%, 0) scale(0.8);
+      transform: translate3d(-50%, -50%, 0) scale(0.8); }
+  .el-color-picker--mini {
+    height: 28px; }
+    .el-color-picker--mini .el-color-picker__trigger {
+      height: 28px;
+      width: 28px; }
+    .el-color-picker--mini .el-color-picker__mask {
+      height: 26px;
+      width: 26px; }
+    .el-color-picker--mini .el-color-picker__icon,
+    .el-color-picker--mini .el-color-picker__empty {
+      -webkit-transform: translate3d(-50%, -50%, 0) scale(0.8);
+      transform: translate3d(-50%, -50%, 0) scale(0.8); }
+  .el-color-picker__mask {
+    height: 38px;
+    width: 38px;
+    border-radius: 4px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    z-index: 1;
+    cursor: not-allowed;
+    background-color: rgba(255, 255, 255, 0.7); }
+  .el-color-picker__trigger {
+    display: inline-block;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    height: 40px;
+    width: 40px;
+    padding: 4px;
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    font-size: 0;
+    position: relative;
+    cursor: pointer; }
+  .el-color-picker__color {
+    position: relative;
+    display: block;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 1px solid #999;
+    border-radius: 2px;
+    width: 100%;
+    height: 100%;
+    text-align: center; }
+    .el-color-picker__color.is-alpha {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); }
+  .el-color-picker__color-inner {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0; }
+  .el-color-picker__empty {
+    font-size: 12px;
+    color: #999;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0); }
+  .el-color-picker__icon {
+    display: inline-block;
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
+    color: #FFFFFF;
+    text-align: center;
+    font-size: 12px; }
+  .el-color-picker__panel {
+    position: absolute;
+    z-index: 10;
+    padding: 6px;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+    background-color: #FFFFFF;
+    border: 1px solid #EBEEF5;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }

theme/container.css

@@ -0,0 +1,151 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+.el-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 0; }
+  .el-container.is-vertical {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column; }

theme/dialog.css

@@ -0,0 +1,651 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+.v-modal-enter {
+  -webkit-animation: v-modal-in .2s ease;
+  animation: v-modal-in .2s ease; }
+
+.v-modal-leave {
+  -webkit-animation: v-modal-out .2s ease forwards;
+  animation: v-modal-out .2s ease forwards; }
+
+@-webkit-keyframes v-modal-in {
+  0% {
+    opacity: 0; }
+  100% { } }
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0; }
+  100% { } }
+
+@-webkit-keyframes v-modal-out {
+  0% { }
+  100% {
+    opacity: 0; } }
+
+@keyframes v-modal-out {
+  0% { }
+  100% {
+    opacity: 0; } }
+
+.v-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  background: #000000; }
+
+.el-popup-parent--hidden {
+  overflow: hidden; }
+
+.el-dialog {
+  position: relative;
+  margin: 0 auto 50px;
+  background: #FFFFFF;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 50%; }
+  .el-dialog.is-fullscreen {
+    width: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+    height: 100%;
+    overflow: auto; }
+  .el-dialog__wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0; }
+  .el-dialog__header {
+    padding: 20px;
+    padding-bottom: 10px; }
+  .el-dialog__headerbtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 16px; }
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #909399; }
+    .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
+      color: #029B62; }
+  .el-dialog__title {
+    line-height: 24px;
+    font-size: 18px;
+    color: #303133; }
+  .el-dialog__body {
+    padding: 30px 20px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all; }
+  .el-dialog__footer {
+    padding: 20px;
+    padding-top: 10px;
+    text-align: right;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+  .el-dialog--center {
+    text-align: center; }
+    .el-dialog--center .el-dialog__body {
+      text-align: initial;
+      padding: 25px 25px 30px; }
+    .el-dialog--center .el-dialog__footer {
+      text-align: inherit; }
+
+.dialog-fade-enter-active {
+  -webkit-animation: dialog-fade-in .3s;
+  animation: dialog-fade-in .3s; }
+
+.dialog-fade-leave-active {
+  -webkit-animation: dialog-fade-out .3s;
+  animation: dialog-fade-out .3s; }
+
+@-webkit-keyframes dialog-fade-in {
+  0% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@keyframes dialog-fade-in {
+  0% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes dialog-fade-out {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; } }
+
+@keyframes dialog-fade-out {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; } }

theme/display.css

@@ -0,0 +1,293 @@
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+@media only screen and (max-width: 767px) {
+  .hidden-xs-only {
+    display: none !important; } }
+
+@media only screen and (min-width: 768px) {
+  .hidden-sm-and-up {
+    display: none !important; } }
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .hidden-sm-only {
+    display: none !important; } }
+
+@media only screen and (max-width: 991px) {
+  .hidden-sm-and-down {
+    display: none !important; } }
+
+@media only screen and (min-width: 992px) {
+  .hidden-md-and-up {
+    display: none !important; } }
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .hidden-md-only {
+    display: none !important; } }
+
+@media only screen and (max-width: 1199px) {
+  .hidden-md-and-down {
+    display: none !important; } }
+
+@media only screen and (min-width: 1200px) {
+  .hidden-lg-and-up {
+    display: none !important; } }
+
+@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+  .hidden-lg-only {
+    display: none !important; } }
+
+@media only screen and (max-width: 1919px) {
+  .hidden-lg-and-down {
+    display: none !important; } }
+
+@media only screen and (min-width: 1920px) {
+  .hidden-xl-only {
+    display: none !important; } }

theme/divider.css

@@ -0,0 +1,284 @@
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+.el-divider {
+  background-color: #DCDFE6;
+  position: relative; }
+  .el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0; }
+  .el-divider--vertical {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    position: relative; }
+  .el-divider__text {
+    position: absolute;
+    background-color: #FFFFFF;
+    padding: 0 20px;
+    font-weight: 500;
+    color: #303133;
+    font-size: 14px; }
+    .el-divider__text.is-left {
+      left: 20px;
+      -webkit-transform: translateY(-50%);
+      transform: translateY(-50%); }
+    .el-divider__text.is-center {
+      left: 50%;
+      -webkit-transform: translateX(-50%) translateY(-50%);
+      transform: translateX(-50%) translateY(-50%); }
+    .el-divider__text.is-right {
+      right: 20px;
+      -webkit-transform: translateY(-50%);
+      transform: translateY(-50%); }

theme/drawer.css

@@ -0,0 +1,503 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+@-webkit-keyframes el-drawer-fade-in {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+@keyframes el-drawer-fade-in {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-webkit-keyframes rtl-drawer-in {
+  0% {
+    -webkit-transform: translate(100%, 0px);
+    transform: translate(100%, 0px); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@keyframes rtl-drawer-in {
+  0% {
+    -webkit-transform: translate(100%, 0px);
+    transform: translate(100%, 0px); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@-webkit-keyframes rtl-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  100% {
+    -webkit-transform: translate(100%, 0px);
+    transform: translate(100%, 0px); } }
+
+@keyframes rtl-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  100% {
+    -webkit-transform: translate(100%, 0px);
+    transform: translate(100%, 0px); } }
+
+@-webkit-keyframes ltr-drawer-in {
+  0% {
+    -webkit-transform: translate(-100%, 0px);
+    transform: translate(-100%, 0px); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@keyframes ltr-drawer-in {
+  0% {
+    -webkit-transform: translate(-100%, 0px);
+    transform: translate(-100%, 0px); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@-webkit-keyframes ltr-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  100% {
+    -webkit-transform: translate(-100%, 0px);
+    transform: translate(-100%, 0px); } }
+
+@keyframes ltr-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  100% {
+    -webkit-transform: translate(-100%, 0px);
+    transform: translate(-100%, 0px); } }
+
+@-webkit-keyframes ttb-drawer-in {
+  0% {
+    -webkit-transform: translate(0px, -100%);
+    transform: translate(0px, -100%); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@keyframes ttb-drawer-in {
+  0% {
+    -webkit-transform: translate(0px, -100%);
+    transform: translate(0px, -100%); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@-webkit-keyframes ttb-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  100% {
+    -webkit-transform: translate(0px, -100%);
+    transform: translate(0px, -100%); } }
+
+@keyframes ttb-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  100% {
+    -webkit-transform: translate(0px, -100%);
+    transform: translate(0px, -100%); } }
+
+@-webkit-keyframes btt-drawer-in {
+  0% {
+    -webkit-transform: translate(0px, 100%);
+    transform: translate(0px, 100%); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@keyframes btt-drawer-in {
+  0% {
+    -webkit-transform: translate(0px, 100%);
+    transform: translate(0px, 100%); }
+  100% {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); } }
+
+@-webkit-keyframes btt-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0);
+    transform: translate(0px, 0); }
+  100% {
+    -webkit-transform: translate(0px, 100%);
+    transform: translate(0px, 100%); } }
+
+@keyframes btt-drawer-out {
+  0% {
+    -webkit-transform: translate(0px, 0);
+    transform: translate(0px, 0); }
+  100% {
+    -webkit-transform: translate(0px, 100%);
+    transform: translate(0px, 100%); } }
+
+.el-drawer {
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  overflow: hidden; }
+  .el-drawer.rtl {
+    -webkit-animation: rtl-drawer-out 0.3s;
+    animation: rtl-drawer-out 0.3s; }
+  .el-drawer__open .el-drawer.rtl {
+    -webkit-animation: rtl-drawer-in 0.3s 1ms;
+    animation: rtl-drawer-in 0.3s 1ms; }
+  .el-drawer.ltr {
+    -webkit-animation: ltr-drawer-out 0.3s;
+    animation: ltr-drawer-out 0.3s; }
+  .el-drawer__open .el-drawer.ltr {
+    -webkit-animation: ltr-drawer-in 0.3s 1ms;
+    animation: ltr-drawer-in 0.3s 1ms; }
+  .el-drawer.ttb {
+    -webkit-animation: ttb-drawer-out 0.3s;
+    animation: ttb-drawer-out 0.3s; }
+  .el-drawer__open .el-drawer.ttb {
+    -webkit-animation: ttb-drawer-in 0.3s 1ms;
+    animation: ttb-drawer-in 0.3s 1ms; }
+  .el-drawer.btt {
+    -webkit-animation: btt-drawer-out 0.3s;
+    animation: btt-drawer-out 0.3s; }
+  .el-drawer__open .el-drawer.btt {
+    -webkit-animation: btt-drawer-in 0.3s 1ms;
+    animation: btt-drawer-in 0.3s 1ms; }
+  .el-drawer__wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    margin: 0; }
+  .el-drawer__header {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    color: #72767b;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin-bottom: 32px;
+    padding: 20px;
+    padding-bottom: 0; }
+    .el-drawer__header > :first-child {
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1; }
+  .el-drawer__title {
+    margin: 0;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    line-height: inherit;
+    font-size: 1rem; }
+  .el-drawer__close-btn {
+    border: none;
+    cursor: pointer;
+    font-size: 20px;
+    color: inherit;
+    background-color: transparent; }
+  .el-drawer__body {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1; }
+    .el-drawer__body > * {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box; }
+  .el-drawer.ltr, .el-drawer.rtl {
+    height: 100%;
+    top: 0;
+    bottom: 0; }
+  .el-drawer.ttb, .el-drawer.btt {
+    width: 100%;
+    left: 0;
+    right: 0; }
+  .el-drawer.ltr {
+    left: 0; }
+  .el-drawer.rtl {
+    right: 0; }
+  .el-drawer.ttb {
+    top: 0; }
+  .el-drawer.btt {
+    bottom: 0; }
+
+.el-drawer__container {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%; }
+
+.el-drawer-fade-enter-active {
+  -webkit-animation: el-drawer-fade-in .3s;
+  animation: el-drawer-fade-in .3s; }
+
+.el-drawer-fade-leave-active {
+  animation: el-drawer-fade-in .3s reverse; }

theme/element-variables.css

@@ -0,0 +1,120 @@
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/

theme/footer.css

@@ -0,0 +1,256 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-footer {
+  padding: 0 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -ms-flex-negative: 0;
+  flex-shrink: 0; }

theme/form.css

@@ -0,0 +1,364 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-form--label-left .el-form-item__label {
+  text-align: left; }
+
+.el-form--label-top .el-form-item__label {
+  float: none;
+  display: inline-block;
+  text-align: left;
+  padding: 0 0 10px 0; }
+
+.el-form--inline .el-form-item {
+  display: inline-block;
+  margin-right: 10px;
+  vertical-align: top; }
+
+.el-form--inline .el-form-item__label {
+  float: none;
+  display: inline-block; }
+
+.el-form--inline .el-form-item__content {
+  display: inline-block;
+  vertical-align: top; }
+
+.el-form--inline.el-form--label-top .el-form-item__content {
+  display: block; }
+
+.el-form-item {
+  margin-bottom: 22px; }
+  .el-form-item::before,
+  .el-form-item::after {
+    display: table;
+    content: ""; }
+  .el-form-item::after {
+    clear: both; }
+  .el-form-item .el-form-item {
+    margin-bottom: 0; }
+  .el-form-item .el-input__validateIcon {
+    display: none; }
+  .el-form-item--medium .el-form-item__label {
+    line-height: 36px; }
+  .el-form-item--medium .el-form-item__content {
+    line-height: 36px; }
+  .el-form-item--small .el-form-item__label {
+    line-height: 32px; }
+  .el-form-item--small .el-form-item__content {
+    line-height: 32px; }
+  .el-form-item--small.el-form-item {
+    margin-bottom: 18px; }
+  .el-form-item--small .el-form-item__error {
+    padding-top: 2px; }
+  .el-form-item--mini .el-form-item__label {
+    line-height: 28px; }
+  .el-form-item--mini .el-form-item__content {
+    line-height: 28px; }
+  .el-form-item--mini.el-form-item {
+    margin-bottom: 18px; }
+  .el-form-item--mini .el-form-item__error {
+    padding-top: 1px; }
+  .el-form-item__label-wrap {
+    float: left; }
+    .el-form-item__label-wrap .el-form-item__label {
+      display: inline-block;
+      float: none; }
+  .el-form-item__label {
+    text-align: right;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    color: #606266;
+    line-height: 40px;
+    padding: 0 12px 0 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+  .el-form-item__content {
+    line-height: 40px;
+    position: relative;
+    font-size: 14px; }
+    .el-form-item__content::before,
+    .el-form-item__content::after {
+      display: table;
+      content: ""; }
+    .el-form-item__content::after {
+      clear: both; }
+    .el-form-item__content .el-input-group {
+      vertical-align: top; }
+  .el-form-item__error {
+    color: #F56C6C;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+    position: absolute;
+    top: 100%;
+    left: 0; }
+    .el-form-item__error--inline {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px; }
+  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
+  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
+    content: '*';
+    color: #F56C6C;
+    margin-right: 4px; }
+  .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus,
+  .el-form-item.is-error .el-textarea__inner,
+  .el-form-item.is-error .el-textarea__inner:focus {
+    border-color: #F56C6C; }
+  .el-form-item.is-error .el-input-group__append .el-input__inner,
+  .el-form-item.is-error .el-input-group__prepend .el-input__inner {
+    border-color: transparent; }
+  .el-form-item.is-error .el-input__validateIcon {
+    color: #F56C6C; }
+  .el-form-item--feedback .el-input__validateIcon {
+    display: inline-block; }

theme/header.css

@@ -0,0 +1,256 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-header {
+  padding: 0 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -ms-flex-negative: 0;
+  flex-shrink: 0; }

theme/image.css

@@ -0,0 +1,443 @@
+/* BEM support Func
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+/* Element Chalk Variables */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* 53a8ff */
+/* 66b1ff */
+/* 79bbff */
+/* 8cc5ff */
+/* a0cfff */
+/* b3d8ff */
+/* c6e2ff */
+/* d9ecff */
+/* ecf5ff */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* Size
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+.el-image__inner, .el-image__placeholder, .el-image__error {
+  width: 100%;
+  height: 100%; }
+
+.el-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden; }
+  .el-image__inner {
+    vertical-align: top; }
+    .el-image__inner--center {
+      position: relative;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      display: block; }
+  .el-image__placeholder {
+    background: #F5F7FA; }
+  .el-image__error {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    font-size: 14px;
+    background: #F5F7FA;
+    color: #C0C4CC;
+    vertical-align: middle; }
+  .el-image__preview {
+    cursor: pointer; }
+
+.el-image-viewer__wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+.el-image-viewer__btn {
+  position: absolute;
+  z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: .8;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+
+.el-image-viewer__close {
+  top: 40px;
+  right: 40px;
+  width: 40px;
+  height: 40px;
+  font-size: 40px; }
+
+.el-image-viewer__canvas {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.el-image-viewer__actions {
+  left: 50%;
+  bottom: 30px;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: #606266;
+  border-color: #fff;
+  border-radius: 22px; }
+  .el-image-viewer__actions__inner {
+    width: 100%;
+    height: 100%;
+    text-align: justify;
+    cursor: default;
+    font-size: 23px;
+    color: #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: distribute;
+    justify-content: space-around; }
+
+.el-image-viewer__prev {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: #606266;
+  border-color: #fff;
+  left: 40px; }
+
+.el-image-viewer__next {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: #606266;
+  border-color: #fff;
+  right: 40px;
+  text-indent: 2px; }
+
+.el-image-viewer__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: .5;
+  background: #000; }
+
+.viewer-fade-enter-active {
+  -webkit-animation: viewer-fade-in .3s;
+  animation: viewer-fade-in .3s; }
+
+.viewer-fade-leave-active {
+  -webkit-animation: viewer-fade-out .3s;
+  animation: viewer-fade-out .3s; }
+
+@-webkit-keyframes viewer-fade-in {
+  0% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@keyframes viewer-fade-in {
+  0% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes viewer-fade-out {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; } }
+
+@keyframes viewer-fade-out {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    opacity: 0; } }