样式调整

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,53 @@ 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: 40px;
+          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;
+
+              .ant-select-selection-item {
+                line-height: 38px !important;
+              }
+
+              .ant-select-selection-placeholder {
+                line-height: 38px !important;
+              }
+            }
+
+            .ant-select-arrow {
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
         }
       }
 
@@ -696,6 +740,8 @@ export default {
         gap: 10px;
         flex-wrap: wrap;
         min-width: 300px;
+        align-items: center;
+        height: 40px; // 按钮组也保持相同高度
       }
 
       .btn, .btnn {
@@ -922,6 +968,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-select-selection-placeholder {
+                line-height: 36px !important;
+              }
+            }
+          }
         }
       }
     }
@@ -957,10 +1023,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;
+          }
         }
       }
     }