菜单图片下载

src/views/HomeView.vue

@@ -2,6 +2,7 @@ import { RouterView } from 'vue-router'
 <script lang="ts" setup>
 import {
   BellFilled,
+  ArrowRightBold,
   Menu as IconMenu,
   Location,
   Setting,
@@ -22,7 +23,7 @@ const handleClose = (key: string, keyPath: string[]) => {
         <el-menu
         style="height:100%"
         active-text-color="#ffd04b"
-        background-color="#545c64"
+        background-color="#000000"
         class="el-menu-vertical-demo"
         default-active="1"
         text-color="#fff"
@@ -31,32 +32,67 @@ const handleClose = (key: string, keyPath: string[]) => {
       >
       
         <el-menu-item index="1">
-          <el-icon><icon-menu /></el-icon>
-          <span>用户管理</span>
+          <div class="ima-icon">
+            <img style="width:20px;height:auto" src="../../public/imgs/userman.png" alt="">
+          </div>
+          <span style="flex:1">用户管理</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
         </el-menu-item>
         <el-menu-item index="2">
-          <el-icon><document /></el-icon>
-          <span>区域管理</span>
+          <div class="ima-icon">
+            <img style="width:18px;height:auto" src="../../public/imgs/areaman.png" alt="">
+          </div>
+          <span style="flex:1">区域管理</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
         </el-menu-item>
         <el-menu-item index="3">
-          <el-icon><setting /></el-icon>
-          <span>站点管理</span>
+          <div class="ima-icon">
+            <img style="width:9px;height:auto" src="../../public/imgs/stationman.png" alt="">
+          </div>
+          <span style="flex:1">站点管理</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
         </el-menu-item>
         <el-menu-item index="4">
-          <el-icon><setting /></el-icon>
-          <span>车辆管理</span>
+          <div class="ima-icon">
+            <img style="width:16px;height:auto" src="../../public/imgs/carman.png" alt="">
+          </div>
+          <span style="flex:1">车辆管理</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
         </el-menu-item>
         <el-menu-item index="5">
-          <el-icon><setting /></el-icon>
-          <span>路线管理</span>
+          <div class="ima-icon">
+            <img style="width:16px;height:auto" src="../../public/imgs/routeman.png" alt="">
+          </div>
+          <span style="flex:1">路线管理</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
         </el-menu-item>
         <el-menu-item index="6">
-          <el-icon><setting /></el-icon>
-          <span>车辆排班</span>
+          <div class="ima-icon">
+            <img style="width:14px;height:auto" src="../../public/imgs/carman.png" alt="">
+          </div>
+          <span style="flex:1">车辆排班</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
         </el-menu-item>
         <el-menu-item index="7">
-          <el-icon><setting /></el-icon>
-          <span>订单管理</span>
+          <div class="ima-icon">
+            <img style="width:12px;height:auto" src="../../public/imgs/orderman.png" alt="">
+          </div>
+          <span style="flex:1">订单管理</span>
+          <div class="next-img">
+            <el-icon><ArrowRightBold /></el-icon>
+          </div>
         </el-menu-item>
       </el-menu>
       </el-aside>
@@ -94,6 +130,17 @@ const handleClose = (key: string, keyPath: string[]) => {
   .common-layout{
     height:100%;
     .el-container{
+      .el-menu-item{
+        display:flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .ima-icon{
+        margin-right:8px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+      }
       height:100%;
       .el-header{
         background:#fff;