红点提示 鼠标样式

src/assets/font/font.css

@@ -1,9 +1,3 @@
-@font-face {
-    font-family: "clockFont";
-    src: url('alarm clock.ttf');
-    font-weight: normal;
-    font-style: normal;
-  }
   @font-face {
     font-family: "DS1Font";
     src: url('DS-DIGI-1.ttf');

src/components/substationList/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script>
+export default {
+
+    data() {
+        return {
+            
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/components/SideBar/UserIcon.vue

@@ -9,7 +9,7 @@
       mode="horizontal"
       class="header_menu"
     >
-    <!-- #TODO 目前写死 后面再改 -->
+      <!-- #TODO 目前写死 后面再改 -->
       <!-- 根据 sidebarRouters 路由，生成菜单 -->
       <!-- <sidebar-item
             v-for="(route, index) in sidebarRouters"
@@ -41,7 +41,7 @@
     <div class="header_user_line">|</div>
     <!-- 时间 -->
     <div class="time_box">
-        <!-- #TODO 动态获取实时变化 -->
+      <!-- #TODO 动态获取实时变化 -->
       <span class="time_day">2023-08-09</span>
       <span class="time_weekday">星期三</span>
       <span class="time_date">14:20:22</span>
@@ -49,12 +49,15 @@
     <div class="header_user_line">|</div>
     <!-- 图标 -->
     <div class="icon_box">
-      <i class="el-icon-message-solid"></i>
+      <el-badge :value="9" class="item">
+        <i class="el-icon-message-solid"></i>
+      </el-badge>
+
       <div class="header_user_line">/</div>
       <i class="el-icon-user-solid"></i>
       <span>username</span>
       <div class="header_user_line">/</div>
-      <i class="el-icon-switch-button" style="margin-right:2rem"></i>
+      <i class="el-icon-switch-button" style="margin-right: 2rem"></i>
     </div>
   </div>
 </template>
@@ -96,18 +99,19 @@ export default {
   .icon_box {
     display: flex;
     align-items: center;
+    cursor: pointer;
     i {
       font-size: 1.8rem;
       color: #00cefb;
     }
-    span{
-        font-size: 1.4rem;
-        color: #516380;
+    span {
+      font-size: 1.4rem;
+      color: #516380;
     }
     .header_user_line {
       font-size: 1.33rem;
       margin: 0 2rem;
-      color: #7A13E1;
+      color: #7a13e1;
       cursor: pointer;
     }
   }
@@ -118,13 +122,14 @@ export default {
 .header_user_line {
   font-size: 1.33rem;
   margin-right: 2rem;
-  color: #7A13E1;
+  color: #7a13e1;
   cursor: pointer;
 }
 ::v-deep .el-menu-item {
   height: 48px !important;
   font-size: 1.33rem;
   line-height: 48px !important;
+  color: #516380 !important;
 }
 ::v-deep .is-active {
   border-bottom: 4px solid #134bea !important;

src/layout/components/SideBar/index.vue

@@ -34,6 +34,7 @@ export default {
   height: 48px;
   background-color: #fff;
   display: flex;
+  margin-bottom: 2rem;
   justify-content: space-between;
   .left_box {
     display: flex;