优化新版本UI

src/views/components/Menu.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="menu">
-        <van-sidebar v-model="active" style="width:325px;font-size: 30px">
+        <van-sidebar v-model="active" class="sidebar">
             <van-sidebar-item v-for="menu in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu)">
                 <template #title scoped>
                     <div class="menn_li">
-                        <div><img :src="active== menu.id ? menu.s_img : menu.n_img"/></div>
-                        <div style="margin-left: 30px;">{{ menu.name }}</div>
+                        <div><img :src="active== menu.id ? menu.s_img : menu.n_img" class="menu_icon"/></div>
+                        <div>{{ menu.name }}</div>
                     </div>
                 </template>
             </van-sidebar-item>
@@ -60,9 +60,13 @@
 
 </script>
 <style lang="css" scoped>
+    .sidebar{
+        width:445px;
+        font-size: 30px
+    }
     .menu{
-        position: absolute;
-        margin-left: 17%;
+        height:1840px;
+        background: #e9e9e9;
     }
 
     .menn_text{
@@ -79,16 +83,20 @@
     .menn_btn{
         border-radius: 10px;
         height: 100px;
-        width: 320px;
         display: flex;
-        justify-content: center;
         align-items: center;
+        
     }
 
     .menn_li{
         display: flex;
         align-items: center;
+        gap: 5px;
+    }
 
+    .menu_icon{
+        width: 80px;
+        height: 80px;
     }
     
 </style>

src/views/graphite/index.vue

@@ -110,7 +110,7 @@
     }
 
     .pickture_area{
-        width: 1000px;
+        width: 1040px;
         height: 1586px;
         margin: 5px;
         margin-left: 20px;

src/views/home/index.vue

@@ -4,17 +4,22 @@
     <div id="container">
       <div>
         <Header></Header>
-        <div style="background: #ffffff;" class="home_menu">
+      </div>
+      <div class="container" style="display: flex;">
+        <div class="home_menu">
             <Menu></Menu>
         </div>
+
+        <main>
+          <div class="main">
+            <router-view v-slot="{ Component }">
+              <keep-alive :exclude="['Home']">
+                <component :is="Component" />
+              </keep-alive>
+            </router-view>
+          </div>
+        </main>
       </div>
-      <main>
-        <router-view v-slot="{ Component }">
-          <keep-alive :exclude="['Home']">
-            <component :is="Component" />
-          </keep-alive>
-        </router-view>
-      </main>
     </div>
   </template>
   <script setup lang="ts">
@@ -34,12 +39,17 @@
     },{ immediate: true, deep: true })
   </script>
   <style>
+
+    .main{
+      display: flex;
+      width: 218px;
+      background: rgb(255, 255, 255);
+      height: 1640px;
+    }
+
     .home_menu{
       background: rgb(255, 255, 255);
-      position: absolute;
-      left: 84%;
       height: 1724px;
       width: 450px;
-
     }
   </style>