@@ -32,89 +32,70 @@
重置
< / el-button >
< / el-col >
<!-- 第二行 : 地区筛选 -- >
<!-- < el-col :xs = "24" :sm = "12" :md = "8" :lg = "6" > -- >
<!-- < el-select-- >
<!-- v - model = "searchForm.city" -- >
<!-- placeholder = "选择城市" -- >
<!-- clearable -- >
<!-- style = "width: 100%" -- >
<!-- @ change = "onCityChange" -- >
<!-- > -- >
<!-- < el-option label = "全部" value = "" / > -- >
<!-- < el-option-- >
<!-- v - for = "city in availableCities" -- >
<!-- : key = "city" -- >
<!-- : label = "city" -- >
<!-- : value = "city" -- >
<!-- / > - - >
<!-- < / el-select > -- >
<!-- < / el-col > -- >
<!-- < el-col :xs = "24" :sm = "12" :md = "8" :lg = "6" > -- >
<!-- < el-select-- >
<!-- v - model = "searchForm.district" -- >
<!-- placeholder = "选择地区" -- >
<!-- clearable -- >
<!-- style = "width: 100%" -- >
<!-- : disabled = "!searchForm.city" -- >
<!-- > -- >
<!-- < el-option label = "全部" value = "" / > -- >
<!-- < el-option-- >
<!-- v - for = "district in searchDistricts" -- >
<!-- : key = "district.id" -- >
<!-- : label = "district.district_name" -- >
<!-- : value = "district.id" -- >
<!-- / > - - >
<!-- < / el-select > -- >
<!-- < / el-col > -- >
< / el-row >
< / el-card >
<!-- 统计信息 -- >
< el-row :gutter = "20" class = "stats-section" >
< el-col :xs = "24" :sm = "12" :md = "6" >
< el-card class = "stats-card" shadow = "never" >
< el-card class = "stats-card" >
< div class = "stat-content" >
< div class = "stat-value " > { { stats . total _users } } < / div >
< div class = "stat-label" > 下级用户总数 < / div >
< div class = "stats-icon " >
< el-icon color = "#409EFF" >
< User / >
< / el-icon >
< / div >
< div class = "stats-info" >
< div class = "stat-value" > { { stats . total _users } } < / div >
< div class = "stat-label" > 下级用户总数 < / div >
< / div >
< / div >
<!-- < el-icon class = "stat-icon" color = "#409EFF" > -- >
<!-- < User / > -- >
<!-- < / el-icon > -- >
< / el-card >
< / el-col >
< el-col :xs = "24" :sm = "12" :md = "6" >
< el-card class = "stats-card" shadow = "never" >
< div class = "stat-content" >
< div class = "stat-value" > { { stats . active _users } } < / div >
< div class = "stat-label" > 活跃用户 < / div >
< div class = "stats-icon" >
< el-icon class = "stat-icon" color = "#67C23A" >
< UserFilled / >
< / el-icon >
< / div >
< div class = "stats-info" >
< div class = "stat-value" > { { stats . active _users } } < / div >
< div class = "stat-label" > 活跃用户 < / div >
< / div >
< / div >
<!-- < el-icon class = "stat-icon" color = "#67C23A" > -- >
<!-- < UserFilled / > -- >
<!-- < / el-icon > -- >
< / el-card >
< / el-col >
< el-col :xs = "24" :sm = "12" :md = "6" >
< el-card class = "stats-card" shadow = "never" >
< div class = "stat-content" >
< div class = "stat-value" > ¥ { { formatBalance ( stats . total _balance ) } } < / div >
< div class = "stat-label" > 用户总余额 < / div >
< div class = "stats-icon" >
< el-icon class = "stat-icon" color = "#E6A23C" >
< Money / >
< / el-icon >
< / div >
< div class = "stats-info" >
< div class = "stat-value" > ¥ { { formatBalance ( stats . total _balance ) } } < / div >
< div class = "stat-label" > 用户总余额 < / div >
< / div >
< / div >
<!-- < el-icon class = "stat-icon" color = "#E6A23C" > -- >
<!-- < Money / > -- >
<!-- < / el-icon > -- >
< / el-card >
< / el-col >
< el-col :xs = "24" :sm = "12" :md = "6" >
< el-card class = "stats-card" shadow = "never" >
< div class = "stat-content" >
< div class = "stat-value" > { { stats . today _new _users } } < / div >
< div class = "stat-label" > 今日新增 < / div >
< div class = "stats-icon" >
< el-icon class = "stat-icon" color = "#F56C6C" >
< Top / >
< / el-icon >
< / div >
< div class = "stats-info" >
< div class = "stat-value" > { { stats . today _new _users } } < / div >
< div class = "stat-label" > 今日新增 < / div >
< / div >
< / div >
<!-- < el-icon class = "stat-icon" color = "#F56C6C" > -- >
<!-- < Plus / > -- >
<!-- < / el-icon > -- >
< / el-card >
< / el-col >
< / el-row >
@@ -244,7 +225,7 @@ import {ElMessage, ElMessageBox} from 'element-plus'
import { Search , Refresh , User , UserFilled , Money , Plus , Download } from '@element-plus/icons-vue'
import api from '@/utils/api'
import { getImageUrl } from "@/utils/config" ;
import { maskPhoneNumber , convertToDateOnly } from "@/utils/public_method"
import { maskPhoneNumber , convertToDateOnly } from "@/utils/public_method"
// 响应式数据
const loading = ref ( false )
@@ -477,18 +458,28 @@ onMounted(() => {
margin - bottom : 20 px ;
}
. stat - card {
position : relative ;
overflow : hidden ;
. stats - card {
height : 100 px ;
}
. stat - content {
position : relative ;
z - index : 2 ;
display : flex ;
align - items : center ;
height : 100 % ;
}
. stats - icon {
font - size : 32 px ;
margin - right : 16 px ;
}
. stats - info {
flex : 1 ;
}
. stat - value {
font - size : 28 px ;
font - size : 24 px ;
font - weight : 600 ;
color : # 303133 ;
margin - bottom : 4 px ;
@@ -499,31 +490,10 @@ onMounted(() => {
color : # 909399 ;
}
. stat - icon {
position : absolute ;
right : 16 px ;
top : 50 % ;
transform : translateY ( - 50 % ) ;
font - size : 32 px ;
opacity : 0.1 ;
}
. table - card {
margin - bottom : 20 px ;
}
. card - header {
display : flex ;
justify - content : space - between ;
align - items : center ;
}
. card - title {
font - size : 16 px ;
font - weight : 600 ;
color : # 303133 ;
}
. user - info {
display : flex ;
flex - direction : column ;