样式调整

src/views/tag/TagManage.vue

@@ -10,6 +10,7 @@
               allowClear
               showSearch
               @pressEnter="searchSubmit"
+              class="filter-input"
           >
           </a-input>
         </div>
@@ -19,14 +20,16 @@
               placeholder="请选择热点标签状态"
               :options="hotOptions"
               allowClear
+              class="filter-select"
           ></a-select>
         </div>
         <div class="select">
           <a-select
               v-model:value="searchParam.isPublic"
               placeholder="请选择前台公共显示状态"
-              :options="hotOptions"
+              :options="publicOptions"
               allowClear
+              class="filter-select"
           ></a-select>
         </div>
         <div class="button-group">
@@ -114,9 +117,9 @@
 
       <div class="tableBox">
         <div class="pa">
-<!--          <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
+          <!--          <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
-            共 {{ tableDataTotal }} 条记录
+                      共 {{ tableDataTotal }} 条记录
-          </div>-->
+                    </div>-->
           <a-pagination
               v-if="tableDataTotal > 0"
               :showSizeChanger="false"
@@ -155,11 +158,11 @@
         >
           <template #bodyCell="{ record, column }">
             <!-- 关联课程ID -->
-<!--            <template v-if="column.key === 'courseId'">
+            <!--            <template v-if="column.key === 'courseId'">
-              <div class="course-id-cell" :title="record.courseId">
+                          <div class="course-id-cell" :title="record.courseId">
-                {{ record.courseId }}
+                            {{ record.courseId }}
-              </div>
+                          </div>
-            </template>-->
+                        </template>-->
 
             <!-- 关联课程名称 -->
             <template v-if="column.key === 'courseName'">
@@ -207,9 +210,9 @@
         </a-table>
 
         <div class="course-pagination">
-<!--          <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
+          <!--          <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
-            共 {{ courseTableTotal }} 条记录
+                      共 {{ courseTableTotal }} 条记录
-          </div>-->
+                    </div>-->
           <a-pagination
               v-if="courseTableTotal > 0"
               :showSizeChanger="false"
@@ -271,6 +274,11 @@ export default {
       hotOptions: [
         { value: "true", label: "开启" },
         { value: "false", label: "关闭" }
+      ],
+
+      publicOptions: [
+        { value: "true", label: "开启" },
+        { value: "false", label: "关闭" }
       ]
     });
 
@@ -677,17 +685,108 @@ export default {
       flex-wrap: wrap;
       width: 100%;
       gap: 15px;
+      align-items: flex-start;
 
       .select {
         flex: 1;
         min-width: 200px;
         max-width: 300px;
+        display: flex;
+        align-items: center;
+        height: 40px;
 
-        :deep(.ant-input),
+        :deep(.filter-input),
-        :deep(.ant-select) {
+        :deep(.filter-select) {
           width: 100%;
-          height: 30px;
+          height: 40px !important;
           border-radius: 8px;
+
+          // 输入框样式
+          &.ant-input {
+            height: 40px !important;
+            line-height: 40px;
+            padding: 0 11px;
+          }
+
+          // 选择器样式
+          &.ant-select {
+            height: 40px !important;
+
+            .ant-select-selector {
+              height: 40px !important;
+              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;
+              }
+            }
+          }
         }
       }
 
@@ -696,6 +795,8 @@ export default {
         gap: 10px;
         flex-wrap: wrap;
         min-width: 300px;
+        align-items: center;
+        height: 40px;
       }
 
       .btn, .btnn {
@@ -896,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;
@@ -922,6 +1023,26 @@ export default {
         .select {
           min-width: 180px;
           max-width: 250px;
+          height: 38px;
+
+          :deep(.filter-input),
+          :deep(.filter-select) {
+            height: 38px !important;
+
+            &.ant-input {
+              height: 38px !important;
+              line-height: 38px;
+            }
+
+            &.ant-select .ant-select-selector {
+              height: 38px !important;
+
+              .ant-select-selection-item,
+              .ant-selectselection-placeholder {
+                line-height: 36px !important;
+              }
+            }
+          }
         }
       }
     }
@@ -957,10 +1078,43 @@ export default {
         .select {
           min-width: 160px;
           max-width: 220px;
+          height: 36px;
+
+          :deep(.filter-input),
+          :deep(.filter-select) {
+            height: 36px !important;
+
+            &.ant-input {
+              height: 36px !important;
+              line-height: 36px;
+              font-size: 13px;
+            }
+
+            &.ant-select {
+              height: 36px !important;
+
+              .ant-select-selector {
+                height: 36px !important;
+                font-size: 13px;
+
+                .ant-select-selection-item,
+                .ant-select-selection-placeholder {
+                  line-height: 34px !important;
+                  font-size: 13px;
+                }
+              }
+            }
+          }
         }
 
         .button-group {
           min-width: 250px;
+          height: 36px;
+
+          .btn, .btnn {
+            height: 36px;
+            padding: 0 16px;
+          }
         }
       }
     }
@@ -1092,7 +1246,7 @@ export default {
 
   .other-tags-cell {
     max-width: 150px;
-    font-size: 11px;
+    fontsize: 11px;
     line-height: 1.2;
     max-height: 2.4em;
   }
@@ -1142,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;
         }
       }
 
@@ -1169,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;
             }
           }
         }
@@ -1338,5 +1492,4 @@ export default {
     }
   }
 }
-
 </style>