<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>
		<view class="flexcontainer">
			<view class="group_48184" @click="openEditDialog">
				<view :style="{height:$systemInfo.statusBarHeight*2+96+'rpx'}" style="position: relative;width: 100%;">

				</view>
				<view class="headerBox">
					<view :style="{height:$systemInfo.statusBarHeight*2+'rpx'}" style="position: relative;width: 100%;">

					</view>
					<view class="header" >
						<image @click="back" src="/static/image/nav-bar/back-black.png" mode=""></image>
						<text class="text_1">借记卡详情</text>
						<text class="imgXl"></text>
					</view>
				</view>
				<view class="rectangle_23309">
					<view class="flexcontainer_1">
						<image class="group_13998" src="/static/image/other/bank/nyyh/eyes.png" />
						<image class="group_48187" src="/static/image/other/bank/nyyh/copy.png" />
						<text class="text_2">{{data.form.accountType}}</text>
						<view class="div_6216_2173">
							<text class="text_3">{{data.form.cardNumberPrefix}}</text>
							<text class="text_4">****</text>
							<text class="text_5">{{data.form.cardNumberSuffix}}</text>
						</view>
					</view>
					<view class="flexcontainer_2">
						<text class="text_6">注册渠道</text>
						<text class="text_7">{{data.form.registerChannel}}</text>
					</view>
					<view class="flexcontainer_3">
						<text class="text_8">开户网点</text>
						<text class="text_9">{{data.form.bankBranch}}</text>
					</view>
					<view class="flexcontainer_4">
						<text class="text_10">卡状态</text>
						<text class="text_11">{{data.form.cardStatus}}</text>
					</view>
					<view class="flexcontainer_5">
						<text class="text_12">账户状态</text>
						<text class="text_13">{{data.form.accountStatus}}</text>
					</view>
					<view class="flexcontainer_6">
						<text class="text_14">默认账户</text>
						<text class="text_15">{{data.form.isDefault}}</text>
					</view>
					<view class="flexcontainer_7">
						<view class="rectangle_23304">
							<text class="text_16">挂失</text>
						</view>
						<view class="rectangle_23305">
							<text class="text_17">改密</text>
						</view>
						<view class="rectangle_23306">
							<text class="text_18">密码解锁</text>
						</view>
						<view class="rectangle_23307">
							<text class="text_19">更多</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="group_48185" @click="openEditDialog">
			<view class="rectangle_23311">
				<view class="flexcontainer_8">
					<image class="group_48186" src="/static/image/other/bank/nyyh/china.png" />
					<text class="text_20">{{data.form.currency}}</text>
				</view>
				<view class="flexcontainer_9">
					<text class="text_21">可用余额</text>
					<text class="text_22">¥ {{data.form.availableBalance}}</text>
				</view>
				<view class="flexcontainer_10">
					<text class="text_23">¥ {{data.form.accountBalance}}</text>
					<text class="text_24">账户余额</text>
				</view>
				<view class="div_417"></view>
				<view class="flexcontainer_11">
					<text class="text_25">钞汇标志</text>
					<text class="text_26">{{data.form.exchangeFlag}}</text>
				</view>
				<view class="flexcontainer_12">
					<text class="text_27">执行利率</text>
					<text class="text_28">{{data.form.interestRate}}</text>
				</view>
				<view class="flexcontainer_13">
					<text class="text_29">开户日期</text>
					<text class="text_30">{{data.form.openDate}}</text>
				</view>
			</view>
		</view>
			<ZdySafeBottom bgColor="#f7f7f7"/>

		<!-- 编辑弹窗 -->
		<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.cardNumberPrefix" placeholder="如: 6216" />
					</view>
					<view class="formItem">
						<text>卡号后缀</text>
						<input v-model="editDialog.data.cardNumberSuffix" placeholder="如: 2173" />
					</view>
					<view class="formItem">
						<text>账户类型</text>
						<input v-model="editDialog.data.accountType" placeholder="如: I类" />
					</view>
					<view class="formItem">
						<text>注册渠道</text>
						<input v-model="editDialog.data.registerChannel" placeholder="如: 网点注册" />
					</view>
					<view class="formItem">
						<text>开户网点</text>
						<input v-model="editDialog.data.bankBranch" placeholder="如: 农业银行北京支行" />
					</view>
					<view class="formItem">
						<text>卡状态</text>
						<input v-model="editDialog.data.cardStatus" placeholder="如: 正常户" />
					</view>
					<view class="formItem">
						<text>账户状态</text>
						<input v-model="editDialog.data.accountStatus" placeholder="如: 正常户" />
					</view>
					<view class="formItem">
						<text>默认账户</text>
						<input v-model="editDialog.data.isDefault" placeholder="如: 是" />
					</view>
					<view class="formItem">
						<text>币种</text>
						<input v-model="editDialog.data.currency" placeholder="如: 人民币活期" />
					</view>
					<view class="formItem">
						<text>可用余额</text>
						<input :value="editDialog.data.availableBalance"
							@input="(e) => onNumberInput('availableBalance', e.detail.value)" placeholder="如: 0.00" />
					</view>
					<view class="formItem">
						<text>账户余额</text>
						<input :value="editDialog.data.accountBalance"
							@input="(e) => onNumberInput('accountBalance', e.detail.value)" placeholder="如: 0.00" />
					</view>
					<view class="formItem">
						<text>钞汇标志</text>
						<input v-model="editDialog.data.exchangeFlag" placeholder="如: 本币" />
					</view>
					<view class="formItem">
						<text>执行利率</text>
						<input v-model="editDialog.data.interestRate" placeholder="如: 0.05000%" />
					</view>
					<view class="formItem">
						<text>开户日期</text>
						<input v-model="editDialog.data.openDate" placeholder="如: 2026/12/02" />
					</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 {
		reactive,
		onMounted
	} from 'vue';

	const CACHE_KEY = 'nyyh_account_info';
import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'

	const data = reactive({
		form: {
			cardNumberPrefix: '6216',
			cardNumberSuffix: '2173',
			accountType: 'I类',
			registerChannel: '网点注册',
			bankBranch: '农业银行北京支行',
			cardStatus: '正常户',
			accountStatus: '正常户',
			isDefault: '是',
			currency: '人民币活期',
			availableBalance: '0.00',
			accountBalance: '0.00',
			exchangeFlag: '本币',
			interestRate: '0.05000%',
			openDate: '2026/12/02',
		}
	});

	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'
		});
	}

	// 格式化数字，保留两位小数并添加千分位逗号
	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 back() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	$color-text-primary: #1a1a1a;
	$color-text-secondary: #767676;
	$color-text-muted: #999999;
	$color-text-btn: #6a6a6a;
	$color-accent: #08c1a2;
	$color-gold: #dda94f;
	$color-bg: #f7f7f7;
	$color-white: #ffffff;
	$color-border: #e6e6e6;

	.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: 1624rpx;
		overflow: hidden;
		background-color: $color-bg;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		isolation: isolate;

		.flexcontainer {
			position: relative;
			display: flex;
			width: 750rpx;
			flex-direction: column;
			align-items: flex-start;
			isolation: isolate;
			z-index: 0;
			margin-top: 0;
			margin-left: 0;

			.group_48184 {
				width: 750rpx;
				// height: 754rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				// margin-top: -86rpx;
				margin-left: 0;
				background-color: $color-white;
				isolation: isolate;
				padding-bottom: 44rpx;

				.text_1 {
					position: relative;
					text-align: center;
					font-size: 34rpx;
					font-family: 'PingFang SC';
					font-weight: 400;
					color: $color-text-primary;
					white-space: pre;
					width: max-content;
					z-index: 1;
				}

				.rectangle_23309 {
					position: relative;
					width: 686rpx;
					// height: 484rpx;
					padding-bottom: 28rpx;
					border-radius: 12rpx;
					background-color: $color-white;
					box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
					margin: 44rpx auto 0;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					z-index: 0;

					.flexcontainer_1 {
						position: relative;
						display: flex;
						width: 450rpx;
						height: 42rpx;
						flex-direction: row;
						align-items: flex-start;
						isolation: isolate;
						margin-top: 23rpx;
						margin-left: 39rpx;

						.group_13998 {
							width: 32rpx;
							height: 32rpx;
							z-index: 2;
							position: relative;
							margin-left: 317rpx;
							margin-top: 5rpx;
						}

						.group_48187 {
							width: 80rpx;
							height: 42rpx;
							z-index: 3;
							position: relative;
							margin-left: 21rpx;
							margin-top: 0;
						}

						.text_2 {
							position: absolute;
							top: 5rpx;
							left: 0;
							text-align: center;
							font-size: 30rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 42rpx;
							color: $color-accent;
							white-space: pre;
							height: 42rpx;
							margin-top: -6rpx;
							margin-bottom: -6rpx;
							right: 412rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
							z-index: 0;
						}

						.div_6216_2173 {
							position: absolute;
							top: 5rpx;
							left: 0;
							text-align: center;
							line-height: 44rpx;
							white-space: pre;
							height: 44rpx;
							margin-top: -7rpx;
							margin-bottom: -7rpx;
							right: 96rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
							z-index: 1;

							.text_3,
							.text_5 {
								font-size: 32rpx;
								font-family: 'PingFang SC';
								line-height: 30rpx;
								font-weight: bold;
								color: $color-text-primary;
							}

							.text_4 {
								font-size: 28rpx;
								font-family: 'PingFang SC';
								line-height: 30rpx;
								font-weight: bold;
								color: $color-text-primary;
							}
						}
					}

					.flexcontainer_2,
					.flexcontainer_3,
					.flexcontainer_4,
					.flexcontainer_5,
					.flexcontainer_6 {
						position: relative;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						margin-left: 38rpx;
					}

					.flexcontainer_2 {
						width: 222rpx;
						height: 26rpx;
						margin-top: 26rpx;

						.text_6 {
							position: absolute;
							top: 0;
							left: 0;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-primary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 118rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}

						.text_7 {
							position: absolute;
							top: 0;
							left: 118rpx;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-secondary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 0;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}
					}

					.flexcontainer_3 {
						width: 326rpx;
						height: 26rpx;
						margin-top: 26rpx;

						.text_8 {
							position: absolute;
							top: 0;
							left: 0;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-primary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 222rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}

						.text_9 {
							position: absolute;
							top: 0;
							left: 118rpx;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-secondary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 0;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}
					}

					.flexcontainer_4,
					.flexcontainer_5 {
						width: 196rpx;
						height: 26rpx;
					}

					.flexcontainer_4 {
						margin-top: 26rpx;

						.text_10 {
							position: absolute;
							top: 0;
							left: 0;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-primary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 118rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}

						.text_11 {
							position: absolute;
							top: 0;
							left: 118rpx;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-secondary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 0;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}
					}

					.flexcontainer_5 {
						margin-top: 26rpx;

						.text_12 {
							position: absolute;
							top: 0;
							left: 0;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-primary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 92rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}

						.text_13 {
							position: absolute;
							top: 0;
							left: 118rpx;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-secondary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 0;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}
					}

					.flexcontainer_6 {
						width: 144rpx;
						height: 26rpx;
						margin-top: 26rpx;

						.text_14 {
							position: absolute;
							top: 0;
							left: 0;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-primary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 40rpx;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}

						.text_15 {
							position: absolute;
							top: 0;
							left: 118rpx;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							line-height: 36rpx;
							color: $color-text-secondary;
							white-space: pre;
							height: 36rpx;
							margin-top: -5rpx;
							margin-bottom: -5rpx;
							right: 0;
							width: max-content;
							margin-left: auto;
							margin-right: auto;
						}
					}

					.flexcontainer_7 {
						position: relative;
						display: flex;
						width: 624rpx;
						height: 50rpx;
						flex-direction: row;
						align-items: flex-start;
						margin-top: 58rpx;
						margin-left: 30rpx;

						.rectangle_23304,
						.rectangle_23305,
						.rectangle_23306,
						.rectangle_23307 {
							position: absolute;
							width: 144rpx;
							height: 50rpx;
							top: 0;
							border-radius: 25rpx;
							border: 2rpx solid $color-text-muted;
							margin-left: auto;
							margin-right: auto;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							text {
								position: relative;
								font-size: 26rpx;
								font-family: 'PingFang SC';
								font-weight: 400;
								// line-height: 36rpx;
								color: $color-text-btn;
								white-space: pre;
								width: max-content;
								margin-left: auto;
								margin-right: auto;
							}
						}

						.rectangle_23304 {
							left: 0;
							right: 480rpx;
						}

						.rectangle_23305 {
							left: 0;
							right: 160rpx;
						}

						.rectangle_23306 {
							left: 160rpx;
							right: 0;
						}

						.rectangle_23307 {
							left: 480rpx;
							right: 0;
						}
					}
				}
			}
		}

		.group_48185 {
			position: relative;
			width: 750rpx;
			height: 468rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			z-index: 2;
			margin-top: 20rpx;
			margin-left: 0;

			.rectangle_23311 {
				position: relative;
				width: 750rpx;
				height: 468rpx;
				background-color: $color-white;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				isolation: isolate;
				margin-top: 0;

				.flexcontainer_8 {
					position: relative;
					display: flex;
					width: 250rpx;
					height: 50rpx;
					flex-direction: row;
					align-items: flex-start;
					z-index: 0;
					margin-top: 48rpx;
					margin-left: 32rpx;

					.group_48186 {
						width: 50rpx;
						height: 50rpx;
						position: relative;
						margin-left: 0;
						margin-top: 0;
					}

					.text_20 {
						position: absolute;
						top: 8rpx;
						left: 70rpx;
						font-size: 36rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 50rpx;
						color: $color-text-primary;
						white-space: pre;
						height: 50rpx;
						margin-top: -7rpx;
						margin-bottom: -7rpx;
						right: 0;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}
				}

				.flexcontainer_9 {
					position: relative;
					display: flex;
					width: 686rpx;
					height: 30rpx;
					flex-direction: row;
					align-items: flex-start;
					z-index: 1;
					margin-top: 44rpx;
					margin-left: 32rpx;

					.text_21 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-primary;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 566rpx;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}

					.text_22 {
						position: absolute;
						top: 2rpx;
						font-size: 28rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 40rpx;
						color: $color-gold;
						white-space: pre;
						height: 40rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 0;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}
				}

				.flexcontainer_10 {
					position: relative;
					display: flex;
					width: 686rpx;
					height: 30rpx;
					flex-direction: row;
					align-items: flex-start;
					z-index: 2;
					margin-top: 20rpx;
					margin-left: 32rpx;

					.text_23 {
						position: absolute;
						top: 0;
						font-size: 28rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 40rpx;
						color: $color-gold;
						white-space: pre;
						height: 40rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 0;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}

					.text_24 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-primary;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 566rpx;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}
				}

				.div_417 {
					width: 686rpx;
					height: 0;
					position: relative;
					border: 1rpx solid $color-border;
					margin-left: auto;
					margin-right: auto;
					z-index: 6;
					margin-top: 42rpx;
				}

				.flexcontainer_11,
				.flexcontainer_12,
				.flexcontainer_13 {
					position: relative;
					display: flex;
					width: 686rpx;
					height: 30rpx;
					flex-direction: row;
					align-items: flex-start;
					margin-left: 32rpx;
				}

				.flexcontainer_11 {
					z-index: 3;
					margin-top: 30rpx;

					.text_25 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-muted;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 566rpx;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}

					.text_26 {
						position: absolute;
						top: 0;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-muted;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 0;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}
				}

				.flexcontainer_12 {
					z-index: 4;
					margin-top: 20rpx;

					.text_27 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-muted;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 566rpx;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}

					.text_28 {
						position: absolute;
						top: 0;
						text-align: right;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-muted;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 0;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}
				}

				.flexcontainer_13 {
					z-index: 5;
					margin-top: 20rpx;

					.text_29 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-muted;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						right: 566rpx;
						width: max-content;
						margin-left: auto;
						margin-right: auto;
					}

					.text_30 {
						position: absolute;
						top: 0;
						text-align: right;
						font-size: 30rpx;
						font-family: 'PingFang SC';
						font-weight: 400;
						line-height: 42rpx;
						color: $color-text-muted;
						white-space: pre;
						height: 42rpx;
						margin-top: -6rpx;
						margin-bottom: -6rpx;
						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;
		}
	}
.headerBox{
	position: fixed;
	left: 0;
	top: 0;
		width: 750rpx;

				z-index: 99;
}
	.header {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 96rpx;
		justify-content: space-between;
		background-color: #fff;
		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: 18rpx;
		}

		.imgXl {
			width: 48rpx;
			margin-right: 18rpx;
		}
	}
</style>