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 @@
-
+
会员总数
-
{{ overviewData.member }}
-
-
- {{ getGrowthText(overviewData.member_growth) }} +
+
{{ overviewData.member }}
+
+
+ {{ getGrowthText(overviewData.member_growth) }} +
-
+
非会员总数
-
{{ overviewData.normal }}
-
-
- {{ getGrowthText(overviewData.normal_growth) }} -
+
+
{{ overviewData.normal }}
+
+
+ {{ getGrowthText(overviewData.normal_growth) }} +
+
@@ -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; /* 增加高度 */