feat(property-marketing): 优化报表页面布局和功能
- 重新设计了业务分析报告和竞品分析报告的页面布局 - 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式 - 更新了图表组件，支持更多图表类型 - 调整了路由模块中的报表名称
This commit is contained in:
林志军
@ -6,7 +6,7 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">投放建议优化。</p>
|
||||
<p>投放建议优化。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
@ -15,31 +15,31 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">表现分析。</p>
|
||||
<p>表现分析。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<div>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<div style="margin-right: 24px">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群分析</span>
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆/穿搭”，一线城市，抖音平台 ROI 3.2</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为“数码产品”，二线城市，巨量引擎 ROI 2.8</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
18-24岁男性，兴趣为“运动/健身”，三线城市，抖音 ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
@ -52,19 +52,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
图文风格 + 明确福利点，CTR 3.2%、CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
场景短视频 + 明确人设定位，CTR 2.7%、CVR 7.1%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
口播讲解类 + 产品对比，CTR 2.1%、CVR 6.0%</span
|
||||
>
|
||||
</a-space>
|
||||
@ -79,19 +79,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
晚高峰时段（19:00–21:00），ROI 3.1</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
中午时段（11:30–13:00），ROI 2.5</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
下午茶时段（15:00–17:00），ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
@ -105,19 +105,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
抖音 - ROI 3.2，CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
聚光平台 - ROI 2.7，CVR 7.3%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
B站 - ROI 2.4，CVR 6.8%</span
|
||||
>
|
||||
</a-space>
|
||||
@ -142,19 +142,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
集中在 18–24 岁女性 + 精准兴趣标签（如“护肤”、“口红”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
24–30 岁男性 + 实用类内容受众（如“工具控”、“搞机党”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
泛娱乐向受众 + 较大地域分布（兴趣“短剧”、“直播带货”）</span
|
||||
>
|
||||
</a-space>
|
||||
@ -169,19 +169,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
福利明确+钩子强的图文短视频，建议加限时优惠提示</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
场景代入型视频，突出客户痛点与产品关联</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
达人口播/测评，搭配标题党封面吸引点击</span
|
||||
>
|
||||
</a-space>
|
||||
@ -197,19 +197,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
预算前置在 ROI 最佳时段和平台，优先抢头部流量</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
中等预算组合投放 + 高点击素材A/B测试</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
低预算长周期测试，重点看 CVR，优胜劣汰</span
|
||||
>
|
||||
</a-space>
|
||||
@ -223,11 +223,10 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
import { getStarIcon } from '../../constants';
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import './style.scss';
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">预算分配</span>
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群包优化</span>
|
||||
@ -67,7 +67,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="table-data">
|
||||
<a-table
|
||||
class="account-table"
|
||||
:columns="columns"
|
||||
@ -54,12 +54,10 @@
|
||||
|
||||
<template #weekConsumptionRate="{ record }">
|
||||
<a-statistic
|
||||
style="font-size: 14px !important"
|
||||
:value="record.week_consumption_rate * 100"
|
||||
:value-style="{
|
||||
color: record.week_consumption_rate > 0 ? '#F64B31' : '#25C883',
|
||||
fontStyle: 'normal',
|
||||
fontSize: '14px !important',
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
@ -83,10 +81,6 @@
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
|
||||
const listQuery = reactive({
|
||||
project_id: ref(''),
|
||||
platform: ref(''),
|
||||
@ -177,41 +171,20 @@ const listResult = reactive({
|
||||
],
|
||||
total: ref(0),
|
||||
});
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.arco-textarea-wrapper,
|
||||
.arco-input-wrapper {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
<style lang="scss" scoped>
|
||||
.table-data {
|
||||
//账户列表-分页
|
||||
.account-page {
|
||||
padding: 10px 24px 20px 24px;
|
||||
background-color: #fff;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.arco-input-wrapper {
|
||||
height: 35px;
|
||||
:deep(.custom-statistic .arco-statistic-value) {
|
||||
font-size: 14px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
//账户列表-分页
|
||||
.account-page {
|
||||
padding: 10px 24px 20px 24px;
|
||||
background-color: #fff;
|
||||
float: right;
|
||||
}
|
||||
|
||||
// 分页器 - 页码下拉菜单样式穿透
|
||||
:deep(.arco-select-item),
|
||||
:deep(.arco-select-item) {
|
||||
background-color: #fff !important;
|
||||
height: 30px;
|
||||
color: white !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user