feat : update avue 1.3.0

src/page/index/index.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="pull-height animated" :class="{'zoomOutUp': isLock}">
-    <top></top>
     <div class="index">
-      <sidebar class="left pull-chheight"></sidebar>
+      <sidebar class="left"></sidebar>
       <div class="right">
-        <tags ref="nav" class="nav"></tags>
+        <div class="nav">
-        <keep-alive>
+          <top class="top"></top>
-            <router-view v-if="!$route.meta.keepAlive" class="main pull-chheight"></router-view>
+          <tags></tags>
-        </keep-alive>
+        </div>
-        <router-view v-if="$route.meta.keepAlive" class="main pull-chheight"></router-view>
+        <div class="main">
+          <keep-alive>
+            <router-view v-if="$route.meta.keepAlive"></router-view>
+          </keep-alive>
+          <router-view v-if="!$route.meta.keepAlive"></router-view>
+        </div>
       </div>
     </div>
   </div>
@@ -40,23 +44,21 @@ export default {
 <style lang="scss" scoped>
 .index {
   display: flex;
-  height: calc(100% - 60px);
-  padding: 0 0 20px 0;
   position: relative;
-  min-height: 100%;
+  height: 100%;
   background: #fff;
   overflow: hidden;
-  .left:not(.el-menu--collapse) {
+  .left {
-    width: 200px;
+    width: 230px;
     overflow-y: auto;
   }
   .right {
-    padding-top: 42px;
+    padding-top: 107px;
     position: relative;
     flex: 1;
-    box-sizing: border-box;
   }
   .main {
+    height: 100%;
     overflow-y: scroll;
   }
   .nav {
@@ -66,5 +68,8 @@ export default {
     width: 100%;
     z-index: 999;
   }
+  .top {
+    margin-bottom: 2px;
+  }
 }
 </style>

src/page/index/sidebar/index.vue

@@ -1,16 +1,21 @@
 <template>
-  <el-menu unique-opened :default-active="nowTagValue" class="el-menu-vertical-demo" background-color="#495060" text-color="#c9cbd0" active-text-color="#fff" :collapse="isCollapse">
+  <div class="sidebar-container" :class="{'is-active':isCollapse}">
-    <sidebar-item :menu="menu" :show="!isCollapse"></sidebar-item>
+    <logo :isCollapse="isCollapse"></logo>
-  </el-menu>
+    <el-menu unique-opened :default-active="nowTagValue" class="el-menu-vertical-demo" mode="vertical" :show-timeout="200" background-color="#00142a" text-color="hsla(0,0%,100%,.65)" active-text-color="#409eff" :collapse="isCollapse">
+      <sidebar-item :menu="menu" :isCollapse="isCollapse"></sidebar-item>
+    </el-menu>
+  </div>
 </template>
 
 <script>
 import MENU from "@/mock/menu";
-import { mapGetters } from "vuex";
 import { setUrlPath } from "@/util/util";
+import { mapGetters } from "vuex";
 import SidebarItem from "./sidebarItem";
-
+import logo from "./logo";
 export default {
+  name: "sidebar",
+  components: { SidebarItem, logo },
   data() {
     return {};
   },
@@ -24,8 +29,7 @@ export default {
     }
   },
   mounted() {},
-  methods: {},
+  methods: {}
-  components: { SidebarItem }
 };
 </script>
 <style lang="scss" scoped>

src/page/index/sidebar/logo.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="logo">
+    <transition name="fade">
+      <span v-if="isCollapse" class="logo_title  is-bold is-active" key="0">Pig</span>
+    </transition>
+    <transition-group name="fade">
+      <template v-if="!isCollapse">
+        <span class="logo_title is-bold" key="1">Pig </span>
+        <span class="logo_subtitle" key="2">微服务快速开发框架</span>
+      </template>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "logo",
+  data() {
+    return {};
+  },
+  props: ["isCollapse"],
+  computed: {},
+  created() {},
+  computed: {},
+  methods: {}
+};
+</script>
+
+<style scoped="scoped" lang="scss">
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter-active {
+  transition: opacity 2.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.logo {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 230px;
+  height: 64px;
+  line-height: 64px;
+  background: #002140;
+  color: #fdfdfd;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.logo_title {
+  padding: 0 5px 0 0;
+  color: #409eff;
+  font-size: 28px;
+  &.is-bold {
+    font-weight: 700;
+  }
+}
+.is-active {
+  position: absolute;
+  top: 0;
+  left: 10px;
+}
+.logo_subtitle {
+  font-size: 16px;
+  padding-top: 5px;
+}
+</style>

src/page/index/sidebar/sidebarItem.vue

@@ -5,17 +5,17 @@
         <i :class="item.icon"></i>
         <span slot="title">{{item.label}}</span>
       </el-menu-item>
-      <el-submenu v-else :index="filterPath(item.name,index)" :key="item.name">
+      <el-submenu v-else :index="filterPath(item.label,index)" :key="item.label">
         <template slot="title">
           <i :class="item.icon"></i>
-          <span slot="title" :class="{'el-menu--display':!show}">{{item.label}}</span>
+          <span slot="title" :class="{'el-menu--display':isCollapse}">{{item.label}}</span>
         </template>
         <template v-for="(child,cindex) in item.children">
           <el-menu-item :index="filterPath(child.path,cindex)" @click="open(child)" v-if="child.children.length==0" :key="cindex">
             <i :class="child.icon"></i>
             <span slot="title">{{child.label}}</span>
           </el-menu-item>
-          <sidebar-item v-else :menu="[child]" :show="show" :key="cindex"></sidebar-item>
+          <sidebar-item v-else :menu="[child]" :key="cindex" :isCollapse="isCollapse"></sidebar-item>
         </template>
       </el-submenu>
     </template>
@@ -32,19 +32,20 @@ export default {
     menu: {
       type: Array
     },
-    show: {
+    isCollapse: {
       type: Boolean
     }
   },
   created() {},
   mounted() {},
+  computed: {},
   methods: {
     filterPath(path, index) {
       return path == null ? index + "" : path;
     },
     open(item) {
       this.$router.push({
-        path: resolveUrlPath(item.path, item.name),
+        path: resolveUrlPath(item.path, item.label),
         query: item.query
       });
     }

src/page/index/tags.vue

@@ -3,8 +3,8 @@
     <!-- tag盒子 -->
     <div class="tags-box" ref="tagBox">
       <div class="tags-list" ref="tagsList" @mousewheel="hadelMousewheel" @mouseup="hadelMouseUp" @mousemove="hadelMouse" @mousedown="hadelMousestart" @touchup="hadelMouseUp" @touchmove="hadelMouse" @touchstart="hadelMousestart">
-        <div ref="tagsPageOpened" class="tag-item" :name="item.value" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item)">
+        <div ref="tagsPageOpened" class="tag-item" :class="{'is-active':nowTagValue==item.value}" :name="item.value" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item)">
-          <span class="icon-yuan tag-item-icon" :class="{'is-active':nowTagValue==item.value}"></span>
+          <span class="icon-yuan tag-item-icon"></span>
           <span class="tag-text">{{item.label}}</span>
           <i class="el-icon-close tag-close" @click.stop="closeTag(item)" v-if="item.close"></i>
         </div>

src/page/index/top/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="top">
     <div class="top-button is-left">
-      <top-logo></top-logo>
       <div class="tags-breadcrumb">
         <i class="icon-navicon tag-collapse" :class="[{ 'tag-collapse_right': isCollapse }]" @click="showCollapse"></i>
       </div>
@@ -10,7 +9,7 @@
       <topMenu></topMenu>
     </h1>
     <div class="top-button is-right">
-      <el-tooltip class="item" effect="dark" content="换肤" placement="bottom">
+      <el-tooltip class="item" effect="dark" content="主题色" placement="bottom">
         <span class="top-item">
           <top-theme></top-theme>
         </span>
@@ -25,6 +24,9 @@
           <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
         </span>
       </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
+        <img class="top-userImg" :src="userInfo.avatar">
+      </el-tooltip>
       <el-dropdown>
         <span class="el-dropdown-link">
           {{userInfo.username}}
@@ -46,21 +48,17 @@
           <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
-        <img class="top-userImg" :src="userInfo.avatar">
-      </el-tooltip>
     </div>
   </div>
 </template>
 <script>
 import { mapState, mapGetters } from "vuex";
 import { fullscreenToggel, listenfullscreen } from "@/util/util";
-import topLogo from "./top-logo";
 import topLock from "./top-lock";
 import topMenu from "./top-menu";
 import topTheme from "./top-theme";
 export default {
-  components: { topLock, topLogo, topMenu, topTheme },
+  components: { topLock, topMenu, topTheme },
   name: "top",
   data() {
     return {};

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

@@ -1,40 +0,0 @@
-<template>
-  <div class="pull-auto">
-    <div class="logo">
-      <span class="logo_title is-bold">Pig </span>
-      <span class="logo_subtitle"> 微服务快速开发框架</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "top-logo",
-  data() {
-    return {};
-  },
-  created() {},
-  computed: {},
-  methods: {}
-};
-</script>
-
-<style scoped="scoped" lang="scss">
-.logo {
-  display: flex;
-  align-items: center;
-}
-.logo_title {
-  padding: 0 8px 0 0;
-  color: #409eff;
-  line-height: 60px;
-  font-size: 28px;
-  font-style: italic;
-  &.is-bold {
-    font-weight: 700;
-  }
-}
-.logo_subtitle {
-  padding-top: 5px;
-}
-</style>

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

@@ -16,9 +16,9 @@ export default {
   watch: {
     theme(val, oldVal) {
       if (typeof val !== "string") return;
+      const head = document.getElementsByTagName("head")[0];
       const themeCluster = this.getThemeCluster(val.replace("#", ""));
       const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
-      console.log(themeCluster, originalCluster);
       const getHandler = (variable, id) => {
         return () => {
           const originalCluster = this.getThemeCluster(
@@ -34,7 +34,7 @@ export default {
           if (!styleTag) {
             styleTag = document.createElement("style");
             styleTag.setAttribute("id", id);
-            document.head.appendChild(styleTag);
+            head.appendChild(styleTag);
           }
           styleTag.innerText = newStyle;
         };
@@ -49,6 +49,30 @@ export default {
         chalkHandler();
       }
 
+      const link = [].slice.call(
+        document.getElementsByTagName("head")[0].getElementsByTagName("link")
+      );
+      for (let i = link.length - 3; i < link.length; i++) {
+        const style = link[i];
+        this.getCSSString(style.href, innerText => {
+          const originalCluster = this.getThemeCluster(
+            ORIGINAL_THEME.replace("#", "")
+          );
+          const newStyle = this.updateStyle(
+            innerText,
+            originalCluster,
+            themeCluster
+          );
+          let styleTag = document.getElementById(i);
+          if (!styleTag) {
+            styleTag = document.createElement("style");
+            styleTag.id = i;
+            styleTag.innerText = newStyle;
+            head.appendChild(styleTag);
+          }
+        });
+      }
+
       const styles = [].slice
         .call(document.querySelectorAll("style"))
         .filter(style => {
@@ -86,8 +110,10 @@ export default {
       const xhr = new XMLHttpRequest();
       xhr.onreadystatechange = () => {
         if (xhr.readyState === 4 && xhr.status === 200) {
-          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
+          if (variable) {
-          callback();
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
+          }
+          callback(xhr.responseText);
         }
       };
       xhr.open("GET", url);

src/styles/common.scss

@@ -15,9 +15,22 @@
 	user-select: none;
 	outline: none;
 }*/
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+
-    font-weight: 500;
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
 }
+
 @include scrollBar();
 body,
 div,
@@ -41,67 +54,65 @@ p,
 blockquote,
 th,
 td {
-	margin: 0;
+  margin: 0;
-	padding: 0;
+  padding: 0;
 }
 
 body {
-	min-width: 1200px;
+  min-width: 1300px;
-	color: #333;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei";
-  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei";
+  line-height: 2;
-	line-height: 2;
 }
 
 html,
 body {
-	height: 100%;
+  height: 100%;
 }
 
 fieldset,
 img {
-	border: 0;
+  border: 0;
 }
 
 ol,
 ul {
-	list-style: none;
+  list-style: none;
 }
 
-
 em {
-	font-style: normal;
+  font-style: normal;
 }
 
 input,
 button,
 select,
 textarea {
-	outline: none;
+  outline: none;
 }
 
 textarea {
-	resize: none;
+  resize: none;
 }
+
 //禁用了文本的拖拉，尤其在谷歌下
 p {
-	text-align: justify;
+  text-align: justify;
-	text-justify: distribute;
+  text-justify: distribute;
 }
+
 //为了使文本段落左右两边对齐
 p {
-	word-wrap: break-word
+  word-wrap: break-word
 }
 
 a {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 i {
-	display: inline-block;
+  display: inline-block;
 }
 
-
-
 /*a:hover { color: #f60; text-decoration:none; }*/
 
 address,
@@ -109,105 +120,108 @@ cite,
 code,
 em,
 th {
-	font-weight: normal;
+  font-weight: normal;
-	font-style: normal;
+  font-style: normal;
 }
 
 a {
-	color: inherit;
+  color: inherit;
-	text-decoration: none;
+  text-decoration: none;
-	display: inline-block;
+  display: inline-block;
 }
 
-
 /*a:link{color:#009;}*/
 
-
 /*a:visited{color:#800080;}*/
 
 a:hover,
 a:active,
 a:focus {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
 table {
-	border-collapse: collapse;
+  border-collapse: collapse;
-	border-spacing: 0;
+  border-spacing: 0;
-}
-.hidden{
-	display: none;
-}
-.padding{
-	padding: 0 !important;
 }
 
-.margin{
+.hidden {
-	margin: 0 !important;
+  display: none;
+}
+
+.padding {
+  padding: 0 !important;
+}
+
+.margin {
+  margin: 0 !important;
 }
 
 .pull-right {
-	float: right!important;;
+  float: right !important;
+  ;
 }
 
 .pull-left {
-	float: left!important;
+  float: left !important;
-}
-.pull-center {
-	text-align: center;
-}
-.pull-flex{
-	display: flex;
 }
 
-.pull-overflow{
+.pull-center {
-	overflow: hidden;
+  text-align: center;
 }
-.pull-auto{
+
-	height: auto;
+.pull-flex {
-	overflow: hidden;
+  display: flex;
 }
-.pull-height{
+
-	height: 100%;
+.pull-overflow {
+  overflow: hidden;
 }
-.pull-chheight{
+
-	height: calc( 100% - 60px );
+.pull-auto {
+  height: auto;
+  overflow: hidden;
 }
-.pull-fixed{
+
+.pull-height {
+  height: 100%;
+  overflow: hidden;
+}
+
+.pull-fixed {
   position: fixed;
   left: 0;
   top: 0;
 }
 
-.text-white{
+.text-white {
-	color: #fff;
+  color: #fff;
 }
+
 .clearfix {
-	&:after {
+  &:after {
-	  visibility: hidden;
+    visibility: hidden;
-	  display: block;
+    display: block;
-	  font-size: 0;
+    font-size: 0;
-	  content: " ";
+    content: " ";
-	  clear: both;
+    clear: both;
-	  height: 0;
+    height: 0;
-	}
   }
+} //main-container全局样式
+.app-main {
+  min-height: 100%
+}
 
-  //main-container全局样式
+.filter-container {
-  .app-main{
+  padding-bottom: 10px;
-	min-height: 100%
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
   }
+}
 
-  .filter-container {
+.app-container {
-	padding-bottom: 10px;
+  padding: 20px;
-	.filter-item {
+  box-sizing: border-box;
-	  display: inline-block;
+}
-	  vertical-align: middle;
-	  margin-bottom: 10px;
-	}
-  }
-  
-  .app-container {
-	padding: 20px;
-	box-sizing: border-box;
-  }

src/styles/element-ui.scss

@@ -1,14 +1,17 @@
-
+.el-dropdown-menu__item {
-.el-dropdown-menu__item{
+  font-size: 12px;
-    font-size: 12px;
+  line-height: 28px;
-    line-height: 28px;
-}
-.el-loading-text{
-    text-align: center;
 }
 
+.el-menu--horizontal {
+  border-bottom: none;
+}
+
+.el-menu {
+  border-right: 0;
+}
 
 .el-menu--display,
-.el-menu--display + .el-submenu__icon-arrow {
+.el-menu--display+.el-submenu__icon-arrow {
-display: none;
+  display: none;
 }

src/styles/sidebar.scss

@@ -1,73 +1,19 @@
+.sidebar-container {
+  background: #00142a;
+  transition: width .6s;
+  &.is-active {
+    width: 64px !important;
+  }
+}
 
-    .hideSidebar {
+.el-menu-item.is-active {
-        .sidebar-container,.sidebar-container .el-menu {
+  color: $mainBg !important;
-          width: 36px!important;
+}
-          // overflow: inherit;
-        }
-        .main-container {
-          margin-left: 36px;
-        }
-      }
-      .hideSidebar {
-        .submenu-title-noDropdown {
-          padding-left: 10px!important;
-          position: relative;
-          span {
-            height: 0;
-            width: 0;
-            overflow: hidden;
-            visibility: hidden;
-            transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
-            opacity: 0;
-            display: inline-block;
-          }
-          &:hover {
-            span {
-              display: block;
-              border-radius: 3px;
-              z-index: 1002;
-              width: 140px;
-              height: 56px;
-              visibility: visible;
-              position: absolute;
-              right: -145px;
-              text-align: left;
-              text-indent: 20px;
-              top: 0px;
-              background-color: $subMenuBg!important;
-              opacity: 1;
-            }
-          }
-        }
-        .el-submenu {
-          &>.el-submenu__title {
-            padding-left: 10px!important;
-            &>span {
-              display: none;
-            }
-            .el-submenu__icon-arrow {
-              display: none;
-            }
-          }
-          .nest-menu {
-            .el-submenu__icon-arrow {
-              display: block!important;
-            }
-            span {
-              display: inline-block!important;
-            }
-          }
-        }
-      }
-      .nest-menu .el-submenu>.el-submenu__title,
-      .el-submenu .el-menu-item {
-        min-width: 180px!important;
-        background-color: $subMenuBg!important;
-        &:hover {
-          background-color: $menuHover!important;
-        }
-      }
-      .el-menu--collapse .el-menu .el-submenu{
-        min-width: 180px!important;
-      }
 
+.nest-menu .el-submenu>.el-submenu__title,
+.el-submenu .el-menu-item {
+  background-color: #021d3a !important;
+  &:hover {
+    background: #00142a !important;
+  }
+}

src/styles/tags.scss

@@ -1,90 +1,96 @@
-
+.tags-breadcrumb {
-.tags-breadcrumb{
   display: flex;
   align-items: center;
   padding: 0 16px;
   height: 50px;
 }
-.tags-breadcrumb-list{
+
+.tags-breadcrumb-list {
   padding: 0 15px;
 }
-.tag-collapse{
+
+.tag-collapse {
   font-size: 36px !important;
 }
+
 .tag-collapse.tag-collapse_right {
   transform: rotate(90deg);
 }
+
 .tags-container {
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
-  .tags-box{
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+  .tags-box {
     position: relative;
     box-sizing: border-box;
     padding-right: 106px;
     width: 100%;
     height: 40px;
-    background: #f0f0f0;
+    background: #fff;
-    
   }
-  .tags-list{
+  .tags-list {
     position: absolute;
     padding: 2px 10px;
     overflow: visible;
     white-space: nowrap;
     transition: left .3s ease;
   }
-  .tag-item-icon{
+  .tag-item-icon {
     color: #eee;
     font-size: 11px !important;
   }
-  .tag-item-icon.is-active{
-    color: $mainBg;
-  }
   .tag-item {
-      position: relative;
+    position: relative;
-      display: inline-block;
+    display: inline-block;
-      height: 30px;
+    height: 30px;
-      line-height: 30px;
+    line-height: 30px;
-      margin: 2px 4px 2px 0;
+    margin: 2px 4px 2px 0;
-      padding: 0 10px;
+    padding: 0 10px;
-      border: 1px solid #e9eaec;
+    border: 1px solid #eee;
-      border-radius: 3px;
+    border-radius: 3px;
-      background: #fff;
+    background: #fff;
-      color: #495060!important;
+    color: #495060 !important;
-      font-size: 12px;
+    font-size: 12px;
-      vertical-align: middle;
+    vertical-align: middle;
-      opacity: 1;
+    opacity: 1;
-      overflow: hidden;
+    overflow: hidden;
-      cursor: pointer;
+    cursor: pointer;
+    &.is-active {
+      .tag-item-icon {
+        color: $mainBg;
+      }
+      border-color : $mainBg;
+    }
   }
-  .tag-text{
+  .tag-text {
     margin-left: 8px;
   }
-  .tag-close{
+  .tag-close {
     margin-left: 8px;
   }
   .tag-item:hover {
     opacity: .85;
   }
-  .tags-menu{
+  .tags-menu {
-   position: absolute;
+    position: absolute;
-   top:0;
+    top: 0;
-   right: 0;
+    right: 0;
-   display: flex;
+    display: flex;
-   align-items: center;
+    align-items: center;
-   padding: 0 15px;
+    padding: 0 15px;
-   height: 96%;
+    height: 96%;
-   box-sizing: border-box;
+    box-sizing: border-box;
-   background-color: #fff;
+    background-color: #fff;
-   box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
   }
 }
+
 .contextmenu {
   margin: 0;
   background: #fff;
-  z-index: 2;
+  top: 64px;
-  position: fixed;
   list-style-type: none;
   padding: 5px 0;
   border-radius: 4px;

src/styles/top.scss

@@ -1,11 +1,11 @@
 .top {
   align-items: center;
   background-color: #fff;
-  border-bottom:2px solid $menuBg;
+  border-bottom: 1px solid #eee;
-  color: #333;
+  color: rgba(0, 0, 0, .65);
   display: flex;
   font-size: 18px;
-  height: 60px;
+  height: 64px;
   line-height: 1;
   padding: 0 10px;
   white-space: nowrap;
@@ -20,19 +20,21 @@
   flex: 1;
 }
 
-.top-userImg{
+.top-userImg {
-  margin: 0 3px 0 10px;
+  margin: 0 8px 0 10px;
   padding: 2px;
-  width: 35px;
+  width: 30px;
-  height:35px;
+  height: 30px;
   border-radius: 100%;
   box-sizing: border-box;
-  border:1px solid #eee;
+  border: 1px solid #eee;
 }
+
 .top-button {
   display: flex;
   align-items: center;
 }
-.top-button>.top-item{
+
-  margin-right: 12px;
+.top-item {
+  margin-right: 8px;
 }

src/styles/variables.scss

@@ -1,11 +1,2 @@
-//sidebar
-$menuBg:#495060;
-$subMenuBg:#1f2d3d;
-$menuHover:#001528;
-
-
 //main
-$mainBg: #4e97d9;
+$mainBg: #409eff;
-$mainColor: #fff;
-$mainDisBg: #d3d4d6;
-$mainDisColor: #eee;