sports-miniapp/src/pages/index/gymPay/index.vue

<template>
	<!-- 不同类型进入的loadType（1：学校课程；2:体育馆课程;3:教练课程） -->
	<view class="content">
		<view class="g-orderinfo-card">
			<view class="g-shoping-info" v-if="previewCourseInfo">
				<image class="shoping-img" :src="previewCourseInfo.cover" mode=""></image>
				<view class="shoping-info">
					<view class="name">{{ previewCourseInfo.placeName||previewCourseInfo.name }}</view>
					<view class="price-info">
						<view class="price"><text class="mini-text">￥</text>{{ previewCourseInfo.sellingPrice.toFixed(2) }}</view>
						<view class="price-stepper">
							<view class="minus" @click="minusNum">-</view>
							<input v-model="countTotal" disabled type="number" />
							<view class="add" @click="addNum">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="g-shoping-total">
				<view class="total-price">
					<view class="">商品总价（共1件）</view>
					<view class="">￥{{ previewCourseInfo.sellingPrice.toFixed(2) }}</view>
				</view>
				<view class="total-price">
					<view class="">
						<text v-if="buyType == 1">试听优惠</text>
						<text v-if="buyType == 0 || placeId">团购优惠</text>
					</view>
					<view class="">-￥
						<text v-if="buyType == 0 || !placeId">{{ previewCourseInfo.discountPrice }}</text>
						<text v-else>{{ (previewCourseInfo.originalPrice - previewCourseInfo.sellingPrice).toFixed(2) }}</text>
					</view>
				</view>
			</view>
			<view class="subtotal">小计 ￥{{totalPriceDisplay }}</view>
		</view>
		<!-- 课程进入 -->
		<view class="r-insurance" v-for="item in insureIdList" :key="item.id">
			<view class="r-insurance-infobox">
				<view class="r-image-box">
					<image :src="item.coverImg" mode=""></image>
				</view>
				<view class="r-insurance-title">
					<view class="r-insurance-name">
						<view class="r-name">{{ item.name }}</view>
						<view class="r-tags">不支持退款</view>
					</view>
					<view class="r-insurance-desc" v-for="(desc, index) in item.insuranceObvious" :key="index">
						<text v-for="([key, value], idx) in Object.entries(desc)" :key="key + idx">{{ key }}, {{
							value }}；</text>
					</view>
					<view class="r-insurance-type">保险公司：{{ item.insuranceName_dictText }}</view>
					<view class="r-insurance-price">
						<view class="r-price">￥{{ insurePrice }}/天·人</view>
						<view class="r-insurance-btn" v-if="insureData.length < 1"
							@click="gotoInsuracePage(item, item.priceDataList)">去投保
						</view>
					</view>
				</view>
			</view>
			<view class="line" v-if="insureData.length > 0"></view>
			<blcok v-if="insureData.length > 0">
				<view class="r-insurance-adduser" v-for="(insureUser, index) in insureData" :key="index">
					<view class="r-adduser-btn">
						<view class="r-celar" @click="clearUser">清除</view>
						<view class="r-edit"
							@click="RouterUtils.to_page(`/pages/index/insure/index?priceDataList=${JSON.stringify(item.priceDataList)}`)">
							修改</view>
					</view>
					<view class="r-userinfo-list">
						<view class="r-userinfo-item">
							<view class="r-item-title">被保人</view>
							<view class="r-item-info">{{ insureUser.userData.length }}人(<text
									v-for="user in insureUser.userData" :key="user.id">{{ user.fullName }},</text>)
							</view>
						</view>
						<view class="r-userinfo-item">
							<view class="r-item-title">生效时间</view>
							<view class="r-item-info">{{ insureUser.slectObj.day }}天({{ insureUser.startDate }}-{{
								insureUser.endDate }})
							</view>
						</view>
						<view class="r-userinfo-item">
							<view class="r-item-title">保费总金额</view>
							<view class="r-item-info">￥{{ insureUser.totalPrice }}</view>
						</view>
					</view>
				</view>
			</blcok>
		</view>
		<view class="g-userinfo-card" v-if="!placeId">
			<view class="r-user">
				<view class="user-title">用户信息 <text class="mini-text">至少需选择{{ countTotal }}人</text></view>
				<view class="invite">
					<zzx-icon name="wechat" size="16"></zzx-icon>
					<view style="margin-bottom: 8rpx;">邀请微信好友</view>
					<zzx-icon name="ashRight" size="12"></zzx-icon>
					<button class="g-share-btn" open-type="share"></button>
				</view>
			</view>
			<!-- <view class="user-tags">张三</view> -->
			<view class="r-user-list" v-for="item in userData" :key="item.id">
				<view class="minus-user" @click="deleteUser(item)">-</view>
				<view class="r-list">
					<view class="name">{{ item.fullName }}</view>
					<view class="id-num">身份证 {{ idCardHide(item.identityCard) }}</view>
				</view>
			</view>
			<view class="g-adduser-btn" @click="toUserList">
				<view class="add-icon">+</view>
				<view class="add-text">添加用户</view>
			</view>
		</view>
		<view class="g-usetips-card">
			<view class="use-title">{{ placeId ? '使用须知' : '购买须知' }}</view>
			<view class="use-text">
				<view class="item-text">
					<rich-text :nodes="previewCourseInfo.reminder"></rich-text>
				</view>
			</view>
			<view class="use-tips-more" @click="RouterUtils.to_page('/pages/index/useNotice/index')">
				<view class="more-text">查看更多</view>
				<view class="use-line"></view>
			</view>
		</view>
		<view class="g-usetips-card">
			<view class="use-title">服务保障</view>
			<view class="use-text">
				<view class="item-text">
					{{ previewCourseInfo.refundType == 1 ? '未消费随时退款，过期未消费自动退款。' : '不支退款，请慎重考虑后购买。' }}
				</view>
			</view>
			<view class="use-tips-more" @click="RouterUtils.to_page('/pages/index/useNotice/index')">
				<view class="more-text">查看更多</view>
				<view class="use-line"></view>
			</view>
		</view>
		<view style="height: 166rpx;"></view>
		<view class="footer footer-box">
			<view class="footer-price">
				<view class="total-price">合计：</view>
				<view class="price"><text class="mini-text">￥</text>
					<text>{{ totalPriceDisplay }}</text>
				</view>
				<view class="discount">优惠￥{{ previewCourseInfo.totalDiscount }}</view>
			</view>
			<view class="footer-btn" @click="submitOrder">
				<button>
					<view class="btn-price">
						<text> ￥{{ totalPriceDisplay }}</text>
					</view>
					<view class="btn-price">立即支付</view>
				</button>
			</view>
		</view>
	</view>
	<uni-popup ref="insurePopup" type="center">
		<view class="r-center-popup" v-if="agreementContent">
			<view class="r-popup-title">{{ agreementContent.protocolName }}</view>
			<view class="r-popup-content">
				<rich-text :nodes="agreementContent.protocolContent"></rich-text>
			</view>
			<view class="r-popup-footer">
				<view class="r-popup-needbtn" @click="toNeed">我需要购买保险</view>
				<view class="r-popup-refusebtn" @click="toRefuse">我拒绝购买保险</view>
				<view class="r-popup-checkbox" @click="select_insurance = !select_insurance">
					<zzx-icon :name="select_insurance ? 'selected' : 'unchecked'" size="14"></zzx-icon>
					<text>我已认真阅读及确认</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { RouterUtils, TipsUtils, idCardHide } from '@/utils/util';
import { http } from '@/utils/http'
const insurePopup = ref()
const select_insurance = ref(false)
const loadType = ref(1)
const buyType = ref()
const placeId = ref()
onLoad((options) => {
	console.log(options);
	loadType.value = options.type
	courseId.value = options.courseId
	placeId.value = options.placeId
	buyType.value = options.buyType
	orderFormData.value.type = options.orderType
	orderFormData.value.orFreeOrder = options.buyType
	orderFormData.value.amount = 1
})
// 优化价格计算，合并保险价格
const totalPrice = computed(() => {
	let basePrice = 0;
	if (previewCourseInfo.value) {
		if (previewCourseInfo.value.totalPrice) {
			basePrice = Number(previewCourseInfo.value.totalPrice) * Number(countTotal.value);
		} else if (previewCourseInfo.value.sellingPrice) {
			basePrice = Number(previewCourseInfo.value.sellingPrice) * Number(countTotal.value);
		}
	}
	let insureTotal = 0;
	if (Array.isArray(insureData.value) && insureData.value.length > 0) {
		insureTotal = insureData.value.reduce((sum, item) => {
			const price = Number(item.totalPrice) || 0;
			return sum + price;
		}, 0);
	}
	return basePrice + insureTotal;
});

const totalPriceDisplay = computed(() => {
	return totalPrice.value.toFixed(2);
});
onMounted(() => {
	if (placeId.value) {
		getEventsDetail()
	} else {
		get_previewOrderCourse()
	}
	get_userData()
	getInsureData()
})

const toUserList = () => {
	RouterUtils.to_page('/pages/index/userList/index')
}

const userData = ref([])
const get_userData = () => {
	uni.$on('userData', function (data) {
		userData.value = data
		if (data.length > 0) {
			let familyIds = data.map(item => item.id)
			orderFormData.value.familyIds = familyIds.join(',')
		} else {
			orderFormData.value.familyIds = []
		}
	})
}

const deleteUser = async (e) => {
	let res = await TipsUtils.tips_alert('确定删除该用户吗？', true)
	if (res.confirm) {
		userData.value = userData.value.filter(user => user.id !== e.id)
	}
}

const priceDataListData = ref([])
const gotoInsuracePage = (e1: any, e2: any) => {
	getFindByType(e1.insuranceName)
	priceDataListData.value = e2
	orderFormData.value.insureOrderInfoForm.insureId = e1.id
}

const agreementContent = ref()
const getFindByType = (insuranceName: any) => {
	http.get('/my/feedback/findByType', { data: { insuranceName: insuranceName, protocolType: 0 }, loading: true }).then((res: any) => {
		agreementContent.value = res.result
		insurePopup.value.open()
	})
}

const courseId = ref()
const previewCourseInfo = ref()
const insureIdList = ref([])  // 保险列表
const insurePrice = ref() // 保险价格
// 课程预览
const get_previewOrderCourse = () => {
	http.get('/order/previewOrderCourse', { data: { courseId: courseId.value }, loading: true }).then((res) => {
		previewCourseInfo.value = res.result
		orderFormData.value.productIds = res.result.id
		res.result.insureIdList.map((item: any) => {
			item.insuranceObvious = JSON.parse(item.insuranceObvious)
			item.insuranceObvious = [item.insuranceObvious]
			item.priceDataList.map((item2: any) => {
				if (item2.insureDay === 1) {
					insurePrice.value = item2.insurePrice
				}
			})
		})
		insureIdList.value = res.result.insureIdList
	})
}

// 场地预览
const getEventsDetail = () => {
	http.get('/order/PreviewOrderPlaceGymnasiumNoFixation', { data: { placeId: placeId.value }, loading: true }).then((res) => {
		previewCourseInfo.value = res.result
		orderFormData.value.productIds = res.result.id || res.result.placeId
	})
}

const insureData = ref([])
const getInsureData = () => {
	uni.$on('insureData', function (data) {
		insureData.value = data
		console.log(insureData.value, '投保人信息');
		orderFormData.value.insureOrderInfoForm.assertStartTime = insureData.value[0].startDate
		orderFormData.value.insureOrderInfoForm.assertEndTime = insureData.value[0].endDate
		orderFormData.value.insureOrderInfoForm.insurePriceId = insureData.value[0].slectObj.id
		if (data.length > 0) {
			let familyMembersIds = data[0].userData.map(item => item.id)
			orderFormData.value.insureOrderInfoForm.familyMembersIds = familyMembersIds.join(',')
		} else {
			orderFormData.value.insureOrderInfoForm.familyMembersIds = []
		}
	})
}

const clearUser = async () => {
	let res: any = await TipsUtils.tips_alert('确定清除投保人信息吗？', true)
	if (res.confirm) {
		insureData.value = []
	}
}

const countTotal = ref(1)
const minusNum = () => {
	if (countTotal.value > 1) {
		countTotal.value--
		orderFormData.value.amount = countTotal.value
	}
}

const addNum = () => {
	if (buyType.value == 1) return TipsUtils.tips_toast('试听课程不支持多个购买')
	if(courseId.value){
	get_checkCourseLimitNum(countTotal.value + 1)
	}else{
		countTotal.value++
	}
}

const get_checkCourseLimitNum = (targetNum) => {
	http.get('/order/checkCourseLimitNum', {
		data: {
			courseId: courseId.value,
			limitNum: targetNum
		},
		loading: true
	}).then((res) => {
		if (res.result === true) {
			countTotal.value = targetNum
		} else {
			TipsUtils.tips_toast('超出可购数量')
		}
	})
}

const toNeed = () => {
	if (!select_insurance.value) return TipsUtils.tips_toast('请先阅读并同意协议')
	RouterUtils.to_page(`/pages/index/insure/index?priceDataList=${JSON.stringify(priceDataListData.value)}`)
	insurePopup.value.close()
}

const toRefuse = () => {
	if (select_insurance.value) {
		insurePopup.value.close()
	} else {
		TipsUtils.tips_toast('请先阅读并同意协议')
	}
}

let orderFormData = ref({
	type: null,
	orderType: null,
	orFreeOrder: 1,
	productIds: null,
	amount: null,
	familyIds: '',
	insureOrderInfoForm: {
		insureId: '',
		assertStartTime: '',
		assertEndTime: '',
		insurePriceId: '',
		familyMembersIds: '',
	}
})
const submitOrder = () => {
	orderFormData.value.amount = countTotal.value
	if (!placeId.value) {
		if (!userData.value) return TipsUtils.tips_toast('请添加用户信息')
		if (userData.value.length < countTotal.value) return TipsUtils.tips_toast(`请至少选择${countTotal.value}人`)
		if(userData.value.length > countTotal.value) return TipsUtils.tips_toast(`最多选择${countTotal.value}人`)
		orderFormData.value.orderType = 5
		orderFormData.value.type = 2
	} else {
		orderFormData.value.type = 0
		orderFormData.value.orderType = 2
	}
	let data = { ...orderFormData.value };
	if (!insureData.value || insureData.value.length === 0) {
		delete data.insureOrderInfoForm;
	}
	if(!userData||userData.value.length === 0){
		delete data.familyIds
	}
	http.post('/order/createOrder', data, { loading: true }).then((res) => {
		RouterUtils.to_page(`/pages/index/toBeUsed/index?orderId=${res.result.orderId}&orderType=${orderFormData.value.orderType}`)
	})
}
</script>

<style lang="less" scoped>
.g-orderinfo-card {
	background: #FFFFFF;
	border-radius: 32rpx;
	padding: 20rpx;
	margin-top: 20rpx;

	.g-shoping-info {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.shoping-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 32rpx;
		}

		.shoping-info {
			width: 440rpx;

			.name {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
				line-height: 44rp
			}

			.price-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;

				.price {
					font-weight: 800;
					font-size: 48rpx;
					color: #FB5B5B;
				}

				.price-stepper {
					display: flex;
					align-items: center;
					border: 1rpx solid #F0F0F0;
					border-radius: 8rpx;

					.minus {
						text-align: center;
						width: 44rpx;
						border-right: 1rpx solid #F0F0F0;
					}

					&>input {
						width: 80rpx;
						font-size: 28rpx;
						color: #222222;
						text-align: center;
					}

					.add {
						text-align: center;
						width: 44rpx;
						border-left: 1rpx solid #F0F0F0;
					}
				}
			}
		}
	}

	.g-shoping-total {
		height: 148rpx;
		margin-top: 24rpx;
		border-top: 1rpx solid #F0F0F0;

		.total-price {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #222222;
		}
	}

	.subtotal {
		border-top: 1rpx solid #F0F0F0;
		height: 84rpx;
		line-height: 84rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FB5B5B;
		text-align: right;
	}
}

.g-buy-tips {
	margin-top: 20rpx;

	.tips-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	.tips-info-card {
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.text {
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
	}
}

.r-insurance {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.r-insurance-infobox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		margin-bottom: 20rpx;

		.r-image-box {
			&>image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
			}
		}

		.r-insurance-title {
			.r-insurance-name {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.r-name {
					font-weight: 800;
					font-size: 28rpx;
					color: #222222;
				}

				.r-tags {
					width: 136rpx;
					height: 36rpx;
					background: #FDD143;
					border-radius: 8rpx;
					font-size: 22rpx;
					color: #222222;
					text-align: center;
					line-height: 36rpx;
				}
			}

			.r-insurance-desc {
				width: 440rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.r-insurance-type {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.r-insurance-price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.r-price {
					font-weight: bold;
					font-size: 28rpx;
					color: #FB5B5B;
				}

				.r-insurance-btn {
					width: 200rpx;
					height: 68rpx;
					background: #C8FF0C;
					border-radius: 60rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
					text-align: center;
					line-height: 68rpx;
				}
			}
		}
	}

	.r-insurance-adduser {
		background: #F6F6F6;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.r-adduser-btn {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 20rpx;

			.r-celar {
				width: 192rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 60rpx;
				border: 2rpx solid #FB5B5B;
				font-weight: bold;
				font-size: 28rpx;
				color: #FB5B5B;
				text-align: center;
				line-height: 68rpx;
			}

			.r-edit {
				width: 200rpx;
				height: 68rpx;
				background: #C8FF0C;
				border-radius: 60rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
				text-align: center;
				line-height: 68rpx;
			}
		}

		.r-userinfo-list {
			.r-userinfo-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.r-item-title {
					font-size: 28rpx;
					color: #AAAAAA;
				}

				.r-item-info {
					font-size: 28rpx;
					color: #222222;
				}
			}
		}
	}
}

.g-userinfo-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.r-user {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.invite {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 24rpx;
			color: #AAAAAA;
			position: relative;

			.g-share-btn {
				position: absolute;
				width: 200rpx;
				height: 60rpx;
				opacity: 0;
			}
		}
	}

	.user-tags {
		margin-top: 20rpx;
		width: 112rpx;
		height: 40rpx;
		background: #FDD143;
		border-radius: 8rpx;
		line-height: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		font-size: 28rpx;
		color: #222222;
	}

	.r-user-list {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		border-top: 1rpx solid #F0F0F0;
		height: 140rpx;

		.minus-user {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #FB5B5B;
			text-align: center;
			line-height: 20rpx;
			font-weight: 600;
			color: #fff;
			font-size: 40rpx;
		}

		.r-list {
			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.id-num {
				font-size: 28rpx;
				color: #222222;
			}
		}
	}

	.g-adduser-btn {
		display: flex;
		height: 88rpx;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		border-top: 1rpx solid #F0F0F0;

		.add-icon {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #FDD143;
			font-size: 30rpx;
			font-weight: 600;
			color: #fff;
			text-align: center;
			line-height: 20rpx;
		}

		.add-text {
			font-size: 28rpx;
			color: #FDD143;
		}
	}
}

.g-usetips-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.use-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.use-text {
		font-size: 24rpx;
		color: #222222;

		.item-text {
			margin-top: 20rpx;
		}
	}

	.use-tips-more {
		margin-top: 20rpx;

		.more-text {
			text-align: center;
			font-size: 24rpx;
			color: #CCCCCC;
		}

		.use-line {
			margin: auto;
			margin-top: 10rpx;
			width: 38rpx;
			height: 4rpx;
			background: #CCCCCC;
			border-radius: 2rpx;
		}
	}
}

.footer {
	left: 0;

	.footer-price {
		display: flex;
		align-items: center;

		.total-price {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.price {
			font-weight: 800;
			font-size: 48rpx;
			color: #FB5B5B;
		}

		.discount {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: #222222;
		}
	}

	.footer-btn {
		&>button {
			width: 226rpx;
			height: 100rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #222222;
			line-height: 30rpx;

			.btn-price:nth-child(1) {
				margin-top: 20rpx;
			}
		}

		&>button::after {
			border: none;
		}
	}
}

.r-center-popup {
	width: 646rpx;
	max-height: 1000rpx;
	background: #F6F6F6;
	border-radius: 32rpx;
	padding: 20rpx;

	.r-popup-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		text-align: center;
	}

	.r-popup-content {
		margin-top: 28rpx;
		font-size: 28rpx;
		color: #222222;
		max-height: 600rpx;
		overflow: auto;
	}

	.r-popup-footer {
		margin-top: 20rpx;

		.r-popup-needbtn {
			margin: auto;
			width: 598rpx;
			height: 100rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
			line-height: 100rpx;
		}

		.r-popup-refusebtn {
			margin: auto;
			margin-top: 24rpx;
			width: 598rpx;
			height: 100rpx;
			background: #f0eeee;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #AAAAAA;
			text-align: center;
			line-height: 100rpx;
		}

		.r-popup-checkbox {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			font-size: 24rpx;
			color: #AAAAAA;

			&>text {
				margin-bottom: 8rpx;
			}
		}
	}
}
</style>