renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 页面样式优化

Browse Source
This commit is contained in:
rd
2025-06-30 18:37:27 +08:00
parent bce406d2ca
commit a486d42fa5
8 changed files with 354 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/layouts/Basic.vue
View File

@ -11,6 +11,8 @@ const appStore = useAppStore();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
console.log({ appStore });
useResponsive(true); useResponsive(true);
const navbarHeight = `60px`; const navbarHeight = `60px`;
const navbar = computed(() => appStore.navbar); const navbar = computed(() => appStore.navbar);
@ -23,14 +25,17 @@ const menuWidth = computed(() => {
const collapsed = computed(() => { const collapsed = computed(() => {
return appStore.menuCollapse; 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(() => { const showSidebar = computed(() => {
return !(route.meta && route.meta.hideSidebar); 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(() => { onMounted(() => {
checkHasInviteCode(); checkHasInviteCode();

1
src/styles/components/index.scss Normal file
View File

@ -0,0 +1 @@
@import './table.scss';

41
src/styles/components/table.scss Normal file
View File

@ -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;
}
}
}
}
}
}
}
}

7
src/styles/index.ts
View File

@ -1,3 +1,8 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-30 16:03:42
*/
import './vars.css';
import './components/index.scss';
import 'normalize.css'; import 'normalize.css';
import 'uno.css'; import 'uno.css';
import './vars.css';

37
src/views/components/dataEngine/hotCloud.vue
View File

@ -1,20 +1,15 @@
<template> <template>
<view> <view>
<topHeader ref="topHeaderRef" @search="search"></topHeader> <topHeader ref="topHeaderRef" @search="search"></topHeader>
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0"> <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px 32px; margin: 24px 0">
<a-space align="center"> <div class="title-row">
<span>行业词云</span> <span class="title mr-4px">行业词云</span>
<a-popover position="tl"> <a-tooltip>
<a-button type="primary" class="pop-btn"> <template #content>基于行业内内容提取的高频词汇。</template>
<template #icon> <icon-question-circle size="16" class="color-#737478" />
<icon-question-circle /> </a-tooltip>
</template> </div>
</a-button>
<template #content>
<p style="margin: 0">基于行业内内容提取的高频词汇。</p>
</template>
</a-popover>
</a-space>
<div class="multi-row-tag-cloud"> <div class="multi-row-tag-cloud">
<!-- 动态生成多行标签 --> <!-- 动态生成多行标签 -->
<div <div
@ -211,4 +206,18 @@ a-tag:hover {
color: #737478 !important; color: #737478 !important;
margin-left: -5px; 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> </style>

247
src/views/components/dataEngine/hotTranslation.vue
View File

@ -2,58 +2,44 @@
<view> <view>
<topHeader ref="topHeaderRef" @search="search"></topHeader> <topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- tabel --> <!-- tabel -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin-bottom: 24px"> <a-space
<a-space align="center"> direction="vertical"
<span>行业热门话题洞察</span> class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid"
<a-popover position="tl"> style="background-color: #fff; width: 100%; padding: 0px 20px; margin-bottom: 24px"
<a-button type="primary" class="pop-btn"> >
<template #icon> <div class="title-row">
<icon-question-circle /> <span class="title mr-4px">行业热门话题洞察</span>
</template> <a-tooltip>
</a-button> <template #content>基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</template>
<template #content> <icon-question-circle size="16" class="color-#737478" />
<p style="margin: 0">基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</p> </a-tooltip>
</template> </div>
</a-popover>
</a-space>
<a-table <a-table
:columns="columns" :columns="columns"
:data="dataList" :data="dataList"
:filter-icon-align-left="alignLeft" :filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true" :scroll="true"
:pagination="false" :pagination="false"
@change="handleChange"
> >
<template #hotTitle> <template #hotTitle>
<a-space> <a-space>
<span>热度指数</span> <span>热度指数</span>
<a-popover position="tl"> <a-tooltip>
<a-button type="primary" class="pop-btn2"> <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<template #icon> <icon-question-circle size="14" class="color-#737478" />
<icon-question-circle /> </a-tooltip>
</template>
</a-button>
<template #content>
<p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
</template>
</a-popover>
</a-space> </a-space>
</template> </template>
<template #sentimentTitle> <template #sentimentTitle>
<a-space> <a-space>
<span>情感倾向</span> <span>情感倾向</span>
<a-popover position="tr"> <a-tooltip>
<a-button type="primary" class="pop-btn2"> <template #content
<template #icon> >统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
<icon-question-circle /> >
</template> <icon-question-circle size="14" class="color-#737478" />
</a-button> </a-tooltip>
<template #content>
<p style="margin: 0">
统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。
</p>
</template>
</a-popover>
</a-space> </a-space>
</template> </template>
<template #rank="{ record }"> <template #rank="{ record }">
@ -63,85 +49,92 @@
<span v-else>{{ record.rank }}</span> <span v-else>{{ record.rank }}</span>
</template> </template>
<template #keywords="{ record }"> <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>
<template #hot="{ record }"> <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>
<template #sentiment="{ record }"> <template #sentiment="{ record }">
<img <img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
v-if="record.felling == '2'" <img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
src="@/assets/img/hottranslation/good.png" <img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
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>
<template #optional="{ record }"> <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> </template>
</a-table> </a-table>
</a-space> </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> <template #title>
<span style="text-align: left; width: 100%">行业热门话题洞察</span> <span style="text-align: left; width: 100%">行业热门话题洞察</span>
</template> </template>
<div> <div>
<a-space direction="vertical"> <a-space direction="vertical">
<a-space> <div class="mb-4px flex items-center">
<span style="margin-right: 16px">话题名称</span> <p class="cts !mr-16px flex-shrink-0 w-48px">话题名称</p>
<span>{{ topicInfo.name }}</span> <span class="cts">{{ topicInfo.name }}</span>
</a-space> </div>
<a-space> <div class="mb-10px flex items-start">
<span style="margin-right: 16px">话题简介</span> <p class="cts !mr-16px flex-shrink-0 w-48px">话题简介</p>
<span>{{ topicInfo.intro }}</span> <span class="cts">{{ topicInfo.intro }}</span>
</a-space> </div>
<a-space> <div class="mb-4px flex items-center">
<span style="margin-right: 16px">关键词</span> <p class="cts !mr-16px flex-shrink-0 w-48px">关键词</p>
<a-tag v-for="item in topicInfo.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag> <a-tag
</a-space> v-for="item in topicInfo.keywords"
<a-space> :key="item"
<span style="margin-right: 16px">热度指数</span> 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" /> <img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
</a-space> </div>
<a-space> <div class="mb-4px flex items-center">
<span style="margin-right: 16px">情感指数</span> <p class="cts !mr-16px flex-shrink-0 w-48px">情感指数</p>
<img <img v-if="topicInfo.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-20px h-20px" />
v-if="topicInfo.felling == '2'"
src="@/assets/img/hottranslation/good.png"
style="width: 16px; height: 16px"
/>
<img <img
v-else-if="topicInfo.felling == '1'" v-else-if="topicInfo.felling == '1'"
src="@/assets/img/hottranslation/normal.png" src="@/assets/img/hottranslation/normal.png"
style="width: 16px; height: 16px" class="w-20px h-20px"
/> />
<img <img
v-else-if="topicInfo.felling == '0'" v-else-if="topicInfo.felling == '0'"
src="@/assets/img/hottranslation/poor.png" src="@/assets/img/hottranslation/poor.png"
style="width: 16px; height: 16px" class="w-20px h-20px"
/> />
</a-space> </div>
<a-space direction="top"> <div class="flex items-start">
<span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span> <p class="!mr-16px w-48px cts relative top-2px">原始来源</p>
<a-space direction="vertical" style="margin-left: 15px"> <div class="flex flex-col">
<a-space v-for="item in topicInfo.industry_topic_sources" :key="item"> <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">{{ item.title }}</a-link> <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" style="width: 16px; height: 16px" />
</a-space> </div>
</a-space> </div>
</a-space> </div>
</a-space> </a-space>
</div> </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> </a-modal>
</view> </view>
</template> </template>
@ -188,10 +181,10 @@ const columns = [
minWidth: 180, minWidth: 180,
title: '热度指数', title: '热度指数',
dataIndex: 'hot', dataIndex: 'hot',
slotName: 'hot',
sortable: { sortable: {
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
slotName: 'hot',
}, },
{ {
titleSlotName: 'sentimentTitle', titleSlotName: 'sentimentTitle',
@ -204,8 +197,7 @@ const columns = [
{ {
title: '操作', title: '操作',
slotName: 'optional', slotName: 'optional',
width: 120, width: 80,
minWidth: 120,
}, },
]; ];
// 切换排序方向 // 切换排序方向
@ -305,7 +297,16 @@ const handleOk = () => {
}; };
</script> </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) { :deep(.arco-table-th) {
background-color: var(--color-fill-2); background-color: var(--color-fill-2);
@ -345,4 +346,64 @@ const handleOk = () => {
:deep(.arco-btn-text:not(.arco-btn-disabled):hover) { :deep(.arco-btn-text:not(.arco-btn-disabled):hover) {
background-color: transparent; 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> </style>

211
src/views/components/dataEngine/keyWord.vue
View File

@ -1,57 +1,41 @@
<!-- eslint-disable vue/no-duplicate-attributes -->
<template> <template>
<view> <view>
<topHeader ref="topHeaderRef" @search="search"></topHeader> <topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- 关键词热度榜 --> <!-- 关键词热度榜 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0"> <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<a-space align="center"> <div class="title-row">
<span>关键词热度榜</span> <span class="title mr-4px">关键词热度榜</span>
<a-popover position="tl"> <a-tooltip>
<a-button type="primary" class="pop-btn"> <template #content>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
<template #icon> <icon-question-circle size="16" class="color-#737478" />
<icon-question-circle /> </a-tooltip>
</template> </div>
</a-button>
<template #content>
<p style="margin: 0">基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</p>
</template>
</a-popover>
</a-space>
<a-table <a-table
:columns="columns" :columns="columns"
:data="dataList" :data="dataList"
:filter-icon-align-left="alignLeft" :filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true" :scroll="true"
:pagination="false" :pagination="false"
@change="handleChange"
> >
<template #heatLevel> <template #heatLevel>
<a-space> <a-space>
<span>热度指数</span> <span>热度指数</span>
<a-popover position="tl"> <a-tooltip>
<a-button type="primary" class="pop-btn2"> <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<template #icon> <icon-question-circle size="14" class="color-#737478" />
<icon-question-circle /> </a-tooltip>
</template>
</a-button>
<template #content>
<p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
</template>
</a-popover>
</a-space> </a-space>
</template> </template>
<template #trendTitle> <template #trendTitle>
<a-space> <a-space>
<span>变化幅度</span> <span>变化幅度</span>
<a-popover position="tr"> <a-tooltip>
<a-button type="primary" class="pop-btn2"> <template #content>仅基于关键词出现频次。</template>
<template #icon> <icon-question-circle size="14" class="color-#737478" />
<icon-question-circle /> </a-tooltip>
</template>
</a-button>
<template #content>
<p style="margin: 0">仅基于关键词出现频次。</p>
</template>
</a-popover>
</a-space> </a-space>
</template> </template>
@ -68,65 +52,36 @@
<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" />
</template> </template>
<template #sentiment="{ record }"> <template #sentiment="{ record }">
<img <img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
v-if="record.felling == '2'" <img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
src="@/assets/img/hottranslation/good.png" <img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
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>
<template #tred="{ record }"> <template #tred="{ record }">
<a-statistic <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
style="font-size: 14px" <icon-arrow-up v-if="record.trend > 0" size="16" />
v-if="record.trend > 0" <icon-arrow-down v-else size="16" />
:value="record.trend * 100" {{ `${record.trend * 100}%` }}
:value-style="{ color: '#F64B31' }" </div>
>
<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>
</template> </template>
</a-table> </a-table>
</a-space> </a-space>
<!-- 行业情绪 --> <!-- 行业情绪 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0"> <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<a-space align="center"> <div class="title-row">
<span>行业情绪</span> <span class="title mr-4px">行业情绪</span>
<a-popover position="tl"> <a-tooltip>
<a-button type="primary" class="pop-btn"> <template #content
<template #icon> >对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。</template
<icon-question-circle /> >
</template> <icon-question-circle size="16" class="color-#737478" />
</a-button> </a-tooltip>
<template #content> </div>
<p style="margin: 0">
对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。
</p>
</template>
</a-popover>
</a-space>
<a-space align="center"> <a-space align="center">
<a-space> <a-space>
<a-space style="width: 320px"> <a-space style="width: 320px">
<div id="container" style="height: 180px; width: 180px"></div> <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> <a-space>
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span> <span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
<span>正面情绪 </span> <span>正面情绪 </span>
@ -144,9 +99,9 @@
:data="rowData" :data="rowData"
:span-method="spanMethod" :span-method="spanMethod"
:filter-icon-align-left="alignLeft" :filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true" :scroll="true"
:pagination="false" :pagination="false"
@change="handleChange"
> >
<template #felling="{ record }"> <template #felling="{ record }">
<img <img
@ -170,27 +125,24 @@
</a-space> </a-space>
</a-space> </a-space>
<!-- 新兴关键词 --> <!-- 新兴关键词 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0"> <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<a-space align="center"> <div class="title-row">
<span>新兴关键词 </span> <span class="title mr-4px">新兴关键词</span>
<a-popover position="tl"> <a-tooltip>
<a-button type="primary" class="pop-btn"> <template #content
<template #icon> >指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
<icon-question-circle /> >
</template> <icon-question-circle size="16" class="color-#737478" />
</a-button> </a-tooltip>
<template #content> </div>
<p style="margin: 0">指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</p>
</template>
</a-popover>
</a-space>
<a-table <a-table
:columns="columns3" :columns="columns3"
:data="keywordList" :data="keywordList"
:filter-icon-align-left="alignLeft" :filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true" :scroll="true"
:pagination="false" :pagination="false"
@change="handleChange"
> >
<template #rank="{ record }"> <template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" /> <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@ -253,23 +205,11 @@
</a-space> </a-space>
</template> </template>
<template #tred="{ record }"> <template #tred="{ record }">
<a-statistic <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
style="font-size: 14px" <icon-arrow-up v-if="record.trend > 0" size="16" />
:value="record.trend * 100" <icon-arrow-down v-else size="16" />
:value-style="{ color: '#F64B31' }" {{ `${record.trend * 100}%` }}
v-if="record.trend > 0" </div>
>
<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>
</template> </template>
<template #optional="{ record }"> <template #optional="{ record }">
<a-button type="outline" @click="gotoDetail(record)">详情</a-button> <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
@ -277,7 +217,7 @@
</a-table> </a-table>
</a-space> </a-space>
<!-- modal --> <!-- modal -->
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose> <a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
<template #title> <template #title>
<span style="text-align: left; width: 100%">新兴关键词</span> <span style="text-align: left; width: 100%">新兴关键词</span>
</template> </template>
@ -377,14 +317,12 @@ const columns = [
title: '排名', title: '排名',
dataIndex: 'rank', dataIndex: 'rank',
slotName: 'rank', slotName: 'rank',
width: 60, width: 100,
minWidth: 60,
}, },
{ {
title: '关键词名称', title: '关键词名称',
dataIndex: 'name', dataIndex: 'name',
width: 250, width: 300,
minWidth: 250,
}, },
{ {
titleSlotName: 'heatLevel', titleSlotName: 'heatLevel',
@ -394,8 +332,7 @@ const columns = [
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
slotName: 'hot', slotName: 'hot',
width: 180, width: 220,
minWidth: 180,
}, },
{ {
titleSlotName: 'trendTitle', titleSlotName: 'trendTitle',
@ -405,13 +342,13 @@ const columns = [
}, },
dataIndex: 'tred', dataIndex: 'tred',
slotName: 'tred', slotName: 'tred',
width: 180, width: 220,
minWidth: 180,
}, },
{ {
title: '情感倾向', title: '情感倾向',
dataIndex: 'sentiment', dataIndex: 'sentiment',
slotName: 'sentiment', slotName: 'sentiment',
width: 220,
}, },
]; ];
const columns2 = [ const columns2 = [
@ -594,12 +531,12 @@ const getNewKeywordList = async () => {
}; };
const drawChart = () => { const drawChart = () => {
var dom = document.getElementById('container'); let dom = document.getElementById('container');
var myChart = echarts.init(dom, null, { let myChart = echarts.init(dom, null, {
renderer: 'canvas', renderer: 'canvas',
useDirtyRect: false, useDirtyRect: false,
}); });
var option; let option;
option = { option = {
color: ['#25C883', '#F64B31'], color: ['#25C883', '#F64B31'],
series: [ series: [
@ -646,7 +583,7 @@ onMounted(() => {
}); });
</script> </script>
<style scoped> <style scoped lang="scss">
/* 自定义样式 */ /* 自定义样式 */
:deep(.arco-table-th) { :deep(.arco-table-th) {
background-color: var(--color-fill-2); background-color: var(--color-fill-2);
@ -672,4 +609,18 @@ onMounted(() => {
color: #737478 !important; color: #737478 !important;
margin-left: -8px; 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> </style>

79
src/views/components/dataEngine/topHeader.vue
View File

@ -3,95 +3,86 @@
<!-- 头部 --> <!-- 头部 -->
<a-space <a-space
direction="vertical" 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" 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"> <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="width: 60px; flex-shrink: 0; line-height: 28px">行业大类</span> <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">行业大类</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start"> <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag <a-tag
size="Medium"
v-for="item in industriesTree" v-for="item in industriesTree"
:key="item.id" :key="item.id"
size="Medium"
:checkable="true" :checkable="true"
:checked="selectedIndustry == item.id" :checked="selectedIndustry == item.id"
@check="handleIndustryCheck(item.id)" style="padding: 10px 16px; border-radius: 30px; height: 28px"
style="padding: 4px 16px; border-radius: 30px; height: 28px"
:style=" :style="
selectedIndustry == item.id selectedIndustry == item.id
? 'color: #6d4cfe; background-color: #f0edff' ? 'color: #6D4CFE; background-color: #F0EDFF'
: 'color: #3C4043; background-color: #F7F8FA' : 'color: #3C4043; background-color: #F7F8FA'
" "
@check="handleIndustryCheck(item.id)"
>{{ item.name }}</a-tag >{{ item.name }}</a-tag
> >
</div> </div>
</a-space> </a-space>
<!-- 二级类目 --> <!-- 二级类目 -->
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start"> <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="width: 60px; flex-shrink: 0; line-height: 28px">二级类目</span> <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">二级类目</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start"> <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag <a-tag
size="Medium"
v-for="item in subCategories" v-for="item in subCategories"
:key="item.id" :key="item.id"
size="Medium"
:checkable="true" :checkable="true"
:checked="selectedSubCategory == item.id" :checked="selectedSubCategory == item.id"
@check="handleSubCategoryCheck(item.id)" style="padding: 10px 16px; border-radius: 30px; height: 28px"
style="padding: 4px 16px; border-radius: 30px; height: 28px"
:style=" :style="
selectedSubCategory == item.id selectedSubCategory == item.id
? 'color: #6d4cfe; background-color: #f0edff' ? 'color: #6d4cfe; background-color: #f0edff'
: 'color: #3C4043; background-color: #F7F8FA' : 'color: #3C4043; background-color: #F7F8FA'
" "
@check="handleSubCategoryCheck(item.id)"
>{{ item.name }}</a-tag >{{ item.name }}</a-tag
> >
</div> </div>
</a-space> </a-space>
<!-- </a-space> --> <!-- </a-space> -->
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start"> <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="width: 60px; flex-shrink: 0; line-height: 28px">时间筛选</span> <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">时间筛选</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start"> <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag <a-tag
size="Medium"
v-for="item in timePeriods" v-for="item in timePeriods"
:key="item.value" :key="item.value"
size="Medium"
:checkable="true" :checkable="true"
:checked="selectedTimePeriod == item.value" :checked="selectedTimePeriod == item.value"
@check="handleTimePeriodCheck(item.value)" style="padding: 10px 16px; border-radius: 30px; height: 28px"
style="padding: 4px 16px; border-radius: 30px; height: 28px"
:style=" :style="
selectedTimePeriod == item.value selectedTimePeriod == item.value
? 'color: #6d4cfe; background-color: #f0edff' ? 'color: #6d4cfe; background-color: #f0edff'
: 'color: #3C4043; background-color: #F7F8FA' : 'color: #3C4043; background-color: #F7F8FA'
" "
@check="handleTimePeriodCheck(item.value)"
>{{ item.label }} >{{ item.label }}
</a-tag> </a-tag>
</div> </div>
</a-space> </a-space>
<!-- 搜索区域 --> <!-- 搜索区域 -->
<a-space style="margin-left: 'auto'; margin-top: 20px"> <a-space style="margin-left: 'auto'">
<a-button type="primary" @click="handleSearch"> <a-button type="primary" size="medium" @click="handleSearch">
<template #icon> <template #icon>
<icon-search /> <icon-search />
</template> </template>
<!-- Use the default slot to avoid extra spaces --> <!-- Use the default slot to avoid extra spaces -->
<template #default>搜索</template> <template #default>搜索</template>
</a-button> </a-button>
<div <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
@click="handleReset" <template #icon>
style=" <icon-refresh />
width: 92px; </template>
height: 32px; <template #default>重置</template>
font-size: 14px; </a-button>
color: #3c4043;
border: 1px solid #d7d7d9;
text-align: center;
line-height: 32px;
border-radius: 4px;
"
>
<icon-refresh></icon-refresh>
<span>重置</span>
</div>
</a-space> </a-space>
</a-space> </a-space>
</view> </view>
@ -101,6 +92,7 @@
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { fetchIndustriesTree } from '@/api/all/index'; import { fetchIndustriesTree } from '@/api/all/index';
const emit = defineEmits<(e: 'search') => void>();
// 行业大类 // 行业大类
const industriesTree = ref([]); const industriesTree = ref([]);
// 数据状态 // 数据状态
@ -169,9 +161,6 @@ const getIndustriesTree = async () => {
subCategories.value.unshift({ id: 0, name: '全部' }); subCategories.value.unshift({ id: 0, name: '全部' });
} }
}; };
const emit = defineEmits<{
(e: 'search'): void;
}>();
// 搜索 // 搜索
const handleSearch = () => { const handleSearch = () => {
emit('search'); emit('search');
@ -183,7 +172,7 @@ const handleReset = () => {
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
/* 自定义样式 */ /* 自定义样式 */
:deep(.arco-table-th) { :deep(.arco-table-th) {
background-color: var(--color-fill-2); background-color: var(--color-fill-2);
@ -199,4 +188,12 @@ const handleReset = () => {
:deep(.arco-modal-body) { :deep(.arco-modal-body) {
padding: 0px; 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> </style>