样式

src/components/RouterSearch/index.vue

@@ -170,7 +170,10 @@ defineExpose({
 .w-220px {
     width: 220px !important;
 }
-.custom-hover1{
+.custom-hover1:hover{
+  opacity: 0.5;
   background-color: transparent;
+  scale: 1.1;
+  transition: all 50ms;
 }
 </style>

src/layout/components/ToolHeader.vue

@@ -77,7 +77,7 @@ export default defineComponent({
             ></LocaleDropdown>
           ) : undefined} */}
           {message.value ? (
-            <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
+            <Message class="custom-hover custom-hover1" color="var(--top-header-text-color)"></Message>
           ) : undefined}
           <UserInfo></UserInfo>
         </div>
@@ -93,4 +93,10 @@ $prefix-cls: #{$namespace}-tool-header;
 .#{$prefix-cls} {
   transition: left var(--transition-time-02);
 }
+.custom-hover1:hover{
+  opacity: 0.5;
+  background-color: transparent;
+  scale: 1.2;
+  transition: all 50ms;
+}
 </style>

src/layout/components/UserInfo/src/UserInfo.vue

@@ -51,7 +51,7 @@ const toDocument = () => {
 </script>
 
 <template>
-  <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
+  <ElDropdown class="custom-hover custom-hover1" :class="prefixCls" trigger="click">
     <div class="flex items-center">
       <ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
       <span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden" style="color:#ffffff">
@@ -76,3 +76,13 @@ const toDocument = () => {
     </template>
   </ElDropdown>
 </template>
+
+<style lang="scss" scoped>
+
+.custom-hover1:hover{
+  opacity: 0.5;
+  background-color: transparent;
+  scale: 1.1;
+  transition: all 50ms;
+}
+</style>