💄 style: TopSearchTerm样式修改

src/views/searchTerm/rootWordManage/components/root-word-manage-table.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { nextTick, onMounted, reactive, ref } from 'vue';
+import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue';
 import { Plus, Search, Upload } from '@element-plus/icons-vue';
 import * as api from '../api';
 import type { UploadInstance, UploadRawFile } from 'element-plus';
@@ -35,7 +35,7 @@ const tableLoading = ref(false);
 const tableData = ref<DataItem[]>([]);
 const total = ref(0);
 const currentPage = ref(1);
-const pageSize = ref(10);
+const pageSize = ref(20);
 
 const searchTermInpRef = ref();
 
@@ -121,6 +121,8 @@ async function fetchSearchTermList() {
     console.error('==Error==', error);
   } finally {
     tableLoading.value = false;
+    await nextTick();
+    window.dispatchEvent(new Event('resize'));
   }
 }
 
@@ -359,8 +361,8 @@ function handleResponse(response: any) {
       </el-card>
       <!-- 表格 -->
       <el-card shadow="hover" style="border: none">
-        <div style="height: 535px; overflow: auto">
-          <el-table :data="tableData" stripe style="width: 100%">
+        <div style="height: 800px;">
+          <el-table :data="tableData" height="800" stripe style="width: 100%">
             <el-table-column fixed prop="add_date" label="添加日期" width="180" sortable>
               <template #header>
                 <el-icon style="top: 2px; margin-right: 3px">
@@ -429,7 +431,7 @@ function handleResponse(response: any) {
           <el-pagination
             v-model:current-page="currentPage"
             v-model:page-size="pageSize"
-            :page-sizes="[10, 20, 30, 50]"
+            :page-sizes="[20, 40, 50, 100]"
             layout="sizes, prev, pager, next"
             :total="total"
             @size-change="handleSizeChange"

src/views/searchTerm/topSearchTermRank/index.vue

@@ -124,7 +124,7 @@ function handleJump() {
       </div>
     </el-divider>
   </div>
-  <el-card class="mx-3" v-loading="tableLoading" style="border: none">
+  <el-card class="mx-3 mb-2.5 h-full" v-loading="tableLoading" style="border: none;">
     <!-- table筛选栏 -->
     <div class="flex justify-between">
       <div class="flex gap-5 flex-wrap">
@@ -187,7 +187,7 @@ function handleJump() {
     </div>
     <!-- table -->
     <el-card shadow="never" class="mt-5">
-      <div style="height: 795px; overflow: auto">
+      <div style="height: 100%; overflow: auto">
         <el-table :data="tableData" height="795" stripe style="width: 100%">
           <el-table-column fixed prop="searchTerm" label="搜索词" width="260">
             <template #header>

src/views/searchTerm/topSearchTermTable/index.vue

@@ -206,7 +206,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
     case 3:
       return { backgroundColor: '#CD7F32', color: '#fff', border: '1px solid #CD7F32' }; // 铜色
     default:
-      return { backgroundColor: '#e0e0e0', color: '#000', border: '1px solid #e0e0e0' };
+      return { backgroundColor: '#f0f0f0', color: '#000', border: '1px solid #e0e0e0' };
   }
 }
 
@@ -234,7 +234,7 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
       </div>
     </el-divider>
   </div>
-  <el-card class="mx-3" v-loading="tableLoading" style="border: none">
+  <el-card class="mx-3 mb-2.5 h-full" v-loading="tableLoading" style="border: none;">
     <!-- table筛选栏 -->
     <div class="flex justify-between">
       <div class="flex gap-5 flex-wrap">
@@ -322,7 +322,7 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
     </div>
     <!-- table -->
     <el-card shadow="never" class="mt-5">
-      <div style="height: 795px; overflow: auto">
+      <div style="height: 100%; overflow: auto">
         <el-table :data="tableData" :span-method="arraySpanMethod" height="795" stripe style="width: 100%">
           <!-- 保持索引是1, 2, 3的顺序 不会收到合并单元格的影响 -->
           <el-table-column fixed type="index" width="50" :index="(index) => Math.floor(index / 3) + 1" />