修改样式

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-notification-detail.vue

@@ -18,7 +18,7 @@
 
           <n-popover
             v-if="isAuth"
-            trigger="click"
+            trigger="hover"
             ref="popoverRef"
             :to="false"
             placement="bottom-end"
@@ -27,14 +27,15 @@
             class="popoverContainer"
           >
             <template #trigger>
-              <i class="iconMorePoint iconMore"></i>
+            <span class="iconMore"><i class="iconMorePoint "></i></span>
+              
             </template>
             <div class="p-list">
               <div class="p-item" @click="onOperation(groupDetail, 'edit')">
                 编辑公告
               </div>
               <div class="p-item" @click="onOperation(groupDetail, 'top')">
-                设为置顶
+                {{groupDetail.topFlag ? '取消置顶': '设为置顶'}}
               </div>
               <div
                 class="p-item p-red"
@@ -226,7 +227,7 @@ const ManageNotification = defineComponent({
         } else if (type === "top") {
           await imGroupNoticeUpdate({
             groupId: data.groupProfile.groupID,
-            topFlag: true,
+            topFlag: item.topFlag ? false : true,
             id: item.id,
           });
           getNotification();
@@ -369,12 +370,26 @@ export default ManageNotification;
     }
 
     .iconMore {
-      width: 23px;
-      height: 17px;
+      width: 25px;
+      height: 25px;
       position: absolute;
       right: 0;
       top: 5px;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .iconMorePoint {
+        display: inline-block;
+        width: 23px;
+        height: 17px;
+      }
+
+      &:hover {
+        background: #f2f2f2;
+        border-radius: 4px;
+      }
     }
   }
   .users {
@@ -490,6 +505,7 @@ export default ManageNotification;
     align-items: center;
     font-size: 14px;
     color: #333333;
+    font-weight: 600;
     line-height: 22px;
     padding-bottom: 10px;
     .iconNotifit1,
@@ -501,7 +517,7 @@ export default ManageNotification;
     }
     span {
       line-height: 1;
-      padding-bottom: 2px;
+      padding-bottom: 5px;
     }
   }
 
@@ -559,11 +575,11 @@ export default ManageNotification;
   margin-top: 8px !important;
 
   .p-item {
-    margin-bottom: 8px;
+    margin-bottom: 6px;
     font-size: 14px;
     color: #131415;
     border-radius: 8px;
-    padding: 12px 0;
+    padding: 8px 0;
     text-align: center;
     cursor: pointer;
     &:hover {

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-notification.vue

@@ -18,7 +18,7 @@
 
           <n-popover
             v-if="isAuth"
-            trigger="click"
+            trigger="hover"
             ref="popoverRef"
             :to="false"
             placement="bottom-end"
@@ -27,7 +27,7 @@
             class="popoverContainer"
           >
             <template #trigger>
-              <i class="iconMorePoint iconMore"></i>
+              <span class="iconMore"><i class="iconMorePoint "></i></span>
             </template>
             <div class="p-list">
               <div class="p-item" @click="onOperation(item, 'edit', index)">
@@ -393,12 +393,26 @@ export default ManageNotification;
     }
 
     .iconMore {
-      width: 23px;
-      height: 17px;
+      width: 25px;
+      height: 25px;
       position: absolute;
       right: 0;
       top: 5px;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .iconMorePoint {
+        display: inline-block;
+        width: 23px;
+        height: 17px;
+      }
+
+      &:hover {
+        background: #f2f2f2;
+        border-radius: 4px;
+      }
     }
   }
   .users {
@@ -514,6 +528,7 @@ export default ManageNotification;
     align-items: center;
     font-size: 14px;
     color: #333333;
+    font-weight: 600;
     line-height: 22px;
     padding-bottom: 10px;
     .iconNotifit1,
@@ -525,7 +540,7 @@ export default ManageNotification;
     }
     span {
       line-height: 1;
-      padding-bottom: 2px;
+      padding-bottom: 5px;
     }
   }
 
@@ -583,11 +598,11 @@ export default ManageNotification;
   margin-top: 8px !important;
 
   .p-item {
-    margin-bottom: 8px;
+    margin-bottom: 6px;
     font-size: 14px;
     color: #131415;
     border-radius: 8px;
-    padding: 12px 0;
+    padding: 8px 0;
     text-align: center;
     cursor: pointer;
     &:hover {

src/TUIKit/TUIComponents/container/TUIChat/manage-components/style/web.scss

@@ -178,6 +178,7 @@
         width: 100%;
         font-size: 14Px;
         padding: 10px 0;
+        font-weight: 600;
         text-align: center;
         background: #198CFE;
         border-radius: 8px;