From d0d459e0e0ceea1e81597683df5b88372f767612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Tue, 1 Jul 2025 13:55:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor(brand-materials):=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=93=81=E7=89=8C=E7=89=A9=E6=96=99=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化页面布局和样式，使用 flex布局
- 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验
- 统一按钮和输入框样式，增强一致性
- 移除冗余代码，提高代码可读性
---
 .../brands/brand-materials/index.vue          |   2 +-
 .../businessAnalysisReport.vue                | 224 +++++++++++-------
 .../competitiveProductAnalysisReport.vue      | 222 ++++++++++-------
 .../components/echarts-item/index.vue         |   5 +-
 .../components/echarts-item/style.scss        |   3 +-
 .../put-account/account-dashboard/index.vue   | 139 +++++------
 .../put-account/account-dashboard/style.scss  | 160 ++++++++-----
 7 files changed, 436 insertions(+), 319 deletions(-)

diff --git a/src/views/property-marketing/brands/brand-materials/index.vue b/src/views/property-marketing/brands/brand-materials/index.vue
index ae9efbb..bd9117f 100644
--- a/src/views/property-marketing/brands/brand-materials/index.vue
+++ b/src/views/property-marketing/brands/brand-materials/index.vue
@@ -144,7 +144,7 @@ const tableData = ref([]);
 const pageInfo = reactive({
   page: 1,
   pageSize: 20,
-  total: 100,
+  total: 0,
 });
 
 const query = reactive({
diff --git a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
index 5b4101c..7e9cdf7 100644
--- a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
@@ -1,75 +1,88 @@
 <template>
-  <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>
-      </a-space>
-      <a-space align="center" class="search-form-div" size="medium">
-        <a-form-item field="name" class="search-form" label="服务/产品">
-          <a-input v-model="listQuery.name" placeholder="请搜索...">
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
-        </a-form-item>
-        <a-form-item field="name" label="时间筛选">
-          <a-range-picker
-            showTime
-            :time-picker-props="{
-              defaultValue: ['00:00:00', '00:00:00'],
-            }"
-            style="width: 380px"
-          />
-        </a-form-item>
-        <a-form-item field="name">
-          <a-space>
-            <a-button type="outline" class="search-btn" @click="handleSearch">
+  <div class="business-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
+        <p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
+      </div>
+
+      <div class="container px-24px pt-12px pb-24px">
+        <div class="filter-row flex mb-20px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">服务/产品</span>
+            <a-space size="medium">
+              <a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
+                <template #prefix>
+                  <icon-search />
+                </template>
+              </a-input>
+            </a-space>
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">时间筛选</span>
+            <a-space class="w-240px">
+              <a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
+            </a-space>
+          </div>
+
+          <div class="filter-row flex">
+            <a-button class="w-84px search-btn mr-12px" size="medium">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button type="outline" class="reset-btn" @click="handleSearch">
+            <a-button class="w-84px reset-btn" size="medium">
               <template #icon>
                 <icon-refresh />
               </template>
               <template #default>重置</template>
             </a-button>
-          </a-space>
-        </a-form-item>
-      </a-space>
-      <a-table
-        :columns="columns"
-        :data="listResult.data"
-        :filter-icon-align-left="alignLeft"
-        @change="handleChange"
-        :scroll="true"
-        :pagination="false"
-      >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
+    >
+      <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
       </a-table>
-      <a-pagination
-        style="float: right"
-        :total="listResult.total"
-        :size="listQuery.size"
-        show-total
-        show-jumper
-        show-page-size
-      />
-    </a-space>
-  </view>
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-const listQuery = reactive({
-  name: '',
-  size: 0,
+import { reactive, ref } from 'vue';
+
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+const query = reactive({
+  name: ref(''),
 });
 
 const listResult = reactive({
   data: [],
   total: 0,
 });
-
+const onPageSizeChange = () => {};
+const tableData = ref([]);
+const handleChange = () => {};
+const onPageChange = () => {};
 const columns = [
   {
     title: '服务/产品',
@@ -83,9 +96,6 @@ const columns = [
     dataIndex: 'create_time',
     width: 120,
     minWidth: 120,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
   },
   {
     titleSlotName: 'hotTitle',
@@ -107,9 +117,6 @@ const columns = [
     dataIndex: 'volumeRate',
     width: 180,
     minWidth: 180,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
     slotName: 'lasterUpdateTime',
   },
   {
@@ -118,43 +125,88 @@ const columns = [
     width: 120,
     minWidth: 120,
   },
+  {
+    title: '操作',
+    dataIndex: 'operator',
+    width: 120,
+    minWidth: 120,
+  },
 ];
 </script>
 
-<style scoped lang="less">
-.part-div-header-title {
-  justify-content: center;
+<style scoped lang="scss">
+.business-wrap {
+  height: 100%;
   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(.search-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
 
-:deep(.arco-picker),
-:deep(.arco-input-wrapper) {
-  border-radius: 4px;
-  border-color: #d7d7d9;
-  background-color: #fff;
-  height: 32px;
+  :deep(.edit-btn) {
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
 
-  &:focus-within,
-  &.arco-input-focus {
-    background-color: var(--color-bg-2);
-    border-color: rgb(var(--primary-6));
-    box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-textarea-wrapper),
+  :deep(.arco-picker),
+  :deep(.arco-select-view-multiple) {
+    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);
+    }
+  }
+
+  .table-wrap {
+    width: 100%;
+
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    margin-top: 20px;
+  }
+
+  .container {
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+
+        .label {
+          margin-right: 8px;
+          color: #211f24;
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+      }
+    }
   }
 }
-
-.reset-btn {
-  min-width: 72px;
-  color: black;
-}
 </style>
diff --git a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
index 6ddf2b9..84787ca 100644
--- a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
@@ -1,74 +1,84 @@
 <template>
-  <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>
-      </a-space>
-      <a-space align="center" class="search-form-div" size="medium">
-        <a-form-item field="name" class="" label="服务/产品">
-          <a-input v-model="listQuery.name" placeholder="请搜索...">
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
-        </a-form-item>
-        <a-form-item field="name" label="时间筛选">
-          <a-range-picker
-            showTime
-            :time-picker-props="{
-              defaultValue: ['00:00:00', '00:00:00'],
-            }"
-            style="width: 380px"
-          />
-        </a-form-item>
-        <a-form-item field="name">
-          <a-space>
-            <a-button type="outline" class="search-btn" @click="handleSearch">
+  <div class="competitive-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
+        <p class="text-18px font-400 lh-26px color-#211F24 title">竞品对比报告</p>
+      </div>
+
+      <div class="container px-24px pt-12px pb-24px">
+        <div class="filter-row flex mb-20px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">服务/产品</span>
+            <a-space size="medium">
+              <a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
+                <template #prefix>
+                  <icon-search />
+                </template>
+              </a-input>
+            </a-space>
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">时间筛选</span>
+            <a-space class="w-240px">
+              <a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
+            </a-space>
+          </div>
+
+          <div class="filter-row flex">
+            <a-button class="w-84px search-btn mr-12px" size="medium">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button type="outline" class="reset-btn" @click="handleSearch">
+            <a-button class="w-84px reset-btn" size="medium">
               <template #icon>
                 <icon-refresh />
               </template>
               <template #default>重置</template>
             </a-button>
-          </a-space>
-        </a-form-item>
-      </a-space>
-      <a-table
-        :columns="columns"
-        :data="listResult.data"
-        :filter-icon-align-left="alignLeft"
-        @change="handleChange"
-        :scroll="true"
-        :pagination="false"
-      >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
+    >
+      <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
       </a-table>
-      <a-pagination
-        style="float: right"
-        :total="listResult.total"
-        :size="listQuery.size"
-        show-total
-        show-jumper
-        show-page-size
-      />
-    </a-space>
-  </view>
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-const listQuery = reactive({
-  name: '',
-  size: 0,
-});
+import { reactive, ref } from 'vue';
 
-const listResult = reactive({
-  data: [],
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
   total: 0,
 });
+const query = reactive({
+  name: ref(''),
+});
+
+const handleChange = () => {};
+const onPageChange = () => {};
+const onPageSizeChange = () => {};
+const tableData = ref([]);
 
 const columns = [
   {
@@ -83,25 +93,22 @@ const columns = [
     dataIndex: 'create_time',
     width: 120,
     minWidth: 120,
-
   },
   {
-    titleSlotName: 'hotTitle',
+    titleSlotName: 'customer',
     width: 180,
     minWidth: 180,
     title: '竞争对手',
     dataIndex: 'customer',
     slotName: 'hot',
   },
+
   {
     titleSlotName: 'lasterUpdateTime',
     title: '最后更新日期',
     dataIndex: 'volumeRate',
     width: 180,
     minWidth: 180,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
     slotName: 'lasterUpdateTime',
   },
   {
@@ -112,47 +119,86 @@ const columns = [
   },
   {
     title: '操作',
-    dataIndex: 'handle',
+    dataIndex: 'operator',
     width: 120,
     minWidth: 120,
   },
 ];
 </script>
 
-<style scoped lang="less">
-.part-div-header-title {
-  justify-content: center;
+<style scoped lang="scss">
+.competitive-wrap {
+  height: 100%;
   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(.search-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
 
-:deep(.arco-picker),
-:deep(.arco-input-wrapper) {
-  border-radius: 4px;
-  border-color: #d7d7d9;
-  background-color: #fff;
-  height: 32px;
+  :deep(.edit-btn) {
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
 
-  &:focus-within,
-  &.arco-input-focus {
-    background-color: var(--color-bg-2);
-    border-color: rgb(var(--primary-6));
-    box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-textarea-wrapper),
+  :deep(.arco-picker),
+  :deep(.arco-select-view-multiple) {
+    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);
+    }
+  }
+
+  .table-wrap {
+    width: 100%;
+
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    margin-top: 20px;
+  }
+
+  .container {
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+
+        .label {
+          margin-right: 8px;
+          color: #211f24;
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+      }
+    }
   }
 }
-
-.reset-btn {
-  min-width: 72px;
-  color: black;
-}
 </style>
diff --git a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
index 5e609a3..9404752 100644
--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="chart-container">
+  <div >
     <a-card :bordered="false" class="echart-item-card">
       <template #title>
-        <span class="a-card-title" >{{ title.name }}</span>
+        <span class="a-card-title">{{ title.name }}</span>
         <a-popover position="tl">
           <icon-question-circle />
           <template #content>
@@ -18,7 +18,6 @@
 <script setup lang="ts">
 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({
diff --git a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
index 13e2de6..39329b5 100644
--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
@@ -1,8 +1,9 @@
 .echart-item-card {
   width: 100%;
   height: 50%;
-  margin: 13px;
+
   border-radius: 10px;
+  margin-bottom: 24px;
 
   :deep(.arco-card-header) {
     border-bottom: none !important;
diff --git a/src/views/property-marketing/put-account/account-dashboard/index.vue b/src/views/property-marketing/put-account/account-dashboard/index.vue
index 887a472..d5cc31e 100644
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@@ -1,84 +1,63 @@
 <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 class="account-dashboard-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
+      <a-tabs>
+        <a-tab-pane :key="1" title="账户"></a-tab-pane>
+        <a-tab-pane :key="2" title="项目"></a-tab-pane>
+      </a-tabs>
+
+      <div class="container px-24px">
+        <div class="filter-row flex mb-20px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">账号名称</span>
+            <a-select multiple placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </div>
+
+          <div class="filter-row-item flex items-center">
+            <span class="label">平台</span>
+            <a-select placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </div>
+
+          <div class="filter-row-item flex items-center">
+            <span class="label">运营人员</span>
+            <a-select placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </div>
+        </div>
+        <div class="filter-row flex">
+          <div class="filter-row-item flex items-center">
+            <span class="label">时间筛选</span>
+            <a-space class="w-240px">
+              <a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
+            </a-space>
+          </div>
+          <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+            <template #icon>
+              <icon-search />
+            </template>
+            <template #default>搜索</template>
+          </a-button>
+          <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+            <template #icon>
+              <icon-refresh />
+            </template>
+            <template #default>重置</template>
+          </a-button>
+        </div>
       </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>
+    <div class="table-wrap rounded-8px py-5px flex-1 flex flex-col">
       <a-row class="grid-demo" :gutter="24">
         <a-col :span="12">
           <EchartsItem
@@ -179,10 +158,10 @@
         </a-col>
       </a-row>
     </div>
-  </view>
+  </div>
 </template>
 <script setup lang="ts">
-import EchartsItem from './components/echarts-item/index.vue';
+import EchartsItem from './components/echarts-item/index';
 
 const xhlEcharts = reactive({
   xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
diff --git a/src/views/property-marketing/put-account/account-dashboard/style.scss b/src/views/property-marketing/put-account/account-dashboard/style.scss
index d650b49..4989886 100644
--- a/src/views/property-marketing/put-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/style.scss
@@ -1,69 +1,109 @@
-@import "@/views/property-marketing/component.scss";
-
-.part-div {
-  width: 100%;
-  background: var(--BG-white, white);
-  overflow: hidden;
-  border-radius: 8px;
-  outline: 1px var(--BG-300, #E6E6E8) solid;
-  outline-offset: -1px;
+.account-dashboard-wrap {
+  height: 100%;
+  display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  display: inline-flex;
-  margin: 10px;
 
-  :deep(.arco-tabs) {
-    .arco-tabs-tab {
-      height: 56px;
-      padding: 0 8px;
+  :deep(.search-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
+
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+
+  .filter-wrap {
+    border-radius: 8px;
+    border: 1px solid #e6e6e8;
+
+    :deep(.arco-tabs) {
+      .arco-tabs-tab {
+        height: 56px;
+        padding: 0 8px;
+      }
+    }
+
+    .top {
+      .title {
+        font-family: 'Alibaba PuHuiTi';
+        font-style: normal;
+      }
+
+      :deep(.arco-btn) {
+        .arco-btn-icon {
+          line-height: 14px;
+        }
+      }
+    }
+
+    .overview-row {
+      .overview-item {
+        height: 88px;
+        border-radius: 8px;
+        background: var(--BG-100, #f7f8fa);
+        padding: 16px;
+
+        &:not(:last-child) {
+          margin-right: 12px;
+        }
+      }
     }
   }
-}
 
+  .table-wrap {
+    width: 100%;
 
-: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;
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .container {
+    :deep(.arco-input-wrapper),
+    :deep(.arco-select-view-single),
+    :deep(.arco-select-view-multiple),
+    :deep(.arco-picker) {
+      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);
+      }
+    }
+
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+
+        .label {
+          margin-right: 8px;
+          color: #211f24;
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+
+        :deep(.arco-space-item) {
+          width: 100%;
+        }
+      }
+    }
 
-  &: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: 5px 10px 24px 24px;
-
-}