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 route = useRoute();
console.log({ appStore });
useResponsive(true);
const navbarHeight = `60px`;
const navbar = computed(() => appStore.navbar);
@ -23,14 +25,17 @@ const menuWidth = computed(() => {
const collapsed = computed(() => {
return appStore.menuCollapse;
});
const paddingStyle = computed(() => {
const paddingLeft = renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
return { ...paddingLeft, ...paddingTop };
});
const showSidebar = computed(() => {
return !(route.meta && route.meta.hideSidebar);
});
const paddingStyle = computed(() => {
const paddingLeft =
showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
return { ...paddingLeft, ...paddingTop };
});
console.log('showSidebar', showSidebar);
onMounted(() => {
checkHasInviteCode();

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 'uno.css';
import './vars.css';

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

@ -1,20 +1,15 @@
<template>
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
<a-space align="center">
<span>行业词云</span>
<a-popover position="tl">
<a-button type="primary" class="pop-btn">
<template #icon>
<icon-question-circle />
</template>
</a-button>
<template #content>
<p style="margin: 0">基于行业内内容提取的高频词汇。</p>
</template>
</a-popover>
</a-space>
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px 32px; margin: 24px 0">
<div class="title-row">
<span class="title mr-4px">行业词云</span>
<a-tooltip>
<template #content>基于行业内内容提取的高频词汇。</template>
<icon-question-circle size="16" class="color-#737478" />
</a-tooltip>
</div>
<div class="multi-row-tag-cloud">
<!-- 动态生成多行标签 -->
<div
@ -211,4 +206,18 @@ a-tag:hover {
color: #737478 !important;
margin-left: -5px;
}
.title-row {
display: flex;
height: 64px;
// padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style>

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

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

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

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

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

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