fix: 工作台布局优化并添加响应式

src/views/system/home/components/header-info/index.vue

@@ -1,76 +1,79 @@
 <template>
-  <div class="header-info-item">
-    <div class="header-info-item-title">
-      <TeamOutlined class="blue icon" />
-      <div class="title">客户信息</div>
-    </div>
-    <div class="header-info-item-content">
-      <div class="header-info-item-left">
-        <div class="header-info-item-left-data">
-          <div class="number blue">89</div>
-          <div class="text gray">已推荐客户</div>
+  <div class="header-info">
+    <div class="header-info-item">
+      <div class="header-info-item-title">
+        <img :src="customer" class="blue icon" />
+        <div class="title">客户信息</div>
+      </div>
+      <div class="header-info-item-content">
+        <div class="header-info-item-left">
+          <div class="header-info-item-left-data">
+            <div class="number blue">89</div>
+            <div class="text gray">已推荐客户</div>
+          </div>
+          <div class="header-info-item-left-data">
+            <div class="number blue">6</div>
+            <div class="text gray">审核中</div>
+          </div>
         </div>
-        <div class="header-info-item-left-data">
-          <div class="number blue">6</div>
-          <div class="text gray">审核中</div>
+        <div class="header-info-item-right">
+          <div class="gray item-text">审核通过<span class="blue number">83</span>人</div>
+          <div class="gray item-text">发起线索客户<span class="blue number">34</span>人</div>
+          <div class="gray item-text">签约合同客户<span class="blue number">14</span>人</div>
         </div>
       </div>
-      <div class="header-info-item-right">
-        <div class="gray item-text">审核通过<span class="blue number">83</span>人</div>
-        <div class="gray item-text">发起线索客户<span class="blue number">34</span>人</div>
-        <div class="gray item-text">签约合同客户<span class="blue number">14</span>人</div>
-      </div>
-    </div>
-  </div>
-  <div class="header-info-item">
-    <div class="header-info-item-title">
-      <TeamOutlined class="blue icon" />
-      <div class="title">线索信息</div>
     </div>
-    <div class="header-info-item-content">
-      <div class="header-info-item-left">
-        <div class="header-info-item-left-data">
-          <div class="number blue">34</div>
-          <div class="text gray">已推荐线索</div>
+    <div class="header-info-item">
+      <div class="header-info-item-title">
+        <img :src="clue" class="blue icon" />
+        <div class="title">线索信息</div>
+      </div>
+      <div class="header-info-item-content">
+        <div class="header-info-item-left">
+          <div class="header-info-item-left-data">
+            <div class="number blue">34</div>
+            <div class="text gray">已推荐线索</div>
+          </div>
+          <div class="header-info-item-left-data">
+            <div class="number blue">6</div>
+            <div class="text gray">审核中</div>
+          </div>
         </div>
-        <div class="header-info-item-left-data">
-          <div class="number blue">6</div>
-          <div class="text gray">审核中</div>
+        <div class="header-info-item-right">
+          <div class="gray item-text">有效线索<span class="blue number">12</span>条</div>
+          <div class="gray item-text">无效线索<span class="blue number">34</span>条</div>
         </div>
       </div>
-      <div class="header-info-item-right">
-        <div class="gray item-text">有效线索<span class="blue number">12</span>条</div>
-        <div class="gray item-text">无效线索<span class="blue number">34</span>条</div>
-      </div>
-    </div>
-  </div>
-  <div class="header-info-item">
-    <div class="header-info-item-title">
-      <TeamOutlined class="blue icon" />
-      <div class="title">项目信息</div>
     </div>
-    <div class="header-info-item-content">
-      <div class="header-info-item-left">
-        <div class="header-info-item-left-data">
-          <div class="number blue">34</div>
-          <div class="text gray">待实施</div>
+    <div class="header-info-item">
+      <div class="header-info-item-title">
+        <img :src="project" class="blue icon" />
+        <div class="title">项目信息</div>
+      </div>
+      <div class="header-info-item-content">
+        <div class="header-info-item-left">
+          <div class="header-info-item-left-data">
+            <div class="number blue">34</div>
+            <div class="text gray">待实施</div>
+          </div>
+          <div class="header-info-item-left-data">
+            <div class="number blue">6</div>
+            <div class="text gray">实施中</div>
+          </div>
         </div>
-        <div class="header-info-item-left-data">
-          <div class="number blue">6</div>
-          <div class="text gray">实施中</div>
+        <div class="header-info-item-right">
+          <div class="gray item-text">已完工<span class="blue number">12</span>个</div>
+          <div class="gray item-text">已停工<span class="blue number">34</span>个</div>
         </div>
       </div>
-      <div class="header-info-item-right">
-        <div class="gray item-text">已完工<span class="blue number">12</span>个</div>
-        <div class="gray item-text">已停工<span class="blue number">34</span>个</div>
-      </div>
     </div>
   </div>
 </template>
 <script setup>
 import { ref, reactive } from "vue"
-
-
+import project from '/@/assets/images/home/project.png'
+import clue from '/@/assets/images/home/clue.png'
+import customer from '/@/assets/images/home/customer.png'
 </script>
 <style lang="scss" scoped>
 .blue {
@@ -80,30 +83,35 @@ import { ref, reactive } from "vue"
 .gray {
   color: #666666;
 }
-
+.header-info{
+  display: flex;
+  flex-direction: row;
+  gap: calc(var(--fitWidthRatio) * 10px);
+}
 .header-info-item {
   background-color: #FFFFFF;
-  border-radius: 10px;
-  padding: 16px;
+  border-radius: calc(var(--fitWidthRatio) * 10px);
+  padding: calc(var(--fitWidthRatio) * 16px);
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 10px;
+  gap: calc(var(--fitWidthRatio) * 10px);
 
   .header-info-item-title {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 8px;
+    gap: calc(var(--fitWidthRatio) * 8px);
 
     .icon {
-      font-size: 24px;
+      width: calc(var(--fitWidthRatio) * 20px);
+      height: calc(var(--fitWidthRatio) * 20px);
     }
 
     .title {
-      font-size: 16px;
+      font-size: calc(var(--fitWidthRatio) * 16px);
       font-weight: 400;
-      font-family: PingFang SC;
+      font-family: 'PingFang SC';
     }
   }
 
@@ -116,17 +124,17 @@ import { ref, reactive } from "vue"
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 20px;
+      gap: calc(var(--fitWidthRatio) * 20px);
       flex: 3;
 
       .header-info-item-left-data {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 10px;
+        gap: calc(var(--fitWidthRatio) * 10px);
 
         .number {
-          font-size: 40px;
+          font-size: calc(var(--fitWidthRatio) * 40px);
           font-family: PingFang SC;
         }
       }
@@ -136,12 +144,12 @@ import { ref, reactive } from "vue"
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
-      gap: 8px;
+      gap: calc(var(--fitWidthRatio) * 8px);
       flex: 2;
 
       .number {
-        padding: 0 6px;
-        font-size: 18px;
+        padding: 0 calc(var(--fitWidthRatio) * 6px);
+        font-size: calc(var(--fitWidthRatio) * 18px);
       }
 
       .item-text {

src/views/system/home/components/header-userinfo/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="header-userinfo-item">
     <div class="header-userinfo-item-header">
-      <!-- <div class="avatar">
-        <a-avatar :size="64" :src="userStore.avatar"></a-avatar>
-      </div> -->
       <div class="header-userinfo-item-bottom">
         <div class="header-userinfo-item-bottom-item">
           <div class="gray">注册日期:</div>
@@ -61,11 +58,11 @@ const welcomeSentence = computed(() => {
 
 .header-userinfo-item {
   background-color: #FFFFFF;
-  border-radius: 10px;
-  padding:0 32px;
+  border-radius:calc(var(--fitWidthRatio) * 10px) ;
+  padding: 0 calc(var(--fitWidthRatio) * 32px) ;
   display: flex;
   flex-direction: column;
-  height: 42px;
+  height:calc(var(--fitWidthRatio) * 42px) ;
 
   .header-userinfo-item-header {
     display: flex;
@@ -84,7 +81,7 @@ const welcomeSentence = computed(() => {
 
       .name {
         min-width: 48px;
-        font-size: 16px;
+        font-size: calc(var(--fitWidthRatio) * 16px);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -92,17 +89,21 @@ const welcomeSentence = computed(() => {
 
       .userType {
         display: flex;
-        max-width: 38%;
+        width: calc(var(--fitWidthRatio) * 64px);
+        height: calc(var(--fitWidthRatio) * 26px);
 
         .tag {
           display: flex;
           align-items: center;
+          justify-content: center;
           border: 1px solid #4773F7;
           background-color: #dae3fd;
           color: #4773F7;
           width: 100%;
-          height: 24px;
-          font-size: 12px;
+          margin: 0;
+          height: 100%;
+          padding-inline:0;
+          font-size: calc(var(--fitWidthRatio) * 12px);
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -115,6 +116,7 @@ const welcomeSentence = computed(() => {
         flex-direction: row;
         align-items: center;
         min-width: 118px;
+
         .img {
           width: 14px;
           height: 14px;

src/views/system/home/components/home-body-info/index.vue

@@ -1,29 +1,25 @@
 <template>
-  <div class="home-body-info-item">
-    <div class="title">
-      <img class="img" :src="coin" alt="">
-      <div>立项信息</div>
+  <div class="home-body-info">
+    <div class="home-body-info-item">
+      <div class="title">
+        <img class="img" :src="coin" alt="">
+        <div>立项信息</div>
+      </div>
+      <div ref="projectProposalInformationRef" class="chart"></div>
     </div>
-    <div ref="projectProposalInformationRef" class="chart">
-
-    </div>
-  </div>
-  <div class="home-body-info-item">
-    <div class="title">
-      <img class="img" :src="coin" alt="">
-      <div>投标信息</div>
-    </div>
-    <div ref="bidInformationRef" class="bid-chart">
-
-    </div>
-  </div>
-  <div class="home-body-info-item">
-    <div class="title">
-      <img class="img" :src="coin" alt="">
-      <div>合同信息</div>
+    <div class="home-body-info-item">
+      <div class="title">
+        <img class="img" :src="coin" alt="">
+        <div>投标信息</div>
+      </div>
+      <div ref="bidInformationRef" class="bid-chart"></div>
     </div>
-    <div ref="contractInformationRef" class="chart">
-
+    <div class="home-body-info-item">
+      <div class="title">
+        <img class="img" :src="coin" alt="">
+        <div>合同信息</div>
+      </div>
+      <div ref="contractInformationRef" class="chart"></div>
     </div>
   </div>
 </template>
@@ -54,9 +50,9 @@ const projectProposalInformationOption = {
       data: [80, 50],
       type: 'bar',
       barWidth: '25%',
-      label:{
-        show:true,
-        position:'top'
+      label: {
+        show: true,
+        position: 'top'
       },
       itemStyle: {
         normal: {
@@ -109,16 +105,16 @@ const bidInformationOption = {
       name: '实例一',
       type: 'line',
       areaStyle: {},
-      smooth:true,
+      smooth: true,
       emphasis: {
         focus: 'series'
       },
       data: [50, 70, 60, 40],
       itemStyle: {
         normal: {
-          color:'#80C3F2',
-          lineStyle:{
-            color:'#0e9cff',
+          color: '#80C3F2',
+          lineStyle: {
+            color: '#0e9cff',
           }
         }
       }
@@ -127,16 +123,16 @@ const bidInformationOption = {
       name: '实例二',
       type: 'line',
       areaStyle: {},
-      smooth:true,
+      smooth: true,
       emphasis: {
         focus: 'series'
       },
       data: [10, 20, 10, 30],
       itemStyle: {
         normal: {
-          color:'#E3B9FA',
-          lineStyle:{
-            color:'#9A2AD8',
+          color: '#E3B9FA',
+          lineStyle: {
+            color: '#9A2AD8',
           }
         }
       }
@@ -163,9 +159,9 @@ const contractOption = {
       data: [80, 50],
       type: 'bar',
       barWidth: '25%',
-      label:{
-        show:true,
-        position:'top'
+      label: {
+        show: true,
+        position: 'top'
       },
       itemStyle: {
         normal: {
@@ -184,35 +180,40 @@ const { bidChartInstance, bidUpdateOption } = useEChart(bidInformationRef, bidIn
 const { contractChartInstance, contractUpdateOption } = useEChart(contractInformationRef, contractOption)
 </script>
 <style lang="scss" scoped>
+.home-body-info{
+  display: flex;
+  flex-direction: row;
+  gap: calc(var(--fitWidthRatio) * 10px);
+}
 .home-body-info-item {
   background-color: #FFFFFF;
-  border-radius: 10px;
+  border-radius:calc(var(--fitWidthRatio) * 10px);
   display: flex;
   flex-direction: column;
-  height: 260px;
+  height: calc(var(--fitWidthRatio) * 260px);
   width: 33%;
   // gap: 10px;
 
   .title {
     display: flex;
     flex-direction: row;
-    padding: 16px 16px 0 16px;
-    gap: 8px;
+    padding: calc(var(--fitWidthRatio) * 16px) calc(var(--fitWidthRatio) * 16px) 0 calc(var(--fitWidthRatio) * 16px);
+    gap: calc(var(--fitWidthRatio) * 8px);
 
     .img {
-      width: 20px;
-      height: 20px;
+      width: calc(var(--fitWidthRatio) * 20px);
+      height: calc(var(--fitWidthRatio) * 20px);
     }
   }
 
   .bid-chart {
     // width: 90%;
-    height: 230px;
+    height: calc(var(--fitWidthRatio) * 230px);
     // padding-right: 10px;
   }
 
   .chart {
-    height: 230px;
+    height: calc(var(--fitWidthRatio) * 230px);
   }
 }
 </style>

src/views/system/home/components/home-body-my-message/index.vue

@@ -14,77 +14,99 @@
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，提交的客户广州辰光电力已经审核通过
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，提交的客户广州辰光电力已经审核通过
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，提交的客户广州辰光电力已经审核通过
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == 'new' ? 'new-message' : 'read'">NEW</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
       <div class="content-item">
         <div class="text">
           <a-tag :class="'new' == '1' ? 'new-message' : 'read'">已读</a-tag>
-          恭喜您，提交的客户广州辰光电力已经审核通过
+          <div class="content">
+            恭喜您，您提交的南山区电力污水处理设备采购项目已经进入到投标阶段了呢~~~~~
+          </div>
         </div>
         <div class="time">2025-01-05</div>
       </div>
@@ -109,9 +131,9 @@ const total = ref(80)
   flex: 1;
   width: 30%;
   background-color: #ffffff;
-  border-radius: 10px;
-  padding: 16px 16px 12px 16px;
-  gap: 10px;
+  border-radius: calc(var(--fitWidthRatio) * 10px);
+  padding: calc(var(--fitWidthRatio) * 16px) calc(var(--fitWidthRatio) * 16px) calc(var(--fitWidthRatio) * 12px) calc(var(--fitWidthRatio) * 16px);
+  gap: calc(var(--fitWidthRatio) * 10px);
 
   .home-body-my-message-title {
     display: flex;
@@ -121,14 +143,14 @@ const total = ref(80)
 
     .title {
       display: flex;
-      height: 24px;
+      height: calc(var(--fitWidthRatio) * 24px);
       flex-direction: row;
       align-items: center;
-      gap: 8px;
+      gap: calc(var(--fitWidthRatio) * 8px);
 
       .img {
-        width: 20px;
-        height: 20px;
+        width: calc(var(--fitWidthRatio) * 20px);
+        height: calc(var(--fitWidthRatio) * 20px);
       }
     }
 
@@ -141,15 +163,16 @@ const total = ref(80)
   .home-body-my-message-content {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: calc(var(--fitWidthRatio) * 8px);
     flex: 1;
-    justify-content:space-between;
+    justify-content: space-between;
+
     .content-item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      padding: 8px 0;
+      padding: calc(var(--fitWidthRatio) * 8px) 0;
       border-bottom: 1px solid #E4E7ED;
       cursor: pointer;
 
@@ -157,31 +180,42 @@ const total = ref(80)
         background-color: #feeff0;
         border: 1px solid #fccbce;
         color: #F23947;
-        height: 24px;
-        width: 48px;
-        font-size: 14px;
-        text-align: center;
+        height: calc(var(--fitWidthRatio) * 24px);
+        width: calc(var(--fitWidthRatio) * 48px);
+        font-size: calc(var(--fitWidthRatio) * 14px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
       }
 
       .read {
         background-color: #f5f5f5;
         border: 1px solid #d8d8d8;
         color: #000000;
-        height: 24px;
-        width: 48px;
-        font-size: 14px;
-        text-align: center;
+        height: calc(var(--fitWidthRatio) * 24px);
+        width: calc(var(--fitWidthRatio) * 48px);
+        font-size: calc(var(--fitWidthRatio) * 14px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .text {
-        max-width: 80%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        max-width: 78%;
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--fitWidthRatio) * 8px);
+
+        .content {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
       }
 
       .time {
-        padding-left: 8px;
+        padding-left: calc(var(--fitWidthRatio) * 8px);
         color: #999999;
       }
     }
@@ -189,6 +223,23 @@ const total = ref(80)
     .pagination {
       display: flex;
       justify-content: flex-end;
+      align-items: center;
+      font-size: calc(var(--fitWidthRatio) * 14px);
+      min-width: 332px;
+      :deep(.ant-pagination-total-text){
+        min-width: 60px;
+      }
+      :deep(.ant-pagination-item) {
+        min-width: calc(var(--fitWidthRatio) * 24px);
+        height: calc(var(--fitWidthRatio) * 24px);
+      }
+
+      :deep(.ant-pagination-item a) {
+        height: calc(var(--fitWidthRatio) * 24px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

src/views/system/home/components/home-body-notice/index.vue

@@ -61,9 +61,9 @@
 <script setup>
 import notice from '/@/assets/images/home/notice.png'
 import { ref, reactive } from "vue"
-const current =ref(1)
+const current = ref(1)
 const pageSize = 6
-const total =ref(80)
+const total = ref(80)
 </script>
 <style lang="scss" scoped>
 .home-body-notice {
@@ -71,9 +71,9 @@ const total =ref(80)
   flex-direction: column;
   width: 100%;
   background-color: #ffffff;
-  border-radius: 10px;
-  padding: 16px 16px 12px 16px;
-  gap: 10px;
+  border-radius: calc(var(--fitWidthRatio) * 10px);
+  padding: calc(var(--fitWidthRatio) * 16px) calc(var(--fitWidthRatio) * 16px) calc(var(--fitWidthRatio) * 12px) calc(var(--fitWidthRatio) * 16px);
+  gap: calc(var(--fitWidthRatio) * 10px);
   flex: 3;
 
   .home-body-my-message-title {
@@ -84,14 +84,14 @@ const total =ref(80)
 
     .title {
       display: flex;
-      height: 24px;
+      height: calc(var(--fitWidthRatio) * 24px);
       flex-direction: row;
       align-items: center;
-      gap: 8px;
+      gap: calc(var(--fitWidthRatio) * 8px);
 
       .img {
-        width: 20px;
-        height: 20px;
+        width: calc(var(--fitWidthRatio) * 20px);
+        height: calc(var(--fitWidthRatio) * 20px);
       }
     }
 
@@ -104,25 +104,27 @@ const total =ref(80)
   .home-body-my-message-content {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: calc(var(--fitWidthRatio) * 4px);
     flex: 1;
     justify-content: space-between;
+
     .content-item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      gap: 8px;
-      padding: 8px 0;
+      gap: calc(var(--fitWidthRatio) * 8px);
+      padding: calc(var(--fitWidthRatio) * 8px) 0;
       border-bottom: 1px solid #E4E7ED;
       cursor: pointer;
+
       .notice {
         background-color: #eef3fe;
         border: 1px solid #c7d7fd;
         color: #2B69F8;
-        height: 24px;
-        width: 48px;
-        font-size: 14px;
+        height: calc(var(--fitWidthRatio) * 24px);
+        width: calc(var(--fitWidthRatio) * 48px);
+        font-size: calc(var(--fitWidthRatio) * 14px);
         text-align: center;
       }
 
@@ -130,9 +132,9 @@ const total =ref(80)
         background-color: #fff4e4;
         border: 1px solid #ffe0b2;
         color: #F39200;
-        height: 24px;
-        width: 48px;
-        font-size: 14px;
+        height: calc(var(--fitWidthRatio) * 24px);
+        width: calc(var(--fitWidthRatio) * 48px);
+        font-size: calc(var(--fitWidthRatio) * 14px);
         text-align: center;
       }
 
@@ -151,7 +153,21 @@ const total =ref(80)
     .pagination {
       display: flex;
       justify-content: flex-end;
-      margin-top: 4px;
+      margin-top: calc(var(--fitWidthRatio) * 4px);
+      align-items: center;
+      font-size: calc(var(--fitWidthRatio) * 14px);
+
+      :deep(.ant-pagination-item) {
+        min-width: calc(var(--fitWidthRatio) * 24px);
+        height: calc(var(--fitWidthRatio) * 24px);
+      }
+
+      :deep(.ant-pagination-item a) {
+        height: calc(var(--fitWidthRatio) * 24px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

src/views/system/home/index.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="home-container" ref="rootRef">
     <headerUserInfo />
-    <div class="home-header-info">
-      <headerInfo />
-    </div>
     <div class="home-body">
       <div class="home-body-left">
-        <div class="home-body-left-info">
-          <homeBodyInfo />
-        </div>
+        <headerInfo />
+        <homeBodyInfo />
         <homeBodyNotice />
       </div>
-      <homeBodyMyMessage />
+        <homeBodyMyMessage />
     </div>
   </div>
 </template>
@@ -80,14 +76,6 @@ onUnmounted(() => {
       flex-direction: column;
       width: 68%;
       gap: calc(var(--fitWidthRatio) * 8px);
-
-      .home-body-left-info {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        gap: calc(var(--fitWidthRatio) * 8px);
-        flex: 2;
-      }
     }
   }
 }