diff --git a/src/MainPage.vue b/src/MainPage.vue
index adf8605..60e2567 100644
--- a/src/MainPage.vue
+++ b/src/MainPage.vue
@@ -53,5 +53,6 @@ const handlePageChange = (page) => {
 .pages-wrapper {
   flex: 1;
   display: flex;
+  position: relative;
 }
 </style>
diff --git a/src/assets/1.png b/src/assets/1.png
deleted file mode 100644
index acd2f3e..0000000
Binary files a/src/assets/1.png and /dev/null differ
diff --git a/src/assets/2.png b/src/assets/2.png
deleted file mode 100644
index 0a88907..0000000
Binary files a/src/assets/2.png and /dev/null differ
diff --git a/src/assets/3.png b/src/assets/3.png
deleted file mode 100644
index 20d1887..0000000
Binary files a/src/assets/3.png and /dev/null differ
diff --git a/src/assets/header-bg.png b/src/assets/header-bg.png
index 43a9686..56b0ef1 100644
Binary files a/src/assets/header-bg.png and b/src/assets/header-bg.png differ
diff --git a/src/assets/header-bg@2x.png b/src/assets/header-bg@2x.png
index e2df584..33654f0 100644
Binary files a/src/assets/header-bg@2x.png and b/src/assets/header-bg@2x.png differ
diff --git a/src/assets/info-rect.png b/src/assets/info-rect.png
new file mode 100644
index 0000000..7d3ccd5
Binary files /dev/null and b/src/assets/info-rect.png differ
diff --git a/src/assets/info-rect@2x.png b/src/assets/info-rect@2x.png
new file mode 100644
index 0000000..8cdb825
Binary files /dev/null and b/src/assets/info-rect@2x.png differ
diff --git a/src/assets/left-bg.png b/src/assets/left-bg.png
new file mode 100644
index 0000000..ee15aba
Binary files /dev/null and b/src/assets/left-bg.png differ
diff --git a/src/assets/left-bg@2x.png b/src/assets/left-bg@2x.png
new file mode 100644
index 0000000..5b3b0f9
Binary files /dev/null and b/src/assets/left-bg@2x.png differ
diff --git a/src/assets/menu_icon/3d.svg b/src/assets/menu_icon/3d.svg
new file mode 100644
index 0000000..7e46040
--- /dev/null
+++ b/src/assets/menu_icon/3d.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>三维</title>
+    <defs>
+        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-442.096000, -369.480000)" fill="#339DFF" fill-rule="nonzero">
+            <g id="编组-10备份" filter="url(#filter-1)" transform="translate(297.632000, 369.480000)">
+                <g id="三维" transform="translate(145.464000, 0.000000)">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
+                    <path d="M35.7105456,15.5919309 L22.9695828,21.8792738 L10.22862,15.5919309 C9.52887162,15.2212721 9.57390493,14.3413905 10.2736533,14.0192291 L22.0377397,8.88543169 C22.6127804,8.60830362 23.2813518,8.60830362 23.8563926,8.88543169 L35.6170148,13.9707317 C36.413758,14.3413905 36.413758,15.2212721 35.7105456,15.5919309 Z M20.4026841,37.1871353 L9.62240234,31.3605178 C8.97115139,31.0383564 8.5970285,30.4806362 8.5970285,29.8363134 L8.5970285,18.1345809 C8.5970285,17.4417607 9.48383831,17.0226045 10.1385534,17.3932633 L22.1243422,23.4485115 L22.1243422,36.5150998 C22.1659114,37.1628866 21.2202119,37.6928941 20.4026841,37.1871353 L20.4026841,37.1871353 Z M25.5849789,37.1871353 L36.3687247,31.3605178 C36.9749424,31.0383564 37.3490653,30.4806362 37.3490653,29.8363134 L37.3490653,18.1345809 C37.3490653,17.4417607 36.4622554,17.0226045 35.8075404,17.3932633 L23.7247568,23.4415833 L23.7247568,36.5047075 C23.7247568,37.1975276 24.6981691,37.7691043 25.5815148,37.1871353 L25.5849789,37.1871353 L25.5849789,37.1871353 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/Icon3D.vue b/src/assets/menu_icon/Icon3D.vue
new file mode 100644
index 0000000..d66f8d7
--- /dev/null
+++ b/src/assets/menu_icon/Icon3D.vue
@@ -0,0 +1,90 @@
+<!-- Icon: 3d Icon -->
+<script setup>
+
+defineProps({
+  color: {
+    type: String,
+    default: null
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="48px"
+    height="52px"
+    viewBox="0 0 48 48"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>三维</title>
+    <defs>
+      <filter
+        x="-2.1%"
+        y="-6.5%"
+        width="104.2%"
+        height="126.1%"
+        filterUnits="objectBoundingBox"
+        id="filter-1"
+      >
+        <feOffset
+          dx="0"
+          dy="5"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="0.5"
+          in="shadowOffsetOuter1"
+          result="shadowBlurOuter1"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0"
+          type="matrix"
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="icon3d-g"
+        transform="translate(-442.096000, -369.480000)"
+        :fill="color ?? '#339DFF'"
+        fill-rule="nonzero"
+      >
+        <g
+          id="编组-10备份"
+          filter="url(#filter-1)"
+          transform="translate(297.632000, 369.480000)"
+        >
+          <g id="三维" transform="translate(145.464000, 0.000000)">
+            <rect
+              id="矩形"
+              opacity="0"
+              x="0"
+              y="0"
+              width="46"
+              height="46"
+            ></rect>
+            <path
+              d="M35.7105456,15.5919309 L22.9695828,21.8792738 L10.22862,15.5919309 C9.52887162,15.2212721 9.57390493,14.3413905 10.2736533,14.0192291 L22.0377397,8.88543169 C22.6127804,8.60830362 23.2813518,8.60830362 23.8563926,8.88543169 L35.6170148,13.9707317 C36.413758,14.3413905 36.413758,15.2212721 35.7105456,15.5919309 Z M20.4026841,37.1871353 L9.62240234,31.3605178 C8.97115139,31.0383564 8.5970285,30.4806362 8.5970285,29.8363134 L8.5970285,18.1345809 C8.5970285,17.4417607 9.48383831,17.0226045 10.1385534,17.3932633 L22.1243422,23.4485115 L22.1243422,36.5150998 C22.1659114,37.1628866 21.2202119,37.6928941 20.4026841,37.1871353 L20.4026841,37.1871353 Z M25.5849789,37.1871353 L36.3687247,31.3605178 C36.9749424,31.0383564 37.3490653,30.4806362 37.3490653,29.8363134 L37.3490653,18.1345809 C37.3490653,17.4417607 36.4622554,17.0226045 35.8075404,17.3932633 L23.7247568,23.4415833 L23.7247568,36.5047075 C23.7247568,37.1975276 24.6981691,37.7691043 25.5815148,37.1871353 L25.5849789,37.1871353 L25.5849789,37.1871353 Z"
+              id="形状"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/assets/menu_icon/IconAlert.vue b/src/assets/menu_icon/IconAlert.vue
new file mode 100644
index 0000000..5a8db96
--- /dev/null
+++ b/src/assets/menu_icon/IconAlert.vue
@@ -0,0 +1,92 @@
+<!-- Icon: alert Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="48px"
+    height="52px"
+    viewBox="0 0 48 52"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>作业报警</title>
+    <defs>
+      <filter
+        x="-2.1%"
+        y="-6.5%"
+        width="104.2%"
+        height="126.1%"
+        filterUnits="objectBoundingBox"
+        id="filter-1"
+      >
+        <feOffset
+          dx="0"
+          dy="5"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="0.5"
+          in="shadowOffsetOuter1"
+          result="shadowBlurOuter1"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0"
+          type="matrix"
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="郴州旗滨光伏光电玻璃"
+        transform="translate(-190.632000, -449.520000)"
+      >
+        <g
+          id="编组-13"
+          filter="url(#filter-1)"
+          transform="translate(46.168000, 449.520000)"
+        >
+          <g id="作业报警" transform="translate(145.464000, 0.000000)">
+            <rect
+              id="alert-rect"
+              :fill="color ?? '#339DFF'"
+              fill-rule="nonzero"
+              opacity="0"
+              x="0"
+              y="0"
+              width="46"
+              height="46"
+            ></rect>
+            <path
+              d="M35.7411775,33.9474082 L37.1695529,38.295 L8.88938457,38.295 L10.3135957,33.9474082 L35.7411775,33.9474082 Z M17.4873997,34.7525178 L11.0062675,34.7525178 L10.1039896,37.4898904 L14.7528034,37.4898904 C15.6632941,36.5763931 16.5748268,35.663935 17.4873997,34.7525178 Z M23.1078975,7.705 C29.3322274,7.705 34.3780436,12.7508163 34.3780436,18.9751461 L34.3780436,32.8202548 L11.6767295,32.8202548 L11.6767295,18.9751461 C11.6767295,12.7508163 16.7225458,7.705 22.9468756,7.705 Z M22.9877921,26.3291412 C22.4589845,26.3291412 22.009498,26.4877834 21.6393327,26.8579488 C21.242727,27.2016737 21.0576443,27.6511602 21.0576443,28.2064082 C21.0576443,28.7352158 21.242727,29.1847023 21.6393327,29.5548676 C22.009498,29.9250329 22.4589845,30.1101156 22.9877921,30.1101156 C23.5165997,30.1101156 23.9925266,29.9250329 24.3891323,29.581308 C24.7592976,29.2111426 24.9443803,28.7616562 24.9443803,28.2064082 C24.9443803,27.6511602 24.7592976,27.2016737 24.3891323,26.8579488 C24.0189669,26.4877834 23.5430401,26.3291412 22.9877921,26.3291412 Z M23.0010123,11.6630298 C21.9837753,11.6630298 21.1591419,12.4876633 21.1591419,13.5049002 C21.1591419,13.5378197 21.1600244,13.5707331 21.1617885,13.6036053 L21.7069846,23.7625379 C21.7438925,24.4502633 22.3122973,24.9889816 23.0010123,24.9889816 C23.6897273,24.9889816 24.2581321,24.4502633 24.29504,23.7625379 L24.840236,13.6036053 C24.8947493,12.58783 24.1154925,11.7201898 23.0997173,11.6656765 C23.0668452,11.6639124 23.0339317,11.6630298 23.0010123,11.6630298 Z"
+              id="alert-dot"
+              :fill="color ?? '#339DFF'"
+              fill-rule="nonzero"
+            ></path>
+            <g id="！" transform="translate(21.291840, 18.019580)"></g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/assets/menu_icon/IconAnnouncement.vue b/src/assets/menu_icon/IconAnnouncement.vue
new file mode 100644
index 0000000..c6ff003
--- /dev/null
+++ b/src/assets/menu_icon/IconAnnouncement.vue
@@ -0,0 +1,89 @@
+<!-- Icon: announce Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="48px"
+    height="52px"
+    viewBox="-5 0 52 45"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>公告</title>
+    <defs>
+      <filter
+        x="-2.0%"
+        y="-6.5%"
+        width="104.1%"
+        height="126.1%"
+        filterUnits="objectBoundingBox"
+        id="filter-1"
+      >
+        <feOffset
+          dx="0"
+          dy="5"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="0.5"
+          in="shadowOffsetOuter1"
+          result="shadowBlurOuter1"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0"
+          type="matrix"
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="announce-main"
+        transform="translate(-190.400000, -609.600000)"
+        fill="#339DFF"
+        fill-rule="nonzero"
+      >
+        <g
+          id="编组-16"
+          filter="url(#filter-1)"
+          transform="translate(40.600000, 609.600000)"
+        >
+          <g id="公告" transform="translate(150.800000, 0.000000)">
+            <rect
+              id="矩形"
+              opacity="0"
+              x="0"
+              y="0"
+              width="46"
+              height="46"
+            ></rect>
+            <path
+              d="M30.3731127,7.0415548 C30.6461469,7.47823638 30.7909962,7.98286723 30.7909962,8.49788033 L30.7909962,37.5026565 C30.7909962,38.5015369 30.2490901,39.421784 29.3754337,39.9060218 C28.5017772,40.3902597 27.4341394,40.3621897 26.5871353,39.8327127 L15.4811218,32.8913027 L9.59667074,32.8913027 C7.47215062,32.8913027 5.74988677,31.1690388 5.74988677,29.0445187 L5.74988677,16.9560586 C5.74988677,14.8315385 7.47215062,13.1092746 9.59667074,13.1092746 L15.4811218,13.1092746 L26.5871353,6.1682689 C27.2050859,5.78194662 27.9512052,5.65696139 28.6613178,5.82081487 C29.3714304,5.98466834 29.9873526,6.42393505 30.3735574,7.0419591 L30.3731127,7.0415548 Z M35.2380429,12.4399576 C35.8250354,12.0325632 36.6311444,12.1781494 37.0385482,12.7651353 C41.318693,18.9141159 41.32058,27.0770845 37.0432785,33.2280433 C36.63061,33.7993823 35.8365528,33.9353013 35.2573529,33.5337405 C34.6781529,33.1321798 34.5269284,32.3408949 34.9172316,31.7540499 C38.5795365,26.490065 38.5778106,19.5026379 34.9129056,14.2404629 C34.5055112,13.6534704 34.6510974,12.8473614 35.2380833,12.4399576 L35.2380429,12.4399576 Z"
+              id="形状"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/assets/menu_icon/IconBack.vue b/src/assets/menu_icon/IconBack.vue
new file mode 100644
index 0000000..d38abcc
--- /dev/null
+++ b/src/assets/menu_icon/IconBack.vue
@@ -0,0 +1,52 @@
+<!-- Icon: back Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="46.4px"
+    height="46.4px"
+    viewBox="0 0 46.4 46.4"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>撤销</title>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="郴州旗滨光伏光电玻璃"
+        transform="translate(-1728.160000, -46.400000)"
+        fill-rule="nonzero"
+      >
+        <g id="撤销" transform="translate(1728.160000, 46.400000)">
+          <rect
+            id="矩形"
+            fill="#000000"
+            opacity="0"
+            x="0"
+            y="0"
+            width="46.4"
+            height="46.4"
+          ></rect>
+          <path
+            d="M40.6,25.8120454 C40.6,28.1705437 40.1561224,30.3912077 39.2683673,32.4740374 C38.3806122,34.5568671 37.1637755,36.4023154 35.6178571,38.0103825 C34.0719388,39.6184495 32.2505102,40.935533 30.1535714,41.9616329 C28.0566327,42.9877328 25.7989796,43.6079872 23.3806122,43.8223962 C23.227551,43.853026 23.0897959,43.8759984 22.9673469,43.8913133 C22.844898,43.9066283 22.7071429,43.9142857 22.5540816,43.9142857 L14.6102041,43.9142857 C14.0897959,43.9142857 13.5770408,43.8223962 13.0719388,43.6386171 C12.5668367,43.454838 12.1153061,43.2021417 11.7173469,42.8805283 C11.3193878,42.5589149 10.9903061,42.1836993 10.730102,41.7548814 C10.469898,41.3260635 10.3397959,40.8819307 10.3397959,40.422483 C10.3397959,39.9630353 10.4622449,39.5189025 10.7071429,39.0900846 C10.9520408,38.6612667 11.2734694,38.2937086 11.6714286,37.9874101 C12.0693878,37.6811116 12.5132653,37.4360728 13.0030612,37.2522937 C13.4928571,37.0685146 13.9979592,36.9766251 14.5183673,36.9766251 L21.6357143,37.0225699 C23.2581633,37.0225699 24.7887755,36.7239288 26.227551,36.1266468 C27.6663265,35.5293648 28.9214286,34.7253312 29.9928571,33.7145462 C31.0642857,32.7037613 31.9061224,31.5168546 32.5183673,30.1538264 C33.1306122,28.7907981 33.4367347,27.3282229 33.4367347,25.7661006 C33.4367347,24.2958679 33.1612245,22.9175247 32.6102041,21.6310711 C32.0591837,20.3446175 31.3015306,19.1959982 30.3372449,18.1852132 C29.3729592,17.1744282 28.2479592,16.3550797 26.9622449,15.7271679 C25.6765306,15.099256 24.2836735,14.7087254 22.7836735,14.5555762 C22.722449,14.5555762 22.6841837,14.5632336 22.6688776,14.5785485 C22.6535714,14.5938635 22.6153061,14.6015209 22.5540816,14.6015209 L15.2530612,14.6015209 L15.2530612,18.2311579 C15.2530612,18.7518654 15.0464286,19.1347385 14.6331633,19.3797773 C14.219898,19.624816 13.5540816,19.4716668 12.6357143,18.9203295 C12.3908163,18.7671803 12.0005102,18.4991691 11.4647959,18.116296 C10.9290816,17.7334229 10.3015306,17.2816327 9.58214286,16.7609252 C8.8627551,16.2402178 8.10510204,15.6888805 7.30918367,15.1069134 L5.01326531,13.3610121 C4.55408163,12.9934539 4.15612245,12.664183 3.81938776,12.3731995 C3.48265306,12.0822159 3.31428571,11.7223152 3.31428571,11.2934973 C3.31428571,10.9259391 3.50561224,10.543066 3.88826531,10.144878 C4.27091837,9.74668998 4.70714286,9.34850195 5.19693878,8.95031393 C5.74795918,8.4908662 6.40612245,7.95484386 7.17142857,7.34224689 C7.93673469,6.72964993 8.69438776,6.13236789 9.44438776,5.55040077 C10.1943878,4.96843365 10.8678571,4.44006877 11.4647959,3.96530612 C12.0617347,3.49054347 12.4826531,3.16127261 12.727551,2.97749352 C13.4622449,2.4567861 14.0591837,2.34958163 14.5183673,2.65588011 C14.977551,2.96217859 15.222449,3.42162632 15.2530612,4.03422328 L15.2530612,7.70980507 L22.5540816,7.70980507 C22.7071429,7.70980507 22.8678571,7.72512 23.0362245,7.75574984 C23.2045918,7.78637969 23.3653061,7.81700954 23.5183673,7.84763939 C25.9061224,8.09267818 28.1408163,8.72059006 30.222449,9.73137506 C32.3040816,10.74216 34.1178571,12.0515861 35.6637755,13.6596531 C37.2096939,15.2677201 38.4188776,17.1131685 39.2913265,19.1959982 C40.1637755,21.2788279 40.6,23.4841769 40.6,25.8120454 L40.6,25.8120454 Z"
+            id="back-main"
+            fill="#50A1EC"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/assets/menu_icon/IconChart.vue b/src/assets/menu_icon/IconChart.vue
new file mode 100644
index 0000000..2ad5dd3
--- /dev/null
+++ b/src/assets/menu_icon/IconChart.vue
@@ -0,0 +1,89 @@
+<!-- Icon: chart Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="48px"
+    height="52px"
+    viewBox="0 0 48 52"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>数据</title>
+    <defs>
+      <filter
+        x="-2.1%"
+        y="-6.5%"
+        width="104.2%"
+        height="126.1%"
+        filterUnits="objectBoundingBox"
+        id="filter-1"
+      >
+        <feOffset
+          dx="0"
+          dy="5"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="0.5"
+          in="shadowOffsetOuter1"
+          result="shadowBlurOuter1"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0"
+          type="matrix"
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="chart-main"
+        transform="translate(-190.632000, -369.480000)"
+        :fill="color ?? '#339dff'"
+        fill-rule="nonzero"
+      >
+        <g
+          id="编组-10"
+          filter="url(#filter-1)"
+          transform="translate(46.168000, 369.480000)"
+        >
+          <g id="数据" transform="translate(145.464000, 0.000000)">
+            <rect
+              id="矩形"
+              opacity="0"
+              x="0"
+              y="0"
+              width="46"
+              height="46"
+            ></rect>
+            <path
+              d="M6.57144141,27.3809609 L12.0475977,27.3809609 L12.0475977,38.3333633 L6.57144141,38.3333633 L6.57144141,27.3809609 Z M15.3333184,18.6190391 L20.8095195,18.6190391 L20.8095195,38.3333184 L15.3333184,38.3333184 L15.3333184,18.6190391 Z M24.0951953,20.8095195 L29.5714414,20.8095195 L29.5714414,38.3333184 L24.0951953,38.3333184 L24.0951953,20.8095195 Z M32.8571621,7.66668164 L38.3333184,7.66668164 L38.3333184,38.3333184 L32.8571621,38.3333184 L32.8571621,7.66668164 Z"
+              id="形状"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/assets/menu_icon/IconRealtime.vue b/src/assets/menu_icon/IconRealtime.vue
new file mode 100644
index 0000000..48492a1
--- /dev/null
+++ b/src/assets/menu_icon/IconRealtime.vue
@@ -0,0 +1,89 @@
+<!-- Icon: realtime Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="48px"
+    height="52px"
+    viewBox="0 0 48 52"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>实时</title>
+    <defs>
+      <filter
+        x="-2.1%"
+        y="-6.5%"
+        width="104.2%"
+        height="126.1%"
+        filterUnits="objectBoundingBox"
+        id="filter-1"
+      >
+        <feOffset
+          dx="0"
+          dy="5"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="0.5"
+          in="shadowOffsetOuter1"
+          result="shadowBlurOuter1"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0"
+          type="matrix"
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="SourceGraphic"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="realtime-main"
+        transform="translate(-190.632000, -529.560000)"
+        :fill="color ?? '#339DFF'"
+        fill-rule="nonzero"
+      >
+        <g
+          id="编组-14"
+          filter="url(#filter-1)"
+          transform="translate(46.168000, 529.560000)"
+        >
+          <g id="实时" transform="translate(145.464000, 0.000000)">
+            <rect
+              id="矩形"
+              opacity="0"
+              x="0"
+              y="0"
+              width="46"
+              height="46"
+            ></rect>
+            <path
+              d="M22.9685547,9.19550781 C24.8300681,9.19550781 26.6341937,9.55776764 28.3307175,10.2787006 C29.9698535,10.9709396 31.4439999,11.9644641 32.710116,13.2305801 C33.976232,14.4966962 34.9697565,15.9708426 35.6619955,17.6099786 C36.3793417,19.3065024 36.7451883,21.1106281 36.7451883,22.9721414 C36.7451883,24.8336548 36.3829285,26.6377805 35.6619955,28.3343042 C34.9697565,29.9734402 33.976232,31.4475867 32.710116,32.7137027 C31.4439999,33.9798187 29.9698535,34.9733432 28.3307175,35.6655823 C26.6341937,36.3829285 24.8300681,36.748775 22.9685547,36.748775 C21.1070413,36.748775 19.3029156,36.3865152 17.6063919,35.6655823 C15.9672559,34.9733432 14.4931094,33.9798187 13.2269934,32.7137027 C11.9608774,31.4475867 10.9673529,29.9734402 10.2751138,28.3343042 C9.55776764,26.6377805 9.19192108,24.8336548 9.19192108,22.9721414 C9.19192108,21.1106281 9.55418091,19.3065024 10.2751138,17.6099786 C10.9673529,15.9708426 11.9608774,14.4966962 13.2269934,13.2305801 C14.4931094,11.9644641 15.9672559,10.9709396 17.6063919,10.2787006 C19.3065024,9.56135437 21.1106281,9.19550781 22.9685547,9.19550781 M22.9685547,6.9 C14.0949823,6.9 6.9,14.0949823 6.9,22.9685547 C6.9,31.8421271 14.0949823,39.0371094 22.9685547,39.0371094 C31.8421271,39.0371094 39.0371094,31.8421271 39.0371094,22.9685547 C39.0371094,14.0949823 31.8457138,6.9 22.9685547,6.9 L22.9685547,6.9 Z M22.9577945,11.1287558 C16.419184,11.1287558 11.1215823,16.4263574 11.1215823,22.964968 C11.1215823,29.5035785 16.419184,34.8011801 22.9577945,34.8011801 C29.496405,34.8011801 34.7940067,29.5035785 34.7940067,22.964968 C34.7940067,16.4263574 29.496405,11.1287558 22.9577945,11.1287558 Z M30.0953891,22.0682852 C30.0953891,22.7210703 29.5645529,23.2519064 28.9117679,23.2519064 L21.8351477,23.2519064 C21.1823627,23.2519064 20.6515265,22.7210703 20.6515265,22.0682852 L20.6515265,14.9952518 C20.6515265,14.3424667 21.1823627,13.8116306 21.8351477,13.8116306 C22.4879327,13.8116306 23.0187689,14.3424667 23.0187689,14.9952518 L23.0187689,20.884664 L28.9117679,20.884664 C29.5645529,20.884664 30.0953891,21.4155002 30.0953891,22.0682852 Z"
+              id="形状"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/assets/menu_icon/alert.svg b/src/assets/menu_icon/alert.svg
new file mode 100644
index 0000000..8995c7d
--- /dev/null
+++ b/src/assets/menu_icon/alert.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>作业报警</title>
+    <defs>
+        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -449.520000)">
+            <g id="编组-13" filter="url(#filter-1)" transform="translate(46.168000, 449.520000)">
+                <g id="作业报警" transform="translate(145.464000, 0.000000)">
+                    <rect id="矩形" fill="#339DFF" fill-rule="nonzero" opacity="0" x="0" y="0" width="46" height="46"></rect>
+                    <path d="M35.7411775,33.9474082 L37.1695529,38.295 L8.88938457,38.295 L10.3135957,33.9474082 L35.7411775,33.9474082 Z M17.4873997,34.7525178 L11.0062675,34.7525178 L10.1039896,37.4898904 L14.7528034,37.4898904 C15.6632941,36.5763931 16.5748268,35.663935 17.4873997,34.7525178 Z M23.1078975,7.705 C29.3322274,7.705 34.3780436,12.7508163 34.3780436,18.9751461 L34.3780436,32.8202548 L11.6767295,32.8202548 L11.6767295,18.9751461 C11.6767295,12.7508163 16.7225458,7.705 22.9468756,7.705 Z M22.9877921,26.3291412 C22.4589845,26.3291412 22.009498,26.4877834 21.6393327,26.8579488 C21.242727,27.2016737 21.0576443,27.6511602 21.0576443,28.2064082 C21.0576443,28.7352158 21.242727,29.1847023 21.6393327,29.5548676 C22.009498,29.9250329 22.4589845,30.1101156 22.9877921,30.1101156 C23.5165997,30.1101156 23.9925266,29.9250329 24.3891323,29.581308 C24.7592976,29.2111426 24.9443803,28.7616562 24.9443803,28.2064082 C24.9443803,27.6511602 24.7592976,27.2016737 24.3891323,26.8579488 C24.0189669,26.4877834 23.5430401,26.3291412 22.9877921,26.3291412 Z M23.0010123,11.6630298 C21.9837753,11.6630298 21.1591419,12.4876633 21.1591419,13.5049002 C21.1591419,13.5378197 21.1600244,13.5707331 21.1617885,13.6036053 L21.7069846,23.7625379 C21.7438925,24.4502633 22.3122973,24.9889816 23.0010123,24.9889816 C23.6897273,24.9889816 24.2581321,24.4502633 24.29504,23.7625379 L24.840236,13.6036053 C24.8947493,12.58783 24.1154925,11.7201898 23.0997173,11.6656765 C23.0668452,11.6639124 23.0339317,11.6630298 23.0010123,11.6630298 Z" id="形状结合" fill="#339DFF" fill-rule="nonzero"></path>
+                    <g id="！" transform="translate(21.291840, 18.019580)"></g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/back.svg b/src/assets/menu_icon/back.svg
new file mode 100644
index 0000000..dd92bc5
--- /dev/null
+++ b/src/assets/menu_icon/back.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="46.4px" height="46.4px" viewBox="0 0 46.4 46.4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>撤销</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-1728.160000, -46.400000)" fill-rule="nonzero">
+            <g id="撤销" transform="translate(1728.160000, 46.400000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="46.4" height="46.4"></rect>
+                <path d="M40.6,25.8120454 C40.6,28.1705437 40.1561224,30.3912077 39.2683673,32.4740374 C38.3806122,34.5568671 37.1637755,36.4023154 35.6178571,38.0103825 C34.0719388,39.6184495 32.2505102,40.935533 30.1535714,41.9616329 C28.0566327,42.9877328 25.7989796,43.6079872 23.3806122,43.8223962 C23.227551,43.853026 23.0897959,43.8759984 22.9673469,43.8913133 C22.844898,43.9066283 22.7071429,43.9142857 22.5540816,43.9142857 L14.6102041,43.9142857 C14.0897959,43.9142857 13.5770408,43.8223962 13.0719388,43.6386171 C12.5668367,43.454838 12.1153061,43.2021417 11.7173469,42.8805283 C11.3193878,42.5589149 10.9903061,42.1836993 10.730102,41.7548814 C10.469898,41.3260635 10.3397959,40.8819307 10.3397959,40.422483 C10.3397959,39.9630353 10.4622449,39.5189025 10.7071429,39.0900846 C10.9520408,38.6612667 11.2734694,38.2937086 11.6714286,37.9874101 C12.0693878,37.6811116 12.5132653,37.4360728 13.0030612,37.2522937 C13.4928571,37.0685146 13.9979592,36.9766251 14.5183673,36.9766251 L21.6357143,37.0225699 C23.2581633,37.0225699 24.7887755,36.7239288 26.227551,36.1266468 C27.6663265,35.5293648 28.9214286,34.7253312 29.9928571,33.7145462 C31.0642857,32.7037613 31.9061224,31.5168546 32.5183673,30.1538264 C33.1306122,28.7907981 33.4367347,27.3282229 33.4367347,25.7661006 C33.4367347,24.2958679 33.1612245,22.9175247 32.6102041,21.6310711 C32.0591837,20.3446175 31.3015306,19.1959982 30.3372449,18.1852132 C29.3729592,17.1744282 28.2479592,16.3550797 26.9622449,15.7271679 C25.6765306,15.099256 24.2836735,14.7087254 22.7836735,14.5555762 C22.722449,14.5555762 22.6841837,14.5632336 22.6688776,14.5785485 C22.6535714,14.5938635 22.6153061,14.6015209 22.5540816,14.6015209 L15.2530612,14.6015209 L15.2530612,18.2311579 C15.2530612,18.7518654 15.0464286,19.1347385 14.6331633,19.3797773 C14.219898,19.624816 13.5540816,19.4716668 12.6357143,18.9203295 C12.3908163,18.7671803 12.0005102,18.4991691 11.4647959,18.116296 C10.9290816,17.7334229 10.3015306,17.2816327 9.58214286,16.7609252 C8.8627551,16.2402178 8.10510204,15.6888805 7.30918367,15.1069134 L5.01326531,13.3610121 C4.55408163,12.9934539 4.15612245,12.664183 3.81938776,12.3731995 C3.48265306,12.0822159 3.31428571,11.7223152 3.31428571,11.2934973 C3.31428571,10.9259391 3.50561224,10.543066 3.88826531,10.144878 C4.27091837,9.74668998 4.70714286,9.34850195 5.19693878,8.95031393 C5.74795918,8.4908662 6.40612245,7.95484386 7.17142857,7.34224689 C7.93673469,6.72964993 8.69438776,6.13236789 9.44438776,5.55040077 C10.1943878,4.96843365 10.8678571,4.44006877 11.4647959,3.96530612 C12.0617347,3.49054347 12.4826531,3.16127261 12.727551,2.97749352 C13.4622449,2.4567861 14.0591837,2.34958163 14.5183673,2.65588011 C14.977551,2.96217859 15.222449,3.42162632 15.2530612,4.03422328 L15.2530612,7.70980507 L22.5540816,7.70980507 C22.7071429,7.70980507 22.8678571,7.72512 23.0362245,7.75574984 C23.2045918,7.78637969 23.3653061,7.81700954 23.5183673,7.84763939 C25.9061224,8.09267818 28.1408163,8.72059006 30.222449,9.73137506 C32.3040816,10.74216 34.1178571,12.0515861 35.6637755,13.6596531 C37.2096939,15.2677201 38.4188776,17.1131685 39.2913265,19.1959982 C40.1637755,21.2788279 40.6,23.4841769 40.6,25.8120454 L40.6,25.8120454 Z" id="路径" fill="#50A1EC"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/chart.svg b/src/assets/menu_icon/chart.svg
new file mode 100644
index 0000000..8beedc9
--- /dev/null
+++ b/src/assets/menu_icon/chart.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>数据</title>
+    <defs>
+        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -369.480000)" fill="#B1DAFF" fill-rule="nonzero">
+            <g id="编组-10" filter="url(#filter-1)" transform="translate(46.168000, 369.480000)">
+                <g id="数据" transform="translate(145.464000, 0.000000)">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
+                    <path d="M6.57144141,27.3809609 L12.0475977,27.3809609 L12.0475977,38.3333633 L6.57144141,38.3333633 L6.57144141,27.3809609 Z M15.3333184,18.6190391 L20.8095195,18.6190391 L20.8095195,38.3333184 L15.3333184,38.3333184 L15.3333184,18.6190391 Z M24.0951953,20.8095195 L29.5714414,20.8095195 L29.5714414,38.3333184 L24.0951953,38.3333184 L24.0951953,20.8095195 Z M32.8571621,7.66668164 L38.3333184,7.66668164 L38.3333184,38.3333184 L32.8571621,38.3333184 L32.8571621,7.66668164 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/clock.svg b/src/assets/menu_icon/clock.svg
new file mode 100644
index 0000000..ab777af
--- /dev/null
+++ b/src/assets/menu_icon/clock.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>实时</title>
+    <defs>
+        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -529.560000)" fill="#339DFF" fill-rule="nonzero">
+            <g id="编组-14" filter="url(#filter-1)" transform="translate(46.168000, 529.560000)">
+                <g id="实时" transform="translate(145.464000, 0.000000)">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
+                    <path d="M22.9685547,9.19550781 C24.8300681,9.19550781 26.6341937,9.55776764 28.3307175,10.2787006 C29.9698535,10.9709396 31.4439999,11.9644641 32.710116,13.2305801 C33.976232,14.4966962 34.9697565,15.9708426 35.6619955,17.6099786 C36.3793417,19.3065024 36.7451883,21.1106281 36.7451883,22.9721414 C36.7451883,24.8336548 36.3829285,26.6377805 35.6619955,28.3343042 C34.9697565,29.9734402 33.976232,31.4475867 32.710116,32.7137027 C31.4439999,33.9798187 29.9698535,34.9733432 28.3307175,35.6655823 C26.6341937,36.3829285 24.8300681,36.748775 22.9685547,36.748775 C21.1070413,36.748775 19.3029156,36.3865152 17.6063919,35.6655823 C15.9672559,34.9733432 14.4931094,33.9798187 13.2269934,32.7137027 C11.9608774,31.4475867 10.9673529,29.9734402 10.2751138,28.3343042 C9.55776764,26.6377805 9.19192108,24.8336548 9.19192108,22.9721414 C9.19192108,21.1106281 9.55418091,19.3065024 10.2751138,17.6099786 C10.9673529,15.9708426 11.9608774,14.4966962 13.2269934,13.2305801 C14.4931094,11.9644641 15.9672559,10.9709396 17.6063919,10.2787006 C19.3065024,9.56135437 21.1106281,9.19550781 22.9685547,9.19550781 M22.9685547,6.9 C14.0949823,6.9 6.9,14.0949823 6.9,22.9685547 C6.9,31.8421271 14.0949823,39.0371094 22.9685547,39.0371094 C31.8421271,39.0371094 39.0371094,31.8421271 39.0371094,22.9685547 C39.0371094,14.0949823 31.8457138,6.9 22.9685547,6.9 L22.9685547,6.9 Z M22.9577945,11.1287558 C16.419184,11.1287558 11.1215823,16.4263574 11.1215823,22.964968 C11.1215823,29.5035785 16.419184,34.8011801 22.9577945,34.8011801 C29.496405,34.8011801 34.7940067,29.5035785 34.7940067,22.964968 C34.7940067,16.4263574 29.496405,11.1287558 22.9577945,11.1287558 Z M30.0953891,22.0682852 C30.0953891,22.7210703 29.5645529,23.2519064 28.9117679,23.2519064 L21.8351477,23.2519064 C21.1823627,23.2519064 20.6515265,22.7210703 20.6515265,22.0682852 L20.6515265,14.9952518 C20.6515265,14.3424667 21.1823627,13.8116306 21.8351477,13.8116306 C22.4879327,13.8116306 23.0187689,14.3424667 23.0187689,14.9952518 L23.0187689,20.884664 L28.9117679,20.884664 C29.5645529,20.884664 30.0953891,21.4155002 30.0953891,22.0682852 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/cube.svg b/src/assets/menu_icon/cube.svg
new file mode 100644
index 0000000..cff8e35
--- /dev/null
+++ b/src/assets/menu_icon/cube.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>三维</title>
+    <defs>
+        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-324.017417, -200.480000)" fill="#339DFF" fill-rule="nonzero">
+            <g id="编组-10备份" filter="url(#filter-1)" transform="translate(179.553417, 200.480000)">
+                <g id="三维" transform="translate(145.464000, 0.000000)">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
+                    <path d="M35.7105456,15.5919309 L22.9695828,21.8792738 L10.22862,15.5919309 C9.52887162,15.2212721 9.57390493,14.3413905 10.2736533,14.0192291 L22.0377397,8.88543169 C22.6127804,8.60830362 23.2813518,8.60830362 23.8563926,8.88543169 L35.6170148,13.9707317 C36.413758,14.3413905 36.413758,15.2212721 35.7105456,15.5919309 Z M20.4026841,37.1871353 L9.62240234,31.3605178 C8.97115139,31.0383564 8.5970285,30.4806362 8.5970285,29.8363134 L8.5970285,18.1345809 C8.5970285,17.4417607 9.48383831,17.0226045 10.1385534,17.3932633 L22.1243422,23.4485115 L22.1243422,36.5150998 C22.1659114,37.1628866 21.2202119,37.6928941 20.4026841,37.1871353 L20.4026841,37.1871353 Z M25.5849789,37.1871353 L36.3687247,31.3605178 C36.9749424,31.0383564 37.3490653,30.4806362 37.3490653,29.8363134 L37.3490653,18.1345809 C37.3490653,17.4417607 36.4622554,17.0226045 35.8075404,17.3932633 L23.7247568,23.4415833 L23.7247568,36.5047075 C23.7247568,37.1975276 24.6981691,37.7691043 25.5815148,37.1871353 L25.5849789,37.1871353 L25.5849789,37.1871353 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/exchange.svg b/src/assets/menu_icon/exchange.svg
new file mode 100644
index 0000000..9dc87d3
--- /dev/null
+++ b/src/assets/menu_icon/exchange.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="46.4px" height="46.4px" viewBox="0 0 46.4 46.4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>更换</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-1852.960000, -46.400000)" fill="#50A1EC" fill-rule="nonzero">
+            <g id="更换" transform="translate(1852.960000, 46.400000)">
+                <rect id="矩形" opacity="0" x="0" y="0" width="46.4" height="46.4"></rect>
+                <path d="M40.9717781,18.7161691 L40.9717781,5.43717134 C40.9738761,4.87810519 40.7611607,4.33958668 40.3775642,3.9328765 C40.0050921,3.53784772 39.4863949,3.31362026 38.943456,3.31292634 L24.7497395,3.31292634 C24.2116286,3.31292634 23.696939,3.53517775 23.3155926,3.9328765 C22.9319868,4.33959642 22.7192707,4.87813062 22.7213786,5.43721018 L22.7213786,18.7161691 C22.7213786,19.888252 23.6291217,20.8427445 24.7497007,20.8427445 L38.943456,20.8427445 C39.4815282,20.8427445 39.9962177,20.6204931 40.3775642,20.2204639 C40.7611699,19.813744 40.9738861,19.2752098 40.9717781,18.7161302 L40.9717781,18.7161691 Z M20.6485756,25.5544979 L6.4548591,25.5544979 C5.33894103,25.5544979 4.42888325,26.5090292 4.42888325,27.6810734 L4.42888325,40.9577794 C4.42888325,42.1321929 5.33894103,43.0843549 6.45718959,43.0843549 L20.6485756,43.0843549 C21.7715628,43.0843549 22.6769208,42.1321929 22.6769208,40.9601099 L22.6769208,27.6811122 C22.6769208,26.5090292 21.7691935,25.5544979 20.6509449,25.5544979 L20.6485756,25.5544979 Z M8.8481596,21.7013761 L14.3857622,14.916804 L10.6472619,14.916804 C10.672975,11.0964257 13.9482897,7.04672681 17.4598387,7.04672681 L19.0319898,7.02804402 L19.0319898,3.34333928 L17.5253256,3.34333928 C11.6906628,3.34333928 6.96259599,8.50192592 6.96259599,14.865339 L6.96259599,14.916804 L3.31292634,14.916804 L8.8481596,21.7013761 Z M43.0843549,31.5085208 L37.544383,24.7286486 L32.0115191,31.5085208 L35.8061843,31.5085208 C35.7781018,35.3312685 32.3834659,39.2288638 28.8719168,39.2288638 L27.3652526,39.2288638 L27.3652526,43.0843549 L28.8719168,43.0843549 C34.7066185,43.0843549 39.4347241,37.9257683 39.4347241,31.5623164 L39.4347241,31.5085208 L43.0843549,31.5085208 L43.0843549,31.5085208 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/realtime.svg b/src/assets/menu_icon/realtime.svg
new file mode 100644
index 0000000..ab777af
--- /dev/null
+++ b/src/assets/menu_icon/realtime.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>实时</title>
+    <defs>
+        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -529.560000)" fill="#339DFF" fill-rule="nonzero">
+            <g id="编组-14" filter="url(#filter-1)" transform="translate(46.168000, 529.560000)">
+                <g id="实时" transform="translate(145.464000, 0.000000)">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
+                    <path d="M22.9685547,9.19550781 C24.8300681,9.19550781 26.6341937,9.55776764 28.3307175,10.2787006 C29.9698535,10.9709396 31.4439999,11.9644641 32.710116,13.2305801 C33.976232,14.4966962 34.9697565,15.9708426 35.6619955,17.6099786 C36.3793417,19.3065024 36.7451883,21.1106281 36.7451883,22.9721414 C36.7451883,24.8336548 36.3829285,26.6377805 35.6619955,28.3343042 C34.9697565,29.9734402 33.976232,31.4475867 32.710116,32.7137027 C31.4439999,33.9798187 29.9698535,34.9733432 28.3307175,35.6655823 C26.6341937,36.3829285 24.8300681,36.748775 22.9685547,36.748775 C21.1070413,36.748775 19.3029156,36.3865152 17.6063919,35.6655823 C15.9672559,34.9733432 14.4931094,33.9798187 13.2269934,32.7137027 C11.9608774,31.4475867 10.9673529,29.9734402 10.2751138,28.3343042 C9.55776764,26.6377805 9.19192108,24.8336548 9.19192108,22.9721414 C9.19192108,21.1106281 9.55418091,19.3065024 10.2751138,17.6099786 C10.9673529,15.9708426 11.9608774,14.4966962 13.2269934,13.2305801 C14.4931094,11.9644641 15.9672559,10.9709396 17.6063919,10.2787006 C19.3065024,9.56135437 21.1106281,9.19550781 22.9685547,9.19550781 M22.9685547,6.9 C14.0949823,6.9 6.9,14.0949823 6.9,22.9685547 C6.9,31.8421271 14.0949823,39.0371094 22.9685547,39.0371094 C31.8421271,39.0371094 39.0371094,31.8421271 39.0371094,22.9685547 C39.0371094,14.0949823 31.8457138,6.9 22.9685547,6.9 L22.9685547,6.9 Z M22.9577945,11.1287558 C16.419184,11.1287558 11.1215823,16.4263574 11.1215823,22.964968 C11.1215823,29.5035785 16.419184,34.8011801 22.9577945,34.8011801 C29.496405,34.8011801 34.7940067,29.5035785 34.7940067,22.964968 C34.7940067,16.4263574 29.496405,11.1287558 22.9577945,11.1287558 Z M30.0953891,22.0682852 C30.0953891,22.7210703 29.5645529,23.2519064 28.9117679,23.2519064 L21.8351477,23.2519064 C21.1823627,23.2519064 20.6515265,22.7210703 20.6515265,22.0682852 L20.6515265,14.9952518 C20.6515265,14.3424667 21.1823627,13.8116306 21.8351477,13.8116306 C22.4879327,13.8116306 23.0187689,14.3424667 23.0187689,14.9952518 L23.0187689,20.884664 L28.9117679,20.884664 C29.5645529,20.884664 30.0953891,21.4155002 30.0953891,22.0682852 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/setting.svg b/src/assets/menu_icon/setting.svg
new file mode 100644
index 0000000..2611704
--- /dev/null
+++ b/src/assets/menu_icon/setting.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="46.4px" height="46.4px" viewBox="0 0 46.4 46.4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>138设置、系统设置、功能设置、属性</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-1790.560000, -46.400000)" fill="#50A1EC" fill-rule="nonzero">
+            <g id="138设置、系统设置、功能设置、属性" transform="translate(1790.560000, 46.400000)">
+                <rect id="矩形" opacity="0" x="0" y="0" width="46.4" height="46.4"></rect>
+                <path d="M43.890706,19.2851449 C43.8812948,19.2004447 43.8718837,19.1298613 43.857767,19.0875112 L43.857767,19.0498667 L43.8389447,18.9463443 C43.5048497,17.3182191 42.4272755,16.2688783 41.0861897,16.2688783 L40.8650282,16.2688783 C38.578124,16.2688783 36.7241317,14.4054748 36.7241317,12.1279818 C36.7241317,11.6009586 36.968821,10.8527739 37.0723434,10.5892623 C37.7217113,9.0740706 37.0299934,7.34712854 35.425396,6.46718804 L30.3763256,3.61091057 L30.2822143,3.57797162 C29.9057692,3.45562695 29.4681517,3.30975446 28.978773,3.30975446 C28.0658936,3.30975446 27.0400806,3.73325524 26.4048294,4.36850641 C25.6095891,5.15433563 23.9955805,6.32602111 23.0356454,6.32602111 C22.0804159,6.32602111 20.4617018,5.15904119 19.6664615,4.36850641 C18.9888602,3.70031629 18.052453,3.30975446 17.0925179,3.30975446 C16.5890225,3.30975446 16.1655217,3.45092139 15.7890766,3.57797162 L15.7043764,3.61091057 L10.4106167,6.47659917 L10.3776778,6.49542142 C9.09305874,7.3000729 8.57074111,9.14465407 9.22481453,10.6080845 L9.23422566,10.6269068 L9.24363679,10.645729 C9.3471592,10.8763017 9.66713757,11.6574253 9.66713757,12.3397322 C9.66713757,14.6266364 7.80373415,16.4806286 5.52624108,16.4806286 L5.30507956,16.4806286 C3.90282143,16.4806286 2.85348061,17.5158528 2.55232451,19.1769169 L2.53350225,19.2710282 L2.53350225,19.3039672 C2.53350225,19.3510228 2.51467999,19.4169007 2.5005633,19.5016009 C2.3829242,20.2121411 2.10059034,21.8873219 2.10059034,23.2566411 C2.10059034,24.6259603 2.37821863,26.3011411 2.5005633,27.0116813 C2.50997443,27.0963815 2.51938556,27.1669649 2.53350225,27.209315 L2.53350225,27.2469595 L2.55232451,27.3504819 C2.88641956,28.9786071 3.96399376,30.027948 5.30507956,30.027948 L5.4180131,30.027948 C7.7049173,30.027948 9.55890959,31.8913514 9.55890959,34.1688445 C9.55890959,34.6958676 9.31422025,35.4440523 9.21069784,35.7075639 C8.5848578,37.1333499 9.17775889,38.9638144 10.5611948,39.8861049 L10.5988393,39.9049272 L15.5867373,42.6812101 L15.6808486,42.714149 C16.0572937,42.8364937 16.4855001,42.9823662 16.9748788,42.9823662 C18.019514,42.9823662 18.9606269,42.5823932 19.5488224,41.9236142 C19.6052891,41.8812642 19.6617559,41.8247974 19.7276338,41.7683306 C20.329946,41.2413074 21.9486601,39.8484604 23.0168232,39.8484604 C23.8120635,39.8484604 25.1437382,40.6813453 26.484824,42.0224311 C27.1624252,42.6906212 28.0988325,43.081183 29.0587676,43.081183 C29.7081355,43.081183 30.188103,42.9023716 30.7339485,42.6341544 L30.7527707,42.6247433 L35.867719,39.7966992 L35.8865413,39.777877 C37.1711603,38.9732255 37.6934779,37.1286443 37.0394045,35.6652139 L37.0299934,35.6463916 L37.0205822,35.6275694 C37.0111711,35.6228638 36.6111981,34.7899789 36.6864872,34.0417942 L36.6958983,33.9947386 L36.6958983,33.9476829 C36.6958983,31.6607787 38.5593017,29.8067864 40.8367948,29.8067864 L41.072073,29.8067864 C42.4743311,29.8067864 43.5236719,28.7715623 43.8248281,27.1104982 L43.8436503,27.0163869 L43.8436503,26.9834479 C43.8530614,26.9458034 43.8624726,26.8893366 43.8765893,26.8140476 C43.9989339,26.1223297 44.2815012,24.5083212 44.2815012,23.030774 C44.2906789,21.6661604 44.0130506,19.9956851 43.890706,19.2851449 L43.890706,19.2851449 Z M23.1862235,29.7503197 C19.5676446,29.7503197 16.6360781,26.8187532 16.6360781,23.2001743 C16.6360781,19.5815954 19.5676446,16.650029 23.1862235,16.650029 C26.8048024,16.650029 29.7363689,19.5815954 29.7363689,23.2001743 C29.7363689,26.8187532 26.8048024,29.7503197 23.1862235,29.7503197 L23.1862235,29.7503197 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/menu_icon/volumn.svg b/src/assets/menu_icon/volumn.svg
new file mode 100644
index 0000000..963be6a
--- /dev/null
+++ b/src/assets/menu_icon/volumn.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>公告</title>
+    <defs>
+        <filter x="-2.0%" y="-6.5%" width="104.1%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.400000, -609.600000)" fill="#339DFF" fill-rule="nonzero">
+            <g id="编组-16" filter="url(#filter-1)" transform="translate(40.600000, 609.600000)">
+                <g id="公告" transform="translate(150.800000, 0.000000)">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
+                    <path d="M30.3731127,7.0415548 C30.6461469,7.47823638 30.7909962,7.98286723 30.7909962,8.49788033 L30.7909962,37.5026565 C30.7909962,38.5015369 30.2490901,39.421784 29.3754337,39.9060218 C28.5017772,40.3902597 27.4341394,40.3621897 26.5871353,39.8327127 L15.4811218,32.8913027 L9.59667074,32.8913027 C7.47215062,32.8913027 5.74988677,31.1690388 5.74988677,29.0445187 L5.74988677,16.9560586 C5.74988677,14.8315385 7.47215062,13.1092746 9.59667074,13.1092746 L15.4811218,13.1092746 L26.5871353,6.1682689 C27.2050859,5.78194662 27.9512052,5.65696139 28.6613178,5.82081487 C29.3714304,5.98466834 29.9873526,6.42393505 30.3735574,7.0419591 L30.3731127,7.0415548 Z M35.2380429,12.4399576 C35.8250354,12.0325632 36.6311444,12.1781494 37.0385482,12.7651353 C41.318693,18.9141159 41.32058,27.0770845 37.0432785,33.2280433 C36.63061,33.7993823 35.8365528,33.9353013 35.2573529,33.5337405 C34.6781529,33.1321798 34.5269284,32.3408949 34.9172316,31.7540499 C38.5795365,26.490065 38.5778106,19.5026379 34.9129056,14.2404629 C34.5055112,13.6534704 34.6510974,12.8473614 35.2380833,12.4399576 L35.2380429,12.4399576 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index a253ab6..8d3881f 100644
--- a/src/components/NavMenu.vue
+++ b/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>
diff --git a/src/pages/AlertListPage.vue b/src/pages/AlertListPage.vue
index f38be78..6496257 100644
--- a/src/pages/AlertListPage.vue
+++ b/src/pages/AlertListPage.vue
@@ -15,11 +15,6 @@ alarmList.value = (store.data1.alarmArrList ?? []).map((item, index) => ({
 }));
 
 store.$subscribe((mutation, state) => {
-  //   console.log("====state====\n");
-  //   console.log(state.data1);
-  //   console.log(state.data2);
-  //   console.log(state.data3);
-  //   console.log("====state end====\n");
   alarmList.value = state.data1.alarmArrList.map((item, index) => ({
     id: item.id,
     eqName: item.equipmentName,
@@ -29,233 +24,6 @@ store.$subscribe((mutation, state) => {
     position: `${item.productLine} - ${item.segment}`,
   }));
 });
-
-// const tableData = [
-//   {
-//     id: 1,
-//     eqName: "设备00A",
-//     eqIndex: "1",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 2,
-//     eqName: "设备00B",
-//     eqIndex: "2",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 3,
-//     eqName: "设备00C",
-//     eqIndex: "3",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 4,
-//     eqName: "设备00D",
-//     eqIndex: "4",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 5,
-//     eqName: "设备00E",
-//     eqIndex: "5",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 6,
-//     eqName: "设备00F",
-//     eqIndex: "6",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 7,
-//     eqName: "设备00G",
-//     eqIndex: "7",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 1,
-//     eqName: "设备00A",
-//     eqIndex: "1",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 2,
-//     eqName: "设备00B",
-//     eqIndex: "2",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 3,
-//     eqName: "设备00C",
-//     eqIndex: "3",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 4,
-//     eqName: "设备00D",
-//     eqIndex: "4",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 5,
-//     eqName: "设备00E",
-//     eqIndex: "5",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 6,
-//     eqName: "设备00F",
-//     eqIndex: "6",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 7,
-//     eqName: "设备00G",
-//     eqIndex: "7",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 1,
-//     eqName: "设备00A",
-//     eqIndex: "1",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 2,
-//     eqName: "设备00B",
-//     eqIndex: "2",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 3,
-//     eqName: "设备00C",
-//     eqIndex: "3",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 4,
-//     eqName: "设备00D",
-//     eqIndex: "4",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 5,
-//     eqName: "设备00E",
-//     eqIndex: "5",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 6,
-//     eqName: "设备00F",
-//     eqIndex: "6",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 7,
-//     eqName: "设备00G",
-//     eqIndex: "7",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 1,
-//     eqName: "设备00A",
-//     eqIndex: "1",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 2,
-//     eqName: "设备00B",
-//     eqIndex: "2",
-//     alarmGrade: 1,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 3,
-//     eqName: "设备00C",
-//     eqIndex: "3",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 4,
-//     eqName: "设备00D",
-//     eqIndex: "4",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 5,
-//     eqName: "设备00E",
-//     eqIndex: "5",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 6,
-//     eqName: "设备00F",
-//     eqIndex: "6",
-//     alarmGrade: 3,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-//   {
-//     id: 7,
-//     eqName: "设备00G",
-//     eqIndex: "7",
-//     alarmGrade: 2,
-//     alarmDetail: "lorem sdf fkj",
-//     position: "x,y",
-//   },
-// ];
 </script>
 
 <template>
diff --git a/src/pages/DataPage.vue b/src/pages/DataPage.vue
index e038c26..0f3ea85 100644
--- a/src/pages/DataPage.vue
+++ b/src/pages/DataPage.vue
@@ -24,14 +24,13 @@ import TeamChartMonth from "../components/TeamChartMonth.vue";
 .data-list {
   height: 100%;
   width: 480px;
-  background: #ccc3;
 
   position: absolute;
   top: 0;
-  right: 0;
+  right: 32px;
 
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-around;
 }
 </style>