<template>
	<view class="content">
		<!-- 达人信息 -->
		<view class="info">
			<image class="info-bg" src="https://cdn.his.cdwjyyh.com/images/dianpu_top_bg.png"></image>
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="search-box">
				<view class="back-box">
					<image class="img" @click="goBack" src="https://cdn.his.cdwjyyh.com/images/back_white_icon.png"></image>
				</view>
				<view class="search-cont">
					<image class="icon-search" src="https://cdn.his.cdwjyyh.com/images/search.png" mode=""></image>
					<input type="text" disabled value="" placeholder="搜索本店"
						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" @click="toSearch" />
				</view>
			</view>
			<view class="shop-info">
				<view class="info-block">
					<view class="left">
						<image class="head" :src="storeInfo.logoUrl || 'https://cdn.his.cdwjyyh.com/images/img.png'"></image>
						<view class="shop-box">
							<view class="shop-name">
								<text class="name">{{ storeInfo.storeName || '' }}</text>
							</view>
							<view class="txt">
								<view class="rating">
									<image class="star" src="https://cdn.his.cdwjyyh.com/images/star.png"></image><text>5.0分</text>
								</view>
								<view class="line"></view>
								<view class="fans">{{storeInfo.storeFollowers||'0'}}粉丝</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view :class="isFollow?'button isFollow':'button '" @click="toggleFollow">
							<image v-if="!isFollow" class="icon" src="https://cdn.his.cdwjyyh.com/images/guanzhu.png"></image>
							<text>{{isFollow?'已关注':'关注'}}</text>
						</view>
					</view>
				</view>
				<view class="data-block">
					<view class="number-block">
						<view class="item">
							<text class="txt-item">商品品质</text>
							<text class="number-item">平均惊艳度 {{storeInfo.amazingDegree||'0'}}%</text>
						</view>
						<view class="item">
							<text class="txt-item">发货时效</text>
							<text class="number-item">发货准时率 {{storeInfo.deliveryOnTimeRate||'0'}}%</text>
						</view>
						<view class="item">
							<text class="txt-item">客服响应</text>
							<text class="number-item">平均{{storeInfo.serviceResponseTime||'0'}}秒回复</text>
						</view>
					</view>
				</view>
				<view class="card">
					<view class="card-item">
						<image class="img" src="https://cdn.his.cdwjyyh.com/images/fanghua_golden.png"></image>
						<text class="ranking">达人榜 第{{storeInfo.sort||'1'}}名</text>

					</view>
				</view>
			</view>
		</view>
		<view class="vedio-block">
			<view class="tab-wrapper">
				<!-- 商品标签 -->
				<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
					<text class="tab-text">商品</text>
					<image v-if="activeTab === 0" src="https://cdn.his.cdwjyyh.com/images/tab_hover.png" class="underline"></image>
				</view>
				<!-- 生活号标签 -->
				<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
					<text class="tab-text">生活号</text>
					<image v-if="activeTab === 1" src="https://cdn.his.cdwjyyh.com/images/tab_hover.png" class="underline"></image>
				</view>
			</view>
			<view class="tab-inner" v-if="activeTab === 0">
				<view v-for="(item,index) in selectList" :key="index"
					:class="activeIndex == item.value?'item active':'item'" @click="onSelect(item)">
					<view class="text">
						<text>{{ item.name }}</text>
						<image v-if="item.value==1&&activeIndex == item.value" class="tab-bg" src="https://cdn.his.cdwjyyh.com/images/shaixuan_moren.png" mode=""/>
						<image v-if="item.value==1" class="tab-bg" src="/static/images/rise_icon.png" mode=""/>
						<image v-if="item.value==1" class="tab-bg" src="/static/images/drop_icon.png" mode=""/>
						
					</view>
				</view>
			</view>
			<view class="tab-inner" v-if="activeTab === 1">
				<view v-for="(item,index) in selectList2" :key="index"
					:class="activeIndex == item.value?'item active':'item'" @click="onSelect(item)">
					<view class="text">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
			<!-- 视频文章列表 -->
			<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="list" v-if="activeTab === 1">
					<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
						<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
						<image class="video-icon" src="https://cdn.his.cdwjyyh.com/images/video_icon.png"></image>
						<image class="suspension-icon" src="https://cdn.his.cdwjyyh.com/images/suspension.png"></image>
						<view class="info-block">
							<view class="title">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...</view>
							<view class="item">
								<view class="flex">
									<image class="head" src="https://cdn.his.cdwjyyh.com/images/img.png"></image>
									<text class="name">崔医生</text>
								</view>
								<view class="flex">
									<image class="icon" src="https://cdn.his.cdwjyyh.com/images/zan_icon.png"></image>
									<text>141</text>
								</view>
							</view>
							<view class="card">
								<view class="card-item">
									<image class="img" src="https://cdn.his.cdwjyyh.com/images/jinbang_font.png"></image>
									<text class="ranking">达人榜 第15名</text>
									<text class="bold">top.1</text>
								</view>
								<image class="go" src="https://cdn.his.cdwjyyh.com/images/jb_arrow_right_icon.png"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="goods-list" v-if="activeTab === 0">
					<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
						<view class="img-box">
							<image :src="item.firstImage||'https://cdn.his.cdwjyyh.com/images/jmg.png'" mode="aspectFit"></image>
						</view>
						<view class="info-box">
							<view class="title ellipsis2">{{item.title}}</view>
							<view class="intro ellipsis">{{item.intro}}</view>
							<view class="sale">已售 {{item.sales}} | 惊艳度{{item.amazingDegree}}%</view>

							<view class="lable-group">
								<view class="lable-item">9.5折</view>
								<view class="lable-item">限购1份</view>
							</view>
							<view class="prce-num">
								<view class="price">
									<text class="unit">¥</text><text
										class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
								</view>
								<view class="cart-img" @click="navgetTo('../shopping/cart')">
									<image class="w40 h40" src="https://cdn.his.cdwjyyh.com/images/add_car.png"></image>
								</view>
							</view>
							<view class="card">
								<view class="card-item">
									<image class="img" src="https://cdn.his.cdwjyyh.com/images/ranking_icon.png"></image>
									<text class="ranking">健康新品热销榜</text>
									<text class="bold">TOP.2</text>
								</view>
								<image class="go" src="https://cdn.his.cdwjyyh.com/images/jb_arrow_right_icon.png"></image>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<view class="side">
			<view class="side-item">
				<button class="button-reset" open-type="contact">
					<image class="icon" src="https://cdn.his.cdwjyyh.com/images/service_icon.png"></image>
				</button>
			</view>
			<view class="side-item">
				<button open-type="share" class="button-reset">
					<image class="icon" src="https://cdn.his.cdwjyyh.com/images/share_icon.png" mode="widthFix" />
				</button>
			</view>
			<view class="side-item" @click="scrollToTop">
				<image class="icon" src="https://cdn.his.cdwjyyh.com/images/top_icon.png"></image>
			</view>
		</view>

	</view>
</template>

<script>
import{
		getStore,//店铺查询
		follow,//关注店铺
		getStoreProduct,//店铺商品查询

	} from '@/api/product.js'
	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				storeInfo: {},
				isFollow: false, //关注
				activeIndex: 0,
				selectList: [{
					name: '销量',
					value: 0
				}, {
					name: '价格',
					value: 1
				}, {
					name: '新品',
					value: 2
				}, {
					name: '惊艳度',
					value: 3
				}],
				selectList2: [{
					name: '最新',
					value: 0
				}, {
					name: '浏览量',
					value: 1
				}, {
					name: '下载量',
					value: 2
				}],
				activeTab: 0,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				list: [],
				downOption: {
					offset: 80,
					use: true,
					auto: false
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
				mescroll: null,
				dataList: [],
				storeId: '',
			}
		},
		onLoad(options) {
			// if (!uni.getStorageSync("AppToken")) {
			// 	uni.navigateTo({
			// 		url: '/pages/auth/login'
			// 	});
			// }
			if(options.storeId){
				this.storeId = options.storeId;
			}
			this.getStore();
			if(this.activeTab == 0){
				this.getStoreProduct();
		}
;
		},
		onUnload() {

		},
		methods: {
			getStoreProduct(){
				const params = {
					keyword: "", 
					priceSort: "",
					salesSort: "asc", // asc desc
					amazingSort: "", 
					storeId: this.storeId
				};
				getStoreProduct(params).then(
					res => {
						if (res.code == 200) {
							console.log("查询店铺商品:", res);
							this.dataList = res.data;
						}
					},
					rej => {
						console.error("查询店铺商品失败:", rej);
					}
				);
			},
			follow() {
				console.log("关注取消用户")
				const action = this.isFollow ? UNLIKE : LIKE;
				const data = {
					storeId: this.storeId,
					action: action
				};
				follow(data).then(res => {
					if (res.code == 200) {
						this.isFollow = !this.isFollow;
						this.getExpertHomePage();
						console.log(action + "用户", res)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {});
			},
			// follow(){
			// 	follow().then(
			// 		res => {
			// 			if (res.code == 200) {
			// 				console.log("关注店铺:", res);
			// 				this.isFollow = !this.isFollow;
			// 			}
			// 		},
			// 		rej => {
			// 			console.error("关注店铺失败:", rej);
			// 	}
			// 	)
			// },
			
			//查询店铺
			getStore() {
				if(!this.storeId){
					uni.showToast({
						title: '店铺ID不能为空',
						icon: 'none'
					});
			return;}
				getStore(this.storeId).then(
					res => {
						if (res.code == 200) {
							console.log("查询店铺:", res);
							this.storeInfo = res.data;
							// 假设返回的数据中包含是否关注的信息
							if (res.data.isFollow !== undefined) {
								this.isFollow = res.data.isFollow;
							}
						}
					},
					rej => {
						console.error("查询店铺失败:", rej);
					}
				);
			},
				goBack(){
uni.navigateBack({
	delta: 1
})
		},
			// 一键到顶
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300 // 动画时间，单位ms
				});
			},
			onSelect(item) {
				console.log("item", item)
				this.activeIndex = item.value
			},
			splitPrice(price) {
				const priceStr = parseFloat(price).toFixed(2).toString();
				return {
					integer: priceStr.split('.')[0],
					decimal: priceStr.split('.')[1]
				};
			},
			switchTab(tab) {
				if (this.activeTab === tab) return;
				this.activeTab = tab;
				this.$emit('change', tab);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},

			// 下拉刷新回调
			downCallback(mescroll) {
				this.list = [];
				mescroll.resetUpScroll();
			},

			// 上拉加载回调
			upCallback(mescroll) {
				// 由于去掉了 liveList 接口，这里直接结束上拉加载，返回空数据
				mescroll.endBySize(0, 0);
			},

			goLive(item) {
				uni.navigateTo({
					// &immediate=true
					url: `./living?liveId=${item.liveId}`
				});
			},
			// 关注/取消关注店铺
			toggleFollow() {
				if (!this.storeInfo || !this.storeInfo.storeId) {
					console.error('店铺信息不存在');
					return;
				}
				
				const params = {
					storeId: this.storeInfo.storeId,
					action: !this.isFollow?'LIKE':'UNLIKE'
				};
				
				follow(params).then(
					res => {
						if (res.code == 200) {
							console.log(this.isFollow ? "取消关注成功:" : "关注成功:", res);
							this.isFollow = !this.isFollow;
							uni.showToast({
								title: this.isFollow ? "关注成功" : "取消关注成功",
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.msg || (this.isFollow ? "取消关注失败" : "关注失败"),
								icon: 'none'
							});
						}
					},
					rej => {
						console.error(this.isFollow ? "取消关注失败:" : "关注失败:", rej);
						uni.showToast({
							title: this.isFollow ? "取消关注失败" : "关注失败",
							icon: 'none'
						});
					}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F7FA;

		// 达人信息
		.info {

			width: 100%;
			height: 600rpx;
			position: relative;
			z-index: 0;

			.info-bg {
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
			}

			.search-box {
				display: flex;
				align-items: center;

				.search-cont {
					box-sizing: border-box;
					display: flex;
					align-items: center;
					width: 436rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					padding: 4rpx 4rpx 4rpx 24rpx;

					.icon-search {
						width: 28rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}

					input {
						height: 60rpx;
						line-height: 60rpx;
						flex: 1;
					}
				}

				.back-box {
					display: flex;
					align-items: center;
					margin-left: 24rpx;

					.img {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.shop-info {
				padding: 24rpx;
				background-color: #fff;
				margin: 36rpx 24rpx 24rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.info-block {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;

						.head {
							width: 88rpx;
							height: 88rpx;
							margin-right: 20rpx;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
						}

						.shop-box {
							.shop-name {
								display: flex;

								.name {
									font-weight: 600;
									font-size: 34rpx;
									color: #333333;
									margin-right: 16rpx;
								}
							}

							.txt {
								margin-top: 4rpx;
								font-weight: 400;
								font-size: 22rpx;
								color: #FFFFFF;
								margin: 8rpx 0 16rpx;
								display: flex;
								align-items: center;

								.rating {
									font-weight: 500;
									font-size: 24rpx;
									color: #F4A007;
									display: flex;
									align-items: center;

									.star {
										width: 24rpx;
										height: 24rpx;
										margin-right: 4rpx;
									}
								}

								.line {
									width: 2rpx;
									height: 20rpx;
									background: #CCCCCC;
									margin: 0 20rpx;
								}

								.fans {
									font-size: 24rpx;
									color: #999999;
								}

							}
						}
					}

					.right {
						.button {
							width: 128rpx;
							height: 52rpx;
							background: linear-gradient(127deg, #38D97D 12.38%, #02B176 100%);
							border-radius: 26rpx 26rpx 26rpx 26rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							color: #ffffff;

							&.isFollow {
								background: #F0F0F0;
								color: #666666;
							}

							.icon {
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}
						}
					}
				}

				.data-block {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.number-block {
						display: flex;

						.item {
							margin-right: 40rpx;
							display: flex;
							flex-direction: column;
							align-items: center;

							&:last-child {
								margin-right: 0;
							}

							.number-item {
								font-size: 26rpx;
								color: #333333;
							}

							.txt-item {
								margin-bottom: 10rpx;
								font-size: 24rpx;
								color: #666666;
							}
						}
					}

				}

				.card {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #FFF5EB;
					width: 100%;
					height: 48rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 12rpx 16rpx;
					box-sizing: border-box;
					margin-top: 28rpx;

					.card-item {
						display: flex;
						align-items: center;

						.img {
							width: 142rpx;
							height: 24rpx;
							margin-right: 14rpx;
						}

						.ranking {
							font-size: 22rpx;
							color: #D46C0D;
						}
					}


				}
			}

		}

		//达人视频
		.vedio-block {
			position: relative;
			z-index: 1;
			background-color: #FFFFFF;
			// margin-top: -74rpx;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 26rpx 0;

			.tab-wrapper {
				display: flex;
				height: 88rpx;
				padding: 0 40rpx;
				position: relative;

				.tab-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					color: #666666;

					&.active {
						font-weight: 600;
						font-size: 32rpx;
						color: #02B176;
					}

					.tab-text {
						font-size: 32rpx;
						transition: all 0.3s ease;
					}

					.underline {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 12rpx;
						animation: slideIn 0.3s ease;
					}
				}
			}

			@keyframes slideIn {
				from {
					opacity: 0;
					transform: translateX(-50%) scaleX(0.5);
				}

				to {
					opacity: 1;
					transform: translateX(-50%) scaleX(1);
				}
			}

			.tab-inner {
				padding: 0 88rpx;
				height: 88upx;
				line-height: 88upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #666666;

				.item {
					white-space: nowrap;
					line-height: 1;
					font-family: PingFang SC;
					margin-right: 48upx;
					display: flex;
					align-items: center;
					justify-content: center;

					&:last-child {
						margin-right: 0;
					}

					&.active {
						font-weight: 600;
						color: #02B176;
					}

					.text {
						position: relative;
						z-index: 1;
						display: flex;
						align-items: center;
					}

					.tab-bg {
						width: 24upx;
						height: 24upx;
						margin-left: 8rpx;
					}
				}

				.icon-search {
					display: flex;
					align-items: center;

					.line {
						width: 2rpx;
						height: 24rpx;
						background: #EEEEEE;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						margin: 0 20rpx;
					}

					image {
						width: 32upx;
						height: 32upx;
					}

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

				}

			}

			.list {
				padding: 24rpx 24rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.list-item {
					width: 342rpx;
					margin-bottom: 18rpx;
					position: relative;
					display: flex;
					flex-direction: column;

					.img {
						width: 100%;
						border-radius: 16rpx 16rpx 0rpx 0rpx;

					}

					.video-icon {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 20rpx;
						right: 20rpx;
					}

					.suspension-icon {
						width: 144rpx;
						height: 144rpx;
						position: absolute;
						top: -14rpx;
						right: 0rpx;
					}

					.info-block {
						border-radius: 0rpx 0rpx 16rpx 16rpx;
						padding: 12rpx 20rpx 20rpx;
						box-sizing: border-box;
						width: 100%;
						background: #FFFFFF;
						display: flex;
						flex-direction: column;

						.title {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 20rpx;
						}

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

							.flex {
								display: flex;
								align-items: center;
								font-size: 22rpx;
								color: #999999;
							}

							.icon {
								width: 32rpx;
								height: 32rpx;
								margin-right: 4rpx;
							}

							.head {
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
								margin-right: 8rpx;
							}

							.name {
								color: #757575;
							}
						}

						text {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.card {

							display: flex;
							justify-content: space-between;
							align-items: center;
							background: #FFF5EB;
							width: 302rpx;
							height: 40rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 1rpx solid #F3E2D0;
							padding: 8rpx;
							box-sizing: border-box;

							.card-item {
								display: flex;
								align-items: center;

								.img {
									width: 48rpx;
									height: 24rpx;
									margin-right: 8rpx;
								}

								.ranking {
									font-size: 22rpx;
									color: #D46C0D;
								}

								.bold {
									font-family: Roboto Flex, Roboto Flex;
									font-weight: 600;
									font-size: 24rpx;
									color: #F4A007;
									margin-right: 6rpx;
									transform: skewX(-8deg);
									margin-left: 4rpx;
									/* 负值向左倾斜，正值向右倾斜 */
									display: inline-block;
								}
							}

							.go {
								width: 16rpx;
								height: 16rpx;
							}
						}
					}

				}

				.list-item:nth-child(2n) {
					margin-right: 0;
				}
			}

			.goods-list {
				padding: 20upx;
				display: flex;
				flex-wrap: wrap;

				.item {
					margin-right: 18rpx;
					margin-bottom: 18rpx;
					width: 342rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					overflow: hidden;

					&:nth-child(2n) {
						margin-right: 0;
					}

					.img-box {
						width: 100%;
						height: 342upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info-box {
						box-sizing: border-box;
						padding: 20upx 20upx 30upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							margin-bottom: 4rpx;
						}

						.intro {
							font-weight: 400;
							font-size: 22rpx;
							color: #D46C0D;
							margin-bottom: 8upx;
						}

						.sale {
							font-size: 21rpx;
							color: #999999;
						}

						.lable-group {
							display: flex;
							margin-top: 8rpx;

							.lable-item {
								margin-right: 8rpx;
								height: 30rpx;
								padding: 0 8rpx;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								border: 1rpx solid #FFA599;
								font-size: 21rpx;
								color: #FF4B33;
							}
						}

						.prce-num {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 8upx;

							.price {
								font-weight: 600;
								font-size: 26rpx;
								color: #FA341E;
								font-size: 26rpx;

								.unit {
									font-size: 20upx;
								}

								.bold {
									font-size: 36upx;
								}
							}
						}

						.card {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							background: #FFF4E8;
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							width: 100%;
							height: 40rpx;
							padding: 8rpx 10rpx;
							box-sizing: border-box;

							.card-item {
								display: flex;
								align-items: center;

								.img {
									width: 24rpx;
									height: 24rpx;
									margin-right: 4rpx;
								}

								.ranking {
									font-size: 20rpx;
									color: #4D4D4D;
								}

								.bold {
									font-family: Roboto Flex, Roboto Flex;
									font-weight: 600;
									font-size: 24rpx;
									color: #F4A007;
									margin-right: 6rpx;
									transform: skewX(-8deg);
									/* 负值向左倾斜，正值向右倾斜 */
									display: inline-block;
									margin-left: 4rpx;
									/* transform需要inline-block或block */
								}
							}

							.go {
								width: 16rpx;
								height: 16rpx;
							}
						}
					}
				}
			}
		}

		.side {
			position: fixed;
			top: 52%;
			right: 32rpx;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			align-items: center;
			will-change: transform;

			.side-item {
				padding: 12rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.05);
				margin-bottom: 24rpx;
				border-radius: 50%;

				.button-reset {
					background-color: transparent !important;
					padding: 0 !important;
					line-height: 1 !important;
					margin: 0 !important;
					width: auto !important;
					font-weight: 500 !important;
					border-radius: none !important;

					&::after {
						border: none !important;
						padding: 0 !important;
						margin: 0 !important;
					}
				}

				.icon {
					display: block;
					width: 48rpx;
					height: 48rpx;
				}
			}
		}


	}
</style>