perf: 页面样式优化

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>