From 844ae2b7c1eba09053d9c17439a637516f9b6d80 Mon Sep 17 00:00:00 2001
From: “wangming” <“wangming@antissoft.com”>
Date: Mon, 5 Jan 2026 17:55:16 +0800
Subject: [PATCH] 优化个人中心页面：调整用户信息展示样式、个人服务区域布局和间距

---
 绿纤uni-app/pages/me/me.vue | 1573 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 1 file changed, 847 insertions(+), 726 deletions(-)

diff --git a/绿纤uni-app/pages/me/me.vue b/绿纤uni-app/pages/me/me.vue
index 602a59d..80a7010 100644
--- a/绿纤uni-app/pages/me/me.vue
+++ b/绿纤uni-app/pages/me/me.vue
@@ -1,36 +1,33 @@
 <template>
 	<view class="page">
 		<!-- 自定义导航栏 -->
-		<custom-navbar 
-			title="个人中心" 
-			:show-background="true"
-			background-image="https://zhgw.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/bg.png"
-			@height-change="handleNavbarHeightChange"
-		></custom-navbar>
-
-		<view class="main">
-			<!-- 用户信息卡片 - 结合my.vue样式和me copy.vue功能 -->
-			<view class="user-card">
-				<view class="user-card-bg"></view>
+		<custom-navbar title="个人中心" :show-background="false" @height-change="handleNavbarHeightChange"></custom-navbar>
+
+		<view class="warpbox">
+			<view :style="{ 'height': contentTopMargin }"></view>
+
+			<!-- 用户信息卡片 -->
+			<view class="warpboxss user-card">
 				<view class="user-card-content">
 					<view class="user-main">
 						<view class="avatar-container">
-							<view class="avatar-ring"></view>
-							<image class="avatar" :src="newuserInfo.avatar || '/static/head.png'" mode="aspectFill"></image>
+							<image class="avatar" :src="newuserInfo.avatar || '/static/head.png'" mode="aspectFill">
+							</image>
 						</view>
 						<view class="user-info-wrapper">
 							<view class="user-name">{{ newuserInfo.realName || newuserInfo.userName || '用户' }}</view>
 							<view class="user-meta">
-								<view class="role-badge">
-									<text>{{ newuserInfo.gw || '员工' }}</text>
-								</view>
-								<view class="store-badge">
+								<view class="user-badge user-badge-store">
 									<u-icon name="home" size="20" color="#409EFF"></u-icon>
-									<text>{{ jsjinfo.storeName || '暂无' }}</text>
+									<text class="user-badge-text">{{ jsjinfo.storeName || '暂无' }}</text>
 								</view>
-								<view class="store-badge jsj-badge">
+								<view class="user-badge user-badge-role">
+									<u-icon name="account" size="20" color="#43a047"></u-icon>
+									<text class="user-badge-text">{{ newuserInfo.gw || '员工' }}</text>
+								</view>
+								<view v-if="jsjinfo.jsjName" class="user-badge user-badge-jsj">
 									<u-icon name="star" size="20" color="#ff9800"></u-icon>
-									<text>{{ jsjinfo.jsjName || '暂无' }}</text>
+									<text class="user-badge-text">{{ jsjinfo.jsjName || '暂无' }}</text>
 								</view>
 							</view>
 						</view>
@@ -38,72 +35,94 @@
 				</view>
 			</view>
 
-			<!-- 统计数据区域 - 来自me copy.vue -->
-			<view class="stats-section">
-				<view class="stats-container">
-					<view v-if="iskjb" class="stat-item" @click="goToPage('/pages/expansion-list/expansion-list')">
-						<view class="stat-icon icon-circle-bg-1">
+			<!-- KPI卡片区域 -->
+			<view class="kpi-section">
+				<view class="kpi-card kpi-card-1">
+					<view class="kpi-title">本月总业绩</view>
+					<view class="kpi-value">¥{{ (performanceData.BillingAmount || 0).toFixed(2) }}</view>
+				</view>
+				<view class="kpi-card kpi-card-2">
+					<view class="kpi-title">本月订单数</view>
+					<view class="kpi-value">{{ summaryData.hkCount || 0 }}单</view>
+				</view>
+			</view>
+
+			<!-- 四个小数据卡片 -->
+			<view class="warpboxss small-stats-section">
+				<view class="small-stats-container">
+					<view v-if="iskjb" class="small-stat-item"
+						@click="goToPage('/pages/expansion-list/expansion-list')">
+						<view class="small-stat-icon icon-circle-bg-1">
 							<image src="/static/home/expansion.png" mode="heightFix"></image>
 						</view>
-						<view class="stat-info">
-							<view class="stat-num">{{ summaryData.expansionCount || 0 }}</view>
-							<view class="stat-name">拓客数</view>
-						</view>
+						<view class="small-stat-num">{{ summaryData.expansionCount || 0 }}</view>
+						<view class="small-stat-name">拓客数</view>
 					</view>
-					<view v-if="iskjb" class="stat-item" @click="goToPage('/pages/user-invite-list/user-invite-list')">
-						<view class="stat-icon icon-circle-bg-2">
+					<view v-if="iskjb" class="small-stat-item"
+						@click="goToPage('/pages/user-invite-list/user-invite-list')">
+						<view class="small-stat-icon icon-circle-bg-2">
 							<image src="/static/home/member.png" mode="heightFix"></image>
 						</view>
-						<view class="stat-info">
-							<view class="stat-num">{{ summaryData.inviteCount || 0 }}</view>
-							<view class="stat-name">邀约数</view>
-						</view>
+						<view class="small-stat-num">{{ summaryData.inviteCount || 0 }}</view>
+						<view class="small-stat-name">邀约数</view>
 					</view>
-					<view v-if="iskjb" class="stat-item" @click="goToPage('/pages/user-appointment-list/user-appointment-list')">
-						<view class="stat-icon icon-circle-bg-3">
+					<view v-if="iskjb" class="small-stat-item"
+						@click="goToPage('/pages/user-appointment-list/user-appointment-list')">
+						<view class="small-stat-icon icon-circle-bg-3">
 							<image src="/static/home/member.png" mode="heightFix"></image>
 						</view>
-						<view class="stat-info">
-							<view class="stat-num">{{ summaryData.appointmentCount || 0 }}</view>
-							<view class="stat-name">预约数</view>
-						</view>
+						<view class="small-stat-num">{{ summaryData.appointmentCount || 0 }}</view>
+						<view class="small-stat-name">预约数</view>
 					</view>
-					<view class="stat-item" @click="goToPage('/pages/lx-list/lx-list')">
-						<view class="stat-icon icon-circle-bg-4">
-							<image src="/static/home/order.png" mode="heightFix"></image>
-						</view>
-						<view class="stat-info">
-							<view class="stat-num">{{ summaryData.hkCount || 0 }}</view>
-							<view class="stat-name">开单数</view>
+					<view class="small-stat-item" @click="goToPage('/pages/refund-list/refund-list')">
+						<view class="small-stat-icon icon-circle-bg-4">
+							<image src="/static/home/refund-card.png" mode="heightFix"></image>
 						</view>
+						<view class="small-stat-num">{{ summaryData.refundCount || 0 }}</view>
+						<view class="small-stat-name">退卡数</view>
 					</view>
-					<view class="stat-item" @click="goToPage('/pages/consume-list/consume-list')">
-						<view class="stat-icon icon-circle-bg-5">
-							<image src="/static/home/consume-card.png" mode="heightFix"></image>
+				</view>
+			</view>
+
+			<!-- 今日数据和耗卡数据卡片 -->
+			<view class="data-section">
+				<view class="data-card">
+					<view class="data-card-title">今日数据</view>
+					<view class="data-card-content">
+						<view class="data-item">
+							<view class="data-label">今日:</view>
+							<view class="data-value">{{ todayData.today || 0 }}</view>
 						</view>
-						<view class="stat-info">
-							<view class="stat-num">{{ summaryData.consumeCount || 0 }}</view>
-							<view class="stat-name">耗卡数</view>
+						<view class="data-item">
+							<view class="data-label">本月:</view>
+							<view class="data-value">{{ todayData.month || 0 }}</view>
 						</view>
 					</view>
-					<view class="stat-item" @click="goToPage('/pages/refund-list/refund-list')">
-						<view class="stat-icon icon-circle-bg-6">
-							<image src="/static/home/refund-card.png" mode="heightFix"></image>
+				</view>
+				<view class="data-card">
+					<view class="data-card-title">耗卡数据</view>
+					<view class="data-card-content">
+						<view class="data-item">
+							<view class="data-label">今日:</view>
+							<view class="data-value">{{ consumeData.today || 0 }}</view>
 						</view>
-						<view class="stat-info">
-							<view class="stat-num">{{ summaryData.refundCount || 0 }}</view>
-							<view class="stat-name">退卡数</view>
+						<view class="data-item">
+							<view class="data-label">本月:</view>
+							<view class="data-value">{{ consumeData.month || 0 }}</view>
 						</view>
 					</view>
 				</view>
 			</view>
 
-			<!-- 账户设置区域 - 来自me copy.vue -->
-			<view class="settings-section">
-				<view class="settings-card">
+			<!-- 个人服务区域 -->
+			<view class="warpboxss settings-section">
+				<view class="warpboxs-small-title">
+					<view><text class="warpboxs-small-title-line"></text>个人服务</view>
+				</view>
+				<view class="settings-list">
 					<view class="settings-item" @click="showChangePasswordDialog">
 						<view class="settings-left">
-							<view class="settings-icon-wrapper" >
+							<view class="settings-icon-wrapper">
 								<image src="/static/icon1.png" mode="aspectFit"></image>
 							</view>
 							<text class="settings-text">修改密码</text>
@@ -112,7 +131,7 @@
 					</view>
 					<view class="settings-item" @click="handleLogout">
 						<view class="settings-left">
-							<view class="settings-icon-wrapper" >
+							<view class="settings-icon-wrapper">
 								<image src="/static/icon2.png" mode="aspectFit"></image>
 							</view>
 							<text class="settings-text">退出登录</text>
@@ -121,42 +140,29 @@
 					</view>
 				</view>
 			</view>
+
+			<view style="height: 140rpx;"></view>
 		</view>
 
-		<!-- 修改密码弹窗 - 来自me copy.vue -->
+		<!-- 修改密码弹窗 -->
 		<u-popup :show="showPasswordDialog" @close="cancelChangePassword" mode="center" border-radius="20">
 			<view class="password-dialog">
 				<view class="dialog-title">修改密码</view>
 				<view class="dialog-content">
 					<view class="form-item">
 						<text class="form-label">原密码</text>
-						<input 
-							class="form-input" 
-							type="password" 
-							placeholder="请输入原密码" 
-							v-model="passwordForm.oldPassword"
-							:password="true"
-						/>
+						<input class="form-input" type="password" placeholder="请输入原密码"
+							v-model="passwordForm.oldPassword" :password="true" />
 					</view>
 					<view class="form-item">
 						<text class="form-label">新密码</text>
-						<input 
-							class="form-input" 
-							type="password" 
-							placeholder="请输入新密码" 
-							v-model="passwordForm.newPassword"
-							:password="true"
-						/>
+						<input class="form-input" type="password" placeholder="请输入新密码"
+							v-model="passwordForm.newPassword" :password="true" />
 					</view>
 					<view class="form-item">
 						<text class="form-label">确认密码</text>
-						<input 
-							class="form-input" 
-							type="password" 
-							placeholder="请再次输入新密码" 
-							v-model="passwordForm.confirmPassword"
-							:password="true"
-						/>
+						<input class="form-input" type="password" placeholder="请再次输入新密码"
+							v-model="passwordForm.confirmPassword" :password="true" />
 					</view>
 				</view>
 				<view class="dialog-footer">
@@ -165,441 +171,564 @@
 				</view>
 			</view>
 		</u-popup>
-		
+
 		<!-- 自定义 tabBar -->
 		<custom-tab-bar />
 	</view>
 </template>
 
 <script>
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex'
-	import memberApi from '@/apis/modules/member.js'
-	import oauthApi from '@/apis/modules/oauth.js'
-	import CustomTabBar from '@/components/custom-tab-bar/index.vue'
-	import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'
-	
-	export default {
-		components: {
-			CustomTabBar,
-			CustomNavbar
-		},
-		data() {
-			return {
-				navbarHeightRpx: 0, // 导航栏高度（rpx）
-				scrollTop: 0,
-				userInfo: {},
-				newuserInfo: {},
-				jsjinfo: {
-					storeName:'',
-					jsjName:''
-				},
-				summaryData: {
-					appointmentCount: 0,
-					inviteCount: 0,
-					expansionCount: 0,
-					hkCount: 0,
-					consumeCount: 0,
-					refundCount: 0
-				},
-				showPasswordDialog: false,
-				passwordForm: {
-					oldPassword: '',
-					newPassword: '',
-					confirmPassword: ''
-				}
+import {
+	mapState,
+	mapMutations
+} from 'vuex'
+import memberApi from '@/apis/modules/member.js'
+import oauthApi from '@/apis/modules/oauth.js'
+import performanceApi from '@/apis/modules/performance.js'
+import CustomTabBar from '@/components/custom-tab-bar/index.vue'
+import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'
+
+export default {
+	components: {
+		CustomTabBar,
+		CustomNavbar
+	},
+	data() {
+		return {
+			navbarHeightRpx: 0,
+			scrollTop: 0,
+			userInfo: {},
+			newuserInfo: {},
+			jsjinfo: {
+				storeName: '',
+				jsjName: ''
+			},
+			summaryData: {
+				appointmentCount: 0,
+				inviteCount: 0,
+				expansionCount: 0,
+				hkCount: 0,
+				consumeCount: 0,
+				refundCount: 0
+			},
+			performanceData: {
+				BillingAmount: 0,
+				OrderCount: 0
+			},
+			todayData: {
+				today: 0,
+				month: 0
+			},
+			consumeData: {
+				today: 0,
+				month: 0
+			},
+			showPasswordDialog: false,
+			passwordForm: {
+				oldPassword: '',
+				newPassword: '',
+				confirmPassword: ''
 			}
-		},
+		}
+	},
 
-		computed: {
-			iskjb() {
-				if (this.newuserInfo.gw == '科技老师') {
-					return false
-				}
-				return true
-			},
-			// 主内容区域顶部间距
-			mainMarginTop() {
-				if (this.navbarHeightRpx > 0) {
-					// 小程序：导航栏高度 + 背景图高度 + 额外间距
-					return (this.navbarHeightRpx + 290 + 40) + 'rpx'
-				}
-				// H5/APP：固定间距（背景图高度 + 导航栏高度）
-				return '370rpx'
+	computed: {
+		iskjb() {
+			if (this.newuserInfo.gw == '科技老师') {
+				return false
 			}
+			return true
 		},
+		contentTopMargin() {
+			const info = uni.getSystemInfoSync()
+			const pxToRpx = 750 / info.windowWidth
+			const safeSpacingPx = 20
+			const safeSpacingRpx = Math.ceil(safeSpacingPx * pxToRpx)
+			if (this.navbarHeightRpx > 0) {
+				return (this.navbarHeightRpx + safeSpacingRpx) + 'rpx'
+			}
+			return (100 + safeSpacingRpx) + 'rpx'
+		}
+	},
 
-		async onLoad() {
-			this.checkLoginStatus()
-			await this.init()
-		},
+	async onLoad() {
+		this.checkLoginStatus()
+		await this.init()
+	},
 
-		async onShow() {
-			// 页面显示时刷新数据
-			if (this.userInfo && this.userInfo.userId) {
-				await this.init()
-			}
-		},
+	async onShow() {
+		if (this.userInfo && this.userInfo.userId) {
+			await this.init()
+		}
+	},
 
-		onPageScroll(e) {
-			this.scrollTop = e.scrollTop;
-		},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
 
-		methods: {
-			// 初始化
-			async init() {
-				if (!this.userInfo || !this.userInfo.userId) {
-					return
-				}
+	methods: {
+		// 初始化
+		async init() {
+			if (!this.userInfo || !this.userInfo.userId) {
+				return
+			}
 
-				// 获取用户信息
-				this.API.getUsers(this.userInfo.userId).then(res => {
-					if (res.code === 200) {
-						this.newuserInfo = res.data
-						if (this.newuserInfo.enabledMark != '1') {
-							uni.showToast({
-								title: '您的账号已被禁用',
-								icon: 'none'
-							})
-							// 清除本地存储
-							uni.clearStorageSync()
-							// 跳转到登录页
-							setTimeout(() => {
-								uni.reLaunch({
-									url: '/pages/login/login'
-								})
-							}, 1500)
-						} else {
-							let formattedDate = this.utils.gettime()
-							memberApi.getJsjInfoByUserMonth(this.userInfo.userId, formattedDate).then((resjsj) => {
-								if (resjsj.code == 200) {
-									this.jsjinfo = resjsj.data
-								}
+			// 获取用户信息
+			this.API.getUsers(this.userInfo.userId).then(res => {
+				if (res.code === 200) {
+					this.newuserInfo = res.data
+					if (this.newuserInfo.enabledMark != '1') {
+						uni.showToast({
+							title: '您的账号已被禁用',
+							icon: 'none'
+						})
+						uni.clearStorageSync()
+						setTimeout(() => {
+							uni.reLaunch({
+								url: '/pages/login/login'
 							})
-							uni.setStorageSync('newuserInfo', this.newuserInfo)
-							this.getSummaryData()
-						}
+						}, 1500)
+					} else {
+						let formattedDate = this.utils.gettime()
+						memberApi.getJsjInfoByUserMonth(this.userInfo.userId, formattedDate).then((resjsj) => {
+							if (resjsj.code == 200) {
+								this.jsjinfo = resjsj.data
+							}
+						})
+						uni.setStorageSync('newuserInfo', this.newuserInfo)
+						this.getSummaryData()
+						this.getPerformanceData()
+						this.getTodayAndConsumeData()
 					}
-				})
-			},
+				}
+			})
+		},
 
-			// 处理导航栏高度变化
-			handleNavbarHeightChange(heightInfo) {
-				this.navbarHeightRpx = heightInfo.rpx || 0
-			},
+		// 处理导航栏高度变化
+		handleNavbarHeightChange(heightInfo) {
+			this.navbarHeightRpx = heightInfo.rpx || 0
+		},
 
-			// 检查登录状态
-			checkLoginStatus() {
-				const token = uni.getStorageSync('token')
+		// 检查登录状态
+		checkLoginStatus() {
+			const token = uni.getStorageSync('token')
 
-				if (!token) {
-					uni.reLaunch({
-						url: '/pages/login/login'
-					})
-					return
-				} else {
-					this.userInfo = uni.getStorageSync('userInfo')
-					this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
-				}
-			},
+			if (!token) {
+				uni.reLaunch({
+					url: '/pages/login/login'
+				})
+				return
+			} else {
+				this.userInfo = uni.getStorageSync('userInfo')
+				this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
+			}
+		},
 
-			// 获取统计数据
-			async getSummaryData() {
-				try {
-					const currentMonthRange = this.utils.getCurrentMonthRange()
-					if (this.iskjb) {
-						let yyinfo = {
-							pageSize: 1,
-							currentPage: 1,
-							yysj: `${currentMonthRange[0]},${currentMonthRange[1]}`
-						}
-						let yayinfo = {
-							pageSize: 1,
-							yysj: `${currentMonthRange[0]},${currentMonthRange[1]}`
-						}
-						let tkinfo = {
-							pageSize: 1,
-							expansionTime: `${currentMonthRange[0]},${currentMonthRange[1]}`
-						}
-						if (this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
-							yyinfo.djmd = this.newuserInfo.mdid || '暂无'
-							yayinfo.storeId = this.newuserInfo.mdid || '暂无'
-							tkinfo.storeId = this.newuserInfo.mdid || '暂无'
-						} else {
-							yyinfo.yyr = this.userInfo.userId
-							yayinfo.yyr = this.userInfo.userId
-							tkinfo.expansionUserId = this.userInfo.userId
-						}
-						// 获取预约数
-						const appointmentRes = await this.API.getAppointmentList(yyinfo)
-
-						if (appointmentRes.code === 200) {
-							this.summaryData.appointmentCount = appointmentRes.data.pagination?.total || 0
-						}
-
-						// 获取邀请数
-						const inviteRes = await this.API.getInviteList(yayinfo)
-
-						if (inviteRes.code === 200) {
-							this.summaryData.inviteCount = inviteRes.data.pagination?.total || 0
-						}
-
-						// 获取拓客数
-						const expansionRes = await this.API.getExpansionList(tkinfo)
-
-						if (expansionRes.code === 200) {
-							this.summaryData.expansionCount = expansionRes.data.pagination?.total || 0
-						}
-					}
-					let kainfo = {
+		// 获取统计数据
+		async getSummaryData() {
+			try {
+				const currentMonthRange = this.utils.getCurrentMonthRange()
+				if (this.iskjb) {
+					let yyinfo = {
 						pageSize: 1,
-						kdrq: `${currentMonthRange[0]},${currentMonthRange[1]}`
+						currentPage: 1,
+						yysj: `${currentMonthRange[0]},${currentMonthRange[1]}`
 					}
-					let hkinfo = {
+					let yayinfo = {
 						pageSize: 1,
-						hksj: `${currentMonthRange[0]},${currentMonthRange[1]}`
+						yysj: `${currentMonthRange[0]},${currentMonthRange[1]}`
 					}
-					let tkinfonew = {
+					let tkinfo = {
 						pageSize: 1,
-						tksj: `${currentMonthRange[0]},${currentMonthRange[1]}`
+						expansionTime: `${currentMonthRange[0]},${currentMonthRange[1]}`
 					}
-					if (this.newuserInfo.gw == '科技老师') {
-						kainfo.kjblsId = this.userInfo.userId
-						hkinfo.kjblsId = this.userInfo.userId
-						tkinfonew.kjblsId = this.userInfo.userId
-					} else if (this.newuserInfo.gw == '健康师') {
-						kainfo.jksId = this.userInfo.userId
-						hkinfo.jksId = this.userInfo.userId
-						tkinfonew.jksId = this.userInfo.userId
-					} else if (this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
-						kainfo.djmd = this.newuserInfo.mdid || '暂无'
-						hkinfo.md = this.newuserInfo.mdid || '暂无'
-						tkinfonew.md = this.newuserInfo.mdid || '暂无'
+					if (this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
+						yyinfo.djmd = this.newuserInfo.mdid || '暂无'
+						yayinfo.storeId = this.newuserInfo.mdid || '暂无'
+						tkinfo.storeId = this.newuserInfo.mdid || '暂无'
 					} else {
-						kainfo.CreateUser = this.userInfo.userId
-						hkinfo.czry = this.userInfo.userId
-						tkinfonew.czry = this.userInfo.userId
+						yyinfo.yyr = this.userInfo.userId
+						yayinfo.yyr = this.userInfo.userId
+						tkinfo.expansionUserId = this.userInfo.userId
 					}
-					// 获取开单数（本月）
-					const hkRes = await this.API.getLxList(kainfo)
-
-					if (hkRes.code === 200) {
-						this.summaryData.hkCount = hkRes.data.pagination?.total || 0
+					// 获取预约数
+					const appointmentRes = await this.API.getAppointmentList(yyinfo)
+					if (appointmentRes.code === 200) {
+						this.summaryData.appointmentCount = appointmentRes.data.pagination?.total || 0
 					}
-					// 获取耗卡数
-
-					const consumeRes = await this.API.getConsumeList(hkinfo)
-
-					if (consumeRes.code === 200) {
-						this.summaryData.consumeCount = consumeRes.data.pagination?.total || 0
+					// 获取邀请数
+					const inviteRes = await this.API.getInviteList(yayinfo)
+					if (inviteRes.code === 200) {
+						this.summaryData.inviteCount = inviteRes.data.pagination?.total || 0
 					}
-					// 获取退卡数
+					// 获取拓客数
+					const expansionRes = await this.API.getExpansionList(tkinfo)
+					if (expansionRes.code === 200) {
+						this.summaryData.expansionCount = expansionRes.data.pagination?.total || 0
+					}
+				}
+				let kainfo = {
+					pageSize: 1,
+					kdrq: `${currentMonthRange[0]},${currentMonthRange[1]}`
+				}
+				let hkinfo = {
+					pageSize: 1,
+					hksj: `${currentMonthRange[0]},${currentMonthRange[1]}`
+				}
+				let tkinfonew = {
+					pageSize: 1,
+					tksj: `${currentMonthRange[0]},${currentMonthRange[1]}`
+				}
+				if (this.newuserInfo.gw == '科技老师') {
+					kainfo.kjblsId = this.userInfo.userId
+					hkinfo.kjblsId = this.userInfo.userId
+					tkinfonew.kjblsId = this.userInfo.userId
+				} else if (this.newuserInfo.gw == '健康师') {
+					kainfo.jksId = this.userInfo.userId
+					hkinfo.jksId = this.userInfo.userId
+					tkinfonew.jksId = this.userInfo.userId
+				} else if (this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
+					kainfo.djmd = this.newuserInfo.mdid || '暂无'
+					hkinfo.md = this.newuserInfo.mdid || '暂无'
+					tkinfonew.md = this.newuserInfo.mdid || '暂无'
+				} else {
+					kainfo.CreateUser = this.userInfo.userId
+					hkinfo.czry = this.userInfo.userId
+					tkinfonew.czry = this.userInfo.userId
+				}
+				// 获取开单数（本月）
+				const hkRes = await this.API.getLxList(kainfo)
+				if (hkRes.code === 200) {
+					this.summaryData.hkCount = hkRes.data.pagination?.total || 0
+				}
+				// 获取耗卡数
+				const consumeRes = await this.API.getConsumeList(hkinfo)
+				if (consumeRes.code === 200) {
+					this.summaryData.consumeCount = consumeRes.data.pagination?.total || 0
+				}
+				// 获取退卡数
+				const refundRes = await this.API.getRefundList(tkinfonew)
+				if (refundRes.code === 200) {
+					this.summaryData.refundCount = refundRes.data.pagination?.total || 0
+				}
 
-					const refundRes = await this.API.getRefundList(tkinfonew)
+			} catch (error) {
+				console.error('获取统计数据失败:', error)
+			}
+		},
 
-					if (refundRes.code === 200) {
-						this.summaryData.refundCount = refundRes.data.pagination?.total || 0
+		// 获取业绩数据
+		async getPerformanceData() {
+			try {
+				const statisticsMonth = this.getCurrentMonthStr()
+				const currentMonthRange = this.utils.getCurrentMonthRange()
+				if (this.newuserInfo.gw == '科技老师') {
+					const res = await performanceApi.GetTechTeacherStatistics({
+						teacherId: this.userInfo.userId,
+						startDate: this.formatDateToISO(currentMonthRange[0]),
+						endDate: this.formatDateToISO(currentMonthRange[1])
+					})
+					if (res.code === 200 && res.data) {
+						const data = res.data.length > 0 ? res.data[0] : {}
+						this.performanceData.BillingAmount = data.OrderAchievement || 0
+					}
+				} else {
+					const res = await performanceApi.getEmployeePerformanceStatistics({
+						userId: this.userInfo.userId,
+						statisticsMonth: statisticsMonth
+					})
+					if (res.code === 200 && res.data) {
+						this.performanceData.BillingAmount = res.data.BillingAmount || 0
 					}
-
-				} catch (error) {
-					console.error('获取统计数据失败:', error)
 				}
-			},
+			} catch (error) {
+				console.error('获取业绩数据失败:', error)
+			}
+		},
 
-			// 页面跳转
-			goToPage(url) {
-				uni.navigateTo({
-					url: url
-				})
-			},
+		// 获取今日和耗卡数据
+		async getTodayAndConsumeData() {
+			try {
+				const today = this.utils.gettime()
+				const currentMonthRange = this.utils.getCurrentMonthRange()
 
-			// 显示修改密码弹窗
-			showChangePasswordDialog() {
-				this.passwordForm = {
-					oldPassword: '',
-					newPassword: '',
-					confirmPassword: ''
+				// 今日数据（开单数）
+				let todayKainfo = {
+					pageSize: 1,
+					kdrq: `${today},${today}`
+				}
+				let monthKainfo = {
+					pageSize: 1,
+					kdrq: `${currentMonthRange[0]},${currentMonthRange[1]}`
 				}
-				this.showPasswordDialog = true
-			},
 
-			// 取消修改密码
-			cancelChangePassword() {
-				this.showPasswordDialog = false
-				this.passwordForm = {
-					oldPassword: '',
-					newPassword: '',
-					confirmPassword: ''
+				// 耗卡数据
+				let todayHkinfo = {
+					pageSize: 1,
+					hksj: `${today},${today}`
+				}
+				let monthHkinfo = {
+					pageSize: 1,
+					hksj: `${currentMonthRange[0]},${currentMonthRange[1]}`
 				}
-			},
 
-			// 确认修改密码
-			confirmChangePassword() {
-				// 验证输入
-				if (!this.passwordForm.oldPassword) {
-					uni.showToast({
-						title: '请输入原密码',
-						icon: 'none'
-					})
-					return
+				// 根据角色设置筛选条件
+				if (this.newuserInfo.gw == '科技老师') {
+					todayKainfo.kjblsId = this.userInfo.userId
+					monthKainfo.kjblsId = this.userInfo.userId
+					todayHkinfo.kjblsId = this.userInfo.userId
+					monthHkinfo.kjblsId = this.userInfo.userId
+				} else if (this.newuserInfo.gw == '健康师') {
+					todayKainfo.jksId = this.userInfo.userId
+					monthKainfo.jksId = this.userInfo.userId
+					todayHkinfo.jksId = this.userInfo.userId
+					monthHkinfo.jksId = this.userInfo.userId
+				} else if (this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
+					todayKainfo.djmd = this.newuserInfo.mdid || '暂无'
+					monthKainfo.djmd = this.newuserInfo.mdid || '暂无'
+					todayHkinfo.md = this.newuserInfo.mdid || '暂无'
+					monthHkinfo.md = this.newuserInfo.mdid || '暂无'
+				} else {
+					todayKainfo.CreateUser = this.userInfo.userId
+					monthKainfo.CreateUser = this.userInfo.userId
+					todayHkinfo.czry = this.userInfo.userId
+					monthHkinfo.czry = this.userInfo.userId
 				}
 
-				if (!this.passwordForm.newPassword) {
-					uni.showToast({
-						title: '请输入新密码',
-						icon: 'none'
-					})
-					return
+				// 获取今日开单数
+				const todayKdRes = await this.API.getLxList(todayKainfo)
+				if (todayKdRes.code === 200) {
+					this.todayData.today = todayKdRes.data.pagination?.total || 0
 				}
 
-				if (this.passwordForm.newPassword.length < 6) {
-					uni.showToast({
-						title: '新密码长度不能少于6位',
-						icon: 'none'
-					})
-					return
+				// 获取本月开单数
+				const monthKdRes = await this.API.getLxList(monthKainfo)
+				if (monthKdRes.code === 200) {
+					this.todayData.month = monthKdRes.data.pagination?.total || 0
 				}
 
-				if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
-					uni.showToast({
-						title: '两次输入的新密码不一致',
-						icon: 'none'
-					})
-					return
+				// 获取今日耗卡数
+				const todayHkRes = await this.API.getConsumeList(todayHkinfo)
+				if (todayHkRes.code === 200) {
+					this.consumeData.today = todayHkRes.data.pagination?.total || 0
 				}
 
-				if (this.passwordForm.oldPassword === this.passwordForm.newPassword) {
-					uni.showToast({
-						title: '新密码不能与原密码相同',
-						icon: 'none'
-					})
-					return
+				// 获取本月耗卡数
+				const monthHkRes = await this.API.getConsumeList(monthHkinfo)
+				if (monthHkRes.code === 200) {
+					this.consumeData.month = monthHkRes.data.pagination?.total || 0
 				}
+			} catch (error) {
+				console.error('获取今日和耗卡数据失败:', error)
+			}
+		},
 
-				// 调用修改密码接口
-				this.changePassword()
-			},
+		// 获取当前月份字符串（格式：YYYYMM）
+		getCurrentMonthStr() {
+			const now = new Date()
+			return uni.$u.timeFormat(now, 'yyyymm')
+		},
 
-			// 修改密码
-			async changePassword() {
-				try {
-					uni.showLoading({
-						title: '修改中...'
-					})
+		// 格式化日期为 ISO 8601 格式（YYYY-MM-DDTHH:mm:ss）
+		formatDateToISO(timestamp) {
+			const date = new Date(timestamp)
+			return uni.$u.timeFormat(date, 'yyyy-mm-dd hh:MM:ss')
+		},
 
-					// 调用修改密码 API
-					const res = await oauthApi.changePassword({
-						userId: this.userInfo.userId,
-						oldPassword: this.passwordForm.oldPassword,
-						newPassword: this.passwordForm.newPassword
-					})
+		// 页面跳转
+		goToPage(url) {
+			uni.navigateTo({
+				url: url
+			})
+		},
 
-					uni.hideLoading()
+		// 显示修改密码弹窗
+		showChangePasswordDialog() {
+			this.passwordForm = {
+				oldPassword: '',
+				newPassword: '',
+				confirmPassword: ''
+			}
+			this.showPasswordDialog = true
+		},
 
-					if (res.code === 200) {
-						uni.showToast({
-							title: '密码修改成功',
-							icon: 'success'
-						})
-						this.showPasswordDialog = false
-						this.passwordForm = {
-							oldPassword: '',
-							newPassword: '',
-							confirmPassword: ''
-						}
-					} else {
-						uni.showToast({
-							title: res.msg || '密码修改失败',
-							icon: 'none'
-						})
+		// 取消修改密码
+		cancelChangePassword() {
+			this.showPasswordDialog = false
+			this.passwordForm = {
+				oldPassword: '',
+				newPassword: '',
+				confirmPassword: ''
+			}
+		},
+
+		// 确认修改密码
+		confirmChangePassword() {
+			if (!this.passwordForm.oldPassword) {
+				uni.showToast({
+					title: '请输入原密码',
+					icon: 'none'
+				})
+				return
+			}
+
+			if (!this.passwordForm.newPassword) {
+				uni.showToast({
+					title: '请输入新密码',
+					icon: 'none'
+				})
+				return
+			}
+
+			if (this.passwordForm.newPassword.length < 6) {
+				uni.showToast({
+					title: '新密码长度不能少于6位',
+					icon: 'none'
+				})
+				return
+			}
+
+			if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
+				uni.showToast({
+					title: '两次输入的新密码不一致',
+					icon: 'none'
+				})
+				return
+			}
+
+			if (this.passwordForm.oldPassword === this.passwordForm.newPassword) {
+				uni.showToast({
+					title: '新密码不能与原密码相同',
+					icon: 'none'
+				})
+				return
+			}
+
+			this.changePassword()
+		},
+
+		// 修改密码
+		async changePassword() {
+			try {
+				uni.showLoading({
+					title: '修改中...'
+				})
+
+				const res = await oauthApi.changePassword({
+					userId: this.userInfo.userId,
+					oldPassword: this.passwordForm.oldPassword,
+					newPassword: this.passwordForm.newPassword
+				})
+
+				uni.hideLoading()
+
+				if (res.code === 200) {
+					uni.showToast({
+						title: '密码修改成功',
+						icon: 'success'
+					})
+					this.showPasswordDialog = false
+					this.passwordForm = {
+						oldPassword: '',
+						newPassword: '',
+						confirmPassword: ''
 					}
-				} catch (error) {
-					uni.hideLoading()
-					console.error('修改密码失败:', error)
+				} else {
 					uni.showToast({
-						title: '修改密码失败，请稍后重试',
+						title: res.msg || '密码修改失败',
 						icon: 'none'
 					})
 				}
-			},
-
-			// 退出登录
-			handleLogout() {
-				uni.showModal({
-					title: '提示',
-					content: '确定要退出登录吗？',
-					success: (res) => {
-						if (res.confirm) {
-							this.API.logout().then(res => {
-								if (res.code == 200) {
-									// 清除本地存储
-									uni.clearStorageSync()
-									// 跳转到登录页
-									uni.reLaunch({
-										url: '/pages/login/login'
-									})
-								}
-							})
-						}
-					}
+			} catch (error) {
+				uni.hideLoading()
+				console.error('修改密码失败:', error)
+				uni.showToast({
+					title: '修改密码失败，请稍后重试',
+					icon: 'none'
 				})
 			}
+		},
+
+		// 退出登录
+		handleLogout() {
+			uni.showModal({
+				title: '提示',
+				content: '确定要退出登录吗？',
+				success: (res) => {
+					if (res.confirm) {
+						this.API.logout().then(res => {
+							if (res.code == 200) {
+								uni.clearStorageSync()
+								uni.reLaunch({
+									url: '/pages/login/login'
+								})
+							}
+						})
+					}
+				}
+			})
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.page {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		background-color: #f5f7fa;
-	}
-
-
-	.main {
-		position: relative;
-		z-index: 111;
-		padding: 0 40rpx;
-		top: 90rpx;
-		/* #ifdef  MP-WEIXIN */
-		top: 120rpx;
-		/* #endif */
-	
-	}
-
-	/* 用户信息卡片 - 结合my.vue和me copy.vue的设计 */
-	.user-card {
-		position: relative;
-		margin: 24rpx 0;
-		border-radius: 20rpx;
-		overflow: hidden;
-		animation: slideDown 0.4s ease-out;
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-		padding: 30rpx 0;
-		margin-bottom: 24rpx;
+.page {
+	position: relative;
+	width: 100%;
+	min-height: 100vh;
+	background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+	-webkit-overflow-scrolling: touch;
+	overscroll-behavior-y: auto;
+}
+
+.warpbox {
+	padding: 0 30rpx;
+	padding-bottom: 40rpx;
+}
+
+.warpboxss {
+	background-color: rgba(255, 255, 255, 0.4);
+	backdrop-filter: blur(16px) saturate(180%);
+	-webkit-backdrop-filter: blur(16px) saturate(180%);
+	padding: 30rpx;
+	border-radius: 24rpx;
+	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
+	border: 1px solid rgba(255, 255, 255, 0.125);
+	margin-bottom: 24rpx;
+}
+
+.warpboxs-small-title {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #1f2937;
+	margin-bottom: 24rpx;
+
+	view {
+		display: flex;
+		align-items: center;
 	}
 
-	.user-card-bg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		// background: linear-gradient(135deg, #e8f4f8 0%, #f0e8f5 50%, #f5f0e8 100%);
-		background: #fff;
+	.warpboxs-small-title-line {
+		display: inline-block;
+		width: 6rpx;
+		height: 28rpx;
+		background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%);
+		border-radius: 3rpx;
+		margin-right: 12rpx;
 	}
+}
 
+/* 用户信息卡片 */
+.user-card {
 	.user-card-content {
-		position: relative;
-		padding: 24rpx;
-		background: rgba(255, 255, 255, 0.6);
-		backdrop-filter: blur(10rpx);
-		-webkit-backdrop-filter: blur(10rpx);
+		padding: 0;
 	}
 
 	.user-main {
@@ -608,30 +737,46 @@
 	}
 
 	.avatar-container {
-		position: relative;
-		margin-right: 20rpx;
+		margin-right: 24rpx;
 		flex-shrink: 0;
+		position: relative;
+
+		.avatar {
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 60rpx;
+			border: 4rpx solid rgba(67, 160, 71, 0.2);
+			box-shadow: 0 4rpx 16rpx rgba(67, 160, 71, 0.2);
+			position: relative;
+			z-index: 1;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: -4rpx;
+			left: -4rpx;
+			right: -4rpx;
+			bottom: -4rpx;
+			border-radius: 50%;
+			background: linear-gradient(135deg, rgba(67, 160, 71, 0.3) 0%, rgba(102, 187, 106, 0.3) 100%);
+			z-index: 0;
+			animation: pulse 2s ease-in-out infinite;
+		}
 	}
 
-	.avatar-ring {
-		position: absolute;
-		top: -3rpx;
-		left: -3rpx;
-		width: 100rpx;
-		height: 100rpx;
-		border-radius: 50rpx;
-		border: 2rpx solid rgba(67, 160, 71, 0.3);
-		animation: rotate 3s linear infinite;
-	}
-
-	.avatar {
-		width: 94rpx;
-		height: 94rpx;
-		border-radius: 47rpx;
-		border: 2rpx solid rgba(255, 255, 255, 0.9);
-		position: relative;
-		z-index: 1;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+	@keyframes pulse {
+
+		0%,
+		100% {
+			opacity: 0.6;
+			transform: scale(1);
+		}
+
+		50% {
+			opacity: 0.8;
+			transform: scale(1.05);
+		}
 	}
 
 	.user-info-wrapper {
@@ -640,351 +785,327 @@
 	}
 
 	.user-name {
-		font-size: 32rpx;
+		font-size: 36rpx;
 		font-weight: 600;
 		color: #303133;
-		margin-bottom: 8rpx;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		margin-bottom: 20rpx;
 	}
 
 	.user-meta {
 		display: flex;
-		align-items: center;
 		flex-wrap: wrap;
-		gap: 8rpx;
-		margin-top: 8rpx;
+		gap: 12rpx;
 	}
 
-	.role-badge {
+	.user-badge {
 		display: inline-flex;
 		align-items: center;
-		background: rgba(67, 160, 71, 0.1);
-		border-radius: 12rpx;
-		padding: 6rpx 12rpx;
-		border: 1rpx solid rgba(67, 160, 71, 0.2);
-		font-size: 24rpx;
-		color: #43a047;
+		padding: 6rpx 16rpx;
+		border-radius: 16rpx;
+		font-size: 22rpx;
 		font-weight: 500;
-	}
+		backdrop-filter: blur(10rpx);
+		-webkit-backdrop-filter: blur(10rpx);
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+		transition: all 0.3s ease;
+		margin-left: 10rpx;
+
+		.user-badge-text {
+			margin-left: 6rpx;
+			max-width: 180rpx;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 
-	.role-badge text {
-		margin-left: 6rpx;
-	}
+		&.user-badge-store {
+			background: linear-gradient(135deg, rgba(64, 158, 255, 0.15) 0%, rgba(64, 158, 255, 0.25) 100%);
+			border: 1rpx solid rgba(64, 158, 255, 0.3);
+			color: #409EFF;
+		}
 
-	.store-badge {
-		display: inline-flex;
-		align-items: center;
-		background: rgba(64, 158, 255, 0.1);
-		border-radius: 12rpx;
-		padding: 6rpx 12rpx;
-		border: 1rpx solid rgba(64, 158, 255, 0.2);
-		font-size: 24rpx;
-		color: #409EFF;
-		font-weight: 500;
-		gap: 6rpx;
-	}
+		&.user-badge-role {
+			background: linear-gradient(135deg, rgba(67, 160, 71, 0.15) 0%, rgba(67, 160, 71, 0.25) 100%);
+			border: 1rpx solid rgba(67, 160, 71, 0.3);
+			color: #43a047;
+		}
 
-	.store-badge.jsj-badge {
-		background: rgba(255, 152, 0, 0.1);
-		border: 1rpx solid rgba(255, 152, 0, 0.2);
-		color: #ff9800;
+		&.user-badge-jsj {
+			background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 152, 0, 0.25) 100%);
+			border: 1rpx solid rgba(255, 152, 0, 0.3);
+			color: #ff9800;
+		}
+	}
+}
+
+/* KPI卡片区域 */
+.kpi-section {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 30rpx;
+	margin-bottom: 24rpx;
+}
+
+.kpi-card {
+	background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
+	border-radius: 24rpx;
+	padding: 40rpx 30rpx;
+	box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
+	position: relative;
+	overflow: hidden;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: -50%;
+		right: -50%;
+		width: 200%;
+		height: 200%;
+		background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
 	}
 
-	.store-badge text {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 120rpx;
+	.kpi-title {
+		font-size: 26rpx;
+		color: rgba(255, 255, 255, 0.9);
+		margin-bottom: 16rpx;
 	}
 
-	/* 统计数据区域 */
-	.stats-section {
-		margin: 24rpx 0;
-		animation: slideDown 0.5s ease-out;
+	.kpi-value {
+		font-size: 48rpx;
+		font-weight: 700;
+		color: #ffffff;
+		line-height: 1.2;
 	}
+}
+
+.kpi-card-2 {
+	background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
+}
 
-	.stats-container {
-		background: #ffffff;
-		border-radius: 20rpx;
-		padding: 18rpx;
-		border: 1rpx solid rgba(0, 0, 0, 0.06);
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+/* 四个小数据卡片 */
+.small-stats-section {
+	.small-stats-container {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 14rpx;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 20rpx;
 	}
 
-	.stat-item {
-		background: #fff;
-		border-radius: 16rpx;
-		padding: 18rpx 14rpx;
+	.small-stat-item {
 		display: flex;
+		flex-direction: column;
 		align-items: center;
-		// border: 1rpx solid #f0f2f5;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		cursor: pointer;
-	}
-
-	.stat-item:active {
-		transform: translateY(-2rpx) scale(0.98);
-		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+		text-align: center;
 	}
 
-	.stat-icon {
-		width: 56rpx;
-		height: 56rpx;
-		border-radius: 90%;
+	.small-stat-icon {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 16rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		margin-right: 12rpx;
-		flex-shrink: 0;
-		
+		margin-bottom: 12rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
 		image {
-			height: 32rpx;
-			margin: 0 auto;
-			vertical-align: middle;
-		}
-		
-		&.icon-circle-bg-1 {
-			background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); // 蓝色渐变
-		}
-		
-		&.icon-circle-bg-2 {
-			background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); // 紫色渐变
-		}
-		
-		&.icon-circle-bg-3 {
-			background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); // 绿色渐变
-		}
-		
-		&.icon-circle-bg-4 {
-			background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); // 橙色渐变
-		}
-		
-		&.icon-circle-bg-5 {
-			background: linear-gradient(135deg, #E1F5FE 0%, #03A9F4 100%); // 青色渐变
-		}
-		
-		&.icon-circle-bg-6 {
-			background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); // 红色渐变
+			width: 40rpx;
+			height: 40rpx;
 		}
 	}
 
-	.stat-info {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.stat-num {
-		font-size: 28rpx;
+	.small-stat-num {
+		font-size: 32rpx;
 		font-weight: 600;
 		color: #303133;
-		line-height: 1.2;
-		margin-bottom: 4rpx;
+		margin-bottom: 6rpx;
 	}
 
-	.stat-name {
+	.small-stat-name {
 		font-size: 24rpx;
 		color: #909399;
 	}
 
-	/* 账户设置区域 */
-	.settings-section {
-		margin: 24rpx 0;
-		animation: slideDown 0.6s ease-out;
+	.icon-circle-bg-1 {
+		background-color: #43a047;
 	}
 
-	.settings-card {
-		background: #ffffff;
-		border-radius: 20rpx;
-		overflow: hidden;
-		border: 1rpx solid rgba(0, 0, 0, 0.06);
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+	.icon-circle-bg-2 {
+		background-color: #2196f3;
+	}
+
+	.icon-circle-bg-3 {
+		background-color: #ff9800;
+	}
+
+	.icon-circle-bg-4 {
+		background-color: #f44336;
+	}
+}
+
+/* 数据卡片区域 */
+.data-section {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 30rpx;
+	margin-bottom: 24rpx;
+}
+
+.data-card {
+	background-color: rgba(255, 255, 255, 0.4);
+	backdrop-filter: blur(16px) saturate(180%);
+	-webkit-backdrop-filter: blur(16px) saturate(180%);
+	border-radius: 24rpx;
+	padding: 30rpx;
+	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
+	border: 1px solid rgba(255, 255, 255, 0.125);
+}
+
+.data-card-title {
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #303133;
+	margin-bottom: 20rpx;
+}
+
+.data-card-content {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.data-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.data-label {
+	font-size: 26rpx;
+	color: #909399;
+}
+
+.data-value {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #303133;
+}
+
+/* 设置区域 */
+.settings-section {
+	.settings-list {
+		background: transparent;
 	}
 
 	.settings-item {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 28rpx 32rpx;
-		border-bottom: 1rpx solid #f0f2f5;
+		padding: 20rpx 0;
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
 		cursor: pointer;
 		transition: all 0.3s ease;
-		background-color: #ffffff;
-	}
 
-	.settings-item:last-child {
-		border-bottom: none;
-	}
+		&:last-child {
+			border-bottom: none;
+		}
 
-	.settings-item:active {
-		background-color: #f8f9fa;
-		transform: translateX(4rpx);
+		&:active {
+			opacity: 0.7;
+		}
 	}
 
 	.settings-left {
 		display: flex;
-		// align-items: center;
+		align-items: center;
 		flex: 1;
 	}
 
 	.settings-icon-wrapper {
-		// width: 72rpx;
-		// height: 72rpx;
-		// border-radius: 16rpx;
-		// display: flex;
-		// align-items: center;
-		// justify-content: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		margin-right: 16rpx;
+		flex-shrink: 0;
+
 		image {
-			width: 48rpx;
-			height: 48rpx;
+			width: 40rpx;
+			height: 40rpx;
 		}
 	}
 
 	.settings-text {
 		font-size: 28rpx;
 		color: #303133;
-		font-weight: 500;
-	}
-
-	/* 动画效果 */
-	@keyframes slideDown {
-		from {
-			opacity: 0;
-			transform: translateY(-20rpx);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	@keyframes rotate {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	/* 修改密码弹窗样式 */
-	.password-dialog {
-		padding: 40rpx;
-		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-		border-radius: 20rpx;
-		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
-		min-width: 600rpx;
-	}
-
-	.dialog-title {
-		font-size: 32rpx;
-		font-weight: 600;
-		color: #303133;
-		text-align: center;
-		margin-bottom: 40rpx;
-		position: relative;
-		padding-bottom: 20rpx;
-	}
-
-	.dialog-title::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 60rpx;
-		height: 4rpx;
-		background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
-		border-radius: 2rpx;
-	}
-
-	.dialog-content {
-		margin-bottom: 40rpx;
-	}
-
-	.form-item {
-		margin-bottom: 28rpx;
-	}
-
-	.form-item:last-child {
-		margin-bottom: 0;
+		line-height: 1.5;
 	}
+}
+
+/* 修改密码弹窗 */
+.password-dialog {
+	width: 600rpx;
+	background: #ffffff;
+	border-radius: 24rpx;
+	overflow: hidden;
+}
+
+.dialog-title {
+	font-size: 36rpx;
+	font-weight: 600;
+	color: #303133;
+	text-align: center;
+	padding: 40rpx 40rpx 30rpx;
+}
+
+.dialog-content {
+	padding: 0 40rpx;
+}
+
+.form-item {
+	margin-bottom: 32rpx;
 
 	.form-label {
 		display: block;
 		font-size: 28rpx;
 		color: #606266;
 		margin-bottom: 12rpx;
-		font-weight: 500;
 	}
 
 	.form-input {
 		width: 100%;
-		height: 80rpx;
-		padding: 0 24rpx;
-		border: 2rpx solid #e4e7ed;
+		height: 88rpx;
+		background: #f5f7fa;
 		border-radius: 12rpx;
+		padding: 0 24rpx;
 		font-size: 28rpx;
 		color: #303133;
 		box-sizing: border-box;
-		background-color: #ffffff;
-		transition: all 0.3s ease;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-	}
-
-	.form-input:focus {
-		border-color: #43a047;
-		background-color: #fff;
-		box-shadow: 0 2rpx 12rpx rgba(67, 160, 71, 0.15);
-	}
-
-	.dialog-footer {
-		display: flex;
-		justify-content: space-between;
-		gap: 20rpx;
-		margin-top: 40rpx;
-	}
-
-	.dialog-btn {
-		flex: 1;
-		height: 80rpx;
-		line-height: 80rpx;
-		text-align: center;
-		border-radius: 12rpx;
-		font-size: 28rpx;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.3s ease;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
 	}
-
-	.cancel-btn {
-		background-color: #f5f7fa;
+}
+
+.dialog-footer {
+	display: flex;
+	border-top: 1rpx solid #ebeef5;
+	padding: 24rpx 40rpx;
+	gap: 20rpx;
+}
+
+.dialog-btn {
+	flex: 1;
+	height: 80rpx;
+	line-height: 80rpx;
+	text-align: center;
+	border-radius: 12rpx;
+	font-size: 30rpx;
+	font-weight: 500;
+
+	&.cancel-btn {
+		background: #f5f7fa;
 		color: #606266;
-		border: 1rpx solid #e4e7ed;
-	}
-
-	.cancel-btn:active {
-		background-color: #e4e7ed;
-		transform: scale(0.98);
-		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
 	}
 
-	.confirm-btn {
+	&.confirm-btn {
 		background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
-		color: #fff;
-		border: none;
-	}
-
-	.confirm-btn:active {
-		background: linear-gradient(135deg, #388e3c 0%, #43a047 100%);
-		transform: scale(0.98);
-		box-shadow: 0 1rpx 4rpx rgba(67, 160, 71, 0.3);
+		color: #ffffff;
 	}
+}
 </style>
--
libgit2 0.21.4