样式调整

src/views/tag/TagManage.vue

@@ -685,7 +685,7 @@ export default {
       flex-wrap: wrap;
       width: 100%;
       gap: 15px;
-      align-items: flex-start; // 确保顶部对齐
+      align-items: flex-start;
 
       .select {
         flex: 1;
@@ -693,12 +693,12 @@ export default {
         max-width: 300px;
         display: flex;
         align-items: center;
-        height: 40px; // 固定高度确保一致
+        height: 40px;
 
         :deep(.filter-input),
         :deep(.filter-select) {
           width: 100%;
-          height: 40px !important; // 强制设置高度
+          height: 40px !important;
           border-radius: 8px;
 
           // 输入框样式
@@ -717,19 +717,74 @@ export default {
               border-radius: 8px;
               display: flex;
               align-items: center;
+              padding: 0 11px;
 
               .ant-select-selection-item {
                 line-height: 38px !important;
+                display: flex;
+                align-items: center;
               }
 
               .ant-select-selection-placeholder {
                 line-height: 38px !important;
+                display: flex;
+                align-items: center;
+              }
+
+              .ant-select-selection-search {
+                display: flex;
+                align-items: center;
+
+                .ant-select-selection-search-input {
+                  height: 38px;
+                  display: flex;
+                  align-items: center;
+                }
               }
             }
 
+            // 下拉箭头居中样式
             .ant-select-arrow {
+              right: 11px;
               top: 50%;
               transform: translateY(-50%);
+              margin-top: 0;
+              width: 12px;
+              height: 12px;
+
+              .anticon {
+                font-size: 12px;
+                color: rgba(0, 0, 0, 0.45);
+                transition: transform 0.3s;
+
+                svg {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+
+            // 下拉框打开时箭头旋转
+            &.ant-select-open {
+              .ant-select-arrow {
+                .anticon {
+                  transform: rotate(180deg);
+                }
+              }
+            }
+
+            // 清除按钮样式
+            .ant-select-clear {
+              right: 30px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 12px;
+              height: 12px;
+              margin-top: 0;
+
+              .anticon-close-circle {
+                font-size: 12px;
+              }
             }
           }
         }
@@ -741,7 +796,7 @@ export default {
         flex-wrap: wrap;
         min-width: 300px;
         align-items: center;
-        height: 40px; // 按钮组也保持相同高度
+        height: 40px;
       }
 
       .btn, .btnn {
@@ -942,7 +997,7 @@ export default {
   line-height: 1.4;
   max-height: 2.8em;
   overflow: hidden;
-  display: -webkit-box;
+  display: -webkitbox;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   text-align: center;
@@ -968,7 +1023,7 @@ export default {
         .select {
           min-width: 180px;
           max-width: 250px;
-          height: 38px; // 调整高度
+          height: 38px;
 
           :deep(.filter-input),
           :deep(.filter-select) {
@@ -983,7 +1038,7 @@ export default {
               height: 38px !important;
 
               .ant-select-selection-item,
-              .ant-select-selection-placeholder {
+              .ant-selectselection-placeholder {
                                           line-height: 36px !important;
                                         }
             }
@@ -1023,7 +1078,7 @@ export default {
         .select {
           min-width: 160px;
           max-width: 220px;
-          height: 36px; // 调整高度
+          height: 36px;
 
           :deep(.filter-input),
           :deep(.filter-select) {
@@ -1054,7 +1109,7 @@ export default {
 
         .button-group {
           min-width: 250px;
-          height: 36px; // 调整按钮组高度
+          height: 36px;
 
           .btn, .btnn {
             height: 36px;
@@ -1191,7 +1246,7 @@ export default {
 
   .other-tags-cell {
     max-width: 150px;
-    font-size: 11px;
+    fontsize: 11px;
     line-height: 1.2;
     max-height: 2.4em;
   }
@@ -1241,14 +1296,14 @@ export default {
       overflow: hidden;
 
       .ant-modal-header {
-        background: #4ea6ff !important; // 修改为蓝色背景
+        background: #4ea6ff !important;
         border-bottom: 1px solid #4ea6ff;
         padding: 16px 24px;
 
         .ant-modal-title {
           font-size: 16px;
           font-weight: 600;
-          color: #fff !important; // 修改文字为白色
+          color: #fff !important;
         }
       }
 
@@ -1268,14 +1323,14 @@ export default {
           line-height: 44px;
 
           .ant-modal-close-icon {
-            color: #fff !important; // 关闭按钮改为白色
+                                      color: #fff !important;
                                     }
         }
 
         &:hover {
           .ant-modal-close-x {
             .ant-modal-close-icon {
-              color: #f0f0f0 !important; // 鼠标悬停时浅灰色
+              color: #f0f0f0 !important;
             }
           }
         }
@@ -1437,5 +1492,4 @@ export default {
     }
   }
 }
-
 </style>