<template>
	<view class="div">
		<view v-if="$isVip()">
			<watermark dark="light" source="uni_alipay_other_bank" />
			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_bank')">
				<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
			</liu-drag-button>
		</view>
		<NavBar v-if="selectedImage" title="拼图" bgColor="#EFEFEF" noBack @back="closeImageEdit" isRightButton
			@right-click="confirmImage">
		</NavBar>
		<view class="group_45764">
			<!-- ,'backgroundColor':data.navbar.bgColor -->
			<view class="flexcontainer_box" v-if="!selectedImage">
				<view :style="{'height':$systemInfo.statusBarHeight+'px','width':'100%'}"></view>
				<view class="flexcontainer_1">
					<view class="group_8">
						<view class="rectangle_18503" @click="back">
							<image class="frame" src="/static/image/other/bank/jsyh/back.png" />
						</view>
					</view>
					<text class="text_1"> 银行卡详情 </text>
					<view class="group_9">
						<view class="rectangle_18503_1">
							<image class="group_13980" src="/static/image/other/bank/jsyh/kefu.png" />
							<image class="group_13979" src="/static/image/other/bank/jsyh/more.png" />
						</view>
					</view>
				</view>
			</view>
			<view class="" :style="{height:$systemInfo.statusBarHeight*2+96+'rpx'}">

			</view>
			<view class="group_48200" @click="openEditDialog">
				<view class="group_48198">
					<view class="flexcontainer_2">
						<view class="group_48194">
							<view class="div_1227">
								<image class="path" src="/static/image/other/bank/jsyh/avatar.png" />
							</view>
						</view>
						<view class="flexcontainer_3">
							<text class="text_2">
								{{data.form.bankName}}（{{data.form.cardNumber.substring(data.form.cardNumber.length-4)}}） </text>
							<view class="flexcontainer_4">
								<image class="group_13982" src="/static/image/other/bank/jsyh/editor.png" />
								<!-- <image class="group_48197" src="/static/image/other/bank/jsyh/zc.png" /> -->
								<view class="group_48197">
									正常
								</view>
								<text class="text_3"> 修改别名
								</text>
							</view>
						</view>
						<text class="text_4" @click.stop="data.isShow=true"> 查看卡号 </text>
					</view>
					<text class="text_5"> 卡片类型：{{data.form.cardType}} </text><text class="text_6"> 账户类别：{{data.form.accountType}}
					</text>
					<view class="flexcontainer_5">
						<view class="flexcontainer_6"><text class="text_7"> 到期日期：{{data.form.expiryDate}} </text><text
								class="text_8"> 开户网点：{{data.form.branchName}} </text></view>
						<image class="group_48196" src="/static/image/other/bank/jsyh/code.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="group_48190">
			<view class="rectangle_23318">
				<image class="group_13999" src="/static/image/other/bank/jsyh/rightIcon.png" />
				<image class="frame_1" src="/static/image/other/bank/jsyh/wx.png" />
				<image class="frame_2" src="/static/image/other/bank/jsyh/zfb.png" />
				<text class="text_9"> 快捷支付 </text>
			</view>
		</view>
		<view class="group_48191" @click="openEditDialog">
			<view class="rectangle_23317">
				<view class="rectangle_23316">
					<text class="text_10"> {{data.form.accountCategory}} </text>
				</view>
				<view class="div_418"></view>
				<view class="flexcontainer_7">
					<text class="text_11"> {{data.form.currency}} </text>
					<view class="">
						<text class="text_12"> 可用余额 </text>
						<text class="text_13"> {{data.form.balance}} </text>
						<image class="group_14000" src="/static/image/other/bank/jsyh/rightIcon.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="group_48192" @click="openEditDialog">
			<view class="rectangle_23319">
				<text class="text_14"> 出入金剩余额度 </text>
				<view class="flexcontainer_8">
					<image class="group_48193" src="/static/image/other/bank/jsyh/gth.png" /><text class="text_15">
						(含非绑定账户转账、现金存取、消费缴费) </text>
				</view>
				<view class="flexcontainer_9">
					<text class="text_16"> 日出金: </text><text class="text_17"> 日入金: </text><text class="text_18"> ¥
						{{data.form.dayOut}} </text><text class="text_19"> ¥ {{data.form.dayIn}} </text>
				</view>
				<view class="flexcontainer_10">
					<text class="text_20"> 年出金: </text><text class="text_21"> 年入金: </text><text class="text_22"> ¥
						{{data.form.yearOut}} </text><text class="text_23"> ¥ {{data.form.yearIn}} </text>
				</view>
			</view>
		</view>
		<view v-if="!selectedImage" class="image-box" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
			<image class="div_8a4931ca0f8a124896aa57f966f7f1cf"
				:src="data.footerImage || '/static/image/other/bank/jsyh/footerImg.png'" mode="aspectFill" />
		</view>
		<view v-else class="scroll-image-box flex-1">
			<scroll-view class="image-box h100" style="width: 100%;height: 460rpx;" scroll-y :show-scrollbar="false"
				@scroll="onImageScroll">
				<image class="crop-image-target" style="width:100%;" :src="selectedImage" mode="widthFix"></image>
			</scroll-view>

			<view class="dashed-line-box">
				<view class="dashed-line-text">我是分割线</view>
			</view>
		</view>
		<canvas canvas-id="crop-canvas"
			style="position: fixed; left: -9999px; width: 750rpx; height: 100vh; pointer-events: none;"></canvas>
		<!-- 蒙层 -->
		<view v-if="showMask" class="mask" @click="closeMask">
			<image class="mask-icon" src="/static/image/common/mask-icon.png" mode="widthFix">
			</image>
		</view>
		<Home class="home" />

			<ZdySafeBottom bgColor="#f8f8f8"/>
		<!-- 卡号信息弹窗 -->
		<view class="dask" v-if="data.isShow">
			<view class="info">
				<view class="title">
					{{data.form.cardNumber}}

				</view>
				<view class="dec">

					{{data.form.branchName}}
				</view>
				<view class="btnbox">
					<view class="btn" @click="data.isShow=false">复制全部</view>
					<view class="btn btns" @click="data.isShow=false">仅复制卡号</view>
				</view>
			</view>
		</view>

		<!-- 编辑弹窗 -->
		<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">
						<text>银行名称</text>
						<input v-model="editDialog.data.bankName" placeholder="如: 建设银行" />
					</view>
					<view class="formItem">
						<text>完整卡号</text>
						<input v-model="editDialog.data.cardNumber" placeholder="如: 62170000123456789012" />
					</view>
					<view class="formItem">
						<text>卡片类型</text>
						<input v-model="editDialog.data.cardType" placeholder="如: 龙卡通" />
					</view>
					<view class="formItem">
						<text>账户类别</text>
						<input v-model="editDialog.data.accountType" placeholder="如: II类户" />
					</view>
					<view class="formItem">
						<text>到期日期</text>
						<input v-model="editDialog.data.expiryDate" placeholder="如: 2027/01/31" />
					</view>
					<view class="formItem">
						<text>开户网点</text>
						<input v-model="editDialog.data.branchName" placeholder="如: 北京中关村软件园支行" />
					</view>
					<view class="formItem">
						<text>账户分类</text>
						<input v-model="editDialog.data.accountCategory" placeholder="如: 活期储蓄" />
					</view>
					<view class="formItem">
						<text>币种</text>
						<input v-model="editDialog.data.currency" placeholder="如: 人民币" />
					</view>
					<view class="formItem">
						<text>可用余额</text>
						<input :value="editDialog.data.balance" @input="(e) => onNumberInput('balance', e.detail.value)"
							placeholder="如: 2.71" />
					</view>
					<view class="formItem">
						<text>日出金额度</text>
						<input :value="editDialog.data.dayOut" @input="(e) => onNumberInput('dayOut', e.detail.value)"
							placeholder="如: 50,000.00" />
					</view>
					<view class="formItem">
						<text>日入金额度</text>
						<input :value="editDialog.data.dayIn" @input="(e) => onNumberInput('dayIn', e.detail.value)"
							placeholder="如: 50,000.00" />
					</view>
					<view class="formItem">
						<text>年出金额度</text>
						<input :value="editDialog.data.yearOut" @input="(e) => onNumberInput('yearOut', e.detail.value)"
							placeholder="如: 200,000.00" />
					</view>
					<view class="formItem">
						<text>年入金额度</text>
						<input :value="editDialog.data.yearIn" @input="(e) => onNumberInput('yearIn', e.detail.value)"
							placeholder="如: 200,000.00" />
					</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>
<script setup>
	import { imgLocal  } from '@/utils/common.js';
import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
	import {
		reactive,
		onMounted,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,

		onPageScroll
	} from "@dcloudio/uni-app";
	import NavBar from '@/components/nav-bar/nav-bar'
	const CACHE_KEY = 'jsyh_account_info';
	const FOOTER_IMAGE_KEY = 'jsyh_footer_image';

	const instance = getCurrentInstance();

	const data = reactive({
		navbar: {
			bgColor: 'rgba(0,0,0,0)'
		},
		form: {
			bankName: '建设银行',
			cardNumber: '62170000123456789012',
			cardType: '龙卡通',
			accountType: 'II类户',
			expiryDate: '2027/01/31',
			branchName: '北京中关村软件园支行',
			accountCategory: '活期储蓄',
			currency: '人民币',
			balance: '2.71',
			dayOut: '50,000.00',
			dayIn: '50,000.00',
			yearOut: '200,000.00',
			yearIn: '200,000.00',
		},
		footerImage: '',
		showMask: false,
		isShow: false,
		footerImg:''
	});

	const selectedImage = ref('');
	const scrollTop = ref(0);
	let longPressTimer = null;

	const editDialog = reactive({
		show: false,
		data: {}
	});
	onPageScroll((e) => {
		if (e.scrollTop > 45) {
			data.navbar.bgColor = '#2d60d5'
		} else {
			data.navbar.bgColor = 'rgba(0,0,0,0)'
		}

	})
	onMounted(async() => {
		loadCache();
		// 加载保存的footer图片
		const savedFooter = uni.getStorageSync(FOOTER_IMAGE_KEY);
		if (savedFooter) {
			data.footerImage = savedFooter;
		}else{
			data.footerImage = await imgLocal.getLocalImage('other/bank/jsyh/footerImg.png');
		}
	
	});

	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 handleTouchStart = (e) => {
		// 兼容iOS上滑HOME条
		const systemInfo = uni.getSystemInfoSync();
		if (systemInfo.platform === 'ios' && systemInfo.safeAreaInsets?.bottom) {
			const clientY = e.touches[0].clientY;
			const windowHeight = systemInfo.windowHeight;
			if (clientY > windowHeight - systemInfo.safeAreaInsets.bottom) {
				return;
			}
		}

		longPressTimer = setTimeout(() => {
			uni.vibrateShort();
			chooseImage();
		}, 1200);
	};

	const handleTouchEnd = () => {
		if (longPressTimer) {
			clearTimeout(longPressTimer);
			longPressTimer = null;
		}
	};

	// 选择图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sourceType: ['album'],
			success: (res) => {
				selectedImage.value = res.tempFilePaths[0];
				data.showMask = true;
			}
		});
	};

	// 关闭蒙层
	const closeMask = () => {
		data.showMask = false;
	};

	// 图片滚动监听
	const onImageScroll = (e) => {
		scrollTop.value = e.detail.scrollTop;
	};

	// 确认裁剪
	const confirmImage = () => {
		uni.showLoading({
			title: '处理中...'
		});
		const query = uni.createSelectorQuery().in(instance);

		// 获取容器和图片信息
		query.select('.image-box').boundingClientRect();
		query.select('.crop-image-target').boundingClientRect();
		query.exec(res => {
			if (!res[0] || !res[1]) {
				uni.hideLoading();
				return;
			}

			console.log('rects', res);
			const container = res[0]; // 容器
			const image = res[1]; // 图片实际渲染尺寸

			// 获取图片原始尺寸
			uni.getImageInfo({
				src: selectedImage.value,
				success: (imgInfo) => {
					const scale = imgInfo.width / image.width; // 图片 原始宽 / 渲染宽
					const sTop = scrollTop.value * scale; // 原始图上的裁切起始Y
					const sHeight = container.height * scale; // 原始图上的裁切高度

					// 因为是 widthFix，宽度就是原始图宽度（或裁切全宽）
					const sWidth = imgInfo.width;

					// 设置画布尺寸 (使用像素值)
					const canvasW = container.width;
					const canvasH = container.height;

					const ctx = uni.createCanvasContext('crop-canvas', instance);

					// 清除画布
					ctx.clearRect(0, 0, canvasW, canvasH);

					// 绘制
					ctx.drawImage(
						imgInfo.path,
						0, sTop, sWidth, sHeight, // 源图裁剪区域
						0, 0, canvasW, canvasH // 画布绘制区域
					);
					ctx.draw(false, () => {
						uni.canvasToTempFilePath({
							canvasId: 'crop-canvas',
							width: canvasW,
							height: canvasH,
							destWidth: sWidth, // 使用原图实际宽度,保持原图清晰度
							destHeight: sHeight, // 使用原图实际高度,保持原图清晰度
							success: (res) => {
								console.log('crop success (temp)', res.tempFilePath);

								// 将临时路径保存为永久路径
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: (saveRes) => {
										console.log('save success (saved)', saveRes.savedFilePath);
										data.footerImage = saveRes.savedFilePath;
										selectedImage.value = ''; // 隐藏编辑模式
										// 保存到缓存
										uni.setStorageSync(FOOTER_IMAGE_KEY, data.footerImage);
										uni.hideLoading();
									},
									fail: (err) => {
										console.error('saveFile fail', err);
										uni.hideLoading();
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							},
							fail: (err) => {
								console.error(err);
								uni.hideLoading();
								uni.showToast({
									title: '裁剪失败',
									icon: 'none'
								});
							}
						}, instance);
					});
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '图片加载失败',
						icon: 'none'
					});
				}
			});
		});
	};

	// 关闭图片编辑
	const closeImageEdit = () => {
		selectedImage.value = '';
	};

	// 格式化数字，保留两位小数并添加千分位逗号
	function formatNumber(num) {
		if (!num && num !== 0) return '';
		let cleanNum = String(num).replace(/[^\d.]/g, '');
		const parts = cleanNum.split('.');
		if (parts.length > 2) {
			cleanNum = parts[0] + '.' + parts.slice(1).join('');
		}
		let number = parseFloat(cleanNum);
		if (isNaN(number)) return '';
		number = Math.round(number * 100) / 100;
		return number.toLocaleString('en-US', {
			minimumFractionDigits: 2,
			maximumFractionDigits: 2
		});
	}

	// 处理输入事件
	function onNumberInput(field, value) {
		editDialog.data[field] = formatNumber(value);
	}

	// 每四位添加空格
	function addSpaceEveryFourChars(str) {
		return str.replace(/(.{4})/g, '$1 ').trim();
	}

	// 复制卡号
	function copyCardNumber() {
		uni.setClipboardData({
			data: data.form.cardNumber,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
				data.isShow = false;
			}
		});
	}

	function back() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	* {
		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;
	}

	/* 建设银行 */
	.div {
		position: relative;
		width: 750rpx;
		min-height: 1862rpx;
		overflow: hidden;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		isolation: isolate;

		.home {
			position: absolute;
			top: auto;
			left: 0;
			bottom: 0;
		}

		.div_8a4931ca0f8a124896aa57f966f7f1cf {
			width: 750rpx;
			height: 460rpx;
			position: relative;
			margin-left: auto;
			margin-right: auto;
			z-index: 5;
		}
	}

	/* 图片编辑样式 */
	.image-box {
		width: 750rpx;
		height: 460rpx;
		position: relative;
		overflow: hidden;
	}

	.scroll-image-box {
		width: 100%;
		min-height: 0;
		position: relative;
	}

	.crop-image-target {
		width: 100%;
	}

	.dashed-line-box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border: 4rpx dashed red;
		pointer-events: none;

		.dashed-line-text {
			height: 44rpx;
			line-height: 44rpx;
			width: 180rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			color: #1777FF;
			font-size: 24rpx;
			font-weight: 500;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 999;

		.mask-icon {
			position: absolute;
			top: 50%;
			right: 52rpx;
			transform: translateY(-25%);
			width: 360rpx;
			height: 360rpx;
		}
	}

	/* 组 45764 */
	.group_45764 {
		width: 750rpx;
		// height: 658rpx;
		padding-bottom: 70rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		z-index: 0;
		margin-top: 0;
		margin-left: 0;
		background-image: url(/static/image/other/bank/jsyh/headerBg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.rectangle_23313 {
			position: relative;
			width: 750rpx;
			height: 658rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			isolation: isolate;
			margin-top: 0;
			margin-left: 0;
			-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);

			.flexcontainer {
				position: relative;
				display: flex;
				width: 773rpx;
				height: 394rpx;
				flex-direction: column;
				align-items: flex-start;
				isolation: isolate;
				z-index: 1;
				margin-top: -120rpx;
				margin-left: -16rpx;

				.path_17460 {
					width: 304rpx;
					height: 318rpx;
					z-index: 1;
					position: relative;
					margin-top: 0;
					margin-left: 469rpx;
				}

				.path_17458 {
					width: 610rpx;
					height: 302rpx;
					z-index: 0;
					position: relative;
					margin-top: -226rpx;
					margin-left: 0;
				}

				.path_17459 {
					width: 594rpx;
					height: 284rpx;
					z-index: 2;
					position: relative;
					margin-top: -292rpx;
					margin-left: 8rpx;
				}
			}

			.rectangle_23284 {
				width: 750rpx;
				height: 658rpx;
				background-color: #2d60d5;
				z-index: 0;
				position: relative;
				margin-top: -274rpx;
				margin-left: 0;
			}
		}

		.flexcontainer_box {
			position: fixed;
			left: 0;
			top: 0;
			width: 750rpx;
			background-image: url(/static/image/other/bank/jsyh/headerBg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			z-index: 999 !important;
		}

		.flexcontainer_1 {

			display: flex;
			width: 750rpx;
			height: 96rpx;
			flex-direction: row;
			align-items: flex-start;
			isolation: isolate;
			justify-content: space-between;
			.group_8 {
				position: relative;
				width: 240rpx;
				height: 96rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				z-index: 0;
				margin-left: 0;
				margin-top: 0;

				.rectangle_18503 {
					position: relative;
					width: 240rpx;
					height: 96rpx;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					margin-top: 0;
					margin-left: 0;
					-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);

					.frame {
						width: 48rpx;
						height: 48rpx;
						position: relative;
						margin-top: 32rpx;
						margin-left: 22rpx;
					}
				}
			}

			.text_1 {
				text-align: center;
				font-size: 36rpx;
				font-family: 'PingFang SC';
				font-weight: 400;
				line-height: 40rpx;
				color: #ffffff;
				white-space: pre;
				z-index: 2;
				position: relative;
				margin-top: 34rpx;
			}

			.group_9 {
				position: relative;
				width: 240rpx;
				height: 96rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				z-index: 1;
				// margin-left: 44rpx;
				margin-top: 0;

				.rectangle_18503_1 {
					position: relative;
					width: 240rpx;
					height: 96rpx;
					overflow: hidden;
					display: flex;
					margin-top: 0;
					margin-left: 0;
					-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
					justify-content: flex-end;

					.group_13980 {
						width: 48rpx;
						height: 48rpx;
						position: relative;
						margin-right: 28rpx;
						margin-top: 30rpx;
					}

					.group_13979 {
						width: 48rpx;
						height: 48rpx;
						position: relative;
						margin-right: 28rpx;
						margin-top: 30rpx;
					}
				}
			}
		}

		.group_48200 {
			position: relative;
			width: 640rpx;
			height: 354rpx;

			background: url('/static/image/other/bank/jsyh/cardBg.png') center / cover no-repeat;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-top: 38rpx;
			margin-left: 56rpx;

			.group_48198 {
				position: relative;
				width: 582rpx;
				height: 296rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				isolation: isolate;
				margin-top: 24rpx;
				margin-left: 18rpx;

				.flexcontainer_2 {
					position: relative;
					display: flex;
					width: 502rpx;
					height: 90rpx;
					flex-direction: row;
					align-items: flex-start;
					isolation: isolate;
					z-index: 0;
					margin-top: 0;
					margin-left: 0;

					.group_48194 {
						position: relative;
						width: 90rpx;
						height: 90rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						z-index: 1;
						margin-left: 0;
						margin-top: 0;

						.div_1227 {
							position: relative;
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							background-color: #ffffff;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							margin-top: 0;
							margin-left: 0;

							.path {
								width: 73.3333%;
								height: 73.3333%;
								position: absolute;
								top: 13.3333%;
								left: 13.3333%;
								right: 13.3333%;
								bottom: 13.3333%;
							}
						}
					}

					.flexcontainer_3 {
						position: relative;
						display: flex;
						width: 288rpx;
						height: 88rpx;
						flex-direction: column;
						align-items: flex-start;
						isolation: isolate;
						z-index: 0;
						margin-left: 12rpx;
						margin-top: 2rpx;

						.text_2 {
							position: relative;
							font-size: 32rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							letter-spacing: 2rpx;
							color: #1a1a1a;
							white-space: pre;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
							z-index: 1;
							margin-top: 0;
						}

						.flexcontainer_4 {
							position: relative;
							display: flex;
							width: 232rpx;
							height: 34rpx;
							flex-direction: row;
							align-items: flex-start;
							isolation: isolate;
							z-index: 0;
							margin-top: 18rpx;
							margin-left: 0;

							.group_13982 {
								width: 28rpx;
								height: 28rpx;
								z-index: 0;
								position: relative;
								margin-left: 0;
								margin-top: 2rpx;
							}

							.group_48197 {
								width: 52rpx;
								height: 34rpx;
								z-index: 2;
								position: relative;
								margin-left: 152rpx;
								margin-top: 0;
								background: #D6DEF1;
								border-radius: 2px 2px 2px 2px;
								text-align: center;
								line-height: 34rpx;
								font-size: 10px;
								color: #5D7ED7;
							}

							.text_3 {
								position: absolute;
								top: 4rpx;
								left: 0;
								font-size: 24rpx;
								font-family: 'PingFang SC';
								font-weight: 400;
								line-height: 34rpx;
								color: #90969a;
								white-space: pre;
								height: 34rpx;
								margin-top: -5rpx;
								margin-bottom: -5rpx;
								right: 60rpx;
								width: max-content;
								margin-left: auto;
								margin-right: auto;
								z-index: 1;
							}
						}
					}

					.text_4 {
						position: absolute;
						top: 8rpx;
						left: 400rpx;
						font-size: 24rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 34rpx;
						letter-spacing: 0.08em;
						color: #3587e4;
						white-space: pre;
						height: 34rpx;
						margin-top: -5rpx;
						margin-bottom: -5rpx;
						right: 0;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
						z-index: 2;
					}
				}

				.text_5 {
					position: relative;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 34rpx;
					color: #545454;
					white-space: pre;
					height: 34rpx;
					margin-top: 44rpx;
					margin-bottom: -5rpx;
					width: max-content;
					margin-left: calc(50% - 189rpx);
					margin-right: auto;
					z-index: 2;
				}

				.text_6 {
					position: relative;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 34rpx;
					color: #545454;
					white-space: pre;
					height: 34rpx;
					margin-top: 22rpx;
					margin-bottom: -5rpx;
					width: max-content;
					margin-left: calc(50% - 189rpx);
					margin-right: auto;
					z-index: 3;
				}

				.flexcontainer_5 {
					position: relative;
					display: flex;
					width: 480rpx;
					height: 70rpx;
					flex-direction: row;
					align-items: flex-start;
					isolation: isolate;
					z-index: 1;
					margin-top: 22rpx;
					margin-left: 102rpx;

					.flexcontainer_6 {
						position: relative;
						display: flex;
						width: 360rpx;
						height: 70rpx;
						flex-direction: column;
						align-items: flex-start;
						z-index: 1;
						margin-left: 0;
						margin-top: 0;

						.text_7 {
							position: relative;
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 0;
							margin-bottom: -5rpx;
							width: max-content;
							margin-left: calc(50% - 180rpx);
							margin-right: auto;
						}

						.text_8 {
							position: relative;
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 34rpx;
							color: #545454;
							white-space: pre;
							height: 34rpx;
							margin-top: 22rpx;
							margin-bottom: -5rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}
					}

					.group_48196 {
						width: 66rpx;
						height: 66rpx;
						z-index: 0;
						position: relative;
						margin-left: 54rpx;
						margin-top: 0;
					}
				}
			}
		}

		.rectangle_23314 {
			width: 750rpx;
			height: 28rpx;
			position: relative;
			margin-top: 42rpx;
			margin-left: 0;
		}
	}

	/* 组 48190 */
	.group_48190 {
		position: relative;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		z-index: 2;
		background-color: #f8f8f8;
		margin-top: -28rpx;
		z-index: 9;
		height: 140rpx;
		border-radius: 20rpx 20rpx 0 0;

		.rectangle_23318 {
			position: relative;
			width: 700rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background-color: #ffffff;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			isolation: isolate;
			margin-top: 0;

			.group_13999 {
				width: 20rpx;
				height: 20rpx;
				z-index: 3;
				position: relative;
				margin-left: 652rpx;
				margin-top: 40rpx;
			}

			.frame_1 {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 30rpx;
				left: 436rpx;
				right: 0;
				margin-left: auto;
				margin-right: auto;
				z-index: 0;
			}

			.frame_2 {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 30rpx;
				left: 536rpx;
				right: 0;
				margin-left: auto;
				margin-right: auto;
				z-index: 1;
			}

			.text_9 {
				position: absolute;
				top: 32rpx;
				left: 0;
				font-size: 32rpx;
				font-family: 'PingFang SC';
				font-weight: bold;
				line-height: 36rpx;
				color: #1a1a1a;
				white-space: pre;
				right: 528rpx;
				width: max-content;
				margin-left: auto;
				margin-right: auto;
				z-index: 2;
			}
		}
	}

	/* 组 48191 */
	.group_48191 {
		position: relative;
		width: 700rpx;
		height: 206rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		z-index: 3;
		// margin-top: 24rpx;
		margin-left: 26rpx;

		.rectangle_23317 {
			position: relative;
			width: 700rpx;
			height: 206rpx;
			border-radius: 12rpx;
			background-color: #ffffff;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			isolation: isolate;
			margin-top: 0;

			.rectangle_23316 {
				position: relative;
				width: 144rpx;
				height: 54rpx;
				border-radius: 27rpx;
				background-color: #ecf3fd;
				margin-left: calc(50% - 328rpx);
				margin-right: auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				z-index: 1;
				margin-top: 24rpx;

				.text_10 {
					position: relative;
					font-size: 28rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 40rpx;
					color: #2066c1;
					white-space: pre;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}
			}

			.div_418 {
				width: 700rpx;
				height: 0;
				position: relative;
				transform: rotate(0deg);
				border: 1rpx solid #f2f2f2;
				margin-left: auto;
				margin-right: auto;
				z-index: 2;
				margin-top: 24rpx;
			}

			.flexcontainer_7 {
				position: relative;
				display: flex;
				width: 650rpx;
				height: 36rpx;
				flex-direction: row;
				align-items: flex-start;
				isolation: isolate;
				z-index: 0;
				margin-top: 34rpx;
				margin-left: 22rpx;
				justify-content: space-between;

				.group_14000 {
					width: 20rpx;
					height: 20rpx;
					z-index: 3;
					position: relative;
					margin-top: 8rpx;
				}

				.text_11 {
					font-size: 32rpx;
					font-family: 'PingFang SC';
					font-weight: bold;
					line-height: 36rpx;
					color: #1a1a1a;
					white-space: pre;
					width: max-content;
					z-index: 0;
				}

				.text_12 {
					font-size: 28rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 40rpx;
					color: #999999;
					white-space: pre;
					height: 40rpx;
					margin-top: -6rpx;
					margin-bottom: -6rpx;
					right: 0;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
					z-index: 1;
				}

				.text_13 {
					font-size: 32rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 44rpx;
					color: #1a1a1a;
					white-space: pre;
					height: 44rpx;
					margin-top: -6rpx;
					margin-bottom: -6rpx;
					right: 0;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
					z-index: 2;
				}
			}
		}
	}

	/* 组 48192 */
	.group_48192 {
		position: relative;
		width: 700rpx;
		height: 264rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		z-index: 4;
		margin-top: 24rpx;
		margin-left: 26rpx;

		margin-bottom: 46rpx;

		.rectangle_23319 {
			position: relative;
			width: 700rpx;
			height: 264rpx;
			border-radius: 12rpx;
			background-color: #ffffff;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-top: 0;

			.text_14 {
				position: relative;
				font-size: 32rpx;
				font-family: 'PingFang SC';
				font-weight: 400;
				line-height: 36rpx;
				color: #1a1a1a;
				white-space: pre;
				width: max-content;
				margin-left: calc(50% - 318rpx);
				margin-right: auto;
				margin-top: 38rpx;
			}

			.flexcontainer_8 {
				position: relative;
				display: flex;
				width: 486rpx;
				height: 36rpx;
				flex-direction: row;
				align-items: flex-start;
				isolation: isolate;
				margin-top: 10rpx;
				margin-left: 32rpx;

				.group_48193 {
					width: 28rpx;
					height: 28rpx;
					z-index: 1;
					position: relative;
					margin-left: 458rpx;
					margin-top: 4rpx;
				}

				.text_15 {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 36rpx;
					color: #1a1a1a;
					white-space: pre;
					right: 38rpx;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
					z-index: 0;
				}
			}

			.flexcontainer_9 {
				position: relative;
				display: flex;
				width: 552rpx;
				height: 36rpx;
				flex-direction: row;
				align-items: flex-start;
				margin-top: 18rpx;
				margin-left: 30rpx;

				.text_16 {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 36rpx;
					color: #1a1a1a;
					white-space: pre;
					right: 472rpx;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}

				.text_17 {
					position: absolute;
					top: 0;
					left: 168rpx;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 36rpx;
					color: #1a1a1a;
					white-space: pre;
					right: 0;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}

				.text_18 {
					position: absolute;
					top: 8rpx;
					left: 0;
					font-size: 22rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 30rpx;
					color: #e3360b;
					white-space: pre;
					height: 30rpx;
					margin-top: -4rpx;
					margin-bottom: -4rpx;
					right: 216rpx;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}

				.text_19 {
					position: absolute;
					top: 8rpx;
					left: 424rpx;
					font-size: 22rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 30rpx;
					color: #e3360b;
					white-space: pre;
					height: 30rpx;
					margin-top: -4rpx;
					margin-bottom: -4rpx;
					right: 0;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}
			}

			.flexcontainer_10 {
				position: relative;
				display: flex;
				width: 564rpx;
				height: 36rpx;
				flex-direction: row;
				align-items: flex-start;
				margin-top: 10rpx;
				margin-left: 30rpx;

				.text_20 {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 36rpx;
					color: #1a1a1a;
					white-space: pre;
					right: 484rpx;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}

				.text_21 {
					position: absolute;
					top: 0;
					left: 156rpx;
					font-size: 24rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 36rpx;
					color: #1a1a1a;
					white-space: pre;
					right: 0;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}

				.text_22 {
					position: absolute;
					top: 8rpx;
					left: 0;
					font-size: 22rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 30rpx;
					color: #e3360b;
					white-space: pre;
					height: 30rpx;
					margin-top: -4rpx;
					margin-bottom: -4rpx;
					right: 216rpx;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}

				.text_23 {
					position: absolute;
					top: 8rpx;
					left: 424rpx;
					font-size: 22rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					line-height: 30rpx;
					color: #e3360b;
					white-space: pre;
					height: 30rpx;
					margin-top: -4rpx;
					margin-bottom: -4rpx;
					right: 0;
					width: max-content;
					margin-left: auto;
					margin-right: auto;
				}
			}
		}
	}

	/* 编辑弹窗样式 */
	.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;
		}
	}

	/* 卡号弹窗样式 */
	.dask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999 !important;
		display: flex;
		align-items: center;
		justify-content: center;

		.info {
			width: calc(100vw - 30px);
			background: #FFFFFF;
			border-radius: 4px 4px 4px 4px;
			display: flex;
			flex-direction: column;

			.title {
				font-weight: 400;
				font-size: 16px;
				color: #1A1A1A;
				margin-left: 20px;
				margin-top: 40rpx;
				text-align: center;
			}

			.dec {
				font-weight: 400;
				font-size: 17px;
				color: #1A1A1A;
				margin-left: 20px;
				margin-top: 18rpx;
				text-align: center;
			}

			.btnbox {
				margin-top: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 1rpx solid #F2F2F2;

				.btn {
					width: calc(50% - 1rpx);
					height: 54px;
					line-height: 54px;
					font-weight: 400;
					font-size: 15px;
					color: #4466D4;
					text-align: center;
				}

				.btns {
					border-left: 1rpx solid #F2F2F2;
				}
			}
		}
	}
</style>