<script setup>
	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
	import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
	import {
		reactive,
		ref,
		onMounted,
		computed
	} from 'vue';

	const CACHE_KEY = 'score_hebei_info';

	const data = reactive({
		form: {
			avatar: '',
			name: '肖战',
			idNumber: '130***********1234',
			examNumber: '24130115150001',
			chinese: '110',
			math: '102',
			english: '95',
			physics: '66',
			chemistry: '85',
			geography: '86',
			time: '2025-6-25'
		}
	});
	const total = computed(() => {
		const sum = Number(data.form.chinese || 0) + Number(data.form.math || 0) + Number(data.form.english || 0) +
			Number(data.form.physics || 0) + Number(data.form.chemistry || 0) + Number(data.form.geography || 0);
		return sum || '';
	});

	const editDialog = reactive({
		show: false,
		data: {}
	});

	onMounted(() => {
		loadCache();
	});

	function loadCache() {
		const cache = uni.getStorageSync(CACHE_KEY);
		if (cache) {
			data.form = {
				...data.form,
				...cache
			};
		}
	}

	function saveCache() {
		uni.setStorageSync(CACHE_KEY, data.form);
	}

	function openEditDialog() {
		editDialog.data = JSON.parse(JSON.stringify(data.form));
		editDialog.show = true;
	}

	function saveEdit() {
		data.form = {
			...data.form,
			...editDialog.data
		};
		saveCache();
		editDialog.show = false;
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		});
	}

	const editTotal = computed(() => {
		const sum = Number(editDialog.data.chinese || 0) + Number(editDialog.data.math || 0) + Number(editDialog.data
			.english || 0) + Number(editDialog.data.physics || 0) + Number(editDialog.data.chemistry || 0) + Number(
			editDialog.data.geography || 0);
		return sum || '';
	});

	// 选择二维码
	const choose = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: function(res) {
				const tempFilePath = res.tempFilePaths[0];
				uni.saveFile({
					tempFilePath: tempFilePath,
					success: function(ress) {
						editDialog.data.avatar = ress.savedFilePath;
					},
					fail: function(err) {
						editDialog.data.avatar = tempFilePath;
					}
				});
			}
		});
	};

	// 清除二维码
	const clearAvatar = () => {
		editDialog.data.avatar = '';
	};

	function back() {
		uni.navigateBack()
	}

	function onChangeStartDate(e) {
		editDialog.data.time = e
		console.log(e)
	}

	function getTime(times, status) {
		let list = times.split('-')
		if (status) {
			return list[0] + '年'
		} else {
			return list[0] + '年' + list[1] + '月'
		}
	}
</script>

<template>
	<view class="div">
		<view v-if="$isVip()">
			<watermark dark="light" source="uni_alipay_other_score" />
			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_score')">
				<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;"></image>
			</liu-drag-button>
		</view>
		<view class="group_1" :style="{'padding-top':$systemInfo.statusBarHeight*2+'rpx'}">
			<view class="rectangle_273">
				<image @click="back()" class="group_14010" src="/static/image/other/score/chongqing/close.png" />
				<view class="flexcontainer"><text class="text_1"> 成绩查询-河北省普通高校招生考试 </text><text class="text_2">
						xxcx.hebeea.edu.cn
					</text></view>
				<image class="group_14011" src="/static/image/other/score/chongqing/more.png" />
			</view>
		</view>

		<view class="" :style="{height:$systemInfo.statusBarHeight*2+88+'rpx'}">

		</view>
		<image src="/static/image/other/score/hebei/heibeiheaderBg.png" mode="widthFix" style="width: 100%;"></image>
		<view class="group_48368">
			<view class="rectangle_23396">
				<view class="flexcontainer"><text class="text_1"> {{ getTime(data.form.time,1) }}河北省普通高校招生考试<br>成绩查询 </text>
				</view>
			</view>
			<image src="/static/image/other/score/hebei/Watermark.png" mode="widthFix" class="watermark"></image>
			<view class="rectangle_23397" @click="openEditDialog">
				<view class="table2">
					<view class="flexcontainer_1">
						<view class="group_48370">
							<view class="text_2"> <text style="margin-right: 20rpx;margin-left:10rpx;"> 姓</text>名：{{data.form.name}}
							</view>
							<text class="text_3"> 考生号：{{data.form.examNumber}} </text>
							<text class="text_4"> 证件号：{{data.form.idNumber}} </text>
						</view>
						<view class="group_48369">
							<view class="rectangle_23389">
								<image :src="data.form.avatar||'/static/image/other/score/qrcode.png'" mode="aspectFill" />
							</view>
						</view>
					</view>
					<view class="topTitle">
						考生信息
					</view>
				</view>
				<view class="table">
					<view class="group_48371">
						<view class="rectangle_23392"><text class="text_5"> 科目 </text><text class="text_6"> 成绩 </text></view>
					</view>
					<view class="group_48372">
						<view class="rectangle_23394"><text class="text_7"> 语文 </text><text class="text_8"> {{data.form.chinese}}
							</text></view>
					</view>
					<view class="group_48373">
						<view class="rectangle_23394_0"><text class="text_9"> 数学 </text><text class="text_10"> {{data.form.math}}
							</text></view>
					</view>
					<view class="group_48374">
						<view class="rectangle_23394_1"><text class="text_12"> 英语 </text><text class="text_13">
								{{data.form.english}}
							</text></view>
					</view>
					<view class="group_48375">
						<view class="rectangle_23394_2"><text class="text_14"> 物理 </text><text class="text_15">
								{{data.form.physics}}
							</text></view>
					</view>
					<view class="group_48376">
						<view class="rectangle_23394_3"><text class="text_16"> 化学 </text><text class="text_17">
								{{data.form.chemistry}} </text></view>
					</view>
					<view class="group_48377">
						<view class="rectangle_23394_4"><text class="text_18"> 地理 </text><text class="text_19">
								{{data.form.geography}} </text></view>
					</view>
					<view class="group_48378">
						<view class="rectangle_23394_5"><text class="text_20"> 总分 </text><text class="text_21"> {{total}} </text>
						</view>
					</view>
					<!-- 				<view class="group_48379">
					<view class="rectangle_23394_6"><text class="text_22"> 总分 </text><text class="text_23"> {{total}} </text>
					</view>
				</view> -->
				</view>

				<text class="text_24"> 防伪码:kst156vsd46b15s61c31d6sg15ds6dg4f65z16d5 </text>
				<view class="group_48383">
					<view class="flexcontainer_5">
						<text class="text_25"> 版权所有 </text>
						<image class="div_241" src="/static/image/other/score/hebei/Copyright.png"></image>
						<text class="text_26"> 河北省教育考试院 </text>
					</view>
					<text class="text_27"> 未经我单位书面许可不得链接此查询系统 </text>
				</view>
			</view>
		</view>

		<safeBottom bgColor="#ffffff" />

		<!-- 编辑弹窗 -->
		<view v-if="editDialog.show" class="editDialog">
			<view class="editDialog_bg">
				<view class="editDialog_header">
					<text class="title">编辑成绩信息</text>
				</view>
				<view class="editDialog_body">
					<view class="formItem avatar-item">
						<text>二维码</text>
						<view class="avatar-wrap">
							<image v-if="editDialog.data.avatar" :src="editDialog.data.avatar" class="avatar-img" @click="choose" />
							<view v-else class="avatar-placeholder" @click="choose">
								<text class="avatar-placeholder-text">+</text>
							</view>
							<text v-if="editDialog.data.avatar" class="avatar-clear" @click="clearAvatar">清除</text>
						</view>
					</view>
					<view class="formItem">
						<text>姓名</text>
						<input v-model="editDialog.data.name" placeholder="请输入姓名" />
					</view>
					<view class="formItem">
						<text>证件号</text>
						<input v-model="editDialog.data.idNumber" placeholder="请输入证件号" />
					</view>
					<view class="formItem">
						<text>考生号</text>
						<input v-model="editDialog.data.examNumber" placeholder="请输入考生号" />
					</view>
					<view class="formItem">
						<text>语文</text>
						<input v-model="editDialog.data.chinese" type="digit" placeholder="请输入语文成绩" />
					</view>
					<view class="formItem">
						<text>数学</text>
						<input v-model="editDialog.data.math" type="digit" placeholder="请输入数学成绩" />
					</view>
					<view class="formItem">
						<text>英语</text>
						<input v-model="editDialog.data.english" type="digit" placeholder="请输入英语成绩" />
					</view>
					<view class="formItem">
						<text>物理</text>
						<input v-model="editDialog.data.physics" type="digit" placeholder="请输入物理成绩" />
					</view>
					<view class="formItem">
						<text>化学</text>
						<input v-model="editDialog.data.chemistry" type="digit" placeholder="请输入化学成绩" />
					</view>
					<view class="formItem">
						<text>地理</text>
						<input v-model="editDialog.data.geography" type="digit" placeholder="请输入地理成绩" />
					</view>
					<view class="formItem">
						<text>总分</text>
						<text style="flex:1;text-align:right;font-size:28rpx;color:#333;">{{editTotal}}</text>
					</view>
					<view class="formItem">
						<text>时间</text>
						<view style="width:100%;">
							<DateTimePicker :defaultDate="editDialog.data.time" :mode="1" @onChange="onChangeStartDate" />
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<view class="btn-cancel" @click="editDialog.show=false">取消</view>
					<view class="btn-save" @click="saveEdit">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

	* {
		box-sizing: border-box;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

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

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

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

	.no-shrink {
		flex-shrink: 0;
	}

	/* 编辑弹窗样式 */
	.editDialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.editDialog_bg {
		width: 680rpx;
		max-height: 80vh;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.editDialog_header {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;

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

	.editDialog_body {
		padding: 20rpx 30rpx;
		overflow-y: auto;
		max-height: 60vh;
	}

	.formItem {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		text {
			width: 200rpx;
			font-size: 28rpx;
			color: #666;
			flex-shrink: 0;
		}

		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			text-align: right;
		}
	}

	.popup-footer {
		display: flex;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		gap: 20rpx;

		.btn-cancel,
		.btn-save {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			font-size: 28rpx;
		}

		.btn-cancel {
			background-color: #f5f5f5;
			color: #666;
		}

		.btn-save {
			background-color: #187AFF;
			color: #fff;
		}
	}

	.avatar-item {
		.avatar-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 16rpx;
		}

		.avatar-img {
			width: 80rpx;
			height: 80rpx;
			// border-radius: 50%;
		}

		.avatar-placeholder {
			width: 80rpx;
			height: 80rpx;
			// border-radius: 50%;
			background-color: #f0f0f0;
			display: flex;
			justify-content: center;
			align-items: center;

			.avatar-placeholder-text {
				font-size: 40rpx;
				color: #999;
				width: auto;
			}
		}

		.avatar-clear {
			font-size: 24rpx;
			color: #ff4d4f;
		}
	}
</style>
<style lang="scss" scoped>
	/* 高考成绩-河北 */
	.div {
		position: relative;
		width: 750rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		/* 蒙版组 1 */
		.group_1 {
			position: fixed;
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			left: 0;
			top: 0;
			z-index: 999 !important;
			background-color: #EFEFEF;

			/* Rectangle 273 */
			.rectangle_273 {
				position: relative;
				width: 750rpx;
				height: 88rpx;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				isolation: isolate;
				margin-top: 0;

				/* 蒙版组 14010 */
				.group_14010 {
					width: 42rpx;
					height: 42rpx;
					z-index: 1;
					position: relative;
					margin-left: 20rpx;
					margin-top: 26rpx;
				}

				/* flexContainer */
				.flexcontainer {
					position: relative;
					display: flex;
					width: 562rpx;
					height: 64rpx;
					flex-direction: column;
					align-items: flex-start;
					z-index: 0;
					margin-left: 16rpx;
					margin-top: 12rpx;
					/* 右侧渐隐 */
					-webkit-mask-image: linear-gradient(to right,
							#000 0%,
							#000 80%,
							transparent 100%);

					mask-image: linear-gradient(to right,
							#000 0%,
							#000 80%,
							transparent 100%);

					.text_1 {
						position: relative;
						font-size: 36rpx;
						font-family: 'PingFang SC';
						font-weight: bold;
						line-height: 44rpx;
						color: #1a1a1a;
						white-space: pre;
						height: 44rpx;
						margin-top: 0;
						margin-bottom: -6rpx;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}

					.text_2 {
						position: relative;
						font-size: 22rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						color: #767676;
						white-space: pre;
						height: 30rpx;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}
				}

				/* 蒙版组 14011 */
				.group_14011 {
					width: 34rpx;
					height: 34rpx;
					z-index: 2;
					position: relative;
					margin-top: 26rpx;
					margin-right: 26rpx;
				}
			}
		}

		/* 组 48368 */
		.group_48368 {
			position: relative;
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-top: 0;
			margin-left: 0;

			.watermark {
				position: absolute;
				width: 650rpx;
				left: 50rpx;
				top: 128rpx;
				z-index: 999;
				pointer-events: none;
			}

			/* 矩形 23396 */
			.rectangle_23396 {
				position: relative;
				width: 750rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				isolation: isolate;
				z-index: 0;

				.flexcontainer {
					position: relative;
					display: flex;
					width: 750rpx;
					flex-direction: row;
					align-items: flex-start;
					z-index: 0;
					margin-top: 20rpx;
					margin-left: 0;
					justify-content: center;
					text-align: center;

					.text_1 {
						position: relative;
						text-align: center;
						font-size: 32rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						color: #3D3D3D;
						text-align: center;
					}
				}
			}

			/* 矩形 23397 */
			.rectangle_23397 {
				position: relative;
				width: 650rpx;
				border-radius: 16rpx;
				background-color: #ffffff;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				isolation: isolate;
				z-index: 1;

				.flexcontainer_1 {
					position: relative;
					display: flex;
					width: 580rpx;
					flex-direction: row;
					align-items: flex-end;
					z-index: 0;
					margin-top: 40rpx;
					margin-left: 30rpx;

					.group_48369 {
						position: relative;
						width: 188rpx;
						height: 188rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						z-index: 0;

						.rectangle_23389 {
							width: 188rpx;
							height: 188rpx;
							background-color: #d8d8d8;
							z-index: 0;
							position: relative;
							margin-top: 0;
							margin-left: 0;
							overflow: hidden;

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

					.group_48370 {
						position: relative;
						width: 440rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						z-index: 1;
						margin-top: 0;
						margin-left: 20rpx;

						.text_2 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							color: #333333;
							white-space: pre;
						}

						.text_3 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							color: #666666;
							white-space: pre;
							margin-top: 28rpx;
							margin-bottom: 28rpx;
							position: relative;
							margin-left: 0;
						}

						.text_4 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							color: #666666;
							white-space: pre;
						}
					}
				}

				/* 组 48371 */
				.group_48371 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 1;
					margin-left: 0;

					.rectangle_23392 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #f2f2f2;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: 0;
						justify-content: space-around;

						.text_5 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #1B76CF;
							white-space: pre;
							height: 34rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 520rpx;
							width: max-content;
						}

						.text_6 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #1B76CF;
							white-space: pre;
							height: 34rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 40rpx;
							width: max-content;
						}
					}
				}

				/* 组 48372 */
				.group_48372 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 7;
					margin-left: 0;

					.rectangle_23394 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;
						justify-content: space-around;

						.text_7 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;
						}

						.text_8 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;
						}
					}
				}

				/* 组 48373 */
				.group_48373 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 6;
					margin-top: 2rpx;
					margin-left: 0;

					.rectangle_23394_0 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;

						justify-content: space-around;

						.text_9 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}

						.text_10 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}
					}
				}

				/* 组 48374 */
				.group_48374 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 2;
					margin-top: 2rpx;
					margin-left: 0;

					.rectangle_23394_1 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;

						justify-content: space-around;

						.text_12 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}

						.text_13 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}
					}
				}

				/* 组 48375 */
				.group_48375 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 4;
					margin-top: 2rpx;
					margin-left: 0;

					.rectangle_23394_2 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;

						justify-content: space-around;

						.text_14 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}

						.text_15 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}
					}
				}

				/* 组 48376 */
				.group_48376 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 1;
					margin-top: 2rpx;
					margin-left: 0;

					.rectangle_23394_3 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;

						justify-content: space-around;

						.text_16 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}

						.text_17 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}
					}
				}

				/* 组 48377 */
				.group_48377 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 3;
					margin-top: 2rpx;
					margin-left: 0;

					.rectangle_23394_4 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;

						justify-content: space-around;

						.text_18 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}

						.text_19 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}
					}
				}

				/* 组 48378 */
				.group_48378 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 5;
					margin-top: 2rpx;
					margin-left: 0;

					.rectangle_23394_5 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;

						justify-content: space-around;

						.text_20 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}

						.text_21 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}
					}
				}

				/* 组 48379 */
				.group_48379 {
					position: relative;
					width: 650rpx;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 6;
					margin-top: 2rpx;
					margin-left: 0;

					.rectangle_23394_6 {
						position: relative;
						width: 650rpx;
						height: 60rpx;
						background-color: #ffffff;
						margin-left: auto;
						margin-right: auto;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 0;

						justify-content: space-around;

						.text_22 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}

						.text_23 {
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							letter-spacing: 0.01em;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 18rpx;
							margin-bottom: -5rpx;
							position: relative;

						}
					}
				}

				.div_249 {
					width: 160rpx;
					height: 154rpx;
					z-index: 8;
					position: relative;
					margin-top: -309rpx;
					margin-left: 0;
				}

				.div_251 {
					width: 160rpx;
					height: 154rpx;
					z-index: 5;
					position: relative;
					margin-top: 94rpx;
					margin-left: 243rpx;
				}

				.div_252 {
					width: 160rpx;
					height: 154rpx;
					z-index: 9;
					position: relative;
					margin-top: -154rpx;
					margin-left: 0;
				}

				.div_253 {
					width: 160rpx;
					height: 154rpx;
					z-index: 12;
					position: relative;
					margin-top: -154rpx;
					margin-left: 488rpx;
				}

				.text_24 {
					width: 622rpx;
					height: 34rpx;
					position: relative;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 34rpx;
					color: #3d3d3d;
					white-space: pre;
					margin-top: 28rpx;
					margin-bottom: 54rpx;
					margin-left: calc(50% - 296rpx);
					margin-right: auto;
					z-index: 2;
				}

				/* 组 48383 */
				.group_48383 {
					position: relative;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 13rpx;
					justify-content: center;

					.flexcontainer_5 {
						position: relative;
						display: flex;
						width: 100%;
						align-items: center;
						isolation: isolate;
						margin-top: 0;
						justify-content: center;

						.div_241 {
							width: 18rpx;
							height: 18rpx;
							z-index: 2;
							position: relative;
							margin-left: 24rpx;
							margin-right: 6rpx;
						}

						.text_25 {
							width: 96rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							color: #cccccc;
							white-space: pre;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 228rpx;
							z-index: 0;
						}

						.text_26 {
							width: 192rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							color: #cccccc;
							white-space: pre;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 0;
							z-index: 1;
						}
					}

					.text_27 {
						width: 434rpx;
						height: 34rpx;
						position: relative;
						font-size: 24rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 34rpx;
						color: #cccccc;
						white-space: pre;
						margin-top: 16rpx;
						margin-bottom: -5rpx;
						margin-left: auto;
						margin-right: auto;
					}
				}
			}


		}
	}

	.table {

		margin-top: 40rpx;
		border: 1px solid #DBDBDB;
		padding-bottom: 1px;

	}

	.table2 {
		width: 100%;
		border: 1px solid #DBDBDB;
		padding-bottom: 36rpx;
		margin-top: 66rpx;
		position: relative;

		.topTitle {
			width: 120rpx;
			background-color: #ffffff;
			font-weight: 400;
			font-size: 24rpx;
			color: #1B76CF;
			position: absolute;
			top: -20rpx;
			left: 32rpx;
			text-align: center;
		}
	}

	.group_48372,
	.group_48373,
	.group_48374,
	.group_48375,
	.group_48376,
	.group_48377,
	.group_48378,
	{
	border-top: 1px solid #DBDBDB;
	}

	.text_5,
	.text_6,
	.text_7,
	.text_8,
	.text_9,
	.text_10,
	.text_11,
	.text_12,
	.text_13,
	.text_14,
	.text_15,
	.text_16,
	.text_17,
	.text_18,
	.text_19,
	.text_20,
	.text_21 {
		width: calc(50% - 1rpx) !important;
		text-align: center;
		display: block;
		height: 100%;
		margin: 0 !important;
		height: 60rpx !important;
		line-height: 60rpx !important;
	}

	.text_5,
	.text_7,
	.text_9,
	.text_12,
	.text_14,
	.text_16,
	.text_18,
	.text_20 {
		border-right: 1px solid #DBDBDB;
	}
</style>