Browse Source

修改样式

lex-xin 6 months ago
parent
commit
3e5ad7ad5a

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

@@ -17,7 +17,7 @@
 
           <n-popover
             v-if="isAuth"
-            trigger="click"
+            trigger="hover"
             ref="popoverRef"
             :to="false"
             placement="bottom-end"
@@ -26,7 +26,8 @@
             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')">
@@ -358,12 +359,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 {
@@ -479,18 +494,19 @@ export default ManageNotification;
     align-items: center;
     font-size: 14px;
     color: #333333;
-    line-height: 22px;
+    font-weight: 600;
+    line-height: 20px;
     padding-bottom: 10px;
     .iconNotifit1,
     .iconNotifit2 {
-      width: 22px;
-      height: 22px;
+      width: 20px;
+      height: 20px;
       margin-right: 6px;
       flex-shrink: 0;
     }
     span {
       line-height: 1;
-      padding-bottom: 4px;
+      padding-bottom: 2px;
     }
   }
 
@@ -548,11 +564,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 {

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

@@ -17,7 +17,7 @@
 
           <n-popover
             v-if="isAuth"
-            trigger="click"
+            trigger="hover"
             ref="popoverRef"
             :to="false"
             placement="bottom-end"
@@ -26,7 +26,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)">
@@ -381,12 +381,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 {
@@ -502,6 +516,7 @@ export default ManageNotification;
     align-items: center;
     font-size: 14px;
     color: #333333;
+    font-weight: 600;
     line-height: 22px;
     padding-bottom: 10px;
     .iconNotifit1,
@@ -513,7 +528,7 @@ export default ManageNotification;
     }
     span {
       line-height: 1;
-      padding-bottom: 4px;
+      padding-bottom: 2px;
     }
   }
 
@@ -571,11 +586,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 {

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

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