update leftside buttons

src/components/NavMenu.vue

@@ -1,20 +1,44 @@
 <script setup>
-import { ref } from 'vue';
-const emit = defineEmits(['change']);
+import { ref } from "vue";
+import Icon3D from "../assets/menu_icon/Icon3D.vue";
+import IconAlert from "../assets/menu_icon/IconAlert.vue";
+import IconChart from "../assets/menu_icon/IconChart.vue";
+import IconRealtime from "../assets/menu_icon/IconRealtime.vue";
+import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue";
+
+const emit = defineEmits(["change"]);
 const handleClick = (page) => {
-  emit('change', page);
+  emit("change", page);
 };
 </script>
 
 <template>
   <nav class="nav-menu">
-    <ul>
-      <li><button @click="(e) => handleClick('3d')">三维界面</button></li>
-      <li><button @click="(e) => handleClick('data')">数据界面</button></li>
-      <li><button @click="(e) => handleClick('realtime')">实时数据</button></li>
-      <li><button @click="(e) => handleClick('alert')">报警列表</button></li>
+    <ul class="flex-list">
       <li>
-        <button @click="(e) => handleClick('announcement')">公告页面</button>
+        <button type="button" @click="(e) => handleClick('3d')">
+          <span style="">三维界面</span><Icon3D class="nav-icon" />
+        </button>
+      </li>
+      <li>
+        <button type="button" @click="(e) => handleClick('data')">
+          <span style="">数据界面</span><IconChart class="nav-icon" />
+        </button>
+      </li>
+      <li>
+        <button type="button" @click="(e) => handleClick('realtime')">
+          <span style="">实时数据</span><IconRealtime class="nav-icon" />
+        </button>
+      </li>
+      <li>
+        <button type="button" @click="(e) => handleClick('alert')">
+          <span style="">报警列表</span><IconAlert class="nav-icon" />
+        </button>
+      </li>
+      <li>
+        <button type="button" @click="(e) => handleClick('announcement')">
+          <span style="">公告页面</span><IconAnnounce class="nav-icon" />
+        </button>
       </li>
     </ul>
   </nav>
@@ -22,28 +46,29 @@ const handleClick = (page) => {
 
 <style scoped>
 .nav-menu {
-  width: 480px;
-  padding: 12px;
-  background: #0006;
-  color: #fff;
-  /** 
-  position: fixed;
-  top: 45%;
-  left: 10px;
-  */
+  width: 279px;
+  height: 710px;
+  background: url(../assets/left-bg.png) 100% / cover no-repeat;
+  display: grid;
+  place-items: center;
+  position: relative;
+  top: 72px;
+  left: 0;
+}
+
+.flex-list {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
 }
 
 button {
   appearance: none;
   border: none;
   outline: none;
-  background: #7777;
-  color: #fff;
+  background: transparent;
   cursor: pointer;
-}
-
-button:hover {
-  background: #ccc;
+  user-select: none;
 }
 
 ul,
@@ -52,4 +77,33 @@ li {
   padding: 0;
   list-style: none;
 }
+
+.nav-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-menu button > span {
+  font-size: 32px;
+  letter-spacing: 3px;
+  line-height: 45px;
+  color: #339dff;
+  text-shadow: 0 5px 1px #001124;
+  /* text-shadow: 0 5px 1px #004969; */
+}
+.nav-menu button:hover > span {
+  color: #b1daff;
+}
+</style>
+
+<style>
+.nav-menu button:hover > .nav-icon #icon3d-g,
+.nav-menu button:hover > .nav-icon #alert-rect,
+.nav-menu button:hover > .nav-icon #alert-dot,
+.nav-menu button:hover > .nav-icon #realtime-main,
+.nav-menu button:hover > .nav-icon #announce-main,
+.nav-menu button:hover > .nav-icon #chart-main {
+  fill: #b1daff !important;
+}
 </style>