<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_transfer" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_transfer')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
	<view class="container">

		<!-- 蓝色背景区域 -->
		<view class="header-section">
			<nav-bar bgColor="transparent" :isBack="false" tipLayerType="transfer-tip" isTipLayer tipLayerText="修改转账数据"
				:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton">
				<template v-slot:right>
					<view class="nav-link w100" style="text-align: right;white-space: nowrap;padding: 0;">
						<text @click="util.goBack()">回首页</text>
					</view>
				</template>
				<template v-slot:center>
					<view class="status-box">
						<image class="image" src="/static/image/balance/transfer/success.png"></image>
						<text class="status-text">转账成功</text>
					</view>
				</template>
			</nav-bar>

			<!-- 转账状态信息 -->
			<view class="success-info">
				<view class="amount-box" @click="openEditPopup()">
					<text class="symbol">¥</text>
					<text class="amount alipay-font">{{ Number(transferData.amount).toFixed(2) }}</text>
				</view>

				<!-- 收款方/付款方式 -->
				<view class="details-box">
					<view class="detail-item">
						<text class="label">收款方</text>
						<text class="value">{{ transferData.recipient }}</text>
					</view>
					<view class="detail-item">
						<text class="label">付款方式</text>
						<text class="value">{{ transferData.paymentMethod }}</text>
					</view>
				</view>
			</view>
			<!-- 立即通知收款人卡片 -->
			<view class="card notification-card">
				<view class="card-header">
					<text class="card-title">立即通知收款人</text>
					<view class="card-sub-title">
						<text>预约转账</text>
						<uni-icons type="right" size="16" color="#969696"></uni-icons>
					</view>
				</view>
				<view class="card-item-bg">
					<view class="user-info">
						<view class="avatar-box" @click="openEditPopup()">
							<image v-if="transferData.avatar" class="avatar" :src="transferData.avatar"
								mode="aspectFill">
							</image>
							<image v-else class="avatar" src="/static/image/balance/transfer/add-img.png"
								mode="aspectFill">
							</image>
						</view>
						<view class="user-details">
							<view class="name-box" @click="openEditPopup()">
								<text class="name">{{ transferData.recipient }}</text>
								<text class="remark-link">备注</text>
							</view>
							<text class="desc">信息准确，对账无忧</text>
						</view>
					</view>
					<view class="notify-btn-box">
						<view class="notify-btn">通知TA</view>
					</view>
				</view>
			</view>

			<view class="promo-card">
				<view class="promo-left-box">
					<image class="img" :src="transferData.promoImage || '/static/image/balance/transfer/card-img-2.png'"
						mode="aspectFill"></image>
				</view>
				<view class="promo-right">
					<view class="promo-content">
						<text class="promo-title">{{ transferData.promoTitle }}</text>
						<view class="promo-tags">
							<text class="tag">{{ transferData.promoTag }}</text>
							<text class="tag-desc">{{ transferData.promoTagDesc }}</text>
						</view>
					</view>
					<view class="promo-right-box">

						<view class="price-box">
							<text class="p-num alipay-font">{{ transferData.promoPrice }}</text>
							<text class="p-unit">元</text>
						</view>
						<view class="free-btn">免费领</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 白色卡片区域 -->
		<view class="content-section">
			<!-- 飞猪广告 -->
			<view class="card fliggy-card">
				<image class="banner-img" :src="transferData.bannerUrl" mode="widthFix" @click="toggleBanner">
				</image>
				<view class="guanggao-tag">
					<image style="width: 70rpx;height: 32rpx;" src="/static/image/balance/transfer/guanggao.png">
					</image>
				</view>
				<view class="yaoyiyao-container">
					<view class="yaoyiyao-box">
						<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix"></image>
						<text class="text">摇动或点击查看详情</text>
					</view>
				</view>
				<view class="banner-footer"
					v-if="transferData.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
					<view class="banner-info">
						<view class="logo-box">
							<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
							</image>
						</view>
						<view class="text-content">
							<text class="b-title">飞猪旅行</text>
							<text class="b-desc">飞猪出行 超多折扣</text>
						</view>
					</view>
					<view class="b-btn">领优惠</view>
				</view>
				<view class="banner-footer"
					v-if="transferData.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
					<view class="banner-info">
						<view class="logo-box">
							<image class="logo" src="/static/image/balance/transfer/taobaoshangou.png" mode="aspectFit">
							</image>
						</view>
						<view class="text-content">
							<text class="b-title">淘宝闪购</text>
							<text class="b-desc">每天领大额外面红包</text>
						</view>
					</view>
					<view class="b-btn">去领取</view>
				</view>
			</view>
		</view>
		<!-- 底部操作区 -->
		<view class="footer-section" :style="{'padding-bottom':$store.state.safeBottomAz+'px'}">
			<view class="finish-btn" @click="goBack">完成</view>
		</view>
		<ZdySafeBottom bgColor="#f5f5f5"/>

		<!-- 编辑弹窗 -->
		<uni-popup ref="editPopup" type="center">
			<view class="edit-modal">
				<view class="modal-title">编辑转账数据</view>
				<view class="modal-content">
					<scroll-view scroll-y="true" class="modal-scroll">
						<view class="form-item">
							<text class="require-dot">*</text>
							<text class="label">选择头像</text>
							<view class="avatar-picker" @click="chooseAvatar">
								<image v-if="tempEditData.avatar" :src="tempEditData.avatar" mode="aspectFill"></image>
								<image v-else class="dialog-avatar" src="/static/image/balance/transfer/add-img.png"
									mode="aspectFill">
								</image>
							</view>
						</view>
						<view class="form-item">
							<text class="require-dot">*</text>
							<text class="label">转账金额</text>
							<uni-easyinput class="input" v-model="tempEditData.amount" type="digit" :inputBorder="false"
								placeholder="请输入转账金额" />
						</view>
						<view class="form-item">
							<text class="require-dot">*</text>
							<text class="label">收款方</text>
							<uni-easyinput class="input" v-model="tempEditData.recipient" :inputBorder="false"
								placeholder="请输入收款方" />
						</view>
						<view class="form-item">
							<text class="require-dot">*</text>
							<text class="label">付款方式</text>
							<uni-easyinput class="input" v-model="tempEditData.paymentMethod" :inputBorder="false"
								placeholder="请输入付款方式" />
						</view>
						<!-- 闪购神券配置 -->
						<text class="form-title-desc">闪购神券配置</text>
						<view class="form-item">
							<text class="require-dot"></text>
							<text class="label">闪购图片</text>
							<view class="avatar-picker" @click="choosePromoImage">
								<image :src="tempEditData.promoImage || '/static/image/balance/transfer/card-img-2.png'"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="form-item">
							<text class="require-dot"></text>
							<text class="label">闪购标签</text>
							<uni-easyinput class="input" v-model="tempEditData.promoTag" :inputBorder="false"
								placeholder="请输入闪购标签" />
						</view>
						<view class="form-item">
							<text class="require-dot"></text>
							<text class="label">闪购标题</text>
							<uni-easyinput class="input" v-model="tempEditData.promoTitle" :inputBorder="false"
								placeholder="请输入闪购标题" />
						</view>
						<view class="form-item">
							<text class="require-dot"></text>
							<text class="label">标签说明</text>
							<uni-easyinput class="input" v-model="tempEditData.promoTagDesc" :inputBorder="false"
								placeholder="请输入标签说明" />
						</view>
						<view class="form-item price-item">
							<text class="require-dot"></text>
							<text class="label">神券金额</text>
							<view class="input-with-unit">
								<uni-easyinput class="input" v-model="tempEditData.promoPrice" :inputBorder="false"
									placeholder="请输入神券金额" />
								<text class="unit">元</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="modal-footer">
					<view class="btn cancel" @click="closeEditPopup">取消</view>
					<view class="btn confirm" @click="confirmEdit">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script setup>
import {
	ref,
	onMounted,
	reactive,
	getCurrentInstance
} from 'vue';
import {
	onShow,
	onLoad
} from '@dcloudio/uni-app';
import {
	util,
	numberUtil
} from '@/utils/common.js';
import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
const {
	appContext,
	proxy
} = getCurrentInstance();

const statusBarHeight = ref(0);
const editPopup = ref(null);

const STORAGE_KEY = 'alipay_transfer_data';

const transferData = reactive({
	amount: '10000',
	recipient: '小王(*王)',
	paymentMethod: '工商银行卡(9999)',
	avatar: '',
	promoImage: '',
	promoTitle: '零售购物券',
	promoTag: '淘宝闪购',
	promoTagDesc: '满29元可用',
	promoPrice: '8',
	bannerUrl: '/static/image/balance/transfer/bottom-banner-1.png'
});

const bannerImages = [
	'/static/image/balance/transfer/bottom-banner-1.png',
	'/static/image/balance/transfer/bottom-banner-2.png'
];

const toggleBanner = () => {
	const currentIndex = bannerImages.indexOf(transferData.bannerUrl);
	const nextIndex = (currentIndex + 1) % bannerImages.length;
	transferData.bannerUrl = bannerImages[nextIndex];
	uni.setStorageSync(STORAGE_KEY, transferData);
};

onLoad(() => {
	// 进入转账页面埋点
	proxy.$apiUserEvent('all', {
		type: 'click',
		key: 'transfer',
		value: "转账"
	})
})

// 从缓存加载数据
const loadStorageData = () => {
	const savedData = uni.getStorageSync(STORAGE_KEY);
	if (savedData) {
		Object.assign(transferData, savedData);
	}
};

loadStorageData();

const tempEditData = reactive({
	amount: '',
	recipient: '',
	paymentMethod: '',
	avatar: '',
	promoImage: '',
	promoTitle: '',
	promoTag: '',
	promoTagDesc: '',
	promoPrice: ''
});

const buttonGroup = [{
	name: "修改转账数据",
	click: () => {
		openEditPopup();
	}
}]

const openEditPopup = () => {
	tempEditData.amount = transferData.amount;
	tempEditData.recipient = transferData.recipient;
	tempEditData.paymentMethod = transferData.paymentMethod;
	tempEditData.avatar = transferData.avatar;
	tempEditData.promoImage = transferData.promoImage;
	tempEditData.promoTitle = transferData.promoTitle;
	tempEditData.promoTag = transferData.promoTag;
	tempEditData.promoTagDesc = transferData.promoTagDesc;
	tempEditData.promoPrice = transferData.promoPrice;
	editPopup.value.open();
};

const closeEditPopup = () => {
	editPopup.value.close();
};

/**
 * 将图片保存到本地持久化存储
 */
const saveImageToLocal = (tempFilePath) => {
	return new Promise((resolve) => {
		// #ifdef APP-PLUS
		// 如果是已经持久化的路径或是静态资源，直接返回
		if (!tempFilePath || tempFilePath.startsWith('_doc') || tempFilePath.startsWith('/static')) {
			return resolve(tempFilePath);
		}
		uni.saveFile({
			tempFilePath: tempFilePath,
			success: (res) => {
				resolve(res.savedFilePath);
			},
			fail: (err) => {
				console.error('图片持久化失败:', err);
				resolve(tempFilePath);
			}
		});
		// #endif
		// #ifndef APP-PLUS
		resolve(tempFilePath);
		// #endif
	});
};

/**
 * 删除本地持久化文件
 */
const removeLocalFile = (filePath) => {
	// #ifdef APP-PLUS
	if (filePath && filePath.startsWith('_doc')) {
		uni.removeSavedFile({
			filePath: filePath,
			success: () => {
				console.log('本地文件删除成功:', filePath);
			},
			fail: (err) => {
				console.warn('本地文件删除失败:', filePath, err);
			}
		});
	}
	// #endif
};

const confirmEdit = async () => {
	if (!tempEditData.avatar) {
		uni.showToast({
			title: '请选择头像',
			icon: 'none'
		});
		return;
	}
	if (!tempEditData.amount || isNaN(Number(tempEditData.amount))) {
		uni.showToast({
			title: '请输入有效金额',
			icon: 'none'
		});
		return;
	}
	if (!tempEditData.recipient.trim()) {
		uni.showToast({
			title: '请输入收款方',
			icon: 'none'
		});
		return;
	}
	if (!tempEditData.paymentMethod.trim()) {
		uni.showToast({
			title: '请输入付款方式',
			icon: 'none'
		});
		return;
	}

	// 处理头像持久化 (仅限 APP 端)
	let finalAvatarPath = tempEditData.avatar;
	// #ifdef APP-PLUS
	if (tempEditData.avatar !== transferData.avatar) {
		// 如果图片发生了变化，保存新图并尝试删除旧图
		finalAvatarPath = await saveImageToLocal(tempEditData.avatar);
		if (transferData.avatar) {
			removeLocalFile(transferData.avatar);
		}
	}
	// #endif

	// 处理闪购图片持久化 (仅限 APP 端)
	let finalPromoImagePath = tempEditData.promoImage;
	// #ifdef APP-PLUS
	if (tempEditData.promoImage !== transferData.promoImage) {
		// 如果图片发生了变化，保存新图并尝试删除旧图
		finalPromoImagePath = await saveImageToLocal(tempEditData.promoImage);
		if (transferData.promoImage) {
			removeLocalFile(transferData.promoImage);
		}
	}
	// #endif

	transferData.amount = tempEditData.amount;
	transferData.recipient = tempEditData.recipient;
	transferData.paymentMethod = tempEditData.paymentMethod;
	transferData.avatar = finalAvatarPath;
	transferData.promoImage = finalPromoImagePath;
	transferData.promoTitle = tempEditData.promoTitle;
	transferData.promoTag = tempEditData.promoTag;
	transferData.promoTagDesc = tempEditData.promoTagDesc;
	transferData.promoPrice = tempEditData.promoPrice;

	// 保存到本地缓存
	uni.setStorageSync(STORAGE_KEY, transferData);

	closeEditPopup();
};

const chooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			tempEditData.avatar = res.tempFilePaths[0];
		}
	});
};

const choosePromoImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			tempEditData.promoImage = res.tempFilePaths[0];
		}
	});
};

onMounted(() => {
	const systemInfo = uni.getSystemInfoSync();
	if (systemInfo.statusBarHeight) {
		statusBarHeight.value = systemInfo.statusBarHeight;
	}
});

onShow(() => {
	// #ifdef APP-PLUS&&!APP-HARMONY
	util.setAndroidSystemBarColor('#F5F5F5')
	uni.setNavigationBarColor({
		animation: { // 动画效果
			duration: 100,
			timingFunc: 'easeIn'
		}
	})
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("light");
	}, 500);
	// #endif
})

const goBack = () => {
	uni.navigateBack();
};
</script>

<style lang="less" scoped>
@import "@/common/main.css";

.container {
	min-height: 100vh;
	background-color: #F5F5F5;
}

/* 编辑弹窗样式 */
.edit-modal {
	background-color: #fff;
	width: 600rpx;
	border-radius: 40rpx;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.modal-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #1a1a1a;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.modal-content {
		width: 100%;
		overflow: hidden;

		.modal-scroll {
			max-height: 60vh;
		}

		.form-title-desc {
			display: block;
			color: #767676;
			font-size: 24rpx;
			padding-bottom: 24rpx;
		}

		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			width: 100%;

			::v-deep .uni-easyinput__content {
				background-color: transparent !important;
			}

			.require-dot {
				color: #ff4d4f;
				margin-right: 10rpx;
				font-size: 32rpx;
			}

			.label {
				font-size: 28rpx;
				color: #1A1A1A;
				width: 160rpx;
				flex-shrink: 0;
			}

			.avatar-picker {
				width: 84rpx;
				height: 84rpx;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;

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

			.input-with-unit {
				flex: 1;
				display: flex;
				align-items: center;
				background-color: #F6F6F6;
				border-radius: 12rpx;
				padding: 0rpx 20rpx;

				.input {
					flex: 1;
					background-color: transparent;
					padding: 0;
					font-size: 28rpx;

					::v-deep .uni-easyinput__content-input {
						height: 70rpx !important;
					}

					::v-deep .uni-easyinput__placeholder-class {
						font-size: 28rpx !important;
					}
				}

				.unit {
					font-size: 28rpx;
					color: #1A1A1A;
					margin-left: 10rpx;
				}
			}

			.input {
				flex: 1;
				background-color: #F6F6F6;
				border-radius: 12rpx;
				padding: 0rpx 20rpx;
				font-size: 28rpx;

				::v-deep .uni-easyinput__content-input {
					height: 70rpx !important;
				}

				::v-deep .uni-easyinput__placeholder-class {
					font-size: 28rpx !important;
				}
			}
		}
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 40rpx;

		.btn {
			width: 240rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 500;
		}

		.cancel {
			background-color: #F1F1F1;
			color: #767676;
		}

		.confirm {
			background-color: #1777FF;
			color: #fff;
		}
	}
}

.header-section {
	background: linear-gradient(181deg, #3884FD 60%, rgba(30, 128, 253, 0.5) 81.75%, rgba(30, 128, 253, 0) 100%);

	::v-deep .nav-bar-container {
		position: relative !important;
	}

	::v-deep .placeholder-box {
		display: none !important;
		background: transparent;
	}

	::v-deep .tipLayer {
		position: absolute;
	}

	::v-deep .uni-navbar__header-btns {
		width: 100px !important;
	}
}

.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
}


.nav-link {
	padding: 0 30rpx;
	text-align: right;
	font-size: 28rpx;
	line-height: 28rpx;
	color: #fff;
}

.success-info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.status-box {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
	height: 34rpx;

	.image {
		width: 34rpx;
		height: 34rpx;
		margin-right: 12rpx;
	}

	.status-text {
		font-size: 34rpx;
		color: #FFFFFF;
		font-weight: 500;
		line-height: 34rpx;
	}
}

.amount-box {
	display: flex;
	align-items: baseline;
	color: #fff;
	margin-top: 20rpx;
	margin-bottom: 60rpx;

	.symbol {
		font-size: 68rpx;
		margin-right: 4rpx;
	}

	.amount {
		font-size: 92rpx;
		line-height: 92rpx;
		font-weight: 500;
	}
}

.details-box {
	width: 100%;
	padding: 0 46rpx;

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		height: 26rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);

		text {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.9);
			line-height: 26rpx;
		}

	}
}

.content-section {
	padding: 24rpx;
	padding-bottom: 16rpx;
	background-color: #F5F5F5;
	border-radius: 30rpx 30rpx 0 0;
}

.card {
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.notification-card {
	padding: 24rpx 16rpx;
	margin: 10rpx 24rpx;

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 22rpx;

		.card-title {
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 500;
			color: #1A1A1A;
		}

		.card-sub-title {
			font-size: 28rpx;
			line-height: 28rpx;
			color: #969696;
			display: flex;
			align-items: center;
		}
	}

	.card-item-bg {
		background-color: #fff;
		background-image: url("/static/image/balance/transfer/card-bg.png");
		background-size: cover;
		background-position: center;
		border-radius: 16rpx;
		padding: 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		overflow: hidden;

		.user-info {
			display: flex;
			align-items: center;
			z-index: 1;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
				margin-right: 22rpx;
				border: 2px solid #FFFFFF;
			}

			.name-box {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					font-size: 32rpx;
					line-height: 32rpx;
					color: #35363B;
					font-weight: 500;
				}

				.remark-link {
					font-size: 26rpx;
					line-height: 26rpx;
					color: #1777FF;
					margin-left: 20rpx;
				}
			}

			.desc {
				font-size: 26rpx;
				line-height: 26rpx;
				color: #969696;
			}
		}

		.notify-btn {
			height: 52rpx;
			line-height: 52rpx;
			padding: 0 20rpx;
			background-color: #1777FF;
			color: #FFFFFF;
			font-size: 24rpx;
			border-radius: 26rpx;
			z-index: 1;
		}

		.watermark-icon {
			position: absolute;
			right: 20rpx;
			bottom: -20rpx;
			opacity: 0.5;
		}
	}
}

.promo-card {
	// padding: 30rpx;
	margin: 24rpx;
	margin-bottom: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;



	.promo-left-box {
		display: flex;
		align-items: center;
		padding: 34rpx;
		background-image: url("/static/image/balance/transfer/card-bg-2-left.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		height: 144rpx;


		.img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

	}



	.promo-right {
		height: 144rpx;
		background-image: url("/static/image/balance/transfer/card-bg-2-right.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 32rpx 24rpx;

		.promo-title {
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 500;
			color: #1A1A1A;
		}

		.promo-tags {
			display: flex;
			align-items: center;
			margin-top: 8rpx;

			.tag {
				font-size: 24rpx;
				line-height: 34rpx;
				height: 34rpx;
				color: #EF673C;
				background-color: #FFF2F1;
				border-radius: 4rpx;
				margin-right: 12rpx;
				padding: 0 12rpx;
			}

			.tag-desc {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #969696;
			}
		}


	}

	.promo-right-box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.price-box {
			color: #F93950;

			.p-num {
				font-size: 34rpx;
				line-height: 24rpx;
				font-weight: 500;
			}

			.p-unit {
				font-size: 24rpx;
				line-height: 24rpx;
				margin-left: 2rpx;
			}
		}

		.free-btn {
			height: 52rpx;
			line-height: 52rpx;
			padding: 0 24rpx;
			background-color: #FA3A49;
			color: #fff;
			font-size: 24rpx;
			border-radius: 26rpx;
		}
	}
}

.fliggy-card {
	overflow: hidden;
	position: relative;

	.banner-img {
		width: 100%;
	}

	.guanggao-tag {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
	}

	.yaoyiyao-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: -80rpx;
		padding-bottom: 16rpx;

		.yaoyiyao-box {
			padding: 12rpx 18rpx;
			display: flex;
			align-items: center;
			background-color: #000000;
			border-radius: 28rpx;
			opacity: 0.5;

			.img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 14rpx;
			}

			.text {
				color: #FFFFFF;
				font-size: 24rpx;
				line-height: 24rpx;
			}

		}
	}

	.banner-footer {
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.banner-info {
			display: flex;
			align-items: center;

			.logo-box {
				width: 76rpx;
				height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.logo {
					width: 76rpx;
					height: 76rpx;
				}
			}

			.text-content {
				display: flex;
				flex-direction: column;
			}

			.b-title {
				font-size: 28rpx;
				line-height: 28rpx;
				color: #1A1A1A;
				font-weight: 500;
			}

			.b-desc {
				margin-top: 12rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #969696;
			}
		}

		.b-btn {
			padding: 0 20rpx;
			background-color: #FF3A31;
			color: #fff;
			font-size: 26rpx;
			height: 52rpx;
			line-height: 52rpx;
			border-radius: 8rpx;
		}
	}
}

.footer-section {
	padding: 0px 40rpx 0;
	display: flex;
	justify-content: center;
	padding-bottom: 24rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));

	.finish-btn {
		height: 84rpx;
		width: 390rpx;
		line-height: 84rpx;
		text-align: center;
		border: 1px solid #2172CA;
		border-radius: 42rpx;
		color: #2172CA;
		font-size: 32rpx;
		background-color: transparent;
	}
}
</style>