feat(property-marketing): 优化报表页面布局和功能

- 重新设计了业务分析报告和竞品分析报告的页面布局 - 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式 - 更新了图表组件，支持更多图表类型 - 调整了路由模块中的报表名称
2025-06-30 11:36:11 +08:00
parent ad465e6d93
commit 0a3c80a852
17 changed files with 404 additions and 270 deletions
--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
@ -2,7 +2,7 @@
  <div class="chart-container">
    <a-card :bordered="false" class="echart-item-card">
      <template #title>
-        <span>{{ title.name }}</span>
+        <span class="a-card-title" >{{ title.name }}</span>
        <a-popover position="tl">
          <icon-question-circle />
          <template #content>
@ -10,12 +10,12 @@
          </template>
        </a-popover>
      </template>
-      <div id="echarts-line" style="width: 100%; height: 450px"></div>
+      <div id="echarts-line" ref="chart" style="width: 100%; height: 450px"></div>
    </a-card>
  </div>
 </template>

-<script setup>
+<script setup lang="ts">
 import { defineProps, onMounted } from 'vue';
 import * as echarts from 'echarts';
 import { Card } from '@arco-design/web-vue';
@ -38,10 +38,16 @@ const props = defineProps({
    default: [],
  },
 });
+
+const chart = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
 const xAxisData = props.xAxisData;
 const seriesData = props.seriesData;
-onMounted(() => {
-  const myChart = echarts.init(document.getElementById('echarts-line'));
+
+const initChart = () => {
+  if (!chart.value) return;
+  chartInstance = echarts.init(chart.value);

  const option = {
    tooltip: {
@ -96,11 +102,11 @@ onMounted(() => {
    series: seriesData,
  };

-  myChart.setOption(option);
+  chartInstance.setOption(option);
+};

-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
+onMounted(() => {
+  initChart();
 });
 </script>

--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
@ -1,7 +1,21 @@
 .echart-item-card {
  width: 100%;
  height: 50%;
-  margin:13px;
+  margin: 13px;
  border-radius: 10px;

+  :deep(.arco-card-header) {
+    border-bottom: none !important;
+
+  }
+
+  .a-card-title {
+    color: var(--Text-1, #211F24);
+    font-size: 16px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
 }
+
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@ -2,7 +2,7 @@
  <view>
    <div class="part-div">
      <div>
-        <a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
+        <a-tabs v-model:activeKey="tabData" default-active-key="acctoun">
          <a-tab-pane key="acctoun" title="账户"></a-tab-pane>
          <a-tab-pane key="project">
            <template #title>项目</template>
@ -10,71 +10,60 @@
        </a-tabs>
      </div>
      <a-space size="large" direction="vertical" class="search-form">
-        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
-          <a-col :span="5">
-            <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="5">
-            <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="5">
-            <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-space size="large">
+          <a-space>
+            <span>账户名称</span>
+            <a-select multiple 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 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 placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </a-space>
+        </a-space>

-        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
-          <a-col :span="6">
-            <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="5">
-            <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-col>
-        </a-row>
+        <a-space size="large">
+          <a-space>
+            <span>时间筛选</span>
+            <a-range-picker
+              showTime
+              :time-picker-props="{
+                defaultValue: ['00:00:00', '00:00:00'],
+              }"
+              @change="onChange"
+              @select="onSelect"
+            />
+          </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>
      </a-space>
    </div>

@ -95,6 +84,89 @@
          ></EchartsItem>
        </a-col>
      </a-row>
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '点击量', popover: '点击量' }"
+          ></EchartsItem>
+        </a-col>
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '点击率', popover: 点击率 }"
+          ></EchartsItem>
+        </a-col>
+      </a-row>
+
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '平均点击成本', popover: '平均点击成本' }"
+          ></EchartsItem>
+        </a-col>
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '千次展现费用', popover: '千次展现费用' }"
+          ></EchartsItem>
+        </a-col>
+      </a-row>
+
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '转化数', popover: '转化数' }"
+          ></EchartsItem>
+        </a-col>
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '转化率', popover: '转化率' }"
+          ></EchartsItem>
+        </a-col>
+      </a-row>
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '平均转化成本', popover: '平均转化成本' }"
+          ></EchartsItem>
+        </a-col>
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '深度转化数', popover: '深度转化数' }"
+          ></EchartsItem>
+        </a-col>
+      </a-row>
+
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '深度转化率', popover: '深度转化率' }"
+          ></EchartsItem>
+        </a-col>
+        <a-col :span="12">
+          <EchartsItem
+            :xAxisData="xhlEcharts.xAxisData"
+            :seriesData="xhlEcharts.seriesData"
+            :title="{ name: '投资回报率', popover: '投资回报率' }"
+          ></EchartsItem>
+        </a-col>
+      </a-row>
    </div>
  </view>
 </template>
@ -155,8 +227,6 @@ const xhlEcharts = reactive({
    },
  ],
 });
-
-
 </script>

 <style scoped lang="scss">
--- a/src/views/property-marketing/put-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/style.scss
@ -1,3 +1,5 @@
+@import "@/views/property-marketing/component.scss";
+
 .part-div {
  width: 100%;
  background: var(--BG-white, white);
@ -9,35 +11,16 @@
  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
-}
-
-: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);
+  :deep(.arco-tabs) {
+    .arco-tabs-tab {
+      height: 56px;
+      padding: 0 8px;
+    }
  }
 }

+
 .search-btn {
  // 搜索
  color: var(--Brand-6, #6d4cfe);
@ -63,6 +46,6 @@
 }

 .search-form {
-  margin: 20px;
+  margin: 5px 10px 24px 24px;

 }
--- a/src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
@ -6,7 +6,7 @@
        <a-popover position="tl">
          <icon-question-circle />
          <template #content>
-            <p style="margin: 0">投放建议优化。</p>
+            <p>投放建议优化。</p>
          </template>
        </a-popover>
      </div>
@ -15,31 +15,31 @@
        <a-popover position="tl">
          <icon-question-circle />
          <template #content>
-            <p style="margin: 0">表现分析。</p>
+            <p>表现分析。</p>
          </template>
        </a-popover>
      </a-space>
-      <div>
-        <a-row class="grid-demo" :gutter="24">
+      <div style="margin-right: 24px">
+        <a-row :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" />
+                    <img :src="getStarIcon(1)" 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" />
+                    <img :src="getStarIcon(2)" 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" />
+                    <img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
                    18-24岁男性，兴趣为“运动/健身”，三线城市，抖音 ROI 2.3</span
                  >
                </a-space>
@ -52,19 +52,19 @@
              <a-space direction="vertical">
                <a-space class="placement-optimization-str">
                  <span>
-                    <img :src="topImages[0]" style="width: 25px; height: 17px" />
+                    <img :src="getStarIcon(1)" 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" />
+                    <img :src="getStarIcon(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" />
+                    <img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
                    口播讲解类 + 产品对比，CTR 2.1%、CVR 6.0%</span
                  >
                </a-space>
@ -79,19 +79,19 @@
              <a-space direction="vertical">
                <a-space class="placement-optimization-str">
                  <span>
-                    <img :src="topImages[0]" style="width: 25px; height: 17px" />
+                    <img :src="getStarIcon(1)" 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" />
+                    <img :src="getStarIcon(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" />
+                    <img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
                    下午茶时段（15:00–17:00），ROI 2.3</span
                  >
                </a-space>
@ -105,19 +105,19 @@
              <a-space direction="vertical">
                <a-space class="placement-optimization-str">
                  <span>
-                    <img :src="topImages[0]" style="width: 25px; height: 17px" />
+                    <img :src="getStarIcon(1)" 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" />
+                    <img :src="getStarIcon(2)" 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" />
+                    <img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
                    B站 - ROI 2.4，CVR 6.8%</span
                  >
                </a-space>
@ -142,19 +142,19 @@
            <a-space direction="vertical">
              <a-space class="placement-optimization-str">
                <span>
-                  <img :src="topImages[0]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
                  集中在 18–24 岁女性 + 精准兴趣标签（如“护肤”、“口红”）</span
                >
              </a-space>
              <a-space>
                <span>
-                  <img :src="topImages[1]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
                  24–30 岁男性 + 实用类内容受众（如“工具控”、“搞机党”）</span
                >
              </a-space>
              <a-space>
                <span>
-                  <img :src="topImages[2]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
                  泛娱乐向受众 + 较大地域分布（兴趣“短剧”、“直播带货”）</span
                >
              </a-space>
@ -169,19 +169,19 @@
            <a-space direction="vertical">
              <a-space class="placement-optimization-str">
                <span>
-                  <img :src="topImages[0]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
                  福利明确+钩子强的图文短视频，建议加限时优惠提示</span
                >
              </a-space>
              <a-space>
                <span>
-                  <img :src="topImages[1]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
                  场景代入型视频，突出客户痛点与产品关联</span
                >
              </a-space>
              <a-space>
                <span>
-                  <img :src="topImages[2]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
                  达人口播/测评，搭配标题党封面吸引点击</span
                >
              </a-space>
@ -197,19 +197,19 @@
            <a-space direction="vertical">
              <a-space class="placement-optimization-str">
                <span>
-                  <img :src="topImages[0]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
                  预算前置在 ROI 最佳时段和平台，优先抢头部流量</span
                >
              </a-space>
              <a-space>
                <span>
-                  <img :src="topImages[1]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
                  中等预算组合投放 + 高点击素材A/B测试</span
                >
              </a-space>
              <a-space>
                <span>
-                  <img :src="topImages[2]" style="width: 25px; height: 17px" />
+                  <img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
                  低预算长周期测试，重点看 CVR，优胜劣汰</span
                >
              </a-space>
@ -223,11 +223,10 @@

 <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];
+import { getStarIcon } from '../../constants';
 </script>

-<style scoped lang="less"></style>
+<style scoped lang="scss">
+@import './style.scss';
+</style>
--- a/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
@ -30,6 +30,7 @@

 <script setup lang="ts">
 import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
-import './style.scss';
 </script>
-<style scoped lang="less"></style>
+<style scoped lang="scss">
+@import './style.scss';
+</style>
--- a/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
@ -20,7 +20,7 @@
            </div>
          </a-col>
        </a-row>
-        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
+        <a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="12">
            <div class="overall-strategy">
              <span class="placement-optimization-title">预算分配</span>
@ -40,7 +40,7 @@
            </div>
          </a-col>
        </a-row>
-        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
+        <a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="12">
            <div class="overall-strategy">
              <span class="placement-optimization-title">人群包优化</span>
@ -67,7 +67,8 @@
 </template>

 <script setup lang="ts">
-import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 </script>

-<style scoped lang="less"></style>
+<style scoped lang="scss">
+@import './style.scss';
+</style>
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view class="table-data">
    <a-table
      class="account-table"
      :columns="columns"
@ -54,12 +54,10 @@

      <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>
@ -83,10 +81,6 @@
  </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(''),
@ -177,41 +171,20 @@ const listResult = reactive({
  ],
  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);
+<style lang="scss" scoped>
+.table-data {
+  //账户列表-分页
+  .account-page {
+    padding: 10px 24px 20px 24px;
+    background-color: #fff;
+    float: right;
  }

-  &.arco-input-wrapper {
-    height: 35px;
+  :deep(.custom-statistic .arco-statistic-value) {
+    font-size: 14px !important;
+    line-height: 1 !important;
  }
 }
-
-//账户列表-分页
-.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>
--- a/src/views/property-marketing/put-account/investment-guidelines/constants.ts
+++ b/src/views/property-marketing/put-account/investment-guidelines/constants.ts
@ -0,0 +1,21 @@
+import top1 from '@/assets/img/captcha/top1.svg';
+import top2 from '@/assets/img/captcha/top2.svg';
+import top3 from '@/assets/img/captcha/top3.svg';
+
+/**
+ * 根据评分获取对应的星星图标路径
+ * @param score 评分，范围 1 ~ 3
+ * @returns 对应的 SVG 图标路径
+ */
+export function getStarIcon(score: number): string {
+  switch (score) {
+    case 1:
+      return top1;
+    case 2:
+      return top2;
+    case 3:
+      return top3;
+    default:
+      return top1; // 默认返回最高分图标
+  }
+}
--- a/src/views/property-marketing/put-account/investment-guidelines/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/index.vue
@ -1,5 +1,5 @@
 <template>
-  <view class="placement-guide-style">
+  <view>
    <div class="part-div">
      <div>
        <a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="placement_guide">
@ -12,9 +12,9 @@
      <!--表单组件搜索-->
      <listSearchForm></listSearchForm>
      <!--      投放指南-->
-      <PlacementGuideList v-if="tabData == 'placement_guide'"></PlacementGuideList>
+      <PlacementGuideList v-if="tabData === 'placement_guide'"></PlacementGuideList>
      <!--      历史指南列表-->
-      <GuideListHistory v-if="tabData == 'guide_history'"></GuideListHistory>
+      <GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
    </div>

    <!--    本月摘要-->
@ -44,10 +44,6 @@

 <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';
@ -64,8 +60,8 @@ const listQuery = reactive({
  name: ref(''),
  page_size: ref('10'),
 });
-
-const topImages = [top1, top2, top3];
 </script>

-<style lang="less" scoped></style>
+<style lang="scss">
+@import './style.scss';
+</style>
--- a/src/views/property-marketing/put-account/investment-guidelines/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/style.scss
@ -9,6 +9,12 @@
  justify-content: flex-start;
  display: inline-flex;
  margin: 10px;
+  :deep(.arco-tabs) {
+    .arco-tabs-tab {
+      height: 56px;
+      padding: 0 8px;
+    }
+  }
 }

 .part-div-header {
@ -27,7 +33,8 @@
  font-weight: 400;
  line-height: 30px;
  word-wrap: break-word;
-
+  height: 56px;
+  padding: 0 8px;
 }

 //每块div 标题
@ -100,7 +107,7 @@

 //投放建议-总体策略
 .overall-strategy {
-  width: 100%;
+  width: 98%;
  padding: 20px 10px 20px 16px;
  background: var(--BG-100, #F7F8FA);
  overflow: hidden;
@ -110,7 +117,7 @@
  align-items: flex-start;
  gap: 12px;
  display: inline-flex;
-  margin: 10px 24px 15px 20px;
+  margin: 20px;

 }

@ -146,3 +153,11 @@
  line-height: 22px;
  word-wrap: break-word
 }
+
+
+:deep(.arco-tabs) {
+  .arco-tabs-tab {
+    height: 56px;
+    padding: 0 8px;
+  }
+}