优化

src/components/menu.vue

@@ -4,13 +4,11 @@
       <div class="con-box clr">
         <div class="logo fl">云芯系统</div>
         <div class="tab-box fl" ref="scrollbox">
-          <div class="item-boxs" ref="scrollboxinner" :style="'width:'+(tabs.length*95+48)+'px'">
-            <a class="item fl first" href="/#/" :class="{'act':$route.path=='/','scrollsg':rpcg}">
+          <div class="item-boxs row verCenter" ref="scrollboxinner">
+            <a class="item first row rowCenter verCenter" href="/#/" :class="{'act':$route.path=='/','scrollsg':rpcg}">
               <font class="fl">概况</font>
             </a>
-            <a class="item fl"
-               :class="{'scrollsg':rpcg,'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}"
-               @click="tabUrl(item)" v-for="item in tabs">
+            <a class="item row rowCenter verCenter" :class="{'scrollsg':rpcg,'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}" @click="tabUrl(item)" v-for="item in tabs">
               <font class="fl">{{ item.title }}</font>
               <span class="icon iconfont fl" @click.stop="closetab(item.path)"></span>
             </a>
@@ -25,8 +23,7 @@
           <a href="/云芯操作手册.pdf" class="fl" target="_blank" title="操作手册"><span class="icon iconfont iconwendangguanli fl"></span></a>
           <div class="line"></div>
           <div class="login-v fl">
-            <img class="fl" :src="userinfo.avatar||'https://www.ichunt.com/v3/dist/res/home/images/headimg/boy1.png'"
-                 alt="">
+            <img class="fl" :src="userinfo.avatar||'https://www.ichunt.com/v3/dist/res/home/images/headimg/boy1.png'" alt="">
             <div class="fl namex">{{ userinfo.contacts_name || '猎芯网用户' }}</div>
             <div class="fl lo-box-drop">
               <span class="icon iconfont"></span>
@@ -179,7 +176,7 @@
 <script>
 import Vue from 'vue';
 import Util from "../tool";
-import {Form, FormItem, Input, Menu, MenuItem, Submenu, MenuItemGroup, Message, Dialog, Button, Tooltip} from 'element-ui'
+import {Button, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, Submenu, Tooltip} from 'element-ui'
 
 Vue.prototype.$message = Message;
 Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input);
@@ -472,21 +469,6 @@ export default {
       position: relative;
       width: calc(100vw - 584px);
 
-      &::-webkit-scrollbar {
-        height: 5px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background: #fff;
-        -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
-      }
-
-      &::-webkit-scrollbar-track {
-        border-radius: 0;
-        background: rgba(0, 0, 0, 0);
-      }
-
       .item-boxs {
         position: absolute;
         left: 0px;
@@ -494,34 +476,38 @@ export default {
 
       .item {
         color: #646B78;
-        font-size: 14px;
-        margin-left: 20px;
+        font-size: 13px;
         height: 40px;
         line-height: 40px;
         cursor: pointer;
+        transition: all 0.4s ease;
+        padding: 0 17px;
 
         &.act {
+          background-color: #F1F4FA;
           position: relative;
 
           font {
-            color: #333;
+            color: #1969f9;
           }
 
           &::after {
             content: "";
             position: absolute;
-            bottom: -8px;
-            width: 32px;
-            height: 5px;
+            top: 0;
+            width: 100%;
+            height: 2px;
             background: #1969F9;
-            left: 50%;
-            margin-left: -22px;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            text-align: center;
           }
 
           &.first {
+            background-color: transparent;
             &::after {
-
-              margin-left: -15px;
+              display: none;
             }
           }
         }
@@ -555,7 +541,7 @@ export default {
         }
 
         .icon {
-          font-size: 14px;
+          font-size: 13px;
           margin-left: 5px;
         }
       }