@@ -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;