diff --git a/src/assets/fonts/Alibaba-PuHuiTi-Bold.otf b/src/assets/fonts/Alibaba-PuHuiTi-Bold.otf
new file mode 100644
index 0000000..2ed2026
Binary files /dev/null and b/src/assets/fonts/Alibaba-PuHuiTi-Bold.otf differ
diff --git a/src/assets/fonts/Alibaba-PuHuiTi-Medium.otf b/src/assets/fonts/Alibaba-PuHuiTi-Medium.otf
new file mode 100644
index 0000000..a308250
Binary files /dev/null and b/src/assets/fonts/Alibaba-PuHuiTi-Medium.otf differ
diff --git a/src/assets/fonts/Alibaba-PuHuiTi-Regular.otf b/src/assets/fonts/Alibaba-PuHuiTi-Regular.otf
new file mode 100644
index 0000000..5960ba1
Binary files /dev/null and b/src/assets/fonts/Alibaba-PuHuiTi-Regular.otf differ
diff --git a/src/components/container.vue b/src/components/container.vue
index e63e4e9..14d2f20 100644
--- a/src/components/container.vue
+++ b/src/components/container.vue
@@ -23,7 +23,7 @@ const props = defineProps<{
   border-radius: 8px;
 }
 .title {
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 18px;
   line-height: 24px;
diff --git a/src/components/delete-modal.vue b/src/components/delete-modal.vue
index e8cddd8..0d3664d 100644
--- a/src/components/delete-modal.vue
+++ b/src/components/delete-modal.vue
@@ -7,8 +7,7 @@
     <slot></slot>
   </a-modal>
 </template>
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 <style lang="less">
 :deep(.arco-btn-status-danger) {
   background-color: red !important;
@@ -20,7 +19,7 @@
   }
   .delete-modal-title {
     margin-top: 24px;
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
@@ -36,14 +35,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;
diff --git a/src/components/join-modal.vue b/src/components/join-modal.vue
index f8b3bf1..1a8f320 100644
--- a/src/components/join-modal.vue
+++ b/src/components/join-modal.vue
@@ -1,7 +1,3 @@
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-22 22:15:28
--->
 <template>
   <Modal title="加入企业" @ok="handleJoin">
     <div v-if="enterprise" class="join-body flex item-center">
@@ -38,7 +34,7 @@ onMounted(() => {
 <style lang="less">
 .join-body {
   margin: 0;
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 14px;
   color: var(--Text-1, rgba(33, 31, 36, 1));
diff --git a/src/components/modal.vue b/src/components/modal.vue
index 6d905bd..b2ab5c5 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -1,11 +1,9 @@
 <template>
-  <a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs" >
+  <a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs">
     <slot></slot>
   </a-modal>
 </template>
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 <style lang="less">
 .modal {
   .arco-modal-header {
@@ -17,14 +15,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
index b0b3d7c..8f422b4 100644
--- a/src/styles/components/table.scss
+++ b/src/styles/components/table.scss
@@ -1,7 +1,7 @@
 .arco-table {
   @mixin table-cell-text {
-    color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    color: var(--Text-1, #3C4043);
+    font-family: 'PuHuiTi-Regular';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -19,6 +19,7 @@
               padding: 13px 16px;
               .arco-table-th-title {
                 @include table-cell-text;
+                font-family: 'PingFangSC-Medium';
               }
             }
           }
@@ -29,7 +30,8 @@
           .arco-table-td {
             .arco-table-cell {
               padding: 13px 16px;
-              .arco-table-cell-content {
+              .arco-table-cell-content,
+              .arco-table-td-content {
                 @include table-cell-text;
               }
             }
diff --git a/src/styles/font.scss b/src/styles/font.scss
new file mode 100644
index 0000000..dc5bf95
--- /dev/null
+++ b/src/styles/font.scss
@@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'PuHuiTi-Medium';
+  src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.otf');
+}
+
+@font-face {
+  font-family: 'PuHuiTi-Regular';
+  src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.otf');
+}
+
+@font-face {
+  font-family: 'PuHuiTi-Bold';
+  src: url('@/assets/fonts/Alibaba-PuHuiTi-Bold.otf');
+}
+
+.font-family-puhui-bold {
+  font-family: PuHuiTi-Bold !important;
+}
+.font-family-puhui-medium {
+  font-family: PuHuiTi-Medium !important;
+}
+.font-family-puhui-regular {
+  font-family: PuHuiTi-Regular !important;
+}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 055fb7d..0541f16 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4,5 +4,6 @@
  */
 import './vars.css';
 import './components/index.scss';
+import './font.scss';
 import 'normalize.css';
 import 'uno.css';
diff --git a/src/views/components/dataEngine/hotCloud.vue b/src/views/components/dataEngine/hotCloud.vue
index 7cd10bb..8a6f778 100644
--- a/src/views/components/dataEngine/hotCloud.vue
+++ b/src/views/components/dataEngine/hotCloud.vue
@@ -1,12 +1,15 @@
 <template>
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px 32px; margin: 24px 0">
+    <a-space
+      direction="vertical"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px 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" />
+          <icon-question-circle size="16" class="!color-#737478" />
         </a-tooltip>
       </div>
 
@@ -213,7 +216,7 @@ a-tag:hover {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/dataEngine/hotTranslation.vue b/src/views/components/dataEngine/hotTranslation.vue
index 2fac323..516211f 100644
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@@ -4,14 +4,13 @@
     <!-- tabel -->
     <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"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px 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" />
+          <icon-question-circle size="16" class="!color-#737478" />
         </a-tooltip>
       </div>
       <a-table
@@ -27,7 +26,7 @@
             <span>热度指数</span>
             <a-tooltip>
               <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
-              <icon-question-circle size="14" class="color-#737478" />
+              <icon-question-circle size="14" class="!color-#737478" />
             </a-tooltip>
           </a-space>
         </template>
@@ -38,7 +37,7 @@
               <template #content
                 >统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
               >
-              <icon-question-circle size="14" class="color-#737478" />
+              <icon-question-circle size="14" class="!color-#737478" />
             </a-tooltip>
           </a-space>
         </template>
@@ -52,8 +51,7 @@
           <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"
+            class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
             >{{ item }}</a-tag
           >
         </template>
@@ -121,11 +119,11 @@
           <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">
+              <div v-for="item in topicInfo.industry_topic_sources" :key="item" class="mb-18px flex items-center">
                 <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" />
+                <img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
               </div>
             </div>
           </div>
@@ -353,7 +351,7 @@ const handleOk = () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -377,7 +375,7 @@ const handleOk = () => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Regular';
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/components/dataEngine/keyBrandMovement.vue b/src/views/components/dataEngine/keyBrandMovement.vue
index 77f1bc1..dfe0e17 100644
--- a/src/views/components/dataEngine/keyBrandMovement.vue
+++ b/src/views/components/dataEngine/keyBrandMovement.vue
@@ -1,72 +1,54 @@
+<!-- eslint-disable vue/no-duplicate-attributes -->
 <template>
   <view>
     <topHeader ref="topHeaderRef" @click="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"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px 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 #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 #trendTitle>
           <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 #volume_rateTitle>
           <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 }">
@@ -79,44 +61,30 @@
           <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
         </template>
         <template #trend="{ 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' }">
-            <template #prefix>
-              <icon-arrow-rise />
-            </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 #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </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"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px 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 :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
       </a-table>
     </a-space>
@@ -276,7 +244,7 @@ watch(selectedIndustry, () => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -306,4 +274,18 @@ watch(selectedIndustry, () => {
   color: #737478 !important;
   margin-left: -10px;
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
 </style>
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index 5e69005..4b16d47 100644
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@@ -3,12 +3,15 @@
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
     <!-- 关键词热度榜 -->
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
+    <a-space
+      direction="vertical"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px 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" />
+          <icon-question-circle size="16" class="!color-#737478" />
         </a-tooltip>
       </div>
 
@@ -25,7 +28,7 @@
             <span>热度指数</span>
             <a-tooltip>
               <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
-              <icon-question-circle size="14" class="color-#737478" />
+              <icon-question-circle size="14" class="!color-#737478" />
             </a-tooltip>
           </a-space>
         </template>
@@ -34,7 +37,7 @@
             <span>变化幅度</span>
             <a-tooltip>
               <template #content>仅基于关键词出现频次。</template>
-              <icon-question-circle size="14" class="color-#737478" />
+              <icon-question-circle size="14" class="!color-#737478" />
             </a-tooltip>
           </a-space>
         </template>
@@ -66,73 +69,68 @@
       </a-table>
     </a-space>
     <!-- 行业情绪 -->
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
+    <a-space
+      direction="vertical"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px 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" />
+          <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 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>
-                <span style="width: 40px">{{ getFormatter(fellingRate[0] * 100) }}</span>
-              </a-space>
-              <a-space>
-                <span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
-                <span>负面情绪 </span>
-                <span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
-              </a-space>
-            </a-space>
-          </a-space>
-          <a-table
-            :columns="columns2"
-            :data="rowData"
-            :span-method="spanMethod"
-            :filter-icon-align-left="alignLeft"
-            :scroll="true"
-            :pagination="false"
-            @change="handleChange"
-          >
-            <template #felling="{ 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"
-              />
-            </template>
-          </a-table>
-        </a-space>
-      </a-space>
+      <div class="flex items-center w-100%">
+        <div v-show="fellingRate.length > 0" class="w-500px flex items-center">
+          <div id="container" class="w-300px h-300px"></div>
+          <div class="flex flex-col">
+            <div class="mb-12px flex items-center">
+              <div class="w-12px h-12px mr-10px bg-#25C883 rounded-50%"></div>
+              <span
+                >正面情绪 <span class="num">{{ getFormatter(fellingRate[0] * 100) }}</span>
+              </span>
+            </div>
+            <div class="flex items-center">
+              <div class="w-12px h-12px mr-10px bg-#F64B31 rounded-50%"></div>
+              <span>负面情绪 </span>
+              <span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
+            </div>
+          </div>
+        </div>
+        <a-table
+          class="flex-1"
+          :columns="columns2"
+          :data="sortedRowData"
+          :span-method="spanMethod"
+          :filter-icon-align-left="alignLeft"
+          :scroll="true"
+          :pagination="false"
+          @change="handleChange"
+        >
+          <template #felling="{ record }">
+            <div class="flex items-center">
+              <img :src="fellingStatus[record.felling].icon" class="w-20px h-20px mr-4px" />
+              <span>{{ fellingStatus[record.felling].label }}</span>
+            </div>
+          </template>
+        </a-table>
+      </div>
     </a-space>
     <!-- 新兴关键词 -->
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
+    <a-space
+      direction="vertical"
+      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px"
+    >
       <div class="title-row">
         <span class="title mr-4px">新兴关键词</span>
         <a-tooltip>
           <template #content
             >指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
           >
-          <icon-question-circle size="16" class="color-#737478" />
+          <icon-question-circle size="16" class="!color-#737478" />
         </a-tooltip>
       </div>
 
@@ -168,7 +166,7 @@
           />
         </template>
         <template #first_appeared_at="{ record }">
-          <div>{{ formatTimestamp(record.first_appeared_at) }}</div>
+          {{ formatTimestamp(record.first_appeared_at) }}
         </template>
         <template #hot="{ record }">
           <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
@@ -177,31 +175,19 @@
         <template #hotTitle="{ record }">
           <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="16" class="!color-#737478" />
+            </a-tooltip>
           </a-space>
         </template>
         <template #trendTitle="{ record }">
           <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="16" class="!color-#737478" />
+            </a-tooltip>
           </a-space>
         </template>
         <template #tred="{ record }">
@@ -217,63 +203,57 @@
       </a-table>
     </a-space>
     <!-- modal -->
-    <a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
+    <a-modal
+      :visible="visible"
+      modal-class="keyword-modal"
+      unmountOnClose
+      width="640px"
+      @ok="handleOk"
+      @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>{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
-          </a-space>
-          <a-space>
-            <span style="margin-right: 16px">变化幅度</span>
-            <div>
-              <a-statistic
-                v-if="topicInfo?.trend > 0"
-                style="font-size: 14px"
-                :value="topicInfo.trend * 100"
-                :value-style="{ color: '#F64B31' }"
-              >
-                <template #prefix>
-                  <IconArrowRise />
-                </template>
-                <template #suffix>%</template>
-              </a-statistic>
-              <a-statistic
-                v-else
-                style="font-size: 14px"
-                :value="topicInfo?.trend * 100 || 0"
-                :value-style="{ color: '#25C883' }"
-              >
-                <template #prefix>
-                  <IconArrowFall />
-                </template>
-                <template #suffix>%</template>
-              </a-statistic>
+          <div class="mb-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-83px">话题名称</p>
+            <span class="cts">{{ topicInfo.name }}</span>
+          </div>
+          <div class="mb-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-83px">最大规模出现</p>
+            <span class="cts">{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
+          </div>
+          <div class="mb-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-83px">变化幅度</p>
+            <div class="flex items-center" :class="topicInfo.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
+              <icon-arrow-up v-if="topicInfo.trend > 0" size="16" />
+              <icon-arrow-down v-else size="16" />
+              {{ `${topicInfo.trend * 100}%` }}
             </div>
-          </a-space>
-          <a-space>
-            <span style="margin-right: 16px">热度指数</span>
+          </div>
+          <div class="mb-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-83px">热度指数</p>
             <img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
-          </a-space>
+          </div>
 
-          <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_new_keyword_sources" :key="item">
-                <a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
-                <img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
-              </a-space>
-            </a-space>
-          </a-space>
+          <div class="flex items-start">
+            <p class="!mr-16px w-83px cts relative top-2px">原始来源</p>
+            <div class="flex flex-col">
+              <div v-for="item in topicInfo.industry_new_keyword_sources" :key="item" class="mb-18px flex items-center">
+                <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" width="16" height="16" />
+              </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>
@@ -297,6 +277,25 @@ import top1 from '@/assets/img/captcha/top1.svg';
 import top2 from '@/assets/img/captcha/top2.svg';
 import top3 from '@/assets/img/captcha/top3.svg';
 
+import icon1 from '@/assets/img/hottranslation/good.png';
+import icon2 from '@/assets/img/hottranslation/normal.png';
+import icon3 from '@/assets/img/hottranslation/poor.png';
+
+const fellingStatus = {
+  2: {
+    icon: icon1,
+    label: '正面情绪',
+  },
+  1: {
+    icon: icon2,
+    label: '中性情绪',
+  },
+  0: {
+    icon: icon3,
+    label: '负面情绪',
+  },
+};
+
 const starImages = [star1, star2, star3, star4, star5];
 const topImages = [top1, top2, top3];
 
@@ -356,8 +355,8 @@ const columns2 = [
     title: '情绪分布',
     dataIndex: 'felling',
     slotName: 'felling',
-    width: 120,
-    minWidth: 120,
+    width: 160,
+    // minWidth: 120,
   },
   {
     title: '主要观点',
@@ -365,13 +364,48 @@ const columns2 = [
   },
 ];
 
-const spanMethod = ({ record, columnIndex }) => {
-  // console.log(record.felling);
-  // if (record.felling === 2) {
-  //   return {
-  //     rowspan: 3,
-  //   };
-  // }
+const sortedRowData = computed(() => {
+  return [...rowData.value].sort((a, b) => {
+    return b.felling - a.felling;
+  });
+});
+
+const spanMethod = ({ record, columnIndex, rowIndex }) => {
+  if (columnIndex === 0) {
+    const currentFelling = record.felling;
+    let rowspan = 1;
+
+    for (let i = rowIndex + 1; i < sortedRowData.value.length; i++) {
+      if (sortedRowData.value[i].felling === currentFelling) {
+        rowspan++;
+      } else {
+        break;
+      }
+    }
+
+    // eslint-disable-next-line no-unreachable-loop
+    for (let i = rowIndex - 1; i >= 0; i--) {
+      if (sortedRowData.value[i].felling === currentFelling) {
+        return {
+          rowspan: 0,
+          colspan: 0,
+        };
+      } else {
+        break;
+      }
+    }
+
+    return {
+      rowspan,
+      colspan: 1,
+    };
+  }
+
+  // 其他列不合并
+  return {
+    rowspan: 1,
+    colspan: 1,
+  };
 };
 
 const columns3 = [
@@ -547,7 +581,7 @@ const drawChart = () => {
         labelLine: {
           show: false, // 不显示引导线
         },
-        radius: ['40%', '55%'],
+        radius: ['50%', '70%'], // 调整半径范围
       },
     ],
   };
@@ -616,11 +650,68 @@ onMounted(() => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px; /* 150% */
   }
 }
+.cts {
+  color: var(--Text-2, #3c4043);
+  font-family: 'PuHuiTi-Medium';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 157.143% */
+  &.num {
+    font-family: 'HarmonyOS Sans SC';
+  }
+}
+</style>
+
+<style lang="scss">
+.keyword-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: 'PuHuiTi-Regular';
+      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/userPainPoints.vue b/src/views/components/dataEngine/userPainPoints.vue
index 321a2fa..fb9e205 100644
--- a/src/views/components/dataEngine/userPainPoints.vue
+++ b/src/views/components/dataEngine/userPainPoints.vue
@@ -3,27 +3,27 @@
     <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="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid 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 #rank="{ record }">
           <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@@ -32,98 +32,84 @@
           <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"
+            class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
+            >{{ item }}</a-tag
+          >
         </template>
         <template #frequency="{ record }">
-          <a-tag v-if="record.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
-            >低频</a-tag
+          <a-tag
+            :class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
+              frequencyStatus[record.frequency].color
+            }`"
+            >{{ frequencyStatus[record.frequency].label }}</a-tag
           >
-          <a-tag v-else-if="record.frequency == 1" style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
-            >中频</a-tag
-          >
-          <a-tag v-else-if="record.frequency == 2" style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
-            >高频</a-tag
-          >
-        </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"
-          />
         </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"
+      modal-class="user-pain-points-modal"
+      unmountOnClose
+      width="640px"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
       <template #title>
         <span style="text-align: left; width: 100%">用户痛点观察</span>
       </template>
       <div>
         <a-space direction="vertical" style="font-size: 12px">
-          <a-space>
-            <span style="width: 80px">痛点</span>
-            <span>{{ topicInfo.name }}</span>
-          </a-space>
-          <a-space>
-            <span style="width: 80px; font-size: 12px">关键词</span>
-            <a-tag v-for="item in topicInfo.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
-          </a-space>
-          <a-space>
-            <span style="width: 80px; font-size: 12px">频次</span>
-            <a-tag v-if="topicInfo.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
-              >低频</a-tag
-            >
+          <div class="mb-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-60px">痛点</p>
+            <span class="cts">{{ topicInfo.name }}</span>
+          </div>
+          <div class="mb-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-60px">关键词</p>
             <a-tag
-              v-else-if="topicInfo.frequency == 1"
-              style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
-              >中频</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-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-60px">频次</p>
             <a-tag
-              v-else-if="topicInfo.frequency == 2"
-              style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
-              >高频</a-tag
+              :class="`!rounded-2px !px-8px !py-1px !bg-${
+                frequencyStatus[topicInfo.frequency].bgColor
+              } !h-22px !color-${frequencyStatus[topicInfo.frequency].color}`"
+              >{{ frequencyStatus[topicInfo.frequency].label }}</a-tag
             >
-          </a-space>
-          <a-space>
-            <span style="width: 80px; font-size: 12px">代表性发言</span>
-            <span>{{ topicInfo.content }}</span>
-          </a-space>
-          <a-space direction="top">
-            <span style="width: 80px; font-size: 12px; display: inline-block">原始来源</span>
-            <a-space direction="vertical">
-              <a-space v-for="item in topicInfo.user_pain_point_sources" :key="item">
-                <a-link
-                  style="
-                    background-color: initial;
-                    display: inline-block;
-                    width: 280px;
-                    text-overflow: ellipsis;
-                  "
-                  :href="item.link"
-                  target="_blank"
-                  >{{ item.title }}</a-link
-                >
-                <img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
-              </a-space>
-            </a-space>
-          </a-space>
+          </div>
+          <div class="mb-12px flex items-center">
+            <p class="cts !mr-16px flex-shrink-0 w-60px">代表性发言</p>
+            <span class="cts">{{ topicInfo.content }}</span>
+          </div>
+          <div class="flex items-start">
+            <p class="cts !mr-16px flex-shrink-0 w-60px">原始来源</p>
+            <div class="flex flex-col">
+              <div v-for="item in topicInfo.user_pain_point_sources" :key="item" class="mb-18px flex items-center">
+                <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" width="16" height="16" />
+              </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>
@@ -144,6 +130,23 @@ const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
 const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
 const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
 const dataList = ref([]);
+const frequencyStatus = {
+  0: {
+    label: '低频',
+    color: '#1bae71',
+    bgColor: '#ebf7f2',
+  },
+  1: {
+    label: '中频',
+    color: '#cc8b00',
+    bgColor: '#fff5de',
+  },
+  2: {
+    label: '高频',
+    color: '#c53c27',
+    bgColor: '#ffe7e4',
+  },
+};
 const columns = [
   {
     title: '排名',
@@ -239,7 +242,7 @@ const search = () => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -263,4 +266,63 @@ const search = () => {
   color: #6d4cfe !important;
   border-color: #6d4cfe !important;
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
+</style>
+<style lang="scss">
+.user-pain-points-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: 'PuHuiTi-Regular';
+      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/userPersona.vue b/src/views/components/dataEngine/userPersona.vue
index 9b5cdf3..3d6be28 100644
--- a/src/views/components/dataEngine/userPersona.vue
+++ b/src/views/components/dataEngine/userPersona.vue
@@ -1,57 +1,47 @@
 <template>
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
-    <a-space style="width: 100%; display: flex">
-      <a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
-        <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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
-            </template>
-          </a-popover>
-        </a-space>
+    <div class="h-360px w-100% flex mb-24px">
+      <!-- 1. 性别分布 -->
+      <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px w-600px mr-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>
-          <div id="container" style="height: 180px; width: 180px"></div>
+          <div id="container" class="w-300px h-300px"></div>
 
           <a-space direction="vertical" style="font-size: 14px">
             <a-space>
               <span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
               <span>女性</span>
-              <span style="width: 40px" v-if="genderData.length > 0">{{ genderData[0].rate * 100 }}%</span>
+              <span v-if="genderData.length > 0" style="width: 40px">{{ genderData[0].rate * 100 }}%</span>
               <span>TGI</span>
               <span v-if="genderData.length > 0">{{ genderData[0].tgi }}</span>
             </a-space>
             <a-space>
               <span style="width: 8px; height: 8px; background-color: #2a59f3; border-radius: 50%"></span>
               <span>男性</span>
-              <span style="width: 40px" v-if="genderData.length > 1">{{ genderData[1].rate * 100 }}%</span>
+              <span v-if="genderData.length > 1" style="width: 40px">{{ genderData[1].rate * 100 }}%</span>
               <span>TGI</span>
               <span v-if="genderData.length > 1">{{ genderData[1].tgi }}</span>
             </a-space>
           </a-space>
         </a-space>
-      </a-space>
-      <a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
+      </div>
+      <!-- 2. 年龄分布 -->
+      <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 flex flex-col">
         <a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
-          <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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
-              </template>
-            </a-popover>
-          </a-space>
+          <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">
             <span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
             <span style="color: #6d4cfe">占比</span>
@@ -60,32 +50,24 @@
           </a-space>
         </a-space>
 
-        <a-space>
-          <div id="age-container" style="height: 180px; width: 480px"></div>
-        </a-space>
-      </a-space>
-    </a-space>
-    <a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1; margin-top: 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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
-          </template>
-        </a-popover>
-      </a-space>
-      <a-space>
+        <div id="age-container" class="w-100% flex-1"></div>
+      </div>
+    </div>
+    <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 pb-20px">
+      <div class="title-row">
+        <span class="title mr-4px">地域分布</span>
+        <a-tooltip>
+          <template #content>基于社交平台的IP归属地、位置标签、内容发布地等数据推测用户活跃区域。</template>
+          <icon-question-circle size="16" class="!color-#737478" />
+        </a-tooltip>
+      </div>
+      <div class="flex">
         <a-space direction="vertical">
           <div id="chinaMap" style="height: 416px; width: 640px"></div>
           <a-space direction="vertical" style="font-size: 14px">
-            <span>搜索指数</span>
+            <span class="cts">搜索指数</span>
             <a-space>
-              <span>高</span>
+              <span class="cts">高</span>
               <span
                 v-for="item in 5"
                 :key="item"
@@ -98,14 +80,14 @@
                   margin: '0 2px',
                 }"
               ></span>
-              <span>低</span>
+              <span class="cts">低</span>
             </a-space>
           </a-space>
         </a-space>
-        <a-space>
-          <a-tabs default-active-key="1" @change="tabChange">
+        <div class="flex flex-col h-486px">
+          <a-tabs default-active-key="1" class="h-100%" @change="tabChange">
             <a-tab-pane key="1" title="省份">
-              <a-table :data="geoList" :pagination="false">
+              <a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
                 <template #columns>
                   <a-table-column title="排名" data-index="rank" />
                   <a-table-column title="省份" data-index="geo" />
@@ -116,20 +98,24 @@
               </a-table>
             </a-tab-pane>
             <a-tab-pane key="2" title="城市">
-              <a-table :data="geoList" :pagination="false">
+              <a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
                 <template #columns>
                   <a-table-column title="排名" data-index="rank" />
                   <a-table-column title="城市" data-index="geo" />
-                  <a-table-column title="分布占比" data-index="rate" />
+                  <a-table-column title="分布占比" data-index="rate">
+                    <template #cell="{ record }">
+                      <span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
+                    </template>
+                  </a-table-column>
 
                   <a-table-column title="TGI指数" data-index="tgi" />
                 </template>
               </a-table>
             </a-tab-pane>
           </a-tabs>
-        </a-space>
-      </a-space>
-    </a-space>
+        </div>
+      </div>
+    </div>
   </view>
 </template>
 
@@ -141,7 +127,7 @@ import * as echarts from 'echarts';
 import chinaJson from '@/assets/maps/china.json';
 
 echarts.registerMap('china', chinaJson);
-const scope = ref(1); //地域范围，1-省，2-市
+const scope = ref(1); // 地域范围，1-省，2-市
 const chartInstance = (ref < echarts.ECharts) | (null > null);
 const topHeaderRef = ref();
 // 从topHeader获取统一的状态
@@ -180,12 +166,13 @@ const getAgeDistributionsList = async () => {
     return;
   }
   if (selectedSubCategory.value != 0) {
-    parms['industry_id'] = selectedSubCategory.value;
+    params['industry_id'] = selectedSubCategory.value;
+  }
+  const { code, data } = await fetchAgeDistributionsList(params);
+  if (code === 200) {
+    ageValueData.value = data;
+    drawAgeChart();
   }
-  const res = await fetchAgeDistributionsList(params);
-  console.log('年龄分布：', res);
-  ageValueData.value = res;
-  drawAgeChart();
 };
 
 // 获得地理分布列表
@@ -202,11 +189,12 @@ const getGeoDistributionsList = async () => {
     return;
   }
   if (selectedSubCategory.value != 0) {
-    parms['industry_id'] = selectedSubCategory.value;
+    params['industry_id'] = selectedSubCategory.value;
+  }
+  const { code, data } = await fetchGeoDistributionsList(params);
+  if (code === 200) {
+    geoList.value = data;
   }
-  const res = await fetchGeoDistributionsList(params);
-  console.log('地理分布：', res);
-  geoList.value = res;
 };
 // 获取性别分布列表
 const getGenderDistributionsList = async () => {
@@ -221,46 +209,78 @@ const getGenderDistributionsList = async () => {
     return;
   }
   if (selectedSubCategory.value != 0) {
-    parms['industry_id'] = selectedSubCategory.value;
-  }
-  const res = await fetchGenderDistributionsList(params);
-  genderData.value = [];
-  genderData.value = [...res];
-  await nextTick();
-  genderValueData.value = [];
-  for (let i = 0; i < res.length; i++) {
-    genderValueData.value.push({
-      value: res[i].rate * 100,
-    });
+    params['industry_id'] = selectedSubCategory.value;
   }
+  const { code, data } = await fetchGenderDistributionsList(params);
+  if (code === 200) {
+    genderData.value = [];
+    genderValueData.value = [];
 
-  drawChart();
+    genderData.value = [...data];
+    await nextTick();
+
+    genderValueData.value = data.map((item) => ({
+      value: item.rate * 100,
+      tgi: item.tgi,
+      name: item.gender === 1 ? '女性' : '男性',
+    }));
+
+    drawChart();
+  }
 };
 
 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;
-  option = {
+  let option = {
     color: ['#F64B31', '#2A59F3'],
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: '#fff',
+      borderColor: 'rgba(0,0,0,0.05)',
+      borderWidth: 1,
+      textStyle: {
+        color: '#222',
+        fontSize: 14,
+      },
+      extraCssText: 'box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);border-radius:8px;',
+      formatter: function (params) {
+        return `
+          <div class="w-140px">
+            <div style="font-weight:500;margin-bottom:8px;">${params.name}</div>
+            <div style="display:flex;align-items:center;margin-bottom:4px;">
+              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#2a59f3;margin-right:8px;"></span>
+              <span>占比</span>
+              <span style="margin-left:auto;">${params.value}%</span>
+            </div>
+            <div style="display:flex;align-items:center;">
+              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#F64B31;margin-right:8px;"></span>
+              <span>TGI</span>
+              <span style="margin-left:auto;">${params.data.tgi || '-'}</span>
+            </div>
+          </div>
+        `;
+      },
+    },
     series: [
       {
         type: 'pie',
         avoidLabelOverlap: false,
         data: genderValueData.value,
+        label: {
+          show: false, // 关闭扇区外的文字
+        },
         labelLine: {
-          show: false, // 不显示引导线
+          show: false,
         },
         radius: ['40%', '55%'],
       },
     ],
   };
-  if (option && typeof option === 'object') {
-    myChart.setOption(option);
-  }
+  myChart.setOption(option);
 };
 
 const drawAgeChart = () => {
@@ -269,7 +289,7 @@ const drawAgeChart = () => {
   const xAxis = ageValueData.value.map((item) => item.age);
   const yAxis = ageValueData.value.map((item) => item.rate * 100);
   const yAxis2 = ageValueData.value.map((item) => item.tgi);
-  const average = yAxis2.reduce((sum, val) => sum + val, 0) / yAxis2.length;
+  // const average = yAxis2.reduce((sum, val) => sum + val, 0) / yAxis2.length;
 
   // 图表初始化（强制使用2D渲染）
   const myChart = echarts.init(dom, null, {
@@ -289,19 +309,47 @@ const drawAgeChart = () => {
     animation: false, // 小尺寸下关闭动画提升性能
     tooltip: {
       trigger: 'axis',
-      confine: true, // 确保tooltip不超出容器
+      confine: true,
       axisPointer: {
         type: 'shadow',
         label: {
-          fontSize: 12, // 调小提示标签字号
+          fontSize: 12,
           backgroundColor: 'rgba(0,0,0,0.7)',
         },
       },
+      backgroundColor: '#fff',
+      borderColor: 'rgba(0,0,0,0.05)',
+      borderWidth: 1,
+      textStyle: {
+        color: '#333',
+        fontSize: 14,
+      },
+      extraCssText: 'box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);border-radius:8px;',
+      formatter: function (params) {
+        const name = params[0].name;
+        const percent = params[0].value;
+        const tgi = params[1].value;
+        return `
+          <div class="w-140px">
+            <div style="margin-bottom: 4px;" class="color-#000">${name}岁</div>
+            <div style="display: flex;align-items: center;margin-bottom:2px;">
+              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#6d4cfe;margin-right:6px;"></span>
+              <span>占比</span>
+              <span style="color:#333;margin-left:auto;">${percent.toFixed(2)}%</span>
+            </div>
+            <div style="display: flex;align-items: center;">
+              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#F64B31;margin-right:6px;"></span>
+              <span>TGI</span>
+              <span style="color:#333;margin-left:auto;">${tgi}</span>
+            </div>
+          </div>
+        `;
+      },
     },
     grid: {
-      top: 10,
+      top: 25,
       right: 30,
-      bottom: 25,
+      bottom: 40,
       left: 40,
       containLabel: false,
     },
@@ -312,8 +360,9 @@ const drawAgeChart = () => {
         interval: 0,
         rotate: 0,
         fontSize: 12,
-        margin: 2,
+        margin: 10,
         hideOverlap: true, // 自动隐藏重叠标签
+        color: '#939499',
       },
       axisTick: {
         alignWithLabel: true,
@@ -330,51 +379,61 @@ const drawAgeChart = () => {
         // 左侧百分比轴
         type: 'value',
         name: '占比',
-        nameLocation: 'top',
-        nameGap: 8,
+        nameLocation: 'end',
+        nameGap: 10,
         nameTextStyle: {
+          color: '#939499',
           fontSize: 12,
-          padding: [0, 0, 3, 0], // 微调名称位置
+          padding: [0, 50, 0, 0], // 微调名称位置
         },
         min: 0,
         max: Math.ceil(Math.max(...yAxis) / 20) * 20,
         interval: calcInterval(yAxis, 20),
         axisLabel: {
           formatter: '{value}%',
-          fontSize: 8,
-          margin: 4,
+          fontSize: 12,
+          margin: 10,
           showMinLabel: true,
           showMaxLabel: true,
+          color: '#939499',
         },
         splitLine: {
           lineStyle: {
             type: 'dashed',
-            color: 'rgba(255,255,255,0.3)',
-            width: 0.8,
+            // color: 'rgba(255,255,255,0.3)',
+            // width: 0.8,
           },
         },
       },
       {
         // 右侧TGI轴
         type: 'value',
-        name: 'TGI指数',
-        nameLocation: 'top',
-        nameGap: 8,
+        name: 'TGI',
+        nameLocation: 'end',
+        nameGap: 10,
         nameTextStyle: {
-          fontSize: 10,
-          color: '#F64B31',
-          padding: [0, 0, 3, 0],
+          fontSize: 12,
+          color: '#939499',
+          padding: [0, 0, 0, 20],
         },
         min: Math.floor(Math.min(...yAxis2) / 50) * 50,
         max: Math.ceil(Math.max(...yAxis2) / 50) * 50,
         interval: calcInterval(yAxis2, 50),
         axisLabel: {
-          fontSize: 8,
+          fontSize: 12,
           margin: 4,
-          color: '#F64B31',
+          color: '#939499',
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dashed',
+            // color: 'rgba(255,255,255,0.3)',
+            // width: 0.8,
+          },
         },
         axisLine: {
           lineStyle: {
+            type: 'dashed',
             color: '#F64B31',
             width: 0.8,
           },
@@ -386,7 +445,7 @@ const drawAgeChart = () => {
         // 柱状图
         name: '占比',
         type: 'bar',
-        barWidth: 10,
+        barWidth: 16,
         itemStyle: {
           color: '#6d4cfe',
           borderRadius: [1, 1, 0, 0], // 微圆角
@@ -395,7 +454,7 @@ const drawAgeChart = () => {
           show: true,
           position: 'top',
           formatter: '{c}%',
-          fontSize: 8,
+          fontSize: 12,
           color: '#fff',
           distance: 1, // 减小标签与柱子的距离
         },
@@ -420,14 +479,15 @@ const drawAgeChart = () => {
             type: 'dashed',
           },
           label: {
-            fontSize: 8,
+            fontSize: 12,
             color: '#FFAE00',
             formatter: (params) => {
               // 改用回调函数
               const avg = params.data.coord[1]; // 获取平均值坐标
               return 'TGI:' + avg.toFixed(0); // 格式化显示
             },
-            position: 'end',
+            position: 'insideEnd',
+            offset: [0, -10],
           },
           data: [{ type: 'average' }],
         },
@@ -498,7 +558,7 @@ onMounted(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -522,4 +582,41 @@ onMounted(() => {
   color: #6d4cfe !important;
   border-color: #6d4cfe !important;
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
+.cts {
+  color: var(--Text-2, #3c4043);
+  font-family: 'PuHuiTi-Regular';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 157.143% */
+  &.num {
+    font-family: 'HarmonyOS Sans SC';
+  }
+}
+:deep(.arco-tabs) {
+  display: flex;
+  flex-direction: column;
+  .arco-tabs-content {
+    flex: 1;
+    .arco-tabs-content-list,
+    .arco-tabs-pane,
+    .arco-table-container {
+      height: 100%;
+    }
+  }
+}
 </style>
diff --git a/src/views/components/login/style.scss b/src/views/components/login/style.scss
index 65c68ae..ca2849a 100644
--- a/src/views/components/login/style.scss
+++ b/src/views/components/login/style.scss
@@ -24,7 +24,7 @@
     transform: translateX(-50%);
 
     .text {
-      font-family: Alibaba PuHuiTi;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
diff --git a/src/views/components/management/account/index.vue b/src/views/components/management/account/index.vue
index 95423e0..0a4f038 100644
--- a/src/views/components/management/account/index.vue
+++ b/src/views/components/management/account/index.vue
@@ -180,7 +180,7 @@ onMounted(() => {
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Brand-Brand-1, rgba(240, 237, 255, 1));
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -191,7 +191,7 @@ onMounted(() => {
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Functional-Warning-1, rgba(255, 245, 222, 1));
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 12px;
   color: var(--Functional-Warning-6, rgba(255, 174, 0, 1));
@@ -200,7 +200,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 2px 12px;
   border: 1px solid var(--Functional-Danger-6, rgba(246, 75, 49, 1));
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -210,7 +210,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 5px 16px;
   border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 14px;
   color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
@@ -220,14 +220,14 @@ onMounted(() => {
   margin-bottom: 12px;
   .add-account-title {
     margin: 0;
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
   }
   .add-account-subtitle {
     margin: 4px 0 0 0;
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -239,7 +239,7 @@ onMounted(() => {
     border-radius: 4px;
     padding: 12px 16px;
     background: var(--BG-200, rgba(242, 243, 245, 1));
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -250,7 +250,7 @@ onMounted(() => {
   }
   .cannot-add-account-title {
     margin: 0;
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
@@ -263,7 +263,7 @@ onMounted(() => {
   .cannot-add-account-subtitle {
     margin: 16px 0 0 0;
     padding-left: 32px;
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -272,7 +272,7 @@ onMounted(() => {
 .delete-modal-content {
   margin-left: 34px;
   margin-top: 16px;
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 12px;
   color: var(--Text-2, rgba(60, 64, 67, 1));
diff --git a/src/views/components/management/enterprise/index.vue b/src/views/components/management/enterprise/index.vue
index 9224306..029b86d 100644
--- a/src/views/components/management/enterprise/index.vue
+++ b/src/views/components/management/enterprise/index.vue
@@ -99,7 +99,7 @@ async function handleOk() {
   padding: 10px 16px;
   background: var(--BG-100, rgba(247, 248, 250, 1));
   border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 12px;
   span {
@@ -112,7 +112,7 @@ async function handleOk() {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -120,12 +120,12 @@ async function handleOk() {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -135,7 +135,7 @@ async function handleOk() {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
     }
@@ -150,7 +150,7 @@ async function handleOk() {
   border: 1px solid rgba(109, 76, 254, 1);
   border-radius: 4px;
   padding: 2px 12px;
-  font-family: Alibaba PuHuiTi, serif;
+  font-family: 'PuHuiTi-Medium';
   font-weight: 400;
   font-size: 12px;
   color: rgba(109, 76, 254, 1);
diff --git a/src/views/components/management/person/index.vue b/src/views/components/management/person/index.vue
index 9ad7605..e03c6a7 100644
--- a/src/views/components/management/person/index.vue
+++ b/src/views/components/management/person/index.vue
@@ -255,7 +255,7 @@ function getFileExtension(filename: string): string {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -263,12 +263,12 @@ function getFileExtension(filename: string): string {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -278,7 +278,7 @@ function getFileExtension(filename: string): string {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
     }
@@ -298,7 +298,7 @@ function getFileExtension(filename: string): string {
     border-radius: 4px;
     padding: 2px 12px;
     border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 12px;
     vertical-align: middle;
diff --git a/src/views/components/workplace/modules/case.vue b/src/views/components/workplace/modules/case.vue
index bb27992..237d78c 100644
--- a/src/views/components/workplace/modules/case.vue
+++ b/src/views/components/workplace/modules/case.vue
@@ -139,7 +139,7 @@ interface SuccessCase {
       max-width: 100%;
     }
     .title {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
@@ -151,7 +151,7 @@ interface SuccessCase {
       margin: 0;
       padding: 0;
       .keyword {
-        font-family: Alibaba PuHuiTi, serif;
+        font-family: 'PuHuiTi-Medium';
         font-weight: 400;
         font-size: 12px;
         line-height: 20px;
@@ -169,7 +169,7 @@ interface SuccessCase {
       line-height: 28px;
       text-align: center;
       .unit {
-        font-family: Alibaba PuHuiTi, serif;
+        font-family: 'PuHuiTi-Medium';
         font-weight: 400;
         font-size: 10px;
         line-height: 24px;
@@ -178,7 +178,7 @@ interface SuccessCase {
       }
     }
     .label {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 10px;
       line-height: 100%;
diff --git a/src/views/components/workplace/modules/product.vue b/src/views/components/workplace/modules/product.vue
index affaeda..577faea 100644
--- a/src/views/components/workplace/modules/product.vue
+++ b/src/views/components/workplace/modules/product.vue
@@ -131,7 +131,7 @@ const gotoModule = (menuId: number) => {
     border-radius: 4px;
     padding-right: 8px;
     padding-left: 8px;
-    font-family: Alibaba PuHuiTi, serif;
+    font-family: 'PuHuiTi-Medium';
     font-weight: 400;
     font-size: 12px;
     line-height: 20px;
@@ -165,7 +165,7 @@ const gotoModule = (menuId: number) => {
     background: rgba(255, 245, 222, 1);
 
     :deep(.arco-statistic-title) {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 12px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -175,7 +175,7 @@ const gotoModule = (menuId: number) => {
     }
 
     :deep(.arco-statistic-value) {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 10px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -190,7 +190,7 @@ const gotoModule = (menuId: number) => {
     margin-top: 12px;
 
     .title {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 16px;
       line-height: 24px;
@@ -199,7 +199,7 @@ const gotoModule = (menuId: number) => {
     }
 
     .desc {
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -216,7 +216,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       background-color: rgba(109, 76, 254, 1) !important;
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -232,7 +232,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-      font-family: Alibaba PuHuiTi, serif;
+      font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;