2025-09-10

[修改]用户管理icon
This commit is contained in:
2025-09-10 14:55:04 +08:00
parent aa2de05831
commit 5ce6d005ed

View File

@@ -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: 20px;
}
.stat-card {
position: relative;
overflow: hidden;
.stats-card {
height: 100px;
}
.stat-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
height: 100%;
}
.stats-icon {
font-size: 32px;
margin-right: 16px;
}
.stats-info {
flex: 1;
}
.stat-value {
font-size: 28px;
font-size: 24px;
font-weight: 600;
color: #303133;
margin-bottom: 4px;
@@ -499,31 +490,10 @@ onMounted(() => {
color: #909399;
}
.stat-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 32px;
opacity: 0.1;
}
.table-card {
margin-bottom: 20px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.user-info {
display: flex;
flex-direction: column;