diff --git a/src/views/PlatformData/UserLoginStats.vue b/src/views/PlatformData/UserLoginStats.vue index 87ebefc..b04a0ee 100644 --- a/src/views/PlatformData/UserLoginStats.vue +++ b/src/views/PlatformData/UserLoginStats.vue @@ -102,7 +102,7 @@
-
{{ statsTitle }}登录数据
+
{{ statsTitle }}总用户登录数据
@@ -1220,7 +1220,7 @@ onMounted(() => { .blue-gradient { background: linear-gradient(135deg, #9BB7FC 0%, #66a6ff 100%); } .card-title { - font-size: 24px; + font-size: 34px; font-weight: bold; display: flex; align-items: center; @@ -1243,7 +1243,7 @@ onMounted(() => { text-align: center; } .card-value-small { - font-size: 48px; + font-size: 68px; font-weight: bold; margin-left: auto; } diff --git a/src/views/PlatformData/UserOverview.vue b/src/views/PlatformData/UserOverview.vue index 00be3e4..c6ede84 100644 --- a/src/views/PlatformData/UserOverview.vue +++ b/src/views/PlatformData/UserOverview.vue @@ -20,10 +20,10 @@
- +
- 用户总数 + 用户注册总数
{{ overviewData.total }}
@@ -31,49 +31,73 @@ {{ getGrowthText(overviewData.total_growth) }}
+
+ 用户登录总数 +
+
+
{{ overviewData.total_login }}
+
+ {{ getGrowthText(overviewData.total_login_growth) }} +
+
-
-
- 会员总数 +
+
+
+ 会员总数 +
-
-
-
{{ overviewData.member }}
-
-
- {{ getGrowthText(overviewData.member_growth) }} +
+
{{ overviewData.member }}
+
+
+ {{ getGrowthText(overviewData.member_growth) }} +
- +
-
-
- 非会员总数 +
+ +
+
+ 非网注册总数 +
+
{{ overviewData.normal_register }}
+
+
+ {{ getGrowthText(overviewData.normal_reg_growth) }} +
+
-
-
-
{{ overviewData.normal }}
-
-
- {{ getGrowthText(overviewData.normal_growth) }} -
+ +
+
+ 非网登录总数 +
+
{{ overviewData.normal_login }}
+
+
+ {{ getGrowthText(overviewData.normal_login_growth) }} +
+
- +
- 用户构成比例 + 登录用户构成比例
@@ -217,12 +241,23 @@ let chartBarInstance = null; const overviewData = ref({ total: 0, total_growth: '0%', + total_login: 0, + total_login_growth: '0%', member: 0, member_growth: '0%', - normal: 0, - normal_growth: '0%', - new_normal: 0, - old_normal: 0 + normal_register: 0, + normal_reg_growth: '0%', + normal_login: 0, + normal_login_growth: '0%', + group_member_normal: { + member_val: 0, + normal_login_val: 0 + }, + group_triple: { + member_val: 0, + new_normal_login_val: 0, + old_normal_val: 0 + } }); // 表格数据 - 使用 ref 响应式数据 @@ -428,8 +463,8 @@ const initCharts = () => { avoidLabelOverlap: false, label: { show: false }, data: [ - { value: overviewData.value.normal, name: '非会员用户' }, - { value: overviewData.value.member, name: '会员用户' } + { value: overviewData.value.group_member_normal.normal_login_val, name: '非会员用户' }, + { value: overviewData.value.group_member_normal.member_val, name: '会员用户' } ] } ] @@ -456,9 +491,9 @@ const initCharts = () => { avoidLabelOverlap: false, label: { show: false }, data: [ - { value: overviewData.value.new_normal, name: '新非网数量' }, - { value: overviewData.value.member, name: '会员用户' }, - { value: overviewData.value.old_normal, name: '老非网数量' } + { value: overviewData.value.group_triple.new_normal_login_val, name: '新非网数量' }, + { value: overviewData.value.group_triple.member_val, name: '会员用户' }, + { value: overviewData.value.group_triple.old_normal_val, name: '老非网数量' } ] } ] @@ -607,7 +642,7 @@ onMounted(() => { padding: 24px; display: flex; flex-direction: column; - justify-content: flex-start; /* 从顶部开始布局 */ + justify-content: space-between; /* 空间分布 */ color: #fff; position: relative; /* 确保绝对定位相对于卡片 */ } @@ -634,11 +669,42 @@ onMounted(() => { border-radius: 12px; padding: 20px; display: flex; + flex-direction: column; + justify-content: center; + color: #fff; + position: relative; /* 确保绝对定位相对于卡片 */ +} + +.small-card-row { + display: flex; flex-direction: row; justify-content: space-between; + height: 100%; +} + +.small-card-item { + flex: 1; + display: flex; + flex-direction: column; align-items: center; - color: #fff; - position: relative; /* 确保绝对定位相对于卡片 */ + justify-content: center; + padding: 0 10px; +} + +.small-card-item:first-child { + border-right: 1px solid rgba(255, 255, 255, 0.3); +} + +.small-card-content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} + +.small-card-content:last-child { + margin-bottom: 0; } .left-part { @@ -667,7 +733,17 @@ onMounted(() => { .small-card .card-title { width: auto; - margin-bottom: 0; + margin-bottom: 10px; + text-align: center; +} + +.small-card-item .card-title { + font-size: 24px; + margin-bottom: 15px; +} + +.small-card-item .card-value-small { + margin-bottom: 10px; } .card-value { @@ -708,6 +784,12 @@ onMounted(() => { .small-card .card-tag-wrapper { margin-top: 8px; + display: flex; + justify-content: center; +} + +.small-card-item .card-tag-wrapper { + margin-top: 8px; } .card-tag { background-color: #fff;