样式调整

src/layout/components/AppMain.vue

@@ -42,13 +42,13 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
-  padding-left: 150px;
+  padding-left: 240px;
   padding-top: 80px;
   /* margin-top: 112px; */
 }
 .app-main-content {
   min-height: calc(100vh - 80px);
-  background: #dfe3ea;
+  background: #f0f6ff;
   font-size: 14px;
 }
 .fixed-header + .app-main {

src/layout/components/Navbar.vue

@@ -6,6 +6,7 @@
       <div class="nav_left">
         <div class="log_name">{{ pageTitle }}</div>
       </div>
+      <div class="newdata">{{ newData }}</div>
       <div class="right-menu">
         <el-dropdown>
           <div class="user">
@@ -41,7 +42,6 @@
         </el-breadcrumb-item>
       </el-breadcrumb>
       <!-- <tags-view /> -->
-      <div class="newdata">{{ newData }}</div>
     </div>
   </div>
 </template>
@@ -180,7 +180,7 @@ export default {
   > .navbar_top {
     width: 100%;
     height: 48px;
-    background: #2d67e3;
+    background: #fff;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -202,7 +202,6 @@ export default {
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: bold;
-        color: #ffffff;
       }
     }
     .hamburger-container {
@@ -220,7 +219,13 @@ export default {
     .breadcrumb-container {
       float: left;
     }
-
+    .newdata {
+      font-size: 14px;
+      font-family: DIN;
+      font-weight: bold;
+      min-width: 200px;
+      text-align: right;
+    }
     .right-menu {
       float: right;
       height: 100%;
@@ -280,7 +285,7 @@ export default {
           top: 6px;
           margin-right: 10px;
         }
-        color: #fff;
+        color: #333;
         font-weight: 600;
         font-size: 16px;
         cursor: pointer;
@@ -415,10 +420,10 @@ export default {
     width: 100%;
     height: 32px;
     display: flex;
-    background: #ffffff;
+    background: #e7ebfc;
     justify-content: space-between;
     align-items: center;
-    padding-left: 130px;
+    padding-left: 230px;
     padding-right: 24px;
     ::v-deep .el-breadcrumb {
       font-size: 18px;
@@ -446,14 +451,6 @@ export default {
         cursor: pointer;
       }
     }
-    > .newdata {
-      font-size: 14px;
-      font-family: DIN;
-      font-weight: bold;
-      min-width: 200px;
-      text-align: right;
-      // color: #ffffff;
-    }
   }
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div :class="{ 'has-logo': showLogo }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu class="navMenu" :default-active="activeMenu" :background-color="variables.menusBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
         <sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path" :leup="leup" />

src/styles/index.scss

@@ -124,7 +124,7 @@ li {
   font-family: Microsoft YaHei;
   font-weight: bold;
   height: 36px;
-  background: #2d67e3;
+  background: #074FB8;
   color: #ffffff;
   margin-bottom: 24px;
   width: 100%;
@@ -160,7 +160,7 @@ li {
   font-size: 14px;
   font-family: Microsoft YaHei;
   font-weight: 400;
-  color: #2D67E3;
+  color: #074FB8;
   cursor: pointer;
 }
 .r24 {
@@ -359,7 +359,7 @@ li {
     bottom: 0;
     left: 0;
     margin: auto;
-    background: #2d67e3;
+    background: #074FB8;
   }
 }
 
@@ -408,8 +408,8 @@ li {
 /*修改checkbox选中样式*/
 .el-checkbox__input.is-checked .el-checkbox__inner,
 .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: #2d67e3;
-  border-color: #2d67e3;
+  background-color: #074FB8;
+  border-color: #074FB8;
 }
 
 /*修改tree children布局*/
@@ -424,12 +424,12 @@ li {
 
 /*修改radio选中样式*/
 .el-radio__input.is-checked .el-radio__inner {
-  border-color: #2d67e3;
+  border-color: #074FB8;
   background: #fff;
   &::after {
     width: 8px;
     height: 8px;
-    background-color: #2d67e3;
+    background-color: #074FB8;
   }
 }
 
@@ -477,14 +477,14 @@ li {
   margin-left: 24px !important;
 
   &:focus {
-    border-color: #2d67e3;
+    border-color: #074FB8;
     color: #fff;
-    background: #2d67e3;
+    background: #074FB8;
   }
 
   &:hover {
-    background: #2d67e3;
-    border-color: #2d67e3;
+    background: #074FB8;
+    border-color: #074FB8;
     color: #fff;
   }
 }
@@ -523,21 +523,21 @@ li {
 }
 
 .el-button--primary {
-  background: #2d67e3;
+  background: #074FB8;
   border-radius: 4px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #ffffff;
-  border-color: #2d67e3;
+  border-color: #074FB8;
   &:focus {
-    background: #2d67e3;
-    border-color: #2d67e3;
+    background: #07459F;
+    border-color: #07459F;
     color: #fff;
   }
 
   &:hover {
-    background: #2d67e3;
-    border-color: #2d67e3;
+    background: #2176F2;
+    border-color: #2176F2;
     color: #fff;
   }
 }

src/styles/sidebar.scss

@@ -8,10 +8,10 @@
   }
 
   .sidebar-container {
-    width: 150px;
+    width: 240px;
     // transition: width 0.28s;
     // width: $sideBarWidth !important;
-    background-color: #041741;
+    background-color: #074FB8;
     // height: 100%;
     padding: 16px 0 32px 0;
     // border-radius: 6px;
@@ -74,7 +74,10 @@
       height: 100%;
       width: 100% !important;
       > div {
-        background: #041741 !important;
+        background: #074FB8 !important;
+      }
+      .el-menu-item{
+        background-color: #074FB8 !important;
       }
     }
 
@@ -82,14 +85,13 @@
     // .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: #2d67e3 !important;
+        background-color: initial !important;
       }
     }
 
     .submenu-title-noDropdown {
       &:hover {
-        // background-color: initial !important;
-        background: #2d67e3 !important;
+        background-color: initial !important;
       }
     }
 
@@ -102,14 +104,14 @@
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
       &:hover {
-        // background-color: $subMenuHover !important;
+        background-color: $subMenuHover !important;
       }
     }
   }
 
   .hideSidebar {
     .sidebar-container {
-      width: 150px;
+      width: 250px;
     }
 
     .main-container {

src/styles/variables.scss

@@ -8,10 +8,10 @@ $menusBg:#041741;
 $menuHover:#ffffff;
 $menucurrency: #ffffff;
 
-$subMenuBg:#1f2d3d;
+$subMenuBg:#074FB8;
 $subMenuHover:#001528;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 240px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass