style:合并

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="container">
-    <!-- <div id="nav">
+    <div id="nav">
       <router-link
         v-for="item in routes"
         :key="item.path"
@@ -12,7 +12,7 @@
       >
         {{ item.name }}
       </router-link>
-    </div> -->
+    </div>
     <main>
       <router-view />
     </main>
@@ -56,6 +56,36 @@ export default defineComponent({
   width: 100%;
   min-height: 100%;
   background-color: rgba(242, 245, 247, 1);
+  // background-color: #ccc;
+  #nav {
+    width: 220px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 30px 0;
+    box-sizing: border-box;
+    background: #f1f1f1;
+    box-shadow: 0 5px 15px 8px rgba(1, 22, 54, 0.795);
+
+    .link {
+      text-decoration: none;
+      color: rgb(0, 0, 0);
+      padding: 10px;
+      transition: all 0.4s;
+      text-align: center;
+
+      &:hover {
+        background: rgba(4, 37, 223, 0.274);
+        color: #f1f1f1;
+      }
+
+      &.active {
+        color: #f1f1f1;
+        background: rgba(17, 120, 255, 0.74);
+      }
+    }
+  }
   main {
     flex: 1;
     width: 100%;