From eed617d9abf87f8c27f10fae0ee7356f6aed20ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Wed, 25 Jun 2025 15:25:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=95=E6=94=BE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../account-placement/placementGuide.vue      | 374 ++++++++++++++++++
 1 file changed, 374 insertions(+)
 create mode 100644 src/views/property-marketing/account-placement/placementGuide.vue

diff --git a/src/views/property-marketing/account-placement/placementGuide.vue b/src/views/property-marketing/account-placement/placementGuide.vue
new file mode 100644
index 0000000..8100fa8
--- /dev/null
+++ b/src/views/property-marketing/account-placement/placementGuide.vue
@@ -0,0 +1,374 @@
+<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">
+              <template #icon>
+                <icon-search />
+              </template>
+              <!-- Use the default slot to avoid extra spaces -->
+              <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>
+
+    <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';
+
+const listQuery = reactive({
+  project_id: ref(''),
+  platform: ref(''),
+  page: ref(1),
+  name: ref(''),
+  page_size: ref('10'),
+});
+
+const listResult = reactive({
+  list: ref([
+    {
+      account_name: '全球旅行小助手',
+      platform: '巨量',
+      project: '巨量',
+      ctr: '巨量',
+      huanbi: '巨量',
+      total_xiaohao: '巨量',
+      roi: '巨量',
+    },
+  ]),
+  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>