:lipstick: Updating the UI and style files.sys avuex-cli style

src/main.js

@@ -24,9 +24,9 @@ import VueClipboard from 'vue-clipboard2'
 // 插件 json 展示
 import vueJsonTreeView from 'vue-json-tree-view'
 
-// //源文件包
-// import '../packages/index.js';
-// import '../packages/theme-chalk/src/index.scss';
+import { validatenull } from '@/util/validate'
+
+Vue.prototype.validatenull = validatenull
 
 Vue.use(Avue, { menuType: 'text' })
 

src/page/index/index.vue

@@ -3,25 +3,25 @@
        :class="{'avue--collapse':isCollapse}">
     <div class="avue-header">
       <!-- 顶部导航栏 -->
-      <top/>
+      <top />
     </div>
 
     <div class="avue-layout">
       <div class="avue-left">
         <!-- 左侧导航栏 -->
-        <sidebar/>
+        <sidebar />
       </div>
       <div class="avue-main">
         <!-- 顶部标签卡 -->
-        <tags/>
+        <tags />
         <!-- 主体视图层 -->
         <el-scrollbar style="height:100%">
           <keep-alive>
             <router-view class="avue-view"
-                         v-if="$route.meta.$keepAlive"/>
+                         v-if="$route.meta.keepAlive" />
           </keep-alive>
           <router-view class="avue-view"
-                       v-if="!$route.meta.$keepAlive"/>
+                       v-if="!$route.meta.keepAlive" />
         </el-scrollbar>
 
       </div>
@@ -38,81 +38,73 @@
 </template>
 
 <script>
-  import {mapGetters} from 'vuex'
-  import tags from './tags'
-  import top from './top/'
-  import sidebar from './sidebar/'
-  import admin from '@/util/admin';
-  import {validatenull} from '@/util/validate';
-  import {calcDate} from '@/util/date.js';
-  import {getStore} from '@/util/store.js';
-
-  export default {
-    components: {
-      top,
-      tags,
-      sidebar
-    },
-    name: 'index',
-    data() {
-      return {
-        //刷新token锁
-        refreshLock: false,
-        //刷新token的时间
-        refreshTime: '',
-      }
-    },
-    created() {
-      //实时检测刷新token
-      this.refreshToken()
+import { mapGetters } from "vuex";
+import tags from "./tags";
+import top from "./top/";
+import sidebar from "./sidebar/";
+import admin from "@/util/admin";
+import { validatenull } from "@/util/validate";
+import { calcDate } from "@/util/date.js";
+import { getStore } from "@/util/store.js";
+export default {
+  components: {
+    top,
+    tags,
+    sidebar
+  },
+  name: "index",
+  data() {
+    return {
+      //刷新token锁
+      refreshLock: false,
+      //刷新token的时间
+      refreshTime: ""
+    };
+  },
+  created() {
+    //实时检测刷新token
+    this.refreshToken();
+  },
+  mounted() {
+    this.init();
+  },
+  computed: mapGetters(["isLock", "isCollapse", "website"]),
+  props: [],
+  methods: {
+    showCollapse() {
+      this.$store.commit("SET_COLLAPSE");
     },
-    destroyed() {
-      console.log("销毁")
-      console.log(this.refreshTime)
-      clearInterval(this.refreshTime)
+    // 屏幕检测
+    init() {
+      this.$store.commit("SET_SCREEN", admin.getScreen());
+      window.onresize = () => {
+        setTimeout(() => {
+          this.$store.commit("SET_SCREEN", admin.getScreen());
+        }, 0);
+      };
     },
-    mounted() {
-      this.init()
-    },
-    computed: mapGetters(['isLock', 'isCollapse', 'website', 'expires_in']),
-    props: [],
-    methods: {
-      showCollapse() {
-        this.$store.commit("SET_COLLAPSE")
-      },
-      // 屏幕检测
-      init() {
-        this.$store.commit('SET_SCREEN', admin.getScreen())
-        window.onresize = () => {
-          setTimeout(() => {
-            this.$store.commit('SET_SCREEN', admin.getScreen())
-          }, 0);
+    // 10分钟检测一次token
+    refreshToken() {
+      this.refreshTime = setInterval(() => {
+        const token = getStore({
+          name: "token",
+          debug: true
+        });
+        const date = calcDate(token.datetime, new Date().getTime());
+        if (validatenull(date)) return;
+        if (!(date.seconds >= this.website.tokenTime) && !this.refreshLock) {
+          this.refreshLock = true;
+          this.$store
+            .dispatch("RefreshToken")
+            .then(() => {
+              this.refreshLock = false;
+            })
+            .catch(() => {
+              this.refreshLock = false;
+            });
         }
-      },
-      // 实时检测刷新token
-      refreshToken() {
-        this.refreshTime = setInterval(() => {
-          const token = getStore({
-            name: 'access_token',
-            debug: true,
-          });
-
-          if (validatenull(token)) {
-            return;
-          }
-
-          if (this.expires_in <= 1000 && !this.refreshLock) {
-            this.refreshLock = true
-            this.$store
-              .dispatch('RefeshToken')
-              .catch(() => {
-                clearInterval(this.refreshTime)
-              });
-            this.refreshLock = false
-          }
-          this.$store.commit("SET_EXPIRES_IN",this.expires_in - 10);
-        }, 10000);
-      },
+      }, 10000);
     }
   }
+};
 </script>

src/page/index/layout.vue

@@ -1,3 +1,3 @@
 <template>
   <router-view></router-view>
-</template>
+</template>

src/page/index/logo.vue

@@ -20,13 +20,12 @@
 import { mapGetters } from "vuex";
 export default {
   name: "logo",
-  data () {
+  data() {
     return {};
   },
-  created () {
-  },
+  created() {},
   computed: {
-    ...mapGetters(["website", 'keyCollapse'])
+    ...mapGetters(["website", "keyCollapse"])
   },
   methods: {}
 };
@@ -47,9 +46,9 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  width: 220px;
-  height: 50px;
-  line-height: 50px;
+  width: 240px;
+  height: 64px;
+  line-height: 64px;
   background-color: #20222a;
   font-size: 20px;
   overflow: hidden;

src/page/index/sidebar/config.js

@@ -1,8 +1,8 @@
 export default {
-  propsDefault: {
-    label: 'label',
-    path: 'path',
-    icon: 'icon',
-    children: 'children'
-  }
-}
+    propsDefault: {
+        label: 'label',
+        path: 'path',
+        icon: 'icon',
+        children: 'children'
+    }
+}

src/page/index/sidebar/index.vue

@@ -2,16 +2,16 @@
   <div class="avue-sidebar">
     <logo></logo>
     <el-scrollbar style="height:100%">
+      <div v-if="validatenull(menu)"
+           class="avue-sidebar--tip">没有发现菜单</div>
       <el-menu unique-opened
                :default-active="nowTagValue"
                mode="vertical"
                :show-timeout="200"
-               background-color="#20222a"
-               text-color="rgba(255,255,255,0.7)"
                :collapse="keyCollapse">
         <sidebar-item :menu="menu"
-                      first
                       :screen="screen"
+                      first
                       :props="website.menu.props"
                       :collapse="keyCollapse"></sidebar-item>
       </el-menu>
@@ -20,28 +20,30 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import logo from '../logo';
-import sidebarItem from './sidebarItem'
+import { mapGetters } from "vuex";
+import logo from "../logo";
+import sidebarItem from "./sidebarItem";
 export default {
-  name: 'sidebar',
+  name: "sidebar",
   components: { sidebarItem, logo },
-  data () {
-    return {}
+  data() {
+    return {};
   },
-  created () {
+  created() {
     this.$store.dispatch("GetMenu").then(data => {
-      if (data.length === 0) return
+      if (data.length === 0) return;
       this.$router.$avueRouter.formatRoutes(data, true);
-    })
+    });
   },
   computed: {
-    ...mapGetters(['website', 'menu', 'tag', 'keyCollapse', 'screen']),
-    nowTagValue: function () { return this.$router.$avueRouter.getValue(this.$route) }
+    ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen"]),
+    nowTagValue: function() {
+      return this.$router.$avueRouter.getValue(this.$route);
+    }
   },
-  mounted () { },
+  mounted() {},
   methods: {}
-}
+};
 </script>
 <style lang="scss" scoped>
 </style>

src/page/index/sidebar/sidebarItem.vue

@@ -7,7 +7,8 @@
                     :key="item[labelKey]"
                     :class="{'is-active':vaildAvtive(item)}">
         <i :class="item[iconKey]"></i>
-        <span slot="title">{{item[labelKey]}}</span>
+        <span slot="title"
+              :alt="item[pathKey]">{{item[labelKey]}}</span>
       </el-menu-item>
       <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
                   :index="item[pathKey]"
@@ -15,7 +16,7 @@
         <template slot="title">
           <i :class="item[iconKey]"></i>
           <span slot="title"
-                :class="{'el-menu--display':collapse&&first}">{{item[labelKey]}}</span>
+                :class="{'el-menu--display':collapse && first}">{{item[labelKey]}}</span>
         </template>
         <template v-for="(child,cindex) in item[childrenKey]">
           <el-menu-item :index="child[pathKey],cindex"
@@ -38,15 +39,15 @@
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
-import { validatenull } from '@/util/validate';
-import config from './config.js'
+import { mapGetters } from "vuex";
+import { validatenull } from "@/util/validate";
+import config from "./config.js";
 export default {
-  name: 'sidebarItem',
-  data () {
+  name: "sidebarItem",
+  data() {
     return {
       config: config
-    }
+    };
   },
   props: {
     menu: {
@@ -56,41 +57,54 @@ export default {
       type: Number
     },
     first: {
-        type: Boolean,
-        default: false
+      type: Boolean,
+      default: false
     },
     props: {
       type: Object,
-      default: () => { return {} }
+      default: () => {
+        return {};
+      }
     },
     collapse: {
       type: Boolean
     }
   },
-  created () {
-  },
-  mounted () { },
+  created() {},
+  mounted() {},
   computed: {
-    ...mapGetters(['roles']),
-    labelKey () { return this.props.label || this.config.propsDefault.label },
-    pathKey () { return this.props.path || this.config.propsDefault.path },
-    iconKey () { return this.props.icon || this.config.propsDefault.icon },
-    childrenKey () { return this.props.children || this.config.propsDefault.children },
-    nowTagValue () { return this.$router.$avueRouter.getValue(this.$route) }
+    ...mapGetters(["roles"]),
+    labelKey() {
+      return this.props.label || this.config.propsDefault.label;
+    },
+    pathKey() {
+      return this.props.path || this.config.propsDefault.path;
+    },
+    iconKey() {
+      return this.props.icon || this.config.propsDefault.icon;
+    },
+    childrenKey() {
+      return this.props.children || this.config.propsDefault.children;
+    },
+    nowTagValue() {
+      return this.$router.$avueRouter.getValue(this.$route);
+    }
   },
   methods: {
-    vaildAvtive (item) {
-      const groupFlag = (item['group'] || []).some(ele => this.$route.path.includes(ele));
-      return this.nowTagValue === item[this.pathKey] || groupFlag
+    vaildAvtive(item) {
+      const groupFlag = (item["group"] || []).some(ele =>
+        this.$route.path.includes(ele)
+      );
+      return this.nowTagValue === item[this.pathKey] || groupFlag;
     },
-    vaildRoles (item) {
+    vaildRoles(item) {
       item.meta = item.meta || {};
-      return item.meta.roles ? item.meta.roles.includes(this.roles) : true
+      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
     },
-    validatenull (val) {
+    validatenull(val) {
       return validatenull(val);
     },
-    open (item) {
+    open(item) {
       if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
       this.$router.$avueRouter.group = item.group;
       this.$router.push({
@@ -99,9 +113,9 @@ export default {
           src: item[this.pathKey]
         }),
         query: item.query
-      })
+      });
     }
   }
-}
+};
 </script>
 

src/page/index/tags.vue

@@ -2,10 +2,19 @@
   <div class="avue-tags"
        v-if="showTag">
     <!-- tag盒子 -->
-    <div class="tags-box"
-         ref="tagBox">
+    <div v-if="contextmenuFlag"
+         class="avue-tags__contentmenu"
+         :style="{left:contentmenuX+'px',top:contentmenuY+'px'}">
+      <div class="item"
+           @click="closeOthersTags">关闭其他</div>
+      <div class="item"
+           @click="closeAllTags">关闭全部</div>
+    </div>
+    <div class="avue-tags__box"
+         :class="{'avue-tags__box--close':!website.isFirstPage}">
       <el-tabs v-model="active"
                type="card"
+               @contextmenu.native="handleContextmenu"
                :closable="tagLen!==1"
                @tab-click="openTag"
                @edit="menuTag">
@@ -14,8 +23,9 @@
                      :label="item.label"
                      :name="item.value">
         </el-tab-pane>
+
       </el-tabs>
-      <el-dropdown class="tags-menu pull-right">
+      <el-dropdown class="avue-tags__menu">
         <el-button type="primary"
                    size="mini">
           更多
@@ -31,49 +41,79 @@
   </div>
 </template>
 <script>
-import { mapGetters, mapState } from 'vuex'
-
+import { mapGetters, mapState } from "vuex";
 export default {
-  name: 'tags',
-  data () {
+  name: "tags",
+  data() {
     return {
-      active: '',
-    }
+      active: "",
+      contentmenuX: "",
+      contentmenuY: "",
+      contextmenuFlag: false
+    };
   },
-  created () { },
-  mounted () {
+  created() {},
+  mounted() {
     this.setActive();
   },
   watch: {
-    tag () {
+    tag() {
       this.setActive();
+    },
+    contextmenuFlag() {
+      window.addEventListener("mousedown", this.watchContextmenu);
     }
   },
   computed: {
-    ...mapGetters(['tagWel', 'tagList', 'tag']),
+    ...mapGetters(["tagWel", "tagList", "tag", "website"]),
     ...mapState({
-      showTag: state => state.common.showTag,
+      showTag: state => state.common.showTag
     }),
-    tagLen () {
+    tagLen() {
       return this.tagList.length || 0;
     }
   },
   methods: {
+    watchContextmenu() {
+      if (!this.$el.contains(event.target) || event.button !== 0) {
+        this.contextmenuFlag = false;
+      }
+
+      window.removeEventListener("mousedown", this.watchContextmenu);
+    },
+    handleContextmenu(event) {
+      let target = event.target;
+      // 解决 https://github.com/d2-projects/d2-admin/issues/54
+      let flag = false;
+      if (target.className.indexOf("el-tabs__item") > -1) flag = true;
+      else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
+        target = target.parentNode;
+        flag = true;
+      }
+      if (flag) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.contentmenuX = event.clientX;
+        this.contentmenuY = event.clientY;
+        this.tagName = target.getAttribute("aria-controls").slice(5);
+        this.contextmenuFlag = true;
+      }
+    },
     //激活当前选项
-    setActive () {
+    setActive() {
       this.active = this.tag.value;
     },
-    menuTag (value, action) {
-      if (action === 'remove') {
+    menuTag(value, action) {
+      if (action === "remove") {
         let { tag, key } = this.findTag(value);
-        this.$store.commit('DEL_TAG', tag)
+        this.$store.commit("DEL_TAG", tag);
         if (tag.value === this.tag.value) {
-          tag = this.tagList[key === 0 ? key : key - 1] //如果关闭本标签让前推一个
-          this.openTag(tag)
+          tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
+          this.openTag(tag);
         }
       }
     },
-    openTag (item) {
+    openTag(item) {
       let tag;
       if (item.name) {
         tag = this.findTag(item.name).tag;
@@ -86,12 +126,13 @@ export default {
           src: tag.value
         }),
         query: tag.query
-      })
+      });
     },
-    closeOthersTags () {
-      this.$store.commit('DEL_TAG_OTHER')
+    closeOthersTags() {
+      this.contextmenuFlag = false;
+      this.$store.commit("DEL_TAG_OTHER");
     },
-    findTag (value) {
+    findTag(value) {
       let tag, key;
       this.tagList.map((item, index) => {
         if (item.value === value) {
@@ -101,17 +142,18 @@ export default {
       });
       return { tag: tag, key: key };
     },
-    closeAllTags () {
-      this.$store.commit('DEL_ALL_TAG')
+    closeAllTags() {
+      this.contextmenuFlag = false;
+      this.$store.commit("DEL_ALL_TAG");
       this.$router.push({
         path: this.$router.$avueRouter.getPath({
           src: this.tagWel.value
         }),
         query: this.tagWel.query
-      })
-    },
+      });
+    }
   }
-}
+};
 </script>
 
 

src/page/index/top/index.vue

@@ -2,13 +2,13 @@
   <div class="avue-top">
     <div class="top-bar__left">
       <div class="avue-breadcrumb"
+           :class="[{ 'avue-breadcrumb--active': isCollapse }]"
            v-if="showCollapse">
-        <i class="icon-navicon avue-breadcrumb_collapse"
-           :class="[{ 'avue-breadcrumb_collapse--right': isCollapse }]"
+        <i class="icon-navicon"
            @click="setCollapse"></i>
       </div>
     </div>
-    <h1 class="top-bar__title">
+    <div class="top-bar__title">
       <div class="top-bar__item top-bar__item--show"
            v-if="showMenu">
         <top-menu></top-menu>
@@ -17,7 +17,7 @@
             v-if="showSearch">
         <top-search></top-search>
       </span>
-    </h1>
+    </div>
     <div class="top-bar__right">
       <el-tooltip v-if="showColor"
                   effect="dark"
@@ -60,12 +60,21 @@
              @click="handleScreen"></i>
         </div>
       </el-tooltip>
+      <el-tooltip effect="dark"
+                  content="用户头像"
+                  placement="bottom">
+        <img class="top-bar__img"
+             :src="userInfo.avatar">
+      </el-tooltip>
       <el-dropdown>
         <span class="el-dropdown-link">
           {{userInfo.username}}
           <i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <router-link to="/">首页</router-link>
+          </el-dropdown-item>
           <el-dropdown-item>
             <router-link to="/info/index">个人信息</router-link>
           </el-dropdown-item>
@@ -82,35 +91,40 @@ import { mapGetters, mapState } from "vuex";
 import { fullscreenToggel, listenfullscreen } from "@/util/util";
 import topLock from "./top-lock";
 import topMenu from "./top-menu";
-import topSearch from './top-search';
-import topBreadcrumb from "./top-breadcrumb";
-import topColor from "./top-color";
+import topSearch from "./top-search";
 import topTheme from "./top-theme";
 import topLogs from "./top-logs";
+import topColor from "./top-color";
 import topSetting from "./top-setting";
 export default {
-  components: { topLock, topMenu, topSearch, topBreadcrumb, topColor, topTheme, topLogs, topSetting },
+  components: {
+    topLock,
+    topMenu,
+    topSearch,
+    topTheme,
+    topLogs,
+    topColor,
+    topSetting
+  },
   name: "top",
-  data () {
-    return {
-
-    };
+  data() {
+    return {};
   },
   filters: {},
-  created () { },
-  mounted () {
+  created() {},
+  mounted() {
     listenfullscreen(this.setScreen);
   },
   computed: {
     ...mapState({
       showDebug: state => state.common.showDebug,
-      showColor: state => state.common.showColor,
       showTheme: state => state.common.showTheme,
       showLock: state => state.common.showLock,
       showFullScren: state => state.common.showFullScren,
       showCollapse: state => state.common.showCollapse,
       showSearch: state => state.common.showSearch,
-      showMenu: state => state.common.showMenu
+      showMenu: state => state.common.showMenu,
+      showColor: state => state.common.showColor
     }),
     ...mapGetters([
       "userInfo",
@@ -121,19 +135,19 @@ export default {
       "tag",
       "logsLen",
       "logsFlag"
-    ]),
+    ])
   },
   methods: {
-    handleScreen () {
+    handleScreen() {
       fullscreenToggel();
     },
-    setCollapse () {
+    setCollapse() {
       this.$store.commit("SET_COLLAPSE");
     },
-    setScreen () {
+    setScreen() {
       this.$store.commit("SET_FULLSCREN");
     },
-    logout () {
+    logout() {
       this.$confirm("是否退出系统, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -150,4 +164,3 @@ export default {
 
 <style lang="scss" scoped>
 </style>
-

src/page/index/top/top-breadcrumb.vue

@@ -1,29 +0,0 @@
-<template>
-  <el-breadcrumb separator="/"
-                 class="avue-breadcrumb-list">
-    <template v-for="(item,index) in tagCurrent">
-      <el-breadcrumb-item :to="{ path: item.value }"
-                          :key="index">{{item.label}}</el-breadcrumb-item>
-    </template>
-  </el-breadcrumb>
-</template>
-<script>
-import { mapGetters } from "vuex";
-export default {
-  name: "breadcrumb",
-  data () {
-    return {};
-  },
-  created () { },
-  mounted () { },
-  watch: {},
-  computed: {
-    ...mapGetters(["tagCurrent"])
-  },
-  methods: {}
-};
-</script>
-<style lang="scss" scoped>
-</style>
-
-

src/page/index/top/top-color.vue

@@ -1,20 +1,20 @@
 <template>
-  <el-color-picker size="small"
+  <el-color-picker size="mini"
+                   style="padding-top:18px;"
                    class="theme-picker"
+                   :predefine="predefineColors"
                    popper-class="theme-picker-dropdown"
-                   v-model="themeVal"
-                   :predefine="predefineColors"></el-color-picker>
+                   v-model="themeVal"></el-color-picker>
 </template>
 
 <script>
 import color from "@/mixins/color";
-
 export default {
   name: "topColor",
   mixins: [color()],
-  data () {
+  data() {
     return {
-      chalk: '',
+      chalk: "",
       predefineColors: [
         '#ff4500',
         '#ff8c00',

src/page/index/top/top-lock.vue

@@ -30,7 +30,7 @@ import { validatenull } from "@/util/validate";
 import { mapGetters } from "vuex";
 export default {
   name: "top-lock",
-  data () {
+  data() {
     return {
       box: false,
       form: {
@@ -38,14 +38,14 @@ export default {
       }
     };
   },
-  created () { },
-  mounted () { },
+  created() {},
+  mounted() {},
   computed: {
     ...mapGetters(["lockPasswd"])
   },
   props: [],
   methods: {
-    handleSetLock () {
+    handleSetLock() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.$store.commit("SET_LOCK_PASSWD", this.form.passwd);
@@ -53,7 +53,7 @@ export default {
         }
       });
     },
-    handleLock () {
+    handleLock() {
       if (validatenull(this.lockPasswd)) {
         this.box = true;
         return;

src/page/index/top/top-logs.vue

@@ -1,6 +1,7 @@
 <template>
   <span @click="logsFlag?'':handleOpen()">
-    <el-badge :value="logsFlag?'':logsLen">
+    <el-badge :value="logsFlag?'':logsLen"
+              :max="99">
       <i class="icon-bug"></i>
     </el-badge>
     <el-dialog title="日志"
@@ -15,24 +16,23 @@
 
 <script>
 import { mapGetters } from "vuex";
-import logs from '@/page/logs/index'
+import logs from "@/page/logs/index";
 export default {
   name: "top-logs",
   components: { logs },
-  data () {
+  data() {
     return {
       box: false
     };
   },
-  created () {
-  },
-  mounted () { },
+  created() {},
+  mounted() {},
   computed: {
-    ...mapGetters(["logsFlag", "logsLen"]),
+    ...mapGetters(["logsFlag", "logsLen"])
   },
   props: [],
   methods: {
-    handleOpen () {
+    handleOpen() {
       this.box = true;
     }
   }

src/page/index/top/top-menu.vue

@@ -9,6 +9,7 @@
                       :key="index">
           <template slot="title">
             <i :class="item.icon"></i>
+            <span>{{item.label}}</span>
           </template>
         </el-menu-item>
       </template>
@@ -20,41 +21,26 @@
 import { mapGetters } from "vuex";
 export default {
   name: "top-menu",
-  data () {
+  data() {
     return {
       activeIndex: "0",
-      items: [
-        {
-          label: "首页",
-          href: "/wel/index",
-          icon: 'el-icon-menu',
-          parentId: 0
-        },
-        {
-          label: '文档',
-          href: 'https://www.kancloud.cn/lengleng/pig-guide/627970',
-          icon: 'el-icon-document',
-          parentId: 1
-        },
-        {
-          label: 'crud实例',
-          href: '/crud/index',
-          icon: 'el-icon-setting',
-          parentId: 2
-        }
-      ]
+      items: []
     };
   },
-  created () { },
+  created() {
+  },
   computed: {
     ...mapGetters(["tagCurrent", "menu"])
   },
   methods: {
-    openMenu (item) {
-      this.$store.dispatch("GetMenu", item.parentId).then(() => {
+    openMenu(item) {
+      this.$store.dispatch("GetMenu", item.parentId).then(data => {
+        if (data.length !== 0) {
+          this.$router.$avueRouter.formatRoutes(data, true);
+        }
         let itemActive,
           childItemActive = 0;
-        if (item.href) {
+        if (item.path) {
           itemActive = item;
         } else {
           if (this.menu[childItemActive].length == 0) {
@@ -66,11 +52,11 @@ export default {
         this.$router.push({
           path: this.$router.$avueRouter.getPath({
             name: itemActive.label,
-            src: itemActive.href
+            src: itemActive.path
           })
         });
       });
     }
   }
 };
-</script>
+</script>

src/page/index/top/top-search.vue

@@ -9,75 +9,89 @@
     <template slot-scope="{ item }">
       <i :class="[item[iconKey],'icon']"></i>
       <div class="name">{{ item[labelKey] }}</div>
-      <p class="addr">{{ item[pathKey] }}</p>
+      <div class="addr">{{ item[pathKey] }}</div>
     </template>
   </el-autocomplete>
 </template>
 
 <script>
-import config from '../sidebar/config.js'
+import config from "../sidebar/config.js";
 import { mapGetters } from "vuex";
 export default {
-  data () {
+  data() {
     return {
       config: config,
-      value: '',
-      menuList: [],
-    }
+      value: "",
+      menuList: []
+    };
   },
-  created () {
+  created() {
     this.getMenuList();
   },
 
   watch: {
-    menu () {
+    menu() {
       this.getMenuList();
     }
   },
   computed: {
-    labelKey () { return this.website.menu.props.label || this.config.propsDefault.label },
-    pathKey () { return this.website.menu.props.path || this.config.propsDefault.path },
-    iconKey () { return this.website.menu.props.icon || this.config.propsDefault.icon },
-    childrenKey () { return this.website.menu.props.children || this.config.propsDefault.children },
-    ...mapGetters(['menu', 'website'])
+    labelKey() {
+      return this.website.menu.props.label || this.config.propsDefault.label;
+    },
+    pathKey() {
+      return this.website.menu.props.path || this.config.propsDefault.path;
+    },
+    iconKey() {
+      return this.website.menu.props.icon || this.config.propsDefault.icon;
+    },
+    childrenKey() {
+      return (
+        this.website.menu.props.children || this.config.propsDefault.children
+      );
+    },
+    ...mapGetters(["menu", "website"])
   },
   methods: {
-    getMenuList () {
-      const findMenu = (list) => {
+    getMenuList() {
+      const findMenu = list => {
         for (let i = 0; i < list.length; i++) {
           const ele = Object.assign({}, list[i]);
           if (ele[this.childrenKey]) findMenu(ele[this.childrenKey]);
           delete ele[this.childrenKey];
           this.menuList.push(ele);
         }
-      }
+      };
       this.menuList = [];
       findMenu(this.menu);
     },
-    querySearch (queryString, cb) {
+    querySearch(queryString, cb) {
       var restaurants = this.menuList;
-      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+      var results = queryString
+        ? restaurants.filter(this.createFilter(queryString))
+        : restaurants;
       // 调用 callback 返回建议列表的数据
       cb(results);
     },
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+    createFilter(queryString) {
+      return restaurant => {
+        return (
+          restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
+          0
+        );
       };
     },
-    handleSelect (item) {
-      this.value = '';
+    handleSelect(item) {
+      this.value = "";
       this.$router.push({
         path: this.$router.$avueRouter.getPath({
           name: item[this.labelKey],
           src: item[this.pathKey]
         }),
         query: item.query
-      })
-    },
+      });
+    }
   }
-
-}
+};
 </script>
 
 <style lang="scss">

src/page/index/top/top-theme.vue

@@ -6,7 +6,6 @@
       <el-radio-group v-model="text"
                       class="list">
         <el-row :span="24">
-
           <el-col v-for="(item,index) in list"
                   :key="index"
                   :md="4"
@@ -26,60 +25,55 @@
 </template>
 
 <script>
-  import {setTheme} from '@/util/util'
-  import {mapGetters} from 'vuex';
-
-  export default {
-    data() {
-      return {
-        box: false,
-        text: '',
-        list: [
-          {
-            name: '黑色',
-            value: '',
-          }, {
-            name: '简洁',
-            value: 'theme-volcano'
-          }, {
-            name: '炫彩',
-            value: 'theme-star'
-          }, {
-            name: '紫色',
-            value: 'theme-black'
-          }, {
-            name: '渐变',
-            value: 'theme-gradual'
-          }
-        ]
-      }
-    },
-    watch: {
-      text: function (val) {
-        this.$store.commit('SET_THEME_NAME', val);
-        setTheme(val);
-      }
-    },
-    computed: {
-      ...mapGetters(["themeName"])
-    },
-    mounted() {
-      this.text = this.themeName;
-      if (!this.text) {
-        this.text = '';
-      }
-    },
-    methods: {
-      open() {
-        this.box = true;
-      }
+import { setTheme } from "@/util/util";
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {
+      box: false,
+      text: "",
+      list: [
+        {
+          name: "默认主题",
+          value: "default"
+        },
+        {
+          name: "白色主题",
+          value: "theme-white"
+        },
+        {
+          name: "炫彩主题",
+          value: "theme-star"
+        }
+      ]
+    };
+  },
+  watch: {
+    text: function(val) {
+      this.$store.commit("SET_THEME_NAME", val);
+      setTheme(val);
+    }
+  },
+  computed: {
+    ...mapGetters(["themeName"])
+  },
+  mounted() {
+    this.text = this.themeName;
+    if (!this.text) {
+      this.text = "";
+    }
+  },
+  methods: {
+    open() {
+      this.box = true;
     }
   }
+};
 </script>
 
 <style lang="scss" scoped>
-  .list {
-    width: 100%;
-  }
+.list {
+  width: 100%;
+}
 </style>
 

src/page/login/index.vue

@@ -98,161 +98,156 @@ export default {
 </script>
 
 <style lang="scss">
-.login-container {
-  position: relative;
-  width: 100%;
-  margin: 0 auto;
-}
-.login-weaper {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 500px;
-  margin-top: -220px;
-}
-.login-container::before {
-  z-index: -1024;
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("/img/login.png");
-  background-size: cover;
-}
-.login-left {
-  float: left;
-  width: 50%;
-  position: relative;
-}
-.login-info {
-  padding-left: 140px;
-}
-.login-info-title {
-  line-height: 90px;
-  color: rgb(52, 58, 64);
-}
-.login-info-item {
-  font-size: 14px;
-  line-height: 2.5;
-  color: rgb(33, 37, 41);
-}
-.login-border {
-  width: 50%;
-  float: left;
-  box-sizing: border-box;
-}
-.login-main {
-  margin: 0 auto;
-  width: 50%;
-  box-sizing: border-box;
-}
-.login-main > h3 {
-  margin-bottom: 20px;
-}
-.login-main > p {
-  color: #76838f;
-}
-.login-title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 40px;
-  font-weight: 500;
-  font-size: 22px;
-  text-align: center;
-  letter-spacing: 4px;
-}
-
-.login-select {
-  input {
+  .login-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+  }
+  .login-weaper {
+    position: absolute;
+    top: 22%;
+    left: 0;
+    width: 100%;
+  }
+  .login-container::before {
+    z-index: -1024;
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("/img/login.png");
+    background-size: cover;
+  }
+  .login-left {
+    float: left;
+    width: 50%;
+    position: relative;
+  }
+  .login-logo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 50px;
+    font-size: 24px;
     color: #333;
-    font-size: 18px;
-    font-weight: 400;
-    border: none;
-    text-align: center;
   }
-}
-.login-menu {
-  width: 100%;
-  text-align: center;
-  a {
-    color: rgb(153, 153, 153);
-    font-size: 12px;
-    margin: 0px 8px;
+  .login-info {
+    padding-left: 140px;
+  }
+  .login-info-title {
+    line-height: 90px;
+    color: rgb(52, 58, 64);
+  }
+  .login-info-item {
+    font-size: 14px;
+    line-height: 2.5;
+    color: rgb(33, 37, 41);
+  }
+  .login-border {
+    width: 50%;
+    float: left;
+    box-sizing: border-box;
   }
-}
-.login-index {
-  margin-top: 40px !important;
-  width: 180px;
-  height: 48px;
-  text-align: center;
-  border-radius: 50px !important;
-  background: transparent !important;
-  color: #333 !important;
-  font-size: 16px !important;
-  border: 1px solid rgb(152, 22, 244);
-}
-.login-submit {
-  display: block !important;
-  margin: 40px auto 10px auto !important;
-  width: 200px;
-  height: 48px;
-  font-size: 14px !important;
-  text-align: center;
-  border-radius: 50px !important;
-  border: 0px;
-  box-shadow: rgba(152, 22, 244, 0.19) 0px 5px 10px 2px;
-}
-.login-form {
-  margin: 10px 0;
-  i {
-    color: #999;
+  .login-main {
+    margin: 0 auto;
+    width: 50%;
+    box-sizing: border-box;
   }
-  .el-form-item__content {
+  .login-main > h3 {
+    margin-bottom: 20px;
+  }
+  .login-main > p {
+    color: #76838f;
+  }
+  .login-title {
+    margin-bottom: 40px;
+    font-weight: 500;
+    font-size: 22px;
+    text-align: center;
+    letter-spacing: 4px;
+  }
+  .login-menu {
     width: 100%;
+    text-align: center;
+    a {
+      color: rgb(153, 153, 153);
+      font-size: 12px;
+      margin: 0px 8px;
+    }
   }
-  .el-form-item {
-    margin-bottom: 12px;
+  .login-index {
+    margin-top: 40px !important;
+    width: 180px;
+    height: 48px;
+    text-align: center;
+    border-radius: 50px !important;
+    background: transparent !important;
+    color: #333 !important;
+    font-size: 16px !important;
+    border: 1px solid rgb(152, 22, 244);
   }
-  .el-input {
-    input {
-      padding-bottom: 10px;
-      text-indent: 5px;
-      background: transparent;
-      border: none;
-      border-radius: 0;
-      color: #333;
-      border-bottom: 1px solid rgb(235, 237, 242);
+  .login-submit {
+    display: block !important;
+    margin: 40px auto 10px auto !important;
+    width: 200px;
+    height: 48px;
+    font-size: 14px !important;
+    text-align: center;
+    border-radius: 50px !important;
+    border: 0px;
+    box-shadow: rgba(152, 22, 244, 0.19) 0px 5px 10px 2px;
+  }
+  .login-form {
+    margin: 10px 0;
+    i {
+      color: #999;
+    }
+    .el-form-item__content {
+      width: 100%;
     }
-    .el-input__prefix {
-      i {
-        padding: 0 5px;
-        font-size: 16px !important;
+    .el-form-item {
+      margin-bottom: 12px;
+    }
+    .el-input {
+      input {
+        padding-bottom: 10px;
+        text-indent: 5px;
+        background: transparent;
+        border: none;
+        border-radius: 0;
+        color: #333;
+        border-bottom: 1px solid rgb(235, 237, 242);
+      }
+      .el-input__prefix {
+        i {
+          padding: 0 5px;
+          font-size: 16px !important;
+        }
       }
     }
   }
-}
-.login-code {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  margin: 0 0 0 10px;
-}
-.login-code-img {
-  margin-top: 2px;
-  width: 100px;
-  height: 38px;
-  background-color: #fdfdfd;
-  border: 1px solid #f0f0f0;
-  color: #333;
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 5px;
-  line-height: 38px;
-  text-indent: 5px;
-  text-align: center;
-}
+  .login-code {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 0 0 0 10px;
+  }
+  .login-code-img {
+    margin-top: 2px;
+    width: 100px;
+    height: 38px;
+    background-color: #fdfdfd;
+    border: 1px solid #f0f0f0;
+    color: #333;
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 5px;
+    line-height: 38px;
+    text-indent: 5px;
+    text-align: center;
+  }
 </style>
+

src/styles/common.scss

@@ -16,231 +16,13 @@
 @import './theme/index.scss';
 //适配
 @import './media.scss';
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-weight: 500;
-}
-
-@include scrollBar();
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-input,
-p,
-blockquote,
-th,
-td {
-    margin: 0;
-    padding: 0;
-}
-
-* {
-    outline: none !important;
-}
-
-body {
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-    line-height: 2;
-}
-
-html,
-body {
-    height: 100%;
-}
-
-fieldset,
-img {
-    border: 0;
-}
-
-ol,
-ul {
-    list-style: none;
-}
-
-em {
-    font-style: normal;
-}
-
-input,
-button,
-select,
-textarea {
-    outline: none;
-}
-
-textarea {
-    resize: none;
-}
-
-//为了使文本段落左右两边对齐
-p {
-    word-wrap: break-word
-}
-
-a {
-    text-decoration: none;
-}
-
-i {
-    display: inline-block;
-}
-
-
-/*a:hover { color: #f60; text-decoration:none; }*/
-
-address,
-cite,
-code,
-em,
-th {
-    font-weight: normal;
-    font-style: normal;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-    display: inline-block;
-}
-
-
-/*a:link{color:#009;}*/
-
-
-/*a:visited{color:#800080;}*/
-
-a:hover,
-a:active,
-a:focus {
-    text-decoration: underline;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-.hidden {
-    display: none;
-}
-
-.padding {
-    padding: 0 !important;
-}
-
-.margin {
-    margin: 0 !important;
-}
-
-.pull-right {
-    float: right !important;
-    ;
-}
-
-.pull-left {
-    float: left !important;
-}
-
-.pull-center {
-    text-align: center;
-}
-
-.pull-flex {
-    display: flex;
-}
-
-.pull-overflow {
-    overflow: hidden;
-}
-
-.pull-auto {
-    height: auto;
-    overflow: hidden;
-}
-
-.pull-height {
-    height: 100%;
-    overflow: hidden;
-}
-
-.pull-fixed {
-    position: fixed;
-    left: 0;
-    top: 0;
-}
-
-.iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
-    overflow: hidden;
-    box-sizing: border-box;
-}
+//通用配置
+@import './normalize.scss';
 
-.text-white {
-    color: #fff;
+a{
+  text-decoration: none;
+  color:#333;
 }
-
-.grayMode {
-    filter: grayscale(100%);
-}
-
-.clearfix {
-    &:after {
-        visibility: hidden;
-        display: block;
-        font-size: 0;
-        content: " ";
-        clear: both;
-        height: 0;
-    }
-} //main-container全局样式
-.app-main {
-    min-height: 100%
-}
-
-.filter-container {
-    padding-bottom: 10px;
-    .filter-item {
-        display: inline-block;
-        vertical-align: middle;
-        margin-bottom: 10px;
-        margin-right: 10px;
-    }
-}
-
-.app-container {
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-.pagination-container {
-    padding: 20px 0;
-    float: right;
+*{
+  outline: none;
 }

src/styles/element-ui.scss

@@ -2,7 +2,6 @@
     font-size: 12px !important;
     line-height: 28px !important;
 }
-
 .el-card.is-always-shadow {
     box-shadow: none;
     border: none !important;
@@ -30,7 +29,7 @@
 .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
 .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
-    background-color: transparent!important;
+    background-color: transparent;
 }
 
 .el-message__icon,
@@ -59,8 +58,7 @@
 .el-main {
     padding: 0 !important;
 }
-.el-collapse-item__header{
-  text-align: center;
-  display: block;
-}
 
+.el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: transparent !important;
+}

src/styles/media.scss

@@ -2,31 +2,25 @@
 .avue-header,
 .avue-top,
 .avue-logo,
+.avue-layout
 .login-logo,
 .avue-main {
     transition: all .3s;
 }
-
 .avue-contail {
     width: 100%;
     height: 100%;
-    background-color: #f2f2f2;
+    background: #f0f2f5;
     background-size: 100%;
     background-repeat: no-repeat;
 }
 
-.avue-top {
-    position: relative;
-    width: 100%;
-    height: 50px;
-    margin: 0 auto;
-}
 
 .avue-left {
     position: fixed;
     left: 0;
     top: 0;
-    width: 220px;
+    width: 240px;
     height: 100%;
     z-index: 1025;
 }
@@ -54,12 +48,11 @@
 
 .avue-main {
     position: absolute;
-    left: 220px;
-    margin-top: 5px;
+    left: 240px;
     padding: 0;
     padding-bottom: 20px;
-    width: calc(100% - 220px);
-    height: calc(100% - 57px);
+    width: calc(100% - 240px);
+    height: calc(100% - 70px);
     box-sizing: border-box;
     overflow: hidden;
 }
@@ -104,7 +97,7 @@
 }
 
 @media screen and (max-width: 992px) {
-    $width: 220px;
+    $width: 240px;
     // ele的自适应
     .el-dialog,
     .el-message-box {
@@ -145,13 +138,6 @@
     .top-bar__item {
         display: none;
     }
-    .avue-top {
-        .top-menu {
-            .el-menu-item {
-                padding: 0 2px;
-            }
-        }
-    }
     .avue--collapse {
         .avue-left,
         .avue-logo {

src/styles/normalize.scss

@@ -0,0 +1,502 @@
+/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
+/*
+/*! 我就是自己看看，然后翻译下下，让大家看看 */
+
+/* ==========================================================================
+   HTML5 display definitions
+
+   HTML5 新增元素定义
+
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ *
+ * 修正IE 8/9 中未定义的块级元素。
+ */
+
+ article,
+ aside,
+ details,
+ figcaption,
+ figure,
+ footer,
+ header,
+ hgroup,
+ main,
+ nav,
+ section,
+ summary {
+     display: block;
+ }
+ 
+ /**
+  * Correct `inline-block` display not defined in IE 8/9.
+  *
+  * 修正在 IE 8/9 中未定义的 'inline-block' 元素。
+  */
+ 
+ audio,
+ canvas,
+ video {
+     display: inline-block;
+ }
+ 
+ /**
+  * Prevent modern browsers from displaying `audio` without controls.
+  * Remove excess height in iOS 5 devices.
+  *
+  * 阻止现在浏览器显示未定义 control 播放控件的 'audio' 声音元素。
+  * 删除 IOS 5 设备中显示的多余的高度。
+  */
+ 
+ audio:not([controls]) {
+     display: none;
+     height: 0;
+ }
+ 
+ /**
+  * Address styling not present in IE 8/9.
+  *
+  * 处理 IE 8/9 中不存在的样式。
+  */
+ 
+ [hidden] {
+     display: none;
+ }
+ 
+ /* ==========================================================================
+    Base
+ 
+    基本设置
+    ========================================================================== */
+ 
+ /**
+  * 1. Set default font family to sans-serif.
+  * 2. Prevent iOS text size adjust after orientation change, without disabling
+  *    user zoom.
+  *
+  * 1. 设置默认字体类型为 sans-serif.
+  * 2. 当用户放大或缩小页面时不改变字体大小。
+  */
+ 
+ html {
+     font-family: sans-serif; /* 1 */
+     -ms-text-size-adjust: 100%; /* 2 */
+     -webkit-text-size-adjust: 100%; /* 2 */
+ }
+ 
+ /**
+  * Remove default margin.
+  *
+  * 删除默认边距。
+  */
+ 
+ body {
+     margin: 0;
+ }
+ 
+ /* ==========================================================================
+    Links
+ 
+    链接
+    ========================================================================== */
+ 
+ /**
+  * Address `outline` inconsistency between Chrome and other browsers.
+  *
+  * 处理 Chrome 与其它浏览器中关于 'outline' 的不一致性。
+  */
+ 
+ a:focus {
+     outline: thin dotted;
+ }
+ 
+ /**
+  * Improve readability when focused and also mouse hovered in all browsers.
+  *
+  * 为所有浏览器改善当激活或悬停在元素上时元素内容的可读性。
+  */
+ 
+ a:active,
+ a:hover {
+     outline: 0;
+ }
+ 
+ /* ==========================================================================
+    Typography
+ 
+    排版
+    ========================================================================== */
+ 
+ /**
+  * Address variable `h1` font-size and margin within `section` and `article`
+  * contexts in Firefox 4+, Safari 5, and Chrome.
+  *
+  * 处理多变的 'h1' 字体大小及其在 Firefox 4+, Safari 5, 及 Chrome时浏览器中的 
+  * 'section' 与　'article' 元素中的边距。
+  */
+ 
+ h1 {
+     font-size: 2em;
+     margin: 0.67em 0;
+ }
+ 
+ /**
+  * Address styling not present in IE 8/9, Safari 5, and Chrome.
+  *
+  * 处理在 IE 8/9, Safari 5, 及 Chrome 没有的样式。
+  */
+ 
+ abbr[title] {
+     border-bottom: 1px dotted;
+ }
+ 
+ /**
+  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+  *
+  * 处理 Firefox 4+, Safari 5, 及 Chrome 中默认的 'bolder' 样式为　'bold'.
+  */
+ 
+ b,
+ strong {
+     font-weight: bold;
+ }
+ 
+ /**
+  * Address styling not present in Safari 5 and Chrome.
+  *
+  * 处理在 Safari 5 和 Chrome 没有的样式。
+  */
+ 
+ dfn {
+     font-style: italic;
+ }
+ 
+ /**
+  * Address differences between Firefox and other browsers.
+  *
+  * 处理　Firefox　与其它浏览器的差异。
+  */
+ 
+ hr {
+     -moz-box-sizing: content-box;
+     box-sizing: content-box;
+     height: 0;
+ }
+ 
+ /**
+  * Address styling not present in IE 8/9.
+  *
+  * 处理在 IE 8/9 中没有的样式。
+  */
+ 
+ mark {
+     background: #ff0;
+     color: #000;
+ }
+ 
+ /**
+  * Correct font family set oddly in Safari 5 and Chrome.
+  *
+  * 修正确 Safari 5 和 Chrome 中古怪的默认字体。
+  */
+ 
+ code,
+ kbd,
+ pre,
+ samp {
+     font-family: monospace, serif;
+     font-size: 1em;
+ }
+ 
+ /**
+  * Improve readability of pre-formatted text in all browsers.
+  *
+  * 为所有浏览器改善预格式化文本的可读性。
+  */
+ 
+ pre {
+     white-space: pre-wrap;
+ }
+ 
+ /**
+  * Set consistent quote types.
+  *
+  * 设置一致的引用格式。
+  */
+ 
+ q {
+     quotes: "\201C" "\201D" "\2018" "\2019";
+ }
+ 
+ /**
+  * Address inconsistent and variable font size in all browsers.
+  *
+  * 处理所有浏览器中字体大小的不一致性[译者注：原文直译为：处理所有
+  * 浏览器中的不一致和多变的字体大小]。
+  */
+ 
+ small {
+     font-size: 80%;
+ }
+ 
+ /**
+  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+  *
+  * 阻止所有浏览器中 'sub' 和 'sup' 元素影响 'line-height'. 
+  * [译者注：就是不让上标与下标影响行高。]
+  */
+ 
+ sub,
+ sup {
+     font-size: 75%;
+     line-height: 0;
+     position: relative;
+     vertical-align: baseline;
+ }
+ 
+ sup {
+     top: -0.5em;
+ }
+ 
+ sub {
+     bottom: -0.25em;
+ }
+ 
+ /* ==========================================================================
+    Embedded content
+ 
+    嵌入的内容
+    ========================================================================== */
+ 
+ /**
+  * Remove border when inside `a` element in IE 8/9.
+  *
+  * 删除 IE 8/9 中当内容位于 'a' 中出现的边框。
+  */
+ 
+ img {
+     border: 0;
+ }
+ 
+ /**
+  * Correct overflow displayed oddly in IE 9.
+  *
+  * 修正 IE 9 中显示古怪的溢出内容。
+  */
+ 
+ svg:not(:root) {
+     overflow: hidden;
+ }
+ 
+ /* ==========================================================================
+    Figures
+ 
+    Figure 图像/图表/代码等
+    ========================================================================== */
+ 
+ /**
+  * Address margin not present in IE 8/9 and Safari 5.
+  *
+  * 处理在 IE 8/9 和 Safari 5 没有的边距。
+  */
+ 
+ figure {
+     margin: 0;
+ }
+ 
+ /* ==========================================================================
+    Forms
+    ========================================================================== */
+ 
+ /**
+  * Define consistent border, margin, and padding.
+  *
+  * 定义一致的边框、外边距及内边距。
+  */
+ 
+ fieldset {
+     border: 1px solid #c0c0c0;
+     margin: 0 2px;
+     padding: 0.35em 0.625em 0.75em;
+ }
+ 
+ /**
+  * 1. Correct `color` not being inherited in IE 8/9.
+  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+  * 1. 修正在　IE 8/9 中没有继承的 'color'. 
+  *
+  *    [译者注：说是修正颜色嘛，可下面没有关于颜色的呀，这也行？求大神解释！]
+  * 2. 去掉内边距，避免当用户清空表单组时认为出错了。
+  */
+ 
+ legend {
+     border: 0; /* 1 */
+     padding: 0; /* 2 */
+ }
+ 
+ /**
+  * 1. Correct font family not being inherited in all browsers.
+  * 2. Correct font size not being inherited in all browsers.
+  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+  *
+  * 1. 修正所有浏览器中未被继承的字体类型。
+  * 2. 修正所有浏览器中未被继承的字体大小。
+  * 3. 处理 Firefox 4+, Safari 5, 及 Chrome 中默认设置不同的外边距。
+  */
+ 
+ button,
+ input,
+ select,
+ textarea {
+     font-family: inherit; /* 1 */
+     font-size: 100%; /* 2 */
+     margin: 0; /* 3 */
+ }
+ 
+ /**
+  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+  * the UA stylesheet.
+  *
+  * 处理 Firefox 4+ 中的客户端样式表里使用 '!important' 设置的 'line-height'.
+  */
+ 
+ button,
+ input {
+     line-height: normal;
+ }
+ 
+ /**
+  * Address inconsistent `text-transform` inheritance for `button` and `select`.
+  * All other form control elements do not inherit `text-transform` values.
+  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+  * Correct `select` style inheritance in Firefox 4+ and Opera.
+  * 
+  * 处理 'button' 和 'select' 的 'text-transform' 继承的不一致性。
+  * 所有其它表单控件元素不继承 'text-transform' 的值。
+  * 修正 Chrome, Safari 5+, 及 IE 8+ 中 'button' 的继承样式。
+  * 修正 Firefox 4+ 和 Opera 中 'select' 的继承样式。
+  */
+ 
+ button,
+ select {
+     text-transform: none;
+ }
+ 
+ /**
+  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+  *    and `video` controls.
+  * 2. Correct inability to style clickable `input` types in iOS.
+  * 3. Improve usability and consistency of cursor style between image-type
+  *    `input` and others.
+  *
+  * 1. 避免 Android 4.0.* 中 WebKit 的一个bug, 防止 'audio' 与 'video' 的播放控件失效。
+  * 2. 修正 iOS 中不可点击的 'input' 样式。
+  * 3. 改善图片类型的 'input' 等光标样式的可用性与一致性。
+  */
+ 
+ button,
+ html input[type="button"], /* 1 */
+ input[type="reset"],
+ input[type="submit"] {
+     -webkit-appearance: button; /* 2 */
+     cursor: pointer; /* 3 */
+ }
+ 
+ /**
+  * Re-set default cursor for disabled elements.
+  * 
+  * 重置不可用元素的默认光标样式。
+  */
+ 
+ button[disabled],
+ html input[disabled] {
+     cursor: default;
+ }
+ 
+ /**
+  * 1. Address box sizing set to `content-box` in IE 8/9.
+  * 2. Remove excess padding in IE 8/9.
+  *
+  * 1. 处理 IE 8/9 中设置为 'content-box' 的盒子模型。
+  * 2. 删除 IE 8/9 中多余的内边距。
+  */
+ 
+ input[type="checkbox"],
+ input[type="radio"] {
+     box-sizing: border-box; /* 1 */
+     padding: 0; /* 2 */
+ }
+ 
+ /**
+  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+  *    (include `-moz` to future-proof).
+  *
+  * 1. 处理 Safari 5 和 Chrome 中默认设置为 'appearance' 的 'searchfield'.
+  * 2. 处理 Safari 5 和 Chrome 中默认设置为 'box-sizing' 的 'border-box'
+  *    (包括不会过时的 '-moz').
+  */
+ 
+ input[type="search"] {
+     -webkit-appearance: textfield; /* 1 */
+     -moz-box-sizing: content-box;
+     -webkit-box-sizing: content-box; /* 2 */
+     box-sizing: content-box;
+ }
+ 
+ /**
+  * Remove inner padding and search cancel button in Safari 5 and Chrome
+  * on OS X.
+  *
+  * 删除 Safari 5 和 OS X 上的 Chrome 中的输入框上的内边距和搜索取消按钮。
+  */
+ 
+ input[type="search"]::-webkit-search-cancel-button,
+ input[type="search"]::-webkit-search-decoration {
+     -webkit-appearance: none;
+ }
+ 
+ /**
+  * Remove inner padding and border in Firefox 4+.
+  *
+  * 删除 Firefox 4+ button 与 input 上的内边距。
+  */
+ 
+ button::-moz-focus-inner,
+ input::-moz-focus-inner {
+     border: 0;
+     padding: 0;
+ }
+ 
+ /**
+  * 1. Remove default vertical scrollbar in IE 8/9.
+  * 2. Improve readability and alignment in all browsers.
+  *
+  * 1. 删除 IE8/9 中默认的垂直滚动条。
+  * 2. 改善所有浏览器中的可读性并使文本垂直对齐。
+  */
+ 
+ textarea {
+     overflow: auto; /* 1 */
+     vertical-align: top; /* 2 */
+ }
+ 
+ /* ==========================================================================
+    Tables
+ 
+    表格
+    ========================================================================== */
+ 
+ /**
+  * Remove most spacing between table cells.
+  *
+  * 删除表格里单元格间的间距。
+  */
+ 
+ table {
+     border-collapse: collapse;
+     border-spacing: 0;
+ }
+ 

src/styles/sidebar.scss

@@ -1,10 +1,29 @@
 .avue-sidebar {
-    padding-top: 60px;
+    user-select: none; 
+    position: relative;
+    padding-top: 74px;
     height: 100%;
     position: relative;
     background-color: #20222a;
-    transition: width .6s;
+    transition: width .2s;
     box-sizing: border-box;
+    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    &--tip{
+        width:90%;
+        height: 140px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 5px;
+        position: absolute;
+        top:5px;
+        left:5%;
+        color:#ccc;
+        z-index: 2;
+        text-align: center;
+        font-size: 14px;
+        background-color: rgba(0,0,0,.4);
+    }
     .el-menu-item,
     .el-submenu__title {
         font-size: 14px;
@@ -12,8 +31,11 @@
         line-height: 56px;
     }
     .el-menu-item {
+        span,i{
+            color:rgba(255, 255, 255, 0.7);
+        }
         &:hover {
-            background-color: transparent !important;
+            background-color: transparent;
             color: #fff;
             span,
             i {
@@ -21,13 +43,13 @@
             }
         }
         &.is-active {
-            background-color: rgba(0, 0, 0, .8) !important;
+            background-color: rgba(0, 0, 0, .8);
             span,
             i {
                 color: #fff;
             }
             &:hover {
-                background-color: rgba(0, 0, 0, .8) !important;
+                background-color: rgba(0, 0, 0, .8);
             }
             &::before {
                 content: " ";
@@ -41,29 +63,35 @@
         }
     }
     .el-submenu__title {
+        span,i{
+            color:rgba(255, 255, 255, 0.7);
+        }
         &:hover {
             i,
             span {
                 color: #fff;
             }
-            background-color:transparent !important;
+            background-color:transparent ;
         }
     }
     .el-submenu .el-menu-item {
         height: 50px;
         line-height: 50px;
+        span,i{
+            color:rgba(255, 255, 255, 0.7);
+        }
         &.is-active {
-            background-color: rgba(0, 0, 0, .8) !important;
+            background-color: rgba(0, 0, 0, .8);
             span,
             i {
                 color: #fff
             }
             &:hover {
-                background-color: rgba(0, 0, 0, .8) !important;
+                background-color: rgba(0, 0, 0, .8);
             }
         }
         &:hover {
-            background-color: transparent !important;
+            background-color: transparent;
             span,
             i {
                 color: #fff;

src/styles/tags.scss

@@ -1,16 +1,9 @@
-.avue-breadcrumb {
-    &_collapse {
-        line-height: 55px;
-        font-size: 30px !important;
-        &--right {
-            transform: rotate(90deg);
-        }
-    }
-}
+
 
 .avue-tags {
+    user-select: none; 
     position: relative;
-    padding: 5px 10px;
+    padding: 0 10px;
     margin-bottom: 10px;
     box-sizing: border-box;
     overflow: hidden;
@@ -30,16 +23,14 @@
     }
     .el-tabs--card>.el-tabs__header .el-tabs__item {
         margin: 0 3px;
-        height: 30px;
-        line-height: 30px;
+        height: 40px;
+        line-height:40px;
         font-size: 13px;
         font-weight: normal;
-        border: 1px solid #eee;
         color: #ccc;
-        border-radius: 3px;
         &.is-active {
-            border: 1px solid #409EFF;
             color: #409EFF;
+            border-bottom: 3px solid #409EFF;
         }
     }
     .el-tabs__nav-prev,
@@ -49,24 +40,53 @@
         font-size: 18x;
         text-align: center;
     }
-    .tags-box {
+    &__box {
         position: relative;
         box-sizing: border-box;
         padding-right: 106px;
         width: 100%;
+        &--close {
+            .el-tabs__item {
+                &:first-child {
+                    padding: 0 20px !important;
+                    .el-icon-close {
+                        display: none;
+                    }
+                }
+            }
+        }
     }
-    .tags-list {
-        position: absolute;
-        padding: 2px 10px;
-        overflow: visible;
-        white-space: nowrap;
-        transition: left .3s ease;
+    &__contentmenu{
+        position: fixed;
+        width:120px;
+        background-color: #fff;
+        z-index:1024;
+        border-radius: 5px;
+        box-shadow: 1px 2px 10px #ccc;
+        .item{
+            cursor: pointer;
+            font-size: 14px;
+            padding: 8px 20px 8px 15px;
+            color: #606266;
+            &:first-child{
+                border-top-left-radius: 5px;
+                border-top-right-radius: 5px;
+            }
+            &:last-child{
+                border-bottom-left-radius: 5px;
+                border-bottom-right-radius: 5px;
+            }
+            &:hover{
+                background-color: #409EFF;
+                color:#fff;
+            }
+        }
     }
-    .tags-menu {
-        position: absolute;
-        top: 0;
+    &__menu {
+        position: absolute !important;
+        top: 3px;
         right: 0;
-        padding: 1px 15px;
+        padding: 1px 0 0 15px;
         box-sizing: border-box;
     }
 }

src/styles/theme/black.scss

@@ -1,164 +0,0 @@
-.theme-black {
-    .avue-contail {
-        background-color: #002253!important;
-    }
-    .avue-header,
-    .tags-container,
-    .avue-logo {
-        background-color: transparent;
-    }
-    .el-card {
-        opacity: .9;
-    }
-    .top {
-        .el-dropdown {
-            color: #ff929a;
-            i {
-                color: #ff929a;
-            }
-        }
-        .top-item {
-            i {
-                color: #ff929a;
-            }
-        }
-    }
-    .avue-tabs {
-        padding: 0 20px !important;
-    }
-    .avue-sidebar,
-    .logo,
-    .el-menu-item,
-    .el-submenu__title,
-    .el-menu {
-        background-color: transparent !important
-    }
-    .logo_subtitle {
-        color: #ccc !important;
-    }
-    .logo_title,
-    .avue-breadcrumb,
-    {
-        color: #ff929a !important;
-        i {
-            color: #ff929a;
-        }
-    }
-    .el-menu--horizontal>.el-menu-item.is-active {
-        color: #ffb870 !important;
-        border-bottom: none;
-    }
-    .el-color-picker__trigger {
-        border: 1px solid #ff929a !important;
-    }
-    .top {
-        border-bottom: none;
-    }
-    .avue-tags {
-        background-color: transparent;
-        border: none;
-    }
-    .tag-item {
-        color: #ff929a !important;
-        border: 1px solid #ff929a!important;
-        background: hsla(0, 0%, 100%, .05) !important;
-        .tag-item-icon {
-            color: #ff929a !important;
-        }
-        &.is-active {
-            color: #ffb870 !important;
-            border: 1px solid #ffb870 !important;
-            .tag-item-icon {
-                color: #ffb870 !important;
-            }
-        }
-    }
-    .el-menu-item {
-        i,
-        span {
-            color: #ff929a;
-        }
-        &:hover {
-            span,
-            i {
-                color: #ffb870 !important;
-            }
-        }
-        &.is-active {
-            &::before {
-                background: #ffb870;
-            }
-            span,
-            i {
-                color: #ffb870 !important;
-            }
-            background: hsla(0, 0%, 100%, .05) !important;
-            &:hover {
-                color: #ffb870 !important;
-                background: hsla(0, 0%, 100%, .05) !important;
-            }
-        }
-    }
-    .el-submenu__title {
-        i,
-        span {
-            color: #ff929a !important;
-        }
-    }
-    .el-submenu .el-menu-item {
-        &:hover {
-            span,
-            i {
-                color: #ffb870 !important;
-            }
-        }
-        &.is-active {
-            background: hsla(0, 0%, 100%, .05) !important;
-            span,
-            i {
-                color: #ffb870 !important;
-            }
-            &:hover {
-                background: hsla(0, 0%, 100%, .05) !important;
-            }
-        }
-    }
-    .el-tabs--card>.el-tabs__header .el-tabs__item {
-        color: #ff929a;
-        border: 1px solid #ff929a;
-        &.is-active {
-            border: 1px solid #ffb870;
-            color: #ffb870;
-        }
-    }
-    .tags-container {
-        border-color: #ff929a;
-    }
-    .top-search {
-        input::-webkit-input-placeholder,
-        textarea::-webkit-input-placeholder {
-            /* WebKit browsers */
-            color: #ff929a;
-        }
-        input:-moz-placeholder,
-        textarea:-moz-placeholder {
-            /* Mozilla Firefox 4 to 18 */
-            color: #ff929a;
-        }
-        input::-moz-placeholder,
-        textarea::-moz-placeholder {
-            /* Mozilla Firefox 19+ */
-            color: #ff929a;
-        }
-        input:-ms-input-placeholder,
-        textarea:-ms-input-placeholder {
-            /* Internet Explorer 10+ */
-            color: #ff929a;
-        }
-    }
-    .top-bar__item {
-        i {
-            color: #ff929a;
-        }
-    }
-}

src/styles/theme/gradual.scss

@@ -1,131 +0,0 @@
-.theme-gradual {
-    .avue-contail {
-        background: linear-gradient(120deg, #bc00e3, #4efffb) !important;
-    }
-    .avue-header,
-    .tags-container,
-    .avue-logo {
-        background-color: transparent;
-    }
-    .el-card {
-        opacity: .9;
-    }
-    .top {
-        .el-dropdown {
-            color: #fff;
-            i {
-                color: #fff;
-            }
-        }
-        .top-item {
-            i {
-                color: #fff;
-            }
-        }
-    }
-    .avue-tabs {
-        padding: 0 20px !important;
-    }
-    .avue-sidebar,
-    .logo,
-    .el-menu-item,
-    .el-submenu__title,
-    .el-menu {
-        background-color: transparent !important
-    }
-    .logo_subtitle {
-        color: #ccc !important;
-    }
-    .logo_title,
-    .avue-breadcrumb,
-    {
-        color: #fff !important;
-        i {
-            color: #fff;
-        }
-    }
-    .el-menu--horizontal>.el-menu-item.is-active {
-        border-bottom: none;
-    }
-    .top {
-        border-bottom: none;
-    }
-    .avue-tags {
-        background-color: transparent;
-        border: none;
-    }
-    .tag-item {
-        color: #fff !important;
-        border: none !important;
-        background-color: rgba(255, 255, 255, .5) !important;
-        &.is-active {
-            color: #fff !important;
-            border: 1px solid #fff !important;
-            background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
-            .tag-item-icon {
-                color: #fff !important;
-            }
-        }
-    }
-    .el-menu-item {
-        i,
-        span {
-            color: #fff;
-        }
-        &:hover {
-            span,
-            i {
-                color: #fff !important;
-            }
-        }
-        &.is-active {
-            &::before {
-                background: #fff;
-            }
-            span,
-            i {
-                color: #fff !important;
-            }
-            background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
-            &:hover {
-                color: #fff !important;
-                background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
-            }
-        }
-    }
-    .el-submenu__title {
-        i,
-        span {
-            color: #fff !important;
-        }
-    }
-    .el-submenu .el-menu-item {
-        &:hover {
-            span,
-            i {
-                color: #fff !important;
-            }
-        }
-        &.is-active {
-            background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
-            span,
-            i {
-                color: #fff !important;
-            }
-            &:hover {
-                background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
-            }
-        }
-    }
-    .top-bar__item {
-        i {
-            color: #fff;
-        }
-    }
-    .el-tabs--card>.el-tabs__header .el-tabs__item {
-        &.is-active {
-            border: 1px solid #fff;
-            color: #fff;
-        }
-    }
-}

src/styles/theme/index.scss

@@ -1,8 +1,5 @@
+// 白色主题
+@import './white.scss';
+
 // 炫酷主题
 @import './star.scss';
-//渐变主题
-@import './gradual.scss';
-//简洁
-@import './volcano.scss';
-//紫色
-@import './black.scss';

src/styles/theme/star.scss

@@ -25,19 +25,19 @@
         }
     }
     .avue-tabs {
-        padding: 0 20px !important;
+        padding: 0 20px ;
     }
     .avue-sidebar,
     .logo,
     .el-menu-item,
     .el-submenu__title,
     .el-menu {
-        background-color: transparent !important
+        background-color: transparent 
     }
     .logo_title,
     .avue-breadcrumb,
     {
-        color: #fff !important;
+        color: #fff ;
         i {
             color: #fff;
         }
@@ -53,58 +53,58 @@
         border: none;
     }
     .tag-item {
-        color: #fff !important;
-        border: none !important;
+        color: #fff ;
+        border: none ;
         background-color: rgba(255, 255, 255, .5);
         &.is-active {
-            color: #fff !important;
-            border: 1px solid #fff !important;
+            color: #fff ;
+            border: 1px solid #fff ;
             background-color: rgba(0, 0, 0, .4);
             .tag-item-icon {
-                color: #fff !important;
+                color: #fff ;
             }
         }
     }
     .el-menu-item {
         i,
         span {
-            color: #fff !important;
+            color: #fff ;
         }
         &:hover {
             i,
             span {
-                color: #409eff !important;
+                color: #409eff ;
             }
         }
         &.is-active {
-            background-color: rgba(0, 0, 0, .4) !important;
+            background-color: rgba(0, 0, 0, .4) ;
             &:hover {
-                background-color: rgba(0, 0, 0, .4) !important;
+                background-color: rgba(0, 0, 0, .4) ;
             }
         }
     }
     .el-submenu__title {
         i,
         span {
-            color: #fff !important;
+            color: #fff ;
         }
         &:hover {
             i,
             span {
-                color: #409eff !important;
+                color: #409eff ;
             }
-            background-color:transparent !important;
+            background-color:transparent ;
         }
     }
     .el-submenu .el-menu-item {
         &.is-active {
-            background-color: rgba(0, 0, 0, .4) !important;
+            background-color: rgba(0, 0, 0, .4) ;
             span,
             i {
-                color: $mainBg !important;
+                color: $mainBg ;
             }
             &:hover {
-                background-color: rgba(0, 0, 0, .4) !important;
+                background-color: rgba(0, 0, 0, .4) ;
             }
         }
     }

src/styles/theme/volcano.scss

@@ -1,18 +1,12 @@
-.theme-volcano {
+.theme-white {
   .avue-header,
   .avue-logo,
   .tags-container {
-      background-color: #1b82f1!important;
+      background-color: #409EFF;
   }
   .avue-sidebar--tip{
     background-color:transparent;
-    color: #fa5c25 !important;
-  }
-  .avue-header,
-  .avue-logo,
-  .avue-tags,
-  .avue-contail {
-    background-color:transparent;
+    color:#333;
   }
   .el-dropdown{
     color:#fff;
@@ -22,41 +16,38 @@
     color:#fff;
   }
   .logo_title,
-  .avue-breadcrumb
+  .avue-breadcrumb,
   {
-      color: #fff !important;
+      color: #fff ;
       i {
           color: #fff;
       }
   }
-  .top {
-    border-bottom: none;
-  }
   .avue-top{
     .el-menu-item {
       i,
       span {
-          color: #fff !important;
+          color: #fff ;
       }
       &:hover {
           i,
           span {
-              color: #fff !important;
+              color: #fff ;
           }
       }
     }
   }
   .el-menu--popup{
-    background-color: #fff !important;
+    background-color: #fff ;
     .el-menu-item{
-      background-color: #fff !important;
+      background-color: #fff ;
       span,i {
-        color:#666 !important;
+        color:#666 ;
       }
       &.is-active{
-        background-color: #fa5c23 !important;
+        background-color:#409EFF ;
         span,i {
-          color:#fff !important;
+          color:#fff ;
         }
       }
     }
@@ -64,44 +55,35 @@
   .avue-sidebar{
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
     .el-menu{
-      background-color: #fff !important;
+      background-color: #fff ;
     }
-    background-color:#fff !important;
+    background-color:#fff ;
     .el-menu-item,.el-submenu__title{
       i,span{
-        color:#666 !important;
-      }
-      background-color:#fff !important;
-      &.is-active {
-        background-color: #1b82f1  !important;
-        span,
-        i {
-          color: #fff
-        }
-        &:hover {
-          background-color: #1b82f1  !important;
-        }
+        color:#666 ;
       }
+      background-color:#fff ;
     }
     .el-menu-item,.el-submenu__title{
       &:hover{
-        background-color: transparent !important;
+        background-color: transparent ;
         i,span{
-          color:#666 !important;
+          color:#666 ;
         }
       }
     }
     .el-menu-item.is-active,.el-submenu__title.is-active{
-      background-color: #1b82f1 !important;
+      background-color:#409EFF ;
       i,span{
-        color:#fff !important;
+        color:#fff ;
       }
       &::before{
         display: none;
       }
       &:hover{
+        background-color: #409EFF ;
         i,span{
-          color:#fff !important;
+          color:#fff ;
         }
       }
     }
@@ -136,4 +118,4 @@
           color: #fff;
       }
   }
-}
+}

src/styles/top.scss

@@ -1,31 +1,44 @@
 .avue-top {
+    padding: 0 20px;
     position: relative;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
     color: rgba(0, 0, 0, .65);
-    font-size: 18px;
-    padding: 0 10px;
+    font-size: 28px;
+    height: 64px;
     box-sizing: border-box;
     white-space: nowrap;
+    .el-menu-item{
+        i,span{
+            font-size: 13px;
+        }
+    }
+}
+.avue-breadcrumb {
+    height: 100%;
+    i{
+        font-size: 30px !important;
+    }
+    &--active {
+        transform:rotate(90deg);
+    }
 }
 
 .top-menu {
     box-sizing: border-box;
     .el-menu-item {
-        padding: 0 15px;
-        height: 50px !important;
-        line-height: 50px !important;
-    }
-    .el-menu--horizontal>.el-menu-item.is-active {
-        border: 0;
+        padding: 0 10px;
+        border:none !important;
     }
 }
 
 .top-search {
+    line-height: 64px;
     position: absolute !important;
-    top: 10px;
     left: 20px;
+    top:0;
     width: 400px !important;
     .el-input__inner {
+        font-size: 13px;
         border: none;
         background-color: transparent;
     }
@@ -44,21 +57,42 @@
 
 .top-bar__left,
 .top-bar__right {
+    height: 64px;
     position: absolute;
     top: 0;
+    i{
+        line-height: 64px;
+    }
 }
 
 .top-bar__left {
-    left: 0;
+    left: 20px;
 }
 
 .top-bar__right {
-    padding: 8px 10px;
-    right: 0;
+    right: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.top-bar__item {
+    position: relative;
+    display: inline-block;
+    height: 64px;
+    margin:0 10px;
+    font-size: 16px;
+    &--show {
+        display: inline-block !important;
+    }
+    .el-badge__content.is-fixed{
+        top:12px;
+        right: 5px;
+    }
 }
 
 .top-bar__title {
-    padding-left: 40px;
+    height: 100%;
+    padding:0 40px;
     box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -66,13 +100,3 @@
     font-size: inherit;
     font-weight: 400;
 }
-
-.top-bar__item {
-    position: relative;
-    display: inline-block;
-    margin-right: 15px;
-    height: 50px;
-    &--show {
-        display: inline-block !important;
-    }
-}