diff --git a/src/views/PlatformData/UserOverview.vue b/src/views/PlatformData/UserOverview.vue index 0e5c136..85fbf7f 100644 --- a/src/views/PlatformData/UserOverview.vue +++ b/src/views/PlatformData/UserOverview.vue @@ -45,28 +45,39 @@ -
+
-
-
- 会员登陆总数 +
+ 会员登陆总数 +
+
{{ overviewData.member }}
+
+
+ {{ getGrowthText(overviewData.member_growth) }}
-
-
{{ overviewData.member }}
-
-
- {{ getGrowthText(overviewData.member_growth) }} -
+
+
+ + +
+
+
+ 游客总数 +
+
{{ overviewData.guest }}
+
+
+ {{ getGrowthText(overviewData.guest_growth) }}
-
+
@@ -248,6 +259,8 @@ const overviewData = ref({ total_login_growth: '0%', member: 0, member_growth: '0%', + guest: 0, + guest_growth: '0%', normal_register: 0, normal_reg_growth: '0%', normal_login: 0, @@ -654,7 +667,7 @@ onMounted(() => { .big-card { flex: 1; - height: 360px; + height: auto; border-radius: 12px; padding: 24px; display: flex; @@ -675,11 +688,34 @@ onMounted(() => { background: linear-gradient(135deg, #9BB7FC 0%, #66a6ff 100%); } -.right-stats-col { +.right-stats-grid { flex: 2; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + gap: 20px; +} + +.right-stats-grid .full-width { + grid-column: 1 / -1; +} + +.right-stats-grid .small-card-content { display: flex; flex-direction: column; - gap: 20px; + align-items: center; + justify-content: center; + height: 100%; +} + +.right-stats-grid .small-card-content .card-title { + margin-bottom: 15px; + text-align: center; +} + +.right-stats-grid .small-card-content .card-value-small { + margin-bottom: 10px; + text-align: center; } .small-card { flex: 1;