智能方案管理页面
This commit is contained in:
林志军
@ -0,0 +1,186 @@
|
||||
.placement-guide-style {
|
||||
//每块div布局
|
||||
.part-div {
|
||||
width: 100%;
|
||||
background: var(--BG-white, white);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
outline: 1px var(--BG-300, #E6E6E8) solid;
|
||||
outline-offset: -1px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
display: inline-flex;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
//每块div 头部
|
||||
.part-div-header {
|
||||
align-self: stretch;
|
||||
height: 64px;
|
||||
padding: 10px 24px 10px 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
//每块div 标题
|
||||
.part-div-header-title {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
//账户指南-搜索div
|
||||
.search-form {
|
||||
padding: 10px 24px 20px 24px;
|
||||
|
||||
}
|
||||
|
||||
//账户列表-表格
|
||||
.account-table {
|
||||
padding: 1px 24px 20px 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//账户列表-分页
|
||||
.account-page {
|
||||
padding: 10px 24px 20px 24px;
|
||||
border: 1px;
|
||||
border-color: red;
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
.month-data-body {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
background: var(--BG-white, white);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
outline: 1px var(--BG-300, #E6E6E8) solid;
|
||||
outline-offset: -1px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
//本周摘要div
|
||||
.month-body-div {
|
||||
align-self: stretch;
|
||||
height: 64px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
//本月摘要标题
|
||||
.month-data-title {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//本月摘要-蓝色字体
|
||||
.month-text-blue {
|
||||
color: var(--Brand-Brand-6, #6D4CFE);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//红色字体
|
||||
.month-text-red {
|
||||
color: var(--Functional-Danger-6, #F64B31);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//黑色字体
|
||||
.month-text-black {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//本月摘要数据-div
|
||||
.month-data-div {
|
||||
align-self: stretch;
|
||||
padding: 16px 30px 16px 16px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--Brand-Brand-1, #F0EDFF);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//投放建议-总体策略
|
||||
.overall-strategy {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
padding: 20px 24px 20px 16px;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
display: inline-flex;
|
||||
margin: 10px 0px 15px 20px;
|
||||
|
||||
}
|
||||
|
||||
//投放优化每块div小标题
|
||||
.placement-optimization-title {
|
||||
// 总体策略
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.placement-optimization-str {
|
||||
align-self: stretch;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<view class="placement-guide-style">
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">投放指南</span>
|
||||
</div>
|
||||
|
||||
<a-space size="large" class="search-form">
|
||||
<a-space>
|
||||
<span>账户</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>项目</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>平台</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" class="reset-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">账户列表</span>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
class="account-table"
|
||||
:columns="columns"
|
||||
:data="listResult.data"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #week_consumption>
|
||||
<a-space>
|
||||
<span>本周总消耗</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>本周总消耗</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #weekConsumptionRateTitle>
|
||||
<a-space>
|
||||
<span>本周总消耗环比</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>本周总消耗环比</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #roi>
|
||||
<a-space>
|
||||
<span>roi</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>roi</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #ctr>
|
||||
<a-space>
|
||||
<span>ctr</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>ctr</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template #weekConsumptionRate="{ record }">
|
||||
<a-statistic
|
||||
style="font-size: 15px"
|
||||
v-if="record.week_consumption_rate > 0"
|
||||
:value="record.week_consumption_rate * 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.week_consumption_rate * 100"
|
||||
:value-style="{ color: '#25C883' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-down />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 分页 -->
|
||||
<a-pagination
|
||||
class="account-page"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.page_size"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
/>
|
||||
</div>
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">本月摘要</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
|
||||
|
||||
<p style="margin: 0">本月摘要。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
<div class="month-data-div">
|
||||
<div style="align-self: stretch">
|
||||
<span class="month-text-black">总消耗：</span>
|
||||
<span class="month-text-blue">￥52,382.16</span>
|
||||
<span class="month-normal-span">，较上周期</span><span class="month-text-red">↑12.6%</span>
|
||||
<span class="month-normal-span">；<br />整体ROI：</span><span class="month-text-blue">2.84</span>
|
||||
<span class="month-normal-span">，属于</span><span class="month-text-red">中等偏高水平</span>
|
||||
<span class="month-text-black">，较上周期 </span><span class="month-text-red">+0.45</span>
|
||||
<span class="month-normal-span">；<br />主要转化来源：</span><span class="month-text-blue">抖音 46.3%</span>
|
||||
<span class="month-normal-span">，CTR 2.91%；<br />优质素材表现：</span>
|
||||
<span class="month-text-blue">美团酒店爆款横版1号</span>
|
||||
<span class="month-normal-spanw">。CTR 3.47%，CVR 5.92%。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">投放建议优化</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">投放建议优化。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">总体策略</span>
|
||||
<span class="placement-optimization-str">本周建议</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">预算分配</span>
|
||||
<span class="placement-optimization-str"
|
||||
>巨量ROI高，建议将预算提升至 ￥5,000元/日 <br />
|
||||
聚光 ROAS明显下降，建议减少预算 30%</span
|
||||
>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">时段优化</span>
|
||||
<span class="placement-optimization-str"
|
||||
>过去7日 19:00-21:00 转化率最高，提升了12.6% <br />
|
||||
建议设置定时投放，仅在高效时段曝光</span
|
||||
>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群包优化</span>
|
||||
<span class="placement-optimization-str"
|
||||
>18-24岁女性转化率最高，建议加预算 <br />
|
||||
25-34岁男香表现较差，建议停投节省成本</span
|
||||
>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">素材优化</span>
|
||||
<span class="placement-optimization-str"
|
||||
>替换当前点击率下降的xxxxx素材<br />
|
||||
增加同类风格素材：xxxxx素材点击率更高 <br />
|
||||
建议优化元素：视频封面/文案/开头引导，可提升CTR</span
|
||||
>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { IconDelete, 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';
|
||||
import '@/views/property-marketing/put-account/investmentGuidelines.less';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '账户名称',
|
||||
dataIndex: 'account_name',
|
||||
slotName: 'account_name',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform_name',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'project_name',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '项目名称',
|
||||
dataIndex: 'project_name',
|
||||
},
|
||||
{
|
||||
title: '本周总消耗',
|
||||
titleSlotName: 'week_consumption',
|
||||
dataIndex: 'week_consumption',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '本周总消耗环比',
|
||||
titleSlotName: 'weekConsumptionRateTitle',
|
||||
dataIndex: 'week_consumption_rate',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
slotName: 'weekConsumptionRate',
|
||||
},
|
||||
{
|
||||
title: 'ROI',
|
||||
titleSlotName: 'roi',
|
||||
dataIndex: 'roi',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: 'CTR',
|
||||
titleSlotName: 'ctr',
|
||||
dataIndex: 'ctr',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
|
||||
const listQuery = reactive({
|
||||
project_id: ref(''),
|
||||
platform: ref(''),
|
||||
page: ref(1),
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
});
|
||||
|
||||
const listResult = reactive({
|
||||
data: [
|
||||
{
|
||||
account_name: '全球旅行',
|
||||
platform_name: '平台',
|
||||
project_name: '项目名称',
|
||||
week_consumption: '本周总消耗',
|
||||
week_consumption_rate: 0.1,
|
||||
roi: '2.6',
|
||||
ctr: '3.1%',
|
||||
},
|
||||
{
|
||||
account_name: '全球旅行',
|
||||
platform_name: '平台',
|
||||
project_name: '项目名称',
|
||||
week_consumption: '本周总消耗',
|
||||
week_consumption_rate: -0.1,
|
||||
roi: '2.6',
|
||||
ctr: '3.1%',
|
||||
},
|
||||
{
|
||||
account_name: '全球旅行',
|
||||
platform_name: '平台',
|
||||
project_name: '项目名称',
|
||||
week_consumption: '本周总消耗',
|
||||
week_consumption_rate: -0.1,
|
||||
roi: '2.6',
|
||||
ctr: '3.1%',
|
||||
},
|
||||
],
|
||||
total: ref(0),
|
||||
});
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user