From 573af348894b4b6ddcf89b11081952d6f4628bba 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 19:33:02 +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

---
 .../routes/modules/propertyMarketing.ts       |   2 +-
 .../account-placement/placementGuide.less     | 181 +++++++
 .../account-placement/placementGuide.vue      | 509 ++++++------------
 3 files changed, 350 insertions(+), 342 deletions(-)
 create mode 100644 src/views/property-marketing/account-placement/placementGuide.less

diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts
index 5f9ba46..a15af43 100644
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@@ -128,7 +128,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/repository/test'),
+        component: () => import('@/views/property-marketing/account-placement/placementGuide'),
       },
     ],
   },
diff --git a/src/views/property-marketing/account-placement/placementGuide.less b/src/views/property-marketing/account-placement/placementGuide.less
new file mode 100644
index 0000000..58e2f49
--- /dev/null
+++ b/src/views/property-marketing/account-placement/placementGuide.less
@@ -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
+  }
+
+}
diff --git a/src/views/property-marketing/account-placement/placementGuide.vue b/src/views/property-marketing/account-placement/placementGuide.vue
index 8100fa8..1629a6e 100644
--- a/src/views/property-marketing/account-placement/placementGuide.vue
+++ b/src/views/property-marketing/account-placement/placementGuide.vue
@@ -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>