vist_go_uniApp/pages/tabbar/my.vue

<template>
	<view class="bg-index-image">
		<!-- 头像模块 -->
		<view class="profile-section">
			<view class="user-login flex-items" @click="goLogin">
				<view class="profile-content">
					<view class="avatar-container">
						<!-- 显示头像的图片元素 -->
						<image class="avatar" :src="user.avatar||'../../static/images/avatar.png'" mode="aspectFill">
						</image>
						<!-- 美化后的代理徽章 -->
						<view v-if="isLogin && user.level > 0" class="member-badge" :class="'level-' + user.level">
							<view class="badge-content">
								<!-- S级代理 - 单颗钻石 -->
								<text v-if="user.level == '1'" class="member-icon diamond">💎</text>
								<!-- SS级代理 - 双钻石 -->
								<view v-else-if="user.level == '2'" class="member-icons">
									<text class="member-icon diamond">💎</text>
									<text class="member-icon diamond">💎</text>
								</view>
								<!-- SSS级代理 - 皇冠 -->
								<text v-else-if="user.level == '3'" class="member-icon crown">👑</text>
							</view>
						</view>
					</view>
					<view class="user-info">
						<view v-if="isLogin">
							<view class="username font44 font-def font-bold omit-text">
								{{user.account}}
							</view>
							<view class="member-level-container">
								<!-- 会员等级显示 -->
								<view class="member-level" :class="'level-text-' + user.level">
									<text v-if="user.level == '0'">普通会员</text>
									<text v-else-if="user.level == '1'">S级会员</text>
									<text v-else-if="user.level == '2'">SS级会员</text>
									<text v-else-if="user.level == '3'">SSS级会员</text>
								</view>
								<!-- 代理等级显示 -->
								<view v-if="user.agent == 2 || user.agent == 3" class="agent-level"
									:class="'agent-text-' + user.agent">
									<text v-if="user.agent == 2">荣耀代理</text>
									<text v-else-if="user.agent == 3">超凡代理</text>
								</view>
								<!-- 成为代理按钮 -->
								<view v-if="user.agent != 2 && user.agent != 3" class="upgrade-btn"
									@click.stop="goUpgrade">
									<text class="upgrade-text">成为代理</text>
									<uni-icons color="#FFD700" type="right" size="12"></uni-icons>
								</view>
							</view>
							<!-- 代理到期时间显示 -->
							<view v-if="user.agent == 2 || user.agent == 3" class="agent-expiration">
								<text
									class="expiration-text">代理到期：{{ formatExpirationTime(user.agentExpirationTime) }}</text>
							</view>
						</view>
						<view v-else>
							<view class="username font44 font-bold">
								点击登录
							</view>
							<view class="slogan">
								传承千年唐卡文化
							</view>
						</view>
					</view>
				</view>
				<view class="profile-arrow" v-if="isLogin">
					<uni-icons color="#463a26" type="gear-filled" size="30"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 订单模块 -->
		<view class="order">
			<view class="flex pad-t-16" @tap="goOrder(0)">
				<view class="font28 font-bold font-def mar-l-25">
					我的订单
				</view>
				<view class="mar-l-auto mar-r-30">
					<view class="font-gray flex-center">
						<view>
							全部
						</view>
						<view>
							<uni-icons color="#a8a8a8" type="right" size="15"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-sp-between mar-t-24 mar-l-25 ">
				<view v-for="(item,index) in orderList" :key="index" @tap="goOrder(item.status)">
					<view class="flex-col-center mar-r-20">
						<view class="badge-container">
							<image class="order-avatar" :src="item.img" mode="aspectFill"></image>
							<view class="badge" v-if="getBadgeCount(item.status) > 0">
								<text>{{getBadgeCount(item.status)}}</text>
							</view>
						</view>
						<view class="font28 font-def">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="setting">
			<view class="menu-grid">
				<view v-for="(item,index) in menuList" :key="index"
					:class="['menu-item', {'menu-item-customer-service': item.name === '七指堂客服'}]"
					@click="item.name !== '七指堂客服' ? goPath(item) : null">
					<button v-if="item.name === '七指堂客服'" class="contact-btn menu-content" open-type="contact">
						<image class="menu-avatar" :src="item.img" mode="aspectFill"></image>
						<text class="menu-text">{{item.name}}</text>
					</button>
					<view v-else class="menu-content">
						<image class="menu-avatar" :src="item.img" mode="aspectFill"></image>
						<text class="menu-text">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="checkLoginDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="继续浏览" confirmText="确认" title="提示" content="体验更多功能,请先登录"
				@confirm="goLogin()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		memberDetail,
		memberPetList,
		carouselQueryAll,
		getOrderStatusCounts,
		wxLogin
	} from '../../config/api';
	import {
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	import store from '@/store';
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue'
	import {
		shareImg
	} from '@/common/config.js'
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				petList: [

				],
				statusCounts: {
					pendingPayment: 0,
					pendingShipment: 0,
					pendingReceipt: 0,
					pendingEvaluation: 0,
					afterSale: 0
				},
				menuList: [{
						img: '../../static/images/shouye.png',
						name: "个人主页",
						path: "/packageUser/pages/user-info/index"
					},
					{
						img: '../../static/images/dengji.png',
						name: "等级中心",
						path: "/packageUser/pages/level/index",
					},
					{
						img: '../../static/images/team.png',
						name: "我的团队",
						path: "/packageUser/pages/team/index"
					},
					{
						img: '../../static/images/fenxiang.png',
						name: "邀请好友",
						path: "/packageUser/pages/share/index"
					},
					{
						img: '../../static/images/dizhi.png',
						name: "收货地址",
						path: ""
					},
					{
						img: '../../static/images/shoucang1.png',
						name: "商品收藏",
						path: "/packageUser/pages/collect/index",
					},
					{
						img: '../../static/images/cart1.png',
						name: "购物车",
						path: "/packageShop/pages/cart/index",
					}



				],
				orderList: [{
						img: '../../static/images/dfk1.png',
						name: "待付款",
						status: 1
					},
					{
						img: '../../static/images/dfh1.png',
						name: "待发货",
						status: 2
					},
					{
						img: '../../static/images/dsh2.png',
						name: "待收货",
						status: 3
					},
					{
						img: '../../static/images/pj1.png',
						name: "待评价",
						status: 6
					},

				],

				user: {}
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'access_token', 'refresh_token'])
		},
		onLoad() {
			console.log("121212")
			console.log('当前用户登陆信息')
			console.log(this.userInfo)
			// 获取状态栏高度
			this.getStatusBarHeight();
			// this.getShufflingList();
			// var that = this
			// uni.onTabBarMidButtonTap(function(e){
			// 	console.log('点击按钮')
			//    that.$Router.push({path: '/pages/tabbar/licai'})
			// })
		},
		onShow() {


			// 不管是否登录都获取系统状态栏高度
			if (this.isLogin) {
				this.detail(),
					this.getOrderStatusCounts()

			}
		},
		// 微信小程序分享配置
		onShareAppMessage() {
			return {
				title: `邀请您加入宏匠唐卡`,
				path: `/pages/index/indexNew`,
				imageUrl: shareImg // 分享图片，需要添加
			}
		},
		onShareTimeline(res) {
			let that = this;
			let shareInfo = store.state.vuex_shareInfo;
			let query = shareInfo.query;
			//携带当前页面资源ID参数
			let currentPage = getCurrentPages()[getCurrentPages().length - 1];
			let options = currentPage.options;
			if (JSON.stringify(options) != '{}' && options.id) {
				query += `&id=${options.id}`;
			}

			return {
				title: shareInfo.title,
				query: query,
				imageUrl: shareImg,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				},
				complete() {}
			}
		},
		methods: {
			...mapActions(['logout', 'setToken', 'setUserInfo']),

			// 获取状态栏高度
			getStatusBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight || 0;
			},

			// 成为代理
			goUpgrade() {
				uni.showModal({
					title: '成为代理',
					content: '购买代理套餐即可升为代理,立即前往?',
					success: (res) => {
						if (res.confirm) {
							// 这里可以跳转到代理升级页面
							this.$route('/packageShop/pages/search/product-list?serachKey=' + "代理")
						}
					}
				});
			},

			/**
			 * 格式化代理到期时间
			 * @param {String} timeStr - 时间字符串
			 * @returns {String} 格式化后的时间字符串
			 */
			formatExpirationTime(timeStr) {
				if (!timeStr) {
					return '永久有效';
				}

				try {
					const date = new Date(timeStr);
					if (isNaN(date.getTime())) {
						return '时间格式错误';
					}

					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');

					return `${year}-${month}-${day}`;
				} catch (error) {
					console.error('格式化时间错误:', error);
					return '时间格式错误';
				}
			},

			// 获取订单状态数量
			getOrderStatusCounts() {
				getOrderStatusCounts().then(res => {
					if (res.code === 200) {
						this.statusCounts = res.data;
					}
				})
			},

			// 获取用户详情
			detail() {
				memberDetail().then(res => {
					this.user = res.data;
					uni.setStorageSync('user', this.user);
					if (res.data.isShielding == '1') {
						this.handlerLogout();
					}
				})
			},

			// 登录处理
			goLogin() {
				if (!this.isLogin) {
					this.$refs.checkLoginDialog.close()
					uni.navigateTo({
						url: '/packageUser/pages/login/index'
					});

				} else {
					this.$route('/packageUser/pages/user-info/index');
				}
			},
			goOrder(status) {
				if (!this.isLogin) {
					return this.$refs.checkLoginDialog.open()
				}
				if (status === 5) {
					this.$route('/packageOrder/pages/list/index?isAfter=1')
				} else if (status === 6) {
					this.$route('/packageOrder/pages/list/index?isEvaluate=0')
				} else {
					this.$route('/packageOrder/pages/list/index?status=' + status)
				}
			},
			getShufflingList() {
				carouselQueryAll().then(res => {
					this.bannerList = res.data
					console.log('输出结果')
					console.log(this.bannerList)
				});
			},
			handlerLogout() {
				this.logout()
			},
			goPath(item) {
				if (!this.isLogin) {
					return this.$refs.checkLoginDialog.open()
				}
				if (item.path) {
					this.$route(item.path)
				} else if (item.name === '收货地址') {
					console.log("12")
					uni.chooseAddress({
						success: (res) => {
							this.address = res;
						},
						fail: (err) => {
							console.error('获取收货地址失败:', err);
							if (err.errMsg.includes('auth deny')) {
								uni.showModal({
									title: '提示',
									content: '需要您的授权才能获取收货地址，是否前往设置？',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting();
										}
									}
								});
							} else {}
						}
					});
				}
			},
			getPet() {
				memberPetList().then((res) => {
					this.petList = res.data
				})
			},
			getBadgeCount(status) {
				switch (status) {
					case 1: // 待付款
						return this.statusCounts.pendingPayment || 0;
					case 2: // 待发货
						return this.statusCounts.pendingShipment || 0;
					case 3: // 待收货
						return this.statusCounts.pendingReceipt || 0;
					case 6: // 待评价
						return this.statusCounts.pendingEvaluation || 0;
					case 5: // 退款/售后
						return this.statusCounts.afterSale || 0;
					default:
						return 0;
				}
			}
		},
	}
</script>

<style>
	.bg-index-image {
		min-height: 100vh;
		padding: 0 24rpx;
		background:
			linear-gradient(135deg, #f7f3e8 0%, #f0ebe0 30%, #ede5d8 70%, #e8dcc6 100%);
		position: relative;
		overflow: hidden;
	}

	/* 禅意背景纹理层 */
	.bg-index-image::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image:
			/* 主要禅意纹理 */
			radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.03) 0%, transparent 60%),
			radial-gradient(circle at 80% 60%, rgba(165, 42, 42, 0.02) 0%, transparent 50%),
			radial-gradient(circle at 40% 80%, rgba(160, 82, 45, 0.03) 0%, transparent 55%),
			/* 细腻纹理 */
			repeating-radial-gradient(circle at 60% 30%,
				rgba(218, 165, 32, 0.01) 0%,
				rgba(218, 165, 32, 0.01) 2px,
				transparent 2px,
				transparent 12px),
			/* 禅意波纹 */
			repeating-conic-gradient(from 45deg at 70% 70%,
				transparent 0deg,
				rgba(139, 69, 19, 0.005) 45deg,
				transparent 90deg,
				rgba(160, 82, 45, 0.005) 135deg,
				transparent 180deg);
		background-size:
			900rpx 900rpx,
			700rpx 700rpx,
			800rpx 800rpx,
			60rpx 60rpx,
			200rpx 200rpx;
		z-index: -1;
		pointer-events: none;
		animation: zenBreath 25s ease-in-out infinite;
	}

	/* 禅意装饰层 */
	.bg-index-image::after {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image:
			/* 金色微光 */
			radial-gradient(ellipse at 30% 20%, rgba(218, 165, 32, 0.02) 0%, transparent 70%),
			radial-gradient(ellipse at 70% 80%, rgba(218, 165, 32, 0.015) 0%, transparent 60%),
			/* 禅意圆环 */
			repeating-radial-gradient(circle at 85% 15%,
				transparent 0px,
				transparent 20px,
				rgba(218, 165, 32, 0.008) 20px,
				rgba(218, 165, 32, 0.008) 22px,
				transparent 22px,
				transparent 40px);
		background-size: 600rpx 400rpx, 500rpx 350rpx, 300rpx 300rpx;
		z-index: -1;
		pointer-events: none;
		animation: goldenMist 30s ease-in-out infinite reverse;
	}

	/* 禅意呼吸动效 */
	@keyframes zenBreath {

		0%,
		100% {
			opacity: 0.4;
			transform: scale(1) rotate(0deg);
		}

		33% {
			opacity: 0.6;
			transform: scale(1.01) rotate(0.5deg);
		}

		66% {
			opacity: 0.5;
			transform: scale(1.02) rotate(-0.3deg);
		}
	}

	/* 金色薄雾动效 */
	@keyframes goldenMist {

		0%,
		100% {
			opacity: 0.2;
			transform: translateX(0) translateY(0) scale(1);
		}

		25% {
			opacity: 0.3;
			transform: translateX(10rpx) translateY(-5rpx) scale(1.01);
		}

		50% {
			opacity: 0.25;
			transform: translateX(5rpx) translateY(10rpx) scale(1.02);
		}

		75% {
			opacity: 0.35;
			transform: translateX(-8rpx) translateY(3rpx) scale(0.99);
		}
	}

	.user-login {
		background:
			linear-gradient(135deg, rgba(255, 253, 245, 0.98) 0%, rgba(252, 248, 240, 0.95) 50%, rgba(250, 245, 235, 0.97) 100%);
		backdrop-filter: blur(15px) saturate(1.2);
		box-shadow:
			0 12rpx 48rpx rgba(139, 69, 19, 0.12),
			0 4rpx 16rpx rgba(160, 82, 45, 0.08),
			0 1rpx 4rpx rgba(218, 165, 32, 0.1),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.9),
			inset 0 -1rpx 0 rgba(218, 165, 32, 0.05);
		padding: 52rpx 36rpx;
		margin: 36rpx -24rpx;
		border-radius: 28rpx;
		border: 2rpx solid rgba(218, 165, 32, 0.18);
		position: relative;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		overflow: hidden;
	}

	/* 禅意装饰边框 */
	.user-login::before {
		content: '';
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		right: 12rpx;
		bottom: 12rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.12);
		border-radius: 24rpx;
		background:
			/* 禅意纹理 */
			repeating-linear-gradient(45deg,
				transparent 0rpx,
				transparent 6rpx,
				rgba(218, 165, 32, 0.02) 6rpx,
				rgba(218, 165, 32, 0.02) 12rpx),
			repeating-linear-gradient(-45deg,
				transparent 0rpx,
				transparent 6rpx,
				rgba(160, 82, 45, 0.015) 6rpx,
				rgba(160, 82, 45, 0.015) 12rpx),
			/* 内部光晕 */
			radial-gradient(ellipse at 30% 30%, rgba(218, 165, 32, 0.03) 0%, transparent 70%),
			radial-gradient(ellipse at 70% 70%, rgba(160, 82, 45, 0.02) 0%, transparent 60%);
		pointer-events: none;
		animation: zenPattern 15s ease-in-out infinite;
	}

	/* 温润光泽效果 */
	.user-login::after {
		content: '';
		position: absolute;
		top: 0;
		left: -60%;
		width: 60%;
		height: 100%;
		background: linear-gradient(90deg,
				transparent,
				rgba(255, 255, 255, 0.08),
				rgba(218, 165, 32, 0.03),
				rgba(255, 255, 255, 0.12),
				transparent);
		transform: skewX(-20deg);
		animation: gentleShine 12s ease-in-out infinite;
	}

	@keyframes gentleShine {
		0% {
			left: -60%;
			opacity: 0;
		}

		10% {
			opacity: 1;
		}

		90% {
			opacity: 1;
		}

		100% {
			left: 160%;
			opacity: 0;
		}
	}

	@keyframes zenPattern {

		0%,
		100% {
			opacity: 0.6;
			transform: scale(1) rotate(0deg);
		}

		50% {
			opacity: 0.8;
			transform: scale(1.002) rotate(0.2deg);
		}
	}

	.user-login:active {
		transform: scale(0.98);
		box-shadow:
			0 4rpx 16rpx rgba(139, 69, 19, 0.12),
			0 1rpx 4rpx rgba(160, 82, 45, 0.08);
	}



	.profile-content {
		display: flex;
		align-items: center;
	}

	.profile-arrow {
		margin-left: auto;
		padding: 16rpx;
	}

	.pet {
		border-radius: 20rpx;
		width: 700rpx;
		height: auto;
		padding-bottom: 30rpx;
		background-color: white;
		margin-top: 30rpx;
		margin-left: 25rpx;
	}

	.order {
		background: linear-gradient(135deg, rgba(255, 253, 245, 0.95) 0%, rgba(252, 248, 240, 0.92) 100%);
		backdrop-filter: blur(10px);
		box-shadow:
			0 8rpx 32rpx rgba(139, 69, 19, 0.08),
			0 2rpx 8rpx rgba(160, 82, 45, 0.04),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
		padding: 40rpx 32rpx;
		margin: 24rpx -24rpx 32rpx;
		border-radius: 24rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.15);
		position: relative;
		overflow: hidden;
	}

	/* 订单模块禅意装饰 */
	.order::before {
		content: '';
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		right: 12rpx;
		bottom: 12rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.08);
		border-radius: 20rpx;
		background:
			radial-gradient(circle at 30% 30%, rgba(218, 165, 32, 0.02) 0%, transparent 70%),
			radial-gradient(circle at 70% 70%, rgba(160, 82, 45, 0.02) 0%, transparent 70%);
		pointer-events: none;
	}



	.setting {
		background: linear-gradient(135deg, rgba(255, 253, 245, 0.95) 0%, rgba(252, 248, 240, 0.92) 100%);
		backdrop-filter: blur(10px);
		box-shadow:
			0 8rpx 32rpx rgba(139, 69, 19, 0.08),
			0 2rpx 8rpx rgba(160, 82, 45, 0.04),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
		padding: 40rpx 32rpx;
		margin: 24rpx -24rpx;
		border-radius: 24rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.15);
		position: relative;
		overflow: hidden;
	}

	/* 设置模块禅意装饰 */
	.setting::before {
		content: '';
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		right: 16rpx;
		bottom: 16rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.08);
		border-radius: 20rpx;
		background-image:
			radial-gradient(circle at 20% 80%, rgba(218, 165, 32, 0.03) 0%, transparent 50%),
			radial-gradient(circle at 80% 20%, rgba(160, 82, 45, 0.03) 0%, transparent 50%),
			repeating-linear-gradient(45deg,
				transparent 0rpx,
				transparent 20rpx,
				rgba(218, 165, 32, 0.01) 20rpx,
				rgba(218, 165, 32, 0.01) 40rpx);
		pointer-events: none;
	}

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

	.menu-item {
		aspect-ratio: 1;
		border-radius: 20rpx;
		background: linear-gradient(135deg, rgba(255, 253, 245, 0.85) 0%, rgba(252, 248, 240, 0.8) 50%, rgba(250, 245, 235, 0.82) 100%);
		backdrop-filter: blur(8px) saturate(1.1);
		border: 1.5rpx solid rgba(218, 165, 32, 0.15);
		box-shadow:
			0 6rpx 24rpx rgba(139, 69, 19, 0.06),
			0 2rpx 8rpx rgba(160, 82, 45, 0.04),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.7),
			inset 0 -1rpx 0 rgba(218, 165, 32, 0.03);
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		position: relative;
		overflow: hidden;
		cursor: pointer;
	}

	/* 菜单项禅意装饰 */
	.menu-item::before {
		content: '';
		position: absolute;
		top: 6rpx;
		left: 6rpx;
		right: 6rpx;
		bottom: 6rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.08);
		border-radius: 16rpx;
		background:
			radial-gradient(circle at 30% 30%, rgba(218, 165, 32, 0.025) 0%, transparent 70%),
			radial-gradient(circle at 70% 70%, rgba(160, 82, 45, 0.02) 0%, transparent 60%),
			repeating-radial-gradient(circle at center,
				transparent 0%,
				transparent 8px,
				rgba(218, 165, 32, 0.008) 8px,
				rgba(218, 165, 32, 0.008) 10px);
		pointer-events: none;
		transition: all 0.4s ease;
		opacity: 0.6;
	}

	/* 悬浮光晕效果 */
	.menu-item::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 20rpx;
		background:
			radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
				rgba(218, 165, 32, 0.08) 0%,
				rgba(218, 165, 32, 0.04) 30%,
				transparent 70%);
		opacity: 0;
		transition: all 0.3s ease;
		pointer-events: none;
	}

	.menu-item:hover {
		transform: translateY(-2rpx);
		box-shadow:
			0 12rpx 32rpx rgba(139, 69, 19, 0.1),
			0 4rpx 12rpx rgba(160, 82, 45, 0.08),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
		border-color: rgba(218, 165, 32, 0.2);
	}

	.menu-item:hover::before {
		opacity: 1;
		transform: scale(1.02);
	}

	.menu-item:hover::after {
		opacity: 1;
	}

	.menu-item:active {
		transform: scale(0.96) translateY(1rpx);
		background: linear-gradient(135deg, rgba(252, 248, 240, 0.95) 0%, rgba(245, 240, 230, 0.9) 50%, rgba(248, 243, 233, 0.92) 100%);
		box-shadow:
			0 3rpx 12rpx rgba(139, 69, 19, 0.12),
			0 1rpx 4rpx rgba(160, 82, 45, 0.08),
			inset 0 2rpx 4rpx rgba(218, 165, 32, 0.06);
	}

	.menu-item:active::before {
		opacity: 1;
		transform: scale(0.98);
		background:
			radial-gradient(circle at center, rgba(218, 165, 32, 0.06) 0%, transparent 60%);
	}

	.menu-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
		padding: 16rpx;
	}

	.menu-text {
		font-size: 24rpx;
		color: #8b4513;
		font-weight: 500;
		text-align: center;
		line-height: 1.2;
		text-shadow: 0 1rpx 2rpx rgba(218, 165, 32, 0.08);
		letter-spacing: 0.5rpx;
	}

	/* 客服按钮重置样式 */
	.contact-btn.menu-content {
		background: none;
		border: none;
		padding: 16rpx;
		margin: 0;
		line-height: normal;
	}

	.contact-btn.menu-content::after {
		display: none;
	}

	.profile-section {
		margin-bottom: 36rpx;
		width: 100%;
		position: relative;
	}

	/* 添加禅意装饰元素 */
	.profile-section::before {
		content: '◦';
		position: absolute;
		top: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32rpx;
		color: rgba(218, 165, 32, 0.3);
		text-shadow: 0 2rpx 4rpx rgba(218, 165, 32, 0.1);
		animation: zenSymbol 8s ease-in-out infinite;
	}

	@keyframes zenSymbol {

		0%,
		100% {
			opacity: 0.3;
			transform: translateX(-50%) scale(1);
		}

		50% {
			opacity: 0.6;
			transform: translateX(-50%) scale(1.1);
		}
	}

	.avatar-container {
		position: relative;
		margin-right: 40rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(218, 165, 32, 0.25);
		overflow: hidden;
		box-shadow:
			0 12rpx 32rpx rgba(139, 69, 19, 0.15),
			0 4rpx 12rpx rgba(160, 82, 45, 0.12),
			0 1rpx 4rpx rgba(218, 165, 32, 0.1),
			inset 0 0 0 3rpx rgba(255, 255, 255, 0.9),
			inset 0 0 0 6rpx rgba(218, 165, 32, 0.05);
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		position: relative;
	}

	/* 头像禅意光环 */
	.avatar::before {
		content: '';
		position: absolute;
		top: -12rpx;
		left: -12rpx;
		right: -12rpx;
		bottom: -12rpx;
		border-radius: 50%;
		background:
			conic-gradient(from 0deg,
				transparent 0deg,
				rgba(218, 165, 32, 0.08) 60deg,
				rgba(218, 165, 32, 0.15) 120deg,
				rgba(218, 165, 32, 0.2) 180deg,
				rgba(218, 165, 32, 0.15) 240deg,
				rgba(218, 165, 32, 0.08) 300deg,
				transparent 360deg);
		animation: avatarHalo 12s linear infinite;
		z-index: -1;
	}

	/* 头像内光环 */
	.avatar::after {
		content: '';
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		right: -8rpx;
		bottom: -8rpx;
		border-radius: 50%;
		background:
			conic-gradient(from 180deg,
				transparent 0deg,
				rgba(160, 82, 45, 0.06) 90deg,
				rgba(139, 69, 19, 0.08) 180deg,
				rgba(160, 82, 45, 0.06) 270deg,
				transparent 360deg);
		animation: avatarHalo 15s linear infinite reverse;
		z-index: -1;
	}

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

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

	.avatar:active {
		transform: scale(0.98);
		box-shadow:
			0 4rpx 12rpx rgba(139, 69, 19, 0.16),
			0 1rpx 4rpx rgba(160, 82, 45, 0.12);
	}

	/* 美化后的代理徽章 */
	.member-badge {
		position: absolute;
		bottom: -8rpx;
		right: -8rpx;
		border-radius: 20rpx;
		padding: 8rpx 12rpx;
		display: flex;
		align-items: center;
		border: 2rpx solid rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		animation: badgeGlow 2s ease-in-out infinite alternate;
	}

	.badge-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.member-icons {
		display: flex;
		align-items: center;
		gap: 2rpx;
	}

	.member-icon {
		font-size: 24rpx;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
		animation: iconFloat 2s ease-in-out infinite;
	}

	.member-icon.diamond {
		animation: diamondSparkle 1.5s ease-in-out infinite;
	}

	.member-icon.crown {
		animation: crownGlow 2s ease-in-out infinite;
	}

	/* S级代理 - 金色钻石徽章 */
	.level-1 {
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
		box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4), inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
	}

	.level-1 .member-icon {
		filter: drop-shadow(0 2rpx 4rpx rgba(255, 215, 0, 0.5));
	}

	/* SS级代理 - 红宝石双钻石徽章 */
	.level-2 {
		background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 50%, #FF4757 100%);
		box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.4), inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
	}

	.level-2 .member-icon {
		filter: drop-shadow(0 2rpx 4rpx rgba(255, 107, 107, 0.5));
	}

	.level-2 .member-icon:nth-child(2) {
		animation-delay: 0.5s;
	}

	/* SSS级代理 - 紫金皇冠徽章 */
	.level-3 {
		background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 50%, #6C5CE7 100%);
		box-shadow: 0 6rpx 20rpx rgba(155, 89, 182, 0.5), inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
	}

	.level-3 .member-icon {
		filter: drop-shadow(0 3rpx 6rpx rgba(155, 89, 182, 0.6));
	}

	@keyframes badgeGlow {
		0% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.05);
		}
	}

	@keyframes iconFloat {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-2rpx);
		}
	}

	@keyframes diamondSparkle {

		0%,
		100% {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}

		25% {
			opacity: 0.8;
			transform: scale(1.1) rotate(5deg);
		}

		50% {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}

		75% {
			opacity: 0.9;
			transform: scale(1.05) rotate(-3deg);
		}
	}

	@keyframes crownGlow {

		0%,
		100% {
			opacity: 1;
			transform: scale(1);
			filter: drop-shadow(0 3rpx 6rpx rgba(155, 89, 182, 0.6)) brightness(1);
		}

		50% {
			opacity: 0.9;
			transform: scale(1.1);
			filter: drop-shadow(0 4rpx 8rpx rgba(155, 89, 182, 0.8)) brightness(1.2);
		}
	}

	.user-info {
		flex: 1;
	}

	.username {
		font-size: 48rpx;
		margin-bottom: 12rpx;
		color: #8b4513;
		font-weight: 600;
		text-shadow: 0 1rpx 2rpx rgba(218, 165, 32, 0.1);
		letter-spacing: 1rpx;
	}

	/* 代理等级容器 */
	.member-level-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
		flex-wrap: wrap;
	}

	.member-level {
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0.5rpx;
		text-shadow: 0 1rpx 2rpx rgba(139, 69, 19, 0.1);
	}

	.level-text-0 {
		color: #a0522d;
		background: linear-gradient(135deg, rgba(218, 165, 32, 0.1) 0%, rgba(160, 82, 45, 0.1) 100%);
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.2);
	}

	/* S级代理标签特效 */
	.level-text-1 {
		position: relative;
		display: inline-block;
		padding: 4rpx 12rpx;
		color: #FFF;
		background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
		background-size: 200% 100%;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 700;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
		box-shadow:
			0 4rpx 12rpx rgba(255, 215, 0, 0.4),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.3),
			0 0 15rpx rgba(255, 215, 0, 0.6);
		border: 1rpx solid rgba(255, 255, 255, 0.4);
		animation: goldBadgeShimmer 2s ease-in-out infinite;
		overflow: hidden;
	}

	/* S级标签闪光效果 */
	.level-text-1::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		transform: skewX(-25deg);
		animation: goldShine 2s infinite;
	}

	/* SS级代理标签特效 */
	.level-text-2 {
		position: relative;
		display: inline-block;
		padding: 4rpx 12rpx;
		color: #FFF;
		background: linear-gradient(135deg, #FF6B6B, #FF8E53, #FF4757, #FF6B6B);
		background-size: 300% 100%;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 700;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
		box-shadow:
			0 4rpx 12rpx rgba(255, 107, 107, 0.4),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.3),
			0 0 15rpx rgba(255, 107, 107, 0.6);
		border: 1rpx solid rgba(255, 255, 255, 0.4);
		animation: rubyBadgeFlow 3s ease-in-out infinite;
		overflow: hidden;
	}

	/* SS级标签流光效果 */
	.level-text-2::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 40%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
		transform: skewX(-20deg);
		animation: rubyShine 3s infinite;
	}

	/* SSS级代理标签特效 */
	.level-text-3 {
		position: relative;
		display: inline-block;
		padding: 4rpx 12rpx;
		color: #FFF;
		background: linear-gradient(135deg, #9B59B6, #8E44AD, #6C5CE7, #A569BD, #9B59B6);
		background-size: 400% 100%;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 700;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.4);
		box-shadow:
			0 6rpx 16rpx rgba(155, 89, 182, 0.5),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.4),
			0 0 20rpx rgba(155, 89, 182, 0.8);
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		animation: crownBadgeGlory 4s ease-in-out infinite;
		overflow: hidden;
	}

	/* SSS级标签皇冠光效 */
	.level-text-3::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 30%;
		height: 100%;
		background: linear-gradient(90deg,
				transparent,
				rgba(255, 255, 255, 0.6),
				rgba(255, 215, 0, 0.3),
				rgba(255, 255, 255, 0.6),
				transparent);
		transform: skewX(-15deg);
		animation: crownShine 4s infinite;
	}

	.level-text-3::after {
		content: '';
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		right: -2rpx;
		bottom: -2rpx;
		background: linear-gradient(45deg,
				rgba(155, 89, 182, 0.3),
				rgba(108, 92, 231, 0.3),
				rgba(142, 68, 173, 0.3));
		border-radius: 14rpx;
		z-index: -1;
		animation: crownAura 4s ease-in-out infinite;
	}

	/* S级徽章动画 */
	@keyframes goldBadgeShimmer {

		0%,
		100% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}
	}

	@keyframes goldShine {
		0% {
			left: -100%;
		}

		20% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}

	/* SS级徽章动画 */
	@keyframes rubyBadgeFlow {

		0%,
		100% {
			background-position: 0% 50%;
		}

		33% {
			background-position: 50% 50%;
		}

		66% {
			background-position: 100% 50%;
		}
	}

	@keyframes rubyShine {
		0% {
			left: -100%;
		}

		30% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}

	/* SSS级徽章动画 */
	@keyframes crownBadgeGlory {

		0%,
		100% {
			background-position: 0% 50%;
		}

		25% {
			background-position: 25% 50%;
		}

		50% {
			background-position: 50% 50%;
		}

		75% {
			background-position: 75% 50%;
		}
	}

	@keyframes crownShine {
		0% {
			left: -100%;
		}

		40% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}

	@keyframes crownAura {

		0%,
		100% {
			opacity: 0.3;
		}

		50% {
			opacity: 0.6;
		}
	}

	/* 成为代理按钮 */
	.upgrade-btn {
		display: flex;
		align-items: center;
		gap: 12rpx;
		background: linear-gradient(135deg, #DAA520 0%, #FFD700 50%, #FFA500 100%);
		border-radius: 32rpx;
		padding: 12rpx 24rpx;
		box-shadow:
			0 6rpx 20rpx rgba(218, 165, 32, 0.4),
			0 2rpx 8rpx rgba(255, 215, 0, 0.3),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
		border: 2rpx solid rgba(255, 255, 255, 0.9);
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		position: relative;
		overflow: hidden;
		animation: upgradePulse 3s ease-in-out infinite;
	}

	/* 按钮光泽效果 */
	.upgrade-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg,
				transparent,
				rgba(255, 255, 255, 0.3),
				transparent);
		transform: skewX(-25deg);
		animation: buttonShine 4s ease-in-out infinite;
	}

	.upgrade-btn:active {
		transform: scale(0.96);
		box-shadow:
			0 3rpx 12rpx rgba(218, 165, 32, 0.5),
			0 1rpx 4rpx rgba(255, 215, 0, 0.4),
			inset 0 2rpx 4rpx rgba(218, 165, 32, 0.2);
	}

	.upgrade-text {
		color: #FFFFFF;
		font-size: 26rpx;
		font-weight: 700;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		letter-spacing: 0.5rpx;
		position: relative;
		z-index: 1;
	}

	@keyframes upgradePulse {

		0%,
		100% {
			transform: scale(1);
			box-shadow:
				0 6rpx 20rpx rgba(218, 165, 32, 0.4),
				0 2rpx 8rpx rgba(255, 215, 0, 0.3),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
		}

		50% {
			transform: scale(1.02);
			box-shadow:
				0 8rpx 28rpx rgba(218, 165, 32, 0.5),
				0 3rpx 12rpx rgba(255, 215, 0, 0.4),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
		}
	}

	@keyframes buttonShine {
		0% {
			left: -100%;
		}

		50% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}

	/* 代理等级样式 */
	.agent-level {
		font-size: 26rpx;
		font-weight: 600;
		letter-spacing: 0.5rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		position: relative;
		overflow: hidden;
	}

	/* 荣耀代理样式 */
	.agent-text-2 {
		color: #FFF;
		background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FFD23F 100%);
		box-shadow:
			0 4rpx 12rpx rgba(255, 107, 53, 0.4),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.3),
			0 0 15rpx rgba(255, 107, 53, 0.6);
		border: 1rpx solid rgba(255, 255, 255, 0.4);
		animation: gloryShimmer 3s ease-in-out infinite;
	}

	/* 超凡代理样式 */
	.agent-text-3 {
		color: #FFF;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
		box-shadow:
			0 6rpx 16rpx rgba(102, 126, 234, 0.5),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.4),
			0 0 20rpx rgba(102, 126, 234, 0.8);
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		animation: transcendentGlow 4s ease-in-out infinite;
	}

	/* 代理到期时间容器 */
	.agent-expiration {
		margin-top: 8rpx;
		padding: 6rpx 12rpx;
		background: rgba(139, 69, 19, 0.05);
		border-radius: 8rpx;
		border: 1rpx solid rgba(218, 165, 32, 0.2);
	}

	.expiration-text {
		font-size: 24rpx;
		color: #8b4513;
		font-weight: 500;
		letter-spacing: 0.5rpx;
	}

	/* 荣耀代理动画 */
	@keyframes gloryShimmer {

		0%,
		100% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}
	}

	/* 超凡代理动画 */
	@keyframes transcendentGlow {

		0%,
		100% {
			background-position: 0% 50%;
			box-shadow:
				0 6rpx 16rpx rgba(102, 126, 234, 0.5),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.4),
				0 0 20rpx rgba(102, 126, 234, 0.8);
		}

		50% {
			background-position: 100% 50%;
			box-shadow:
				0 8rpx 20rpx rgba(102, 126, 234, 0.6),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.5),
				0 0 25rpx rgba(102, 126, 234, 0.9);
		}
	}

	.slogan {
		color: #a0522d;
		font-size: 26rpx;
		font-style: italic;
		text-shadow: 0 1rpx 2rpx rgba(218, 165, 32, 0.08);
		letter-spacing: 0.5rpx;
	}

	.font44 {
		font-size: 40rpx;
		color: #8b4513;
		font-weight: 600;
		text-shadow: 0 1rpx 2rpx rgba(218, 165, 32, 0.1);
	}

	.font-gray {
		color: #a0522d;
		font-size: 26rpx;
		text-shadow: 0 1rpx 2rpx rgba(139, 69, 19, 0.08);
	}

	/* 宠物头像样式 */
	.pet-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	/* 订单图标样式 */
	.order-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 16rpx;
		padding: 12rpx;
		background: linear-gradient(135deg, rgba(255, 253, 245, 0.9) 0%, rgba(252, 248, 240, 0.8) 100%);
		border: 1rpx solid rgba(218, 165, 32, 0.15);
		box-shadow:
			0 4rpx 12rpx rgba(139, 69, 19, 0.06),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
		transition: all 0.3s ease;
	}

	.menu-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 16rpx;
		padding: 12rpx;
		background: linear-gradient(135deg, rgba(255, 253, 245, 0.9) 0%, rgba(252, 248, 240, 0.8) 100%);
		border: 1rpx solid rgba(218, 165, 32, 0.15);
		box-shadow:
			0 4rpx 12rpx rgba(139, 69, 19, 0.06),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
		transition: all 0.3s ease;
	}

	/* 徽标样式 */
	.badge-container {
		position: relative;
	}

	.badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
		color: #ffffff;
		border-radius: 16rpx;
		min-width: 28rpx;
		height: 28rpx;
		padding: 0 8rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		font-weight: 600;
		box-shadow:
			0 4rpx 12rpx rgba(220, 53, 69, 0.3),
			0 2rpx 4rpx rgba(220, 53, 69, 0.2);
		border: 2rpx solid rgba(255, 255, 255, 0.9);
		animation: badgePulse 2s ease-in-out infinite;
	}

	@keyframes badgePulse {

		0%,
		100% {
			transform: scale(1);
			box-shadow:
				0 4rpx 12rpx rgba(220, 53, 69, 0.3),
				0 2rpx 4rpx rgba(220, 53, 69, 0.2);
		}

		50% {
			transform: scale(1.05);
			box-shadow:
				0 6rpx 16rpx rgba(220, 53, 69, 0.4),
				0 3rpx 6rpx rgba(220, 53, 69, 0.3);
		}
	}

	/* 客服按钮样式 */
	.contact-btn {
		background: none;
		width: 100%;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		display: flex;
		align-items: center;
		text-align: left;
		font-weight: normal;
		font-size: inherit;
	}

	.contact-btn::after {
		border: none;
	}

	.flex-items {
		display: flex;
		align-items: center;
	}

	/* 订单标题样式 */
	.font28 {
		font-size: 28rpx;
		color: #8b4513;
		font-weight: 500;
		text-shadow: 0 1rpx 2rpx rgba(218, 165, 32, 0.08);
		letter-spacing: 0.5rpx;
	}

	/* 订单项目容器 */
	.flex-sp-between {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	/* 订单项目美化 */
	.flex-col-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 16rpx;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		padding: 20rpx 16rpx;
		border-radius: 16rpx;
		position: relative;
		cursor: pointer;
	}

	.flex-col-center:hover {
		transform: translateY(-3rpx) scale(1.02);
		background: rgba(218, 165, 32, 0.03);
	}

	.flex-col-center:active {
		transform: scale(0.96) translateY(1rpx);
		background: rgba(218, 165, 32, 0.08);
	}

	/* 订单项目悬浮效果 */
	.flex-col-center::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 16rpx;
		background:
			radial-gradient(circle at center, rgba(218, 165, 32, 0.04) 0%, transparent 80%);
		opacity: 0;
		transition: all 0.4s ease;
		transform: scale(0.8);
	}

	.flex-col-center:hover::before {
		opacity: 1;
		transform: scale(1);
	}

	.flex-col-center:active::before {
		opacity: 1;
		transform: scale(0.95);
		background:
			radial-gradient(circle at center, rgba(218, 165, 32, 0.08) 0%, transparent 70%);
	}

	/* 添加订单项目呼吸动效 */
	.flex-col-center::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 4rpx;
		height: 4rpx;
		background: rgba(218, 165, 32, 0.2);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: orderBreath 4s ease-in-out infinite;
	}

	@keyframes orderBreath {

		0%,
		100% {
			opacity: 0.2;
			transform: translate(-50%, -50%) scale(1);
		}

		50% {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(1.5);
		}
	}

	/* 订单图标容器美化 */
	.badge-container {
		position: relative;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.badge-container:hover {
		transform: scale(1.05) rotate(2deg);
	}

	.badge-container:active {
		transform: scale(0.95) rotate(-1deg);
	}

	/* 图标光环效果 */
	.badge-container::before {
		content: '';
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		right: -8rpx;
		bottom: -8rpx;
		border-radius: 50%;
		background:
			conic-gradient(from 0deg,
				transparent 0deg,
				rgba(218, 165, 32, 0.1) 120deg,
				transparent 240deg,
				rgba(218, 165, 32, 0.05) 360deg);
		opacity: 0;
		animation: iconHalo 6s linear infinite;
		transition: opacity 0.3s ease;
	}

	.badge-container:hover::before {
		opacity: 1;
	}

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

		100% {
			transform: rotate(360deg);
		}
	}
</style>