diff --git a/components/nav-bar/nav-bar.vue b/components/nav-bar/nav-bar.vue
index 50e9187..1401129 100644
--- a/components/nav-bar/nav-bar.vue
+++ b/components/nav-bar/nav-bar.vue
@@ -10,7 +10,9 @@
 						<view class="nav-bar-left">
 							<slot name="left">
 								<view class="left-icon" @click.stop="onBack">
-									<image class="nav-icon-back" src="/static/image/nav-bar/back-black.png" mode="">
+									<image class="nav-icon-back"
+										:src="`/static/image/nav-bar/back-${textColor == '#fff' || textColor == '#fffffff' ? 'white' : 'black'}.png`"
+										mode="">
 									</image>
 								</view>
 							</slot>
@@ -25,7 +27,9 @@
 						<view class="nav-bar-right" @click.stop="onRightClick">
 							<slot name="right">
 								<view v-if="isRightIcon" class="right-icon">
-									<image class="nav-icon-more" src="/static/image/nav-bar/more-black.png" mode="">
+									<image class="nav-icon-more"
+										:src="`/static/image/nav-bar/more-${textColor == '#fff' || textColor == '#fffffff' ? 'white' : 'black'}.png`"
+										mode="">
 									</image>
 								</view>
 								<view v-if="isRightButton" class="right-button">
@@ -74,276 +78,276 @@
 </template>
 
 <script setup>
-	import popup from '../popup/popup.vue'
-	import {
-		onMounted,
-		reactive,
-		ref,
-		toRefs
-	} from 'vue'
+import popup from '../popup/popup.vue'
+import {
+	onMounted,
+	reactive,
+	ref,
+	toRefs
+} from 'vue'
 
-	const topPopup = ref()
+const topPopup = ref()
 
-	// 定义组件属性
-	const props = defineProps({
-		bgColor: {
-			type: String,
-			default: '#fff'
-		},
-		textColor: {
-			type: String,
-			default: '#000'
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		buttonGroup: {
-			type: Array,
-			default: () => []
-		},
-		isRightIcon: {
-			type: Boolean,
-			default: false
-		},
-		isRightButton: {
-			type: Boolean,
-			default: false
-		},
-		rightButtonText: {
-			type: String,
-			default: '确定'
-		},
-		zIndex: {
-			type: Number,
-			default: 999
-		},
-		noBack: {
-			type: Boolean,
-			default: false
-		},
-		tipLayerText: {
-			type: String,
-			default: ''
-		},
-		isTipLayer: {
-			type: Boolean,
-			default: false
-		},
-		tipLayerType: {
-			type: String,
-			default: ''
-		}
-	})
-
-	// 定义事件
-	const emit = defineEmits(['back', 'right-click', 'button-click', 'refresh'])
-
-	const data = reactive({
-		statusBarHeight: 0,
-		showTipLayer: true,
-	})
-
-	let {
-		showTipLayer
-	} = toRefs(data)
-
-
-	onMounted(() => {
-		// 同步获取系统信息
-		const systemInfo = uni.getSystemInfoSync();
-		data.statusBarHeight = systemInfo.statusBarHeight || 0;
-
-		if (props.isTipLayer) {
-			if (uni.getStorageSync(props.tipLayerType) == props.tipLayerType) {
-				showTipLayer.value = false
-			}
-		}
-
-	})
-
-	const closeTipLayer = () => {
-		showTipLayer.value = false
-		uni.setStorageSync(props.tipLayerType, props.tipLayerType)
-		emit("refresh")
+// 定义组件属性
+const props = defineProps({
+	bgColor: {
+		type: String,
+		default: '#fff'
+	},
+	textColor: {
+		type: String,
+		default: '#000'
+	},
+	title: {
+		type: String,
+		default: ''
+	},
+	buttonGroup: {
+		type: Array,
+		default: () => []
+	},
+	isRightIcon: {
+		type: Boolean,
+		default: false
+	},
+	isRightButton: {
+		type: Boolean,
+		default: false
+	},
+	rightButtonText: {
+		type: String,
+		default: '确定'
+	},
+	zIndex: {
+		type: Number,
+		default: 999
+	},
+	noBack: {
+		type: Boolean,
+		default: false
+	},
+	tipLayerText: {
+		type: String,
+		default: ''
+	},
+	isTipLayer: {
+		type: Boolean,
+		default: false
+	},
+	tipLayerType: {
+		type: String,
+		default: ''
 	}
+})
 
-	const openPopup = () => {
-		if (props.buttonGroup.length > 0) {
-			topPopup.value.open()
+// 定义事件
+const emit = defineEmits(['back', 'right-click', 'button-click', 'refresh'])
+
+const data = reactive({
+	statusBarHeight: 0,
+	showTipLayer: true,
+})
+
+let {
+	showTipLayer
+} = toRefs(data)
+
+
+onMounted(() => {
+	// 同步获取系统信息
+	const systemInfo = uni.getSystemInfoSync();
+	data.statusBarHeight = systemInfo.statusBarHeight || 0;
+
+	if (props.isTipLayer) {
+		if (uni.getStorageSync(props.tipLayerType) == props.tipLayerType) {
+			showTipLayer.value = false
 		}
 	}
 
-	// 返回按钮点击事件
-	const onBack = () => {
-		emit('back')
-		// 默认返回上一页
-		if (props.noBack) return
-		uni.navigateBack()
-	}
+})
 
-	// 右侧按钮点击事件
-	const onRightClick = () => {
-		emit('right-click')
+const closeTipLayer = () => {
+	showTipLayer.value = false
+	uni.setStorageSync(props.tipLayerType, props.tipLayerType)
+	emit("refresh")
+}
+
+const openPopup = () => {
+	if (props.buttonGroup.length > 0) {
+		topPopup.value.open()
 	}
+}
+
+// 返回按钮点击事件
+const onBack = () => {
+	emit('back')
+	// 默认返回上一页
+	if (props.noBack) return
+	uni.navigateBack()
+}
+
+// 右侧按钮点击事件
+const onRightClick = () => {
+	emit('right-click')
+}
 
 
-	const buttonClick = (button) => {
-		topPopup.value.close()
-		emit('button-click', button)
-	}
+const buttonClick = (button) => {
+	topPopup.value.close()
+	emit('button-click', button)
+}
 </script>
 
 <style scoped>
-	@import "/common/main.css";
+@import "/common/main.css";
 
-	.nav-bar-container {
-		display: flex;
-		flex-direction: column;
-		position: fixed !important;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 999;
-	}
+.nav-bar-container {
+	display: flex;
+	flex-direction: column;
+	position: fixed !important;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 999;
+}
 
-	.nav-bar {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		position: relative;
-		z-index: 1;
-	}
+.nav-bar {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	z-index: 1;
+}
 
-	.status-placeholder {
-		width: 100%;
-	}
+.status-placeholder {
+	width: 100%;
+}
 
-	::v-deep .uni-navbar__content {
-		width: 100%;
-	}
+::v-deep .uni-navbar__content {
+	width: 100%;
+}
 
-	.nav-bar-left {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-	}
+.nav-bar-left {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
 
-	.nav-icon-back {
-		width: 24px;
-		height: 24px;
-	}
+.nav-icon-back {
+	width: 24px;
+	height: 24px;
+}
 
-	.nav-icon-more {
-		width: 26px;
-		height: 26px;
-	}
+.nav-icon-more {
+	width: 26px;
+	height: 26px;
+}
 
-	.nav-bar-title {
-		flex: 1;
-		margin: auto;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 17px;
-		font-weight: 500;
-	}
+.nav-bar-title {
+	flex: 1;
+	margin: auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 17px;
+	font-weight: 500;
+}
 
-	.nav-bar-right {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-	}
+.nav-bar-right {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
 
-	.right-button {
-		font-size: 12px;
-		border-radius: 16px;
-		color: #fff;
-		text-align: center;
-		line-height: 30px;
-		height: 30px;
-		min-width: 60px;
-		background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
-	}
+.right-button {
+	font-size: 12px;
+	border-radius: 16px;
+	color: #fff;
+	text-align: center;
+	line-height: 30px;
+	height: 30px;
+	min-width: 60px;
+	background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
+}
 
-	.button-box {
-		width: calc(50% - 8rpx);
-		text-align: center;
-		margin-top: 16rpx;
-	}
+.button-box {
+	width: calc(50% - 8rpx);
+	text-align: center;
+	margin-top: 16rpx;
+}
 
-	.button {
-		border: 1px solid #E4E4E4;
-		border-radius: 8px;
-		height: 42px;
-		line-height: 42px;
-		font-size: 28rpx;
-	}
+.button {
+	border: 1px solid #E4E4E4;
+	border-radius: 8px;
+	height: 42px;
+	line-height: 42px;
+	font-size: 28rpx;
+}
 
-	.tipLayer {
-		box-sizing: border-box;
-		min-width: 200px !important;
-		height: 48px;
-		background: #B8EDFE;
-		border-radius: 8px 8px 8px 8px;
-		position: fixed;
-		/* top: 115px; */
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 999;
+.tipLayer {
+	box-sizing: border-box;
+	min-width: 200px !important;
+	height: 48px;
+	background: #B8EDFE;
+	border-radius: 8px 8px 8px 8px;
+	position: fixed;
+	/* top: 115px; */
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 999;
 
 
 
-	}
+}
 
-	.tipLayer-content {
-		position: relative;
+.tipLayer-content {
+	position: relative;
 
 
-	}
+}
 
-	.title {
-		font-weight: 450;
+.title {
+	font-weight: 450;
+	font-size: 14px;
+	color: #268FFF;
+	line-height: 48px;
+	text-align: center;
+
+	text {
 		font-size: 14px;
-		color: #268FFF;
-		line-height: 48px;
-		text-align: center;
-
-		text {
-			font-size: 14px;
-			font-weight: bold;
-			color: #006ADD;
-		}
-
-		::v-deep text {
-			font-size: 14px;
-			font-weight: bold;
-			color: #006ADD;
-		}
+		font-weight: bold;
+		color: #006ADD;
 	}
 
-	.triangleImg {
-		width: 111px;
-		height: 52px;
-		pointer-events: none;
-		position: absolute;
-		top: -23px;
-		left: calc(50% - 111px);
+	::v-deep text {
+		font-size: 14px;
+		font-weight: bold;
+		color: #006ADD;
 	}
+}
 
-	.triangle {
-		position: absolute;
-		top: -57px;
-		left: calc(50% - 40px);
-		pointer-events: none;
-	}
+.triangleImg {
+	width: 111px;
+	height: 52px;
+	pointer-events: none;
+	position: absolute;
+	top: -23px;
+	left: calc(50% - 111px);
+}
 
-	.close {
-		position: absolute;
-		top: -5px;
-		right: -5px;
-		width: 18px;
-		height: 18px;
-	}
+.triangle {
+	position: absolute;
+	top: -57px;
+	left: calc(50% - 40px);
+	pointer-events: none;
+}
+
+.close {
+	position: absolute;
+	top: -5px;
+	right: -5px;
+	width: 18px;
+	height: 18px;
+}
 </style>
\ No newline at end of file
diff --git a/main.js b/main.js
index 6840a2a..21d0707 100644
--- a/main.js
+++ b/main.js
@@ -27,7 +27,7 @@ export function createApp() {
 	const systemInfo = uni.getStorageSync('systemInfo') || {}
 	app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
 	app.config.globalProperties.$systemInfo = systemInfo
-	uni.setStorageSync('version', '1.0.0.sp7')
+	uni.setStorageSync('version', '1.0.0.sp9')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 
 	app.use(globalMethods);
diff --git a/pages.json b/pages.json
index da0343b..9b21885 100644
--- a/pages.json
+++ b/pages.json
@@ -70,7 +70,8 @@
 					}
 				}
 			]
-		}, {
+		},
+		{
 			"root": "pages/finance-management",
 			"pages": [{
 					"path": "index",
@@ -111,6 +112,29 @@
 						"navigationBarTitleText": "工资单",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "train-tickets/12306-tickets/12306-tickets",
+					"style": {
+						"navigationBarTitleText": "12306火车票",
+						"navigationStyle": "custom",
+						"navigationBarTextStyle": "white"
+					}
+				},
+				{
+					"path": "train-tickets/edit/edit",
+					"style": {
+						"navigationBarTitleText": "修改火车票信息",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "air-tickets/qunar-air-tickets/qunar-air-tickets",
+					"style": {
+						"navigationBarTitleText": "去哪儿",
+						"navigationStyle": "custom",
+						"navigationBarTextStyle": "white"
+					}
 				}
 			]
 		},
@@ -155,7 +179,8 @@
 				"pages/bill",
 				"pages/common",
 				"pages/finance-management",
-				"pages/ant-credit-pay"
+				"pages/ant-credit-pay",
+				"pages/other"
 			]
 		}
 	},
diff --git a/pages/ant-credit-pay/overdue-payment/overdue-payment.vue b/pages/ant-credit-pay/overdue-payment/overdue-payment.vue
index 8a9a330..8a5d3db 100644
--- a/pages/ant-credit-pay/overdue-payment/overdue-payment.vue
+++ b/pages/ant-credit-pay/overdue-payment/overdue-payment.vue
@@ -95,6 +95,8 @@
 			</view>
 		</view>
 		<view class="overdue-box">
+			<image class="bg-image" src="/static/image/ant-credit-pay/overdue-payment/overdue-bg.png" mode="widthFix">
+			</image>
 			<view class="overdue-info">
 				<image class="icon" src="/static/image/ant-credit-pay/overdue-payment/warring-icon.png"></image>
 				<view class="err-text">抱歉，您暂时无法使用该服务！服务机构将不定期评估您的使用资格，请保持良好信用行为并耐心等待通知</view>
@@ -258,7 +260,7 @@ const buttonGroup = [{
 		openStyleDialog()
 	}
 }, {
-	name: "逾期后停用",
+	name: "逾期停用",
 	isSwitch: true,
 	key: 'isOverdueDeactivate',
 	click: () => {
@@ -471,7 +473,7 @@ const goBack = () => {
 	display: flex;
 	flex-direction: column;
 	background-color: #F6F6F6;
-	height: 100vh;
+	// height: 100vh;
 	// overflow: hidden;
 	padding-bottom: 16rpx;
 
@@ -646,26 +648,42 @@ const goBack = () => {
 	}
 
 	.overdue-box {
+		position: relative;
+		width: 100%;
+		height: auto;
 		display: flex;
-		align-items: center;
 		justify-content: center;
 		padding-top: 18rpx;
-		background-image: url('/static/image/ant-credit-pay/overdue-payment/overdue-bg.png');
-		background-size: contain;
-		background-repeat: no-repeat;
+		// background-image: url('/static/image/ant-credit-pay/overdue-payment/overdue-bg.png');
+		// background-size: contain;
+		// background-repeat: no-repeat;
 		margin-top: -1px;
+		// height: 700rpx;
+
+		.bg-image {
+			position: absolute;
+			width: 100%;
+			top: 0;
+			left: 0;
+			right: 0;
+		}
 
 		.overdue-info {
-			width: 654rpx;
-			// height: 628rpx;
+			position: relative;
+			width: 100%;
+			margin: 0 48rpx;
 			background: linear-gradient(180deg, #FFF5F4 0%, #FFFBF7 100%);
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
 			padding: 100rpx 24rpx 60rpx;
-			display: flex;
-			align-items: center;
-			flex-direction: column;
+			text-align: center;
+			// display: flex;
+			// align-items: center;
+			// flex-direction: column;
+			// min-height: 628rpx;
+			// max-height: 100%;
 
 			.icon {
+				position: relative;
 				width: 72rpx;
 				height: 72rpx;
 			}
@@ -710,7 +728,7 @@ const goBack = () => {
 		border-radius: 16rpx;
 		margin: 16rpx 24rpx 0;
 		display: flex;
-		align-items: center;
+		// align-items: center;
 		flex-wrap: wrap;
 		padding-bottom: 12rpx;
 
diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index 1f5e13b..0f5d189 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -16,7 +16,7 @@
 
 		</view>
 		<view class="content-box" :style="{ height: windowHeight + 'px' }">
-			<scroll-view scroll-y="true"
+			<scroll-view scroll-y="true" class="scroll-view"
 				:style="{ height: (windowHeight - statusBarHeight - 44) + 'px', marginTop: (statusBarHeight + 44) + 'px' }"
 				@scroll="handleScroll">
 				<view>
@@ -125,6 +125,8 @@
 
 				<view class="footer-box" :class="{ 'ios-padding-bottom': platform === 'ios' }">
 					<text class="vision-text">版本:{{ vision }}</text>
+					<text class="vision-text margin-l-6" v-if="qqgroup.enable">{{ qqgroup.text }}</text>
+					<text class="vision-text" @click="copyNumber(qqgroup.number)">{{ qqgroup.number }}</text>
 				</view>
 			</scroll-view>
 		</view>
@@ -150,7 +152,9 @@ import {
 
 import {
 	onLoad,
-	onShow
+	onShow,
+	onHide,
+	onUnload
 } from '@dcloudio/uni-app';
 
 // 内部埋点方法
@@ -222,7 +226,7 @@ const otherList = [{
 {
 	icon: "/static/image/index/qita/huochepiao.png",
 	name: "火车票",
-	path: ""
+	path: "/pages/other/train-tickets/12306-tickets/12306-tickets"
 },
 {
 	icon: "/static/image/index/qita/gongzidan.png",
@@ -245,7 +249,8 @@ const data = reactive({
 	videoHelpList: [],
 	noticeInfo: {},
 	vision: "",
-	platform: '' // 添加平台信息
+	platform: '', // 添加平台信息,
+	qqgroup: {}
 })
 
 const {
@@ -256,7 +261,8 @@ const {
 	videoHelpList,
 	noticeInfo,
 	vision,
-	platform
+	platform,
+	qqgroup
 } = toRefs(data);
 
 /**
@@ -389,6 +395,7 @@ const setUserData = () => {
 		// 启动走马灯
 		startMarquee();
 		data.videoHelpList = configData.config['client.uniapp.alipay.video_help'] || []
+		data.qqgroup = configData.config['client.uniapp.qqgroup'] || { enable: false, number: "", text: "" }
 	} else {
 		data.noticeInfo = {
 			text: '加载中...',
@@ -437,6 +444,30 @@ const clickNotice = () => {
 	util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${noticeInfo.value.title}`)
 }
 
+/**
+ * 终极兼容版复制函数
+ */
+const copyNumber = (number) => {
+	if (!number) return;
+	const text = String(number);
+	uni.setClipboardData({
+		data: text,
+		success: function () {
+			uni.showToast({
+				title: '复制成功',
+				icon: 'none'
+			});
+		},
+		fail: function () {
+			uni.showToast({
+				title: '复制失败',
+				icon: 'none'
+			});
+		}
+	});
+}
+
+
 /**
  * 退出模拟器
  */
@@ -566,12 +597,38 @@ const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
 		});
 	});
 }
+
+/**
+ * 停止走马灯
+ */
+const stopMarquee = () => {
+	// 清除定时器
+	if (marqueeTimer) {
+		clearTimeout(marqueeTimer);
+		marqueeTimer = null;
+	}
+	// 增加ID使其失效
+	currentMarqueeId.value++;
+}
+
+onHide(() => {
+	stopMarquee();
+})
+
+onUnload(() => {
+	stopMarquee();
+})
+
 </script>
 <style>
 .container {
 	background-color: #F0F4F9;
 }
 
+.margin-l-6 {
+	margin-left: 6px;
+}
+
 .index-bg-img {
 	position: fixed;
 	top: 0;
@@ -600,6 +657,13 @@ const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
 	justify-content: space-between;
 }
 
+
+::v-deep .uni-scroll-view-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
 .status-box {
 	width: 100%;
 }
@@ -846,6 +910,7 @@ const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
 
 .footer-box {
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	justify-content: center;
 	margin-top: 40rpx;
diff --git a/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets.vue b/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets.vue
new file mode 100644
index 0000000..40ce3e9
--- /dev/null
+++ b/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets.vue
@@ -0,0 +1,1015 @@
+<template>
+	<view class="page-container">
+		<!-- Main Content Wrapper (Standard Flow) -->
+		<view class="main-content">
+			<!-- Header Background (Inside scroll flow) -->
+			<view class="header-bg">
+				<navBar isBack :title="data.navBar.title" :bgColor="data.navBar.bgColor"
+					:textColor="data.navBar.textColor" />
+				<view class="status-section">
+					<view class="status-row">
+						<text class="status-title">出票完成</text>
+						<view class="price-box">
+							<text class="price-label">体验价</text>
+							<text class="price-symbol">¥</text>
+							<text class="price-val">714</text>
+							<uni-icons type="right" size="14" color="#fff"></uni-icons>
+						</view>
+					</view>
+					<view class="order-no-row">
+						<text class="order-no-text">订单号:203012348597</text>
+						<uni-icons type="paperclip" size="14" color="#fff" style="margin-left: 8rpx;"></uni-icons>
+					</view>
+					<text class="status-desc">出票成功，请按时关注航班变更信息</text>
+				</view>
+				<view class="image-box">
+					<image src="/static/image/other/air-tickets/qunar/banner.png" mode="widthFix" style="width: 100%;">
+					</image>
+				</view>
+
+			</view>
+			<view class="gradient-bg"></view>
+
+			<!-- Content Area -->
+			<view class="content-area">
+				<!-- Unified Ticket Card -->
+				<view class="ticket-wrapper">
+					<view class="ticket-card">
+						<!-- Flight Section -->
+						<view class="flight-section">
+							<view class="section-title-row">
+								<text class="section-title">旅行套餐·航班信息</text>
+							</view>
+
+							<view class="flight-header">
+								<view class="tag">直飞</view>
+								<image class="airline-icon" src="/static/airline.png" mode="aspectFit"
+									style="width: 28rpx; height: 28rpx; margin-right: 8rpx;"></image>
+								<text class="flight-name">南航 CZ2355 03-04 武汉-北京</text>
+							</view>
+
+							<view class="flight-time-row">
+								<view class="time-col">
+									<text class="time-big">08:00</text>
+									<text class="airport-text">天河机场T3 <uni-icons type="location-filled" size="10"
+											color="#666"></uni-icons></text>
+								</view>
+								<view class="arrow-col">
+									<image class="plane-line" src="/static/plane-line.png"
+										style="width: 140rpx; height: 20rpx; margin-bottom: 4rpx;" mode="aspectFit">
+									</image>
+									<text class="duration-text">2时5分</text>
+								</view>
+								<view class="time-col align-right">
+									<text class="time-big">10:00</text>
+									<text class="airport-text">北京大兴机场 <uni-icons type="location-filled" size="10"
+											color="#666"></uni-icons></text>
+								</view>
+							</view>
+
+							<view class="flight-detail-row">
+								<uni-icons type="paperplane" size="12" color="#999"></uni-icons>
+								<text class="detail-item">737-800</text>
+								<text class="detail-divider">|</text>
+								<uni-icons type="smallcircle" size="12" color="#999"></uni-icons>
+								<text class="detail-item">经济舱</text>
+								<text class="detail-divider">|</text>
+								<uni-icons type="info" size="12" color="#999"></uni-icons>
+								<text class="detail-item">准点率--</text>
+								<text class="detail-divider">|</text>
+								<uni-icons type="shop" size="12" color="#999"></uni-icons>
+								<text class="detail-item">小食</text>
+							</view>
+
+							<view class="flight-actions">
+								<view class="action-btn">
+									<uni-icons type="info-filled" size="14" color="#00B5E0"></uni-icons>
+									<text class="btn-text">退改说明</text>
+								</view>
+								<view class="action-btn">
+									<uni-icons type="bag-filled" size="14" color="#00B5E0"></uni-icons>
+									<view class="btn-right">
+										<text class="btn-text">行李规定</text>
+										<text class="sub-text">含20kg免费托运行李</text>
+									</view>
+								</view>
+							</view>
+						</view>
+
+						<!-- Divider -->
+						<view class="ticket-divider">
+							<view class="half-circle left"></view>
+							<view class="dashed-line"></view>
+							<view class="half-circle right"></view>
+						</view>
+
+						<!-- Passenger Section -->
+						<view class="passenger-section">
+							<view class="section-title-row">
+								<text class="section-title">旅行套餐·出票信息</text>
+								<view class="link-right">
+									<text>查看隐藏信息</text>
+									<uni-icons type="right" size="12" color="#999"></uni-icons>
+								</view>
+							</view>
+
+							<view class="passenger-list">
+								<view class="passenger-row" v-for="(p, i) in passengerList" :key="i">
+									<view class="row-label" v-if="i === 0">乘机人</view>
+									<view class="row-label-placeholder" v-else></view>
+
+									<view class="row-content">
+										<view class="p-name">{{ p.name }}</view>
+										<view class="p-sub">身份证: {{ p.id }}</view>
+										<view class="p-sub">
+											票号: {{ p.ticketNo }}
+											<uni-icons type="paperclip" size="12" color="#666"
+												style="margin-left: 6rpx;"></uni-icons>
+										</view>
+									</view>
+								</view>
+
+								<view class="contact-row">
+									<text class="row-label">联系手机</text>
+									<text class="contact-val">+86 187****5555</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- Alerts -->
+				<view class="combined-alert-box">
+					<view class="alert-row">
+						<view class="alert-tag">防诈提示</view>
+						<text class="alert-content">凡以航班变动、取消为由主动提供经济赔偿可能是诈骗，请登录去哪儿网核实或咨询客服 95117。</text>
+					</view>
+					<view class="alert-divider"></view>
+					<view class="alert-row">
+						<view class="alert-tag">乘机提示</view>
+						<text class="alert-content">禁止旅客携带没有3C标识、3C标识不清、已经被召回型号或批次的充电宝乘坐境内航班。</text>
+					</view>
+				</view>
+
+				<!-- Services Card -->
+				<view class="card service-card">
+					<view class="service-header-row">
+						<text class="section-title">出行服务</text>
+					</view>
+
+					<view class="service-list-header">
+						<uni-icons type="wallet-filled" size="16" color="#FFC107"
+							style="margin-right: 8rpx;"></uni-icons>
+						<text class="sl-title">旅行套餐·其他产品</text>
+					</view>
+
+					<view class="product-grid">
+						<!-- Item 1 -->
+						<view class="product-item">
+							<view class="pi-top">
+								<text class="pi-title">接送机立减券 (8... x2</text>
+								<uni-icons type="right" size="12" color="#ccc"></uni-icons>
+							</view>
+						</view>
+						<!-- Item 2 -->
+						<view class="product-item">
+							<view class="pi-top">
+								<text class="pi-title">度假券 x2</text>
+								<uni-icons type="right" size="12" color="#ccc"></uni-icons>
+							</view>
+							<text class="pi-sub">跟团游享9.7折</text>
+						</view>
+						<!-- Item 3 -->
+						<view class="product-item">
+							<view class="pi-top">
+								<text class="pi-title">租车券 x1</text>
+								<uni-icons type="right" size="12" color="#ccc"></uni-icons>
+							</view>
+							<text class="pi-sub">租车享85折</text>
+						</view>
+					</view>
+
+					<view class="show-more-row">
+						<text>收起</text>
+						<uni-icons type="top" size="12" color="#666"></uni-icons>
+					</view>
+				</view>
+
+				<!-- FAQ Card -->
+				<view class="card faq-card">
+					<view class="section-title-row">
+						<text class="section-title">快速解决问题</text>
+						<view class="link-right">
+							<text>联系客服</text>
+							<uni-icons type="right" size="12" color="#666"></uni-icons>
+						</view>
+					</view>
+
+					<view class="faq-tags">
+						<view class="faq-tag">补开发票</view>
+						<view class="faq-tag">发票打印时效</view>
+						<view class="faq-tag">联系航空公司</view>
+						<view class="faq-tag">需要电子发票</view>
+						<view class="faq-tag">合并寄零发票</view>
+						<view class="faq-tag">行程单打印</view>
+					</view>
+				</view>
+
+				<!-- Terms Section -->
+				<view class="card terms-card">
+					<view class="section-title-row">
+						<text class="section-title">协议条款</text>
+					</view>
+					<view class="terms-content">
+						<text class="t-gray">本次预定涉及及条款：</text>
+						<text
+							class="t-blue">内容声明、锂电池及危险品乘机须知、去哪儿网电子商务平台服务合同、个人信息授权声明、赠险免责声明、机票价格变动说明、安心飞政策（2024年8月8日更新）、南航锂电池运输规定、重庆航空运总、南航行李规定、南航国内运输总条件、南航限制行李运输规则、南航国内运输散客支线联程运价使用条件、南航国内运输散客票价使用条件规定、南航北京大兴机场、成都天府机场进出港国内客票使用条件规定、南航国内运输散客来回程票价使用条件规定、南航隐私通知、南航国内运输散客中转票价使用条件规定、工商执照信息、旅行社业务经营许可证旅游代订服务合同</text>
+					</view>
+				</view>
+
+				<!-- Order Info Card -->
+				<view class="card order-info-card">
+					<view class="info-row">
+						<text class="info-label">订单号：</text>
+						<view class="info-val-box">
+							<text class="info-val">204014523688</text>
+							<text class="info-divider">|</text>
+							<text class="info-copy">复制</text>
+						</view>
+					</view>
+					<view class="info-row">
+						<text class="info-label">下单时间：</text>
+						<text class="info-val">2025-02-28 13:52:22</text>
+					</view>
+				</view>
+
+				<!-- Branding -->
+				<view class="branding-area">
+					<view class="brand-main">
+						<text class="brand-line">—</text>
+						<text class="brand-text">低价购·安心飞</text>
+						<text class="brand-line">—</text>
+					</view>
+					<view class="brand-sub">
+						<view class="bs-item">
+							<uni-icons type="checkbox-filled" size="12" color="#999"></uni-icons>
+							<text>价格安心</text>
+						</view>
+						<view class="bs-item">
+							<uni-icons type="checkbox-filled" size="12" color="#999"></uni-icons>
+							<text>出行安心</text>
+						</view>
+						<view class="bs-item">
+							<uni-icons type="checkbox-filled" size="12" color="#999"></uni-icons>
+							<text>售后安心</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="placeholder" style="height: 200rpx;"></view>
+			</view>
+		</view>
+
+		<!-- Bottom Fixed -->
+		<view class="bottom-bar">
+			<button class="invoice-btn">开具发票</button>
+			<view class="home-indicator"
+				style="height: 10rpx; width: 30%; background: #000; border-radius: 10rpx; margin: 20rpx auto 0; opacity: 0.2;">
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import navBar from '@/components/nav-bar/nav-bar.vue';
+import { ref, onMounted, reactive } from 'vue';
+
+const statusBarHeight = ref(20);
+
+const passengerList = ref([
+	{ name: '鱼鱼', id: '5102***********553', ticketNo: '778-2255223370' },
+	{ name: '鱼鱼', id: '5102***********553', ticketNo: '778-2255223370' }
+]);
+
+const data = reactive({
+	navBar: {
+		bgColor: '#09D2E3',
+		title: '出票完成',
+		isBack: true,
+		textColor: '#fff'
+	}
+})
+
+onMounted(() => {
+	const sys = uni.getSystemInfoSync();
+	if (sys.statusBarHeight) {
+		statusBarHeight.value = sys.statusBarHeight;
+	}
+});
+
+const goBack = () => {
+	uni.navigateBack();
+};
+</script>
+
+<style lang="less" scoped>
+.page-container {
+	min-height: 100vh;
+	background-color: #F0F1F6;
+	position: relative;
+}
+
+.nav-bar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 100;
+	background-color: transparent;
+
+	.nav-content {
+		height: 44px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 24rpx;
+
+		.nav-right {
+			display: flex;
+			gap: 32rpx;
+
+			.nav-icon-item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.nav-text {
+					font-size: 20rpx;
+					color: #fff;
+					margin-top: -4rpx;
+				}
+			}
+		}
+	}
+}
+
+.main-content {
+	// background: linear-gradient(180deg, #09D2E3 0%, #09D2E3 0%, rgba(77, 212, 223, 0.12) 85.26%, rgba(216, 216, 216, 0) 100%);
+}
+
+.header-bg {
+	background: #09D2E3;
+
+	.image-box {
+		display: flex;
+		margin: 0 16rpx;
+	}
+}
+
+.gradient-bg {
+	margin-top: -1px;
+	height: 88px;
+	background: linear-gradient(180deg, #09D2E3 0%, #09D2E3 0%, rgba(77, 212, 223, 0.12) 85.26%, rgba(216, 216, 216, 0) 100%);
+}
+
+.status-section {
+	padding: 0 32rpx;
+	color: #fff;
+
+	.status-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		margin-bottom: 8rpx;
+
+		.status-title {
+			font-size: 48rpx;
+			font-weight: bold;
+		}
+
+		.price-box {
+			display: flex;
+			align-items: baseline;
+
+			.price-label {
+				font-size: 24rpx;
+				opacity: 0.9;
+				margin-right: 4rpx;
+			}
+
+			.price-symbol {
+				font-size: 26rpx;
+			}
+
+			.price-val {
+				font-size: 44rpx;
+				font-weight: bold;
+				margin-right: 4rpx;
+			}
+		}
+	}
+
+	.order-no-row {
+		display: flex;
+		align-items: center;
+		font-size: 24rpx;
+		opacity: 0.9;
+		margin-bottom: 12rpx;
+	}
+
+	.status-desc {
+		font-size: 26rpx;
+		opacity: 0.95;
+	}
+}
+
+.content-area {
+	margin-top: -88px;
+	position: relative;
+	z-index: 10;
+}
+
+.card {
+	margin: 0 24rpx 24rpx;
+	background-color: #fff;
+	border-radius: 24rpx;
+	overflow: hidden;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
+}
+
+.ticket-wrapper {
+	margin: 0 16rpx 24rpx;
+	border-radius: 0 0 20rpx20rpx;
+	overflow: hidden;
+	box-shadow: 0 4rpx 16rpx rgba(0, 181, 224, 0.1);
+}
+
+.ticket-card {
+	background-color: #fff;
+
+	.flight-section {
+		padding: 32rpx 24rpx 24rpx;
+
+		.section-title {
+			font-size: 30rpx;
+			color: #333;
+			font-weight: bold;
+			margin-bottom: 20rpx;
+			display: block;
+		}
+
+		.flight-header {
+			display: flex;
+			align-items: center;
+			margin-bottom: 24rpx;
+
+			.tag {
+				background-color: #00bcd4;
+				color: #fff;
+				font-size: 20rpx;
+				padding: 2rpx 8rpx;
+				border-radius: 4rpx;
+				margin-right: 12rpx;
+			}
+
+			.flight-name {
+				font-size: 24rpx;
+				color: #666;
+			}
+		}
+
+		.flight-time-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 24rpx;
+
+			.time-col {
+				display: flex;
+				flex-direction: column;
+
+				.time-big {
+					font-size: 56rpx;
+					font-weight: bold;
+					color: #333;
+					line-height: 1;
+					margin-bottom: 12rpx;
+					letter-spacing: -1rpx;
+				}
+
+				.airport-text {
+					font-size: 24rpx;
+					color: #666;
+					display: flex;
+					align-items: center;
+					gap: 4rpx;
+				}
+			}
+
+			.align-right {
+				align-items: flex-end;
+			}
+
+			.arrow-col {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding: 0 20rpx;
+
+				.plane-line {
+					width: 100%;
+					height: 20rpx;
+					/* Placeholder for dashed line image if not available, create CSS dashed line */
+					border-bottom: 2rpx dashed #ddd;
+					position: relative;
+					margin-bottom: 8rpx;
+
+					&::after {
+						content: '✈';
+						position: absolute;
+						top: -14rpx;
+						left: 50%;
+						transform: translateX(-50%) rotate(90deg);
+						color: #ddd;
+						font-size: 24rpx;
+						background-color: #fff;
+						padding: 0 8rpx;
+					}
+				}
+
+				.duration-text {
+					font-size: 22rpx;
+					color: #999;
+				}
+			}
+		}
+
+		.flight-detail-row {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 22rpx;
+			color: #999;
+			margin-bottom: 32rpx;
+			gap: 8rpx;
+
+			.detail-divider {
+				color: #eee;
+				margin: 0 8rpx;
+			}
+		}
+
+		.flight-actions {
+			display: flex;
+			gap: 20rpx;
+
+			.action-btn {
+				flex: 1;
+				border: 1rpx solid #c2f0f8;
+				border-radius: 16rpx;
+				padding: 20rpx 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 12rpx;
+
+				.btn-text {
+					color: #00bcd4;
+					font-size: 28rpx;
+				}
+
+				.btn-right {
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+
+					.sub-text {
+						font-size: 20rpx;
+						color: #333;
+					}
+				}
+			}
+		}
+	}
+
+	.ticket-divider {
+		position: relative;
+		height: 40rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+
+		.half-circle {
+			width: 30rpx;
+			height: 30rpx;
+			background-color: #f3f4f6;
+			border-radius: 50%;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+
+			&.left {
+				left: -15rpx;
+			}
+
+			&.right {
+				right: -15rpx;
+			}
+		}
+
+		.dashed-line {
+			flex: 1;
+			margin: 0 30rpx;
+			border-top: 2rpx dashed #eee;
+		}
+	}
+
+	.passenger-section {
+		padding: 24rpx 24rpx 32rpx;
+
+		.section-title-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 24rpx;
+
+			.section-title {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #333;
+			}
+
+			.link-right {
+				font-size: 22rpx;
+				color: #999;
+				display: flex;
+				align-items: center;
+			}
+		}
+
+		.passenger-row {
+			display: flex;
+			margin-bottom: 32rpx;
+
+			.row-label {
+				width: 140rpx;
+				font-size: 26rpx;
+				color: #999;
+			}
+
+			.row-label-placeholder {
+				width: 140rpx;
+			}
+
+			.row-content {
+				flex: 1;
+
+				.p-name {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #333;
+					margin-bottom: 8rpx;
+					text-decoration: underline;
+					text-decoration-color: #333;
+				}
+
+				.p-sub {
+					font-size: 24rpx;
+					color: #999;
+					margin-bottom: 8rpx;
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+
+		.contact-row {
+			display: flex;
+			align-items: center;
+
+			.row-label {
+				width: 140rpx;
+				font-size: 26rpx;
+				color: #999;
+			}
+
+			.contact-val {
+				font-size: 30rpx;
+				color: #333;
+			}
+		}
+	}
+}
+
+.combined-alert-box {
+	margin: 0 24rpx 24rpx;
+	background-color: #fff4f2;
+	border-radius: 12rpx;
+	padding: 24rpx;
+
+	.alert-row {
+		display: flex;
+		align-items: flex-start;
+
+		.alert-tag {
+			background: linear-gradient(90deg, #ff6b6b, #ff4d4f);
+			color: #fff;
+			font-size: 20rpx;
+			padding: 4rpx 10rpx;
+			border-radius: 6rpx;
+			margin-right: 16rpx;
+			white-space: nowrap;
+			line-height: normal;
+			margin-top: 4rpx;
+		}
+
+		.alert-content {
+			font-size: 24rpx;
+			color: #d45d52;
+			line-height: 1.5;
+			flex: 1;
+			text-align: justify;
+		}
+	}
+
+	.alert-divider {
+		height: 1rpx;
+		border-top: 1rpx dashed #f5caca;
+		margin: 20rpx 0;
+	}
+}
+
+.service-card {
+	padding: 32rpx 24rpx;
+
+	.service-header-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		margin-bottom: 24rpx;
+
+		.section-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333;
+		}
+	}
+
+	.service-list-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 24rpx;
+
+		.sl-title {
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #333;
+		}
+	}
+
+	.product-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		gap: 20rpx;
+		margin-bottom: 20rpx;
+
+		.product-item {
+			width: 48%;
+			background-color: #fff;
+			/* Assuming a slight border or shadow if needed, but per screenshot seems flat/clean or needs wrapper */
+			/* The screenshot shows them as white cards on white? No, actually they seem to have a border or background */
+			/* Let's try to match the container style or just ensure they look distinct */
+			/* Actually in the screenshot, the "Travel Package" header is outside? */
+			/* Wait, looking closely at screenshot: The items look like they are in a white card. */
+			/* Let's keep them clean. */
+
+			background-color: #fafafa;
+			padding: 20rpx;
+			border-radius: 12rpx;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			min-height: 120rpx;
+
+			/* First item spans full width in screenshot? */
+			/* "接送机立减券" is on left, "度假券" on right? */
+			/* Actually the screenshot shows: */
+			/* Row 1: Left Item (Airport transfer), Right Item (Vacation) */
+			/* Row 2: Left Item (Car rental) */
+			/* Wait, looking at the layout: "接送机" (Airport) seems to be item 1. "度假券" item 2. "租车券" item 3. */
+
+			.pi-top {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+				margin-bottom: 8rpx;
+
+				.pi-title {
+					font-size: 28rpx;
+					color: #333;
+					font-weight: bold;
+					flex: 1;
+					margin-right: 8rpx;
+				}
+			}
+
+			.pi-sub {
+				font-size: 22rpx;
+				color: #ff9900;
+			}
+
+			&:first-child {
+				/* If item 1 looks like it takes same width */
+			}
+		}
+	}
+
+	.show-more-row {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding-top: 16rpx;
+		font-size: 24rpx;
+		color: #666;
+		gap: 4rpx;
+	}
+}
+
+.faq-card {
+	padding: 32rpx 24rpx;
+
+	.section-title-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 24rpx;
+
+		.section-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333;
+		}
+
+		.link-right {
+			font-size: 24rpx;
+			color: #999;
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.faq-tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20rpx;
+
+		.faq-tag {
+			padding: 12rpx 32rpx;
+			background-color: #fff;
+			border: 1rpx solid #e5e5e5;
+			border-radius: 32rpx;
+			font-size: 26rpx;
+			color: #666;
+		}
+	}
+}
+
+.terms-card {
+	padding: 32rpx 24rpx;
+
+	.section-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 24rpx;
+		display: block;
+	}
+
+	.terms-content {
+		font-size: 24rpx;
+		line-height: 1.6;
+		text-align: justify;
+
+		.t-gray {
+			color: #999;
+		}
+
+		.t-blue {
+			color: #00bcd4;
+		}
+	}
+}
+
+.order-info-card {
+	padding: 32rpx 24rpx;
+
+	.info-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 24rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		.info-label {
+			font-size: 30rpx;
+			color: #333;
+		}
+
+		.info-val-box {
+			display: flex;
+			align-items: center;
+			font-size: 28rpx;
+			color: #999;
+
+			.info-val {
+				margin-right: 16rpx;
+			}
+
+			.info-divider {
+				color: #eee;
+				margin-right: 16rpx;
+				font-size: 24rpx;
+			}
+
+			.info-copy {
+				color: #666;
+			}
+		}
+
+		.info-val {
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
+}
+
+.branding-area {
+	padding-bottom: 200rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	.brand-main {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		margin-bottom: 12rpx;
+
+		.brand-line {
+			color: #ccc;
+		}
+
+		.brand-text {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #ccc;
+			/* Note: Screenshot might show generic gray brand */
+		}
+	}
+
+	.brand-sub {
+		display: flex;
+		gap: 24rpx;
+
+		.bs-item {
+			display: flex;
+			align-items: center;
+			gap: 4rpx;
+			font-size: 20rpx;
+			color: #999;
+		}
+	}
+}
+
+.bottom-bar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	z-index: 999;
+	background-color: #fff;
+	padding: 24rpx 32rpx 40rpx;
+	box-sizing: border-box;
+	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.03);
+
+	.invoice-btn {
+		background-color: #53dcf9;
+		color: #fff;
+		border-radius: 44rpx;
+		font-size: 32rpx;
+		font-weight: bold;
+		border: none;
+
+		&::after {
+			border: none;
+		}
+	}
+}
+</style>
diff --git a/pages/other/splash/splash.vue b/pages/other/splash/splash.vue
index fb2fe6a..69911c3 100644
--- a/pages/other/splash/splash.vue
+++ b/pages/other/splash/splash.vue
@@ -579,14 +579,14 @@ onReachBottom(() => {
 }
 
 .btn-save-image {
-	background-color: #07C160;
+	background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
 	color: #fff;
 	border: none;
 	padding: 18rpx 60rpx;
 	border-radius: 40rpx;
 	font-size: 26rpx;
 	font-weight: bold;
-	box-shadow: 0 3rpx 10rpx rgba(7, 193, 96, 0.3);
+	box-shadow: 0 3rpx 10rpx rgba(7, 66, 193, 0.3);
 	transition: all 0.3s ease;
 	text-align: center;
 	min-width: 160rpx;
@@ -594,11 +594,11 @@ onReachBottom(() => {
 
 .btn-save-image:hover {
 	transform: translateY(-2rpx);
-	box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.4);
+	box-shadow: 0 4rpx 12rpx rgba(7, 72, 193, 0.4);
 }
 
 .btn-save-image:active {
 	transform: translateY(0);
-	box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.3);
+	box-shadow: 0 2rpx 6rpx rgba(7, 140, 193, 0.3);
 }
 </style>
\ No newline at end of file
diff --git a/pages/other/train-tickets/12306-tickets/12306-tickets.vue b/pages/other/train-tickets/12306-tickets/12306-tickets.vue
new file mode 100644
index 0000000..c434012
--- /dev/null
+++ b/pages/other/train-tickets/12306-tickets/12306-tickets.vue
@@ -0,0 +1,930 @@
+<template>
+	<view class="container">
+		<!-- 顶部背景 -->
+		<view class="header-bg"></view>
+
+		<!-- 自定义导航栏 -->
+		<NavBar class="nav-bar" isBack bgColor="#3C99FB" textColor="#fff" isRightIcon tipLayerType="train-tickets-tip"
+			isTipLayer tipLayerText="修改车票信息" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton">
+			<template v-slot:center>
+				<text class="center-text">订单详情</text>
+			</template>
+		</NavBar>
+
+		<!-- 页面内容 -->
+		<scroll-view scroll-y class="content-scroll">
+			<!-- 订单信息 -->
+			<view class="order-info-box">
+				<view class="order-number-row">
+					<text class="order-label">订单号:{{ ticketsInfo.orderInfo.orderNo }}</text>
+					<image class="copy-btn" @click="copyOrderNo"
+						src="/static/image/other/train-tickets/12306-tickets/copy-button.png"></image>
+				</view>
+				<text class="order-time">下单时间:{{ ticketsInfo.orderInfo.orderTime }}</text>
+			</view>
+			<view class="main-card">
+				<!-- 车票卡片 -->
+				<view class="ticket-card">
+					<view class="ticket-main-info">
+						<view class="station-time-box">
+							<text class="time-text">{{ departureTimeDisplay }}</text>
+							<view class="station-text">{{ ticketsInfo.ticketInfo.departureStation }}
+								<uni-icons type="forward" size="10" color="#767676"></uni-icons>
+							</view>
+						</view>
+
+						<view class="train-info-box">
+							<view class="train-no">
+								<text style="line-height: 26rpx;">{{ ticketsInfo.ticketInfo.trainNo }}</text>
+								<uni-icons type="arrowright" size="10" color="#979797"></uni-icons>
+							</view>
+							<view class="stopover-box">
+								<image style="width: 100%;height: 100%;"
+									src="/static/image/other/train-tickets/12306-tickets/stopover-bg.png"></image>
+							</view>
+							<text class="duration-text">历时{{ ticketsInfo.ticketInfo.duration }}</text>
+						</view>
+
+						<view class="station-time-box" style="align-items: flex-start;">
+							<view class="time-row">
+								<text class="time-text">{{ arrivalTimeDisplay }}</text>
+								<text v-if="dayDiff > 0" class="day-badge">+{{ dayDiff }}</text>
+							</view>
+							<view class="station-text">{{ ticketsInfo.ticketInfo.arrivalStation }}
+								<uni-icons type="forward" size="10" color="#767676"></uni-icons>
+							</view>
+						</view>
+					</view>
+
+					<view class="date-row">
+						<text class="date-text">发车时间：{{ ticketsInfo.ticketInfo.date }} {{ ticketsInfo.ticketInfo.weekDay
+						}}</text>
+						<text class="valid-text">车票当日当次有效</text>
+					</view>
+
+					<view class="gate-info-box">
+						<text>检票口{{ ticketsInfo.ticketInfo.gate }}</text>
+						<text class="gate-text">（如有变更，请以现场公告为准）</text>
+					</view>
+
+
+				</view>
+				<!-- 操作栏 -->
+				<view class="action-bar">
+					<view class="action-item" @click="handleAction('变更到站')">
+						<text class="action-text">变更到站</text>
+					</view>
+					<view class="divider"></view>
+					<view class="action-item" @click="handleAction('改签')">
+						<text class="action-text">改签</text>
+					</view>
+					<view class="divider"></view>
+					<view class="action-item" @click="handleAction('退票')">
+						<text class="action-text">退票</text>
+					</view>
+				</view>
+
+				<!-- 乘客卡片 -->
+				<view class="passenger-card-box" v-for="(passenger, index) in ticketsInfo.passengerList" :key="index">
+					<view class="passenger-card">
+						<view class="passenger-header">
+							<view class="name-box">
+								<text class="passenger-name">{{ passenger.name }}</text>
+								<text class="tag-text">{{ passenger.type }}</text>
+							</view>
+							<view class="seat-info">
+								<text v-if="computeSeatNo(passenger.seatNo)" class="tag-text-grey">{{
+									computeSeatNo(passenger.seatNo) }}</text>
+								<text class="seat-text">{{ passenger.seatType }} {{ passenger.carriage }}车 {{
+									passenger.seatNo
+								}}号</text>
+								<uni-icons style="margin-left: 4rpx;margin-top: 4rpx;" type="forward" size="10"
+									color="#979797"></uni-icons>
+							</view>
+						</view>
+
+						<view class="passenger-details">
+							<text class="id-card-text">{{ passenger.idType }}</text>
+							<text class="price-text">¥{{ passenger.price }}</text>
+						</view>
+
+						<view class="status-row">
+							<text class="status-text">已支付</text>
+							<text class="refund-rule-text">退改说明</text>
+						</view>
+					</view>
+					<view class="passenger-actions">
+						<view class="svc-btn outline">
+							<text class="svc-text">订餐</text>
+						</view>
+						<view class="svc-btn outline">
+							<text class="svc-text">购乘意险</text>
+						</view>
+						<view class="svc-btn primary" v-if="passenger.isMe">
+							<text class="svc-text-white">
+								<image style="width: 20rpx;height: 20rpx;"
+									src="/static/image/other/train-tickets/12306-tickets/qr-code.png"></image>
+								<text style="margin-left: 8rpx;">二维码验票</text>
+							</text>
+						</view>
+					</view>
+				</view>
+
+
+			</view>
+
+			<view style="margin: 0 16rpx;">
+				<!-- 分享区 -->
+				<view class="share-section">
+					<text class="share-tips">美好旅途，快与朋友一起分享吧~</text>
+					<image style="width: 158rpx;height: 50rpx;"
+						src="/static/image/other/train-tickets/12306-tickets/share.png">
+					</image>
+				</view>
+
+				<!-- 提示 -->
+				<view class="notice-row">
+					<uni-icons type="notification" size="14" color="#AAAAAA"></uni-icons>
+					<text class="notice-text">订单信息查询有效期限为30日</text>
+				</view>
+
+				<!-- 广告Banner -->
+				<view class="ad-banner">
+					<image class="bg-image" src="/static/image/other/train-tickets/12306-tickets/hotel-bg.png"
+						mode="widthFix">
+					</image>
+					<image class="bg-image" style="opacity: 0;position: relative;"
+						src="/static/image/other/train-tickets/12306-tickets/hotel-bg.png" mode="widthFix">
+					</image>
+					<view class="hotel-ad">
+						<view class="hotel-search-row">
+							<view class="city-box">
+								<uni-icons class="search-icon" style="margin-right: 8rpx;height: 16px;" type="search"
+									size="16" color="#C8C8C8"></uni-icons>
+								<text class="city-text">{{ ticketsInfo.hotelInfo.city }}</text>
+							</view>
+
+							<view class="date-range">
+								<text class="date-val">{{ ticketsInfo.hotelInfo.startDay }}</text>
+								<text class="date-label">入住</text>
+								<view class="night-count">
+									<text class="night-num">{{ data.nightCount }}晚</text>
+								</view>
+								<text class="date-val">{{ ticketsInfo.hotelInfo.endDay }}</text>
+								<text class="date-label">离店</text>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 更多服务 -->
+				<view class="bottom-image">
+					<image style="width: 100%;height: 100%;"
+						src="/static/image/other/train-tickets/12306-tickets/bottom-bg.png" mode="widthFix">
+					</image>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import NavBar from '@/components/nav-bar/nav-bar.vue';
+import {
+	ref,
+	reactive,
+	toRefs,
+	computed
+} from 'vue';
+import {
+	onLoad,
+	onShow
+} from '@dcloudio/uni-app';
+
+import { util } from '@/utils/common.js';
+
+const buttonGroup = [{
+	name: "编辑车票信息",
+	click: () => {
+		util.goPage('/pages/other/train-tickets/edit/edit')
+	}
+}]
+
+const ticketType = [
+	{
+		label: '成人票',
+		value: '1'
+	},
+	{
+		label: '儿童票',
+		value: '2'
+	},
+	{
+		label: '学生票',
+		value: '3'
+	},
+	{
+		label: '残疾军人票',
+		value: '4'
+	}
+]
+
+const statusBarHeight = ref(20);
+const data = reactive({
+	ticketsInfo: {
+		"orderInfo": {
+			"orderNo": "EJ66223536",
+			"orderTime": "2026.01.01"
+		},
+		"ticketInfo": {
+			"departureTime": "01-01 09:19",
+			"departureStation": "北京南",
+			"arrivalTime": "01-01 14:04",
+			"arrivalStation": "上海虹桥",
+			"trainNo": "G905",
+			"duration": "4时45分",
+			"date": "2026.01.01",
+			"weekDay": "星期四",
+			"gate": "6B"
+		},
+		"passengerList": [
+			{
+				"name": "张元英",
+				"type": "成人票",
+				"seatType": "商务座",
+				"carriage": "01",
+				"seatNo": "03C",
+				"idType": "外国护照（KR）",
+				"price": "2110",
+				"status": "已支付",
+				"isMe": true
+			}
+		],
+		"hotelInfo": {
+			"city": "上海",
+			"startDay": "01-01",
+			"endDay": "01-02"
+		}
+	},
+	nightCount: 1
+})
+
+let { ticketsInfo } = toRefs(data)
+
+
+
+// Computed Helpers for Display
+
+const getDisplayTime = (str) => {
+	if (!str) return '';
+	// If format is "MM-DD HH:mm", split and take time
+	if (str.length > 5) {
+		return str.split(' ')[1];
+	}
+	return str;
+}
+
+const departureTimeDisplay = computed(() => {
+	return getDisplayTime(data.ticketsInfo.ticketInfo.departureTime);
+})
+
+const arrivalTimeDisplay = computed(() => {
+	return getDisplayTime(data.ticketsInfo.ticketInfo.arrivalTime);
+})
+
+const dayDiff = computed(() => {
+	const dep = data.ticketsInfo.ticketInfo.departureTime;
+	const arr = data.ticketsInfo.ticketInfo.arrivalTime;
+	if (!dep || !arr) return 0;
+
+	// Format is "MM-DD HH:mm"
+	const depDate = dep.split(' ')[0];
+	const arrDate = arr.split(' ')[0];
+
+	if (depDate === arrDate) return 0;
+
+	const year = new Date().getFullYear();
+	// Use "/" for compatibility
+	const d1 = new Date(`${year}/${depDate.replace(/-/g, '/')} 00:00:00`).getTime();
+	const d2 = new Date(`${year}/${arrDate.replace(/-/g, '/')} 00:00:00`).getTime();
+
+	const diffTime = d2 - d1;
+	const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+	return diffDays > 0 ? diffDays : 0;
+})
+
+const computeSeatNo = (seatNo) => {
+	if (seatNo.includes('C') || seatNo.includes('F')) {
+		return '靠窗';
+	} else if (seatNo.includes('A') || seatNo.includes('D')) {
+		return '靠过道';
+	}
+	return '';
+}
+
+/**
+ * 计算两个日期之间的天数差
+ */
+const calculateNightCount = () => {
+	const currentYear = new Date().getFullYear();
+	// 补全年份，格式：YYYY-MM-DD
+	const startStr = `${currentYear}-${data.ticketsInfo.hotelInfo.startDay}`;
+	const endStr = `${currentYear}-${data.ticketsInfo.hotelInfo.endDay}`;
+
+	// 解析时间戳 (兼容 iOS，用 / 替换 -)
+	const startTime = new Date(startStr.replace(/-/g, '/')).getTime();
+	const endTime = new Date(endStr.replace(/-/g, '/')).getTime();
+
+	if (!isNaN(startTime) && !isNaN(endTime)) {
+		const diff = endTime - startTime;
+		// 向上取整，不足一天按一天算
+		const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
+		data.nightCount = days > 0 ? days : 1;
+	} else {
+		data.nightCount = 1;
+	}
+}
+
+onLoad(() => {
+	const sys = uni.getSystemInfoSync();
+	statusBarHeight.value = sys.statusBarHeight || 20;
+});
+
+onShow(() => {
+	if (uni.getStorageSync('ticketsInfo')) {
+		Object.assign(data.ticketsInfo, uni.getStorageSync('ticketsInfo'))
+		calculateNightCount()
+	}
+	// #ifdef APP-PLUS
+	util.setAndroidSystemBarColor('#ffffff')
+	setTimeout(() => {
+		plus.navigator.setStatusBarStyle("light");
+	}, 500)
+	// #endif
+
+	const stored = uni.getStorageSync('ticketsInfo')
+	if (stored) {
+		Object.assign(data.ticketsInfo, stored)
+		calculateNightCount()
+	}
+});
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const copyOrderNo = () => {
+	uni.setClipboardData({
+		data: orderInfo.value.orderNo,
+		success: () => {
+			uni.showToast({
+				title: '复制成功',
+				icon: 'none'
+			});
+		}
+	});
+};
+
+const handleAction = (action) => {
+	uni.showToast({
+		title: `点击了${action}`,
+		icon: 'none'
+	})
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+	width: 100%;
+	min-height: 100vh;
+	background-color: #ffffff;
+	position: relative;
+}
+
+/* 顶部渐变背景 */
+.header-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 540rpx;
+	background: linear-gradient(180deg, #3C99FB 0%, #3C99FB 45.73%, rgba(60, 153, 251, 0.6007) 60.23%, rgba(122, 122, 122, 0) 98.34%);
+	z-index: 0;
+}
+
+/* 导航栏 */
+.nav-bar {
+	.center-text {
+		font-size: 40rpx;
+		font-weight: 400;
+		color: #fff;
+	}
+
+
+}
+
+::v-deep.right-icon {
+	margin-right: 50rpx;
+}
+
+/* 内容区域 */
+.content-scroll {
+	position: relative;
+	z-index: 1;
+	// padding: 0 16rpx;
+	box-sizing: border-box;
+	width: 100%;
+}
+
+/* 订单源信息 */
+.order-info-box {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin: 0 16rpx;
+	margin-bottom: 12rpx;
+	margin-top: 14rpx;
+}
+
+.order-number-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.order-label {
+	font-size: 26rpx;
+	color: #FFFFFF;
+	margin-right: 5px;
+	line-height: 52rpx;
+}
+
+.copy-btn {
+	height: 28rpx;
+	width: 50rpx;
+
+}
+
+.order-time {
+	font-size: 24rpx;
+	color: #FFFFFF;
+}
+
+.main-card {
+	margin: 0 16rpx;
+	position: relative;
+	/* 四周均匀扩散阴影 */
+	box-shadow: 0rpx 0rpx 32rpx 4rpx rgba(0, 0, 0, 0.1);
+	background-color: #fff;
+	border-radius: 16rpx;
+}
+
+/* 票卡片 */
+.ticket-card {
+	position: relative;
+	background-color: #FFFFFF;
+	border-radius: 12rpx;
+	padding: 30rpx 28rpx;
+	box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
+	z-index: 9;
+}
+
+.ticket-main-info {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 30rpx;
+}
+
+.station-time-box {
+	display: flex;
+	flex-direction: column;
+}
+
+.time-text {
+	font-size: 48rpx;
+	font-weight: 500;
+	color: #1a1a1a;
+	line-height: 52rpx;
+	margin: 0 10rpx;
+}
+
+.station-text {
+	font-size: 30rpx;
+	color: #1a1a1a;
+	margin: 12rpx 12rpx 0;
+	display: flex;
+	align-items: center;
+}
+
+.train-info-box {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 8rpx;
+}
+
+.train-no {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 26rpx;
+	color: #1A1A1A;
+}
+
+.stopover-box {
+	width: 90rpx;
+	height: 24rpx;
+	position: relative;
+	margin-bottom: 8rpx;
+	margin-top: 14rpx;
+}
+
+.stopover-text {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-size: 18rpx;
+	text-align: center;
+	white-space: nowrap;
+}
+
+.duration-line {
+	width: 60px;
+	height: 1px;
+	background-color: #E0E0E0;
+	margin: 2px 0;
+}
+
+.duration-text {
+	font-size: 24rpx;
+	color: #999999;
+}
+
+.date-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	font-size: 26rpx;
+	color: #767676;
+	padding: 0 12rpx;
+	line-height: 30rpx;
+	margin-bottom: 22rpx;
+}
+
+.gate-info-box {
+	background-color: #FFF9F0;
+	border-radius: 12rpx;
+	padding: 12rpx 16rpx 14rpx;
+	font-size: 26rpx;
+	color: #664A37;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	line-height: 30rpx;
+}
+
+.gate-text {
+	font-size: 20rpx;
+	color: #767676;
+}
+
+.action-bar {
+	position: relative;
+	margin-top: -24rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+	border-top: 1px solid #F0F0F0;
+	padding-top: 48rpx;
+	padding-bottom: 30rpx;
+	box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
+	/* REMOVED box-shadow from child */
+	z-index: 2;
+}
+
+.action-item {
+	flex: 1;
+	text-align: center;
+}
+
+.action-text {
+	font-size: 30rpx;
+	color: #4C9BEC;
+	font-weight: 500;
+}
+
+.divider {
+	width: 1px;
+	height: 16px;
+	background-color: #EFEFEF;
+}
+
+/* 乘客卡片 */
+
+.passenger-card-box {
+	position: relative;
+	border-bottom: 1px solid #F0F0F0;
+	z-index: 1;
+}
+
+.passenger-card-box:last-child {
+	border-bottom: none;
+}
+
+.passenger-card {
+	position: relative;
+	background-color: #FFFFFF;
+	padding: 32rpx 42rpx 38rpx;
+	box-shadow: 0rpx 8rpx 50rpx 0rpx rgba(0, 0, 0, 0.04);
+}
+
+.passenger-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 22rpx;
+}
+
+.name-box {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.passenger-name {
+	font-size: 36rpx;
+	font-weight: 500;
+	color: #3D3D3D;
+	line-height: 30rpx;
+	margin-right: 8px;
+}
+
+
+.tag-text {
+	border-radius: 4rpx;
+	padding: 4rpx 2rpx;
+	border: 1rpx solid #B2CDE8;
+	font-size: 20rpx;
+	line-height: 20rpx;
+	color: #4A94D2;
+}
+
+.seat-info {
+	display: flex;
+	align-items: center;
+
+	.tag-text-grey {
+		border-radius: 4rpx;
+		padding: 2rpx 4rpx;
+		border: 1rpx solid #EDEDED;
+		font-size: 18rpx;
+		line-height: 18rpx;
+		color: #979797;
+		margin-right: 8rpx;
+	}
+
+	.seat-text {
+		font-size: 13px;
+		color: #1A1A1A;
+		font-weight: 400;
+	}
+}
+
+.passenger-details {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 28rpx;
+
+	.id-card-text {
+		font-size: 28rpx;
+		color: #979797;
+		line-height: 30rpx;
+	}
+
+	.price-text {
+		font-size: 28rpx;
+		color: #F28127;
+		line-height: 28rpx;
+	}
+
+
+}
+
+.status-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+
+	.status-text {
+		font-size: 28rpx;
+		color: #767676;
+		line-height: 28rpx;
+	}
+
+	.refund-rule-text {
+		font-size: 28rpx;
+		color: #4A94D2;
+		text-decoration: underline;
+		line-height: 28rpx;
+	}
+}
+
+
+.passenger-actions {
+	padding: 14rpx 28rpx;
+	padding-right: 18rpx;
+	background-color: #FFFFFF;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	// gap: 20rpx;
+
+	.svc-btn {
+		height: 54rpx;
+		padding: 0 16rpx;
+		border-radius: 4rpx;
+		font-size: 28rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 10rpx;
+	}
+
+	.svc-btn.outline {
+		border: 1px solid #EDEDED;
+		background-color: #FFFFFF;
+	}
+
+	.svc-btn.primary {
+		background-color: #3C99FB;
+		border: 1px solid #C3EFFF;
+	}
+
+	.svc-text {
+		color: #767676;
+	}
+
+	.svc-text-white {
+		color: #FFFFFF;
+	}
+}
+
+
+
+/* 分享区 */
+.share-section {
+	position: relative;
+	margin-top: 20rpx;
+	background-color: #FFFFFF;
+	border-radius: 8rpx;
+	padding: 20rpx 30rpx;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 28rpx;
+	box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
+
+	.share-tips {
+		font-size: 24rpx;
+		color: #3D3D3D;
+	}
+}
+
+/* 提示 */
+.notice-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	line-height: 24rpx;
+	margin-bottom: 28rpx;
+}
+
+.notice-text {
+	font-size: 24rpx;
+	color: #AAAAAA;
+	margin-left: 4rpx;
+}
+
+/* 广告Banner */
+.ad-banner {
+	position: relative;
+	width: 100%;
+
+	.bg-image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+	}
+
+	.hotel-ad {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		padding: 0 20rpx 12rpx;
+		margin-bottom: 12rpx;
+	}
+
+
+	.hotel-search-row {
+		background-color: #FFFFFF;
+		border-radius: 20px;
+		padding: 14rpx 44rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		height: 60rpx;
+
+		.city-box {
+			display: flex;
+			align-items: center;
+
+			.search-icon {
+				margin-right: 18rpx;
+				height: 16px;
+				display: flex;
+				align-items: center;
+			}
+		}
+
+		.city-text {
+			font-size: 30rpx;
+			color: #4495F0;
+			margin-right: 44rpx;
+			font-weight: 500;
+		}
+
+		.date-range {
+			display: flex;
+			flex: 1;
+			flex-direction: row;
+			align-items: center;
+			padding: 0 32rpx;
+			border-left: 1rpx solid #D8D8D8;
+			padding-right: 0;
+		}
+
+		.date-val {
+			font-size: 30rpx;
+			font-weight: 500;
+			color: #4495F0;
+			border-bottom: 1px solid #4495F0;
+		}
+
+		.date-label {
+			font-size: 24rpx;
+			color: #1A1A1A;
+			margin: 0 10rpx;
+		}
+
+		.night-count {
+			font-size: 24rpx;
+			border: 1px solid #E0E0E0;
+			border-radius: 16rpx;
+			height: 34rpx;
+			width: 80rpx;
+			line-height: 34rpx;
+			text-align: center;
+			margin: 0 10rpx;
+			margin-right: 18rpx;
+		}
+
+		.night-num {
+			font-size: 24rpx;
+			line-height: 24rpx;
+			color: #333333;
+		}
+
+	}
+}
+
+.time-row {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+}
+
+.day-badge {
+	font-size: 22rpx;
+	color: rgb(60, 153, 251);
+	margin-left: 2rpx;
+	line-height: 30rpx;
+	position: relative;
+	top: 0rpx;
+}
+</style>
diff --git a/pages/other/train-tickets/edit/edit.vue b/pages/other/train-tickets/edit/edit.vue
new file mode 100644
index 0000000..98b3b0a
--- /dev/null
+++ b/pages/other/train-tickets/edit/edit.vue
@@ -0,0 +1,757 @@
+<template>
+	<view class="container">
+		<NavBar title="修改车票信息" bgColor="#F5F5F5" isRightButton @right-click="handleRightButtonClick"></NavBar>
+
+		<scroll-view scroll-y class="form-content">
+			<!-- 订单信息 -->
+			<view class="section-container">
+				<view class="section-header" @click="toggleSection('orderInfo')">
+					<text class="section-title">订单信息</text>
+					<uni-icons :type="collapsed.orderInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
+				</view>
+				<view class="card" v-show="!collapsed.orderInfo">
+					<view class="form-item">
+						<text class="label">订单号</text>
+						<input class="input" v-model="ticketsInfo.orderInfo.orderNo" />
+					</view>
+					<picker mode="date" fields="day" :value="getPickerDate(ticketsInfo.orderInfo.orderTime)"
+						@change="onOrderTimeChange">
+						<view class="form-item">
+							<text class="label">下单时间</text>
+							<view class="input">{{ ticketsInfo.orderInfo.orderTime }}</view>
+						</view>
+					</picker>
+				</view>
+			</view>
+
+			<!-- 车票信息 -->
+			<view class="section-container">
+				<view class="section-header" @click="toggleSection('ticketInfo')">
+					<text class="section-title">车票信息</text>
+					<uni-icons :type="collapsed.ticketInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
+				</view>
+				<view class="card" v-show="!collapsed.ticketInfo">
+					<view class="form-item">
+						<text class="label">车次</text>
+						<input class="input" v-model="ticketsInfo.ticketInfo.trainNo" />
+					</view>
+					<picker mode="date" fields="day" :value="getPickerDate(ticketsInfo.ticketInfo.date)"
+						@change="onTicketDateChange">
+						<view class="form-item" style="border-bottom: 1rpx solid #F5F5F5;">
+							<text class="label">日期</text>
+							<view class="input">{{ ticketsInfo.ticketInfo.date }}</view>
+						</view>
+					</picker>
+					<view class="form-item">
+						<text class="label">检票口</text>
+						<input class="input" v-model="ticketsInfo.ticketInfo.gate" />
+					</view>
+					<view class="form-item">
+						<text class="label">出发站</text>
+						<input class="input" v-model="ticketsInfo.ticketInfo.departureStation" />
+					</view>
+
+					<picker mode="multiSelector" :range="departureTimeRange" :value="departureTimeIndex"
+						@change="onDepartureTimeChange">
+						<view class="form-item" style="border-bottom: 1rpx solid #F5F5F5;">
+							<text class="label">出发时间</text>
+							<view class="input">{{ ticketsInfo.ticketInfo.departureTime }}</view>
+						</view>
+					</picker>
+
+					<view class="form-item">
+						<text class="label">到达站</text>
+						<input class="input" v-model="ticketsInfo.ticketInfo.arrivalStation" />
+					</view>
+
+					<!-- Arrival Time (Multi-Selector Picker) -->
+					<picker mode="multiSelector" :range="arrivalRange" :value="arrivalIndex" @change="onArrivalChange">
+						<view class="form-item">
+							<text class="label">到达时间</text>
+							<view class="input">{{ ticketsInfo.ticketInfo.arrivalTime }}</view>
+						</view>
+					</picker>
+					<!-- <view class="form-item">
+						<text class="label">历时</text>
+						<input class="input" v-model="ticketsInfo.ticketInfo.duration" disabled />
+					</view> -->
+				</view>
+			</view>
+
+			<!-- 乘客信息 -->
+			<view class="section-container">
+				<view class="section-header" @click="toggleSection('passengerList')">
+					<text class="section-title">乘客信息 ({{ ticketsInfo.passengerList.length }}人)</text>
+					<uni-icons :type="collapsed.passengerList ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
+				</view>
+
+				<view v-show="!collapsed.passengerList">
+					<view class="card" v-for="(passenger, index) in ticketsInfo.passengerList" :key="index">
+						<view class="card-header-row">
+							<text class="card-header">乘客 {{ index + 1 }}</text>
+							<text class="delete-btn" @click="removePassenger(index)">删除</text>
+						</view>
+						<view class="form-item">
+							<text class="label">姓名</text>
+							<input class="input" v-model="passenger.name" />
+						</view>
+						<picker :range="ticketType" range-key="label" @change="(e) => onTicketTypeChange(e, index)">
+							<view class="form-item" style="border-bottom: 1rpx solid #F5F5F5;">
+								<text class="label">票种</text>
+								<view class="input">{{ passenger.type }}</view>
+							</view>
+						</picker>
+						<view class="form-item">
+							<text class="label">席别</text>
+							<input class="input" v-model="passenger.seatType" />
+						</view>
+						<view class="form-item">
+							<text class="label">车厢</text>
+							<input class="input" v-model="passenger.carriage" />
+						</view>
+						<view class="form-item">
+							<text class="label">座位号</text>
+							<input class="input" v-model="passenger.seatNo" />
+						</view>
+
+						<view class="form-item">
+							<text class="label">票价</text>
+							<input class="input" v-model="passenger.price" />
+						</view>
+						<view class="form-item">
+							<text class="label">证件类型</text>
+							<input class="input" v-model="passenger.idType" />
+						</view>
+						<view class="form-item">
+							<text class="label">是否本人</text>
+							<switch :checked="passenger.isMe" @change="(e) => passenger.isMe = e.detail.value" />
+						</view>
+					</view>
+
+					<view class="add-btn-box" @click="addPassenger">
+						<uni-icons type="plusempty" size="20" color="#1677FF"></uni-icons>
+						<text class="add-text">添加乘客</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 酒店广告 -->
+			<view class="section-container">
+				<view class="section-header" @click="toggleSection('hotelInfo')">
+					<text class="section-title">酒店广告</text>
+					<uni-icons :type="collapsed.hotelInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
+				</view>
+				<view class="card" v-show="!collapsed.hotelInfo">
+					<view class="form-item">
+						<text class="label">城市</text>
+						<input class="input" v-model="ticketsInfo.hotelInfo.city" />
+					</view>
+					<uni-datetime-picker type="daterange" v-model="hotelDateRange" :border="false">
+						<view class="form-item">
+							<text class="label">入住/离店日期</text>
+							<view class="input">{{ ticketsInfo.hotelInfo.startDay }} 至 {{ ticketsInfo.hotelInfo.endDay
+							}}</view>
+						</view>
+					</uni-datetime-picker>
+				</view>
+			</view>
+
+			<view class="placeholder"></view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import NavBar from '@/components/nav-bar/nav-bar.vue'
+import { reactive, toRefs, onMounted, computed } from 'vue';
+
+const defaultData = {
+	"orderInfo": {
+		"orderNo": "EJ66223536",
+		"orderTime": "2026.01.01"
+	},
+	"ticketInfo": {
+		"departureTime": "01-01 09:19",
+		"departureStation": "北京南",
+		"arrivalTime": "01-01 14:04",
+		"arrivalStation": "上海虹桥",
+		"trainNo": "G905",
+		"duration": "4时45分",
+		"date": "2026.01.01",
+		"weekDay": "星期四",
+		"gate": "6B"
+	},
+	"passengerList": [
+		{
+			"name": "张元英",
+			"type": "成人票",
+			"seatType": "商务座",
+			"carriage": "01",
+			"seatNo": "03C",
+			"idType": "外国护照（KR）",
+			"price": "2110",
+			"status": "已支付",
+			"isMe": true
+		}
+	],
+	"hotelInfo": {
+		"city": "上海",
+		"startDay": "01-01",
+		"endDay": "01-02"
+	}
+}
+// 车票类型
+const ticketType = [
+	{
+		label: '成人票',
+		value: '1'
+	},
+	{
+		label: '儿童票',
+		value: '2'
+	},
+	{
+		label: '学生票',
+		value: '3'
+	},
+	{
+		label: '残疾军人票',
+		value: '4'
+	}
+]
+
+const data = reactive({
+	ticketsInfo: JSON.parse(JSON.stringify(defaultData)),
+	collapsed: {
+		orderInfo: true,
+		ticketInfo: false, // Default open ticket info as it is most likely to be edited
+		passengerList: false,
+		hotelInfo: true
+	}
+})
+
+
+const { ticketsInfo, collapsed } = toRefs(data)
+
+const ticketYear = computed(() => {
+	const dateStr = data.ticketsInfo.ticketInfo.date;
+	if (dateStr && dateStr.length >= 4) {
+		return dateStr.substring(0, 4);
+	}
+	return new Date().getFullYear().toString();
+})
+
+
+/**
+ * 获取酒店日期范围
+ */
+const hotelDateRange = computed({
+	get() {
+		const year = ticketYear.value;
+		const start = data.ticketsInfo.hotelInfo.startDay ? `${year}-${data.ticketsInfo.hotelInfo.startDay}` : '';
+		const end = data.ticketsInfo.hotelInfo.endDay ? `${year}-${data.ticketsInfo.hotelInfo.endDay}` : '';
+		if (start && end) {
+			return [start, end];
+		}
+		return [];
+	},
+	set(val) {
+		if (Array.isArray(val) && val.length === 2) {
+			data.ticketsInfo.hotelInfo.startDay = val[0].substring(5);
+			data.ticketsInfo.hotelInfo.endDay = val[1].substring(5);
+		}
+	}
+})
+
+onMounted(() => {
+	const stored = uni.getStorageSync('ticketsInfo')
+	if (stored) {
+		Object.assign(data.ticketsInfo, stored)
+	}
+	updateDuration();
+})
+/**
+ * 确认
+ */
+const handleRightButtonClick = () => {
+	console.log("handleRightButtonClick", data.ticketsInfo)
+	const orderTimeStr = data.ticketsInfo.orderInfo.orderTime;
+	const ticketDateStr = data.ticketsInfo.ticketInfo.date;
+
+	if (orderTimeStr && ticketDateStr) {
+		if (orderTimeStr > ticketDateStr) {
+			uni.showToast({
+				title: '下单时间不能晚于出发日期',
+				icon: 'none'
+			});
+			return;
+		}
+	}
+
+	if (data.ticketsInfo.passengerList.length === 0) {
+		uni.showToast({
+			title: '请至少添加一名乘客',
+			icon: 'none'
+		});
+		return;
+	} else {
+		const passengerList = data.ticketsInfo.passengerList.filter(item => item.isMe)
+		if (passengerList.length > 1) {
+			uni.showToast({
+				title: '至多添加一名乘客为本人',
+				icon: 'none'
+			});
+			return;
+		}
+	}
+
+	uni.setStorageSync('ticketsInfo', data.ticketsInfo)
+	uni.navigateBack()
+}
+
+/**
+ * 切换折叠状态
+ * @param {string} key 
+ */
+const toggleSection = (key) => {
+	data.collapsed[key] = !data.collapsed[key]
+}
+
+/**
+ * 删除乘客
+ * @param {number} index 
+ */
+const removePassenger = (index) => {
+	uni.showModal({
+		title: '提示',
+		content: '确定要删除该乘客吗？',
+		success: (res) => {
+			if (res.confirm) {
+				data.ticketsInfo.passengerList.splice(index, 1)
+			}
+		}
+	})
+}
+
+/**
+ * 添加乘客
+ */
+const addPassenger = () => {
+	const oldPassenger = data.ticketsInfo.passengerList[data.ticketsInfo.passengerList.length - 1]
+	const newPassenger = {
+		name: '新乘客',
+		type: oldPassenger.type || '成人票',
+		seatType: oldPassenger.seatType || '二等座',
+		carriage: oldPassenger.carriage || '01',
+		seatNo: '01A',
+		idType: '中国居民身份证',
+		price: oldPassenger.price || '0',
+		status: '已支付',
+		isMe: false
+	}
+	data.ticketsInfo.passengerList.push(newPassenger)
+}
+
+/**
+ * 获取选择器日期
+ * @param {string} dateStr 
+ * @returns {string}
+ */
+const getPickerDate = (dateStr) => {
+	if (!dateStr) return '';
+	// Handle YYYY.MM.DD format
+	if (dateStr.includes('.')) {
+		return dateStr.replace(/\./g, '-');
+	}
+	// Handle MM-DD (prepend year) - logic from before, but mainly for Hotel.
+	// Ticket date is full date YYYY.MM.DD
+	if (dateStr.length <= 5) {
+		const year = new Date().getFullYear();
+		return `${year}-${dateStr}`;
+	}
+	return dateStr;
+}
+
+/**
+ * 切换下单时间
+ * @param {*} e 
+ */
+const onOrderTimeChange = (e) => {
+	const val = e.detail.value;
+	if (val) {
+		data.ticketsInfo.orderInfo.orderTime = val.replace(/-/g, '.');
+	}
+}
+
+/**
+ * 切换乘客类型
+ * @param {*} e 
+ * @param {*} index 
+ */
+const onTicketTypeChange = (e, index) => {
+	const val = e.detail.value;
+	data.ticketsInfo.passengerList[index].type = ticketType[val].label;
+}
+
+/**
+ * 切换出发日期
+ * @param {*} e 
+ */
+const onTicketDateChange = (e) => {
+	const val = e.detail.value; // YYYY-MM-DD
+	if (val) {
+		// Update Date: YYYY.MM.DD
+		data.ticketsInfo.ticketInfo.date = val.replace(/-/g, '.');
+
+		// Update WeekDay
+		const dateObj = new Date(val.replace(/-/g, '/')); // Compatible
+		const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+		data.ticketsInfo.ticketInfo.weekDay = days[dateObj.getDay()];
+	}
+}
+
+/**
+ * 获取时间
+ * @param {string} fullStr 
+ * @returns {string}
+ */
+const getTimeHHMM = (fullStr) => {
+	if (!fullStr) return '';
+	if (fullStr.length > 5) return fullStr.split(' ')[1];
+	return fullStr;
+}
+
+/**
+ * 获取出发时间
+ */
+const departureTimeHHMM = computed(() => {
+	return getTimeHHMM(data.ticketsInfo.ticketInfo.departureTime);
+})
+
+/**
+ * 获取出发时间选择器范围
+ */
+const departureTimeRange = computed(() => {
+	const hours = Array.from({ length: 24 }, (_, i) => i < 10 ? '0' + i : '' + i);
+	const minutes = Array.from({ length: 60 }, (_, i) => i < 10 ? '0' + i : '' + i);
+	return [hours, minutes];
+})
+
+/**
+ * 获取出发时间索引
+ */
+const departureTimeIndex = computed(() => {
+	const timeStr = getTimeHHMM(data.ticketsInfo.ticketInfo.departureTime);
+	if (!timeStr) return [0, 0];
+	const [h, m] = timeStr.split(':');
+	const hours = departureTimeRange.value[0];
+	const minutes = departureTimeRange.value[1];
+	let hIdx = hours.indexOf(h);
+	if (hIdx === -1) hIdx = 0;
+	let mIdx = minutes.indexOf(m);
+	if (mIdx === -1) mIdx = 0;
+	return [hIdx, mIdx];
+})
+
+/**
+ * 获取到达时间日期范围
+ */
+const arrivalRange = computed(() => {
+	const dateStr = data.ticketsInfo.ticketInfo.date; // YYYY.MM.DD
+	const dates = [];
+	if (dateStr) {
+		const baseDate = new Date(dateStr.replace(/\./g, '-').replace(/-/g, '/') + ' 00:00:00');
+		for (let i = 0; i < 4; i++) { // Ticket Date + 3 days
+			const d = new Date(baseDate);
+			d.setDate(d.getDate() + i);
+			const pad = n => n < 10 ? '0' + n : n;
+			dates.push(`${pad(d.getMonth() + 1)}-${pad(d.getDate())}`);
+		}
+	} else {
+		dates.push('MM-DD');
+	}
+	const hours = Array.from({ length: 24 }, (_, i) => i < 10 ? '0' + i : '' + i);
+	const minutes = Array.from({ length: 60 }, (_, i) => i < 10 ? '0' + i : '' + i);
+	return [dates, hours, minutes];
+})
+
+/**
+ * 获取到达时间索引
+ */
+const arrivalIndex = computed(() => {
+	const arrTime = data.ticketsInfo.ticketInfo.arrivalTime;
+	if (!arrTime || arrTime.length < 5) return [0, 0, 0];
+	// Might be HH:mm or MM-DD HH:mm
+	const parts = arrTime.split(' ');
+	let datePart = parts[0];
+	let timePart = parts[1];
+
+	// Handle case where only HH:mm (old data)
+	if (!timePart && datePart.includes(':')) {
+		timePart = datePart;
+		datePart = arrivalRange.value[0][0];
+	}
+
+	if (!timePart) return [0, 0, 0];
+	const [h, m] = timePart.split(':');
+
+	const dates = arrivalRange.value[0];
+	const hours = arrivalRange.value[1];
+	const minutes = arrivalRange.value[2];
+
+	let dateIdx = dates.indexOf(datePart);
+	if (dateIdx === -1) dateIdx = 0;
+
+	let hIdx = hours.indexOf(h);
+	if (hIdx === -1) hIdx = 0;
+
+	let mIdx = minutes.indexOf(m);
+	if (mIdx === -1) mIdx = 0;
+
+	return [dateIdx, hIdx, mIdx];
+})
+
+/**
+ * 切换到达时间
+ * @param {*} e 
+ */
+const onArrivalChange = (e) => {
+	const idxs = e.detail.value;
+	const range = arrivalRange.value;
+	if (!range[0][idxs[0]]) return;
+
+	const dateStr = range[0][idxs[0]];
+	const hStr = range[1][idxs[1]];
+	const mStr = range[2][idxs[2]];
+
+	const newArrTime = `${dateStr} ${hStr}:${mStr}`;
+
+	// Validate: >= Departure
+	const getTs = (str) => {
+		if (!str || str.length <= 5) return 0;
+		const year = new Date().getFullYear();
+		// Robust format: YYYY/MM/DD HH:mm:00
+		return new Date(`${year}/${str.replace(/-/g, '/')}:00`).getTime();
+	}
+
+	const startTs = getTs(data.ticketsInfo.ticketInfo.departureTime);
+	const endTs = getTs(newArrTime);
+
+	if (startTs > 0 && endTs < startTs) {
+		uni.showToast({
+			title: '到达时间不能早于出发时间',
+			icon: 'none'
+		});
+		return;
+	}
+
+	data.ticketsInfo.ticketInfo.arrivalTime = newArrTime;
+	updateDuration();
+}
+
+/**
+ * 切换出发时间
+ * @param e 
+ */
+/**
+ * 切换出发时间
+ * @param e 
+ */
+const onDepartureTimeChange = (e) => {
+	let val = e.detail.value; // Array [hIdx, mIdx]
+
+	// Convert array to HH:mm string
+	if (Array.isArray(val)) {
+		const h = departureTimeRange.value[0][val[0]];
+		const m = departureTimeRange.value[1][val[1]];
+		val = `${h}:${m}`;
+	}
+
+	if (!val) return;
+
+	// Construct New Departure Timestamp
+	// Departure uses Ticket Date
+	const ticketDate = data.ticketsInfo.ticketInfo.date; // YYYY.MM.DD
+	if (!ticketDate) return;
+
+	// Assuming format YYYY.MM.DD
+	const depDateStr = ticketDate.replace(/\./g, '/'); // YYYY/MM/DD
+	const newDepTs = new Date(`${depDateStr} ${val}:00`).getTime();
+
+	// Get Arrival Timestamp
+	const arrStr = data.ticketsInfo.ticketInfo.arrivalTime; // MM-DD HH:mm
+	if (arrStr && arrStr.length > 5) {
+		// Use Ticket Year as base.
+		const ticketYear = ticketDate.split('.')[0];
+		const arrDatePart = arrStr.split(' ')[0]; // MM-DD
+		const arrTimePart = arrStr.split(' ')[1]; // HH:mm
+
+		// Handle Cross Year if Ticket Date is Dec and Arrival is Jan
+		let arrYear = parseInt(ticketYear);
+		const ticketMonth = parseInt(ticketDate.split('.')[1]);
+		const arrMonth = parseInt(arrDatePart.split('-')[0]);
+
+		if (ticketMonth === 12 && arrMonth === 1) {
+			arrYear++;
+		}
+
+		const arrTs = new Date(`${arrYear}/${arrDatePart.replace(/-/g, '/')} ${arrTimePart}:00`).getTime();
+
+		if (newDepTs > arrTs) {
+			uni.showToast({
+				title: '出发时间不能晚于到达时间',
+				icon: 'none'
+			});
+			return;
+		}
+	}
+
+	const dateParts = ticketDate.split('.');
+	let mmdd = `${dateParts[1]}-${dateParts[2]}`;
+	data.ticketsInfo.ticketInfo.departureTime = `${mmdd} ${val}`;
+	updateDuration();
+}
+
+/**
+ * 更新时长
+ */
+const updateDuration = () => {
+	// Helper to parse MM-DD HH:mm to timestamp (using current year)
+	// Safer to use "/" for cross-platform compatibility
+	const getTs = (str) => {
+		if (!str || str.length <= 5) return 0;
+		const year = new Date().getFullYear();
+		// Format: "YYYY/MM/DD HH:mm:00"
+		return new Date(`${year}/${str.replace(/-/g, '/')}:00`).getTime();
+	}
+
+	const start = getTs(data.ticketsInfo.ticketInfo.departureTime);
+	const end = getTs(data.ticketsInfo.ticketInfo.arrivalTime);
+
+	if (start && end && end >= start) {
+		const diffMs = end - start;
+		const diffHrs = Math.floor(diffMs / (1000 * 60 * 60));
+		const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+		data.ticketsInfo.ticketInfo.duration = `${diffHrs}时${diffMins}分`;
+	}
+}
+</script>
+
+<style>
+@import "@/common/main.css";
+
+page {
+	background-color: #F8F8F8;
+	height: 100vh;
+	overflow: hidden;
+}
+</style>
+
+<style lang="less" scoped>
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+.form-content {
+	flex: 1;
+	height: 0;
+	padding: 24rpx;
+	box-sizing: border-box;
+}
+
+.section-container {
+	margin-bottom: 24rpx;
+}
+
+.section-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 24rpx 12rpx 16rpx;
+	background-color: transparent;
+}
+
+.section-title {
+	font-size: 28rpx;
+	color: #666;
+	font-weight: 500;
+}
+
+.card {
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 0 24rpx;
+	margin-bottom: 24rpx;
+	overflow: hidden;
+
+	.card-header-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 24rpx 0 12rpx;
+		border-bottom: 1rpx solid #f5f5f5;
+		margin-bottom: 12rpx;
+	}
+
+	.card-header {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #333;
+	}
+
+	.delete-btn {
+		font-size: 26rpx;
+		color: #FF4D4F;
+		padding: 4rpx 12rpx;
+	}
+}
+
+.form-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24rpx 0;
+	border-bottom: 1rpx solid #F5F5F5;
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	.label {
+		font-size: 30rpx;
+		color: #333;
+		width: 240rpx;
+	}
+
+	.input {
+		flex: 1;
+		font-size: 30rpx;
+		color: #333;
+		text-align: right;
+	}
+}
+
+.add-btn-box {
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 24rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 2rpx dashed #1677FF;
+	margin-bottom: 24rpx;
+
+	.add-text {
+		color: #1677FF;
+		font-size: 30rpx;
+		margin-left: 8rpx;
+	}
+}
+
+.placeholder {
+	height: 60rpx;
+}
+</style>
diff --git a/static/image/other/air-tickets/qunar/banner.png b/static/image/other/air-tickets/qunar/banner.png
new file mode 100644
index 0000000..6210b3c
Binary files /dev/null and b/static/image/other/air-tickets/qunar/banner.png differ
diff --git a/static/image/other/train-tickets/12306-tickets/bottom-bg.png b/static/image/other/train-tickets/12306-tickets/bottom-bg.png
new file mode 100644
index 0000000..3c63fe1
Binary files /dev/null and b/static/image/other/train-tickets/12306-tickets/bottom-bg.png differ
diff --git a/static/image/other/train-tickets/12306-tickets/copy-button.png b/static/image/other/train-tickets/12306-tickets/copy-button.png
new file mode 100644
index 0000000..0231a48
Binary files /dev/null and b/static/image/other/train-tickets/12306-tickets/copy-button.png differ
diff --git a/static/image/other/train-tickets/12306-tickets/hotel-bg.png b/static/image/other/train-tickets/12306-tickets/hotel-bg.png
new file mode 100644
index 0000000..6ada860
Binary files /dev/null and b/static/image/other/train-tickets/12306-tickets/hotel-bg.png differ
diff --git a/static/image/other/train-tickets/12306-tickets/qr-code.png b/static/image/other/train-tickets/12306-tickets/qr-code.png
new file mode 100644
index 0000000..9aede36
Binary files /dev/null and b/static/image/other/train-tickets/12306-tickets/qr-code.png differ
diff --git a/static/image/other/train-tickets/12306-tickets/share.png b/static/image/other/train-tickets/12306-tickets/share.png
new file mode 100644
index 0000000..8dce2ab
Binary files /dev/null and b/static/image/other/train-tickets/12306-tickets/share.png differ
diff --git a/static/image/other/train-tickets/12306-tickets/stopover-bg.png b/static/image/other/train-tickets/12306-tickets/stopover-bg.png
new file mode 100644
index 0000000..fb92246
Binary files /dev/null and b/static/image/other/train-tickets/12306-tickets/stopover-bg.png differ