调整整体布局

web/src/App.vue

@@ -103,4 +103,8 @@ body {
   color: #999;
 }
 
+.h100 {
+  height: 100%;
+}
+
 </style>

web/src/components/sliderNav.vue

@@ -1,16 +1,19 @@
 <template>
-  <section class="sliderNav">
-    <div class="item" v-for="menu in menus" :key="menu.id">
-      <el-row class="pad-w10" align="middle" @click="menu.expand=!menu.expand">
-        <i class="iconfont icon-shujuqingxi"/>
-        <div class="fill" v-text="menu.label"/>
-        <el-icon :size="20">
-          <component :is="arrow(menu.expand)"/>
-        </el-icon>
-      </el-row>
-      <template v-if="menu.expand">
-        <div class="app" v-for="app in menu.children" :key="app.id" v-text="app.label" :class="{active:app.id==12}"/>
-      </template>
+  <section class="sliderNav flex column">
+    <b class="mar-v16" v-text="$sys.title"/>
+    <div class="fill">
+      <div class="item" v-for="menu in menus" :key="menu.id">
+        <el-row class="pad-h8" align="middle" @click="menu.expand=!menu.expand">
+          <i class="iconfont icon-shujuqingxi"/>
+          <div class="fill" v-text="menu.label"/>
+          <el-icon :size="20">
+            <component :is="arrow(menu.expand)"/>
+          </el-icon>
+        </el-row>
+        <template v-if="menu.expand">
+          <div class="app" v-for="app in menu.children" :key="app.id" v-text="app.label" :class="{active:app.id==12}"/>
+        </template>
+      </div>
     </div>
   </section>
 </template>
@@ -53,11 +56,17 @@ export default {
 .sliderNav {
   width: 200px;
   flex-shrink: 0;
-  background: var(--background-color);
-  font-family: PingFang SC-Regular, PingFang SC;
+  background: #222;
+  color: #fff;
+
+  & > b {
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+  }
 
   .item {
-    color: var(--el-color-primary);
+    color: rgba(#fff, .8);
     margin-bottom: 20px;
     line-height: 50px;
     cursor: pointer;
@@ -65,12 +74,15 @@ export default {
     .fill {
       margin-left: 12px;
     }
+
+    &:hover {
+      color: #ffffff;
+    }
   }
 
   .app {
     padding-left: 28px;
     cursor: pointer;
-    margin: 0 10px 0;
 
     &:hover {
       color: rgba(#fff, .8);

web/src/views/home.vue

@@ -1,15 +1,14 @@
 <template>
-  <section class="home">
-    <div class="headerNav flex center pad-h32">
-      <b class="mar-r32" v-text="$sys.title"/>
-      <el-row class="fill"/>
-      <el-row align="middle" class="right">
-        <el-avatar class="mar-r8" :src="user.avatar">游客</el-avatar>
-        {{ user.name || "游客" }}，欢迎您！
-      </el-row>
-    </div>
-    <el-row>
-      <slider-nav v-if="system"/>
+  <el-row class="home">
+    <slider-nav v-if="system"/>
+    <div class="fill h100 flex column">
+      <div class="headerNav flex center pad-h32">
+        <el-row class="fill"/>
+        <el-row align="middle" class="right">
+          <el-avatar class="mar-r8" :src="user.avatar">游客</el-avatar>
+          {{ user.name || "游客" }}，欢迎您！
+        </el-row>
+      </div>
       <div class="mainContent fill">
         <div v-if="$route.name=='工作台'" class="default fill">
           <div>欢迎来到{{ $sys.title }}</div>
@@ -28,8 +27,8 @@
         </template>
         <div class="copyright sub" v-text="`copyright @2022 ${$sys.title}`"/>
       </div>
-    </el-row>
-  </section>
+    </div>
+  </el-row>
 </template>
 
 <script>
@@ -61,16 +60,11 @@ export default {
   background: var(--background-color);
 
   .headerNav {
-    width: 100vw;
     height: 60px;
     color: #fff;
-    background: var(--el-color-primary);
+    background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
     box-sizing: border-box;
 
-    & > b {
-      font-size: 18px;
-    }
-
     .right {
       line-height: 24px;
     }