二期：首页样式修改

src/renderer/src/layout/components/AppMain.vue

@@ -1,7 +1,27 @@
 <template>
   <section class="app-main">
+    <div class="app-main-left">
+      <div class="app-main-left-item">
+        <div class="app-main-left-item-icon">
+          <i class="iconfont icon-gongzuotai"></i>
+        </div>
+        <div class="app-main-left-item-text">工作台</div>
+      </div>
+      <div class="app-main-left-item">
+        <div class="app-main-left-item-icon">
+          <i class="iconfont icon-yanjiushi"></i>
+        </div>
+        <div class="app-main-left-item-text">研究室</div>
+      </div>
+      <div class="app-main-left-item">
+        <div class="app-main-left-item-icon">
+          <i class="iconfont icon-zhuanyeziyuanku"></i>
+        </div>
+        <div class="app-main-left-item-text">资料库</div>
+      </div>
+    </div>
     <transition mode="out-in" name="fade-transform">
-      <div v-show="$route != null" style="height: 100%">
+      <div v-show="$route != null" style="height: 100%; flex: 1">
         <router-view v-slot="{ Component, route }">
           <keep-alive>
             <component :is="Component" v-if="route.meta.keepAlive" :key="route.name" />
@@ -18,5 +38,57 @@
 <style lang="scss" scoped>
 .app-main {
   height: 100%;
+  display: flex;
+  flex-direction: row;
+  .app-main-left {
+    width: 80px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .app-main-left-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      width: 65px;
+      height: 65px;
+      padding-top: 10px;
+      margin: 10px 0;
+      cursor: pointer;
+      &:hover {
+        background: #839ce0;
+        border-radius: 10px;
+        .app-main-left-item-icon {
+          background: #fff;
+          color: #758fd3;
+        }
+      }
+      &.active {
+        background: #839ce0;
+        border-radius: 10px;
+        .app-main-left-item-icon {
+          background: #fff;
+          color: #758fd3;
+        }
+      }
+      .app-main-left-item-text {
+        font-size: 12px;
+      }
+      .app-main-left-item-icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10px;
+        background: #7c97e1;
+        color: #fff;
+        i {
+          font-size: 24px;
+        }
+      }
+    }
+  }
 }
 </style>

src/renderer/src/layout/index.vue

@@ -32,6 +32,6 @@ let uploaderStore = ref(uploaderState())
   height: 80px;
 }
 .el-main {
-  --el-main-padding: 0 20px;
+  --el-main-padding: 0 20px 0 0;
 }
 </style>