From b7b95527e4b89a7c79678d8c11810d7248e9e512 Mon Sep 17 00:00:00 2001
From: kubbo <390378816@qq.com>
Date: Tue, 17 Jan 2023 21:58:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=95=B4=E4=BD=93=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue                  |  4 +++
 web/src/components/sliderNav.vue | 44 ++++++++++++++++++++------------
 web/src/views/home.vue           | 32 ++++++++++-------------
 3 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 004a068..3870c35 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -103,4 +103,8 @@ body {
   color: #999;
 }
 
+.h100 {
+  height: 100%;
+}
+
 </style>
diff --git a/web/src/components/sliderNav.vue b/web/src/components/sliderNav.vue
index d7e9953..cd01ae5 100644
--- a/web/src/components/sliderNav.vue
+++ b/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);
diff --git a/web/src/views/home.vue b/web/src/views/home.vue
index 1d7970a..00b29b5 100644
--- a/web/src/views/home.vue
+++ b/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;
     }