From 5ce6d005edda1bb3eedbbba8491c191f2183ab2f Mon Sep 17 00:00:00 2001
From: Sun_sun <469361609@qq.com>
Date: Wed, 10 Sep 2025 14:55:04 +0800
Subject: [PATCH] =?UTF-8?q?2025-09-10=20[=E4=BF=AE=E6=94=B9]=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Users.vue | 140 +++++++++++++++++---------------------------
 1 file changed, 55 insertions(+), 85 deletions(-)

diff --git a/src/views/Users.vue b/src/views/Users.vue
index 8797b4b..48135b0 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -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;