diff --git a/src/layouts/Basic.vue b/src/layouts/Basic.vue
index 3ef29d9..fc07072 100644
--- a/src/layouts/Basic.vue
+++ b/src/layouts/Basic.vue
@@ -11,6 +11,8 @@ const appStore = useAppStore();
 const router = useRouter();
 const route = useRoute();
 
+console.log({ appStore });
+
 useResponsive(true);
 const navbarHeight = `60px`;
 const navbar = computed(() => appStore.navbar);
@@ -23,14 +25,17 @@ const menuWidth = computed(() => {
 const collapsed = computed(() => {
   return appStore.menuCollapse;
 });
-const paddingStyle = computed(() => {
-  const paddingLeft = renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
-  const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
-  return { ...paddingLeft, ...paddingTop };
-});
 const showSidebar = computed(() => {
   return !(route.meta && route.meta.hideSidebar);
 });
+const paddingStyle = computed(() => {
+  const paddingLeft =
+    showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
+  const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
+  return { ...paddingLeft, ...paddingTop };
+});
+
+console.log('showSidebar', showSidebar);
 
 onMounted(() => {
   checkHasInviteCode();
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
new file mode 100644
index 0000000..1999be5
--- /dev/null
+++ b/src/styles/components/index.scss
@@ -0,0 +1 @@
+@import './table.scss';
\ No newline at end of file
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
new file mode 100644
index 0000000..b0b3d7c
--- /dev/null
+++ b/src/styles/components/table.scss
@@ -0,0 +1,41 @@
+.arco-table {
+  @mixin table-cell-text {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .arco-table-container {
+    border: none !important;
+    .arco-table-element {
+      thead {
+        .arco-table-tr {
+          .arco-table-th {
+            border-bottom: 1px solid var(--Border-1, #d7d7d9);
+            background: var(--BG-100, #f7f8fa);
+            .arco-table-cell {
+              padding: 13px 16px;
+              .arco-table-th-title {
+                @include table-cell-text;
+              }
+            }
+          }
+        }
+      }
+      tbody {
+        .arco-table-tr {
+          .arco-table-td {
+            .arco-table-cell {
+              padding: 13px 16px;
+              .arco-table-cell-content {
+                @include table-cell-text;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 32f4eac..055fb7d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,3 +1,8 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 16:03:42
+ */
+import './vars.css';
+import './components/index.scss';
 import 'normalize.css';
 import 'uno.css';
-import './vars.css';
diff --git a/src/views/components/dataEngine/hotCloud.vue b/src/views/components/dataEngine/hotCloud.vue
index fc0de02..7cd10bb 100644
--- a/src/views/components/dataEngine/hotCloud.vue
+++ b/src/views/components/dataEngine/hotCloud.vue
@@ -1,20 +1,15 @@
 <template>
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
-      <a-space align="center">
-        <span>行业词云</span>
-        <a-popover position="tl">
-          <a-button type="primary" class="pop-btn">
-            <template #icon>
-              <icon-question-circle />
-            </template>
-          </a-button>
-          <template #content>
-            <p style="margin: 0">基于行业内内容提取的高频词汇。</p>
-          </template>
-        </a-popover>
-      </a-space>
+    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px 32px; margin: 24px 0">
+      <div class="title-row">
+        <span class="title mr-4px">行业词云</span>
+        <a-tooltip>
+          <template #content>基于行业内内容提取的高频词汇。</template>
+          <icon-question-circle size="16" class="color-#737478" />
+        </a-tooltip>
+      </div>
+
       <div class="multi-row-tag-cloud">
         <!-- 动态生成多行标签 -->
         <div
@@ -211,4 +206,18 @@ a-tag:hover {
   color: #737478 !important;
   margin-left: -5px;
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  // padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
 </style>
diff --git a/src/views/components/dataEngine/hotTranslation.vue b/src/views/components/dataEngine/hotTranslation.vue
index b69c1c8..2fac323 100644
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@@ -2,58 +2,44 @@
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
     <!-- tabel -->
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin-bottom: 24px">
-      <a-space align="center">
-        <span>行业热门话题洞察</span>
-        <a-popover position="tl">
-          <a-button type="primary" class="pop-btn">
-            <template #icon>
-              <icon-question-circle />
-            </template>
-          </a-button>
-          <template #content>
-            <p style="margin: 0">基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</p>
-          </template>
-        </a-popover>
-      </a-space>
+    <a-space
+      direction="vertical"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid"
+      style="background-color: #fff; width: 100%; padding: 0px 20px; margin-bottom: 24px"
+    >
+      <div class="title-row">
+        <span class="title mr-4px">行业热门话题洞察</span>
+        <a-tooltip>
+          <template #content>基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</template>
+          <icon-question-circle size="16" class="color-#737478" />
+        </a-tooltip>
+      </div>
       <a-table
         :columns="columns"
         :data="dataList"
         :filter-icon-align-left="alignLeft"
-        @change="handleChange"
         :scroll="true"
         :pagination="false"
+        @change="handleChange"
       >
         <template #hotTitle>
           <a-space>
             <span>热度指数</span>
-            <a-popover position="tl">
-              <a-button type="primary" class="pop-btn2">
-                <template #icon>
-                  <icon-question-circle />
-                </template>
-              </a-button>
-              <template #content>
-                <p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
-              </template>
-            </a-popover>
+            <a-tooltip>
+              <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
+              <icon-question-circle size="14" class="color-#737478" />
+            </a-tooltip>
           </a-space>
         </template>
         <template #sentimentTitle>
           <a-space>
             <span>情感倾向</span>
-            <a-popover position="tr">
-              <a-button type="primary" class="pop-btn2">
-                <template #icon>
-                  <icon-question-circle />
-                </template>
-              </a-button>
-              <template #content>
-                <p style="margin: 0">
-                  统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。
-                </p>
-              </template>
-            </a-popover>
+            <a-tooltip>
+              <template #content
+                >统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
+              >
+              <icon-question-circle size="14" class="color-#737478" />
+            </a-tooltip>
           </a-space>
         </template>
         <template #rank="{ record }">
@@ -63,85 +49,92 @@
           <span v-else>{{ record.rank }}</span>
         </template>
         <template #keywords="{ record }">
-          <a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
+          <a-tag
+            v-for="item in record.keywords"
+            :key="item"
+            style="margin-right: 5px"
+            class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px"
+            >{{ item }}</a-tag
+          >
         </template>
         <template #hot="{ record }">
-          <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
+          <img
+            v-for="i in record.hot"
+            :key="i"
+            :src="starImages[i - 1]"
+            style="width: 16px; height: 16px"
+            class="mr-2px"
+          />
         </template>
         <template #sentiment="{ record }">
-          <img
-            v-if="record.felling == '2'"
-            src="@/assets/img/hottranslation/good.png"
-            style="width: 16px; height: 16px"
-          />
-          <img
-            v-else-if="record.felling == '1'"
-            src="@/assets/img/hottranslation/normal.png"
-            style="width: 16px; height: 16px"
-          />
-          <img
-            v-else-if="record.felling == '0'"
-            src="@/assets/img/hottranslation/poor.png"
-            style="width: 16px; height: 16px"
-          />
+          <img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
+          <img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
+          <img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
         </template>
 
         <template #optional="{ record }">
-          <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
+          <a-button type="outline" class="!rounded-4px" @click="gotoDetail(record)">详情</a-button>
         </template>
       </a-table>
     </a-space>
-    <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
+    <a-modal :visible="visible" unmountOnClose modal-class="hot-translation-modal" width="640px" @cancel="handleCancel">
       <template #title>
         <span style="text-align: left; width: 100%">行业热门话题洞察</span>
       </template>
       <div>
         <a-space direction="vertical">
-          <a-space>
-            <span style="margin-right: 16px">话题名称</span>
-            <span>{{ topicInfo.name }}</span>
-          </a-space>
-          <a-space>
-            <span style="margin-right: 16px">话题简介</span>
-            <span>{{ topicInfo.intro }}</span>
-          </a-space>
-          <a-space>
-            <span style="margin-right: 16px">关键词</span>
-            <a-tag v-for="item in topicInfo.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
-          </a-space>
-          <a-space>
-            <span style="margin-right: 16px">热度指数</span>
+          <div class="mb-4px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-48px">话题名称</p>
+            <span class="cts">{{ topicInfo.name }}</span>
+          </div>
+          <div class="mb-10px flex items-start">
+            <p class="cts !mr-16px flex-shrink-0 w-48px">话题简介</p>
+            <span class="cts">{{ topicInfo.intro }}</span>
+          </div>
+          <div class="mb-4px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-48px">关键词</p>
+            <a-tag
+              v-for="item in topicInfo.keywords"
+              :key="item"
+              class="mr-8px py-10px px-8px rounded-4px bg-#F2F3F5 cts !h-24px"
+              >{{ item }}</a-tag
+            >
+          </div>
+          <div class="mb-4px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-48px">热度指数</p>
             <img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
-          </a-space>
-          <a-space>
-            <span style="margin-right: 16px">情感指数</span>
-            <img
-              v-if="topicInfo.felling == '2'"
-              src="@/assets/img/hottranslation/good.png"
-              style="width: 16px; height: 16px"
-            />
+          </div>
+          <div class="mb-4px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-48px">情感指数</p>
+            <img v-if="topicInfo.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-20px h-20px" />
             <img
               v-else-if="topicInfo.felling == '1'"
               src="@/assets/img/hottranslation/normal.png"
-              style="width: 16px; height: 16px"
+              class="w-20px h-20px"
             />
             <img
               v-else-if="topicInfo.felling == '0'"
               src="@/assets/img/hottranslation/poor.png"
-              style="width: 16px; height: 16px"
+              class="w-20px h-20px"
             />
-          </a-space>
-          <a-space direction="top">
-            <span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span>
-            <a-space direction="vertical" style="margin-left: 15px">
-              <a-space v-for="item in topicInfo.industry_topic_sources" :key="item">
-                <a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
+          </div>
+          <div class="flex items-start">
+            <p class="!mr-16px w-48px cts relative top-2px">原始来源</p>
+            <div class="flex flex-col">
+              <div v-for="item in topicInfo.industry_topic_sources" :key="item" class="mb-18px">
+                <a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
+                  item.title
+                }}</a-link>
                 <img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
-              </a-space>
-            </a-space>
-          </a-space>
+              </div>
+            </div>
+          </div>
         </a-space>
       </div>
+      <template #footer>
+        <a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
+        <a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
+      </template>
     </a-modal>
   </view>
 </template>
@@ -188,10 +181,10 @@ const columns = [
     minWidth: 180,
     title: '热度指数',
     dataIndex: 'hot',
+    slotName: 'hot',
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },
-    slotName: 'hot',
   },
   {
     titleSlotName: 'sentimentTitle',
@@ -204,8 +197,7 @@ const columns = [
   {
     title: '操作',
     slotName: 'optional',
-    width: 120,
-    minWidth: 120,
+    width: 80,
   },
 ];
 // 切换排序方向
@@ -305,7 +297,16 @@ const handleOk = () => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+:deep(.arco-table) {
+  tbody {
+    .arco-table-cell {
+      .arco-table-cell-content {
+        color: var(--Text-2, #3c4043);
+      }
+    }
+  }
+}
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -345,4 +346,64 @@ const handleOk = () => {
 :deep(.arco-btn-text:not(.arco-btn-disabled):hover) {
   background-color: transparent;
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
+</style>
+
+<style lang="scss">
+.hot-translation-modal {
+  .arco-modal-header {
+    border-bottom: none;
+    height: 56px;
+    padding: 0 20px;
+    .arco-modal-title {
+      justify-content: flex-start;
+    }
+  }
+
+  .arco-modal-body {
+    padding: 12px 20px 0;
+    .cts {
+      color: var(--Text-2, #3c4043);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+    }
+    p {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .arco-modal-footer {
+    display: flex;
+    height: 64px;
+    padding: 0px 20px;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid var(--Border-1, #d7d7d9);
+    .cancel-btn {
+      border-radius: 4px;
+      border: 1px solid var(--BG-500, #b1b2b5);
+      background: var(--BG-white, #fff);
+      &:hover {
+        border: 1px solid var(--BG-500, #b1b2b5);
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index 6c54794..5e69005 100644
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@@ -1,57 +1,41 @@
+<!-- eslint-disable vue/no-duplicate-attributes -->
 <template>
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
     <!-- 关键词热度榜 -->
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
-      <a-space align="center">
-        <span>关键词热度榜</span>
-        <a-popover position="tl">
-          <a-button type="primary" class="pop-btn">
-            <template #icon>
-              <icon-question-circle />
-            </template>
-          </a-button>
-          <template #content>
-            <p style="margin: 0">基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</p>
-          </template>
-        </a-popover>
-      </a-space>
+    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
+      <div class="title-row">
+        <span class="title mr-4px">关键词热度榜</span>
+        <a-tooltip>
+          <template #content>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
+          <icon-question-circle size="16" class="color-#737478" />
+        </a-tooltip>
+      </div>
+
       <a-table
         :columns="columns"
         :data="dataList"
         :filter-icon-align-left="alignLeft"
-        @change="handleChange"
         :scroll="true"
         :pagination="false"
+        @change="handleChange"
       >
         <template #heatLevel>
           <a-space>
             <span>热度指数</span>
-            <a-popover position="tl">
-              <a-button type="primary" class="pop-btn2">
-                <template #icon>
-                  <icon-question-circle />
-                </template>
-              </a-button>
-              <template #content>
-                <p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
-              </template>
-            </a-popover>
+            <a-tooltip>
+              <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
+              <icon-question-circle size="14" class="color-#737478" />
+            </a-tooltip>
           </a-space>
         </template>
         <template #trendTitle>
           <a-space>
             <span>变化幅度</span>
-            <a-popover position="tr">
-              <a-button type="primary" class="pop-btn2">
-                <template #icon>
-                  <icon-question-circle />
-                </template>
-              </a-button>
-              <template #content>
-                <p style="margin: 0">仅基于关键词出现频次。</p>
-              </template>
-            </a-popover>
+            <a-tooltip>
+              <template #content>仅基于关键词出现频次。</template>
+              <icon-question-circle size="14" class="color-#737478" />
+            </a-tooltip>
           </a-space>
         </template>
 
@@ -68,65 +52,36 @@
           <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
         </template>
         <template #sentiment="{ record }">
-          <img
-            v-if="record.felling == '2'"
-            src="@/assets/img/hottranslation/good.png"
-            style="width: 16px; height: 16px"
-          />
-          <img
-            v-else-if="record.felling == '1'"
-            src="@/assets/img/hottranslation/normal.png"
-            style="width: 16px; height: 16px"
-          />
-          <img
-            v-else-if="record.felling == '0'"
-            src="@/assets/img/hottranslation/poor.png"
-            style="width: 16px; height: 16px"
-          />
+          <img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
+          <img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
+          <img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
         </template>
         <template #tred="{ record }">
-          <a-statistic
-            style="font-size: 14px"
-            v-if="record.trend > 0"
-            :value="record.trend * 100"
-            :value-style="{ color: '#F64B31' }"
-          >
-            <template #prefix>
-              <icon-arrow-rise />
-            </template>
-            <template #suffix>%</template>
-          </a-statistic>
-          <a-statistic
-            v-else
-            style="font-size: 14px"
-            :value="record.trend * 100"
-            :value-style="{ color: '#25C883' }"
-          ></a-statistic>
+          <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
+            <icon-arrow-up v-if="record.trend > 0" size="16" />
+            <icon-arrow-down v-else size="16" />
+            {{ `${record.trend * 100}%` }}
+          </div>
         </template>
       </a-table>
     </a-space>
     <!-- 行业情绪 -->
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
-      <a-space align="center">
-        <span>行业情绪</span>
-        <a-popover position="tl">
-          <a-button type="primary" class="pop-btn">
-            <template #icon>
-              <icon-question-circle />
-            </template>
-          </a-button>
-          <template #content>
-            <p style="margin: 0">
-              对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。
-            </p>
-          </template>
-        </a-popover>
-      </a-space>
+    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
+      <div class="title-row">
+        <span class="title mr-4px">行业情绪</span>
+        <a-tooltip>
+          <template #content
+            >对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。</template
+          >
+          <icon-question-circle size="16" class="color-#737478" />
+        </a-tooltip>
+      </div>
+
       <a-space align="center">
         <a-space>
           <a-space style="width: 320px">
             <div id="container" style="height: 180px; width: 180px"></div>
-            <a-space direction="vertical" style="font-size: 14px" v-if="fellingRate.length > 0">
+            <a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
               <a-space>
                 <span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
                 <span>正面情绪 </span>
@@ -144,9 +99,9 @@
             :data="rowData"
             :span-method="spanMethod"
             :filter-icon-align-left="alignLeft"
-            @change="handleChange"
             :scroll="true"
             :pagination="false"
+            @change="handleChange"
           >
             <template #felling="{ record }">
               <img
@@ -170,27 +125,24 @@
       </a-space>
     </a-space>
     <!-- 新兴关键词 -->
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
-      <a-space align="center">
-        <span>新兴关键词 </span>
-        <a-popover position="tl">
-          <a-button type="primary" class="pop-btn">
-            <template #icon>
-              <icon-question-circle />
-            </template>
-          </a-button>
-          <template #content>
-            <p style="margin: 0">指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</p>
-          </template>
-        </a-popover>
-      </a-space>
+    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
+      <div class="title-row">
+        <span class="title mr-4px">新兴关键词</span>
+        <a-tooltip>
+          <template #content
+            >指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
+          >
+          <icon-question-circle size="16" class="color-#737478" />
+        </a-tooltip>
+      </div>
+
       <a-table
         :columns="columns3"
         :data="keywordList"
         :filter-icon-align-left="alignLeft"
-        @change="handleChange"
         :scroll="true"
         :pagination="false"
+        @change="handleChange"
       >
         <template #rank="{ record }">
           <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@@ -253,23 +205,11 @@
           </a-space>
         </template>
         <template #tred="{ record }">
-          <a-statistic
-            style="font-size: 14px"
-            :value="record.trend * 100"
-            :value-style="{ color: '#F64B31' }"
-            v-if="record.trend > 0"
-          >
-            <template #prefix>
-              <icon-arrow-rise />
-            </template>
-            <template #suffix>%</template>
-          </a-statistic>
-          <a-statistic v-else style="font-size: 14px" :value="record.trend * 100" :value-style="{ color: '#25C883' }">
-            <template #prefix>
-              <icon-arrow-fall />
-            </template>
-            <template #suffix>%</template>
-          </a-statistic>
+          <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
+            <icon-arrow-up v-if="record.trend > 0" size="16" />
+            <icon-arrow-down v-else size="16" />
+            {{ `${record.trend * 100}%` }}
+          </div>
         </template>
         <template #optional="{ record }">
           <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
@@ -277,7 +217,7 @@
       </a-table>
     </a-space>
     <!-- modal -->
-    <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
+    <a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
       <template #title>
         <span style="text-align: left; width: 100%">新兴关键词</span>
       </template>
@@ -377,14 +317,12 @@ const columns = [
     title: '排名',
     dataIndex: 'rank',
     slotName: 'rank',
-    width: 60,
-    minWidth: 60,
+    width: 100,
   },
   {
     title: '关键词名称',
     dataIndex: 'name',
-    width: 250,
-    minWidth: 250,
+    width: 300,
   },
   {
     titleSlotName: 'heatLevel',
@@ -394,8 +332,7 @@ const columns = [
       sortDirections: ['ascend', 'descend'],
     },
     slotName: 'hot',
-    width: 180,
-    minWidth: 180,
+    width: 220,
   },
   {
     titleSlotName: 'trendTitle',
@@ -405,13 +342,13 @@ const columns = [
     },
     dataIndex: 'tred',
     slotName: 'tred',
-    width: 180,
-    minWidth: 180,
+    width: 220,
   },
   {
     title: '情感倾向',
     dataIndex: 'sentiment',
     slotName: 'sentiment',
+    width: 220,
   },
 ];
 const columns2 = [
@@ -594,12 +531,12 @@ const getNewKeywordList = async () => {
 };
 
 const drawChart = () => {
-  var dom = document.getElementById('container');
-  var myChart = echarts.init(dom, null, {
+  let dom = document.getElementById('container');
+  let myChart = echarts.init(dom, null, {
     renderer: 'canvas',
     useDirtyRect: false,
   });
-  var option;
+  let option;
   option = {
     color: ['#25C883', '#F64B31'],
     series: [
@@ -646,7 +583,7 @@ onMounted(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -672,4 +609,18 @@ onMounted(() => {
   color: #737478 !important;
   margin-left: -8px;
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
 </style>
diff --git a/src/views/components/dataEngine/topHeader.vue b/src/views/components/dataEngine/topHeader.vue
index 667e9b4..aca2867 100644
--- a/src/views/components/dataEngine/topHeader.vue
+++ b/src/views/components/dataEngine/topHeader.vue
@@ -3,95 +3,86 @@
     <!-- 头部 -->
     <a-space
       direction="vertical"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid"
       style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0; color: #737478; font-size: 14px"
     >
-      <a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
-        <span style="width: 60px; flex-shrink: 0; line-height: 28px">行业大类</span>
-        <div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
+      <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
+        <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">行业大类</span>
+        <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
           <a-tag
-            size="Medium"
             v-for="item in industriesTree"
             :key="item.id"
+            size="Medium"
             :checkable="true"
             :checked="selectedIndustry == item.id"
-            @check="handleIndustryCheck(item.id)"
-            style="padding: 4px 16px; border-radius: 30px; height: 28px"
+            style="padding: 10px 16px; border-radius: 30px; height: 28px"
             :style="
               selectedIndustry == item.id
-                ? 'color: #6d4cfe; background-color: #f0edff'
+                ? 'color: #6D4CFE; background-color: #F0EDFF'
                 : 'color: #3C4043; background-color: #F7F8FA'
             "
+            @check="handleIndustryCheck(item.id)"
             >{{ item.name }}</a-tag
           >
         </div>
       </a-space>
       <!-- 二级类目 -->
-      <a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
-        <span style="width: 60px; flex-shrink: 0; line-height: 28px">二级类目</span>
-        <div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
+      <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
+        <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">二级类目</span>
+        <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
           <a-tag
-            size="Medium"
             v-for="item in subCategories"
             :key="item.id"
+            size="Medium"
             :checkable="true"
             :checked="selectedSubCategory == item.id"
-            @check="handleSubCategoryCheck(item.id)"
-            style="padding: 4px 16px; border-radius: 30px; height: 28px"
+            style="padding: 10px 16px; border-radius: 30px; height: 28px"
             :style="
               selectedSubCategory == item.id
                 ? 'color: #6d4cfe; background-color: #f0edff'
                 : 'color: #3C4043; background-color: #F7F8FA'
             "
+            @check="handleSubCategoryCheck(item.id)"
             >{{ item.name }}</a-tag
           >
         </div>
       </a-space>
       <!-- </a-space> -->
-      <a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
-        <span style="width: 60px; flex-shrink: 0; line-height: 28px">时间筛选</span>
-        <div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
+      <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
+        <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">时间筛选</span>
+        <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
           <a-tag
-            size="Medium"
             v-for="item in timePeriods"
             :key="item.value"
+            size="Medium"
             :checkable="true"
             :checked="selectedTimePeriod == item.value"
-            @check="handleTimePeriodCheck(item.value)"
-            style="padding: 4px 16px; border-radius: 30px; height: 28px"
+            style="padding: 10px 16px; border-radius: 30px; height: 28px"
             :style="
               selectedTimePeriod == item.value
                 ? 'color: #6d4cfe; background-color: #f0edff'
                 : 'color: #3C4043; background-color: #F7F8FA'
             "
+            @check="handleTimePeriodCheck(item.value)"
             >{{ item.label }}
           </a-tag>
         </div>
       </a-space>
       <!-- 搜索区域 -->
-      <a-space style="margin-left: 'auto'; margin-top: 20px">
-        <a-button type="primary" @click="handleSearch">
+      <a-space style="margin-left: 'auto'">
+        <a-button type="primary" size="medium" @click="handleSearch">
           <template #icon>
             <icon-search />
           </template>
           <!-- Use the default slot to avoid extra spaces -->
           <template #default>搜索</template>
         </a-button>
-        <div
-          @click="handleReset"
-          style="
-            width: 92px;
-            height: 32px;
-            font-size: 14px;
-            color: #3c4043;
-            border: 1px solid #d7d7d9;
-            text-align: center;
-            line-height: 32px;
-            border-radius: 4px;
-          "
-        >
-          <icon-refresh></icon-refresh>
-          <span>重置</span>
-        </div>
+        <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
       </a-space>
     </a-space>
   </view>
@@ -101,6 +92,7 @@
 import { ref, computed } from 'vue';
 import { fetchIndustriesTree } from '@/api/all/index';
 
+const emit = defineEmits<(e: 'search') => void>();
 // 行业大类
 const industriesTree = ref([]);
 // 数据状态
@@ -169,9 +161,6 @@ const getIndustriesTree = async () => {
     subCategories.value.unshift({ id: 0, name: '全部' });
   }
 };
-const emit = defineEmits<{
-  (e: 'search'): void;
-}>();
 // 搜索
 const handleSearch = () => {
   emit('search');
@@ -183,7 +172,7 @@ const handleReset = () => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -199,4 +188,12 @@ const handleReset = () => {
 :deep(.arco-modal-body) {
   padding: 0px;
 }
+.reset-btn {
+  border-radius: 4px;
+  border: 1px solid var(--BG-500, #b1b2b5);
+  background: var(--BG-white, #fff);
+  &:hover {
+    border: 1px solid var(--BG-500, #b1b2b5);
+  }
+}
 </style>