1.1.0

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

.env

@@ -0,0 +1,7 @@
+NODE_ENV=development
+VUE_APP_DOMAIN=
+VUE_APP_TIMEOUT=600000
+VUE_APP_PAGE_SIZE=10
+VUE_APP_AUTH_TIMEOUT=72000000
+VUE_APP_SELF_DEFINE_DOMAIN=true
+VUE_APP_DEV_PROXY=http://test-school-2.teachcloud-print-test.cn/

.env.production

@@ -0,0 +1,5 @@
+NODE_ENV=production
+VUE_APP_DOMAIN=
+VUE_APP_TIMEOUT=600000
+VUE_APP_PAGE_SIZE=10
+VUE_APP_AUTH_TIMEOUT=7200000

.eslintignore

@@ -0,0 +1,3 @@
+
+public
+vue.config.js

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential', '@vue/prettier'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'none', ignoreRestSiblings: false }
+    ],
+    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
+    'vue/no-use-v-if-with-v-for': [
+      'error',
+      {
+        allowUsingIterationVar: true
+      }
+    ]
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

.gitignore

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

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "jsxBracketSameLine": false
+}

CHANGE.md

@@ -0,0 +1,9 @@
+
+# 1.1.0
+
+- 系统1.1.0
+
+
+# 1.0.0
+
+- 系统1.0.0

README.md

@@ -0,0 +1,117 @@
+# teachcloud-analysis-web
+
+**教务处平台-教研分析前端系统**
+
+## 项目操作
+
+#### 项目安装
+
+```
+yarn install
+```
+
+#### 开发模式
+
+```
+yarn run serve
+```
+
+#### 项目打包
+
+```
+yarn run build
+```
+
+#### lint 项目文件，并修正格式
+
+```
+yarn run lint
+```
+
+#### 自定义配置
+
+查看 [配置文档](https://cli.vuejs.org/config/).
+
+## 项目技术
+
+- ui 框架：
+  - [elementUi-2.13.1](https://element.eleme.cn/#/zh-CN/component/installation)
+- vue 技术：
+
+  - [vue-2.6.10](https://cn.vuejs.org/v2/guide/)
+  - [router-3.0.3](https://router.vuejs.org/zh/)
+  - [vuex-3.0.1](https://vuex.vuejs.org/zh/guide/)
+  - [axios-0.18.0](https://github.com/axios/axios)
+  - [vue-ls-3.2.1](https://github.com/RobinCK/vue-ls)
+
+## 格式化
+
+- 项目采用 prettier-eslint 规范项目代码
+- 推荐使用 vscode 作为项目编辑器
+- 提交代码前（即 commit 前）, 项目会自检规范格式。
+
+## vscode 推荐配置
+
+#### 推荐插件
+
+插件安装在 vscode 界面左上角最下面那图标中
+
+- ESLint
+- One Dark Pro
+- Prettier - Code Formatter
+- Atom Keymap
+- Vetur
+
+## 目录介绍
+
+```bash
+- public                    # 打包静态文件目录
+- src                       # 项目主文件夹
+  - assets                  # 静态资源存放地址
+  - compontents             # 通用组件
+  - constants               # 静态数据存放地址
+    - enumerate.js          # 配置静态数据
+    - navs.js               # 全局左侧导航栏信息
+  - modules                 # 模块目录
+  - plugins                 # 插件文档
+    - axios.js              # 全局axios封装
+    - formRules.js          # 表单验证规则
+    - globalVuePlugins.js   # 全局vue插件注册文件
+    - mixins.js             # mixins配置
+    - utils.js              # 工具箱
+  - router                  # router配置
+  - store                   # store配置
+  - views                   # 路由组件
+  - App.vue                 # 主组件入口
+  - config.js               # 全局配置文件
+  - main.js                 # 主程序入口
+- .eslintrc.js              # eslint配置文件
+- .prettierrc               # prettier配置文件
+- dev-proxy.copy.js         # 开发代理配置副本
+- vue.config.js             # 项目开发环境配置文件
+```
+
+## 第一次创建项目
+
+- 配置 config.js 文件
+
+  - 将 config.copy.js 文件在当前路径中复制一份，保存为 config.js 文件。
+  - 修改 config 文件中 domain 值，domain 为全局请求公用 domain 信息。
+
+- 配置开发端口
+
+```bash
+#修改vue.config.js文件中如下信息：
+{
+  port: 8056  # 默认时8056端口
+}
+```
+
+- dev 模式推荐使用 proxy
+
+  - 具体配置请查看`dev-proxy.copy.js`
+
+## TODO
+
+- 暂无
+- 

babel.config.js

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

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "teachcloud-analysis-web",
+  "version": "1.1.0",
+  "scripts": {
+    "start": "npm run serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "crypto-js": "^4.0.0",
+    "core-js": "^3.6.5",
+    "deepmerge": "^4.2.2",
+    "element-ui": "^2.14.1",
+    "js-md5": "^0.7.3",
+    "jsbarcode": "^3.11.3",
+    "vue": "^2.6.11",
+    "vue-ls": "^3.2.2",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.19.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11",
+    "terser-webpack-plugin": "^1.2.3"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
+}

postcss.config.js

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

public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,
+    maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"" />
+    <meta name=" renderer" content="webkit|ie-comp|ie-stand" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but 管理后台 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/report.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but report 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>

src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>

src/assets/styles/adaptive.scss

@@ -0,0 +1,26 @@
+@media screen and (min-width: 1440px) {
+  // home
+  .home-breadcrumb {
+    font-size: $--font-size-base;
+
+    .el-breadcrumb {
+      font-size: $--font-size-base;
+    }
+  }
+  .custom-tree-node {
+    font-size: $--font-size-base;
+  }
+  // element-ui
+  .el-form {
+    &--label-top {
+      .el-form-item__label {
+        padding-bottom: 8px;
+        font-size: $--font-size-base;
+      }
+    }
+  }
+  .el-table,
+  .el-button--small.el-button--text {
+    font-size: $--font-size-base;
+  }
+}

src/assets/styles/base.scss

@@ -0,0 +1,507 @@
+/* reset */
+body,
+div,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+p,
+tr,
+th,
+td,
+span,
+a,
+header,
+footer,
+i {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+li {
+  list-style: none;
+}
+em,
+i,
+u {
+  font-style: normal;
+}
+input {
+  outline: none;
+  border: none;
+  background: rgba(245, 245, 245, 1);
+  font-family: $--font-family;
+}
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input:-ms-input-placeholder,
+input:-moz-placeholder {
+  font-size: 12px;
+  font-weight: bold;
+  color: $--color-text-gray-4;
+}
+button,
+textarea {
+  font-family: $--font-family;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+fieldset,
+img {
+  border: 0;
+}
+abbr {
+  border: 0;
+  font-variant: normal;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+  *color: $--color-text-gray-3;
+}
+img {
+  vertical-align: middle;
+}
+
+/* common-style */
+input:-webkit-autofill {
+  box-shadow: 0 0 0 1000px white inset;
+}
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus,
+textarea:focus {
+  box-shadow: 0 0 0 1000px white inset;
+}
+
+/* browse style */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+::-webkit-scrollbar-button {
+  display: none;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: #666;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+::-webkit-scrollbar-resizer {
+  background: transparent;
+}
+
+body {
+  font-family: $--font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: $--font-size-base;
+  color: $--color-text-dark-1;
+}
+
+/* part */
+.part-box {
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: $--border-radius;
+
+  &-border {
+    border: 1px solid $--color-border;
+  }
+  &-pad {
+    padding: 20px;
+  }
+
+  &-filter {
+    padding: 20px 20px 5px 20px;
+
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+    .el-form-item__label {
+      display: none;
+    }
+  }
+  &-gray {
+    background-color: $--color-text-gray-7;
+  }
+
+  &-flex {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  &-action {
+    padding-bottom: 15px;
+    white-space: nowrap;
+    display: flex;
+    align-items: flex-end;
+  }
+  &-tips {
+    font-size: 16px;
+    line-height: 25px;
+    color: $--color-text-dark-1;
+    margin-bottom: 15px;
+  }
+
+  &-head {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    min-height: 30px;
+    margin: -10px 0 10px -10px;
+    color: $--color-text-dark;
+
+    > h3 {
+      font-size: 17px;
+    }
+    .el-icon-question {
+      margin-left: 10px;
+      font-size: 16px;
+      color: $--color-text-gray-5;
+      cursor: pointer;
+
+      &:hover {
+        color: #fe8652;
+      }
+    }
+  }
+}
+.part-title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 15px 20px;
+  line-height: 30px;
+  overflow: hidden;
+
+  h2 {
+    float: left;
+  }
+  &-infos {
+    float: right;
+  }
+}
+.part-body {
+  padding: 25px;
+}
+.part-page {
+  margin-top: 15px;
+  text-align: right;
+}
+.part-none {
+  padding: 100px;
+  font-size: 20px;
+  color: $--color-text-gray-3;
+  text-align: center;
+}
+// box-justify
+.box-justify {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// page-head
+.page-head {
+  margin-bottom: 20px;
+  color: $--color-text-dark;
+  &-flex {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  > h2 {
+    font-size: 20px;
+  }
+  .el-icon-question {
+    margin-left: 10px;
+    font-size: 16px;
+    color: $--color-text-gray-5;
+    cursor: pointer;
+
+    &:hover {
+      color: #fe8652;
+    }
+  }
+}
+
+/* table */
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  text-align: left;
+
+  &.table-white {
+    background-color: #fff;
+  }
+
+  th {
+    padding: 12px;
+    line-height: 1.2;
+    letter-spacing: 1px;
+    color: $--color-text-gray-2;
+    border: 1px solid $--color-border;
+  }
+  td {
+    padding: 14px;
+    line-height: 1.2;
+    color: $--color-text-dark;
+    border: 1px solid $--color-border;
+
+    &.td-link {
+      span {
+        cursor: pointer;
+        &:hover {
+          color: $--color-text-gray;
+        }
+      }
+    }
+  }
+  .td-th {
+    font-weight: 600;
+    color: $--color-text-gray;
+  }
+
+  &--border {
+    border: 1px solid $--color-border;
+    border-radius: 10px;
+    th {
+      background-color: #fcfcfd;
+      border: none;
+      border-bottom: 1px solid $--color-border;
+    }
+    td {
+      border: none;
+      border-bottom: 1px solid $--color-border;
+    }
+  }
+}
+
+/* list */
+.list-lr-right {
+  float: right;
+  width: 300px;
+}
+.list-lr-left {
+  margin-right: 320px;
+}
+
+.vlcode {
+  height: 36px;
+}
+.vlcode-left {
+  margin-right: 135px;
+}
+.vlcode-right {
+  float: right;
+  width: 120px;
+}
+
+// color
+.color-primary {
+  color: $--color-primary !important;
+}
+.color-success {
+  color: $--color-success;
+}
+.color-warning {
+  color: $--color-warning;
+}
+.color-danger {
+  color: $--color-danger;
+}
+.color-info {
+  color: $--color-text-gray-1;
+}
+.color-dark {
+  color: $--color-dark;
+}
+.color-gray {
+  color: $--color-text-gray;
+}
+.color-gray-2 {
+  color: $--color-text-gray-2;
+}
+.color-white {
+  color: #fff;
+}
+
+// text
+.text-center {
+  text-align: center;
+}
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-prewrap {
+  white-space: pre-wrap;
+}
+
+// other
+.btn-danger {
+  &.el-button--text:not(.is-disabled) {
+    color: $--color-danger !important;
+
+    &:hover {
+      font-weight: 600;
+      color: mix(#000, $--color-danger, 20%) !important;
+    }
+  }
+  &.is-disabled {
+    color: $--color-text-gray-4;
+  }
+}
+.btn-primary {
+  &.el-button--text:not(.is-disabled) {
+    color: $--color-text-dark-1 !important;
+    &:hover {
+      font-weight: 600;
+      color: $--color-primary !important;
+    }
+  }
+}
+
+.btn-white {
+  background-color: #fff !important;
+  color: #999 !important;
+}
+.font-bold {
+  font-weight: bold;
+}
+.table-head-bg {
+  th {
+    background-color: #f6f6f6;
+    color: $--color-text-gray;
+  }
+}
+
+.tab-btns {
+  .el-button {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &:first-child {
+      border-bottom-left-radius: 8px;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: 8px;
+    }
+  }
+
+  .el-button + .el-button {
+    margin-left: 10px;
+  }
+}
+
+.cont-link {
+  color: $--color-primary;
+  cursor: pointer;
+  &:hover {
+    color: $--color-success;
+  }
+}
+.ml-1 {
+  margin-left: 5px;
+}
+.ml-2 {
+  margin-left: 10px;
+}
+.mr-1 {
+  margin-right: 5px;
+}
+.mr-2 {
+  margin-right: 10px;
+}
+.mr-4 {
+  margin-right: 20px;
+}
+.mb-0 {
+  margin-bottom: 0;
+}
+.mb-1 {
+  margin-bottom: 5px;
+}
+.mb-2 {
+  margin-bottom: 10px;
+}
+.mb-4 {
+  margin-bottom: 20px;
+}
+.mlr-1 {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+.width-full {
+  width: 100%;
+}
+.width-400 {
+  width: 400px;
+}
+.width-80 {
+  width: 80px;
+}
+.width-200 {
+  width: 200px;
+}
+
+// other
+.tips-info {
+  font-size: 14px;
+  line-height: 20px;
+  color: $--color-text-gray-2;
+}
+.tips-dark {
+  color: $--color-text-gray;
+}
+.tips-error {
+  color: $--color-danger;
+}
+.tips-icon {
+  display: inline-block;
+  vertical-align: middle;
+  color: $--color-text-gray-3;
+  font-size: 18px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+.form-item-content {
+  color: $--color-text-gray-2;
+}
+.inline-block {
+  display: inline-block;
+  vertical-align: top;
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  padding-right: 8px;
+}

src/assets/styles/college.scss

@@ -0,0 +1,489 @@
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  &-star {
+    background-image: url(../images/college/icon-star.png);
+    width: 10px;
+    height: 10px;
+  }
+  &-intro {
+    background-image: url(../images/college/icon-intro.png);
+    width: 17px;
+    height: 16px;
+  }
+}
+
+/* table */
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  text-align: center;
+  font-size: 14px;
+
+  &.table-fixed {
+    table-layout: fixed;
+  }
+
+  th,
+  td {
+    padding: 9px;
+    line-height: 20px;
+    letter-spacing: 1px;
+    border: 1px solid #e8edf3;
+    word-wrap: break-word;
+  }
+  th {
+    color: #202b4b;
+    font-weight: 600;
+  }
+  th.bg,
+  td.bg {
+    background: #fafbfd;
+  }
+}
+// spin-progress
+.spin-progress {
+  padding: 20px 20px 50px;
+  overflow: hidden;
+  .progress-body {
+    position: relative;
+    height: 34px;
+    background: #e8edf3;
+  }
+  .progress-main {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: linear-gradient(90deg, #5fc9fa 0%, #1cd1a1 100%);
+    z-index: 7;
+  }
+  .progress-mark {
+    position: absolute;
+    height: 170%;
+    top: 0;
+    z-index: 10;
+    border-right: 2px solid #202b4b;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      bottom: -3px;
+      margin-left: -2px;
+      border-radius: 50%;
+      background-color: #202b4b;
+    }
+  }
+  .progress-tips {
+    position: absolute;
+    transform: translateX(-50%);
+    bottom: -140%;
+    z-index: 10;
+    font-size: 12px;
+    line-height: 17px;
+    white-space: nowrap;
+  }
+  .spin-scale {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    font-size: 0;
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      border-bottom: 2px solid #fff;
+      bottom: 2px;
+      left: 0;
+      z-index: 9;
+    }
+
+    li {
+      display: inline-block;
+      vertical-align: top;
+      margin: 0;
+      width: 2%;
+      height: 100%;
+      border-left: 1px solid #fff;
+      border-right: 1px solid #fff;
+    }
+  }
+  .spin-nums {
+    position: absolute;
+    width: 100%;
+    bottom: -16px;
+    left: 0;
+    z-index: 9;
+    color: #626a82;
+    font-size: 12px;
+
+    &::before {
+      content: "0";
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 9;
+    }
+
+    li {
+      display: inline-block;
+      vertical-align: top;
+      width: 10%;
+      text-align: right;
+    }
+  }
+}
+
+// analyse-report
+.analyse-report {
+  width: 1360px;
+  margin: 0 auto;
+  padding: 40px;
+  background-color: #fff;
+  color: #626a82;
+
+  .report-head-2 {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    margin-bottom: 20px;
+    color: #202b4b;
+    .icon {
+      vertical-align: top;
+      margin-left: 10px;
+    }
+  }
+  .report-head-3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #202b4b;
+    line-height: 25px;
+    .icon {
+      vertical-align: top;
+      margin-left: 10px;
+    }
+  }
+  .report-tips {
+    font-size: 12px;
+    font-weight: 400;
+    color: #626a82;
+    line-height: 17px;
+    margin-bottom: 13px;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-image: url(../images/college/icon-star.png);
+      width: 10px;
+      height: 10px;
+      margin-right: 3px;
+      margin-top: -2px;
+    }
+  }
+  .report-notice {
+    position: relative;
+    padding: 20px 40px 20px 219px;
+    background: #fafbfd;
+    text-align: left;
+
+    &-bg {
+      position: absolute;
+      width: 159px;
+      height: 188px;
+      top: 50%;
+      left: 40px;
+      transform: translateY(-50%);
+
+      background-image: url(../images/college/bg-girl.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    > h4 {
+      font-size: 14px;
+      font-weight: 600;
+      color: #202b4b;
+      line-height: 20px;
+      margin-bottom: 10px;
+    }
+    > p {
+      font-size: 12px;
+      font-weight: 400;
+      color: #626a82;
+      min-height: 22px;
+      line-height: 22px;
+    }
+  }
+
+  // filter
+  .report-filter {
+    padding: 20px;
+    background: #fafbfd;
+    border: 1px solid #e8edf3;
+    margin-bottom: 20px;
+
+    select {
+      height: 32px;
+      width: 240px;
+      outline: none;
+      border: 1px solid #dadfe6;
+      margin-right: 20px;
+      padding: 5px 12px;
+    }
+  }
+  // summary
+  .report-summary {
+    display: table;
+    width: 1300px;
+    border-spacing: 10px 0;
+    border-collapse: separate;
+    margin: 0 -10px;
+
+    .summary-item {
+      display: table-cell;
+      vertical-align: middle;
+      padding: 16px 20px;
+      border: 1px solid #e8edf3;
+
+      &-content {
+        font-size: 28px;
+        line-height: 40px;
+        font-weight: 500;
+        color: #202b4b;
+      }
+      &-desc {
+        font-size: 12px;
+        line-height: 17px;
+      }
+
+      &:nth-of-type(1) {
+        background: #5fc9fa;
+        border-color: #5fc9fa;
+        color: #fff;
+        > h4 {
+          color: #fff;
+          font-size: 20px;
+        }
+      }
+    }
+
+    &-tips {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+  // box
+  .report-box {
+    padding: 40px;
+    text-align: center;
+    border: 1px solid #e8edf3;
+    margin-bottom: 20px;
+
+    .report-tips {
+      display: inline-block;
+      padding: 6px 20px;
+      background-color: #fafbfd;
+    }
+  }
+}
+
+// exam-report
+.exam-report {
+  .exam-summary {
+    .summary-item {
+      &:nth-of-type(2) {
+        > h4 {
+          font-size: 20px;
+        }
+      }
+      &:nth-of-type(4),
+      &:nth-of-type(7) {
+        background: #fafbfd;
+      }
+    }
+  }
+
+  // common-course-table
+  .common-course-table {
+    margin-bottom: 20px;
+  }
+  // common-course-charts
+  .common-course-charts {
+    overflow: hidden;
+    margin: 20px -10px;
+  }
+  .course-charts-item {
+    float: left;
+    width: 50%;
+    padding: 0 10px;
+  }
+  .course-charts-body {
+    height: 224px;
+    padding: 20px;
+    border: 1px solid #e8edf3;
+    text-align: center;
+
+    > h4 {
+      font-size: 18px;
+      margin-bottom: 4px;
+      letter-spacing: 1px;
+    }
+    b {
+      color: #202b4b;
+    }
+    span {
+      color: #1886fe;
+    }
+    p {
+      font-size: 12px;
+      font-weight: 400;
+      color: #626a82;
+      line-height: 17px;
+    }
+  }
+  .course-charts-main {
+    height: 120px;
+  }
+
+  // common-course-main
+  .common-course-main {
+    .report-tips {
+      margin-bottom: 40px;
+    }
+  }
+  .course-main-chart {
+    height: 500px;
+  }
+
+  // common-course-other
+  .common-course-other {
+    margin-bottom: 40px;
+    .report-tips {
+      margin-bottom: 0;
+    }
+  }
+  .course-other-chart {
+    height: 400px;
+  }
+  // spec-course-notice
+  .spec-course-notice {
+    margin-top: 20px;
+    height: 240px;
+    padding: 26px 40px 26px 214px;
+
+    .report-notice-bg {
+      width: 134px;
+      background-image: url(../images/college/bg-person.png);
+    }
+
+    > h4 {
+      font-size: 16px;
+      line-height: 22px;
+    }
+
+    > p {
+      font-size: 14px;
+      line-height: 24px;
+
+      &:nth-of-type(1) {
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+// subject-report
+.subject-report {
+  .subject-summary {
+    margin-bottom: 40px;
+    .summary-item {
+      &:nth-of-type(5) {
+        background: #fafbfd;
+      }
+    }
+  }
+
+  .score-analyse {
+    &-chart {
+      height: 350px;
+    }
+    &-rate-chart {
+      height: 160px;
+    }
+  }
+  .score-compare-analyse {
+    &-chart {
+      height: 420px;
+    }
+    &-notice {
+      margin-top: 40px;
+    }
+  }
+  .answer-analyse {
+    .report-head-3 {
+      margin-bottom: 40px;
+    }
+    &-table {
+      margin-bottom: 20px;
+    }
+    &-chart {
+      height: 340px;
+    }
+  }
+  .difficulty-analyse {
+    &-charts {
+      height: 280px;
+      overflow: hidden;
+      margin-bottom: 20px;
+    }
+    &-chart {
+      float: left;
+      width: 33.33%;
+      height: 100%;
+    }
+  }
+  .student-score {
+    &-chart {
+      height: 460px;
+    }
+    &-table {
+      margin-bottom: 40px;
+    }
+  }
+  .distinction-analyse {
+    &-chart {
+      height: 420px;
+    }
+  }
+  .student-answer {
+    &-table {
+      margin-bottom: 20px;
+    }
+    &-chart {
+      height: 350px;
+    }
+  }
+  .distinction-analyse {
+    padding: 20px 40px;
+  }
+  .student-error {
+    padding: 20px 40px;
+    &-chart {
+      height: 440px;
+    }
+    .report-tips {
+      margin: 0;
+    }
+  }
+}

src/assets/styles/element-ui-costom.scss

@@ -0,0 +1,644 @@
+/*
+* element-ui不管是自行构建的主题还是动态设置的主题，
+* 产生的css文件中存在近乎1/3的冗余样式，过于累赘，不如直接覆盖样式简洁。
+*/
+// dialog
+.el-dialog {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #c8c8ca;
+  box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
+
+  &.is-fullscreen {
+    border-radius: 0;
+
+    .el-dialog__header {
+      width: 100%;
+      position: fixed;
+      z-index: 9;
+      background-color: #fff;
+      border-bottom: 1px solid $--color-border;
+    }
+    .el-dialog__body {
+      padding-top: 90px;
+    }
+  }
+}
+.el-dialog__header {
+  padding: 15px 20px;
+  .el-dialog__title {
+    color: $--color-text-dark;
+    font-size: 16px;
+    line-height: 19px;
+  }
+  .el-dialog__headerbtn {
+    top: 15px;
+    width: 16px;
+    height: 16px;
+    background-image: url(../images/icon-close.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    &:hover {
+      background-image: url(../images/icon-close-act.png);
+    }
+
+    .el-dialog__close {
+      display: none;
+    }
+  }
+}
+.el-dialog__body {
+  padding: 30px 40px;
+  position: relative;
+  border-top: 1px solid $--color-border;
+  color: $--color-text-dark-1;
+
+  .el-form-item__label {
+    padding-right: 2px;
+  }
+  .el-input-tips {
+    color: rgba(187, 187, 187, 1);
+    margin-left: 13px;
+  }
+}
+.el-dialog__footer {
+  overflow: hidden;
+  .el-button {
+    width: 100px;
+    border-radius: 8px;
+    float: right;
+    margin-left: 10px;
+  }
+}
+//
+.page-dialog {
+  .el-dialog.is-fullscreen {
+    background: $--color-background;
+    .el-dialog__body {
+      padding: 70px 20px 20px;
+    }
+  }
+}
+
+// .opacity-dialog
+.opacity-dialog {
+  .el-dialog {
+    background-color: transparent;
+  }
+  .el-dialog__header,
+  .el-dialog__footer {
+    display: none;
+  }
+  .el-dialog__body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding: 0;
+    background-color: transparent;
+  }
+}
+
+// form
+.el-form {
+  &-item {
+    &__error {
+      font-size: 12px;
+      color: rgba(254, 108, 105, 1);
+    }
+    &__content {
+      .el-table {
+        line-height: 1;
+      }
+    }
+  }
+  // form-info
+  &.form-info {
+    .el-form-item {
+      margin-bottom: 0;
+
+      .el-form-item__label {
+        color: $--color-text-gray-2;
+      }
+    }
+  }
+  &--label-top {
+    .el-form-item__label {
+      line-height: 20px;
+      padding-bottom: 5px;
+      font-size: 12px;
+    }
+  }
+}
+// input
+.el-input {
+  &.is-focus {
+    .el-input__inner {
+      border-color: $--color-primary !important;
+    }
+  }
+  &.is-disabled {
+    .el-input__inner {
+      color: $--color-text-gray-2;
+    }
+  }
+  .el-input__inner {
+    border-radius: 8px;
+    border-color: #ddd;
+    background-color: #fff;
+  }
+  // .el-input__suffix {
+  //   right: 0;
+  //   border-left: 1px solid #ddd;
+  // }
+}
+// textarea
+.el-textarea {
+  &.is-disabled {
+    .el-textarea__inner {
+      color: $--color-text-gray-2;
+    }
+  }
+}
+.el-select {
+  .el-input__suffix {
+    right: 0;
+    border-left: 1px solid #ddd;
+  }
+  .el-input {
+    .el-select__caret {
+      width: 30px;
+    }
+    .el-icon-arrow-up:before {
+      font-size: 12px;
+      content: "\e78f";
+    }
+  }
+}
+.el-select-dropdown {
+  &.popper-filter {
+    .el-scrollbar {
+      display: block !important;
+      padding-top: 52px;
+    }
+    .el-select-filter {
+      padding: 0 10px;
+      position: absolute;
+      width: 100%;
+      top: 10px;
+      left: 0;
+      z-index: 9;
+    }
+  }
+}
+// upload
+.el-upload,
+.el-upload-dragger {
+  width: 100%;
+}
+// radio
+.el-radio-button {
+  &:not(.is-disabled):hover {
+    .el-radio-button__inner {
+      color: $--color-primary;
+    }
+  }
+
+  &.is-active {
+    .el-radio-button__inner {
+      color: $--color-white !important;
+      border-color: $--color-primary !important;
+      background: $--color-primary !important;
+    }
+  }
+}
+// button
+.el-button {
+  border-radius: $--border-radius;
+
+  > .icon {
+    margin-right: 5px;
+  }
+  > span {
+    display: inline-block;
+  }
+  &.is-disabled:not(.el-button--text) {
+    color: $--color-text-gray-3 !important;
+    background: $--color-background !important;
+    border: 1px solid $--color-border !important;
+  }
+}
+
+.el-button + .popover-button,
+.popover-button + .el-button {
+  margin-left: 10px;
+}
+.el-button + .el-button {
+  margin-left: 10px;
+}
+.el-button--text + .el-button--text {
+  margin-left: 5px;
+}
+.el-button--small {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 12px;
+}
+.el-button--text {
+  color: $--color-text-gray-2;
+
+  & + .el-button--text {
+    margin-left: 10px;
+  }
+}
+.el-button--info {
+  background-color: $--color-cyan;
+  border-color: $--color-cyan;
+
+  &:hover,
+  &:focus {
+    background-color: $--color-cyan-light;
+    border-color: $--color-cyan-light;
+  }
+}
+.el-button--primary {
+  background-color: $--color-primary;
+  border-color: $--color-primary;
+
+  &:hover,
+  &:focus {
+    background-color: $--color-primary-light;
+    border-color: $--color-primary-light;
+  }
+}
+.el-button--success {
+  background-color: $--color-success;
+  border-color: $--color-success;
+
+  &:hover,
+  &:focus {
+    background-color: $--color-success-light;
+    border-color: $--color-success-light;
+  }
+}
+
+// table
+.el-table {
+  color: $--color-text-dark-1;
+
+  thead th {
+    color: $--color-text-gray-2;
+  }
+
+  thead.is-group th {
+    background-color: $--color-white;
+  }
+
+  tr.el-table__row {
+    color: $--color-text-dark;
+  }
+  td,
+  th {
+    border-color: $--color-border !important;
+    padding: 14px 0;
+    font-weight: 500;
+  }
+  .el-table__row.row-danger {
+    color: $--color-danger;
+  }
+  &.el-table--noback {
+    tr.el-table__row {
+      background-color: $--color-white;
+    }
+  }
+
+  .cell-head {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 1.3;
+  }
+  // caret-wrapper
+  .caret-wrapper {
+    width: 20px;
+    height: 20px;
+    top: -1px;
+    .sort-caret {
+      &.ascending {
+        top: -1px;
+      }
+      &.descending {
+        bottom: -1px;
+      }
+    }
+  }
+  // action-column
+  td.action-column {
+    padding-left: 10px;
+    padding-right: 10px;
+    .cell {
+      padding: 0;
+      margin: 0 -5px;
+    }
+    .el-button--text {
+      padding: 0;
+      margin: 0 5px;
+      border: none !important;
+      outline: none !important;
+      &:not(.is-disabled):hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+.el-table--border {
+  border-radius: 10px;
+  th {
+    padding: 12px 0;
+    background-color: #fcfcfd;
+    border-right: none;
+  }
+  td {
+    border-right: none;
+  }
+}
+// el-checkbox
+.el-checkbox {
+  .el-checkbox__label {
+    color: $--color-text-gray-2 !important;
+  }
+  .el-checkbox__inner::after {
+    border-width: 2px;
+  }
+}
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: $--color-white;
+  border-color: $--color-primary;
+
+  &::after {
+    border-color: $--color-primary;
+  }
+}
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: $--color-white;
+  border-color: $--color-primary;
+  &::before {
+    background-color: $--color-primary;
+  }
+}
+
+.el-radio {
+  .el-radio__label {
+    color: $--color-text-gray-2 !important;
+  }
+}
+.el-radio__input.is-checked .el-radio__inner {
+  background-color: $--color-white;
+  border-color: $--color-primary;
+  &::after {
+    width: 6px;
+    height: 6px;
+    background-color: $--color-primary;
+  }
+}
+
+// el-switch
+.el-switch {
+  &.is-checked {
+    .el-switch__core {
+      background-color: $--color-primary;
+      border-color: $--color-primary;
+    }
+  }
+}
+
+// el-pagination
+.el-pagination-li {
+  min-width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: $--color-white;
+  border: 1px solid #e1e3eb;
+}
+.el-pagination {
+  padding: 0;
+  .el-pagination__total {
+    float: left;
+  }
+  span:not([class*="suffix"]) {
+    line-height: 32px;
+    height: 32px;
+  }
+  &.is-background {
+    .btn-prev,
+    .btn-next {
+      color: $--color-text-gray-2;
+      margin: 0 5px;
+      @extend .el-pagination-li;
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      opacity: 0.7;
+    }
+
+    .el-pager li {
+      color: $--color-text-gray-2;
+      margin: 0 5px;
+      padding: 0 8px;
+      line-height: 32px;
+
+      @extend .el-pagination-li;
+      &:not(.disabled).active {
+        color: #fff;
+        background-color: $--color-primary;
+      }
+    }
+  }
+}
+// el-message-box
+.el-message-box {
+  width: 320px;
+  background-color: #f6f6f6;
+  border-radius: 10px;
+  &__title {
+    display: none;
+  }
+  &__headerbtn {
+    display: none;
+  }
+  &__content {
+    text-align: center;
+
+    .el-message-box__status {
+      position: relative;
+      top: 0;
+      height: 48px;
+      width: 48px;
+      transform: none;
+      margin-bottom: 10px;
+
+      &.el-icon-warning {
+        border-radius: 50%;
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: url(../images/icon-doubt.png);
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .el-message-box__message {
+      padding: 0;
+    }
+  }
+  &__btns {
+    height: 75px;
+    padding: 30px 20px 10px;
+    text-align: center;
+
+    > .el-button {
+      width: 100px;
+    }
+  }
+}
+
+.alert-message {
+  .el-message-box__btns {
+    text-align: center;
+    > .el-button {
+      position: relative;
+      left: auto;
+      top: 0;
+      margin: 0;
+    }
+  }
+}
+// .el-message
+.el-message {
+  .el-message__content {
+    word-wrap: break-word;
+    max-width: 600px;
+    line-height: 1.4;
+  }
+}
+.el-message-loading {
+  border-color: mix($--color-white, $--color-success, 80%);
+  background-color: mix($--color-white, $--color-success, 90%);
+}
+// el-date-editor
+.el-date-editor {
+  border-radius: 8px;
+  .el-range-separator {
+    width: auto;
+  }
+  .el-range-input {
+    background-color: transparent;
+  }
+}
+
+// el-step
+.el-step {
+  &__title.is-success,
+  &__description.is-success,
+  &__title.is-process,
+  &__description.is-process {
+    color: $--color-success;
+  }
+  &__title.is-process {
+    font-weight: normal;
+  }
+  &__head.is-success {
+    .el-step__line {
+      background-color: $--color-success;
+    }
+    .el-step__icon.is-text {
+      color: $--color-white;
+      border-color: $--color-success;
+      background-color: $--color-success;
+    }
+  }
+  &__head.is-process {
+    .el-step__icon.is-text {
+      color: $--color-success;
+      border-color: $--color-success;
+    }
+  }
+
+  &__title.is-wait,
+  &__description.is-wait {
+    color: $--color-text-gray-2;
+  }
+  &__head.is-wait {
+    .el-step__icon.is-text {
+      color: $--color-text-gray-2;
+      border-color: #e1e3eb;
+      background-color: #e1e3eb;
+    }
+  }
+}
+// el-popover
+.el-popper-dark {
+  background-color: $--color-text-dark-1;
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 16px;
+  border: none;
+}
+.el-popper-dark {
+  box-shadow: 0px 10px 10px 0px rgba(54, 61, 89, 0.2);
+}
+.el-popper-dark[x-placement^="right"] .popper__arrow {
+  border-right-color: $--color-text-dark-1;
+
+  &::after {
+    border-right-color: $--color-text-dark-1;
+  }
+}
+.el-popper-dark[x-placement^="top"] .popper__arrow {
+  border-top-color: $--color-text-dark-1;
+
+  &::after {
+    border-top-color: $--color-text-dark-1;
+  }
+}
+.el-popper-dark[x-placement^="bottom"] .popper__arrow {
+  border-bottom-color: $--color-text-dark-1;
+
+  &::after {
+    border-bottom-color: $--color-text-dark-1;
+  }
+}
+.el-popper-dark[x-placement^="left"] .popper__arrow {
+  border-left-color: $--color-text-dark-1;
+
+  &::after {
+    border-left-color: $--color-text-dark-1;
+  }
+}
+// popper-list
+.popper-list {
+  min-width: auto;
+
+  .el-button {
+    display: block;
+    width: 100%;
+    margin: 0;
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
+  }
+}
+// .el-tag
+.el-tag {
+  &.tag-spin {
+    margin: 3px;
+  }
+}

src/assets/styles/home.scss

@@ -0,0 +1,341 @@
+/* home */
+.home {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: auto;
+}
+.home-body {
+  position: absolute;
+  left: 0;
+  top: 50px;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  background: $--color-background;
+  z-index: 98;
+}
+.home-main {
+  position: relative;
+  padding: 20px 30px 50px 250px;
+  min-height: 100%;
+}
+
+/* navs */
+.home-navs {
+  position: absolute;
+  width: 220px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  overflow: auto;
+  font-size: 14px;
+  background: $--color-white;
+  border-top-right-radius: $--border-radius-huge;
+  border-bottom-right-radius: $--border-radius-huge;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 1px;
+    right: 0;
+    bottom: 0;
+    z-index: 9;
+    background: rgba(229, 229, 229, 1);
+  }
+
+  .head-logo {
+    padding: 0 40px;
+    font-size: 20px;
+    line-height: 40px;
+    text-align: center;
+    &-content {
+      display: block;
+      padding: 30px 0;
+      border-bottom: 1px solid #eff0f5;
+    }
+    img {
+      display: block;
+      max-width: 160px;
+      height: 40px;
+    }
+  }
+
+  .nav-part {
+    padding: 20px 0;
+    border-top: 1px solid $--color-border;
+  }
+
+  .nav-head {
+    padding: 10px 0;
+    color: $--color-text-gray-2;
+    font-size: $--font-size-base;
+    line-height: 20px;
+    position: relative;
+    font-weight: 500;
+    > span {
+      display: inline-block;
+      vertical-align: top;
+      font-weight: 600;
+    }
+    &-right-icon {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #d3d5e0;
+      font-size: 12px;
+    }
+  }
+
+  // .nav-list {
+  //   padding: 0 0 0 23px;
+  // }
+  .nav-item {
+    overflow: hidden;
+    color: $--color-text-dark-1;
+    &-main {
+      padding: 10px 0;
+      line-height: 20px;
+      position: relative;
+      font-weight: 500;
+      cursor: pointer;
+      &-act,
+      &:hover {
+        font-weight: 600;
+        color: $--color-primary;
+      }
+    }
+    &-icon {
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: 50%;
+      margin-top: -10px;
+      text-align: center;
+      line-height: 20px;
+    }
+    &-icon-right {
+      right: 5px;
+    }
+    &-info {
+      display: block;
+      position: absolute;
+      padding: 0 3px;
+      min-width: 16px;
+      height: 16px;
+      font-size: 12px;
+      line-height: 16px;
+      top: 12px;
+      right: 40px;
+      background-color: $--color-warning;
+      color: #fff;
+      text-align: center;
+      border-radius: 3px;
+    }
+  }
+}
+.el-menu-home {
+  padding-top: 20px;
+  .el-submenu {
+    margin-bottom: 20px;
+  }
+  .el-submenu__title {
+    padding: 0 40px !important;
+    height: 50px;
+    line-height: 50px;
+    font-weight: 600;
+
+    > .icon {
+      margin-right: 12px;
+    }
+  }
+  .el-menu-item {
+    height: auto;
+    min-height: 40px;
+    line-height: 20px;
+    padding: 10px 40px !important;
+    white-space: normal;
+  }
+  .el-menu-item.is-active {
+    font-weight: 600;
+  }
+  .el-submenu__icon-arrow {
+    right: 40px;
+  }
+}
+
+/* head */
+.home-header {
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  color: #fff;
+  padding-left: 220px;
+  background-color: $--color-text-dark;
+  overflow: hidden;
+
+  .menu-list {
+    li {
+      display: inline-block;
+      vertical-align: top;
+      padding: 10px 25px;
+      height: 50px;
+      line-height: 30px;
+      opacity: 0.4;
+      font-size: 16px;
+      position: relative;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &.menu-item-act {
+        opacity: 1;
+      }
+
+      span {
+        display: inline-block;
+        vertical-align: top;
+        margin-left: 8px;
+      }
+      .icon {
+        margin-top: -3px;
+      }
+    }
+  }
+  .head-menu {
+    float: left;
+  }
+  .head-user {
+    float: right;
+    padding-right: 10px;
+    li {
+      padding: 10px;
+    }
+    .menu-item-account {
+      white-space: nowrap;
+      padding: 10px;
+      span {
+        max-width: 156px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  // .head-menu-btn
+  .head-menu-btn {
+    display: none;
+    float: right;
+    line-height: 36px;
+    padding: 12px 15px;
+    text-align: center;
+    > span {
+      display: block;
+      height: 36px;
+      width: 36px;
+      border-radius: 5px;
+      background-color: rgba($color: #fff, $alpha: 0.3);
+    }
+    i {
+      font-size: 22px;
+      vertical-align: middle;
+    }
+  }
+}
+// menu-dialog
+.menu-dialog {
+  .el-dialog.is-fullscreen {
+    border-radius: 0;
+    box-shadow: none;
+
+    .el-dialog__body {
+      padding: 10px;
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .menu-logout {
+    padding: 10px;
+    width: 52px;
+    height: 52px;
+    margin: 0 auto;
+    border: 1px solid $--color-text-gray-3;
+    border-radius: 50%;
+    font-size: 30px;
+    text-align: center;
+    color: $--color-text-gray-3;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $--color-danger;
+      color: $--color-danger;
+    }
+  }
+}
+
+// home-breadcrumb
+.home-breadcrumb {
+  margin-bottom: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: $--color-text-gray-2;
+
+  .breadcrumb-tips {
+    display: inline-block;
+    vertical-align: middle;
+    > i {
+      margin-top: -2px;
+      margin-right: 8px;
+    }
+  }
+  .el-breadcrumb {
+    line-height: 16px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 12px;
+
+    .el-breadcrumb__item {
+      .el-breadcrumb__inner {
+        color: $--color-text-gray-2;
+      }
+    }
+    .el-breadcrumb__separator {
+      margin: 0 5px;
+    }
+  }
+}
+
+// home-view
+
+/* view-footer */
+.home-footer {
+  position: absolute;
+  width: 100%;
+  height: 60px;
+  bottom: 0;
+  left: 0;
+  z-index: auto;
+  padding: 20px 0;
+  line-height: 20px;
+  color: $--color-text-gray-3;
+  text-align: center;
+  font-size: 13px;
+  a {
+    color: $--color-text-gray-3;
+  }
+  a:hover {
+    color: $--color-text-gray;
+  }
+}