feat: 新增投放指南组件和优化品牌物料页面
This commit is contained in:
林志军
@ -1,53 +1,44 @@
|
||||
<template>
|
||||
<view class="placement-guide-style">
|
||||
<view class="view-body">
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">品牌物料</span>
|
||||
<div v-if="listResult.total > 0" style="position: absolute; right: 35px;margin-top: 10px">
|
||||
<a-button style="float: right; width: 100px; height: 35px" type="primary" @click="handleAdd"
|
||||
>+ 添加品牌
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-space v-if="listResult.data.length === 0" direction="vertical" class="non-data">
|
||||
<a-space>
|
||||
<a-image :src="noDataImage" />
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span class="non-data-str">暂无品牌</span>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-button class="add-btn" @click="handleAdd" type="primary">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
去添加
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
|
||||
<a-space v-else>
|
||||
<div class="header-row">
|
||||
<h2 class="page-title">品牌物料</h2>
|
||||
<a-button type="primary" @click="handleAdd" class="add-btn">+ 添加品牌</a-button>
|
||||
</div>
|
||||
<a-space direction="vertical">
|
||||
<a-space size="medium" direction="content" style="margin-left: 24px; margin-bottom: 20px">
|
||||
<a-space>
|
||||
<span>品牌名称</span>
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-row">
|
||||
品牌名称
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索..." allow-clear class="search-input" />
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<a-space style="margin-left: 20px">
|
||||
<a-button type="outline" size="medium" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" size="medium" class="reset-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
|
||||
<!-- 表格 -->
|
||||
|
||||
<a-table :data="listResult.list" :pagination="false">
|
||||
<a-table :data="listResult.data" class="a-table" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="品牌名称" data-index="name" />
|
||||
<a-table-column title="品牌logo" data-index="logo">
|
||||
@ -58,52 +49,53 @@
|
||||
<a-table-column title="Slogan" data-index="slogan" />
|
||||
<a-table-column title="操作" data-index="optional">
|
||||
<template #cell="{ record }">
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteBrand(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
<a-button type="outline" @click="handleEdit(record.id)">编辑</a-button>
|
||||
<a-space size="medium">
|
||||
<a-space>
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteBrand(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-button type="outline" @click="handleEdit(record.id)">编辑</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<a-space direction="vertical" size="large">
|
||||
<div style="float: right; margin-right: 10px">
|
||||
<a-pagination :total="listResult.total" :size="listQuery.page_size" show-total show-jumper show-page-size />
|
||||
</a-space>
|
||||
</div>
|
||||
</a-space>
|
||||
<!-- 新增/编辑品牌弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="modalVisible"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
width="480px"
|
||||
width="510px"
|
||||
@cancel="handleModalCancel"
|
||||
>
|
||||
<template #title>
|
||||
<span class="a-modal-title">{{ form.id > 0 ? '编辑品牌' : '新增品牌' }}</span>
|
||||
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '新增品牌' }}</span>
|
||||
</template>
|
||||
<a-form
|
||||
:model="form"
|
||||
:label-col-props="{ span: 5, offset: 0 }"
|
||||
:wrapper-col-props="{ span: 19, offset: 0 }"
|
||||
label-align="left"
|
||||
:rules="formRule"
|
||||
ref="formRef"
|
||||
layout="left"
|
||||
>
|
||||
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
|
||||
<a-form-item field="name" label="品牌名称">
|
||||
<a-input v-model="form.name" placeholder="请输入品牌名称" />
|
||||
<a-input v-model="form.name" placeholder="请输入..." />
|
||||
</a-form-item>
|
||||
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
|
||||
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
|
||||
<div class="form-tip">品牌常规展示标识，支持PNG、JPG格式</div>
|
||||
<a-space>
|
||||
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
|
||||
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
|
||||
@ -126,7 +118,7 @@ import { ref, computed, reactive, onMounted } from 'vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
import noDataImage from '@/assets/img/guide/no_data.png';
|
||||
import '@/views/property-marketing/enterpriseKnowledge/brandMaterials.less';
|
||||
import '@/views/property-marketing/enterpriseKnowledge/brand-materials/style.scss';
|
||||
|
||||
import {
|
||||
addMaterials,
|
||||
@ -176,9 +168,7 @@ onMounted(() => {
|
||||
const handleSearch = () => {
|
||||
getMaterialsList(listQuery).then((response) => {
|
||||
listResult.data = response.data.data;
|
||||
console.log(response.data, 'response.data');
|
||||
console.log(listResult.data, 'listResult.data');
|
||||
listResult.total = response.total;
|
||||
listResult.total = response.data.total;
|
||||
});
|
||||
};
|
||||
|
||||
@ -196,7 +186,6 @@ function handleReset() {
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
modalTitle.value = '添加品牌';
|
||||
btn_str.value = '确认添加';
|
||||
form.id = 0;
|
||||
form.logo = '';
|
||||
@ -221,7 +210,8 @@ function handleModalOk() {
|
||||
handleSearch();
|
||||
});
|
||||
} else {
|
||||
addMaterials(form).then(() => {
|
||||
addMaterials(form).then((response) => {
|
||||
console.log(response, 'response');
|
||||
Message.success('新增成功');
|
||||
handleSearch();
|
||||
});
|
||||
@ -236,12 +226,10 @@ function handleModalOk() {
|
||||
}
|
||||
|
||||
function handleEdit(id) {
|
||||
modalTitle.value = '编辑品牌';
|
||||
formRef.value.resetFields();
|
||||
modalVisible.value = true;
|
||||
btn_str.value = '确认修改';
|
||||
btn_str.value = '确认';
|
||||
getMaterialsDetail(id).then((response) => {
|
||||
Object.assign(form, response);
|
||||
Object.assign(form, response.data);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -1,4 +1,4 @@
|
||||
.placement-guide-style {
|
||||
.view-body {
|
||||
//每块div布局
|
||||
.part-div {
|
||||
width: 100%;
|
||||
@ -95,9 +95,14 @@
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.search-btn,
|
||||
.reset-btn {
|
||||
min-width: 72px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.search-btn,
|
||||
{
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.brand-table {
|
||||
@ -167,12 +172,6 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.a-form .a-form-item {
|
||||
margin-bottom: 24px;
|
||||
@ -182,9 +181,38 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
//弹窗样式
|
||||
.a-modal-title {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
.a-table {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
&.arco-input-wrapper {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view>
|
||||
<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>
|
||||
<a-space>
|
||||
<span class="player-title">表现分析</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">表现分析。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<div>
|
||||
<a-row class="grid-demo" :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" />
|
||||
18-24岁女性，兴趣为“美妆/穿搭”，一线城市，抖音平台 ROI 3.2</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" 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" />
|
||||
18-24岁男性，兴趣为“运动/健身”，三线城市，抖音 ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<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" />
|
||||
图文风格 + 明确福利点，CTR 3.2%、CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[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" />
|
||||
口播讲解类 + 产品对比，CTR 2.1%、CVR 6.0%</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</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>
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" 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" />
|
||||
中午时段（11:30–13:00），ROI 2.5</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
下午茶时段（15:00–17:00），ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<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" />
|
||||
抖音 - ROI 3.2，CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" 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" />
|
||||
B站 - ROI 2.4，CVR 6.8%</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<a-space>
|
||||
<span class="player-title">新投放建议生成</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">新投放建议生成。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<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" />
|
||||
集中在 18–24 岁女性 + 精准兴趣标签（如“护肤”、“口红”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
24–30 岁男性 + 实用类内容受众（如“工具控”、“搞机党”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
泛娱乐向受众 + 较大地域分布（兴趣“短剧”、“直播带货”）</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<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" />
|
||||
福利明确+钩子强的图文短视频，建议加限时优惠提示</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
场景代入型视频，突出客户痛点与产品关联</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
达人口播/测评，搭配标题党封面吸引点击</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<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" />
|
||||
预算前置在 ROI 最佳时段和平台，优先抢头部流量</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
中等预算组合投放 + 高点击素材A/B测试</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
低预算长周期测试，重点看 CVR，优胜劣汰</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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];
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<view>
|
||||
<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>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view>
|
||||
<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 { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view>
|
||||
<a-table
|
||||
class="account-table"
|
||||
:columns="columns"
|
||||
:data="listResult.data"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:pagination="false"
|
||||
>
|
||||
|
||||
</a-table>
|
||||
</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(''),
|
||||
page: ref(1),
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: '生成日期',
|
||||
dataIndex: 'date',
|
||||
slotName: 'account_name',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'account',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'project_name',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '项目',
|
||||
dataIndex: 'project_name',
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
titleSlotName: 'week_consumption',
|
||||
dataIndex: 'platform',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'date',
|
||||
slotName: 'operation',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
];
|
||||
const listResult = reactive({
|
||||
data: [
|
||||
{
|
||||
date: '日期',
|
||||
account: '账号',
|
||||
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 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);
|
||||
}
|
||||
|
||||
&.arco-input-wrapper {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<!--表单搜索组件-->
|
||||
<template>
|
||||
<view>
|
||||
<a-space size="large" direction="vertical" class="search-form">
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="8">
|
||||
<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-col>
|
||||
<a-col :span="8">
|
||||
<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-col>
|
||||
<a-col :span="8">
|
||||
<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-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="10">
|
||||
<a-space>
|
||||
<span>时间筛选</span>
|
||||
<a-range-picker
|
||||
showTime
|
||||
:time-picker-props="{
|
||||
defaultValue: ['00:00:00', '00:00:00'],
|
||||
}"
|
||||
@change="onChange"
|
||||
@select="onSelect"
|
||||
style="width: 380px"
|
||||
/>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-space>
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const handleSearch = () => {
|
||||
console.log('handleSearch');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-select-view-multiple),
|
||||
:deep(.arco-picker),
|
||||
:deep(.arco-input-wrapper) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
width: 224px;
|
||||
height: 32px;
|
||||
|
||||
&: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>
|
||||
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view>
|
||||
<a-table
|
||||
class="account-table"
|
||||
:columns="columns"
|
||||
:data="listResult.data"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
: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: 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>
|
||||
<icon-arrow-rise v-if="record.week_consumption_rate > 0" />
|
||||
<icon-arrow-down v-else />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
</a-table>
|
||||
<div>
|
||||
<a-pagination
|
||||
class="account-page"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.page_size"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
/>
|
||||
</div>
|
||||
</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(''),
|
||||
page: ref(1),
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: '账户名称',
|
||||
dataIndex: 'account_name',
|
||||
slotName: 'account_name',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'project_name',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '项目名称',
|
||||
dataIndex: 'project_name',
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform_name',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
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 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 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);
|
||||
}
|
||||
|
||||
&.arco-input-wrapper {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
//账户列表-分页
|
||||
.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>
|
||||
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="placement-guide-style">
|
||||
<div class="part-div">
|
||||
<div>
|
||||
<a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="placement_guide">
|
||||
<a-tab-pane key="placement_guide" title="投放指南"></a-tab-pane>
|
||||
<a-tab-pane key="guide_history">
|
||||
<template #title>历史投放指南</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<!--表单组件搜索-->
|
||||
<listSearchForm></listSearchForm>
|
||||
<!-- 投放指南-->
|
||||
<PlacementGuideList v-if="tabData == 'placement_guide'"></PlacementGuideList>
|
||||
<!-- 历史指南列表-->
|
||||
<GuideListHistory v-if="tabData == 'guide_history'"></GuideListHistory>
|
||||
</div>
|
||||
|
||||
<!-- 本月摘要-->
|
||||
<MonthData></MonthData>
|
||||
|
||||
<!-- 投放建议-->
|
||||
<PlacementSuggestions></PlacementSuggestions>
|
||||
<ActionGuideDistribution></ActionGuideDistribution>
|
||||
<div>
|
||||
<a-space style="float: right; margin-top: 10px; margin-bottom: 20px">
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-download />
|
||||
</template>
|
||||
<template #default>下载</template>
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-drive-file />
|
||||
</template>
|
||||
<template #default>保存</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
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/investment-guidelines/style.scss';
|
||||
import PlacementGuideList from './components/table-data/placementGuideList.vue';
|
||||
import listSearchForm from './components/table-data/listSearchForm.vue';
|
||||
import GuideListHistory from './components/table-data/guideListHistory.vue';
|
||||
import MonthData from './components/month-data/index.vue';
|
||||
import PlacementSuggestions from './components/placement-suggestions/index.vue';
|
||||
import ActionGuideDistribution from './components/action-guide-distribution';
|
||||
|
||||
const tabData = ref('placement_guide');
|
||||
|
||||
const listQuery = reactive({
|
||||
project_id: ref(''),
|
||||
platform: ref(''),
|
||||
page: ref(1),
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
});
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,196 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.part-div-header {
|
||||
align-self: stretch;
|
||||
height: 64px;
|
||||
padding: 10px 24px 10px 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
.a-tab-class {
|
||||
color: var(--Brand-6, #6D4CFE);
|
||||
font-size: 66px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
word-wrap: break-word;
|
||||
|
||||
}
|
||||
|
||||
//每块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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
//表现分析标题
|
||||
.player-title {
|
||||
margin: 10px 0px 15px 20px;
|
||||
// 表现分析
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
@ -1,198 +0,0 @@
|
||||
.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
|
||||
}
|
||||
|
||||
//表现分析标题
|
||||
.player-title {
|
||||
margin: 10px 0px 15px 20px;
|
||||
// 表现分析
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,560 +0,0 @@
|
||||
<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>
|
||||
<!-- 分页 -->
|
||||
<div>
|
||||
<a-pagination
|
||||
class="account-page"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.page_size"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
/>
|
||||
</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 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>
|
||||
|
||||
<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>
|
||||
<a-space>
|
||||
<span class="player-title">表现分析</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">表现分析。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<div>
|
||||
<a-row class="grid-demo" :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" />
|
||||
18-24岁女性，兴趣为“美妆/穿搭”，一线城市，抖音平台 ROI 3.2</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" 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" />
|
||||
18-24岁男性，兴趣为“运动/健身”，三线城市，抖音 ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<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" />
|
||||
图文风格 + 明确福利点，CTR 3.2%、CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[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" />
|
||||
口播讲解类 + 产品对比，CTR 2.1%、CVR 6.0%</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</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>
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" 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" />
|
||||
中午时段（11:30–13:00），ROI 2.5</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
下午茶时段（15:00–17:00），ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<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" />
|
||||
抖音 - ROI 3.2，CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" 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" />
|
||||
B站 - ROI 2.4，CVR 6.8%</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<a-space>
|
||||
<span class="player-title">新投放建议生成</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">新投放建议生成。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<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" />
|
||||
集中在 18–24 岁女性 + 精准兴趣标签（如“护肤”、“口红”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
24–30 岁男性 + 实用类内容受众（如“工具控”、“搞机党”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
泛娱乐向受众 + 较大地域分布（兴趣“短剧”、“直播带货”）</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<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" />
|
||||
福利明确+钩子强的图文短视频，建议加限时优惠提示</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
场景代入型视频，突出客户痛点与产品关联</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
达人口播/测评，搭配标题党封面吸引点击</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<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" />
|
||||
预算前置在 ROI 最佳时段和平台，优先抢头部流量</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
中等预算组合投放 + 高点击素材A/B测试</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
低预算长周期测试，重点看 CVR，优胜劣汰</span
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</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