优化样式

src/components/AutoComponents/MDivider/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <el-divider>
+    <slot></slot>
+  </el-divider>
+</template>
+
+<script>
+export default {
+  name: 'MDivider'
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-divider__text {
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+}
+</style>

src/layout/components/LayoutNotification.vue

@@ -25,7 +25,7 @@
           </div>
         </div>
       </div>
-      <el-divider v-if="items.length > 0 && items.length >= total">没有更多消息了</el-divider>
+      <m-divider v-if="items.length > 0 && items.length >= total">没有更多消息了</m-divider>
       <el-empty v-if="items.length === 0" description="暂无通知"></el-empty>
     </div>
     <el-badge class="cursor-pointer" slot="reference" :value="badgeValue" :max="99" :hidden="badgeValue === 0">

src/styles/orangeTheme.scss

@@ -78,6 +78,12 @@ $theme-colors: (
         background-color: #ffffff;
         border-color: #e4e7ed;
         color: #c0c4cc;
+        &:hover,
+      &:focus {
+        background-color: lighten($orange-color, 42%); // 非常浅的橙色
+        border-color: lighten($orange-color, 20%);    // 浅橙色边框
+        color: $orange-color;                         // 文字变橙色
+      }
       }
 
       // Plain 模式（镂空按钮）
@@ -106,6 +112,12 @@ $theme-colors: (
           background-color: #ffffff;
           border-color: #e4e7ed;
           color: #c0c4cc;
+          &:hover,
+          &:focus {
+            background-color: #ffffff;
+            border-color: #e4e7ed;
+            color: #c0c4cc;
+          }
         }
       }
     }
@@ -130,10 +142,17 @@ $theme-colors: (
       }
 
       &.is-disabled {
-        background-color: lighten($color, 40%);
+        background-color: lighten($color, 20%);
         border-color: lighten($color, 20%);
         color: #fff;
         opacity: 0.6;
+        &:hover,
+        &:focus {
+          background-color: lighten($color, 20%);
+          border-color: lighten($color, 20%);
+          color: #fff;
+          opacity: 0.6;
+        }
       }
 
       // 镂空按钮样式（is-plain）
@@ -142,7 +161,7 @@ $theme-colors: (
         border-color: lighten($color, 20%);
         color: $color;
 
-        &:hover,
+        &:hover
         &:focus {
           background-color: $color;
           border-color: $color;
@@ -159,6 +178,12 @@ $theme-colors: (
           background-color: lighten($color, 45%);
           border-color: lighten($color, 30%);
           color: lighten($color, 20%);
+          &:hover
+          &:focus {
+            background-color: lighten($color, 45%);
+            border-color: lighten($color, 30%);
+            color: lighten($color, 20%);
+          }
         }
       }
     }