MoeNovaClient/pages/my/userHomepage.vue

<template>
	<view class="page">
		<view class="topBody">
			<view class="header"
				:style="{ backgroundImage: `url(${bgImage || '../../static/me/theme3.jpg'})`, marginBottom: labelBoxHeight < 45 ? '-80rpx' : '-40rpx' }">
				<view class="header-box" :style="headerBoxStyle">
					<view class="reserveASeat"></view>
					<view class="benner-box">
						<view class="setUp-box">
							<view class="my-box">
								<image :src="`../../static/crowdFunding/back.png`" mode="widthFix" class="level-icon" />
							</view>
							<view class="settingBtn-box">

							</view>
						</view>
						<view class="profilePicture-box">
							<CircleAvatar class="avator" @click="goPage('/pages/my/editInfo')" :src="myinfo.avator">
							</CircleAvatar>
							<view class="profilePicture-box-right" @click="goPage('/pages/my/creativeExpert')">
								<view class="one-omit">{{ myinfo.nickname }}</view>
								<image v-if="myinfo.my_level || myinfo.my_level == 0"
									:src="`../../static/icon/level_${myinfo.my_level}.png`" mode="widthFix"
									class="level-icon" />
							</view>
						</view>

						<view class="intro_row" @click="goPage('/pages/my/editInfo')">
							<block v-if="myinfo.content == ''">
								<text class="intro_text two-omit">添加简介</text>
								<image src="@/static/me/xiugai.png" mode="widthFix" class="add_icon">
								</image>
							</block>
							<uv-text color="#fff" v-else :text="formatText(myinfo.content)" class="intro_text two-omit">
							</uv-text>
						</view>


						<view class="label-box" id="labelBox">
							<view class="label-item sex-item">

								<image src="../../static/icon/wd_icon_nv.png" mode="widthFix" v-if="myinfo.sex_id == 2">
								</image>
								<image src="../../static/icon/wd_icon_nan.png" mode="widthFix" v-else></image>
							</view>
							<view class="label-item" v-for="(item, index) in aihao_tags" :key="index + item">
								{{ item }}
							</view>
						</view>

						<view class="follow_info">
							<view class="follow-box">
								<view class="num">{{ scientificCounting(myinfo.num_attention) }}</view>
								<view class="label">关注</view>
							</view>
							<!-- <view class="separator"></view> -->
							<view class="follow-box">
								<view class="num">{{ scientificCounting(myinfo.num_fans) }}</view>
								<view class="label">粉丝</view>
							</view>
							<!-- <view class="separator"></view> -->
							<view class="follow-box">
								<view class="num">{{ scientificCounting(myinfo.num_like) }}</view>
								<view class="label">获赞</view>
							</view>
						</view>

					</view>

					<view class="card-box" v-if="false">
						<view class="card-top">
							<view class="top-box">
								1
							</view>
							<view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
								<view class="userinfo-left">
									<CircleAvatar class="avator" :src="myinfo.avator"></CircleAvatar>
								</view>
								<view class="userinfo-right">
									<view class="nickname">
										<text class="one-omit">{{ myinfo.nickname }}</text>

										<view class="level">Lv{{ myinfo.my_level }}</view>
									</view>
									<view class="label">

									</view>
								</view>
							</view>

							<view class="line"></view>
							<view class="bom">

								<view class="points-box">
									<view class="points" @click="isRecharge ? goPage('/pages/vip/M_purchase') : ''">
										<image src="@/static/icon/wd_icon_coin.png" mode=""></image>
										<text>{{ myinfo.num_gmm | formatNumberToK }}</text>
										<image class="money-add" v-if="isRecharge" src="/static/icon/coin_add.png"
											mode="aspectFit"></image>
									</view>
									<view class="points"
										@click="isRecharge ? goPage('/pages/my/job?type=recharge') : ''">
										<image src="@/static/icon/coin_cd.png" mode=""></image>
										<text>{{ myinfo.num_gmd | formatNumberToK }}</text>
										<image class="money-add" v-if="isRecharge" src="/static/icon/coin_add.png"
											mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="card-bom" v-if="isRecharge" @click="goPage('/pages/vip/index')"> -->

					</view>
				</view>
			</view>


			<view class="myinfo">
				<view class="tablist">
					<view class="item" :class="{ active: firstLevelNavActive === 0 }"
						@click="firstLevelNavActiveSwitch(0)">作品
						<view class="indicator-triangle"> </view>
					</view>
					<view class="item" :class="{ active: firstLevelNavActive === 1 }"
						@click="firstLevelNavActiveSwitch(1)">帖子
						<view class="indicator-triangle"> </view>
					</view>
				</view>
				<!-- 作品列表 -->
				<view class="numlist">
					<WorkItem v-for="(item, index) in worksList" :subtitle="true" :key="index" :item="item"
						@click="goWork(item)" />

					<view class="item" v-for="(item2, index2) in worksList0" :key="index2"
						style="margin-bottom: 28rpx;">
						<view class="num" @click="goWork(item2)">
							<WorkItem :item="item2" style="margin-bottom: 12rpx" />

							<view class="maskLayer"></view>
							<!-- 当activeTab为1时显示队列状态 -->

							<view class="name one-omit" style="
					  font-family: 'PingFang SC-Medium';
					  font-weight: 500;
					  font-size: 28rpx;
					  color: #1a4d2e;
										max-width: 40vw;
					">
								{{ item2.title || item2.description || "作品" + index }}
							</view>

						</view>
					</view>


					<view v-if="isDataLoaded && worksList.length === 0" class="empty-state">
						<image src="@/static/icon/xx_img_zanwuxiaoxi.png" mode="aspectFit" class="empty-image">
						</image>
						<text class="empty-text">暂无作品</text>
						<text class="empty-subtext">他还没有开始创作作品~</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 确认框 -->
		<CustomConfirm ref="customConfirm"></CustomConfirm>
		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>

		<!-- SharePopup组件 -->
		<SharePopup :visible="showShare" :userId="userId" :share-title="shareTitle" :share-desc="shareDesc"
			:share-img="shareImg" view="userHomepage" @close="showShare = false" />
	</view>
</template>

<script>
	import tabbar from "@/mixins/tabbar";
	import CustomConfirm from "@/components/custome-confirm/customeConfirm.vue";
	import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";
	import WorkItem from "@/components/WorkItem/WorkItem.vue";
	import SharePopup from "@/components/SharePopup/SharePopup.vue";
	import DialogBox from "@/components/DialogBox/DialogBox.vue";

	export default {
		components: {
			CustomConfirm,
			CircleAvatar,
			WorkItem,
			SharePopup,
			DialogBox
		},
		mixins: [tabbar],
		data() {
			return {
				bgImage: '',
				title: "",
				sel: 1,
				firstLevelNavActive: 0,
				labelBoxHeight: 0,
				myinfo: {
					avator: "../../static/logo.png",
					nickname: "",
					content: "",
					sex_id: 1,
					my_level: 1,
					num_attention: 0,
					num_fans: 0,
					num_like: 0,
					wxkf: ""
				},
				aihao_tags: [],
				activeTab: 0,
				offset: 0,
				hasMore: true,
				isLoading: false,
				worksList0: [],
				worksList: [],
				showShare: false,
				shareTitle: "",
				shareDesc: "",
				shareImg: "",
				userId: 0,
				id: 0,
				isDataLoaded: false,
				headerBoxStyle: {
					background: 'linear-gradient(to bottom,transparent, rgba(0, 0, 0, .8))'
				},
			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			} else {
				this.id = 1;
			}
		},
		onShow() {
			uni.$emit("check_login", () => {});
			this.offset = 0;
			this.hasMore = true;
			this.worksList = [];
			this.loadInfo();
			this.loadWorksList();
		},
		onReachBottom() {
			if (this.hasMore && !this.isLoading) {
				this.loadMoreWorks();
			}
		},
		methods: {
			// 关注作者
			followTheAuthor(n) {
				uni.request({
					url: this.$apiHost + "/Member/attention",
					data: {
						uuid: getApp().globalData.uuid,
						id: this.id,
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						console.log("点赞结果:", res.data);
						uni.showToast({
							title: res.data.str,
							icon: "none",
						});
						this.loadInfo();
					},
					fail: (e) => {
						console.log("关注失败:", e);
						uni.showToast({
							title: "网络请求失败",
							icon: "none",
						});
					},
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			clickShare(item) {
				this.showShare = true;
			},
			goPage(page) {
				if (page == "kefu") {
					let that = this;
					// #ifdef APP-PLUS
					plus.share.getServices((res) => {
						const wechat = res.find((i) => i.id === "weixin");
						if (wechat) {
							wechat.openCustomerServiceChat({
									corpid: "wwbc06aa8311b6ac08",
									url: that.myinfo.wxkf,
								},
								(src) => {
									console.log("success:");
								},
								(err) => {
									console.log("error:");
								}
							);
						} else {
							uni.showToast({
								title: "没有检测到微信，请先安装",
								icon: "error",
							});
						}
					});
					// #endif
				} else if (page != "") {
					uni.navigateTo({
						url: page,
					});
				}
			},
			loadInfo() {
				console.log({
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
				});
				uni.request({
					url: this.$apiHost + "/Member/getHomeInfo",

					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey,
						user_id: this.id,
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						console.log("----:", JSON.parse(JSON.stringify(res.data)));
						this.shareTitle = res.data.nickname
						this.shareDesc = res.data.content
						this.shareImg = res.data.avator
						this.userId = res.data.user_id
						if (res.data.need_login == "yes") {
							uni.removeStorageSync("wapptoken");
							uni.redirectTo({
								url: "/pages/login/login",
							});
							return;
						}
						if (res.data.aihao) {
							this.aihao_tags = res.data.aihao.split(",");
						}
						this.myinfo = res.data;
						if (res.data.bgimg) {
							this.bgImage = res.data.bgimg;
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					},
				});
			},
			switchTab(index) {
				this.activeTab = index;
				this.offset = 0;
				this.hasMore = true;
				this.worksList = [];
				this.loadWorksList();
			},
			loadWorksList() {
				if (this.isLoading) return;
				this.isLoading = true;
				this.isDataLoaded = false;

				// 根据activeTab选择不同的API
				let apiUrl = "";
				if (this.firstLevelNavActive == 0) {
					apiUrl = "/Work/getlist";
				} else if (this.firstLevelNavActive == 1) {
					apiUrl = "/Article/getlist";
				}
				uni.request({
					url: this.$apiHost + apiUrl,
					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey,
						type: "other", // 固定为my，表示获取自己的作品
						offset: this.offset,
						user_id: this.id
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
						if (res.data.success == "yes" && res.data.list) {
							if (res.data.list.length > 0) {
								this.worksList = [...this.worksList, ...res.data.list];
								this.offset += res.data.list.length;
							}

							if (res.data.list.length < 20) {
								this.hasMore = false;
							}
						} else {
							this.hasMore = false;
							this.worksList = [];
						}
					},
					complete: () => {
						this.isLoading = false;
						this.isDataLoaded = true;
					},
					fail: (e) => {
						console.log("请求列表失败:", e);
						this.isLoading = false;
						this.isDataLoaded = true;
						this.worksList = [];
					},
				});
			},
			firstLevelNavActiveSwitch(n) {
				this.firstLevelNavActive = n;
				this.offset = 0;
				this.hasMore = true;
				this.worksList = [];
				if (this.firstLevelNavActive == 0) {
					this.activeTab = 0;
				}
				this.loadWorksList();
			},

			loadMoreWorks() {
				if (this.hasMore && !this.isLoading) {
					this.loadWorksList();
				}
			},
			updateDataList() {
				this.data_list = this.worksList.map((item) => {
					return {
						url: item.images || item.img_url || item.url || "../../static/logo.png",
						title: item.title || item.description || "作品",
						id: item.id,
					};
				});
			},
			goWork(item) {
				uni.$emit("check_login", () => {});
				if (this.firstLevelNavActive == 0) {
					uni.navigateTo({
						url: "/pages/index/workDetail?id=" + item.id,
					});
				} else {
					uni.navigateTo({
						url: "/pages/index/articleDetail?id=" + item.id,
					});

				}
			},
			navigateToFollow() {
				uni.navigateTo({
					url: "/pages/my/follow",
				});
			},
			getLabelBoxHeight() {
				setTimeout(() => {
					const query = uni.createSelectorQuery();
					query.select('#labelBox').boundingClientRect(data => {
						if (data) {
							this.labelBoxHeight = data.height;
							console.log('label-box高度:', this.labelBoxHeight);
						}
					}).exec();
				}, 100);
			},
			formatText(text) {
				if (!text) return '';
				return text.length > 20 ? text.substring(0, 20) + '...' : text;
			},
			scientificCounting(num) {
				if (!num) {
					return 0;
				}
				if (num < 1000) {
					return num;
				} else if (num < 1000000) {
					return (num / 1000).toFixed(1) + 'k';
				} else if (num < 1000000000) {
					return (num / 1000000).toFixed(1) + 'M';
				} else {
					return (num / 1000000000).toFixed(1) + 'B';
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		background-color: #fff;
		width: 100%;
		min-height: 100vh;
	}

	.reserveASeat {
		width: 100%;
		height: calc(var(--status-bar-height));
	}

	.topBody {
		width: 750rpx;
		background: transparent;
	}


	.header {
		background-position: center;
		background-size: auto 100%;
		min-height: calc(700rpx + var(--status-bar-height));

		// margin-bottom:-80rpx ;
		.header-box {
			width: 100%;
			height: 100%;
			min-height: calc(700rpx + var(--status-bar-height));
			padding: 20rpx;
			padding-top: 48rpx;
			background-position: center bottom;
			background-size: 100% auto;
		}

		.card-box {
			width: 100%;
			min-height: 490rpx;
			position: relative;
			left: 0;
			top: 0%;
			overflow: hidden;

			.card-top {
				height: 410rpx;
				width: 100%;
				background: url("../../static/me/my-card-bg.png") top center / 100% auto,
					#fff;
				position: absolute;
				top: 0%;
				left: 0;
				z-index: 5;
				padding: 24rpx 0;
				padding-top: 16rpx;
				box-sizing: border-box;
				border-radius: 25rpx;

				.top-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// padding-top: 8rpx;
					background: url("../../static/me/car-top-bg-center.png") top center/ 146rpx 50rpx no-repeat;
					padding-right: 24rpx;
					padding-left: 24rpx;

					.hello-box {
						font-family: "CustomFont" !important;
						font-size: 36rpx;
						font-weight: 700;
					}

					.settingBtn-box {
						width: 148rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 64rpx;
							height: 64rpx;
						}
					}
				}

				.userinfo-box {
					min-height: 120rpx;
					width: 100%;
					display: flex;
					padding-right: 24rpx;
					padding-left: 24rpx;
					padding-top: 18rpx;

					.avator {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
					}

					.userinfo-right {
						.nickname {
							font-weight: bold;
							margin-bottom: 0rpx;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							display: flex;
							padding-bottom: 12rpx;

							>text {
								max-width: 380rpx;
								font-family: "PingFang SC-Bold";
								font-weight: 400;
								font-size: 36rpx;
							}

							image {
								width: 36rpx;
								margin-left: 8rpx;
								margin-right: 10rpx;
							}

							.level {
								font-weight: 400;
								font-size: 22rpx;
								font-family: "PingFang SC-Bold";
								background: linear-gradient(360deg, #acf934 0%, #ffe439 100%);
								border-radius: 8rpx;
								padding: 2rpx 8rpx;
							}
						}

						.label {
							height: 40rpx;
							// height: 110rpx;
							overflow: hidden;

							>view {
								color: #acf934;
								font-family: "PingFang SC-Medium";
								font-weight: 400;
								font-size: 24rpx;
								background: #1f1f1f;
								border-radius: 6px 6px 6px 6px;
								display: inline-block;
								margin-right: 10rpx;
								margin-bottom: 10rpx;
								padding: 6rpx 16rpx;
							}
						}
					}
				}

				.intro_row {
					width: 100%;
					display: flex;
					align-items: center;
					padding-right: 24rpx;
					padding-left: 24rpx;
					padding-top: 12rpx;
					padding-bottom: 12rpx;

					.intro_text {
						color: #1f1f1f;
						font-size: 24rpx;
						font-family: "PingFang SC-Bold";
						font-weight: 400;
						padding-right: 0rpx;

						::v-deep.uv-text__value {
							font-size: 26rpx !important;
						}
					}

					.add_icon {
						width: 28rpx;
						margin-left: 10rpx;
					}
				}

				.line {
					width: 100%;
					height: 2rpx;
					background-color: #f2f6f2;
					margin: 10rpx 0;
					margin-bottom: 20rpx;
				}

				.bom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 24rpx;
					padding-left: 24rpx;

					.follow_info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						max-width: 300rpx;

						.follow-box {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							text-align: center;
						}

						.num {
							width: 100%;
							font-size: 36rpx;
							font-weight: bold;
							color: #333;
						}

						.label {
							width: 100%;
							font-size: 24rpx;
							color: #999;
						}

						.separator {
							width: 2rpx;
							height: 24rpx;
							background-color: #e5e5e5;
							margin: 0 30rpx;
						}
					}

					.points-box {
						display: flex;
						justify-content: space-between;

						.points {
							display: flex;
							align-items: center;
							background: #f2f6f2;
							border-radius: 30rpx;
							padding: 6rpx 12rpx 6rpx 8rpx;

							&:first-child {
								margin-right: 18rpx;
							}

							image {
								width: 40rpx;
								height: 40rpx;
							}

							text {
								display: inline-block;
								padding-left: 4rpx;
								line-height: 0;
							}
						}
					}
				}

				.follow_info {
					// display: none;
				}
			}
		}

		.benner-box {
			.setUp-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.my-box {
					font-family: "CustomFont" !important;
					font-size: 36rpx;
					font-weight: 700;
					color: #fff;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.settingBtn-box {
					width: 148rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}
			}

			.profilePicture-box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-top: 60rpx;
				padding-bottom: 28rpx;

				.avator {
					width: 156rpx;
					height: 156rpx;
					margin-right: 16rpx;
				}

				.one-omit {
					max-width: 400rpx;
					font-size: 40rpx;
					font-family: "PingFang SC-Bold";
					font-weight: 400;
					color: #fff;
				}

				.profilePicture-box-right {
					image {
						width: 80rpx;
						height: 38rpx;
						margin-top: 10rpx;
					}
				}
			}

			.intro_row {
				width: 100%;
				display: flex;
				align-items: center;
				padding-right: 24rpx;
				padding-left: 24rpx;
				padding-top: 12rpx;
				padding-bottom: 12rpx;
				color: #fff;

				.intro_text {
					color: #fff;
					font-size: 24rpx;
					font-family: "PingFang SC-Bold";
					font-weight: 400;
					padding-right: 0rpx;

					::v-deep.uv-text__value {
						font-size: 26rpx !important;
					}
				}

				.add_icon {
					width: 28rpx;
					margin-left: 10rpx;
				}
			}

			.label-box {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				// height: 55rpx;
				width: 100%;

				// overflow: hidden;
				.label-item {
					background: rgba(255, 255, 255, 0.1);
					border-radius: 12rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.1);
					display: inline-block;
					color: #fff;
					font-size: 24rpx;
					font-family: "PingFang SC-Bold";
					font-weight: 400;
					padding: 6rpx 16rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;

					image {
						width: 30rpx;
					}

					&.sex-item {
						border-radius: 50%;
						width: 40rpx;
						height: 40rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						padding: 0;
						margin-right: 0;
						margin-bottom: 0;
						margin-right: 10rpx;
					}
				}
			}

			.follow_info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				max-width: 300rpx;
				padding-bottom: 28rpx;
				padding-top: 28rpx;

				.follow-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text-align: center;
				}

				.num {
					width: 100%;
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;
				}

				.label {
					width: 100%;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.5);
				}

				.separator {
					width: 2rpx;
					height: 24rpx;
					background-color: #e5e5e5;
					margin: 0 30rpx;
				}
			}

			.bom-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bom-item {
					width: 218rpx;
					height: 96rpx;
					border-radius: 16rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.1);
					padding: 10rpx 18rpx;
					background: url("../../static/me/box-bg-1.png") center center / 100% 100%;

					&.bom-item2 {
						background: url("../../static/me/box-bg-2.png") center center / 100% 100%;
					}

					&.bom-item3 {
						background: url("../../static/me/box-bg-3.png") center center / 100% 100%;
					}

					.bom-item-title {
						font-size: 24rpx;
						color: #fff;
					}

					.bom-item-subtitle {
						font-size: 20rpx;
						color: rgba(255, 255, 255, 0.5);
					}
				}
			}
		}
	}

	.thread {
		height: 210rpx;
		padding: 50rpx;
		font-size: 52rpx;
		color: #6e6a6a;
		padding-top: 80rpx;
	}

	.myinfo {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 28rpx 28rpx 0 0;
		padding: 24rpx 20rpx;
		padding-top: 14rpx;
		justify-content: flex-start;
		box-sizing: border-box;
		background: #fff;
		overflow: hidden;

		.line {
			width: 100%;
			height: 2rpx;
			background: #f2f6f2;
			margin-bottom: 8rpx;
			margin-top: 32rpx;
		}

		.subtitle {
			display: flex;

			.item {
				padding: 0 43rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				font-family: "PingFang SC-Medium";

				&.active {
					font-family: "PingFang SC-Bold";
					font-weight: 400;
					font-size: 28rpx;
					color: #1f1f1f;
				}
			}
		}

		.tablist {
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;
			background: #ffffff;

			.item {
				padding: 15rpx 38rpx;
				color: #1f1f1f;
				font-size: 28rpx;
				background: #f2f6f2;
				margin-right: 20rpx;
				border-radius: 30rpx;
				position: relative;
				left: 0;
				top: 0;
				line-height: 1;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

				&:active {
					transform: scale(0.95);
					// box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
				}

				.indicator-triangle {
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 10rpx solid #acf934;
					display: none;
					transition: all 0.3s ease;
				}

				&.active {
					background: #acf934;
					font-family: "CustomFont" !important;
					box-shadow: 0 4rpx 12rpx rgba(172, 249, 52, 0.3);

					.indicator-triangle {
						display: block;
						transform: translateX(-50%) scale(1.2);
					}
				}
			}
		}


		.numlist {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			margin-top: 30rpx
		}

	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		margin-top: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		width: 710rpx;

		.empty-image {
			width: 240rpx;
			height: 240rpx;
			margin-bottom: 30rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 16rpx;
			font-weight: 500;
		}

		.empty-subtext {
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>