feat: 新增账户仪表盘组件和优化投放指南操作功能

src/router/routes/modules/propertyMarketing.ts

@@ -12,7 +12,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     name: 'Repository',
     redirect: 'repository/brandMaterials',
     meta: {
-      locale: '企业知识库',
+      locale: '品牌资产管理',
       icon: IconBookmark,
       requiresAuth: true,
       roles: ['*'],
@@ -24,11 +24,11 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'brandMaterials',
         name: 'RepositoryBrandMaterials',
         meta: {
-          locale: '品牌物料',
+          locale: '品牌信息',
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/enterpriseKnowledge/brand-materials/index.vue'),
+        component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
       },
     ],
   },
@@ -56,7 +56,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         component: () => import('@/views/property-marketing/media-account/account-manage'),
       },
       {
-        path: 'accountDashboard',
+        path: 'account-dashboard',
         name: 'MediaAccountAccountDashboard',
         meta: {
           locale: '账号看板',
@@ -82,7 +82,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     name: 'PutAccount',
     redirect: 'put-account/accountManagement',
     meta: {
-      locale: '投放账户管理',
+      locale: '投放资源中心',
       icon: IconBookmark,
       requiresAuth: true,
       roles: ['*'],
@@ -111,14 +111,14 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         component: () => import('@/views/property-marketing/repository/test'),
       },
       {
-        path: 'accountDashboard',
+        path: 'account-dashboard',
         name: 'PutAccountAccountDashboard',
         meta: {
-          locale: '账号看板',
+          locale: '投放表现分析',
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/repository/test'),
+        component: () => import('@/views/property-marketing/put-account/account-dashboard'),
       },
       {
         path: 'investmentGuidelines',

src/views/components/enterpriseKnowledge/materials.vue

@@ -1,340 +0,0 @@
-<template>
-  <div class="materials-page">
-    <!-- 顶部标题和新增按钮 -->
-    <div class="header-row">
-      <h2 class="page-title">品牌物料</h2>
-      <a-button type="primary" @click="handleAdd" class="add-btn">+ 添加品牌</a-button>
-    </div>
-
-    <!-- 搜索栏 -->
-    <div class="search-row">
-      品牌名称
-      <a-input v-model="listQuery.name" placeholder="请搜索..." allow-clear class="search-input" />
-      <a-button type="outline" @click="handleSearch">
-        <template #icon>
-          <icon-search />
-        </template>
-        <template #default>搜索</template>
-      </a-button>
-      <a-button type="outline" @click="handleReset">
-        <template #icon>
-          <icon-refresh />
-        </template>
-        <template #default>重置</template>
-      </a-button>
-    </div>
-
-    <!-- 表格 -->
-
-    <a-table :data="listResult.list" :pagination="false">
-      <template #columns>
-        <a-table-column title="品牌名称" data-index="name" />
-        <a-table-column title="品牌logo" data-index="logo">
-          <template #cell="{ record }">
-            <img :src="record.logo" style="width: 50px; height: 50px" />
-          </template>
-        </a-table-column>
-        <a-table-column title="Slogan" data-index="slogan" />
-        <a-table-column title="操作" data-index="optional">
-          <template #cell="{ record }">
-            <a-popconfirm
-              content="确定删除吗?"
-              type="warning"
-              ok-text="确认删除"
-              cancel-text="取消"
-              @ok="deleteBrand(record.id)"
-            >
-              <icon-delete></icon-delete>
-            </a-popconfirm>
-            <a-button type="outline" @click="handleEdit(record.id)">编辑</a-button>
-          </template>
-        </a-table-column>
-      </template>
-    </a-table>
-
-    <!-- 分页 -->
-    <a-space direction="vertical" size="large">
-      <a-pagination :total="listResult.total" :size="listQuery.page_size" show-total show-jumper show-page-size />
-    </a-space>
-
-    <!-- 新增/编辑品牌弹窗 -->
-    <a-modal
-      v-model:visible="modalVisible"
-      :title="modalTitle"
-      :mask-closable="false"
-      :esc-to-close="false"
-      width="480px"
-      @cancel="handleModalCancel"
-    >
-      <a-form
-        :model="form"
-        :label-col-props="{ span: 5, offset: 0 }"
-        :wrapper-col-props="{ span: 19, offset: 0 }"
-        label-align="left"
-        :rules="formRule"
-        ref="formRef"
-        layout="left"
-      >
-        <a-form-item field="name" label="品牌名称">
-          <a-input v-model="form.name" placeholder="请输入品牌名称" />
-        </a-form-item>
-        <a-form-item field="logo" class="form-item-logo" label="标准版Logo">
-          <ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
-          <div class="form-tip">品牌常规展示标识，支持PNG、JPG格式</div>
-        </a-form-item>
-        <a-form-item field="otherLogos"  class="form-item-logo" label="其他Logo">
-          <ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
-        </a-form-item>
-        <a-form-item field="slogan" label="Slogan">
-          <a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
-        </a-form-item>
-      </a-form>
-      <template #footer>
-        <a-button @click="handleModalCancel">取消</a-button>
-        <a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
-      </template>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, reactive, onMounted } from 'vue';
-import { Message } from '@arco-design/web-vue';
-import { IconDelete } from '@arco-design/web-vue/es/icon';
-import {
-  addMaterials,
-  deleteMaterials,
-  getMaterialsList,
-  getMaterialsDetail,
-  updateMaterials,
-} from '@/api/all/enterpriseKnowledge';
-import ImageUpload from '@/components/upload/ImageUpload.vue';
-import { valid } from 'mockjs';
-
-const searchName = ref('');
-const current = ref(1);
-
-const listResult = reactive({
-  list: ref([]),
-  total: ref(0),
-});
-
-const listQuery = reactive({
-  page: ref(1),
-  name: ref(''),
-  page_size: ref('10'),
-});
-
-const modalVisible = ref(false);
-const modalTitle = ref('编辑品牌');
-const formRef = ref();
-//表单验证
-const formRule = {
-  name: [{ required: true, message: '请输入品牌名称', trigger: ['blur', 'change'] }],
-  logo: [{ required: true, message: '请上传品牌logo', trigger: ['blur', 'change'] }],
-};
-const form = reactive({
-  name: '',
-  logo: '',
-  id: 0,
-  other_logos: [], // [{ url: '' }]
-  slogan: '',
-});
-
-const btn_str = ref('确认添加');
-
-onMounted(() => {
-  handleSearch();
-});
-
-const handleSearch = () => {
-  getMaterialsList(listQuery).then((response) => {
-    listResult.list = response.data;
-    listResult.total = response.total;
-  });
-};
-
-const deleteBrand = (id) => {
-  console.log(id, 'id');
-  deleteMaterials(id).then(() => {
-    Message.success('删除成功');
-    handleSearch();
-  });
-};
-
-function handleReset() {
-  searchName.value = '';
-  current.value = 1;
-}
-
-function handleAdd() {
-  modalTitle.value = '添加品牌';
-  btn_str.value = '确认添加';
-  form.id = 0;
-  form.logo = '';
-  form.name = '';
-  form.slogan = '';
-  form.other_logos = [];
-  modalVisible.value = true;
-}
-
-function handleModalCancel() {
-  modalVisible.value = false;
-}
-
-function handleModalOk() {
-  formRef.value
-    .validate()
-    .then((valid) => {
-      if (!valid) {
-        if (form.id) {
-          updateMaterials(form.id, form).then(() => {
-            Message.success('修改成功');
-            handleSearch();
-          });
-        } else {
-          addMaterials(form).then(() => {
-            Message.success('新增成功');
-            handleSearch();
-          });
-        }
-        modalVisible.value = false;
-      }
-    })
-    .catch((error) => {
-      console.error('验证失败:', error);
-      Message.error('请检查表单填写是否正确');
-    });
-}
-
-function handleEdit(id) {
-  modalTitle.value = '编辑品牌';
-  formRef.value.resetFields();
-  modalVisible.value = true;
-  btn_str.value = '确认修改';
-  getMaterialsDetail(id).then((response) => {
-    Object.assign(form, response);
-  });
-}
-</script>
-
-<style scoped>
-.materials-page {
-  background: #fff;
-  border-radius: 8px;
-  padding: 32px 24px 24px 24px;
-  min-height: 600px;
-}
-
-.header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.page-title {
-  font-size: 20px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.add-btn {
-  font-size: 16px;
-  padding: 0 24px;
-}
-
-.search-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.search-input {
-  width: 240px;
-}
-
-.search-btn,
-.reset-btn {
-  min-width: 72px;
-}
-
-.brand-table {
-  margin-bottom: 16px;
-}
-
-.logo-cell {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 500;
-}
-
-.logo-emoji {
-  font-size: 20px;
-}
-
-.logo-text {
-  font-size: 16px;
-}
-
-.pagination-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-top: 8px;
-}
-
-.page-size-select {
-  width: 80px;
-}
-
-.upload-card {
-  width: 80px;
-  height: 80px;
-  border: 1px dashed #d9d9d9;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #999;
-  font-size: 24px;
-  background: #fafafa;
-  border-radius: 6px;
-}
-
-.upload-tip {
-  font-size: 12px;
-  color: #999;
-  margin-top: 4px;
-}
-
-.form-tip {
-  font-size: 12px;
-  color: #999;
-  margin-top: 4px;
-}
-
-.form-item-logo .logo-upload-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.logo-upload-card {
-  display: flex;
-  gap: 12px;
-}
-.form-tip {
-  color: #999;
-  font-size: 13px;
-  margin-left: 8px;
-  line-height: 1.5;
-}
-.a-form .a-form-item {
-  margin-bottom: 24px;
-}
-.a-modal .a-modal-footer {
-  justify-content: flex-end;
-}
-</style>

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

@@ -118,7 +118,7 @@ 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/enterpriseKnowledge/brand-materials/style.scss';
+import '@/views/property-marketing/brands/brand-materials/style.scss';
 
 import {
   addMaterials,

src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="chart-container">
+    <a-card :bordered="false" class="echart-item-card">
+      <template #title>
+        <span>{{ title.name }}</span>
+        <a-popover position="tl">
+          <icon-question-circle />
+          <template #content>
+            <p style="margin: 0">{{ title.popover }}</p>
+          </template>
+        </a-popover>
+      </template>
+      <div id="echarts-line" style="width: 100%; height: 450px"></div>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { Card } from '@arco-design/web-vue';
+import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+//子组件参数传递
+const props = defineProps({
+  title: {
+    type: Object,
+    default: {
+      name: '',
+      popover: '',
+    },
+  },
+  xAxisData: {
+    type: Array,
+    default: [],
+  },
+  seriesData: {
+    type: Array,
+    default: [],
+  },
+});
+const xAxisData = props.xAxisData;
+const seriesData = props.seriesData;
+onMounted(() => {
+  const myChart = echarts.init(document.getElementById('echarts-line'));
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      borderColor: '#ccc',
+      borderWidth: 1,
+      textStyle: { color: '#333' },
+      formatter: function (params) {
+        let date = params[0].axisValue;
+        let tooltipHtml = `<div style="font-weight:bold;">消耗量 ${date}</div>`;
+        params.forEach((item) => {
+          tooltipHtml += `
+                <div style="display:flex;align-items:center;">
+                  <span style="display:inline-block;width:10px;height:10px;border-radius:5px;margin-right:5px;background-color:${item.color}"></span>
+                  <span style="margin-right:10px;">${item.seriesName}</span>
+                  <span>${item.value}</span>
+                </div>
+              `;
+        });
+        return tooltipHtml;
+      },
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'horizontal',
+      top: 10, // 将图例位置调整到顶部
+      itemWidth: 10,
+      itemHeight: 10,
+      pageButtonItemGap: 5,
+      pageButtonStyle: { color: '#666' },
+      textStyle: { color: '#666' },
+      data: seriesData.map((item) => item.name),
+    },
+    grid: {
+      top: 80, // 调整图表内容位置，避免与图例重叠
+      left: 40,
+      right: 40,
+      bottom: 40,
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      axisLabel: { color: '#666' },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: { color: '#666' },
+      splitLine: { lineStyle: { type: 'dashed', color: '#eee' } },
+    },
+    series: seriesData,
+  };
+
+  myChart.setOption(option);
+
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss

@@ -0,0 +1,7 @@
+.echart-item-card {
+  width: 100%;
+  height: 50%;
+  margin:13px;
+  border-radius: 10px;
+
+}

src/views/property-marketing/put-account/account-dashboard/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <view>
+    <div class="part-div">
+      <div>
+        <a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
+          <a-tab-pane key="acctoun" title="账户"></a-tab-pane>
+          <a-tab-pane key="project">
+            <template #title>项目</template>
+          </a-tab-pane>
+        </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-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>
+    </div>
+
+    <div>
+      <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>
+<script setup lang="ts">
+import EchartsItem from './components/echarts-item/index.vue';
+
+const xhlEcharts = reactive({
+  xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
+  seriesData: [
+    {
+      name: '本地推-小庭院推广计划',
+      type: 'line',
+      data: [30000, 40000, 25000, 20000, 29019, 29019, 29019],
+      color: '#7b68ee',
+      emphasis: { focus: 'series' },
+    },
+    {
+      name: '全球旅行小助手推广',
+      type: 'line',
+      data: [25000, 27000, 23000, 20000, 29019, 29019, 29019],
+      color: '#32c5ff',
+      emphasis: { focus: 'series' },
+    },
+    {
+      name: '定向旅居推广顶级套餐',
+      type: 'line',
+      data: [10000, 5000, 12000, 15000, 29019, 29019, 29019],
+      color: '#feb62f',
+      emphasis: { focus: 'series' },
+    },
+    {
+      name: '城市探索者特惠活动',
+      type: 'line',
+      data: [15000, 18000, 12000, 16000, 20000, 22000, 24000],
+      color: '#ff7d00',
+      emphasis: { focus: 'series' },
+    },
+    {
+      name: '高端民宿精选推荐',
+      type: 'line',
+      data: [22000, 20000, 25000, 23000, 21000, 19000, 22000],
+      color: '#f5222d',
+      emphasis: { focus: 'series' },
+    },
+    {
+      name: '美食探店达人计划',
+      type: 'line',
+      data: [18000, 19000, 17000, 16000, 18000, 20000, 21000],
+      color: '#722ed1',
+      emphasis: { focus: 'series' },
+    },
+    {
+      name: '户外探险装备推荐',
+      type: 'line',
+      data: [12000, 14000, 13000, 15000, 17000, 16000, 18000],
+      color: '#13c2c2',
+      emphasis: { focus: 'series' },
+    },
+  ],
+});
+
+
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/property-marketing/put-account/account-dashboard/style.scss

@@ -0,0 +1,68 @@
+.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;
+}
+
+.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);
+  }
+}
+
+.search-btn {
+  // 搜索
+  color: var(--Brand-6, #6d4cfe);
+  font-size: 14px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  line-height: 22px;
+  height: 32px;
+  border-radius: 3px;
+  word-wrap: break-word;
+}
+
+.reset-btn {
+  // 重置
+  color: var(--Text-2, #3c4043);
+  font-size: 14px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  line-height: 22px;
+  height: 32px;
+  border-radius: 3px;
+  word-wrap: break-word;
+}
+
+.search-form {
+  margin: 20px;
+
+}

src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue

@@ -25,11 +25,11 @@
         </div>
       </div>
     </div>
-
   </view>
 </template>
 
 <script setup lang="ts">
 import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+import './style.scss';
 </script>
 <style scoped lang="less"></style>

src/views/property-marketing/put-account/investment-guidelines/components/month-data/style.scss

@@ -0,0 +1,46 @@
+//本月摘要数据-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;
+}
+
+//本月摘要-蓝色字体
+.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
+}

src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue

@@ -12,7 +12,7 @@
       </div>
 
       <div>
-        <a-row>
+        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
           <a-col :span="24">
             <div class="overall-strategy">
               <span class="placement-optimization-title">总体策略</span>
@@ -20,7 +20,7 @@
             </div>
           </a-col>
         </a-row>
-        <a-row class="grid-demo" :gutter="24">
+        <a-row class="grid-demo" :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="24">
+        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
           <a-col :span="12">
             <div class="overall-strategy">
               <span class="placement-optimization-title">人群包优化</span>

src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue

@@ -7,7 +7,25 @@
       :filter-icon-align-left="alignLeft"
       :pagination="false"
     >
-
+      <template #operation="{ record }">
+        <a-space size="medium">
+          <a-space>
+            <a-popconfirm
+              content="确定删除吗?"
+              type="warning"
+              ok-text="确认删除"
+              cancel-text="取消"
+              @ok="deleteBrand(record.id)"
+            >
+              <icon-delete></icon-delete>
+            </a-popconfirm>
+          </a-space>
+          <a-space>
+            <a-button type="outline" class="operation-btn">下载</a-button>
+            <a-button type="outline" class="operation-btn">详情</a-button>
+          </a-space>
+        </a-space>
+      </template>
     </a-table>
   </view>
 </template>
@@ -15,6 +33,7 @@
 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 { IconDelete } from '@arco-design/web-vue/es/icon';
 
 const listQuery = reactive({
   project_id: ref(''),
@@ -53,7 +72,7 @@ const columns = [
   },
   {
     title: '操作',
-    dataIndex: 'date',
+    dataIndex: 'operation',
     slotName: 'operation',
     width: 60,
     minWidth: 60,
@@ -114,4 +133,13 @@ const topImages = [top1, top2, top3];
   }
 }
 
+.operation-btn {
+  // 下载
+  color: var(--Brand-6, #6d4cfe);
+  font-size: 14px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  line-height: 22px;
+  word-wrap: break-word;
+}
 </style>

src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue

@@ -52,13 +52,13 @@
         </a-col>
         <a-col :span="8">
           <a-space>
-            <a-button type="outline" @click="handleSearch">
+            <a-button type="outline" class="search-btn" @click="handleSearch">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button type="outline" @click="handleSearch">
+            <a-button type="outline" class="reset-btn" @click="handleSearch">
               <template #icon>
                 <icon-refresh />
               </template>
@@ -95,4 +95,28 @@ const handleSearch = () => {
     box-shadow: 0 0 0 0 var(--color-primary-light-2);
   }
 }
+
+.search-btn {
+  // 搜索
+  color: var(--Brand-6, #6d4cfe);
+  font-size: 14px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  line-height: 22px;
+  height: 32px;
+  border-radius: 3px;
+  word-wrap: break-word;
+}
+
+.reset-btn {
+  // 重置
+  color: var(--Text-2, #3c4043);
+  font-size: 14px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  line-height: 22px;
+  height: 32px;
+  border-radius: 3px;
+  word-wrap: break-word;
+}
 </style>

src/views/property-marketing/put-account/investment-guidelines/style.scss

@@ -56,7 +56,6 @@
 }
 
 
-
 .month-data-body {
   width: 100%;
   padding-bottom: 20px;
@@ -98,58 +97,11 @@
   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 10px 20px 16px;
-  padding: 20px 24px 20px 16px;
   background: var(--BG-100, #F7F8FA);
   overflow: hidden;
   border-radius: 8px;
@@ -158,7 +110,7 @@
   align-items: flex-start;
   gap: 12px;
   display: inline-flex;
-  margin: 10px 0px 15px 20px;
+  margin: 10px 24px 15px 20px;
 
 }