投放页面
This commit is contained in:
林志军
@ -0,0 +1,181 @@
|
||||
.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-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
//账户列表-表格
|
||||
.account-table {
|
||||
padding: 1px 24px 20px 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//账户列表-分页
|
||||
.account-page {
|
||||
margin-left: 300px;
|
||||
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,374 +1,201 @@
|
||||
<template>
|
||||
<view>
|
||||
<a-space direction="vertical" class="pading_style">
|
||||
<p class="tfzn">投放指南</p>
|
||||
<a-space direction="content" size="medium">
|
||||
<a-form-item field="acctount" label="账户">
|
||||
<a-select v-model="listQuery.acctount" placeholder="全部" allow-clear>
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
<a-option disabled>Disabled</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="项目" style="margin-left: 20px">
|
||||
<a-select v-model="listQuery.project" placeholder="全部" allow-clear>
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
<a-option disabled>Disabled</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="平台" style="margin-left: 35px">
|
||||
<a-select v-model="listQuery.platform" placeholder="全部" allow-clear>
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
<a-option disabled>Disabled</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="" style="margin-left: 50px">
|
||||
<a-space size="medium">
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<view class="placement-guide-style">
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">投放指南</span>
|
||||
</div>
|
||||
<div>
|
||||
<a-space>
|
||||
<a-space style="padding: 25px">
|
||||
<span>账户</span>
|
||||
<a-select :style="{width:'320px'}" placeholder="Please select ...">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
<a-option disabled>Disabled</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space style="">
|
||||
<span>项目</span>
|
||||
<a-select :style="{width:'320px'}" placeholder="Please select ...">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
<a-option disabled>Disabled</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space style="padding: 15px">
|
||||
<span>平台</span>
|
||||
<a-select :style="{width:'320px'}" placeholder="Please select ...">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
<a-option disabled>Disabled</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<!-- Use the default slot to avoid extra spaces -->
|
||||
<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
|
||||
@click="handleReset"
|
||||
style="
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
margin-left: 10px;
|
||||
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-space>
|
||||
</a-form-item>
|
||||
</a-space>
|
||||
</a-space>
|
||||
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 10px 0">
|
||||
<p>账户列表</p>
|
||||
<a-table :data="listResult.list" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="账户名称" data-index="account_name" />
|
||||
<a-table-column title="平台" data-index="platform" />
|
||||
<a-table-column title="项目名称" data-index="project" />
|
||||
<a-table-column title="本周总消耗" data-index="total_xiaohao" />
|
||||
<a-table-column title="本周总消耗环比" data-index="huanbi" />
|
||||
<a-table-column title="ROI" data-index="roi" />
|
||||
<a-table-column title="CTR" data-index="ctr" />
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 分页 -->
|
||||
<a-space direction="vertical" style="float: right" size="large">
|
||||
<a-pagination :total="listResult.total" :size="listQuery.page_size" show-total show-jumper show-page-size />
|
||||
</a-space>
|
||||
</a-space>
|
||||
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 10px 0">
|
||||
<a-space direction="content" size="medium"> 本周摘要</a-space>
|
||||
<a-space direction="vertical" class="bzzy">
|
||||
<a-space>
|
||||
<a-space>总消耗:</a-space>
|
||||
<a-space>233，较上周期</a-space>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-space>整体ROI:</a-space>
|
||||
<a-space>233，较上周期</a-space>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-space>主要转化来源:</a-space>
|
||||
<a-space>抖音</a-space>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-space>优质素材表现:</a-space>
|
||||
<a-space>美团</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
|
||||
<a-space direction="vertical" class="pading_style">
|
||||
<p>投放优化建议</p>
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space> 总体策略</a-space>
|
||||
<a-space> 本周建议维持预算</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="24"></a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>预算分配</a-space>
|
||||
<a-space>巨量ROI高，建议将预算提升</a-space>
|
||||
<a-space>聚光ROAS明显下降</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>时段优化</a-space>
|
||||
<a-space>巨量ROI高，建议将预算提升</a-space>
|
||||
<a-space>聚光ROAS明显下降</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>人群包优化</a-space>
|
||||
<a-space>巨量ROI高，建议将预算提升</a-space>
|
||||
<a-space>聚光ROAS明显下降</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>素材优化</a-space>
|
||||
<a-space>巨量ROI高，建议将预算提升</a-space>
|
||||
<a-space>聚光ROAS明显下降</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">账户列表</span>
|
||||
</div>
|
||||
|
||||
<!-- table-->
|
||||
<a-table class="account-table" :data="listResult.list" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="账号名称" data-index="name" />
|
||||
<a-table-column title="平台" data-index="name" />
|
||||
<a-table-column title="项目名称" data-index="name" />
|
||||
<a-table-column title="本周总消耗" data-index="name" />
|
||||
<a-table-column title="本周总消耗环比" data-index="name" />
|
||||
<a-table-column title="ROI" data-index="name" />
|
||||
<a-table-column title="CTR" data-index="name" />
|
||||
</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>
|
||||
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 10px 0">
|
||||
<p>投放行动指南</p>
|
||||
<a-space> 表现分析</a-space>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>人群分析</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆,穿搭”，一线城市，抖音平台
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>投放素材</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆,穿搭”，一线城市，抖音平台
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>投放时段</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆,穿搭”，一线城市，抖音平台
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>平台表现</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆,穿搭”，一线城市，抖音平台
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-space> 新投放建议生成</a-space>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="24">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>人群建议</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆,穿搭”，一线城市，抖音平台
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="24">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>素材建议</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆,穿搭”，一线城市，抖音平台
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="24">
|
||||
<div class="common_back">
|
||||
<a-space direction="vertical">
|
||||
<a-space>投放策略建议</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆,穿搭”，一线城市，抖音平台
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
<a-space>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为 数码产品
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { IconDelete } 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 { reactive, ref } from "vue";
|
||||
import { IconDelete } 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/account-placement/placementGuide.less";
|
||||
|
||||
const listQuery = reactive({
|
||||
project_id: ref(''),
|
||||
platform: ref(''),
|
||||
project_id: ref(""),
|
||||
platform: ref(""),
|
||||
page: ref(1),
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
name: ref(""),
|
||||
page_size: ref("10")
|
||||
});
|
||||
|
||||
const listResult = reactive({
|
||||
list: ref([
|
||||
{
|
||||
account_name: '全球旅行小助手',
|
||||
platform: '巨量',
|
||||
project: '巨量',
|
||||
ctr: '巨量',
|
||||
huanbi: '巨量',
|
||||
total_xiaohao: '巨量',
|
||||
roi: '巨量',
|
||||
},
|
||||
account_name: "全球旅行小助手",
|
||||
platform: "巨量",
|
||||
project: "巨量",
|
||||
ctr: "巨量",
|
||||
huanbi: "巨量",
|
||||
total_xiaohao: "巨量",
|
||||
roi: "巨量"
|
||||
}
|
||||
]),
|
||||
total: ref(0),
|
||||
total: ref(0)
|
||||
});
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.common_back {
|
||||
background-color: rgba(247, 248, 250, 1);
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pading_style {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 5px 0px 2px 20px;
|
||||
margin: 24px 0;
|
||||
border-radius: 19px;
|
||||
}
|
||||
|
||||
.tfzn {
|
||||
font: Alibaba PuHuiTi;
|
||||
}
|
||||
|
||||
.bzzy {
|
||||
background-color: rgba(240, 237, 255, 1);
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
margin-top: 16px;
|
||||
border-radius: 19px;
|
||||
}
|
||||
|
||||
.ztcc_title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user