<template>
	<view class="container">
		<!-- 加载效果遮罩层 -->
		<view class="loading-overlay" v-if="isLoading">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<view class="loading-text">{{ loadingText }}</view>
			</view>
		</view>

		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<!-- 头部区域 -->
		<view class="header">
			<view class="header-content">
				<view style="height: 100rpx;"></view>
				<view class="header-title">绿纤协同办公平台</view>
				<view class="header-subtitle">高效协同，移动办公</view>
				<view class="info-section">
					<view class="info-item">
						<text class="info-label">门店：</text>
						<text class="info-value">{{ jsjinfo && jsjinfo.storeName?jsjinfo.storeName:'暂无'}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">本月金三角：</text>
						<text class="info-value">{{ jsjinfo && jsjinfo.jsjName?jsjinfo.jsjName:'暂无'}}</text>
					</view>
				</view>
				<!-- <view class="header-illustration">
				<u-icon name="clock" size="60" color="#fff" opacity="0.3"></u-icon>
			</view> -->
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="summary-card">
			<view v-if="iskjb" class="summary-item" @click="goToPage('/pages/expansion-list/expansion-list')">
				<view class="num">{{ summaryData.expansionCount || 0 }}</view>
				<view class="label">拓客数</view>
			</view>
			<view v-if="iskjb" class="summary-item" @click="goToPage('/pages/user-invite-list/user-invite-list')">
				<view class="num">{{ summaryData.inviteCount || 0 }}</view>
				<view class="label">邀约数</view>
			</view>
			<view v-if="iskjb" class="summary-item"
				@click="goToPage('/pages/user-appointment-list/user-appointment-list')">
				<view class="num">{{ summaryData.appointmentCount || 0 }}</view>
				<view class="label">预约数</view>
			</view>
			<view class="summary-item" @click="goToPage('/pages/lx-list/lx-list')">
				<view class="num">{{ summaryData.hkCount || 0 }}</view>
				<view class="label">开单数</view>
			</view>
			<view class="summary-item" @click="goToPage('/pages/consume-list/consume-list')">
				<view class="num">{{ summaryData.consumeCount || 0 }}</view>
				<view class="label">耗卡数</view>
			</view>
			<view class="summary-item" @click="goToPage('/pages/refund-list/refund-list')">
				<view class="num">{{ summaryData.refundCount || 0 }}</view>
				<view class="label">退卡数</view>
			</view>
		</view>
		<!-- 功能区域 -->
		<view class="section-title">常用功能</view>
		<view class="func-card">
			<view class="icon-grid">
				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/lx/lx')">
					<view class="icon">
						<u-icon name="list" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">开单</view>
				</view>
				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/lx/lx?type=1')">
					<view class="icon">
						<u-icon name="list" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">活动开单</view>
				</view>
				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/member-consume/member-consume')">
					<view class="icon">
						<u-icon name="minus-square-fill" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">耗卡</view>
				</view>

				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/refund/refund')">
					<view class="icon">
						<u-icon name="minus-circle" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">退卡</view>
				</view>
				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/transferCard/transferCard')">
					<view class="icon">
						<u-icon name="minus-circle" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">转卡</view>
				</view>
				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/member-create/member-create')">
					<view class="icon">
						<u-icon name="file-text" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">建档</view>
				</view>

				<view class="icon-btn" @click="goToPage('/pages/clue-list/clue-list')">
					<view class="icon">
						<u-icon name="account" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">会员</view>
				</view>

				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/expansion/expansion')">
					<view class="icon">
						<u-icon name="man-add" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">拓客</view>
				</view>
				<view v-if="iskjb" class="icon-btn" @click="goToPage('/pages/lx/lx?time=2025-10-01')">
					<view class="icon">
						<u-icon name="list" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">鼎轩开单</view>
				</view>
				<view class="icon-btn" @click="goToPage('/pages/purchase-list/purchase-list')">
					<view class="icon">
						<u-icon name="shopping-cart" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">物品购买</view>
				</view>
				<view class="icon-btn" @click="goToPage('/pages/reimbursement-list/reimbursement-list')">
					<view class="icon">
						<u-icon name="rmb-circle" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">报销申请</view>
				</view>
				<view v-if="newuserInfo.gw == '董事长' || newuserInfo.gw == '总裁' || newuserInfo.gw == '总经理' || newuserInfo.gw == '主管' || newuserInfo.mobilePhone == '18884847552' || newuserInfo.mobilePhone == '17882512738' || newuserInfo.mobilePhone == '18588888888'" class="icon-btn" @click="goToPage('/pages/reimbursement-audit-list/reimbursement-audit-list')">
					<view class="icon">
						<u-icon name="rmb-circle" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">报销审核</view>
				</view>
				<view class="icon-btn" @click="goToPage('/pages/usage-list/usage-list')">
					<view class="icon">
						<u-icon name="list-dot" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">使用记录</view>
				</view>
				<view class="icon-btn" @click="goToPage('/pages/laundry-flow-list/laundry-flow-list')">
					<view class="icon">
						<u-icon name="list-dot" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">毛巾记录</view>
				</view>
				<view v-if="newuserInfo.mobilePhone == '18382415096' || newuserInfo.mobilePhone == '19938623860' || newuserInfo.mobilePhone == '18588888888'" class="icon-btn" @click="goToPage('/pages/store-list/store-list')">
					<view class="icon">
						<u-icon name="star" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">门店管理</view>
				</view>
				<view class="icon-btn" @click="goToPage('/pages/web/web')">
					<view class="icon">
						<u-icon name="kefu-ermai" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">AI问答</view>
				</view>
				<view class="icon-btn" @click="goToPage('/pages/dailyReport/dailyReport')" v-if="showReport">
					<view class="icon">
						<u-icon name="bookmark" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">报表</view>
				</view>

				<view class="icon-btn" @click="handleLogout">
					<view class="icon">
						<u-icon name="arrow-rightward" size="32" color="#43a047"></u-icon>
					</view>
					<view class="icon-label">退出</view>
				</view>
			</view>
		</view>

		<!-- 业绩数据板块 -->
		<view class="section-title">业绩数据</view>
		<view class="performance-card" v-if="newuserInfo.gw == '科技老师'">
			<view class="performance-row">
				<view class="performance-item highlight">
					<view class="performance-value">¥{{ (performanceData.OrderAchievement || 0).toFixed(2) }}</view>
					<view class="performance-label">开卡业绩</view>
				</view>
				<view class="performance-item highlight">
					<view class="performance-value">¥{{ (performanceData.ConsumeAchievement || 0).toFixed(2) }}</view>
					<view class="performance-label">消耗业绩</view>
				</view>
				<view class="performance-item highlight">
					<view class="performance-value">{{ (performanceData.ConsumeProjectCount || 0).toFixed(2) }}</view>
					<view class="performance-label">项目数</view>
				</view>
				<view class="performance-item highlight">
					<view class="performance-value">¥{{ performanceData.ConsumeLaborCost || 0 }}</view>
					<view class="performance-label">手工</view>
				</view> 
			</view>
		</view>
		<view class="performance-card" v-else>
			<view class="performance-row">
				<view class="performance-item highlight">
					<view class="performance-value">¥{{ (performanceData.BillingAmount || 0).toFixed(2) }}</view>
					<view class="performance-label">开单金额</view>
				</view>
				<view class="performance-item highlight">
					<view class="performance-value">¥{{ (performanceData.ConsumeAmount || 0).toFixed(2) }}</view>
					<view class="performance-label">消耗金额</view>
				</view>
				<view class="performance-item highlight">
					<view class="performance-value">¥{{ (performanceData.RefundAmount || 0).toFixed(2) }}</view>
					<view class="performance-label">退卡金额</view>
				</view>
				<view class="performance-item highlight">
					<view class="performance-value">{{ performanceData.ConsumeProjectCount || 0 }}</view>
					<view class="performance-label">项目数</view>
				</view>
			</view>
			<view class="performance-row">
				<view class="performance-item">
					<view class="performance-value">{{ performanceData.HeadCount || 0 }}</view>
					<view class="performance-label">人头</view>
				</view>
				<view class="performance-item">
					<view class="performance-value">{{ performanceData.PersonCount || 0 }}</view>
					<view class="performance-label">人次</view>
				</view>
				<view class="performance-item">
					<view class="performance-value">¥{{ performanceData.LaborCost || 0 }}</view>
					<view class="performance-label">手工费</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import memberApi from '@/apis/modules/member.js'
	import performanceApi from '@/apis/modules/performance.js'
	export default {
		data() {
			return {
				newuserInfo: {

				},
				statusBarHeight: 0,
				isLoading: false,
				loadingText: '加载中...',
				summaryData: {
					appointmentCount: 0,
					inviteCount: 0,
					expansionCount: 0,
					refundCount: 0
				},
				userInfo: {},
				jsjinfo: null,
				performanceData: {
					InvitationCount: 0,
					InviteCount: 0,
					AppointmentCount: 0,
					BillingCount: 0,
					BillingAmount: 0,
					ConsumeCount: 0,
					ConsumeAmount: 0,
					RefundCount: 0,
					RefundAmount: 0,
					HeadCount: 0,
					PersonCount: 0
				}
			}
		},

		computed: {
			iskjb() {
				if (this.newuserInfo.gw == '科技老师') {
					return false
				}
				return true
			},
			// 根据用户权限显示报表按钮
			showReport() {
				if (!this.userInfo || !this.userInfo.userAccount) return false
				const adminAccounts = ['admin', '13198568627', '18884847552', '13608016021', '18628973287']
				return adminAccounts.includes(this.userInfo.userAccount)
			}
		},

		async onLoad() {
			// this.getSystemInfo()
			this.showLoading('加载中...')
			this.checkLoginStatus()
			await this.int()
		},

		async onShow() {


		},

		methods: {
			int() {
				this.API.getUsers(this.userInfo.userId).then(res => {
					console.error(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) => {
								console.error(resjsj)
								if (resjsj.code == 200) {
									this.jsjinfo = resjsj.data
								}
							})
							uni.setStorageSync('newuserInfo', this.newuserInfo)
							this.getSummaryData()
							this.getPerformanceData()
						}
					}
				})
			},
			// 获取系统信息
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						this.statusBarHeight = res.statusBarHeight
					}
				})
			},

			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token')

				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				} else {
					this.userInfo = uni.getStorageSync('userInfo');
				}
			},

			// 显示加载效果
			showLoading(text = '加载中...') {
				this.isLoading = true
				this.loadingText = text
			},

			// 隐藏加载效果
			hideLoading() {
				this.isLoading = false
			},

			// 获取统计数据
			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 = {
						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
					}

				} catch (error) {
					console.error('获取统计数据失败:', error)
				} finally {
					this.hideLoading()
				}
			},

			// 页面跳转
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			// 退出登录
			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'
									})
								}
							})
						}
					}
				})
			},

		
			// 获取当前月份字符串（格式：YYYYMM）
			getCurrentMonthStr() {
				const now = new Date()
				console.error(uni.$u.timeFormat(now,'yyyymm'))
				return uni.$u.timeFormat(now,'yyyymm')
			},
			// 格式化日期为 ISO 8601 格式（YYYY-MM-DDTHH:mm:ss）
			formatDateToISO(timestamp) {
				const date = new Date(timestamp)
				console.error(uni.$u.timeFormat(date,'yyyy-mm-dd hh:MM:ss'))
				return uni.$u.timeFormat(date,'yyyy-mm-dd hh:MM:ss')
			},

			// 获取业绩数据
			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) {
							this.performanceData = res.data.length>0?res.data[0]:{}
							console.error({
								...this.performanceData
							})
						}
					} else {
						const res = await performanceApi.getEmployeePerformanceStatistics({
							userId: this.userInfo.userId,
							statisticsMonth: statisticsMonth
						})
						if (res.code === 200 && res.data) {
							this.performanceData = res.data
						}
					}

				} catch (error) {
					console.error('获取业绩数据失败:', error)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #e8f5e9;
	}

	.status-bar {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
	}

	.header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 0 48rpx 0;
		position: relative;
		box-shadow: 0 4rpx 24rpx 0 rgba(67, 233, 123, 0.08);
	}

	.header-content {
		text-align: center;
		padding: 0 40rpx;
	}

	.header-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 4rpx;
		margin-bottom: 16rpx;
	}

	.header-subtitle {
		color: #e0f2f1;
		font-size: 28rpx;
		margin-bottom: 32rpx;
		font-weight: 500;
	}

	.info-section {
		background: rgba(255, 255, 255, 0.15);
		border-radius: 16rpx;
		padding: 24rpx 32rpx;
		margin: 0 auto;
		max-width: 600rpx;
		backdrop-filter: blur(10rpx);
	}

	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-label {
		color: #e0f2f1;
		font-size: 26rpx;
		font-weight: 500;
	}

	.info-value {
		color: #fff;
		font-size: 26rpx;
		font-weight: 600;
		text-align: right;
		flex: 1;
		margin-left: 16rpx;
	}

	.header-illustration {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.12);
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.summary-card {
		background: #fff;
		border-radius: 28rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba(67, 233, 123, 0.08);
		margin: -36rpx 40rpx 36rpx 40rpx;
		display: flex;
		justify-content: space-between;
		padding: 28rpx 20rpx;
		position: relative;
		z-index: 2;
	}

	.summary-item {
		flex: 1;
		text-align: center;
		color: #388e3c;
		cursor: pointer;
	}

	.summary-item .num {
		font-size: 36rpx;
		font-weight: bold;
		color: #43a047;
		margin-bottom: 4rpx;
		display: block;
	}

	.summary-item .label {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.section-title {
		margin: 0 40rpx 16rpx 40rpx;
		font-size: 32rpx;
		color: #388e3c;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.func-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		margin: 0 40rpx 36rpx 40rpx;
	}

	.icon-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24rpx;
		width: 100%;
	}

	.icon-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background: #f5f5f5;
		background: linear-gradient(135deg, #e8f5e9 60%, #c8e6c9 100%);
		border-radius: 16rpx;
		padding: 24rpx 12rpx;
		transition: all 0.2s;
	}

	.icon-btn:active {
		background: #e8e8e8;
		transform: scale(0.98);
	}

	.icon {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-label {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		color: #388e3c;
	}

	/* 加载效果样式 */
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.95);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		backdrop-filter: blur(4px);
	}

	.loading-content {
		text-align: center;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #e8f5e9;
		border-top: 4rpx solid #43a047;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin: 0 auto;
	}

	.loading-text {
		margin-top: 20rpx;
		color: #388e3c;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 业绩数据板块样式 */
	.performance-card {
		background: #fff;
		border-radius: 28rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba(67, 233, 123, 0.08);
		padding: 32rpx 24rpx;
		margin: 0 40rpx 36rpx 40rpx;
	}

	.performance-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.performance-row:last-child {
		margin-bottom: 0;
	}

	.performance-item {
		flex: 1;
		text-align: center;
		padding: 16rpx 8rpx;
		background: linear-gradient(135deg, #e8f5e9 60%, #c8e6c9 100%);
		border-radius: 20rpx;
		margin: 0 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(67, 233, 123, 0.1);
	}

	.performance-item.highlight {
		background: linear-gradient(135deg, #fff3e0 60%, #ffe0b2 100%);
		box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.2);
	}

	.performance-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #43a047;
		margin-bottom: 8rpx;
	}

	.performance-item.highlight .performance-value {
		color: #f57c00;
	}

	.performance-label {
		font-size: 22rpx;
		color: #6a9c6a;
	}

	.performance-item.highlight .performance-label {
		color: #e65100;
	}
</style>