<template>
	<view>

		<view class="codefun-flex-col section">
			<NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
				@button-click="util.clickTitlePopupButton" tipLayerType="fliggy-train-tickets-tip" isTipLayer
				tipLayerText="修改车票信息">
				<template v-slot:right>
					<view class="codefun-flex-row pos">
						<image class="image_4" src="/static/image/other/train-tickets/fliggy/share.png" />
						<image class="image_4 codefun-ml-12" src="/static/image/other/train-tickets/fliggy/more.png" />
					</view>
				</template>
			</NavBar>
			<view class="codefun-flex-col group_3">
				<text class="codefun-self-start text_2">出票成功</text>
				<text class="codefun-self-start font_2 text_3 mt-19">该票为电子票，可直接凭购票证件进站乘车</text>
				<view class="codefun-flex-col codefun-self-stretch mt-19">
					<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
						<text class="font_12 text_4">再订一张</text>
					</view>
					<view
						class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_2 codefun-mt-8">
						<text class="font_2 text_5">车次{{ ticketsInfo.ticketInfo.trainNo }}为电子票，无需取票可刷身份证乘车。</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main-box">
			<view class="codefun-flex-col section_2">
				<view class="codefun-flex-col">
					<view class="codefun-flex-row codefun-justify-between codefun-items-center section_3">
						<view class="codefun-flex-row codefun-items-center">
							<image class="codefun-shrink-0 image_6"
								src="/static/image/other/train-tickets/fliggy/baozhang.png" />
							<view class="group_4 codefun-ml-6">
								<text class="text_6">品质出行</text>
								<text class="text_7">·保障更安心</text>
							</view>
						</view>
						<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
					</view>
					<view class="codefun-flex-col section_4 codefun-mt-8">
						<view class="codefun-flex-col group_5">
							<view class="codefun-flex-col section_5">
								<view class="codefun-flex-col codefun-self-stretch">
									<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
										<text class="font_1 text_8">检票口</text>
										<text class="font_6 text_9 codefun-ml-8">{{ ticketsInfo.ticketInfo.gate
										}}检口</text>
										<uni-icons type="right" size="16" color="#979797"></uni-icons>
									</view>
									<text class="codefun-self-end font_2 text_10">{{ ticketsInfo.ticketInfo.status
									}}</text>
								</view>
								<text class="codefun-self-start text_11 mt-3">以上信息仅供参考，以车站公告为准</text>
							</view>
							<view class="codefun-flex-col codefun-items-start group_6 codefun-mt-14">
								<text class="font_8 text_12">取票号:{{ ticketsInfo.orderInfo.orderNo }}</text>
								<view class="codefun-flex-col group_7 mt-15">
									<view class="codefun-flex-row codefun-justify-between">
										<text class="font_9 text_13">{{
											formatDateTime(ticketsInfo.ticketInfo.departureTime,
												ticketsInfo.ticketInfo.date) }}</text>
										<text class="font_1 text_13">{{
											formatDateTime(ticketsInfo.ticketInfo.arrivalTime,
												ticketsInfo.ticketInfo.date) }}</text>
									</view>
									<view class="codefun-flex-row codefun-justify-between codefun-items-start group_8">
										<text class="font_10 text_44 text_16 alipay-font">
											{{ ticketsInfo.ticketInfo.departureTime.split(' ')[1] }}</text>
										<view class="codefun-flex-col codefun-items-center">
											<text class="font_1 text_15">{{ ticketsInfo.ticketInfo.duration }}</text>
											<image class="image_9 mt-1"
												src="/static/image/other/train-tickets/fliggy/lishi.png" />
										</view>
										<text class="font_10 text_16 alipay-font">
											{{ ticketsInfo.ticketInfo.arrivalTime.split(' ')[1] }}</text>
									</view>
									<view class="codefun-flex-row codefun-justify-center codefun-items-center">
										<text class="font_6 text_18">{{ ticketsInfo.ticketInfo.trainNo }}</text>
										<uni-icons class="ml-6" type="right" size="10" color="#1A1A1A"></uni-icons>
									</view>
									<view class="codefun-flex-row codefun-justify-between">
										<view class="codefun-flex-row codefun-items-center">
											<text class="font_2 text_45 text_19">{{
												ticketsInfo.ticketInfo.departureStation
											}}</text>
											<image class="codefun-shrink-0 image_8 ml-7"
												src="/static/image/other/train-tickets/fliggy/location.png" />
										</view>
										<view class="codefun-flex-row codefun-items-center group_9">
											<image class="codefun-shrink-0 image_8"
												src="/static/image/other/train-tickets/fliggy/location.png" />
											<text class="font_2 text_19 codefun-ml-6">{{
												ticketsInfo.ticketInfo.arrivalStation
											}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="codefun-flex-col group">
							<template v-for="item in ticketsInfo.passengerList">
								<view class="divider"></view>
								<view class="codefun-flex-col group_11">
									<view class="codefun-flex-row codefun-justify-between codefun-items-center">
										<text class="font_3">{{ item.name }}</text>
										<view class="codefun-flex-row codefun-items-center">
											<view v-if="computeSeatNo(item.seatNo)"
												class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_3">
												<text class="font_11 text_21">{{ computeSeatNo(item.seatNo) }}</text>
											</view>
											<text class="font_12 text_22 codefun-ml-4">{{ item.carriage }}车厢
												{{ item.seatNo }}号</text>
										</view>
									</view>
									<view class="codefun-flex-row codefun-justify-between mt-7">
										<view class="codefun-self-center group_12">
											<text class="font_2 text_23">{{ item.idType }}：</text>
											<text class="font_7">{{ item.idType.includes('身份证') ?
												showFristAndLastNumber(item.idNumber) : (item.idType.includes('护照') ?
													stringUtil.maskPassport(item.idNumber) : item.idNumber) }}</text>
										</view>
										<view class="codefun-flex-row codefun-items-center">
											<text class="codefun-shrink-0 font_5 text_24">{{ item.seatType }}</text>
											<text class="font_5 text_25">¥{{ item.price }}</text>
										</view>
									</view>
									<view class="codefun-flex-row codefun-justify-end mt-7">
										<view
											class="codefun-flex-col codefun-justify-center codefun-items-center text-wrapper_1">
											<text class="font_15">退票</text>
										</view>
										<view
											class="codefun-flex-col codefun-justify-center codefun-items-center codefun-ml-10 text-wrapper_1">
											<text class="font_14">改签</text>
										</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</view>
				<view
					class="codefun-flex-col codefun-justify-start codefun-items-center codefun-relative codefun-mt-14">
					<view class="codefun-flex-row">
						<view class="codefun-flex-col codefun-items-center equal-division-item">
							<image class="codefun-shrink-0 image_4"
								src="/static/image/other/train-tickets/fliggy/dianzifapiao.png" />
							<text class="font_2 text_27 codefun-mt-8">电子发票</text>
						</view>
						<view class="codefun-flex-col codefun-items-center equal-division-item codefun-ml-74">
							<image class="codefun-shrink-0 image_4"
								src="/static/image/other/train-tickets/fliggy/chezhandapin.png" />
							<text class="font_2 text_27 codefun-mt-8">车站大屏</text>
						</view>
						<view class="codefun-flex-col codefun-items-center equal-division-item codefun-ml-74">
							<image class="codefun-shrink-0 image_4"
								src="/static/image/other/train-tickets/fliggy/tuigaishuoming.png" />
							<text class="font_2 text_27 codefun-mt-8">退改说明</text>
						</view>
					</view>
					<view class="section_6 pos_3"></view>
					<view class="section_6 pos_4"></view>
				</view>
			</view>
			<view class="codefun-flex-row codefun-justify-between codefun-items-center section_7">
				<view class="codefun-flex-row">
					<image class="image_10" src="/static/image/other/train-tickets/fliggy/weixin.png" />
					<view class="codefun-flex-col codefun-items-start codefun-ml-12">
						<text class="font_14">关注飞猪旅行公众号</text>
						<text class="font_8 text_29 codefun-mt-10">第一时间接受出票、出行信息</text>
					</view>
				</view>
				<view class="codefun-flex-col codefun-justify-center codefun-items-center text-wrapper_6">
					<text class="font_2 text_28">去关注</text>
				</view>
			</view>

			<view class="codefun-flex-col codefun-items-start section_8">
				<text class="font_14 text_30">已购服务</text>
				<view class="codefun-flex-row codefun-items-center mt-27">
					<text class="codefun-shrink-0 font_6 text_31">{{ ticketsInfo.serviceText }}</text>
				</view>
			</view>
			<view class="codefun-flex-col section_9">
				<view class="codefun-flex-row codefun-justify-between codefun-items-center">
					<text class="font_14 text_33">您可能遇到的问题</text>
					<view class="codefun-flex-row codefun-items-center">
						<text class="font_2 text_34">更多</text>
						<uni-icons type="right" size="12" color="#1A1A1A"></uni-icons>
					</view>
				</view>
				<view class="grid codefun-mt-14">
					<view class="codefun-flex-col codefun-justify-center codefun-items-center grid-item">
						<text class="font_1 text_36">如何取火车票</text>
					</view>
					<view class="codefun-flex-col codefun-justify-center codefun-items-center grid-item">
						<text class="font_1 text_37">如何改签火车票</text>
					</view>
					<view class="codefun-flex-col codefun-justify-center codefun-items-center grid-item">
						<text class="font_1 text_38">取票常见问题</text>
					</view>
					<view class="codefun-flex-col codefun-justify-center codefun-items-center grid-item">
						<text class="font_1 text_39">如何使用电子票</text>
					</view>
					<view class="codefun-flex-col codefun-justify-center codefun-items-center grid-item">
						<text class="font_1 text_40">申请退票退费</text>
					</view>
					<view class="codefun-flex-col codefun-justify-center codefun-items-center grid-item">
						<text class="font_1 text_43">如何申请退票</text>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="footer-box">
		<view class="codefun-flex-col codefun-justify-start codefun-items-center section_10">
			<view class="codefun-flex-row codefun-items-center group_14">
				<image class="codefun-shrink-0 image_12"
					src="/static/image/other/train-tickets/fliggy/feizhu-logo.png" />
				<text class="font_14 text_35 codefun-ml-8">联系飞猪</text>
			</view>
		</view>
	</view>

</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue';
import { reactive, ref, computed, toRefs } from 'vue';
import { onShow, onPageScroll } from '@dcloudio/uni-app';
import { util, stringUtil } from '@/utils/common.js';

const buttonGroup = [{
	name: "编辑车票信息",
	click: () => {
		goEdit()
	}
}]

function goEdit() {
	util.goPage(`/pages/other/train-tickets/edit/edit?app=fliggy&storageKey=${data.STORAGE_KEY}`)
}

const data = reactive({
	navBar: {
		bgColor: '#FCE041'
	},
	STORAGE_KEY: 'fliggyTrainTicketsInfo',
	ticketsInfo: {
		"orderInfo": {
			"orderNo": "EJ66223536",
			"price": "4440"
		},
		"ticketInfo": {
			"departureTime": "01-01 09:19",
			"departureStation": "北京南",
			"arrivalTime": "01-01 14:04",
			"arrivalStation": "上海虹桥",
			"trainNo": "G905",
			"duration": "4时45分",
			"date": "2026.01.01",
			"weekDay": "星期四",
			"gate": "6A、7A",
			"trainName": "复兴号",
			"status": "正在检票"
		},
		"passengerList": [
			{
				"name": "张元英",
				"type": "成人票",
				"seatType": "商务座",
				"carriage": "01",
				"seatNo": "03C",
				"idType": "身份证",
				"idNumber": "1111111111111333",
				"price": "2110",
				"status": "已支付",
				"isMe": true,
				"points": 9632
			}
		],
		"hotelInfo": {
			"cashback": "25",
			"startDay": "01-01",
			"endDay": "01-02"
		},
		"serviceText": "多人连坐 ￥10x2份"
	},
})
let { ticketsInfo } = toRefs(data)

onShow(() => {
	const stored = uni.getStorageSync(data.STORAGE_KEY)
	if (stored) {
		Object.assign(data.ticketsInfo, stored)
	}
})

const computeSeatNo = (seatNo) => {
	if (seatNo.includes('C') || seatNo.includes('F')) {
		return '靠窗';
	} else if (seatNo.includes('A') || seatNo.includes('D')) {
		return '过道';
	}
	return '';
}

const formatDateTime = (timeStr, dateStr) => {
	if (!timeStr) return '';
	const parts = timeStr.split(' ');
	const md = parts[0];
	if (!md) return '';
	const mdParts = md.split('-');
	let year, month, day;

	if (mdParts.length === 3) {
		year = mdParts[0];
		month = mdParts[1];
		day = mdParts[2];
	} else if (mdParts.length === 2) {
		month = mdParts[0];
		day = mdParts[1];
		year = new Date().getFullYear();
		if (dateStr) {
			year = dateStr.split('.')[0];
		}
	} else {
		return '';
	}

	const dateObj = new Date(Number(year), Number(month) - 1, Number(day));
	const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	const week = isNaN(dateObj.getTime()) ? '' : weekDays[dateObj.getDay()];

	return `${month}-${day} ${week}`;
}

const showFristAndLastNumber = (str) => {
	if (!str) {
		return '';
	}
	const len = str.length;
	if (len <= 2) {
		return str;
	}
	return str.slice(0, 1) + '*'.repeat(len - 2) + str.slice(-1);
}
</script>
<style>
@import '/common/global.css';
@import '/common/main.css';
</style>
<style lang="less" scoped>
.ml-5 {
	margin-left: 10rpx;
}

.mt-19 {
	margin-top: 38rpx;
}

.mt-3 {
	// margin-top: 6rpx;
}

.mt-15 {
	margin-top: 30rpx;
}

.mt-1 {
	margin-top: 2rpx;
}

.ml-7 {
	margin-left: 14rpx;
}

.mt-7 {
	margin-top: 14rpx;
}

.mt-27 {
	margin-top: 54rpx;
}

.section {
	padding: 0 18rpx 16rpx;
	background-color: #fce041;

	.pos {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);

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

	.group_2 {

		.image_5 {
			width: 44rpx;
			height: 44rpx;
		}

		.pos_2 {
			position: absolute;
			left: 10rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.font_14 {
			font-size: 30rpx;
			line-height: 27.88rpx;
			font-weight: 500;
			color: #1a1a1a;
		}

		.text {
			font-size: 32rpx;
			line-height: 29.5rpx;
		}


	}

	.group_3 {
		margin-top: 32rpx;

		.text_2 {
			margin-left: 27rpx;
			color: #1a1a1a;
			font-size: 48rpx;
			font-weight: 500;
			line-height: 44.44rpx;
		}

		.font_2 {
			font-size: 26rpx;
			line-height: 22.34rpx;
			color: #1a1a1a;
		}

		.text_3 {
			margin-left: 23.28rpx;
			font-size: 28rpx;
			line-height: 26.66rpx;
			margin-top: 26rpx;
		}

		.text-wrapper {
			margin: 0 6rpx;
			padding: 24rpx 0;
			background-color: #fef8ca;
			border-radius: 36rpx;

			.font_12 {
				font-size: 30rpx;
				line-height: 30rpx;
				color: #1a1a1a;
			}

			.text_4 {
				line-height: 27.14rpx;
			}
		}

		.text-wrapper_2 {
			padding: 20rpx 0;
			background-color: #fefefe;
			border-radius: 12rpx;

			.text_5 {
				margin-left: 25.46rpx;
				color: #ae916e;
				font-size: 24rpx;
				line-height: 22.84rpx;
			}
		}
	}
}



.section_2 {
	padding: 24rpx 18rpx 36rpx;
	background-color: #ffffff;

	.section_3 {
		padding: 12rpx 16rpx;
		background-color: #fdf8d9;
		border-radius: 8rpx;

		.image_6 {
			width: 142rpx;
			height: 32rpx;
		}

		.group_4 {
			line-height: 20.36rpx;
			height: 20.4rpx;

			.text_6 {
				color: #636363;
				font-size: 22rpx;
				line-height: 20.32rpx;
			}

			.text_7 {
				color: #645f4c;
				font-size: 22rpx;
				line-height: 20.36rpx;
			}
		}
	}

	.section_4 {
		filter: drop-shadow(0rpx 10rpx 10rpx #00000008);
		background-image: url('https://ide.code.fun/api/image?token=69ae28bb97ce8400118178f6&name=ce4aca9097cf1d57763cc647764b458d.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.group_5 {
			padding-bottom: 32rpx;

			.section_5 {
				padding: 26rpx 12.76rpx 23.44rpx 20.92rpx;
				background-color: #f6f8fa;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				border: solid 4rpx #ffffff;

				.text_8 {
					font-size: 28rpx;
					line-height: 25.98rpx;
				}

				.text_9 {
					font-size: 28rpx;
					line-height: 25.92rpx;
				}

				.text_10 {
					margin-right: 8rpx;
					margin-top: -8.34rpx;
					color: #53ae66;
					font-size: 24rpx;
					font-weight: 800;
					line-height: 22.28rpx;
				}

				.text_11 {
					margin-left: 3.08rpx;
					color: #979797;
					font-size: 20rpx;
					line-height: 19.14rpx;
				}
			}

			.group_6 {
				margin-right: 24rpx;
				margin-left: 24rpx;
				padding-top: 3.92rpx;

				.font_8 {
					font-size: 26rpx;
					line-height: 22.34rpx;
					color: #8a8c8d;
				}

				.text_12 {
					line-height: 22.9rpx;
				}

				.group_7 {
					width: 672.28rpx;

					.font_9 {
						color: #636363;
						line-height: 25rpx;
						letter-spacing: -2.16rpx;
					}

					.text_13 {
						font-size: 24rpx;
						line-height: 25rpx;
						letter-spacing: -2.16rpx;
						text-align: right;
					}

					.group_8 {
						padding-left: 2.22rpx;

						.font_10 {
							font-size: 40rpx;
							line-height: 30rpx;
							color: #1a1a1a;
						}

						.text_44 {
							margin-top: 18rpx;
							line-height: 29rpx;
						}

						.text_16 {
							margin-top: 18rpx;
							line-height: 29rpx;
							font-weight: 500;
						}

						.text_15 {
							font-size: 24rpx;
							line-height: 22.04rpx;
						}

						.image_9 {
							width: 242rpx;
							height: 12rpx;
						}
					}

					.text_18 {
						line-height: 19rpx;
					}

					.text_45 {
						line-height: 24rpx;
					}

					.text_19 {
						line-height: 24rpx;
					}

					.group_9 {
						margin-right: 6.28rpx;
					}
				}
			}

			.font_1 {
				font-size: 26rpx;
				line-height: 22.34rpx;
				color: #636363;
			}

			.font_6 {
				font-size: 26rpx;
				line-height: 30rpx;
				font-weight: 500;
				color: #1a1a1a;
			}

			.image_8 {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.group {
			padding: 0 12rpx;

			.divider {
				margin-right: 6rpx;
				background-image: repeating-linear-gradient(90deg,
						#d8d8d8,
						#d8d8d8 0.88%,
						transparent 0.88%,
						transparent 1.7570000000000001%);
				background-position: -3rpx 0rpx;
				height: 1rpx;
			}

			.group_11 {
				padding: 29rpx 11rpx 28rpx;

				.font_3 {
					font-size: 30rpx;
					line-height: 26.38rpx;
					color: #1a1a1a;
				}

				.text-wrapper_3 {
					border-radius: 6rpx;
					width: 66rpx;
					height: 32rpx;
					border: solid 1rpx #d3d3d3;
				}

				.font_12 {
					font-size: 30rpx;
					line-height: 30rpx;
					color: #1a1a1a;
				}

				.text_22 {
					line-height: 30.9rpx;
				}

				.group_12 {
					line-height: 22.34rpx;
					height: 22.34rpx;

					.text_23 {
						font-size: 24rpx;
					}

					.font_7 {
						font-size: 20rpx;
						line-height: 14.6rpx;
						color: #1a1a1a;
					}
				}

				.font_5 {
					font-size: 26rpx;
					line-height: 30rpx;
					color: #636363;
				}

				.text_24 {
					font-size: 24rpx;
				}

				.text_25 {
					font-size: 24rpx;
				}

				.text-wrapper_1 {
					background-color: #ffe133;
					border-radius: 34rpx;
					width: 150rpx;
					height: 68rpx;

					.font_15 {
						font-size: 30rpx;
						line-height: 26.42rpx;
						font-weight: 500;
						color: #1a1a1a;
					}

					.font_14 {
						font-size: 30rpx;
						line-height: 27.88rpx;
						font-weight: 500;
						color: #1a1a1a;
					}
				}

				.text-wrapper_5 {
					border-radius: 6rpx;
					height: 32rpx;
					border: solid 1rpx #d3d3d3;

					.text_26 {
						margin-left: 4.96rpx;
						margin-right: 5.04rpx;
					}
				}

				.font_11 {
					font-size: 26rpx;
					line-height: 30rpx;
					color: #979797;
				}

				.text_21 {
					line-height: 28rpx;
				}
			}
		}
	}

	.image_7 {
		width: 20rpx;
		height: 20rpx;
	}

	.equal-division-item {
		overflow: hidden;
		width: 104rpx;
		height: 88rpx;

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

		.text_27 {
			line-height: 24.1rpx;
		}
	}

	.font_2 {
		font-size: 26rpx;
		line-height: 22.34rpx;
		color: #1a1a1a;
	}

	.section_6 {
		background-color: #d8d8d8;
		width: 1rpx;
		height: 24rpx;
	}

	.pos_3 {
		position: absolute;
		left: 231rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_4 {
		position: absolute;
		right: 232rpx;
		top: 50%;
		transform: translateY(-50%);
	}
}

.section_7 {
	margin-top: 16rpx;
	padding: 31.14rpx 30rpx 31.18rpx;
	background-color: #ffffff;

	.image_10 {
		margin: 4.86rpx 0 4.82rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.font_14 {
		font-size: 30rpx;
		line-height: 27.88rpx;
		font-weight: 500;
		color: #1a1a1a;
	}

	.font_8 {
		font-size: 26rpx;
		line-height: 22.34rpx;
		color: #8a8c8d;
	}

	.text_29 {
		font-size: 24rpx;
		line-height: 22.4rpx;
	}

	.text-wrapper_6 {
		background-color: #ffe133;
		border-radius: 34rpx;
		width: 180rpx;
		height: 60rpx;

		.font_2 {
			font-size: 26rpx;
			line-height: 22.34rpx;
			color: #1a1a1a;
		}

		.text_28 {
			line-height: 24rpx;
		}
	}
}



.section_8 {
	margin-top: 16rpx;
	padding: 31.3rpx 30.1rpx 19.96rpx;
	background-color: #ffffff;

	.font_14 {
		font-size: 30rpx;
		line-height: 27.88rpx;
		font-weight: 500;
		color: #1a1a1a;
	}

	.text_30 {
		line-height: 27.66rpx;
	}

	.font_6 {
		font-size: 26rpx;
		line-height: 30rpx;
		font-weight: 500;
		color: #1a1a1a;
	}

	.text_31 {
		font-size: 28rpx;
		line-height: 28.84rpx;
	}

	.text_32 {
		font-size: 28rpx;
	}
}

.section_9 {
	margin-top: 16rpx;
	padding: 34rpx 18rpx 18rpx 23.04rpx;
	background-color: #ffffff;

	.font_14 {
		font-size: 30rpx;
		line-height: 27.88rpx;
		font-weight: 500;
		color: #1a1a1a;
	}

	.text_33 {
		line-height: 27.76rpx;
	}

	.font_2 {
		font-size: 26rpx;
		line-height: 22.34rpx;
		color: #1a1a1a;
	}

	.text_34 {
		line-height: 24.02rpx;
	}

	.image_11 {
		width: 32rpx;
		height: 32rpx;
	}

	.grid {
		margin-right: 4rpx;
		height: 204rpx;
		display: grid;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 14rpx;
		column-gap: 26rpx;

		.grid-item {
			background-color: #f5f7f9;
			border-radius: 30rpx;

			.font_1 {
				font-size: 26rpx;
				line-height: 22.34rpx;
				color: #636363;
			}

			.text_36 {
				line-height: 24.08rpx;
			}

			.text_37 {
				line-height: 24.16rpx;
			}

			.text_38 {
				line-height: 23.98rpx;
			}

			.text_39 {
				line-height: 24.1rpx;
			}

			.text_40 {
				line-height: 23.94rpx;
			}

			.text_43 {
				line-height: 23.94rpx;
			}
		}
	}
}

.main-box {
	padding-bottom: 120rpx;
	padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.footer-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

	.section_10 {
		padding: 32rpx 0 34rpx;
		background-color: #ffffff;

		.group_14 {
			overflow: hidden;
			width: 176rpx;

			.image_12 {
				width: 40rpx;
				height: 40rpx;
			}

			.font_14 {
				font-size: 30rpx;
				line-height: 27.88rpx;
				font-weight: 500;
				color: #1a1a1a;
			}

			.text_35 {
				line-height: 27.84rpx;
			}
		}
	}
}
</style>
