为Menu.vue中菜单栏选项添加样式

增加选项鼠标悬停样式和被选中样式

在Index.vue中修改aside背景色和宽度
适应Menu菜单

order-system/src/layout/Index.vue

@@ -2,7 +2,7 @@
 <template>
   <el-container class="layout">
     <!-- 在aside侧边栏中使用菜单 -->
-    <el-aside width="200px" class="aside">
+    <el-aside width="auto" class="aside">
       <Menu></Menu>
     </el-aside>
     <el-container>
@@ -23,9 +23,9 @@
 
   }
 
-  // .aside {
-  //   background-color: blueviolet;
-  // }
+  .aside {
+    background-color: #00c6bf;
+  }
 
   .header {
     background-color: chocolate;

order-system/src/layout/Menu.vue

@@ -1,9 +1,5 @@
 <template>
-  <el-menu
-    default-active="2"
-    class="el-menu-vertical-demo"
-
-  >
+  <el-menu background-color="#00c6bf" default-active="1" class="el-menu-vertical-demo">
   <!-- 注释掉暂时不需要的多余属性 -->
     <!-- <el-sub-menu index="1">
       <template #title>
@@ -68,6 +64,32 @@
   import { Menu, Memo, Monitor, Calendar,Edit } from '@element-plus/icons-vue' 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 230px;
+    min-height: 400px;
+  }
+
+  .el-menu {
+    border-right: none;
+  }
+
+  .el-menu .el-menu-item {
+    color: #f0f0f0;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .el-menu-item.is-active {
+    color: #ffffff !important;
+    background-color: #009e99 !important; 
+    font-size: 17px !important;
+  }
 
+  // 鼠标移动时菜单颜色
+  :deep(.el-menu-item:hover) {
+    color: #fff;
+    background-color: #007874 !important;
+    font-size: 17px !important;
+  }
 </style>