Merge remote-tracking branch 'origin/master' into feature/v1.3_营销资产中台
# Conflicts: # src/main.ts # src/styles/components/index.scss # src/styles/components/table.scss # src/styles/index.ts # src/views/components/dataEngine/keyWord.vue
This commit is contained in:
rd
@ -1,14 +1,10 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-19 01:45:53
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>灵机AI营销平台1</title>
|
||||
<title>灵机AI营销平台</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
BIN
src/assets/fonts/Alibaba-PuHuiTi-Bold.otf
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Bold.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Alibaba-PuHuiTi-Medium.otf
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Medium.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Alibaba-PuHuiTi-Regular.otf
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Regular.otf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1009 B |
Binary file not shown.
|
Before Width: | Height: | Size: 865 B After Width: | Height: | Size: 736 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.0 KiB |
BIN
src/components/_base/exit-account-modal/img/icon1.png
Normal file
BIN
src/components/_base/exit-account-modal/img/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 B |
98
src/components/_base/exit-account-modal/index.vue
Normal file
98
src/components/_base/exit-account-modal/index.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-26 17:23:52
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
width="400px"
|
||||
modal-class="exit-account-modal"
|
||||
show-close="false"
|
||||
:footer="false"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="flex items-center mb-16px">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span class="s1">确认退出登录吗？</span>
|
||||
</div>
|
||||
<p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
|
||||
<div class="flex items-center justify-end">
|
||||
<a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
|
||||
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
|
||||
>退出登录</a-button
|
||||
>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { fetchLogOut } from '@/api/all/login';
|
||||
import { handleUserLogout } from '@/utils/user';
|
||||
|
||||
import icon1 from './img/icon1.png';
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onLogout() {
|
||||
const { code } = await fetchLogOut();
|
||||
if (code === 200) {
|
||||
handleUserLogout();
|
||||
AMessage.success('退出登录成功');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.exit-account-modal {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8) !important;
|
||||
background-color: var(--BG-white, #fff) !important;
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
.arco-modal-header {
|
||||
display: none;
|
||||
}
|
||||
.arco-modal-body {
|
||||
padding: 24px;
|
||||
.s1 {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.s2 {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
.cancel-btn {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
&:hover {
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
}
|
||||
}
|
||||
.danger-btn {
|
||||
border-radius: 4px;
|
||||
background: var(--Functional-Danger-6, #f64b31) !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -121,7 +121,7 @@ export default defineComponent({
|
||||
auto-open={false}
|
||||
selected-keys={selectedKey.value}
|
||||
auto-open-selected={true}
|
||||
level-indent={34}
|
||||
level-indent={24}
|
||||
style="height: 100%;width:100%;"
|
||||
onCollapse={setCollapse}
|
||||
>
|
||||
@ -132,16 +132,59 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.arco-menu-inner) {
|
||||
padding: 20px 24px 0 12px !important;
|
||||
.arco-menu-inline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
.arco-menu-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
.arco-menu-title {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.arco-menu-item {
|
||||
border-radius: 8px;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,7 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
import router from '@/router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
|
||||
|
||||
interface MenuItem {
|
||||
name: string;
|
||||
@ -20,7 +21,7 @@ interface MenuItem {
|
||||
const lists = ref<MenuItem[]>([]);
|
||||
const sidebarStore = useSidebarStore();
|
||||
const route = useRoute();
|
||||
|
||||
const exitAccountModalRef = ref(null);
|
||||
const selectedKey = computed(() => {
|
||||
// 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
|
||||
if (route.name === 'Home' || route.path === '/') {
|
||||
@ -31,10 +32,7 @@ const selectedKey = computed(() => {
|
||||
});
|
||||
|
||||
const clickExit = async () => {
|
||||
const { code } = await fetchLogOut();
|
||||
if (code === 200) {
|
||||
handleUserLogout();
|
||||
}
|
||||
exitAccountModalRef.value?.open();
|
||||
};
|
||||
const getMenus = async () => {
|
||||
const res = await fetchMenusTree();
|
||||
@ -80,27 +78,30 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="left-side">
|
||||
<a-space>
|
||||
<a-space class="cursor-pointer" @click="router.push('/')">
|
||||
<img src="@/assets/logo.svg" alt="" />
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="center-side">
|
||||
<div class="menu-demo">
|
||||
<div class="menu-demo h-100%">
|
||||
<a-menu
|
||||
mode="horizontal"
|
||||
:selected-keys="selectedKey"
|
||||
:default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
|
||||
>
|
||||
<a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
|
||||
<view>工作台</view>
|
||||
<span class="menu-item-text">工作台</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
|
||||
<a-dropdown :popup-max-height="false">
|
||||
<a-button>{{ item.name }}<icon-caret-down /></a-button>
|
||||
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||
<a-button>
|
||||
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">{{
|
||||
child.name
|
||||
}}</a-doption>
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-menu-item>
|
||||
@ -109,31 +110,37 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
</div>
|
||||
<ul class="right-side">
|
||||
<li>
|
||||
<a-dropdown trigger="click">
|
||||
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||||
<a-avatar class="cursor-pointer" :size="32">
|
||||
<img alt="avatar" src="@/assets/avatar.svg" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<div style="padding: 14px">
|
||||
<div>
|
||||
<a-doption>
|
||||
<a-space @click="setServerMenu">
|
||||
<img src="@/assets/option.svg" style="width: 16px; height: 16px" />
|
||||
<span style="width: 140px; font-size: 12px">管理中心</span>
|
||||
<icon-right />
|
||||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>管理中心</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<a-space>
|
||||
<img src="@/assets/change.svg" style="width: 16px; height: 16px" />
|
||||
<span style="width: 140px; font-size: 12px">切换企业账号</span>
|
||||
<icon-right />
|
||||
<!-- <a-doption>
|
||||
<a-space class="flex justify-between w-100%">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>切换企业账号</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</a-doption> -->
|
||||
<a-doption>
|
||||
<a-space @click="clickExit">
|
||||
<img src="@/assets/exit.svg" style="width: 16px; height: 16px" />
|
||||
<span style="width: 140px; font-size: 12px">退出登录</span>
|
||||
<icon-right />
|
||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</div>
|
||||
@ -141,10 +148,11 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
</a-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
<ExitAccountModal ref="exitAccountModalRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style scoped lang="scss">
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -163,6 +171,46 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
align-items: center;
|
||||
|
||||
margin-left: 40px;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.arco-menu) {
|
||||
height: 100%;
|
||||
.arco-menu-inner {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.arco-menu-item {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.arco-menu-selected {
|
||||
.menu-item-text,
|
||||
.arco-menu-selected-label {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
.arco-menu-selected-label {
|
||||
background: var(--Brand-Brand-6, #6d4cfe);
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon-down {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.cneter-tip {
|
||||
font-size: 16px;
|
||||
@ -192,3 +240,53 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-menu-item-dropdown,
|
||||
.layout-avatar-dropdown {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-avatar-dropdown {
|
||||
width: 200px;
|
||||
.arco-dropdown {
|
||||
padding: 12px 4px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 !important;
|
||||
&-content {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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;
|
||||
|
||||
BIN
src/components/no-data/img/icon-empty.png
Normal file
BIN
src/components/no-data/img/icon-empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
49
src/components/no-data/index.vue
Normal file
49
src/components/no-data/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-07-01 16:09:21
|
||||
-->
|
||||
<template>
|
||||
<div class="no-data">
|
||||
<slot name="pic">
|
||||
<img :src="emptyIcon" class="img" alt="" width="106" height="72" />
|
||||
</slot>
|
||||
<slot>
|
||||
<div v-if="text" class="text mt-36px">{{ text }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import icon from './img/icon-empty.png';
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
default: '暂无数据',
|
||||
},
|
||||
emptyIcon: {
|
||||
type: String,
|
||||
default: icon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-data {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: 10%;
|
||||
padding-bottom: 10%;
|
||||
line-height: 1.5em;
|
||||
.text {
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
src/components/no-data/style.scss
Normal file
0
src/components/no-data/style.scss
Normal file
@ -11,8 +11,10 @@ const appStore = useAppStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
console.log({ appStore });
|
||||
|
||||
useResponsive(true);
|
||||
const navbarHeight = `60px`;
|
||||
const navbarHeight = `72px`;
|
||||
const navbar = computed(() => appStore.navbar);
|
||||
const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
|
||||
const hideMenu = computed(() => appStore.hideMenu);
|
||||
@ -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();
|
||||
@ -69,7 +74,7 @@ provide('toggleDrawerMenu', () => {
|
||||
breakpoint="xl"
|
||||
:collapsed="collapsed"
|
||||
:width="menuWidth"
|
||||
:style="{ paddingTop: navbar ? '60px' : '' }"
|
||||
:style="{ paddingTop: navbar ? '72px' : '' }"
|
||||
collapsible
|
||||
hide-trigger
|
||||
@collapse="setCollapsed"
|
||||
@ -102,7 +107,7 @@ provide('toggleDrawerMenu', () => {
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
@nav-size-height: 60px;
|
||||
@nav-size-height: 72px;
|
||||
@layout-max-width: 1100px;
|
||||
|
||||
.layout {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import store from './stores';
|
||||
import NoData from '@/components/no-data';
|
||||
import '@/api/index';
|
||||
|
||||
import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
|
||||
@ -17,4 +18,5 @@ import './mock';
|
||||
const app = createApp(App);
|
||||
app.use(store);
|
||||
app.use(router);
|
||||
app.component('NoData', NoData);
|
||||
app.mount('#app');
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
24
src/styles/font.scss
Normal file
24
src/styles/font.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 14:03:21
|
||||
* @Date: 2025-06-30 16:03:42
|
||||
*/
|
||||
import './vars.css';
|
||||
import './components/index.scss';
|
||||
import './font.scss';
|
||||
import 'normalize.css';
|
||||
import 'uno.css';
|
||||
|
||||
@ -1,54 +1,55 @@
|
||||
<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>
|
||||
<div class="multi-row-tag-cloud">
|
||||
<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>
|
||||
|
||||
<div class="multi-row-tag-cloud h-472px">
|
||||
<NoData v-if="tagRows.length === 0" text="暂无数据" />
|
||||
<!-- 动态生成多行标签 -->
|
||||
<div
|
||||
v-for="(row, rowIndex) in tagRows"
|
||||
:key="rowIndex"
|
||||
class="tag-row"
|
||||
:style="{ justifyContent: row.align || 'center' }"
|
||||
>
|
||||
<a-tag
|
||||
v-for="(tag, tagIndex) in row.tags"
|
||||
:key="tagIndex"
|
||||
class="cursor-pointer"
|
||||
:style="{
|
||||
fontSize: `${getTagStyle(rowIndex, tagIndex, row.tags.length).fontSize}px`,
|
||||
height: `${getTagStyle(rowIndex, tagIndex, row.tags.length).lineHeight}px`,
|
||||
color: '#6d4cfe',
|
||||
backgroundColor: '#F0EDFF',
|
||||
margin: '0 12px 12px 0',
|
||||
transition: 'all 0.3s',
|
||||
paddingLeft: `${getPaddingLeft(rowIndex, tagIndex)}px`,
|
||||
paddingRight: `${getPaddingLeft(rowIndex, tagIndex)}px`,
|
||||
borderRadius: '32px',
|
||||
fontWeight: 400,
|
||||
}"
|
||||
@mouseenter="hoverTag = tag"
|
||||
@mouseleave="hoverTag = null"
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(row, rowIndex) in tagRows"
|
||||
:key="rowIndex"
|
||||
class="tag-row"
|
||||
:style="{ justifyContent: row.align || 'center' }"
|
||||
>
|
||||
<a-space>
|
||||
<a-tooltip :content="`性价比:${Number(tag.rate * 100)}%`" position="tl">
|
||||
<a-space>{{ tag.term }}</a-space>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</a-tag>
|
||||
</div>
|
||||
<a-tag
|
||||
v-for="(tag, tagIndex) in row.tags"
|
||||
:key="tagIndex"
|
||||
class="cursor-pointer"
|
||||
:style="{
|
||||
fontSize: `${getTagStyle(rowIndex, tagIndex, row.tags.length).fontSize}px`,
|
||||
height: `${getTagStyle(rowIndex, tagIndex, row.tags.length).lineHeight}px`,
|
||||
color: '#6d4cfe',
|
||||
backgroundColor: '#F0EDFF',
|
||||
margin: '0 12px 12px 0',
|
||||
transition: 'all 0.3s',
|
||||
paddingLeft: `${getPaddingLeft(rowIndex, tagIndex)}px`,
|
||||
paddingRight: `${getPaddingLeft(rowIndex, tagIndex)}px`,
|
||||
borderRadius: '32px',
|
||||
fontWeight: 400,
|
||||
}"
|
||||
@mouseenter="hoverTag = tag"
|
||||
@mouseleave="hoverTag = null"
|
||||
>
|
||||
<a-space>
|
||||
<a-tooltip :content="`性价比:${Number(tag.rate * 100)}%`" position="tl">
|
||||
<a-space>{{ tag.term }}</a-space>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</a-space>
|
||||
</view>
|
||||
@ -98,7 +99,7 @@ const getIndustryTerms = async () => {
|
||||
};
|
||||
|
||||
// 标签数据（按行分组）
|
||||
const tagRows = ref();
|
||||
const tagRows = ref([]);
|
||||
const hoverTag = ref(null);
|
||||
|
||||
const lineHeightStart = [28, 52, 58, 72, 58, 52, 28]; // 7行时
|
||||
@ -211,4 +212,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: 'PuHuiTi-Medium';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,58 +2,46 @@
|
||||
<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 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 #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<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 +51,91 @@
|
||||
<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 #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>
|
||||
<img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</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 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>
|
||||
@ -188,10 +182,10 @@ const columns = [
|
||||
minWidth: 180,
|
||||
title: '热度指数',
|
||||
dataIndex: 'hot',
|
||||
slotName: 'hot',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'hot',
|
||||
},
|
||||
{
|
||||
titleSlotName: 'sentimentTitle',
|
||||
@ -204,8 +198,7 @@ const columns = [
|
||||
{
|
||||
title: '操作',
|
||||
slotName: 'optional',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
// 切换排序方向
|
||||
@ -305,7 +298,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 +347,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: 'PuHuiTi-Medium';
|
||||
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: '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>
|
||||
|
||||
@ -1,72 +1,57 @@
|
||||
<!-- 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 #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<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,45 +64,34 @@
|
||||
<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">
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</view>
|
||||
@ -276,7 +250,7 @@ watch(selectedIndustry, () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/* 自定义样式 */
|
||||
:deep(.arco-table-th) {
|
||||
background-color: var(--color-fill-2);
|
||||
@ -306,4 +280,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>
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
<!-- 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"
|
||||
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"
|
||||
@ -24,34 +23,25 @@
|
||||
:pagination="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<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,110 +58,88 @@
|
||||
<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 }">
|
||||
<div class="flex items-center justify-end" :class="record.trend >= 0 ? 'color-#f64b31' : 'color-#25c883'">
|
||||
<icon-arrow-up v-if="record.trend >= 0" size="16" />
|
||||
<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 === 0 ? 0 : Math.abs(record.trend * 100)}%` }}
|
||||
{{ `${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 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"
|
||||
<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
|
||||
>
|
||||
<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>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
|
||||
<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 #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<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: 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"
|
||||
>
|
||||
<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"
|
||||
@ -180,6 +148,9 @@
|
||||
:pagination="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
@ -204,7 +175,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" />
|
||||
@ -213,51 +184,27 @@
|
||||
<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 }">
|
||||
<a-statistic
|
||||
v-if="record.trend > 0"
|
||||
style="font-size: 14px"
|
||||
: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-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>
|
||||
@ -265,63 +212,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>
|
||||
@ -345,6 +286,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];
|
||||
|
||||
@ -365,14 +325,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',
|
||||
@ -382,8 +340,7 @@ const columns = [
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'hot',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'trendTitle',
|
||||
@ -393,13 +350,13 @@ const columns = [
|
||||
},
|
||||
dataIndex: 'tred',
|
||||
slotName: 'tred',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
title: '情感倾向',
|
||||
dataIndex: 'sentiment',
|
||||
slotName: 'sentiment',
|
||||
width: 220,
|
||||
},
|
||||
];
|
||||
const columns2 = [
|
||||
@ -407,8 +364,8 @@ const columns2 = [
|
||||
title: '情绪分布',
|
||||
dataIndex: 'felling',
|
||||
slotName: 'felling',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
width: 160,
|
||||
// minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '主要观点',
|
||||
@ -416,13 +373,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 = [
|
||||
@ -598,7 +590,7 @@ const drawChart = () => {
|
||||
labelLine: {
|
||||
show: false, // 不显示引导线
|
||||
},
|
||||
radius: ['40%', '55%'],
|
||||
radius: ['50%', '70%'], // 调整半径范围
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -634,7 +626,7 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/* 自定义样式 */
|
||||
:deep(.arco-table-th) {
|
||||
background-color: var(--color-fill-2);
|
||||
@ -660,4 +652,75 @@ 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: '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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -3,28 +3,31 @@
|
||||
<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 #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
@ -32,98 +35,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 +133,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 +245,7 @@ const search = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/* 自定义样式 */
|
||||
:deep(.arco-table-th) {
|
||||
background-color: var(--color-fill-2);
|
||||
@ -263,4 +269,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>
|
||||
|
||||
@ -1,91 +1,78 @@
|
||||
<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>
|
||||
<a-space>
|
||||
<div id="container" style="height: 180px; width: 180px"></div>
|
||||
<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 v-if="genderData.length > 0">
|
||||
<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 v-else>
|
||||
<NoData class="w-100% h-100%" />
|
||||
</div>
|
||||
</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>
|
||||
<a-space align="center">
|
||||
<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 v-if="ageValueData.length > 0" align="center">
|
||||
<span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
|
||||
<span style="color: #6d4cfe">占比</span>
|
||||
<span style="width: 16px; height: 8px; background-color: #f64b31; border-radius: 2px"></span>
|
||||
<span style="color: #f64b31">TGI比</span>
|
||||
</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 v-if="ageValueData.length === 0" class="w-100% flex-1">
|
||||
<NoData />
|
||||
</div>
|
||||
<div v-else 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 +85,17 @@
|
||||
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 #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank" />
|
||||
<a-table-column title="省份" data-index="geo" />
|
||||
@ -116,20 +106,27 @@
|
||||
</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 #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<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 +138,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 +177,15 @@ 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;
|
||||
nextTick(() => {
|
||||
drawAgeChart();
|
||||
});
|
||||
}
|
||||
const res = await fetchAgeDistributionsList(params);
|
||||
console.log('年龄分布：', res);
|
||||
ageValueData.value = res;
|
||||
drawAgeChart();
|
||||
};
|
||||
|
||||
// 获得地理分布列表
|
||||
@ -202,11 +202,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 +222,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 +302,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 +322,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 +373,9 @@ const drawAgeChart = () => {
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
fontSize: 12,
|
||||
margin: 2,
|
||||
margin: 10,
|
||||
hideOverlap: true, // 自动隐藏重叠标签
|
||||
color: '#939499',
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
@ -330,51 +392,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 +458,7 @@ const drawAgeChart = () => {
|
||||
// 柱状图
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barWidth: 16,
|
||||
itemStyle: {
|
||||
color: '#6d4cfe',
|
||||
borderRadius: [1, 1, 0, 0], // 微圆角
|
||||
@ -395,7 +467,7 @@ const drawAgeChart = () => {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%',
|
||||
fontSize: 8,
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
distance: 1, // 减小标签与柱子的距离
|
||||
},
|
||||
@ -420,14 +492,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 +571,7 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/* 自定义样式 */
|
||||
:deep(.arco-table-th) {
|
||||
background-color: var(--color-fill-2);
|
||||
@ -522,4 +595,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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
<template>
|
||||
<Container title="账号信息" class="container mt-24px">
|
||||
<template #header>
|
||||
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
|
||||
<div class="title-row">
|
||||
<span class="title">账号管理</span>
|
||||
<a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button>
|
||||
</template>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
class="mt-16px"
|
||||
class="mt-8px h-540px"
|
||||
@page-change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #mobile="{ record }">
|
||||
<div class="flex item-center pt-13px pb-13px">
|
||||
<span class="mr-4px">{{ record.mobile }}</span>
|
||||
@ -52,7 +56,7 @@
|
||||
<DeleteModal v-model:visible="deleteVisible" :title="deleteTitle" @ok="handleDelete">
|
||||
<p class="delete-modal-content">删除后，该账号将无法登录您的企业。</p>
|
||||
</DeleteModal>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Container from '@/components/container.vue';
|
||||
@ -180,7 +184,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 +195,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 +204,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 +214,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 +224,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 +243,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 +254,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 +267,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,9 +276,24 @@ 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));
|
||||
}
|
||||
.title-row {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 10px 0 2px 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<Container title="企业信息" class="container mt-24px">
|
||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px">
|
||||
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
|
||||
<div class="title-row">
|
||||
<span class="title">企业信息</span>
|
||||
</div>
|
||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #info="{ record }">
|
||||
{{ record.name }}
|
||||
</template>
|
||||
@ -27,7 +33,7 @@
|
||||
</a-form>
|
||||
</Modal>
|
||||
<CustomerServiceModal v-model:visible="customerServiceVisible" />
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Container from '@/components/container.vue';
|
||||
@ -99,7 +105,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 +118,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 +126,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 +141,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,9 +156,23 @@ 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);
|
||||
}
|
||||
.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: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<Container title="个人信息" class="container mt-24px">
|
||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px">
|
||||
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
|
||||
<div class="title-row">
|
||||
<span class="title">个人信息</span>
|
||||
</div>
|
||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #info="{ record }">
|
||||
<div class="pt-3px pb-3px">
|
||||
<a-avatar :image-url="record.head_image" :size="32" />
|
||||
@ -71,7 +77,7 @@
|
||||
@cancel="verificationVisible = false"
|
||||
/>
|
||||
</Modal>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Container from '@/components/container.vue';
|
||||
@ -248,14 +254,14 @@ function getFileExtension(filename: string): string {
|
||||
return match ? match[1].toLowerCase() : '';
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
<style scoped lang="scss">
|
||||
.form {
|
||||
margin-top: 13px;
|
||||
:deep(.arco-row) {
|
||||
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 +269,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 +284,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,11 +304,25 @@ 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;
|
||||
color: var(--Text-2, rgba(60, 64, 67, 1));
|
||||
}
|
||||
}
|
||||
.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: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,23 +4,17 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="m-auto mt-24px max-w-1000px">
|
||||
<Container title="推荐产品" class="body">
|
||||
<div class="flex flex-wrap">
|
||||
<Product
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
class="mt-20px ml-20px"
|
||||
:product="product"
|
||||
@refresh="getProductList"
|
||||
/>
|
||||
<Container title="推荐产品" class="container-body">
|
||||
<div class="grid grid-cols-3 gap-20px">
|
||||
<Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" />
|
||||
</div>
|
||||
<a-empty v-if="products.length === 0" />
|
||||
<NoData v-if="products.length === 0" />
|
||||
</Container>
|
||||
<Container title="成功案例" class="body mt-24px">
|
||||
<div class="flex flex-wrap">
|
||||
<Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
|
||||
</div>
|
||||
<a-empty v-if="cases.length === 0" />
|
||||
<NoData v-if="cases.length === 0" />
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
@ -53,10 +47,10 @@ const getSuccessCaseList = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.body {
|
||||
padding-left: 4px !important;
|
||||
.container-body {
|
||||
padding-left: 24px !important;
|
||||
:deep(> div > .title) {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
format="D天H时m分s秒"
|
||||
/>
|
||||
</div>
|
||||
<div class="body">
|
||||
<h1 class="title">{{ props.product.name }}</h1>
|
||||
<div class="product-info">
|
||||
<h1 class="title mb4">{{ props.product.name }}</h1>
|
||||
<p class="desc">
|
||||
{{ props.product.desc }}
|
||||
</p>
|
||||
@ -118,7 +118,7 @@ const gotoModule = (menuId: number) => {
|
||||
width: 304px;
|
||||
height: 220px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(230, 230, 232, 1);
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
padding: 20px;
|
||||
|
||||
.avatar {
|
||||
@ -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));
|
||||
@ -185,12 +185,13 @@ const gotoModule = (menuId: number) => {
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
.product-info {
|
||||
height: 88px;
|
||||
margin-top: 12px;
|
||||
|
||||
.title {
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
@ -199,7 +200,8 @@ const gotoModule = (menuId: number) => {
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
@ -208,7 +210,7 @@ const gotoModule = (menuId: number) => {
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 16px;
|
||||
margin-top: 16px;
|
||||
|
||||
.primary-button {
|
||||
height: 24px;
|
||||
@ -216,7 +218,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 +234,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;
|
||||
|
||||
Reference in New Issue
Block a user