From 8a7bf94912d6889070399da43205fc1c8cd3c96a Mon Sep 17 00:00:00 2001
From: songjie <bestsongj@163.com>
Date: Fri, 30 Jan 2026 13:54:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E4=BD=93=E6=94=BE=E5=A4=A7=EF=BC=9B?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E6=94=B9=E4=B8=BA=E5=B7=A6=E5=8F=B3=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/PlatformData/UserOverview.vue | 64 +++++++++++++++++++++++++--------
 1 file changed, 49 insertions(+), 15 deletions(-)

diff --git a/src/views/PlatformData/UserOverview.vue b/src/views/PlatformData/UserOverview.vue
index 27f3a76..5e41662 100644
--- a/src/views/PlatformData/UserOverview.vue
+++ b/src/views/PlatformData/UserOverview.vue
@@ -36,31 +36,35 @@
         <div class="right-stats-col">
           <!-- 会员总数 -->
           <div class="stat-card orange-gradient small-card">
-            <div class="top-row">
+            <div class="left-part">
               <div class="card-title">
                 <el-icon><Trophy /></el-icon> 会员总数
               </div>
-              <div class="card-value-small">{{ overviewData.member }}</div>
             </div>
-            <div class="card-tag-wrapper">
-              <div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
-                {{ getGrowthText(overviewData.member_growth) }}
+            <div class="right-part">
+              <div class="card-value-small">{{ overviewData.member }}</div>
+              <div class="card-tag-wrapper">
+                <div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
+                  {{ getGrowthText(overviewData.member_growth) }}
+                </div>
               </div>
             </div>
           </div>
           
           <!-- 非会员总数 -->
           <div class="stat-card blue-gradient small-card">
-            <div class="top-row">
+            <div class="left-part">
               <div class="card-title">
                 <el-icon><User /></el-icon> 非会员总数
               </div>
-              <div class="card-value-small">{{ overviewData.normal }}</div>
             </div>
-            <div class="card-tag-wrapper">
-               <div class="card-tag" :class="getGrowthClass(overviewData.normal_growth)">
-                 {{ getGrowthText(overviewData.normal_growth) }}
-               </div>
+            <div class="right-part">
+              <div class="card-value-small">{{ overviewData.normal }}</div>
+              <div class="card-tag-wrapper">
+                 <div class="card-tag" :class="getGrowthClass(overviewData.normal_growth)">
+                   {{ getGrowthText(overviewData.normal_growth) }}
+                 </div>
+              </div>
             </div>
           </div>
         </div>
@@ -622,14 +626,28 @@ onMounted(() => {
   border-radius: 12px;
   padding: 20px;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start; /* 改为从顶部开始布局 */
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   color: #fff;
   position: relative; /* 确保绝对定位相对于卡片 */
 }
 
+.left-part {
+  display: flex;
+  align-items: center;
+  align-self: flex-start; /* 标题垂直居上 */
+}
+
+.right-part {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 改为水平居中 */
+  justify-content: center;
+}
+
 .card-title {
-  font-size: 24px; /* 字体放大 */
+  font-size: 34px; /* 字体放大 */
   font-weight: bold; /* 加粗 */
   display: flex;
   align-items: center;
@@ -637,6 +655,12 @@ onMounted(() => {
   margin-bottom: 20px; /* 增加底部间距 */
   width: 100%; /* 占满宽度 */
 }
+
+.small-card .card-title {
+  width: auto;
+  margin-bottom: 0;
+}
+
 .card-value {
   font-size: 64px;
   font-weight: bold;
@@ -652,10 +676,16 @@ onMounted(() => {
   gap: 10px; /* 数字和百分比之间的间距 */
 }
 .card-value-small {
-  font-size: 48px;
+  font-size: 64px;
   font-weight: bold;
   margin-left: auto;
 }
+
+.small-card .card-value-small {
+  margin-left: 0;
+  line-height: 1.2;
+}
+
 .top-row {
   display: flex;
   align-items: center;
@@ -666,6 +696,10 @@ onMounted(() => {
   justify-content: flex-end;
   margin-top: 10px;
 }
+
+.small-card .card-tag-wrapper {
+  margin-top: 8px;
+}
 .card-tag {
   background-color: #fff;
   padding: 8px 16px; /* 增加高度 */