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

- 重新设计了业务分析报告和竞品分析报告的页面布局
- 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式
- 更新了图表组件，支持更多图表类型
- 调整了路由模块中的报表名称

src/router/routes/modules/propertyMarketing.ts

@@ -151,7 +151,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'businessAnalysisReport',
         name: 'IntelligentSolutionBusinessAnalysisReport',
         meta: {
-          locale: '业务分析报告',
+          locale: '业务洞察报告',
           requiresAuth: true,
           roles: ['*'],
         },
@@ -161,7 +161,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'competitiveProductAnalysisReport',
         name: 'IntelligentSolutionCompetitiveProductAnalysisReport',
         meta: {
-          locale: '竟品分析报告',
+          locale: '竟品对比报告',
           requiresAuth: true,
           roles: ['*'],
         },

src/views/property-marketing/brands/brand-materials/index.vue

@@ -3,18 +3,14 @@
     <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 class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
-          <a-button style="float: right; width: 100px; height: 35px" type="primary" @click="handleAdd"
-            >+ 添加品牌
-          </a-button>
-        </div>
       </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">
+            <a-input v-model="listQuery.name" placeholder="请搜索..." size="medium" allow-clear>
               <template #prefix>
                 <icon-search />
               </template>
@@ -28,7 +24,7 @@
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button type="outline" size="medium" class="reset-btn" @click="handleSearch">
+            <a-button type="outline" size="medium" class="reset-btn" @click="handleReset">
               <template #icon>
                 <icon-refresh />
               </template>
@@ -83,7 +79,7 @@
         @cancel="handleModalCancel"
       >
         <template #title>
-          <span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '新增品牌' }}</span>
+          <span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
         </template>
         <a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
           <a-form-item field="name" label="品牌名称">
@@ -117,8 +113,6 @@
 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/brands/brand-materials/style.scss';
 
 import {
   addMaterials,
@@ -128,7 +122,6 @@ import {
   updateMaterials,
 } from '@/api/all/enterpriseKnowledge';
 import ImageUpload from '@/components/upload/ImageUpload.vue';
-import { valid } from 'mockjs';
 
 const searchName = ref('');
 const current = ref(1);
@@ -145,7 +138,6 @@ const listQuery = reactive({
 });
 
 const modalVisible = ref(false);
-const modalTitle = ref('编辑品牌');
 const formRef = ref();
 const formRule = {
   name: [{ required: true, message: '请输入品牌名称', trigger: ['blur', 'change'] }],
@@ -181,8 +173,8 @@ const deleteBrand = (id) => {
 };
 
 function handleReset() {
-  searchName.value = '';
+  listQuery.name = '';
-  current.value = 1;
+  listQuery.page = 1;
 }
 
 function handleAdd() {
@@ -211,7 +203,6 @@ function handleModalOk() {
           });
         } else {
           addMaterials(form).then((response) => {
-            console.log(response, 'response');
             Message.success('新增成功');
             handleSearch();
           });
@@ -233,3 +224,7 @@ function handleEdit(id) {
   });
 }
 </script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/property-marketing/brands/brand-materials/style.scss

@@ -1,3 +1,5 @@
+@import "@/views/property-marketing/component.scss";
+
 .view-body {
   //每块div布局
   .part-div {
@@ -58,9 +60,16 @@
 
   //添加按钮
   .add-btn {
-    font-size: 16px;
+    font-size: 15px;
     padding: 0 24px;
     border-radius: 4px;
+    float: right;
+    width: 110px;
+    height: 35px;
+    position: absolute;
+    line-height: 110px;
+    right: 35px;
+    margin-top: 10px
   }
 
   //分页
@@ -192,23 +201,6 @@
   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;

src/views/property-marketing/component.scss

@@ -1,5 +1,6 @@
 .arco-input-wrapper,
 .arco-select-view-single,
+.arco-textarea-wrapper,
 .arco-select-view-multiple {
   border-radius: 4px;
   border-color: #d7d7d9;

src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue

@@ -2,19 +2,17 @@
   <view>
     <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
       <a-space align="end">
-        <span class="part-div-header-title">业务分析报告 </span>
+        <span class="part-div-header-title">业务洞察报告 </span>
-      </a-space>
-      <a-space wrap :size="30">
-
       </a-space>
       <a-space align="center" class="search-form-div" size="medium">
-        <a-form-item field="name" class="search-form" label="服务/产品">
+        <a-form-item field="name" class="" label="服务/产品">
-          <a-input
+          <a-input v-model="listQuery.name" placeholder="请搜索...">
-            v-model="listQuery.name"
+            <template #prefix>
-            placeholder="请搜索..."
+              <icon-search />
-          />
+            </template>
+          </a-input>
         </a-form-item>
-        <a-form-item field="name" label="生成日期">
+        <a-form-item field="name" label="时间筛选">
           <a-range-picker
             showTime
             :time-picker-props="{
@@ -49,7 +47,14 @@
         :pagination="false"
       >
       </a-table>
-      <a-pagination style="float: right" :total="50" :size="size" show-total show-jumper show-page-size />
+      <a-pagination
+        style="float: right"
+        :total="listResult.total"
+        :size="listQuery.size"
+        show-total
+        show-jumper
+        show-page-size
+      />
     </a-space>
   </view>
 </template>
@@ -57,6 +62,7 @@
 <script setup lang="ts">
 const listQuery = reactive({
   name: '',
+  size: 0,
 });
 
 const listResult = reactive({
@@ -67,14 +73,14 @@ const listResult = reactive({
 const columns = [
   {
     title: '服务/产品',
-    dataIndex: 'rank',
+    dataIndex: 'service_name',
     slotName: 'rank',
     width: 60,
     minWidth: 60,
   },
   {
     title: '生成日期',
-    dataIndex: 'name',
+    dataIndex: 'create_time',
     width: 120,
     minWidth: 120,
     sortable: {
@@ -86,17 +92,17 @@ const columns = [
     width: 180,
     minWidth: 180,
     title: '目标客群',
-    dataIndex: 'hot',
+    dataIndex: 'customer',
     slotName: 'hot',
   },
   {
     title: '价格区间',
-    dataIndex: 'name',
+    dataIndex: 'price',
     width: 120,
     minWidth: 120,
   },
   {
-    titleSlotName: 'volume_rateTitle',
+    titleSlotName: 'lasterUpdateTime',
     title: '最后更新日期',
     dataIndex: 'volumeRate',
     width: 180,
@@ -104,11 +110,11 @@ const columns = [
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },
-    slotName: 'volumeRate',
+    slotName: 'lasterUpdateTime',
   },
   {
     title: '操作人',
-    dataIndex: 'name',
+    dataIndex: 'operator',
     width: 120,
     minWidth: 120,
   },
@@ -132,6 +138,23 @@ const columns = [
   margin-top: 10px;
 }
 
-.search-form {
+:deep(.arco-picker),
+:deep(.arco-input-wrapper) {
+  border-radius: 4px;
+  border-color: #d7d7d9;
+  background-color: #fff;
+  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);
+  }
+}
+
+.reset-btn {
+  min-width: 72px;
+  color: black;
 }
 </style>

src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue

@@ -2,13 +2,17 @@
   <view>
     <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
       <a-space align="end">
-        <span>业务分析报告 </span>
+        <span class="part-div-header-title">竞品对比报告 </span>
       </a-space>
-      <a-space align="center" size="medium">
+      <a-space align="center" class="search-form-div" size="medium">
-        <a-form-item field="name" label="服务/产品">
+        <a-form-item field="name" class="" label="服务/产品">
-          <a-input v-model="listQuery.name" placeholder="请搜索" />
+          <a-input v-model="listQuery.name" placeholder="请搜索...">
+            <template #prefix>
+              <icon-search />
+            </template>
+          </a-input>
         </a-form-item>
-        <a-form-item field="name" label="生成日期">
+        <a-form-item field="name" label="时间筛选">
           <a-range-picker
             showTime
             :time-picker-props="{
@@ -17,7 +21,7 @@
             style="width: 380px"
           />
         </a-form-item>
-        <a-form-item field="name" >
+        <a-form-item field="name">
           <a-space>
             <a-button type="outline" class="search-btn" @click="handleSearch">
               <template #icon>
@@ -33,7 +37,6 @@
             </a-button>
           </a-space>
         </a-form-item>
-
       </a-space>
       <a-table
         :columns="columns"
@@ -44,8 +47,14 @@
         :pagination="false"
       >
       </a-table>
-      <a-pagination style="float: right" :total="50" :size="size" show-total show-jumper show-page-size />
+      <a-pagination
-
+        style="float: right"
+        :total="listResult.total"
+        :size="listQuery.size"
+        show-total
+        show-jumper
+        show-page-size
+      />
     </a-space>
   </view>
 </template>
@@ -53,6 +62,7 @@
 <script setup lang="ts">
 const listQuery = reactive({
   name: '',
+  size: 0,
 });
 
 const listResult = reactive({
@@ -63,36 +73,28 @@ const listResult = reactive({
 const columns = [
   {
     title: '服务/产品',
-    dataIndex: 'rank',
+    dataIndex: 'service_name',
     slotName: 'rank',
     width: 60,
     minWidth: 60,
   },
   {
     title: '生成日期',
-    dataIndex: 'name',
+    dataIndex: 'create_time',
     width: 120,
     minWidth: 120,
-    sortable: {
+
-      sortDirections: ['ascend', 'descend'],
-    },
   },
   {
     titleSlotName: 'hotTitle',
     width: 180,
     minWidth: 180,
-    title: '目标客群',
+    title: '竞争对手',
-    dataIndex: 'hot',
+    dataIndex: 'customer',
     slotName: 'hot',
   },
   {
-    title: '价格区间',
+    titleSlotName: 'lasterUpdateTime',
-    dataIndex: 'name',
-    width: 120,
-    minWidth: 120,
-  },
-  {
-    titleSlotName: 'volume_rateTitle',
     title: '最后更新日期',
     dataIndex: 'volumeRate',
     width: 180,
@@ -100,15 +102,57 @@ const columns = [
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },
-    slotName: 'volumeRate',
+    slotName: 'lasterUpdateTime',
   },
   {
     title: '操作人',
-    dataIndex: 'name',
+    dataIndex: 'operator',
+    width: 120,
+    minWidth: 120,
+  },
+  {
+    title: '操作',
+    dataIndex: 'handle',
     width: 120,
     minWidth: 120,
   },
 ];
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.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;
+}
+
+.search-form-div {
+  margin-top: 10px;
+}
+
+:deep(.arco-picker),
+:deep(.arco-input-wrapper) {
+  border-radius: 4px;
+  border-color: #d7d7d9;
+  background-color: #fff;
+  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);
+  }
+}
+
+.reset-btn {
+  min-width: 72px;
+  color: black;
+}
+</style>

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', () => {
+onMounted(() => {
-    myChart.resize();
+  initChart();
-  });
 });
 </script>
 

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;
+  }
 }
+

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-space size="large">
-          <a-col :span="5">
+          <a-space>
-            <a-space>
+            <span>账户名称</span>
-              <span>项目名称</span>
+            <a-select multiple placeholder="全部">
-              <a-select :style="{ width: '320px' }" placeholder="全部">
+              <a-option>Beijing</a-option>
-                <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
-                <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
-                <a-option>Guangzhou</a-option>
+            </a-select>
-              </a-select>
+          </a-space>
-            </a-space>
+          <a-space>
-          </a-col>
+            <span>平台</span>
-          <a-col :span="5">
+            <a-select placeholder="全部">
-            <a-space>
+              <a-option>Beijing</a-option>
-              <span>平台</span>
+              <a-option>Shanghai</a-option>
-              <a-select :style="{ width: '320px' }" placeholder="全部">
+              <a-option>Guangzhou</a-option>
-                <a-option>Beijing</a-option>
+            </a-select>
-                <a-option>Shanghai</a-option>
+          </a-space>
-                <a-option>Guangzhou</a-option>
+          <a-space>
-              </a-select>
+            <span>运营人员</span>
-            </a-space>
+            <a-select placeholder="全部">
-          </a-col>
+              <a-option>Beijing</a-option>
-          <a-col :span="5">
+              <a-option>Shanghai</a-option>
-            <a-space>
+              <a-option>Guangzhou</a-option>
-              <span>运营人员</span>
+            </a-select>
-              <a-select :style="{ width: '320px' }" placeholder="全部">
+          </a-space>
-                <a-option>Beijing</a-option>
+        </a-space>
-                <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-space size="large">
-          <a-col :span="6">
+          <a-space>
-            <a-space>
+            <span>时间筛选</span>
-              <span>时间筛选</span>
+            <a-range-picker
-              <a-range-picker
+              showTime
-                showTime
+              :time-picker-props="{
-                :time-picker-props="{
+                defaultValue: ['00:00:00', '00:00:00'],
-                  defaultValue: ['00:00:00', '00:00:00'],
+              }"
-                }"
+              @change="onChange"
-                @change="onChange"
+              @select="onSelect"
-                @select="onSelect"
+            />
-                style="width: 380px"
+          </a-space>
-              />
+          <a-space>
-            </a-space>
+            <a-button type="outline" class="search-btn" @click="handleSearch">
-          </a-col>
+              <template #icon>
-          <a-col :span="5">
+                <icon-search />
-            <a-space>
+              </template>
-              <a-button type="outline" class="search-btn" @click="handleSearch">
+              <template #default>搜索</template>
-                <template #icon>
+            </a-button>
-                  <icon-search />
+            <a-button type="outline" class="reset-btn" @click="handleSearch">
-                </template>
+              <template #icon>
-                <template #default>搜索</template>
+                <icon-refresh />
-              </a-button>
+              </template>
-              <a-button type="outline" class="reset-btn" @click="handleSearch">
+              <template #default>重置</template>
-                <template #icon>
+            </a-button>
-                  <icon-refresh />
+          </a-space>
-                </template>
+        </a-space>
-                <template #default>重置</template>
-              </a-button>
-            </a-space>
-          </a-col>
-        </a-row>
       </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">

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 {
+  :deep(.arco-tabs) {
-  align-self: stretch;
+    .arco-tabs-tab {
-  height: 64px;
+      height: 56px;
-  padding: 10px 24px 10px 24px;
+      padding: 0 8px;
-  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);
   }
 }
 
+
 .search-btn {
   // 搜索
   color: var(--Brand-6, #6d4cfe);
@@ -63,6 +46,6 @@
 }
 
 .search-form {
-  margin: 20px;
+  margin: 5px 10px 24px 24px;
 
 }

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>
+      <div style="margin-right: 24px">
-        <a-row class="grid-demo" :gutter="24">
+        <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>

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>

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>

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">
+<style lang="scss" scoped>
-.arco-textarea-wrapper,
+.table-data {
-.arco-input-wrapper {
+  //账户列表-分页
-  border-radius: 4px;
+  .account-page {
-  border-color: #d7d7d9;
+    padding: 10px 24px 20px 24px;
-  background-color: #fff;
+    background-color: #fff;
-
+    float: right;
-  &: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 {
+  :deep(.custom-statistic .arco-statistic-value) {
-    height: 35px;
+    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>

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; // 默认返回最高分图标
+  }
+}

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>

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;
+  }
+}