From 645816c1f588822201788e9d433e90931e7177fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Fri, 27 Jun 2025 09:28:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E8=83=BD=E6=96=B9=E6=A1=88=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/guide/no_data.png              | Bin 0 -> 4205 bytes
 src/components/upload/ImageUpload.vue         | 168 +++++++++
 .../routes/modules/propertyMarketing.ts       |   2 +-
 .../enterpriseKnowledge/brandMaterials.less   | 182 ++++++++++
 .../enterpriseKnowledge/brandMaterials.vue    | 334 +++++++-----------
 .../put-account/investmentGuidelines.less     |  12 +
 .../put-account/investmentGuidelines.vue      | 239 ++++++++++++-
 7 files changed, 713 insertions(+), 224 deletions(-)
 create mode 100644 src/assets/img/guide/no_data.png
 create mode 100644 src/components/upload/ImageUpload.vue
 create mode 100644 src/views/property-marketing/enterpriseKnowledge/brandMaterials.less

diff --git a/src/assets/img/guide/no_data.png b/src/assets/img/guide/no_data.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d6f2a302917ce35216b4ca257c047c628918e62
GIT binary patch
literal 4205
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
Dy=Cqo

literal 0
HcmV?d00001

diff --git a/src/components/upload/ImageUpload.vue b/src/components/upload/ImageUpload.vue
new file mode 100644
index 0000000..450ac52
--- /dev/null
+++ b/src/components/upload/ImageUpload.vue
@@ -0,0 +1,168 @@
+<template>
+  <a-upload
+    :custom-request="customRequest"
+    list-type="picture-card"
+    action="/"
+    :limit="limit"
+    :fileList="fileList"
+    image-preview
+    @change="onChange"
+    @success="handleSuccess"
+    @error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { fetchImageUploadFile } from '@/api/all';
+import axios from 'axios';
+
+const fileList = ref([]);
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String],
+    default: '',
+  },
+  limit: {
+    type: Number,
+    default: 0, // 0 表示不限制
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const handleSuccess = (fileItem) => {
+  let response = fileItem.response;
+  response = JSON.parse(response);
+  if (response && response.data.file_url) {
+    if (props.limit === 1) {
+      emit('update:modelValue', response.data.file_url);
+    } else {
+      emit('update:modelValue', [...props.modelValue, response.data.file_url]);
+    }
+  }
+};
+
+watch(
+  () => props.modelValue,
+  async (value) => {
+    console.log(value, 'value');
+    if (value) {
+      fileList.value =
+        props.limit == 1
+          ? [
+              {
+                name: '',
+                url: props.modelValue as string,
+              },
+            ]
+          : (props.modelValue as string[]).map((item) => {
+              return {
+                name: '',
+                url: item,
+              };
+            });
+    } else {
+      fileList.value = [];
+    }
+  },
+  { once: true },
+);
+
+let previousFileListLength = 0;
+//删除图片
+const onChange = (fileList) => {
+  if (fileList.length < previousFileListLength) {
+    // 在这里执行你需要的操作
+    if (props.limit === 1) {
+      if (fileList.length === 0) {
+        emit('update:modelValue', '');
+      }
+    } else {
+      if (fileList.length === 0) {
+        emit('update:modelValue', []);
+      } else {
+        let image_data = fileList.map((item) => item.url);
+        emit('update:modelValue', image_data);
+      }
+    }
+  }
+
+  // 更新上一次的文件列表长度
+  previousFileListLength = fileList.length;
+};
+
+const beforeUpload = (file, files) => {
+  if (props.limit > 0 && files.length >= props.limit) {
+    Message.warning(`最多只能上传 ${props.limit} 张图片`);
+    return false; // 阻止上传
+  }
+  return true;
+};
+
+const handleError = (error) => {
+  Message.error('上传失败');
+  console.error(error);
+};
+
+const customRequest = (option) => {
+  const { onProgress, onError, onSuccess, fileItem, name } = option;
+  const xhr = new XMLHttpRequest();
+  if (xhr.upload) {
+    xhr.upload.onprogress = function (event) {
+      let percent;
+      if (event.total > 0) {
+        // 0 ~ 1
+        percent = event.loaded / event.total;
+      }
+      onProgress(percent, event);
+    };
+  }
+  xhr.onerror = function error(e) {
+    onError(e);
+  };
+  xhr.onload = function onload() {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return onError(xhr.responseText);
+    }
+    let response = JSON.parse(xhr.response);
+    if (response && response.data.upload_url) {
+      const blob = new Blob([fileItem.file], { type: fileItem.file.type });
+      axios
+        .put(response.data.upload_url, blob, {
+          headers: { 'Content-Type': fileItem.file.type },
+        })
+        .then(() => {
+          onSuccess(xhr.response);
+        })
+        .catch((error) => {
+          onError(error);
+        });
+    } else {
+      onError(xhr.response);
+    }
+  };
+
+  const formData = new FormData();
+  formData.append(name || 'file', fileItem.file);
+  xhr.open('get', '/api/v1/oss/image-pre-signed-url?suffix=png', true);
+  xhr.send(formData);
+  let extension = getFileExtension(fileItem.file.name);
+  return {
+    abort() {
+      xhr.abort();
+    },
+  };
+};
+
+function getFileExtension(filename: string): string {
+  const match = filename.match(/\.([^.]+)$/);
+  return match ? match[1].toLowerCase() : '';
+}
+</script>
+
+<style scoped>
+/* 添加一些样式 */
+</style>
diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts
index daaaa52..e1c14e6 100644
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@@ -128,7 +128,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/account-placement/placementGuide'),
+        component: () => import('@/views/property-marketing/put-account/investmentGuidelines'),
       },
     ],
   },
diff --git a/src/views/property-marketing/enterpriseKnowledge/brandMaterials.less b/src/views/property-marketing/enterpriseKnowledge/brandMaterials.less
new file mode 100644
index 0000000..23e6a7c
--- /dev/null
+++ b/src/views/property-marketing/enterpriseKnowledge/brandMaterials.less
@@ -0,0 +1,182 @@
+.placement-guide-style {
+  //每块div布局
+  .part-div {
+    width: 100%;
+    height: 100%;
+    background: var(--BG-white, white);
+    overflow: hidden;
+    border-radius: 8px;
+    outline: 1px var(--BG-300, #E6E6E8) solid;
+    outline-offset: -1px;
+    flex-direction: column;
+    justify-content: flex-start;
+    display: inline-flex;
+    margin: 10px;
+  }
+
+  //每块div 头部
+  .part-div-header {
+    align-self: stretch;
+    height: 64px;
+    padding: 10px 24px 10px 24px;
+    justify-content: flex-start;
+    align-items: center;
+    display: inline-flex
+  }
+
+  //每块div 标题
+  .part-div-header-title {
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    color: var(--Text-1, #211F24);
+    font-size: 18px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 26px;
+    word-wrap: break-word;
+  }
+
+  //无数据样式
+  .non-data {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 水平居中，如果需要的话 */
+    height: 50%; /* 示例：父容器高度为视口高度 */
+  }
+
+  .non-data-str {
+    // 暂无品牌
+    color: var(--Text-3, #737478);
+    font-size: 14px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 22px;
+    word-wrap: break-word;
+    margin: 20px 20px;
+  }
+
+  .add-btn {
+    font-size: 16px;
+    padding: 0 24px;
+    border-radius: 4px;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+}
diff --git a/src/views/property-marketing/enterpriseKnowledge/brandMaterials.vue b/src/views/property-marketing/enterpriseKnowledge/brandMaterials.vue
index 3479576..3beb3aa 100644
--- a/src/views/property-marketing/enterpriseKnowledge/brandMaterials.vue
+++ b/src/views/property-marketing/enterpriseKnowledge/brandMaterials.vue
@@ -1,106 +1,133 @@
 <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>
+  <view class="placement-guide-style">
+    <div class="part-div">
+      <div class="part-div-header">
+        <span class="part-div-header-title">品牌物料</span>
+      </div>
+      <a-space v-if="listResult.data.length === 0" direction="vertical" class="non-data">
+        <a-space>
+          <a-image :src="noDataImage" />
+        </a-space>
+        <a-space>
+          <span class="non-data-str">暂无品牌</span>
+        </a-space>
+        <a-space>
+          <a-button class="add-btn" @click="handleAdd" type="primary">
+            <template #icon>
+              <icon-plus />
+            </template>
+            去添加
+          </a-button>
+        </a-space>
+      </a-space>
 
-    <!-- 搜索栏 -->
-    <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-space v-else>
+        <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" />
+        <!-- 表格 -->
+
+        <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-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-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-space direction="vertical" size="large">
+          <a-pagination :total="listResult.total" :size="listQuery.page_size" show-total show-jumper show-page-size />
+        </a-space>
+      </a-space>
+      <!-- 新增/编辑品牌弹窗 -->
+      <a-modal
+        v-model:visible="modalVisible"
+        :mask-closable="false"
+        :esc-to-close="false"
+        width="480px"
+        @cancel="handleModalCancel"
       >
-        <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 #title>
+          <span title="测试">{{ form.id > 0 ? '编辑品牌' : '新增品牌' }}</span>
+        </template>
+        <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>
+  </view>
 </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 noDataImage from '@/assets/img/guide/no_data.png';
+import '@/views/property-marketing/enterpriseKnowledge/brandMaterials.less';
+
 import {
   addMaterials,
   deleteMaterials,
@@ -115,7 +142,7 @@ const searchName = ref('');
 const current = ref(1);
 
 const listResult = reactive({
-  list: ref([]),
+  data: ref([]),
   total: ref(0),
 });
 
@@ -148,7 +175,9 @@ onMounted(() => {
 
 const handleSearch = () => {
   getMaterialsList(listQuery).then((response) => {
-    listResult.list = response.data;
+    listResult.data = response.data.data;
+    console.log(response.data, 'response.data');
+    console.log(listResult.data, 'listResult.data');
     listResult.total = response.total;
   });
 };
@@ -216,124 +245,3 @@ function handleEdit(id) {
   });
 }
 </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>
diff --git a/src/views/property-marketing/put-account/investmentGuidelines.less b/src/views/property-marketing/put-account/investmentGuidelines.less
index bb64596..fd746cf 100644
--- a/src/views/property-marketing/put-account/investmentGuidelines.less
+++ b/src/views/property-marketing/put-account/investmentGuidelines.less
@@ -183,4 +183,16 @@
     word-wrap: break-word
   }
 
+  //表现分析标题
+  .player-title {
+    margin: 10px 0px 15px 20px;
+    // 表现分析
+    color: var(--Text-1, #211F24);
+    font-size: 16px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 22px;
+    word-wrap: break-word
+  }
+
 }
diff --git a/src/views/property-marketing/put-account/investmentGuidelines.vue b/src/views/property-marketing/put-account/investmentGuidelines.vue
index 73750e2..9e98c59 100644
--- a/src/views/property-marketing/put-account/investmentGuidelines.vue
+++ b/src/views/property-marketing/put-account/investmentGuidelines.vue
@@ -131,14 +131,16 @@
         </template>
       </a-table>
       <!-- 分页 -->
-      <a-pagination
-        class="account-page"
-        :total="listResult.total"
-        :size="listQuery.page_size"
-        show-total
-        show-jumper
-        show-page-size
-      />
+      <div>
+        <a-pagination
+          class="account-page"
+          :total="listResult.total"
+          :size="listQuery.page_size"
+          show-total
+          show-jumper
+          show-page-size
+        />
+      </div>
     </div>
     <div class="part-div">
       <div class="part-div-header">
@@ -146,8 +148,6 @@
         <a-popover position="tl">
           <icon-question-circle />
           <template #content>
-
-
             <p style="margin: 0">本月摘要。</p>
           </template>
         </a-popover>
@@ -231,6 +231,225 @@
         </a-row>
       </div>
     </div>
+
+    <div class="part-div">
+      <div class="part-div-header">
+        <span class="part-div-header-title">投放行动指南</span>
+        <a-popover position="tl">
+          <icon-question-circle />
+          <template #content>
+            <p style="margin: 0">投放建议优化。</p>
+          </template>
+        </a-popover>
+      </div>
+      <a-space>
+        <span class="player-title">表现分析</span>
+        <a-popover position="tl">
+          <icon-question-circle />
+          <template #content>
+            <p style="margin: 0">表现分析。</p>
+          </template>
+        </a-popover>
+      </a-space>
+      <div>
+        <a-row class="grid-demo" :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" />
+                    18-24岁女性，兴趣为“美妆/穿搭”，一线城市，抖音平台 ROI 3.2</span
+                  >
+                </a-space>
+                <a-space>
+                  <span>
+                    <img :src="topImages[1]" 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" />
+                    18-24岁男性，兴趣为“运动/健身”，三线城市，抖音 ROI 2.3</span
+                  >
+                </a-space>
+              </a-space>
+            </div>
+          </a-col>
+          <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" />
+                    图文风格 + 明确福利点，CTR 3.2%、CVR 8.5%</span
+                  >
+                </a-space>
+                <a-space>
+                  <span>
+                    <img :src="topImages[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" />
+                    口播讲解类 + 产品对比，CTR 2.1%、CVR 6.0%</span
+                  >
+                </a-space>
+              </a-space>
+            </div>
+          </a-col>
+        </a-row>
+        <a-row class="grid-demo" :gutter="24">
+          <a-col :span="12">
+            <div class="overall-strategy">
+              <span class="placement-optimization-title">投放时段</span>
+              <a-space direction="vertical">
+                <a-space class="placement-optimization-str">
+                  <span>
+                    <img :src="topImages[0]" 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" />
+                    中午时段（11:30–13:00），ROI 2.5</span
+                  >
+                </a-space>
+                <a-space>
+                  <span>
+                    <img :src="topImages[2]" style="width: 25px; height: 17px" />
+                    下午茶时段（15:00–17:00），ROI 2.3</span
+                  >
+                </a-space>
+              </a-space>
+            </div>
+          </a-col>
+
+          <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" />
+                    抖音 - ROI 3.2，CVR 8.5%</span
+                  >
+                </a-space>
+                <a-space>
+                  <span>
+                    <img :src="topImages[1]" 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" />
+                    B站 - ROI 2.4，CVR 6.8%</span
+                  >
+                </a-space>
+              </a-space>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+      <a-space>
+        <span class="player-title">新投放建议生成</span>
+        <a-popover position="tl">
+          <icon-question-circle />
+          <template #content>
+            <p style="margin: 0">新投放建议生成。</p>
+          </template>
+        </a-popover>
+      </a-space>
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="24">
+          <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" />
+                  集中在 18–24 岁女性 + 精准兴趣标签（如“护肤”、“口红”）</span
+                >
+              </a-space>
+              <a-space>
+                <span>
+                  <img :src="topImages[1]" style="width: 25px; height: 17px" />
+                  24–30 岁男性 + 实用类内容受众（如“工具控”、“搞机党”）</span
+                >
+              </a-space>
+              <a-space>
+                <span>
+                  <img :src="topImages[2]" style="width: 25px; height: 17px" />
+                  泛娱乐向受众 + 较大地域分布（兴趣“短剧”、“直播带货”）</span
+                >
+              </a-space>
+            </a-space>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="24">
+          <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" />
+                  福利明确+钩子强的图文短视频，建议加限时优惠提示</span
+                >
+              </a-space>
+              <a-space>
+                <span>
+                  <img :src="topImages[1]" style="width: 25px; height: 17px" />
+                  场景代入型视频，突出客户痛点与产品关联</span
+                >
+              </a-space>
+              <a-space>
+                <span>
+                  <img :src="topImages[2]" style="width: 25px; height: 17px" />
+                  达人口播/测评，搭配标题党封面吸引点击</span
+                >
+              </a-space>
+            </a-space>
+          </div>
+        </a-col>
+      </a-row>
+
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="24">
+          <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" />
+                  预算前置在 ROI 最佳时段和平台，优先抢头部流量</span
+                >
+              </a-space>
+              <a-space>
+                <span>
+                  <img :src="topImages[1]" style="width: 25px; height: 17px" />
+                  中等预算组合投放 + 高点击素材A/B测试</span
+                >
+              </a-space>
+              <a-space>
+                <span>
+                  <img :src="topImages[2]" style="width: 25px; height: 17px" />
+                  低预算长周期测试，重点看 CVR，优胜劣汰</span
+                >
+              </a-space>
+            </a-space>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
   </view>
 </template>