页面样式修改，工作组统计

src/components/navMenu/index.vue

@@ -1,13 +1,13 @@
 <!--左侧导航菜单 liuyan -->
 <template>
   <div class="nav-menu v-class" :class="{'is-collapse': isCollapse}">
-    <div class="nav-menu-header" style="height: 65px; background-color: #0068B7;">
+<!--    <div class="nav-menu-header" style="height: 65px; background-color: #4788c0;">
       <div class="header-left">
         <div class="logo">
           <img :src="logo" height="58" width="149" />
         </div>
       </div>
-    </div>
+    </div>-->
     <!--    <div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
     <!--      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>-->
     <!--    <div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
@@ -16,7 +16,7 @@
       <el-menu
           unique-opened
           :default-active="defaultActive"
-          background-color="#0068B7"
+          background-color="#4788c0"
           text-color="#fff"
           active-text-color="#000"
           router
@@ -40,6 +40,7 @@
                 v-for="(children, childrenIndex) in item.children"
                 :key="childrenIndex"
                 :index="children.path"
+                style="text-align: center;"
                 v-if="!children.menuId || $hasPermission(children.menuId)"itemSplitInfo
             >
               <el-badge :value="getDynamicTotal.msgCount" class="item" v-if="children.title === '我的消息' && getDynamicTotal.msgCount !== 0">
@@ -69,8 +70,8 @@
     </div>
     <div class="tree-collapse" @click="handleToggleSideBar" :class="{ 'tree-close': isCollapse }">
       <!--切换折叠样式-->
-      <i class="el-icon-arrow-left" style="font-weight: 600; font-size: 16px;" v-if="isCollapse === false"></i>
-      <i class="el-icon-arrow-right" style="font-weight: 600; font-size: 16px;" v-if="isCollapse === true"></i>
+      <i class="el-icon-arrow-left" style="font-weight: 600; font-size: 16px;margin-top: 300px;" v-if="isCollapse === false"></i>
+      <i class="el-icon-arrow-right" style="font-weight: 600; font-size: 16px;margin-top: 300px;" v-if="isCollapse === true"></i>
     </div>
   </div>
 </template>
@@ -116,7 +117,7 @@ export default {
             //   menuId: 'ad9db496772c075f78495382b7581fe9'
             // },
             {
-              title: '标准法规工作组数据统计',
+              title: '工作组数据统计',
               path: '/dataStatisComments',
               menuId: ''
             },
@@ -517,35 +518,31 @@ export default {
 }
 .el-menu--collapse {
   .is-active {
-    background-color: #fff !important;
+    background-color: #697178 !important;
     .shangqi-icon {
-      color: #0068B7 !important;
+      color: #fff !important;
     }
-    color: #0068B7 !important;
+    color: #697178 !important;
   }
 }
 .nav-menu {
   width: 58px;
-  height: 100%;
+  height: 90%;
   overflow-y: auto;
   user-select: none;
   box-sizing: border-box;
-  position: relative;
-  background: rgb(255, 255, 255);
+  position: absolute;
+  background: #697178;
   background-size: 100% 100%;
   /deep/.el-tooltip {
     padding: 0px 16px !important;
   }
-  .left-tree {
-    height: calc(~'100% - 115px');
-    overflow-y: auto;
-  }
   .left-tree::-webkit-scrollbar {
     display: none;
   }
   &:not(.is-collapse) {
-    width: 180px;
-    background: #0068B7;
+    width: 200px;
+    background: #697178;
     background-size: 100% 100%;
     .logo {
       padding: 10px;
@@ -558,18 +555,18 @@ export default {
     }
   }
   .tree-collapse{
+    display: inline-block;
     position: absolute;
     right: 0;
-    top: 65px;
-    display: flex;
+    top: 0px;
     align-items: center;
     justify-content: center;
     width: 15px;
-    height: calc(100% - 65px);
+    min-height: 140%;
     background: #EEE;
     cursor: pointer;
     &:hover{
-      background-color: #3391CE;
+      background-color: #f0f2f5;
     }
   }
   .logo{
@@ -584,8 +581,8 @@ export default {
     /*background:url("../../assets/images/shangqi/home/logo3.png");*/
   }
   /deep/:not(.is-collapse) .el-menu-item.is-active{
-    background: #fff !important;
-    color: #0068B7 !important;
+    background: #4788c0 !important;
+    color: #fff !important;
   }
 }
 .has-no-read{
@@ -608,7 +605,7 @@ export default {
 /*  }*/
 /*}*/
 .is-active /deep/.shangqi-icon {
-  color: #0068B7;
+  color: #fff;
 }
 /deep/.el-submenu__title i {
   color: #fff;
@@ -617,7 +614,7 @@ export default {
   color: #fff;
 }
 .nav-menu{
-  background-color: #0068B7;
+  background-color: #697178;
   scrollbar-width: none;
   -ms-overflow-style: none; /* IE 10+ */
 }
@@ -629,19 +626,19 @@ export default {
 }
 .nav-menu-popper .el-menu .el-menu-item.is-active {
   background-color: #fff !important;
-  color: #0068B7 !important;
+  color: #4788c0 !important;
   font-weight: bold;
 }
 .nav-menu-popper .el-menu .el-menu-item:hover {
-  background-color: #fff !important;
-  color: #0068B7 !important;
+  background-color: #697178 !important;
+  color: #fff !important;
   font-weight: bold;
 }
 
 .el-menu-item {
-  padding: 0 16px !important;
   span {
     margin-left: 5px;
+    font-weight: normal;
   }
   .shangqi-icon {
     display: inline-block;
@@ -671,6 +668,9 @@ export default {
   }
 }
 .el-submenu {
+  .is-opened {
+    background-color: red;
+  }
   /deep/.el-submenu__title {
     padding: 0 16px !important;
     span {