<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_other_airTickets_ctrip" />
		<liu-drag-button :canDocking="false"
			@clickBtn="$goRechargePage('watermark', 'uni_alipay_other_airTickets_ctrip')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
	<view class="codefun-flex-col page" :style="{ '--font-weight-bold': $system == 'iOS' ? 500 : 700 }">

		<view class="codefun-flex-col group">

			<view class="codefun-flex-col codefun-justify-start codefun-relative group_1">
				<view class="codefun-flex-col codefun-relative section">
					<NavBar title="订单详情" textColor="#fff" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
						@button-click="util.clickTitlePopupButton" tipLayerType="ctrip-air-tickets-tip" isTipLayer
						tipLayerText="修改机票信息">
						<template v-if="$system == 'iOS'" v-slot:statusBar>
							<view class="status-bar">
								<image class="top-logo" style="width: 160rpx"
									src="/static/image/other/air-tickets/ctrip-air/top-logo.png" mode="widthFix">
								</image>
							</view>
						</template>
						<template v-slot:center>
							<view class="title-box">
								<view class="text">订单详情</view>
								<view class="level">
									<image style="width: 100%"
										:src="`/static/image/other/air-tickets/ctrip-air/level-${airTicketsInfo.ctripOrderInfo.level}.png`"
										mode="widthFix">
									</image>
								</view>
							</view>
						</template>
						<template v-slot:right>
							<view class="right-box">
								<view class="item">
									<image class="icon" src="/static/image/other/air-tickets/ctrip-air/rili.png"
										mode="widthFix">
									</image>
									<text>日历</text>
								</view>
								<view class="item">
									<image class="icon" src="/static/image/other/air-tickets/ctrip-air/kefu.png"
										mode="widthFix">
									</image>
									<text>客服</text>
								</view>
								<view class="item" style="margin-right: 16rpx;">
									<image class="icon" src="/static/image/other/air-tickets/ctrip-air/fenxiang.png"
										mode="widthFix">
									</image>
									<text>分享</text>
								</view>
							</view>
						</template>
					</NavBar>
					<image class="bg-image" src="/static/image/other/air-tickets/ctrip-air/bg-image.png"
						mode="widthFix"></image>
					<view class="codefun-flex-col codefun-self-stretch group_2">

						<view class="codefun-flex-row codefun-items-center group_4 codefun-mt-20">
							<text class="text_5">已出票</text>
							<uni-icons type="forward" size="18" color="#fff"></uni-icons>
						</view>
						<view class="codefun-flex-row codefun-justify-center codefun-relative group_30 codefun-mt-20">
							<text class="font_3 text_6 text_7 pos_12">查看票号/航司预订号</text>
							<text class="font_3 text_6 text_8">获取行程确认单</text>
						</view>
						<view class="codefun-flex-col group_5 codefun-mt-20">
							<view class="codefun-flex-col section_3">
								<view
									class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
									<view class="group_6">
										<text class="font_4 text_10">您有一份</text>
										<text class="font text_9" style="margin: 0 4rpx;">机票免单</text>
										<text class="font_4 text_10">待抽取</text>
									</view>
									<view
										class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
										<text class="font_3 text_11">试试手气</text>
									</view>
								</view>
							</view>
							<view class="codefun-flex-col section_4 codefun-mt-8">
								<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
									<text class="font_4 text_12">出行前必读</text>
									<view
										class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 codefun-ml-4">
										<text class="text_13">{{ airTicketsInfo.ctripOrderInfo.tips.length }}条通知</text>
									</view>
								</view>

								<view style="display: flex;justify-content: space-between;">
									<view
										class="codefun-flex-row codefun-justify-center equal-division group_7 codefun-flex-1">
										<view class="codefun-flex-row codefun-items-center mb-6"
											:class="index == airTicketsInfo.ctripOrderInfo.tips.length - 1 ? '' : 'mr-14'"
											v-for="(item, index) in airTicketsInfo.ctripOrderInfo.tips" :key="item.id">
											<view class="codefun-shrink-0 section_5"
												style="flex-shrink: 0;width: 8rpx;height: 8rpx;">
											</view>
											<text class="font_5 text_17 codefun-ml-4">{{ item.content }}</text>
										</view>
									</view>
									<uni-icons class="codefun-shrink-0 ml-9" type="forward" size="18"
										color="#1A1A1A"></uni-icons>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="codefun-flex-col section_7">
				<view class="codefun-flex-col group_8">
					<view class="codefun-flex-row codefun-justify-between codefun-items-center">
						<view class="codefun-flex-row codefun-items-center">
							<text class="font_6 text_56">总计</text>
							<text class="font_7 text_21 codefun-ml-8" @click="goEdit">¥{{ airTicketsInfo.orderInfo.price
							}}</text>
							<uni-icons class="codefun-shrink-0 codefun-ml-4" type="help" size="18"
								color="#006FEF"></uni-icons>
						</view>
						<view class="codefun-flex-row codefun-items-center group_31">
							<text class="font_8 text_22">行李额和禁带物品</text>
							<uni-icons class="codefun-ml-4" type="forward" size="14"
								color="rgb(0, 111, 239)"></uni-icons>
						</view>
					</view>
					<view class="codefun-flex-row codefun-items-center mt-11">
						<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
							<text class="codefun-shrink-0 text_23">完成订单预计得</text>
							<text class="codefun-shrink-0 text_23">{{ airTicketsInfo.ctripOrderInfo.points }}</text>
							<text class="text_23">积分</text>
						</view>
						<uni-icons class="codefun-ml-4" type="help" size="14" color="#1A1A1A"></uni-icons>
					</view>
					<view class="codefun-flex-row codefun-items-center mt-11">
						<text class="font_8 text_25">订单号：{{ airTicketsInfo.orderInfo.orderNo }}</text>
						<image class="image_11 image_23" src="/static/image/other/air-tickets/ctrip-air/copy.png" />
						<text class="font_8 text_26">复制</text>
					</view>
				</view>
				<view class="codefun-flex-col group_9">
					<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
						<view class="codefun-flex-row" @click="goEdit">
							<image class="codefun-shrink-0 image_13"
								src="/static/image/other/air-tickets/ctrip-air/airplant.png" />
							<text class="codefun-self-center font_6 text_64 codefun-ml-6">{{
								airTicketsInfo.flightInfo.startCity
							}}</text>
							<image class="codefun-shrink-0 codefun-self-center image_14 codefun-ml-6"
								src="/static/image/other/air-tickets/ctrip-air/right.png" />
							<text class="codefun-self-center font_6 text_28 codefun-ml-6">{{
								airTicketsInfo.flightInfo.endCity
							}}</text>
						</view>
						<view class="codefun-flex-row codefun-items-center">
							<text class="font_5 text_29">收起</text>
							<image class="codefun-shrink-0 image_11 codefun-ml-4"
								src="/static/image/other/air-tickets/ctrip-air/arrow-up.png" />
						</view>
					</view>
					<text class="codefun-self-start font_8 text_30">{{ flightInfo.year }} 年 {{ flightInfo.date }} {{
						flightInfo.week
					}}</text>
					<view class="codefun-flex-row codefun-items-center codefun-self-stretch group_10" @click="goEdit">
						<image class="codefun-shrink-0 image_15"
							src="/static/image/other/air-tickets/ctrip-air/image1.png" />
						<view class="codefun-flex-col codefun-flex-1 codefun-ml-12">
							<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
								<text class="codefun-shrink-0 font_7 text_31">{{ airTicketsInfo.flightInfo.startTime
								}}</text>
								<view class="codefun-flex-row codefun-items-center codefun-shrink-0 group_11 ml-20">
									<text class="font_10">{{ airTicketsInfo.flightInfo.startAirport }}</text>
									<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="16"
										color="#1A1A1A"></uni-icons>
								</view>
							</view>
							<view
								class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch codefun-mt-14">
								<text class="font_11">{{ airTicketsInfo.flightInfo.duration }}</text>
								<view class="codefun-flex-row codefun-items-center codefun-justify-between ml-20"
									style="flex: 1;">
									<view class="codefun-flex-col codefun-flex-1">
										<view class="codefun-flex-row codefun-items-center group_29"
											style="flex-wrap: wrap; flex: 1; width: 100%;">
											<image class="codefun-shrink-0 image_8"
												:src="`/static/image/other/air-tickets/air-line/${airlineInfo.icon}.png`" />
											<view class="font_11 codefun-flex-row codefun-items-center">{{
												airlineInfo.name }}
												{{ airTicketsInfo.flightInfo.flightNumber }}
												<view class="codefun-shrink-0 section_8"></view>
											</view>
											<view class="font_11 codefun-flex-row codefun-items-center">{{
												airTicketsInfo.flightInfo.seatCategory }}<view
													class="codefun-shrink-0 section_8">
												</view>
											</view>
											<view class="font_11 codefun-flex-row codefun-items-center">{{
												airTicketsInfo.flightInfo.aircraftType }}<view
													class="codefun-shrink-0 section_8">
												</view>
											</view>
											<view class="font_11 codefun-flex-row codefun-items-center"
												style="color: #EC6103;">{{
													airTicketsInfo.flightInfo.meal
												}}<view class="codefun-shrink-0 section_8"></view>
											</view>
											<view class="font_11 codefun-flex-row codefun-items-center"
												style="color: #EC6103;">{{
													airTicketsInfo.flightInfo.luggageCheckInQuota
												}}</view>
										</view>
									</view>
									<uni-icons class="codefun-shrink-0 codefun-ml-12" type="right" size="12"
										color="#1A1A1A"></uni-icons>
								</view>
							</view>
							<view class="codefun-flex-row codefun-items-center codefun-self-start codefun-mt-14">
								<text class="codefun-shrink-0 font_7 text_38">{{ airTicketsInfo.flightInfo.endTime
								}}</text>
								<text class="font_10 text_39 ml-20">{{ airTicketsInfo.flightInfo.endAirport }}</text>
								<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="16"
									color="#1A1A1A"></uni-icons>
							</view>
						</view>
					</view>
					<view
						class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_3">
						<text class="font_14 text_40">退改签和产品说明</text>
					</view>
				</view>
			</view>
			<view class="codefun-flex-col section_9">
				<text class="codefun-self-start font_6 text_41">已购 / 赠送服务</text>
				<view class="codefun-self-stretch grid mt-13">
					<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_1">
						<view style="flex: 1;" class="codefun-flex-row codefun-items-center">
							<text class="font_8 text_42">优惠券</text>
							<image class="codefun-shrink-0 image_18 codefun-ml-2"
								src="/static/image/other/air-tickets/ctrip-air/give.png" />
						</view>
						<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="13"
							color="#C7C8CC"></uni-icons>
					</view>
					<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_2">
						<text style="flex: 1;" class="font_8 text_43">旅游专享券</text>
						<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="13"
							color="#C7C8CC"></uni-icons>
					</view>
					<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item">
						<view style="flex: 1;" class="codefun-flex-row codefun-items-center">
							<text class="font_8">机场美食券</text>
							<image class="codefun-shrink-0 image_18 codefun-ml-2"
								src="/static/image/other/air-tickets/ctrip-air/give.png" />
						</view>
						<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="13"
							color="#C7C8CC"></uni-icons>
					</view>
				</view>
			</view>
			<view class="codefun-flex-col codefun-justify-start codefun-relative group_14">
				<view class="codefun-flex-col section_10">
					<text class="codefun-self-start font_6 text_46">出行信息</text>
					<view class="codefun-flex-col codefun-self-stretch group_15 codefun-mt-26">
						<view class="codefun-flex-row codefun-self-stretch group_17">
							<text class="codefun-shrink-0 codefun-self-start font_13 text_47">出行人</text>
							<view class="codefun-flex-col codefun-flex-1 codefun-relative group_16 ml-41">
								<text class="codefun-self-start text_23" @click="goEdit"><text
										style="margin-right: 6px;" v-for="(value, index) in airTicketsInfo.passengersInfo" :key="index">{{
											value.name }}</text></text>
								<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-8">
									<text class="font_14 text_49">查看证件、航司预订号、修改姓名/证件</text>
									<uni-icons class="codefun-shrink-0 codefun-ml-4" type="down" size="12"
										color="#006EC4"></uni-icons>
								</view>
							</view>
						</view>
						<view class="codefun-self-stretch divider view_5"></view>
						<view
							class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-start group_18">
							<text class="font_13 text_50">联系手机</text>
							<text class="text_23" @click="goEdit">+86 {{
								airTicketsInfo.ticketNumber.replace(/(\d{3})\d{4}(\d{4})/,
									'$1****$2')
							}}</text>
						</view>
						<view class="codefun-self-stretch divider"></view>
						<view class="codefun-flex-row codefun-justify-between equal-division_2 group_19">
							<view class="codefun-flex-row codefun-items-center group_20 equal-division-item">
								<image class="codefun-shrink-0 image_20"
									src="/static/image/other/air-tickets/ctrip-air/xinfeng.png" />
								<text class="font_14 text_51 codefun-ml-6">获取行程确认单</text>
							</view>
							<view class="group_20 section_11"></view>
							<view class="codefun-flex-row codefun-items-center group_20 equal-division-item">
								<image class="codefun-shrink-0 image_20"
									src="/static/image/other/air-tickets/ctrip-air/share.png" />
								<text class="font_14 text_60 codefun-ml-4">分享</text>
							</view>
						</view>
					</view>
				</view>
				<image class="image_19 pos_14" src="/static/image/other/air-tickets/ctrip-air/connect-icon.png" />
				<image class="image_19 pos_15" src="/static/image/other/air-tickets/ctrip-air/connect-icon.png" />
			</view>
		</view>
		<view class="codefun-flex-col codefun-mt-8"  :style="{'padding-bottom':$store.state.safeBottomAz+'px'}">
			<view class="codefun-flex-col section_12" >
				<text class="codefun-self-start font_6 text_52">出行服务</text>
				<view class="codefun-self-stretch grid_2 mt-19">
					<view class="codefun-flex-col codefun-items-center grid-item_4">
						<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/hangbanzhushou.png" />
						<text class="font_8 text_63 codefun-mt-8">航班助手</text>
					</view>
					<view class="codefun-flex-col codefun-items-center grid-item_5">
						<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/feixingzuji.png" />
						<text class="font_8 text_61 codefun-mt-8">飞行足迹</text>
					</view>
					<view class="codefun-flex-col codefun-items-center grid-item_6">
						<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/xingchengguihua.png" />
						<text class="font_8 text_62 codefun-mt-8">行程规划服务</text>
					</view>
					<view class="codefun-flex-col codefun-items-center grid-item_7">
						<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/fuli.png" />
						<text class="font_8 text_1 codefun-mt-8">企业认证福利</text>
					</view>
					<view class="codefun-flex-col codefun-items-center codefun-relative grid-item_8">
						<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/family.png" />
						<text class="font_8 text_53 codefun-mt-8">我的家庭</text>
					</view>
					<view class="codefun-flex-col codefun-items-center codefun-relative grid-item_9">
						<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/gongzhonghao.png" />
						<text class="font_8 text_59 codefun-mt-8">关注公众号</text>
					</view>
				</view>
			</view>
			<view class="bottom-banner">
				<view class="codefun-flex-row codefun-justify-center section_13">
					<text class="font_8 text_54">更多服务</text>
					<image class="image_11 codefun-ml-6" src="/static/image/other/air-tickets/ctrip-air/more.png" />
				</view>
				<view class="codefun-flex-col codefun-justify-start section_14" :style="{'padding-bottom':$store.state.safeBottomAz+'px'}">
					<view class="codefun-flex-row equal-division_3">
						<view
							class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 text-wrapper_1">
							<text class="font text_55">我要退订</text>
						</view>
						<view
							class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 text-wrapper_6 codefun-ml-8">
							<text class="font text_57">我要改签</text>
						</view>
						<view
							class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 text-wrapper_7 codefun-ml-8">
							<text class="font text_58">发票/行程单</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue';
import { reactive, computed, toRefs } from 'vue';
import { onShow, onPageScroll } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';
import defualtData from '@/pages/other/air-tickets/commom/defualt.json';
import airlineJson from '@/static/json/air-line.json';

import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'

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

function goEdit() {
	util.goPage(`/pages/other/air-tickets/edit/edit?ticketsApp=ctrip&storageKey=${data.STORAGE_KEY}`)
}

const data = reactive({
	navBar: {
		bgColor: 'transparent'
	},
	STORAGE_KEY: 'ctripAirTicketsInfo',
	airTicketsInfo: JSON.parse(JSON.stringify(defualtData)),
})
let { airTicketsInfo } = toRefs(data)

//航空公司信息
const airlineInfo = computed(() => {
	const airline = airlineJson.airLine.find(item => item.code === airTicketsInfo.value.flightInfo.airlineCode);
	console.log('airline', airline);
	return airline || {};
});

/**
 * 飞机日期信息
 */
const flightInfo = computed(() => {
	const dateStr = airTicketsInfo.value.flightInfo.date;
	if (!dateStr) return { date: '', week: '' };

	// 兼容 iOS：将 YYYY-MM-DD 转换为 YYYY/MM/DD
	const date = new Date(dateStr.replace(/-/g, '/'));
	const month = date.getMonth() + 1;
	const day = date.getDate();
	const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	const week = weeks[date.getDay()];

	return {
		year: date.getFullYear(),
		date: `${month}月${day}日`,
		week
	}
});

onShow(() => {
	const stored = uni.getStorageSync(data.STORAGE_KEY) || "";
	if (stored) {
		Object.assign(data.airTicketsInfo, stored);
	}
	// #ifdef APP-PLUS&&!APP-HARMONY
	util.setAndroidSystemBarColor('#ffffff')
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("light");
	}, 500)
	// #endif
})

onPageScroll((e) => {
	console.log(e.scrollTop);
	if (e.scrollTop > 40) {
		data.navBar.bgColor = '#0470f7'
	} else {
		data.navBar.bgColor = 'transparent'
	}
})
</script>

<style>
@import '/common/global.css';
</style>

<style lang="less" scoped>
.mr-14 {
	margin-right: 28rpx;
}

.ml-20 {
	margin-left: 40rpx;
}

.mb-6 {
	margin-bottom: 12rpx;
}

.ml-3 {
	margin-left: 6rpx;
}

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

.mt-11 {
	margin-top: 22rpx;
}

.ml-23 {
	margin-left: 46rpx;
}

.ml-9 {
	margin-left: 18rpx;
}

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

.mt-13 {
	margin-top: 26rpx;
}

.ml-1 {
	margin-left: 2rpx;
}

.ml-41 {
	margin-left: 82rpx;
}

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

.page {
	background-color: #f1f2f6;
	width: 100%;
	overflow-x: hidden;
	min-height: 100vh;

	.group {
		.group_1 {
			padding-bottom: 2rpx;

			.section {
				position: relative;
				padding: 16rpx 16rpx 48rpx;
				background-image: linear-gradient(140.9deg, #0081f7 7.3%, #0273fa 101.8%);

				.status-bar {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-top: 16rpx;
					padding-bottom: 32rpx;
				}

				::v-deep .uni-navbar__header-btns-right {
					overflow: visible !important;
					// width: auto !important;
					padding-right: 0 !important;
				}

				::v-deep .uni-navbar__header-btns {
					overflow: visible !important;
				}

				.title-box {
					display: flex;
					align-items: center;

					.level {
						display: flex;
						align-items: center;
						width: 80rpx;
						margin-left: 4rpx;
					}
				}

				.right-box {
					display: flex;
					align-items: center;
					overflow: visible;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						overflow: visible;
						margin-left: 28rpx;

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

						text {
							color: #fff;
							font-size: 20rpx;
							white-space: nowrap; // 防止换行
						}
					}
				}

				.bg-image {
					top: 0;
					right: 0;
					position: absolute;
					width: 300rpx;
				}

				.image {
					width: 160rpx;
					height: 40rpx;
				}

				.group_2 {

					.group_28 {
						padding: 2rpx 0 6rpx;

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

						.pos_8 {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}

						.group_3 {
							padding: 2rpx 0;
							overflow: hidden;
							width: 206rpx;

							.text {
								font-size: 30rpx;
								line-height: 27.66rpx;
							}

							.image_7 {
								width: 80rpx;
								height: 32rpx;
							}
						}
					}

					.group_4 {
						padding: 0 10.1rpx;
						margin-top: 8rpx;

						.text_5 {
							color: #ffffff;
							font-size: 44rpx;
							font-weight: var(--font-weight-bold);
							line-height: 40.48rpx;
							letter-spacing: 2.2rpx;
						}
					}

					.group_30 {
						padding: 0 8.86rpx;

						.text_6 {
							text-decoration: underline;
						}

						.text_7 {
							line-height: 22.52rpx;
						}

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

						.text_8 {
							line-height: 22.22rpx;
						}
					}

					.group_5 {
						padding: 0 8rpx;

						.section_3 {
							padding: 20rpx 24rpx 20rpx 29.36rpx;
							background-color: #ffffff;
							border-radius: 16rpx;

							.group_6 {
								line-height: 26.06rpx;
								height: 26.06rpx;

								.text_9 {
									color: #ec6103;
									font-weight: 800;
									line-height: 25.7rpx;
								}

								.text_10 {
									line-height: 26.06rpx;
								}
							}

							.text-wrapper {
								padding: 18.3rpx 0 15.5rpx;
								border-radius: 8rpx;
								width: 124rpx;
								height: 60rpx;
								border: solid 2rpx #1c84d2;

								.text_11 {
									color: #006ae0;
									line-height: 22.2rpx;
								}
							}

							.image_9 {
								width: 36rpx;
								height: 8rpx;
							}
						}

						.section_4 {
							padding: 22rpx 24rpx 12rpx;
							background-color: #ffffff;
							border-radius: 16rpx;

							.text_12 {
								line-height: 26.04rpx;
							}

							.text-wrapper_2 {
								padding: 7.88rpx 0 7.74rpx;
								border-radius: 4rpx;
								width: 96rpx;
								height: 36rpx;
								border: solid 1rpx #dac7ae;

								.text_13 {
									color: #f2740d;
									font-size: 20rpx;
									font-weight: var(--font-weight-bold);
									line-height: 18.38rpx;
								}
							}

							.group_27 {
								margin-top: 4rpx;

								.text_14 {
									margin-left: 6.74rpx;
									font-size: 22rpx;
									line-height: 20.46rpx;
								}

								.view {
									margin-left: 27.26rpx;
								}

								.text_15 {
									margin-left: 7.26rpx;
									font-size: 22rpx;
									line-height: 20.44rpx;
								}

								.view_2 {
									margin-left: 28.74rpx;
								}

								.text_16 {
									margin-left: 7.8rpx;
									font-size: 22rpx;
									line-height: 20.38rpx;
								}

								.image_1 {
									margin-bottom: 2.74rpx;
								}
							}

							.equal-division {
								align-self: flex-start;
								margin-top: 15.46rpx;
								flex-wrap: wrap;
								justify-content: flex-start;

								.text_17 {
									font-size: 22rpx;
									line-height: 20.54rpx;
								}

								.text_18 {
									font-size: 22rpx;
									line-height: 20.64rpx;
								}

								.text_19 {
									font-size: 22rpx;
									line-height: 20.44rpx;
								}
							}


							.section_5 {
								background-color: #ff5c03;
								border-radius: 50%;
								width: 8rpx;
								height: 8rpx;
							}
						}

						.font_4 {
							font-size: 28rpx;
							line-height: 24.72rpx;
							font-weight: var(--font-weight-bold);
							color: #1a1a1a;
						}
					}

					.font_3 {
						font-size: 24rpx;
						line-height: 22.24rpx;
						font-weight: var(--font-weight-bold);
						color: #ffffff;
					}
				}

				.section_2 {
					padding: 34.66rpx 29.34rpx 293.62rpx;
					background-image: url('https://ide.code.fun/api/image?token=698b15494683ce0011da8453&name=0a4f2a62b9f170fe44e91248eec86371.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					width: 304rpx;
					height: 458rpx;

					.image_2 {
						width: 34rpx;
						height: 22rpx;
					}

					.pos_2 {
						position: absolute;
						right: 128rpx;
						top: 35.34rpx;
					}

					.image_3 {
						width: 30rpx;
						height: 22rpx;
					}

					.pos_3 {
						position: absolute;
						right: 88rpx;
						top: 34.66rpx;
					}

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

					.pos_4 {
						position: absolute;
						right: 29.34rpx;
						top: 34.66rpx;
					}

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

					.pos_5 {
						position: absolute;
						left: 96rpx;
						top: 102rpx;
					}

					.pos_6 {
						position: absolute;
						right: 100rpx;
						top: 102rpx;
					}

					.pos_7 {
						position: absolute;
						right: 32rpx;
						top: 102rpx;
					}

					.font_2 {
						font-size: 20rpx;
						line-height: 18.6rpx;
						color: #ffffff;
					}

					.text_2 {
						line-height: 17.36rpx;
					}

					.pos_9 {
						position: absolute;
						left: 97.52rpx;
						top: 146.9rpx;
					}

					.pos_10 {
						position: absolute;
						right: 99.3rpx;
						top: 145.74rpx;
					}

					.pos_11 {
						position: absolute;
						right: 33.12rpx;
						top: 145.78rpx;
					}
				}

				.pos {
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.section_6 {
				background-color: #ffffff;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				height: 24rpx;
			}

			.pos_13 {
				position: absolute;
				left: 0;
				right: 0;
				top: 636rpx;
			}
		}

		.section_7 {
			position: relative;
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0 0;
			margin-top: -16rpx;

			.group_8 {
				border-radius: 24rpx 24rpx 0 0;
				padding: 40rpx 21.06rpx 30rpx;
				border-bottom: solid 1rpx #f5f5f5;

				.text_56 {
					line-height: 33.08rpx;
				}

				.text_21 {
					color: #006fef;
					line-height: 26.3rpx;
				}

				.group_31 {
					margin-right: 2.94rpx;

					.text_22 {
						color: #0177d4;
						line-height: 22.2rpx;
					}
				}

				.text_25 {
					font-size: 22rpx;
					line-height: 20.12rpx;
				}

				.image_23 {
					margin-left: 18.9rpx;
				}

				.text_26 {
					margin-left: 2.72rpx;
					color: #888888;
					font-size: 22rpx;
					line-height: 20.24rpx;
				}
			}

			.group_9 {
				padding: 33rpx 24rpx 32rpx;

				.image_13 {
					width: 36rpx;
					height: 38rpx;
				}

				.text_64 {
					line-height: 33.38rpx;
				}

				.image_14 {
					width: 28rpx;
					height: 12rpx;
				}

				.text_28 {
					line-height: 33.16rpx;
				}

				.text_29 {
					line-height: 22.28rpx;
				}

				.text_30 {
					margin-left: 47rpx;
					margin-top: 20rpx;
					line-height: 36rpx;
				}

				.group_10 {
					margin-top: 30.62rpx;
					padding-left: 8rpx;
					white-space: nowrap;

					.image_15 {
						width: 16rpx;
						height: 178rpx;
					}

					.text_31 {
						line-height: 26.3rpx;
					}

					.group_11 {
						margin-right: 116rpx;
						width: 397rpx;
					}

					.font_11 {
						font-size: 24rpx;
						line-height: 36rpx;
						color: #636363;
						white-space: nowrap;
					}

					.group_29 {
						padding-left: 2.18rpx;
						flex-wrap: wrap;
					}

					.text_35 {
						width: 138rpx;
					}

					.section_8 {
						background-color: #c7c5c6;
						width: 2rpx;
						height: 20rpx;
						margin: 0 12rpx;
					}

					.view_1 {
						margin-left: 16.18rpx;
					}

					.font_12 {
						font-size: 24rpx;
						line-height: 22.24rpx;
						color: #ec6103;
					}

					.text_36 {
						margin-left: 10.94rpx;
					}

					.view_4 {
						margin-left: 21.06rpx;
					}

					.group_12 {
						margin-left: 9.58rpx;

						.group_13 {
							padding: 0 20rpx;

							.text_33 {
								line-height: 22.36rpx;
							}
						}
					}

					.image_16 {
						margin-left: 25.06rpx;
					}

					.text_38 {
						line-height: 26.06rpx;
					}

					.font_10 {
						font-size: 32rpx;
						line-height: 36rpx;
						font-weight: var(--font-weight-bold);
						color: #1a1a1a;
					}

					.text_39 {
						margin-left: 40rpx;
					}

					.image_17 {
						margin-left: 33.24rpx;
					}
				}

				.text-wrapper_3 {
					margin-top: 34.92rpx;
					padding: 24.18rpx 0 17.46rpx;
					border-radius: 8rpx;
					border: solid 2rpx #0177d4;

					.text_40 {
						font-weight: var(--font-weight-bold);
						line-height: 22.36rpx;
					}
				}
			}

			.font_7 {
				font-size: 36rpx;
				line-height: 24.72rpx;
				font-weight: var(--font-weight-bold);
				color: #1a1a1a;
			}
		}

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

		.font_5 {
			font-size: 24rpx;
			line-height: 22.24rpx;
			color: #636363;
		}

		.section_9 {
			margin-top: 16rpx;
			padding: 31.88rpx 26rpx 28rpx 28rpx;
			background-color: #ffffff;

			.text_41 {
				margin-left: 3rpx;
				line-height: 37rpx;
			}

			.grid {
				height: 152rpx;
				display: grid;
				grid-template-rows: repeat(2, minmax(0, 1fr));
				grid-template-columns: repeat(2, minmax(0, 1fr));
				row-gap: 18rpx;
				column-gap: 18rpx;

				.grid-item_1 {
					padding: 20rpx 18.88rpx 18rpx;
					background-color: #f9fafe;
					border-radius: 4rpx;

					.text_42 {
						line-height: 22.16rpx;
					}

					.image_18 {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.image_18 {
					width: 30rpx;
					height: 30rpx;
				}

				.grid-item_2 {
					padding: 24rpx 18.72rpx 21.2rpx;
					background-color: #f9fafe;
					border-radius: 4rpx;

					.text_43 {
						line-height: 22.3rpx;
					}


				}

				.grid-item {
					padding: 20rpx 18.68rpx 18rpx;
					background-color: #f9fafe;
					border-radius: 4rpx;

					.text-wrapper_4 {
						padding: 2.04rpx 0 5.8rpx;
						border-radius: 4rpx;
						width: 30rpx;
						height: 30rpx;
						border: solid 1rpx #5bcfb0;

						.text_45 {
							color: #00ba83;
							font-size: 22rpx;
							line-height: 20.16rpx;
						}
					}
				}
			}
		}

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

		.group_14 {
			margin-top: -14rpx;
			padding-top: 30rpx;

			.section_10 {
				padding: 37.64rpx 24rpx 26rpx;
				background-color: #ffffff;

				.text_46 {
					margin-left: 7.74rpx;
					line-height: 33.58rpx;
				}

				.group_15 {
					padding: 9.88rpx 0 8rpx;

					.group_17 {
						padding: 0 6.92rpx 18.14rpx 6.92rpx;

						.text_47 {
							margin-top: -8.06rpx;
							line-height: 25.88rpx;
						}

						.group_16 {
							margin-top: -9.88rpx;

							.text_49 {
								line-height: 25rpx;
							}
						}
					}

					.divider {
						background-color: #f5f5f5;
						height: 1rpx;
					}

					.view_5 {
						margin-top: 10rpx;
					}

					.group_18 {
						margin-left: 5.06rpx;
						padding: 26.1rpx 0 22.74rpx;
						width: 349.86rpx;

						.text_50 {
							line-height: 25.98rpx;
						}
					}

					.font_13 {
						font-size: 28rpx;
						line-height: 24.72rpx;
						color: #767676;
					}

					.equal-division_2 {
						align-self: center;
						margin-top: 8rpx;

						.group_20 {
							margin-bottom: -8rpx;

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

							.text_51 {
								line-height: 22.22rpx;
							}

							.text_60 {
								line-height: 22.32rpx;
							}
						}

						.equal-division-item {
							padding: 16rpx 0;
						}

						.section_11 {
							background-color: #c2c2c2;
							width: 1rpx;
							height: 64rpx;
						}
					}

					.group_19 {
						padding-top: 19rpx;
						width: 483.06rpx;
					}
				}
			}

			.image_19 {
				width: 12rpx;
				height: 46rpx;
			}

			.pos_14 {
				position: absolute;
				left: 30rpx;
				top: 0;
			}

			.pos_15 {
				position: absolute;
				right: 30rpx;
				top: 0;
			}
		}

		.text_23 {
			font-size: 24rpx;
			line-height: 24.72rpx;
			color: #1a1a1a;
		}

		.font_14 {
			font-size: 24rpx;
			line-height: 22.24rpx;
			color: #006ec4;
		}
	}

	.section_12 {
		padding-top: 35.16rpx;
		background-color: #ffffff;
		margin-bottom: 180rpx;
		margin-bottom: calc(180rpx + constant(safe-area-inset-bottom));
		margin-bottom: calc(180rpx + env(safe-area-inset-bottom));

		.text_52 {
			margin-left: 31.74rpx;
		}

		.grid_2 {
			height: 272.62rpx;
			display: grid;
			grid-template-rows: repeat(2, minmax(0, 1fr));
			grid-template-columns: repeat(4, minmax(0, 1fr));
			row-gap: 0;
			column-gap: 0;

			.grid-item_4 {
				padding: 24.62rpx 0 26.54rpx;

				.text_63 {
					font-size: 22rpx;
					line-height: 20.64rpx;
				}
			}

			.grid-item_5 {
				padding: 24.62rpx 0 26.62rpx;

				.text_61 {
					font-size: 22rpx;
					line-height: 20.4rpx;
				}
			}

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

			.grid-item_6 {
				padding: 24.62rpx 0 26.62rpx;

				.text_62 {
					font-size: 22rpx;
					line-height: 20.32rpx;
				}
			}

			.grid-item_7 {
				padding: 24.62rpx 0 26.68rpx;
				width: 187.5rpx;

				.text_1 {
					font-size: 22rpx;
					line-height: 20.46rpx;
				}
			}

			.grid-item_8 {
				padding: 24.62rpx 0 26.62rpx;

				.text_53 {
					font-size: 22rpx;
					line-height: 20.5rpx;
				}
			}

			.grid-item_9 {
				padding: 24.62rpx 0 26.68rpx;

				.text_59 {
					font-size: 22rpx;
					line-height: 20.38rpx;
				}
			}
		}
	}

	.font_6 {
		font-size: 36rpx;
		line-height: 33.26rpx;
		font-weight: var(--font-weight-bold);
		color: #1a1a1a;
	}

	.font_8 {
		font-size: 24rpx;
		line-height: 22.24rpx;
		color: #1a1a1a;
	}

	.bottom-banner {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;

	}

	.section_13 {
		margin-top: 16rpx;
		padding: 18rpx 0;
		background-image: url('/static/image/other/air-tickets/ctrip-air/bottom-banner.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-bottom: -1px;


		.text_54 {
			line-height: 22.18rpx;
		}
	}

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

	.section_14 {
		padding: 18rpx 0;
		background-color: #ffffff;
		padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

		.equal-division_3 {
			margin-left: 30rpx;
			margin-right: 28rpx;

			.text-wrapper_5 {
				flex: 1 1 220rpx;

				.text_55 {
					line-height: 25.62rpx;
				}

				.text_57 {
					line-height: 26.02rpx;
				}

				.text_58 {
					line-height: 25.96rpx;
				}
			}

			.text-wrapper_1 {
				padding: 23.34rpx 0 21.04rpx;
				background-image: linear-gradient(270deg, #0470f7 -107.1%, #0086f5 207.1%);
				border-radius: 6rpx;
				height: 70rpx;
			}

			.text-wrapper_6 {
				padding: 22.96rpx 0 21.02rpx;
				background-image: linear-gradient(270deg, #0470f7 -107.1%, #0086f5 207.1%);
				border-radius: 6rpx;
				height: 70rpx;
			}

			.text-wrapper_7 {
				padding: 23rpx 0 21.04rpx;
				background-image: linear-gradient(270deg, #0470f7 -107.1%, #0086f5 207.1%);
				border-radius: 6rpx;
				height: 70rpx;
			}
		}
	}

	.font {
		font-size: 28rpx;
		line-height: 24.72rpx;
		font-weight: var(--font-weight-bold);
		color: #ffffff;
	}
}
</style>
