2026-09-16

消息代办调整

src/views/main-sidebar-sub-menu.vue

@@ -5,14 +5,13 @@
     :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
     <template slot="title">
       <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
+      <span :title="menu.name">{{ menu.name }}</span>
       <el-badge
         v-if="showTodoBadge(menu)"
-        class="todo-menu-badge"
+        class="todo-menu-badge todo-menu-badge--sub"
         :value="todoPendingCount"
         :max="99">
-        <span :title="menu.name">{{ menu.name }}</span>
       </el-badge>
-      <span v-else :title="menu.name">{{ menu.name }}</span>
     </template>
     <sub-menu
       v-for="item in menu.list"
@@ -25,14 +24,13 @@
   </el-submenu>
   <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)" :title="menu.name">
     <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
+    <span :title="menu.name">{{ menu.name }}</span>
     <el-badge
       v-if="showTodoBadge(menu)"
       class="todo-menu-badge"
       :value="todoPendingCount"
       :max="99">
-      <span :title="menu.name">{{ menu.name }}</span>
     </el-badge>
-    <span v-else :title="menu.name">{{ menu.name }}</span>
   </el-menu-item>
 </template>
 
@@ -103,25 +101,33 @@
 
 <style scoped>
 .todo-menu-badge {
-  vertical-align: middle;
-  display: inline-block;
-  padding-right: 14px;
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  line-height: 1;
+  z-index: 2;
 }
 
-.todo-menu-badge /deep/ .el-badge__content.is-fixed {
-  top: 16px;
-  right: 2px;
-  transform: translateY(-50%) translateX(45%);
+.todo-menu-badge--sub {
+  right: 32px;
+}
+
+.todo-menu-badge /deep/ .el-badge__content {
+  position: static;
+  transform: none;
   background-color: #ff0000 !important;
   border: none !important;
   box-shadow: none !important;
-  width: 18px;
-  height: 18px;
   min-width: 18px;
+  height: 18px;
   line-height: 18px;
-  padding: 0 !important;
-  border-radius: 50% !important;
+  padding: 0 4px !important;
+  border-radius: 9px !important;
   text-align: center;
   font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>