feat: 升级vue3版本和router版本，主框架调整，页面样式统一

2025-08-16 17:01:06 +08:00
parent f14a525828
commit b4bca57f04
47 changed files with 503 additions and 586 deletions
--- a/src/views/agent/work-flow/components/DynamicForm.vue
+++ b/src/views/agent/work-flow/components/DynamicForm.vue
@ -21,9 +21,9 @@
          v-model="formData[field.props.name]"
          :placeholder="field?.props?.placeholder"
        />
-        <a-color-picker    v-if="field.type === 'color_picker'"
+        <!-- <a-color-picker    v-if="field.type === 'color_picker'"
                              style="width: 500px; height: 200px"
-                              v-model="formData[field.props.name]" />
+                              v-model="formData[field.props.name]" /> -->
        <ImageUpload
          v-if="field.type == 'upload_image'"
          v-model="formData[field.props.name]"
--- a/src/views/creative-generation-workshop/manuscript-writer/check-list/index.vue
+++ b/src/views/creative-generation-workshop/manuscript-writer/check-list/index.vue
@ -50,7 +50,7 @@
        @select="handleSelect"
        @selectAll="handleSelectAll"
      />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/creative-generation-workshop/manuscript-writer/check-list/style.scss
+++ b/src/views/creative-generation-workshop/manuscript-writer/check-list/style.scss
@ -31,12 +31,5 @@
  .table-wrap {
    display: flex;
    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/creative-generation-workshop/manuscript-writer/list/index.vue
+++ b/src/views/creative-generation-workshop/manuscript-writer/list/index.vue
@ -16,7 +16,7 @@
    </div>
    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
      <ManuscriptTable :dataSource="dataSource" @sorterChange="handleSorterChange" @delete="handleDelete" />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/creative-generation-workshop/manuscript-writer/list/style.scss
+++ b/src/views/creative-generation-workshop/manuscript-writer/list/style.scss
@ -18,12 +18,5 @@
  .table-wrap {
    display: flex;
    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/creative-generation-workshop/manuscript/check-list/index.vue
+++ b/src/views/creative-generation-workshop/manuscript/check-list/index.vue
@ -50,7 +50,7 @@
        @select="handleSelect"
        @selectAll="handleSelectAll"
      />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/creative-generation-workshop/manuscript/check-list/style.scss
+++ b/src/views/creative-generation-workshop/manuscript/check-list/style.scss
@ -31,12 +31,5 @@
  .table-wrap {
    display: flex;
    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/index.vue
+++ b/src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/index.vue
@ -1,13 +1,31 @@
 <template>
-  <a-table ref="tableRef" :data="dataSource" row-key="id" column-resizable :pagination="false" :scroll="{ x: '100%' }"
-    class="manuscript-table w-100% flex-1" bordered @sorter-change="handleSorterChange">
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    column-resizable
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="manuscript-table w-100% flex-1"
+    bordered
+    @sorter-change="handleSorterChange"
+  >
    <template #empty>
      <NoData text="暂无稿件" />
    </template>
    <template #columns>
-      <a-table-column v-for="column in TABLE_COLUMNS" :key="column.dataIndex" :data-index="column.dataIndex"
-        :fixed="column.fixed" :width="column.width" :min-width="column.minWidth" :sortable="column.sortable"
-        :align="column.align" ellipsis tooltip>
+      <a-table-column
+        v-for="column in TABLE_COLUMNS"
+        :key="column.dataIndex"
+        :data-index="column.dataIndex"
+        :fixed="column.fixed"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :sortable="column.sortable"
+        :align="column.align"
+        ellipsis
+        tooltip
+      >
        <template #title>
          <div class="flex items-center">
            <span class="cts mr-4px">{{ column.title }}</span>
@ -21,31 +39,39 @@
          {{ exactFormatTime(record.create_at) }}
        </template>
        <template v-else-if="column.dataIndex === 'customer_opinion'" #cell="{ record }">
-          <p class="h-28px px-8px flex items-center rounded-2px w-fit"
-            :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }">
+          <p
+            class="h-28px px-8px flex items-center rounded-2px w-fit"
+            :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
+          >
            <span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
              getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
-              }}</span>
+            }}</span>
          </p>
        </template>
        <template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
          <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
        </template>
        <template v-else-if="column.dataIndex === 'audit_status'" #cell="{ record }">
-          <div class="flex items-center w-fit h-28px px-8px rounded-2px"
-            :style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }">
+          <div
+            class="flex items-center w-fit h-28px px-8px rounded-2px"
+            :style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
+          >
            <span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
              getStatusInfo(record.audit_status).name
-              }}</span>
+            }}</span>
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
          <div class="flex items-center">
-            <img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16"
-              class="mr-4px" />
+            <img
+              :src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
+              width="16"
+              height="16"
+              class="mr-4px"
+            />
            <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
              record.type === EnumManuscriptType.Image ? '图文' : '视频'
-              }}</span>
+            }}</span>
          </div>
        </template>
        <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
@ -83,9 +109,7 @@ import { ref } from 'vue';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
 import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
-import {
-  CUSTOMER_OPINION,
-} from '@/views/creative-generation-workshop/manuscript/check-list/constants';
+import { CUSTOMER_OPINION } from '@/views/creative-generation-workshop/manuscript/check-list/constants';

 import TextOverTips from '@/components/text-over-tips';
 import HoverImagePreview from '@/components/hover-image-preview';
--- a/src/views/creative-generation-workshop/manuscript/list/index.vue
+++ b/src/views/creative-generation-workshop/manuscript/list/index.vue
@ -21,7 +21,7 @@
      class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col"
    >
      <ManuscriptTable :dataSource="dataSource" @sorterChange="handleSorterChange" @delete="handleDelete" />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/creative-generation-workshop/manuscript/list/style.scss
+++ b/src/views/creative-generation-workshop/manuscript/list/style.scss
@ -18,12 +18,5 @@
  .table-wrap {
    display: flex;
    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -1,17 +1,11 @@
 <script lang="jsx">
-
 export default {
-    setup(props, { emit, expose }) {
-
-        return () => (
-            <div>
-                home
-            </div>
-        )
-    }
-}
+  setup(props, { emit, expose }) {
+    return () => <div>home</div>;
+  },
+};
 </script>

 <style lang="scss" scoped>
@import './style.scss';
-</style>
+</style>
--- a/src/views/property-marketing/brands/brand-materials/index.vue
+++ b/src/views/property-marketing/brands/brand-materials/index.vue
@ -72,7 +72,7 @@
      </div>
    </div>
    <div
-      class="table-wrap bg-#fff rounded-8px  px-24px py-24px flex-1 flex flex-col"
+      class="table-wrap bg-#fff rounded-8px  px-24px py-24px  flex flex-col"
    >
      <a-table :data="tableData" ref="tableRef" :pagination="false">
        <template #columns>
@ -106,7 +106,7 @@
        </template>
      </a-table>

-      <div class="pagination-box">
+      <div class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/property-marketing/brands/brand-materials/style.scss
+++ b/src/views/property-marketing/brands/brand-materials/style.scss
@ -1,5 +1,4 @@
 .brand-wrap {
-  height: 100%;
  display: flex;
  flex-direction: column;

@ -11,14 +10,6 @@
  .table-wrap {
    width: 100%;

-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
-
    margin-top: 20px;
  }

--- a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
@ -46,7 +46,7 @@
    >
      <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
      </a-table>
-      <div class="pagination-box">
+      <div class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
@ -177,14 +177,6 @@ const columns = [
  .table-wrap {
    width: 100%;

-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
-
    margin-top: 20px;
  }

--- a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
@ -46,7 +46,7 @@
    >
      <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
      </a-table>
-      <div class="pagination-box">
+      <div class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
@ -169,7 +169,7 @@ const columns = [
  .table-wrap {
    width: 100%;

-    .pagination-box {
+    .pagination-row {
      display: flex;
      width: 100%;
      padding: 16px 24px;
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
@ -41,7 +41,7 @@
    :selected-keys="selectedItems"
    :pagination="false"
    :scroll="{ x: '100%' }"
-    class="account-table w-100%"
+    class="account-table w-100% flex-1"
    bordered
    @sorter-change="handleSorterChange"
    @select="handleSelect"
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
@ -18,8 +18,6 @@
  :deep(.status-box) {
    .label {
      font-family: $font-family-medium;
-      font-size: 14px;
-      line-height: 22px;
    }
  }
  .ai-evaluation-row {
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@ -5,7 +5,7 @@

 <template>
  <div class="account-dashboard-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px  px-24px pb-20px mb-16px">
+    <div class="filter-wrap bg-#fff rounded-8px px-24px pb-20px mb-16px">
      <div class="top flex h-64px py-10px justify-between items-center">
        <div class="flex items-center">
          <p class="text-18px font-400 lh-26px color-#211F24 mr-4px title">数据总览</p>
@ -27,12 +27,10 @@
        </div>
      </div>
    </div>
-    <div class="filter-wrap bg-#fff rounded-8px  px-24px py-24px mb-16px">
+    <div class="filter-wrap bg-#fff rounded-8px px-24px py-24px mb-16px">
      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
    </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px  px-24px py-24px flex-1 flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
      <AccountTable
        ref="accountTableRef"
        :dataSource="dataSource"
@ -41,7 +39,7 @@
        @export="handleExport"
        @sorterChange="handleSorterChange"
      />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/property-marketing/media-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/style.scss
@ -1,5 +1,4 @@
 .account-dashboard-wrap {
-  height: 100%;
  display: flex;
  flex-direction: column;
  .filter-wrap {
@ -47,12 +46,5 @@

  .table-wrap {
    width: 100%;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@ -97,7 +97,7 @@
        </a-table-column>
      </template>
    </a-table>
-    <div v-if="pageInfo.total > 0" class="pagination-box">
+    <div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
      <a-pagination
        :total="pageInfo.total"
        size="mini"
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
@ -19,12 +19,4 @@
      }
    }
  }
-
-  .pagination-box {
-    display: flex;
-    width: 100%;
-    padding: 16px 24px;
-    justify-content: flex-end;
-    align-items: center;
-  }
 }
--- a/src/views/property-marketing/media-account/account-detail/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/style.scss
@ -22,12 +22,5 @@

  .table-wrap {
    width: 100%;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@ -60,7 +60,7 @@
        </div>
      </template>
    </a-table>
-    <div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
+    <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
      <a-pagination
        :total="pageInfo.total"
        size="mini"
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
@ -16,12 +16,7 @@
      font-weight: 400;
      line-height: 22px; /* 157.143% */
    }
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
+    .pagination-row {
      .arco-pagination {
        .arco-pagination-list {
          .arco-pagination-item {
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@ -91,7 +91,7 @@
      />
      <NoData v-else />

-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/property-marketing/media-account/account-manage/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@ -50,10 +50,10 @@
        margin-right: 16px;
      }
      &.red {
-        color: #F64B31;
+        color: #f64b31;
      }
      &.disabled {
-        color: #C5B7FF;
+        color: #c5b7ff;
        cursor: not-allowed;
      }
    }
@ -61,13 +61,5 @@
  .card-wrap {
    display: flex;
    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-
-    }
  }
 }
--- a/src/views/property-marketing/media-account/components/status-select/status-box.tsx
+++ b/src/views/property-marketing/media-account/components/status-select/status-box.tsx
@ -115,14 +115,14 @@ export default defineComponent({
            {to_be_expire_for_cookie === EnumExpireForCookie.EXPIRE && (
              <div class="flex items-center rounded-2px px-8px mr-8px" style={{ background, color }}>
                <img src={icon1} width="12" height="12" class="mr-4px" />
-                <span class="text-12px lh-20px font-400 label">{label}</span>
+                <span class="text-14px lh-22px font-400 label">{label}</span>
              </div>
            )}
            <div
              class="flex items-center rounded-2px px-8px"
              style={{ background: normalStyle.background, color: normalStyle.color }}
            >
-              <span class="text-12px lh-20px font-400">正常</span>
+              <span class="text-14px lh-22px font-400 label">正常</span>
            </div>
          </div>
        );
@ -130,7 +130,7 @@ export default defineComponent({

      return (
        <div class="flex items-center rounded-2px px-8px status-box" style={{ background, color }}>
-          <span class="text-12px lh-20px font-400 label">{label}</span>
+          <span class="text-14px lh-22px font-400 label">{label}</span>
          {status === EnumStatus.PAUSE ? (
            <img src={iconWarn1} width="12" height="12" class="ml-4px" />
          ) : (
--- a/src/views/property-marketing/project-manage/project-list/index.vue
+++ b/src/views/property-marketing/project-manage/project-list/index.vue
@ -14,14 +14,14 @@
      </div>
      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
    </div>
-    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col">
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
      <ProjectTable
        :dataSource="dataSource"
        @sorterChange="handleSorterChange"
        @delete="handleDelete"
        @edit="handleEdit"
      />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/property-marketing/project-manage/project-list/style.scss
+++ b/src/views/property-marketing/project-manage/project-list/style.scss
@ -1,5 +1,4 @@
 .project-list-wrap {
-  height: 100%;
  display: flex;
  flex-direction: column;
  .filter-wrap {
@ -18,12 +17,5 @@
  .table-wrap {
    display: flex;
    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
@ -59,7 +59,7 @@
        </div>
      </template>
    </a-table>
-    <div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
+    <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
      <a-pagination
        :total="pageInfo.total"
        size="mini"
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
@ -16,12 +16,7 @@
      font-weight: 400;
      line-height: 22px; /* 157.143% */
    }
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
+    .pagination-row {
      .arco-pagination {
        .arco-pagination-list {
          .arco-pagination-item {
--- a/src/views/property-marketing/put-account/account-data/index.vue
+++ b/src/views/property-marketing/put-account/account-data/index.vue
@ -4,7 +4,7 @@
 -->
 <template>
  <div class="account-data-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px  pb-24px mb-16px">
+    <div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
      <a-tabs v-model="activeTab" @tab-click="handleTabClick">
        <a-tab-pane key="1" title="账户"></a-tab-pane>
        <a-tab-pane key="2" title="计划"></a-tab-pane>
@ -25,9 +25,7 @@
        @onReset="init"
      />
    </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px  px-24px py-24px flex-1 flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
      <component
        :is="isAccountTab ? BoardTable : PlanTable"
        ref="accountTableRef"
@ -36,7 +34,7 @@
        @sorterChange="handleSorterChange"
        @selectionChange="handleSelectionChange"
      />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/property-marketing/put-account/account-data/style.scss
+++ b/src/views/property-marketing/put-account/account-data/style.scss
@ -1,5 +1,4 @@
 .account-data-wrap {
-  height: 100%;
  display: flex;
  flex-direction: column;
  .filter-wrap {
@ -37,12 +36,5 @@

  .table-wrap {
    width: 100%;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@ -70,7 +70,7 @@
      />
      <NoData v-else />

-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
--- a/src/views/property-marketing/put-account/account-manage/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/style.scss
@ -51,12 +51,5 @@
  .card-wrap {
    display: flex;
    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
  }
 }
--- a/src/views/property-marketing/put-account/investment-guidelines/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/style.scss
@ -6,7 +6,7 @@
  .pagination-box {
    display: flex;
    width: 100%;
-    padding: 16px 24px;
+      padding:  4px 24px 24px;
    justify-content: flex-end;
    align-items: center;
  }
@ -75,7 +75,7 @@
    .pagination-box {
      display: flex;
      width: 100%;
-      padding: 16px 24px;
+      padding:  4px 24px 24px;
      justify-content: flex-end;
      align-items: center;
    }
@ -84,7 +84,7 @@
  .pagination-box {
    display: flex;
    width: 100%;
-    padding: 16px 24px;
+      padding:  4px 24px 24px;
    justify-content: flex-end;
    align-items: center;