dev

src/assets/scss/base.scss

@@ -17,7 +17,7 @@ $border-color-lighter: #EBEEF5;
 $border-color-extra-light: #F2F6FC;
 
 // 背景颜色
-$background-color-base: #eee;
+$background-color-base: #F1F5FB;
 $background-color-main: #4D6DE4;
 
 // 边框圆角

src/assets/scss/main.scss

@@ -35,7 +35,7 @@ html {
 }
 
 body {
-  background-color: #EEEEEEFF;
+  background-color: base.$background-color-base;
 }
 
 .center-wrapper {

src/views/LayoutInventory.vue

@@ -1,56 +1,82 @@
 <template>
   <div class="layout-container">
     <Header class="header"/>
-    <header>
-      <div class="center-wrapper">
-        <div class="childMenu">
-          <router-link :to="item.path" class="child-item" v-for="(item,index) in childMenuList" :key="index">
-            {{ item.name }}
-          </router-link>
+    <div class="body">
+      <header style="height: 50px">
+        <div class="center-wrapper">
+          <div class="childMenu">
+            <router-link :to="item.path" class="child-item" v-for="(item,index) in childMenuList" :key="index">
+              {{ item.name }}
+            </router-link>
+          </div>
         </div>
-      </div>
-    </header>
-    <div class="space"></div>
-    <main class="layout-main">
-      <router-view/>
-    </main>
-    <div class="space"></div>
+      </header>
+      <main class="layout-main" style="margin-top: 24px">
+        <router-view/>
+      </main>
+    </div>
     <Footer class="footer"/>
   </div>
-
 </template>
 
 <style scoped lang="scss">
+.body{
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+}
 .childMenu {
   width: 100%;
-  height: 60px;
+  height: 50px;
   background: #fff;
   display: flex;
   align-items: center;
+  border-radius: 8px;
 
   .child-item {
+    width: 136px;
     display: inline-block;
     color: #151515;
     outline: none;
     text-decoration: none;
     font-size: 18px;
-    margin-left: 10px;
-    margin-right: 10px;
-    height: 35px;
+    height: 50px;
     position: relative;
+    line-height: 50px;
+    text-align: center;
+    &::before{
+      content: '';
+      position: absolute;
+      right: 0;
+      top:50%;
+      display: block;
+      width: 2px;
+      height: 16px;
+      background: #D8D8D8;
+      border-radius: 1px;
+      transform: translate(0 ,-50%);
+    }
+    &:last-child::before{
+      display: none;
+    }
   }
 
   .router-link-active:after {
     content: '';
     display: block;
-    width: 100%;
-    height: 2px;
-    background-color: #151515; // 下划线颜色
+    width: 80px;
+    height: 4px;
+    background-color: #4D6DE4; // 下划线颜色
     position: absolute;
-    bottom: -5px; // 调整下划线与文字的距离
-    left: 0;
+    bottom: 0; // 调整下划线与文字的距离
+    left: 50%;
+    transform: translateX(-50%);
   }
 }
+a.router-link-active.router-link-exact-active.child-item{
+  color: #4D6DE4;
+}
 </style>