From cfce21f87e722f3f1b81b39753d1768376c5cef7 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Tue, 3 Mar 2026 15:45:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=81=AB=E8=BD=A6=E7=A5=A8app=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.nvue            | 1486 ++++++++++++++---------------
 pages/other/tickets-app/index.vue |  285 +++---
 2 files changed, 905 insertions(+), 866 deletions(-)

diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index 11d5b62..b6e345f 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -16,7 +16,6 @@
 
 		</view>
 		<view class="content-box" :style="{ height: windowHeight + 'px' }">
-
 			<scroll-view scroll-y="true" class="scroll-view"
 				:style="{ height: (windowHeight - statusBarHeight - 44) + 'px', marginTop: (statusBarHeight + 44) + 'px' }"
 				@scroll="handleScroll">
@@ -137,810 +136,811 @@
 	</view>
 </template>
 <script setup>
-import {
-	util,
-	uiUtil
-} from '@/utils/common.js'
-import {
-	storage
-} from '@/utils/storage.js'
-import {
-	get,
-	postJson
-} from '@/utils/requests.js'
-import {
-	ref,
-	reactive,
-	toRefs
-} from 'vue';
+	import {
+		util,
+		uiUtil
+	} from '@/utils/common.js'
+	import {
+		storage
+	} from '@/utils/storage.js'
+	import {
+		get,
+		postJson
+	} from '@/utils/requests.js'
+	import {
+		ref,
+		reactive,
+		toRefs
+	} from 'vue';
 
-import {
-	onLoad,
-	onShow,
-	onHide,
-	onUnload
-} from '@dcloudio/uni-app';
+	import {
+		onLoad,
+		onShow,
+		onHide,
+		onUnload
+	} from '@dcloudio/uni-app';
 
-// 内部埋点方法
-const apiUserEvent = async (type, adminData) => {
-	let uni_version = uni.getStorageSync("version")
-	if (type != 'uni') {
-		await postJson('a', 'api/user/event', {
-			type: adminData.type,
-			key: adminData.type + ".uni.alipay." + adminData.key,
-			value: adminData.value,
-			extra: JSON.stringify({
-				uni_version: uni_version,
-				...adminData.extra
-			}),
+	// 内部埋点方法
+	const apiUserEvent = async (type, adminData) => {
+		let uni_version = uni.getStorageSync("version")
+		if (type != 'uni') {
+			await postJson('a', 'api/user/event', {
+				type: adminData.type,
+				key: adminData.type + ".uni.alipay." + adminData.key,
+				value: adminData.value,
+				extra: JSON.stringify({
+					uni_version: uni_version,
+					...adminData.extra
+				}),
+			})
+		}
+	}
+
+	// 内部跳转充值页方法
+	const goRechargePage = () => {
+		// 进入页面
+		apiUserEvent('all', {
+			type: "event",
+			key: "payment_onload",
+			value: "进入充值页面",
+			extra: {
+				from: "支付宝模拟器首页"
+			}
 		})
-	}
-}
-
-// 内部跳转充值页方法
-const goRechargePage = () => {
-	// 进入页面
-	apiUserEvent('all', {
-		type: "event",
-		key: "payment_onload",
-		value: "进入充值页面",
-		extra: {
-			from: "支付宝模拟器首页"
-		}
-	})
-	uni.navigateTo({
-		url: '/pages/common/recharge/index'
-	});
-}
-
-// 菜单列表
-const menuList = [{
-	icon: "yuemoni",
-	name: "余额模拟",
-	isHot: false,
-	path: "/pages/balance/index"
-},
-{
-	icon: "zhangdanshencheng",
-	name: "账单生成",
-	isHot: false,
-	path: "/pages/bill/bill-list/bill-list"
-},
-{
-	icon: "licaiheika",
-	name: "理财黑卡",
-	isHot: true,
-	path: "/pages/finance-management/index"
-	// path: ""
-},
-{
-	icon: "huabei",
-	name: "花呗",
-	isHot: false,
-	path: "/pages/ant-credit-pay/index"
-},
-]
-
-
-const otherList = [{
-	icon: "/static/image/index/qita/jipiao.png",
-	name: "机票",
-	path: "/pages/other/tickets-app/index"
-},
-{
-	icon: "/static/image/index/qita/huochepiao.png",
-	name: "火车票",
-	path: "/pages/other/train-tickets/12306-tickets/12306-tickets"
-},
-{
-	icon: "/static/image/index/qita/gongzidan.png",
-	name: "工资单",
-	path: "/pages/other/splash/splash"
-},
-{
-	icon: "/static/image/index/qita/shipinqunliao.png",
-	name: "视频群聊",
-	path: "/pages/other/video-group-chat/video-group-chat"
-},
-]
-
-const data = reactive({
-	navBarBgColor: 'transparent',
-	statusBarHeight: 0,
-	windowWidth: 0,
-	windowHeight: 0,
-	userInfo: {},
-	videoHelpList: [],
-	noticeInfo: {},
-	vision: "",
-	platform: '', // 添加平台信息,
-	qqgroup: {}
-})
-
-const {
-	statusBarHeight,
-	windowWidth,
-	windowHeight,
-	userInfo,
-	videoHelpList,
-	noticeInfo,
-	vision,
-	platform,
-	qqgroup
-} = toRefs(data);
-
-/**
- * 处理页面滚动事件
- */
-const handleScroll = (e) => {
-	const scrollTop = e.detail.scrollTop
-	// 滚动超过20px时显示蓝色背景，否则显示透明背景
-	if (scrollTop > 20) {
-		data.navBarBgColor = '#DDF0FD'
-	} else {
-		data.navBarBgColor = 'transparent'
-	}
-}
-
-onLoad(async () => {
-	// 获取平台信息
-	const systemInfo = uni.getSystemInfoSync()
-	data.platform = systemInfo.platform
-	data.vision = uni.getStorageSync('version')
-})
-
-onShow(() => {
-	// 启动时获取数据
-	fetchUserData()
-	// 每次显示时刷新数据
-	setUserData()
-	// 获取系统信息
-	const systemInfo = uni.getSystemInfoSync();
-	data.statusBarHeight = systemInfo.statusBarHeight;
-	data.windowWidth = systemInfo.windowWidth;
-	data.windowHeight = systemInfo.windowHeight;
-	// #ifdef APP-PLUS
-	util.setAndroidSystemBarColor('#F0F4F9')
-	setTimeout(() => {
-		plus.navigator.setStatusBarStyle("dark");
-	}, 500)
-	// #endif
-})
-
-/**
- * 获取用户数据(从服务器)
- */
-const fetchUserData = async () => {
-	try {
-		// 先设置默认值,避免页面显示异常
-		setUserData()
-
-		// 并行获取用户信息和配置
-		const [userResult, configResult] = await Promise.allSettled([
-			fetchUserInfo(),
-			fetchUserConfig()
-		])
-
-		// 处理用户信息结果
-		if (userResult.status === 'fulfilled') {
-			console.log('用户信息获取成功')
-		} else {
-			console.error('获取用户信息失败:', userResult.reason)
-		}
-
-		// 处理用户配置结果
-		if (configResult.status === 'fulfilled') {
-			console.log('用户配置获取成功')
-		} else {
-			console.error('获取用户配置失败:', configResult.reason)
-		}
-
-		// 刷新页面数据
-		setUserData()
-
-		// 检查是否有延迟跳转
-		const jumpTarget = uni.getStorageSync('jumpTarget_url');
-		if (jumpTarget) {
-			console.log('执行延迟跳转:', jumpTarget);
-			uni.removeStorageSync('jumpTarget_url');
-			uni.navigateTo({
-				url: '/' + jumpTarget
-			});
-		}
-	} catch (error) {
-		console.error('获取用户数据异常:', error)
-	}
-}
-
-/**
- * 获取用户信息
- */
-const fetchUserInfo = async () => {
-	const data = await get('', 'api/user', {})
-	if (data.code === 0) {
-		uni.setStorageSync('userInfo', data.data)
-		return data.data
-	} else {
-		throw new Error(data.message || '获取用户信息失败')
-	}
-}
-
-/**
- * 获取用户配置
- */
-const fetchUserConfig = async () => {
-	const data = await get('', 'api/user/config', {})
-	if (data.code === 0) {
-		uni.setStorageSync('config', data.data)
-		return data.data
-	} else {
-		throw new Error(data.message || '获取用户配置失败')
-	}
-}
-
-
-/**
- * 设置用户数据(从本地存储读取)
- */
-const setUserData = () => {
-	// 用户信息 - 提供默认值
-	const userInfoData = storage.get("userInfo")
-	data.userInfo = userInfoData || {
-		user_id: '加载中...',
-		avater: '/static/default-avatar.png',
-		vip: 0,
-		vip_expire: ''
-	}
-
-	// 配置信息 - 安全访问
-	const configData = storage.get("config")
-	if (configData && configData.config) {
-		console.log("公告牌配置信息", configData.config['client.uniapp.notice'])
-		data.noticeInfo = configData.config['client.uniapp.notice'] || {
-			text: '加载中...',
-			url: '',
-			enable: false
-		}
-		data.noticeInfo = configData.config['client.uniapp.notice'] || {
-			text: '加载中...',
-			url: '',
-			enable: false
-		}
-		// 启动走马灯
-		startMarquee();
-		data.videoHelpList = configData.config['client.uniapp.alipay.video_help'] || []
-		// data.videoHelpList.push(configData.config['client.uniapp.alipay.video_help'][0])
-		data.qqgroup = configData.config['client.uniapp.qqgroup'] || {
-			enable: false,
-			number: "",
-			text: ""
-		}
-
-	} else {
-		data.noticeInfo = {
-			text: '加载中...',
-			url: '',
-			enable: false
-		}
-		data.videoHelpList = []
-	}
-}
-
-const clickMenu = (item) => {
-	if (!item.path) {
-		uiUtil.showError('开发中')
-	} else {
-		const isOverdue = storage.get("huabei_info_storage").isOverdue || false
-		let url = item.path
-		if (item.name == "花呗" && isOverdue) {
-			url = "/pages/ant-credit-pay/overdue-payment/overdue-payment"
-		}
-		util.goPage(url)
-	}
-}
-
-
-// 开通vip
-const openVip = () => {
-	goRechargePage()
-}
-
-/**
- * 点击视频教程
- * @param item 
- */
-const clickVideoHelp = (item) => {
-	const url = item.url
-	util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
-}
-
-/**
- * 点击公告
- */
-const clickNotice = () => {
-	console.log("点击公告", noticeInfo.value)
-	if (!noticeInfo.value.url) return
-	const url = noticeInfo.value.url + `&uni_id=${userInfo.value.user_id}`
-	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'
-			});
-		}
-	});
-}
-
-
-/**
- * 退出模拟器
- */
-const exit = () => {
-	console.log("退出模拟器")
-	// 判断是否为 iOS 环境
-	if (uni.getSystemInfoSync().platform === 'ios') {
-		uni.sendNativeEvent('closeUniAPP', "closeUniAPP", ret => {
-			console.log('宿主App回传的数据：' + ret);
+		uni.navigateTo({
+			url: '/pages/common/recharge/index'
 		});
-	} else {
-		plus.runtime.quit();
-	}
-}
-
-const noticeContainer = ref(null);
-const noticeInner = ref(null);
-const noticeBox = ref(null);
-
-// #ifndef H5
-const animation = uni.requireNativePlugin('animation');
-const dom = uni.requireNativePlugin('dom');
-// #endif
-
-let marqueeTimer = null;
-const currentMarqueeId = ref(0);
-const lastMarqueeText = ref('');
-
-/**
- * 开始走马灯
- */
-const startMarquee = () => {
-	// 避免不必要的重置：如果文本没有变化且正在运行，则忽略
-	if (lastMarqueeText.value === noticeInfo.value.text && currentMarqueeId.value > 0) {
-		return;
-	}
-	lastMarqueeText.value = noticeInfo.value.text;
-
-	// 清除待执行的启动定时器
-	if (marqueeTimer) {
-		clearTimeout(marqueeTimer);
-		marqueeTimer = null;
 	}
 
-	// 增加 ID 以使之前的动画循环失效
-	currentMarqueeId.value++;
-	const myId = currentMarqueeId.value;
+	// 菜单列表
+	const menuList = [{
+			icon: "yuemoni",
+			name: "余额模拟",
+			isHot: false,
+			path: "/pages/balance/index"
+		},
+		{
+			icon: "zhangdanshencheng",
+			name: "账单生成",
+			isHot: false,
+			path: "/pages/bill/bill-list/bill-list"
+		},
+		{
+			icon: "licaiheika",
+			name: "理财黑卡",
+			isHot: true,
+			path: "/pages/finance-management/index"
+			// path: ""
+		},
+		{
+			icon: "huabei",
+			name: "花呗",
+			isHot: false,
+			path: "/pages/ant-credit-pay/index"
+		},
+	]
 
-	// 清除旧动画状态 (重置位置)
-	if (noticeInner.value) {
-		animation.transition(noticeInner.value, {
+
+	const otherList = [{
+			icon: "/static/image/index/qita/jipiao.png",
+			name: "机票",
+			path: "/pages/other/tickets-app/index?type=airTicket"
+		},
+		{
+			icon: "/static/image/index/qita/huochepiao.png",
+			name: "火车票",
+			// path: "/pages/other/train-tickets/12306-tickets/12306-tickets"
+			path: "/pages/other/tickets-app/index?type=trainTicket"
+		},
+		{
+			icon: "/static/image/index/qita/gongzidan.png",
+			name: "工资单",
+			path: "/pages/other/splash/splash"
+		},
+		{
+			icon: "/static/image/index/qita/shipinqunliao.png",
+			name: "视频群聊",
+			path: "/pages/other/video-group-chat/video-group-chat"
+		},
+	]
+
+	const data = reactive({
+		navBarBgColor: 'transparent',
+		statusBarHeight: 0,
+		windowWidth: 0,
+		windowHeight: 0,
+		userInfo: {},
+		videoHelpList: [],
+		noticeInfo: {},
+		vision: "",
+		platform: '', // 添加平台信息,
+		qqgroup: {}
+	})
+
+	const {
+		statusBarHeight,
+		windowWidth,
+		windowHeight,
+		userInfo,
+		videoHelpList,
+		noticeInfo,
+		vision,
+		platform,
+		qqgroup
+	} = toRefs(data);
+
+	/**
+	 * 处理页面滚动事件
+	 */
+	const handleScroll = (e) => {
+		const scrollTop = e.detail.scrollTop
+		// 滚动超过20px时显示蓝色背景，否则显示透明背景
+		if (scrollTop > 20) {
+			data.navBarBgColor = '#DDF0FD'
+		} else {
+			data.navBarBgColor = 'transparent'
+		}
+	}
+
+	onLoad(async () => {
+		// 获取平台信息
+		const systemInfo = uni.getSystemInfoSync()
+		data.platform = systemInfo.platform
+		data.vision = uni.getStorageSync('version')
+	})
+
+	onShow(() => {
+		// 启动时获取数据
+		fetchUserData()
+		// 每次显示时刷新数据
+		setUserData()
+		// 获取系统信息
+		const systemInfo = uni.getSystemInfoSync();
+		data.statusBarHeight = systemInfo.statusBarHeight;
+		data.windowWidth = systemInfo.windowWidth;
+		data.windowHeight = systemInfo.windowHeight;
+		// #ifdef APP-PLUS
+		util.setAndroidSystemBarColor('#F0F4F9')
+		setTimeout(() => {
+			plus.navigator.setStatusBarStyle("dark");
+		}, 500)
+		// #endif
+	})
+
+	/**
+	 * 获取用户数据(从服务器)
+	 */
+	const fetchUserData = async () => {
+		try {
+			// 先设置默认值,避免页面显示异常
+			setUserData()
+
+			// 并行获取用户信息和配置
+			const [userResult, configResult] = await Promise.allSettled([
+				fetchUserInfo(),
+				fetchUserConfig()
+			])
+
+			// 处理用户信息结果
+			if (userResult.status === 'fulfilled') {
+				console.log('用户信息获取成功')
+			} else {
+				console.error('获取用户信息失败:', userResult.reason)
+			}
+
+			// 处理用户配置结果
+			if (configResult.status === 'fulfilled') {
+				console.log('用户配置获取成功')
+			} else {
+				console.error('获取用户配置失败:', configResult.reason)
+			}
+
+			// 刷新页面数据
+			setUserData()
+
+			// 检查是否有延迟跳转
+			const jumpTarget = uni.getStorageSync('jumpTarget_url');
+			if (jumpTarget) {
+				console.log('执行延迟跳转:', jumpTarget);
+				uni.removeStorageSync('jumpTarget_url');
+				uni.navigateTo({
+					url: '/' + jumpTarget
+				});
+			}
+		} catch (error) {
+			console.error('获取用户数据异常:', error)
+		}
+	}
+
+	/**
+	 * 获取用户信息
+	 */
+	const fetchUserInfo = async () => {
+		const data = await get('', 'api/user', {})
+		if (data.code === 0) {
+			uni.setStorageSync('userInfo', data.data)
+			return data.data
+		} else {
+			throw new Error(data.message || '获取用户信息失败')
+		}
+	}
+
+	/**
+	 * 获取用户配置
+	 */
+	const fetchUserConfig = async () => {
+		const data = await get('', 'api/user/config', {})
+		if (data.code === 0) {
+			uni.setStorageSync('config', data.data)
+			return data.data
+		} else {
+			throw new Error(data.message || '获取用户配置失败')
+		}
+	}
+
+
+	/**
+	 * 设置用户数据(从本地存储读取)
+	 */
+	const setUserData = () => {
+		// 用户信息 - 提供默认值
+		const userInfoData = storage.get("userInfo")
+		data.userInfo = userInfoData || {
+			user_id: '加载中...',
+			avater: '/static/default-avatar.png',
+			vip: 0,
+			vip_expire: ''
+		}
+
+		// 配置信息 - 安全访问
+		const configData = storage.get("config")
+		if (configData && configData.config) {
+			console.log("公告牌配置信息", configData.config['client.uniapp.notice'])
+			data.noticeInfo = configData.config['client.uniapp.notice'] || {
+				text: '加载中...',
+				url: '',
+				enable: false
+			}
+			data.noticeInfo = configData.config['client.uniapp.notice'] || {
+				text: '加载中...',
+				url: '',
+				enable: false
+			}
+			// 启动走马灯
+			startMarquee();
+			data.videoHelpList = configData.config['client.uniapp.alipay.video_help'] || []
+			// data.videoHelpList.push(configData.config['client.uniapp.alipay.video_help'][0])
+			data.qqgroup = configData.config['client.uniapp.qqgroup'] || {
+				enable: false,
+				number: "",
+				text: ""
+			}
+
+		} else {
+			data.noticeInfo = {
+				text: '加载中...',
+				url: '',
+				enable: false
+			}
+			data.videoHelpList = []
+		}
+	}
+
+	const clickMenu = (item) => {
+		if (!item.path) {
+			uiUtil.showError('开发中')
+		} else {
+			const isOverdue = storage.get("huabei_info_storage").isOverdue || false
+			let url = item.path
+			if (item.name == "花呗" && isOverdue) {
+				url = "/pages/ant-credit-pay/overdue-payment/overdue-payment"
+			}
+			util.goPage(url)
+		}
+	}
+
+
+	// 开通vip
+	const openVip = () => {
+		goRechargePage()
+	}
+
+	/**
+	 * 点击视频教程
+	 * @param item 
+	 */
+	const clickVideoHelp = (item) => {
+		const url = item.url
+		util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
+	}
+
+	/**
+	 * 点击公告
+	 */
+	const clickNotice = () => {
+		console.log("点击公告", noticeInfo.value)
+		if (!noticeInfo.value.url) return
+		const url = noticeInfo.value.url + `&uni_id=${userInfo.value.user_id}`
+		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'
+				});
+			}
+		});
+	}
+
+
+	/**
+	 * 退出模拟器
+	 */
+	const exit = () => {
+		console.log("退出模拟器")
+		// 判断是否为 iOS 环境
+		if (uni.getSystemInfoSync().platform === 'ios') {
+			uni.sendNativeEvent('closeUniAPP', "closeUniAPP", ret => {
+				console.log('宿主App回传的数据：' + ret);
+			});
+		} else {
+			plus.runtime.quit();
+		}
+	}
+
+	const noticeContainer = ref(null);
+	const noticeInner = ref(null);
+	const noticeBox = ref(null);
+
+	// #ifndef H5
+	const animation = uni.requireNativePlugin('animation');
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+
+	let marqueeTimer = null;
+	const currentMarqueeId = ref(0);
+	const lastMarqueeText = ref('');
+
+	/**
+	 * 开始走马灯
+	 */
+	const startMarquee = () => {
+		// 避免不必要的重置：如果文本没有变化且正在运行，则忽略
+		if (lastMarqueeText.value === noticeInfo.value.text && currentMarqueeId.value > 0) {
+			return;
+		}
+		lastMarqueeText.value = noticeInfo.value.text;
+
+		// 清除待执行的启动定时器
+		if (marqueeTimer) {
+			clearTimeout(marqueeTimer);
+			marqueeTimer = null;
+		}
+
+		// 增加 ID 以使之前的动画循环失效
+		currentMarqueeId.value++;
+		const myId = currentMarqueeId.value;
+
+		// 清除旧动画状态 (重置位置)
+		if (noticeInner.value) {
+			animation.transition(noticeInner.value, {
+				styles: {
+					transform: 'translateX(0)'
+				},
+				duration: 0,
+				delay: 0
+			});
+		}
+
+		marqueeTimer = setTimeout(() => {
+			if (!noticeContainer.value || !noticeInner.value) return;
+			// 如果ID不匹配，说明有新的启动请求，放弃当前
+			if (myId !== currentMarqueeId.value) return;
+
+			// 获取容器宽度
+			dom.getComponentRect(noticeContainer.value, (resContainer) => {
+				const containerWidth = resContainer.size.width;
+				if (!containerWidth) return;
+
+				// 获取文本/内部容器宽度
+				dom.getComponentRect(noticeInner.value, (resText) => {
+					const textWidth = resText.size.width / 2; // 因为复制了一份
+					if (!textWidth) return;
+
+					// 执行滚动
+					runMarqueeAnimation(containerWidth, textWidth, myId);
+				});
+			});
+		}, 1000); // 增加延时确保渲染
+	}
+
+	/**
+	 * 执行滚动动画循环
+	 */
+	const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
+		// ID 校验：如果当前ID不匹配，说明已被新动画取代，停止递归
+		if (myId !== currentMarqueeId.value) return;
+		if (!noticeInner.value) return;
+
+		// 动画的目标：移动 Inner 容器
+		const target = noticeInner.value;
+		const realScrollDistance = textWidth;
+
+		// 1. 重置位置到 0 (无感重置)
+		animation.transition(target, {
 			styles: {
-				transform: 'translateX(0)'
+				transform: `translateX(0)`
 			},
 			duration: 0,
 			delay: 0
-		});
-	}
+		}, () => {
+			// 再次校验ID
+			if (myId !== currentMarqueeId.value) return;
 
-	marqueeTimer = setTimeout(() => {
-		if (!noticeContainer.value || !noticeInner.value) return;
-		// 如果ID不匹配，说明有新的启动请求，放弃当前
-		if (myId !== currentMarqueeId.value) return;
+			// 计算时间
+			const speed = 50; // px/s
+			const duration = (realScrollDistance / speed) * 1000;
 
-		// 获取容器宽度
-		dom.getComponentRect(noticeContainer.value, (resContainer) => {
-			const containerWidth = resContainer.size.width;
-			if (!containerWidth) return;
-
-			// 获取文本/内部容器宽度
-			dom.getComponentRect(noticeInner.value, (resText) => {
-				const textWidth = resText.size.width / 2; // 因为复制了一份
-				if (!textWidth) return;
-
-				// 执行滚动
+			// 2. 向左滚动一个文本宽度的距离
+			animation.transition(target, {
+				styles: {
+					transform: `translateX(-${realScrollDistance}px)`
+				},
+				duration: duration,
+				timingFunction: 'linear',
+				delay: 0
+			}, () => {
+				// 3. 循环
 				runMarqueeAnimation(containerWidth, textWidth, myId);
 			});
 		});
-	}, 1000); // 增加延时确保渲染
-}
-
-/**
- * 执行滚动动画循环
- */
-const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
-	// ID 校验：如果当前ID不匹配，说明已被新动画取代，停止递归
-	if (myId !== currentMarqueeId.value) return;
-	if (!noticeInner.value) return;
-
-	// 动画的目标：移动 Inner 容器
-	const target = noticeInner.value;
-	const realScrollDistance = textWidth;
-
-	// 1. 重置位置到 0 (无感重置)
-	animation.transition(target, {
-		styles: {
-			transform: `translateX(0)`
-		},
-		duration: 0,
-		delay: 0
-	}, () => {
-		// 再次校验ID
-		if (myId !== currentMarqueeId.value) return;
-
-		// 计算时间
-		const speed = 50; // px/s
-		const duration = (realScrollDistance / speed) * 1000;
-
-		// 2. 向左滚动一个文本宽度的距离
-		animation.transition(target, {
-			styles: {
-				transform: `translateX(-${realScrollDistance}px)`
-			},
-			duration: duration,
-			timingFunction: 'linear',
-			delay: 0
-		}, () => {
-			// 3. 循环
-			runMarqueeAnimation(containerWidth, textWidth, myId);
-		});
-	});
-}
-
-/**
- * 停止走马灯
- */
-const stopMarquee = () => {
-	// 清除定时器
-	if (marqueeTimer) {
-		clearTimeout(marqueeTimer);
-		marqueeTimer = null;
 	}
-	// 增加ID使其失效
-	currentMarqueeId.value++;
-}
 
-onHide(() => {
-	stopMarquee();
-})
+	/**
+	 * 停止走马灯
+	 */
+	const stopMarquee = () => {
+		// 清除定时器
+		if (marqueeTimer) {
+			clearTimeout(marqueeTimer);
+			marqueeTimer = null;
+		}
+		// 增加ID使其失效
+		currentMarqueeId.value++;
+	}
 
-onUnload(() => {
-	stopMarquee();
-})
+	onHide(() => {
+		stopMarquee();
+	})
+
+	onUnload(() => {
+		stopMarquee();
+	})
 </script>
 <style>
-.container {
-	background-color: #F0F4F9;
-}
+	.container {
+		background-color: #F0F4F9;
+	}
 
-.margin-l-6 {
-	margin-left: 6px;
-}
+	.margin-l-6 {
+		margin-left: 6px;
+	}
 
-.index-bg-img {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 0;
-}
+	.index-bg-img {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 0;
+	}
 
-.nav-bar-box {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 9999;
-	background-color: transparent;
-}
+	.nav-bar-box {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 9999;
+		background-color: transparent;
+	}
 
-.content-box {
-	position: fixed;
-	top: 0rpx;
-	left: 0;
-	right: 0;
-	z-index: 1;
-	background-color: transparent;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
+	.content-box {
+		position: fixed;
+		top: 0rpx;
+		left: 0;
+		right: 0;
+		z-index: 1;
+		background-color: transparent;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
 
 
-::v-deep .uni-scroll-view-content {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
+	::v-deep .uni-scroll-view-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
 
-.status-box {
-	width: 100%;
-}
+	.status-box {
+		width: 100%;
+	}
 
-.nav-box {
-	height: 44px;
-	background-color: transparent;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-}
+	.nav-box {
+		height: 44px;
+		background-color: transparent;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
 
-.left-box {
-	width: 60px;
-	height: 44px;
-	background-color: transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	z-index: 10;
-}
+	.left-box {
+		width: 60px;
+		height: 44px;
+		background-color: transparent;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		z-index: 10;
+	}
 
-.title {
-	flex: 1;
-	height: 44px;
-	font-size: 32rpx;
-	font-weight: 500;
-	color: #1A1A1A;
-	font-weight: bold;
-	background-color: transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	.title {
+		flex: 1;
+		height: 44px;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #1A1A1A;
+		font-weight: bold;
+		background-color: transparent;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.right-box {
-	width: 60px;
-	height: 44px;
-	background-color: transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	.right-box {
+		width: 60px;
+		height: 44px;
+		background-color: transparent;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.user-box {
-	position: relative;
-	margin: 24rpx 32rpx 0;
-	height: 120rpx;
-	z-index: 10;
-}
+	.user-box {
+		position: relative;
+		margin: 24rpx 32rpx 0;
+		height: 120rpx;
+		z-index: 10;
+	}
 
-.user-bg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 120rpx;
-}
+	.user-bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 120rpx;
+	}
 
-.user-info-box {
-	position: absolute;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 32rpx;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 120rpx;
-	z-index: 1;
-}
+	.user-info-box {
+		position: absolute;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 32rpx;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 120rpx;
+		z-index: 1;
+	}
 
-.user-info {
-	flex: 1;
-}
+	.user-info {
+		flex: 1;
+	}
 
-.user-avatar {
-	width: 72rpx;
-	height: 72rpx;
-	border-radius: 50%;
-	margin-right: 20rpx;
-}
+	.user-avatar {
+		width: 72rpx;
+		height: 72rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+	}
 
-.name-box {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
+	.name-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
 
-.phone-text {
-	font-size: 28rpx;
-	color: #FFFFFF;
-	font-weight: bold;
-	margin-right: 12rpx;
-}
+	.phone-text {
+		font-size: 28rpx;
+		color: #FFFFFF;
+		font-weight: bold;
+		margin-right: 12rpx;
+	}
 
-.vip-logo {
-	width: 60rpx;
-	height: 20rpx;
-}
+	.vip-logo {
+		width: 60rpx;
+		height: 20rpx;
+	}
 
-.vip-end-time {
-	font-size: 24rpx;
-	color: #FFFFFF;
-	margin-top: 8rpx;
-}
+	.vip-end-time {
+		font-size: 24rpx;
+		color: #FFFFFF;
+		margin-top: 8rpx;
+	}
 
-.open-vip-btn {
-	height: 40rpx;
-	width: 116rpx;
-}
+	.open-vip-btn {
+		height: 40rpx;
+		width: 116rpx;
+	}
 
-.notice-box {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	margin: 16rpx 32rpx 0;
-	background-color: #FFFFFF;
-	border-radius: 16rpx 16rpx 16rpx 16rpx;
-	padding: 0 16rpx;
-	height: 64rpx;
-	overflow: hidden;
-}
+	.notice-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin: 16rpx 32rpx 0;
+		background-color: #FFFFFF;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+		padding: 0 16rpx;
+		height: 64rpx;
+		overflow: hidden;
+	}
 
-.sound-box {
-	height: 64rpx;
-	width: 50rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	z-index: 10;
-}
+	.sound-box {
+		height: 64rpx;
+		width: 50rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		z-index: 10;
+	}
 
-.notice-content-wrapper {
-	flex: 1;
-	flex-direction: row;
-	overflow: hidden;
-}
+	.notice-content-wrapper {
+		flex: 1;
+		flex-direction: row;
+		overflow: hidden;
+	}
 
-.notice-inner {
-	flex-direction: row;
-	align-items: center;
-}
+	.notice-inner {
+		flex-direction: row;
+		align-items: center;
+	}
 
-.notice-content {
-	font-size: 24rpx;
-	color: #767676;
-}
+	.notice-content {
+		font-size: 24rpx;
+		color: #767676;
+	}
 
-.group-box {
-	margin: 32rpx;
-	margin-bottom: 0;
-}
+	.group-box {
+		margin: 32rpx;
+		margin-bottom: 0;
+	}
 
-.title-img {
-	width: 140rpx;
-	height: 44rpx;
-}
+	.title-img {
+		width: 140rpx;
+		height: 44rpx;
+	}
 
-.video-help-box {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	background-color: #FFFFFF;
-	padding: 24rpx 0;
-	border-radius: 24rpx;
-	margin-top: 16rpx;
-	flex-wrap: wrap;
-	padding-top: 8rpx;
-}
+	.video-help-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #FFFFFF;
+		padding: 24rpx 0;
+		border-radius: 24rpx;
+		margin-top: 16rpx;
+		flex-wrap: wrap;
+		padding-top: 8rpx;
+	}
 
-.video-help-item {
-	margin-top: 16rpx;
-	width: 25%;
-	text-align: center;
-	flex-direction: column;
-	display: flex;
-	align-items: center;
-}
+	.video-help-item {
+		margin-top: 16rpx;
+		width: 25%;
+		text-align: center;
+		flex-direction: column;
+		display: flex;
+		align-items: center;
+	}
 
-.video-help-img {
-	width: 96rpx;
-	height: 96rpx;
-}
+	.video-help-img {
+		width: 96rpx;
+		height: 96rpx;
+	}
 
-.video-help-title {
-	font-size: 24rpx;
-	color: #1A1A1A;
-	text-align: center;
-}
+	.video-help-title {
+		font-size: 24rpx;
+		color: #1A1A1A;
+		text-align: center;
+	}
 
-.menu-box {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	margin-top: 16rpx;
-}
+	.menu-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		margin-top: 16rpx;
+	}
 
-.item-box {
-	position: relative;
-	height: 156rpx;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	margin-bottom: 32rpx;
-}
+	.item-box {
+		position: relative;
+		height: 156rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		margin-bottom: 32rpx;
+	}
 
-.menu-item {
-	display: flex;
-	position: relative;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	background-color: #FFFFFF;
-	border-radius: 16rpx;
-	padding: 16rpx 32rpx;
-	height: 140rpx;
-}
+	.menu-item {
+		display: flex;
+		position: relative;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 16rpx 32rpx;
+		height: 140rpx;
+	}
 
 
-.menu-item-name {
-	font-weight: bold;
-	font-size: 32rpx;
-	color: #000000;
-}
+	.menu-item-name {
+		font-weight: bold;
+		font-size: 32rpx;
+		color: #000000;
+	}
 
-.name-img {
-	height: 28rpx;
-}
+	.name-img {
+		height: 28rpx;
+	}
 
-.hot-icon {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 68rpx;
-	height: 30rpx;
-	z-index: 99;
-}
+	.hot-icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 68rpx;
+		height: 30rpx;
+		z-index: 99;
+	}
 
-.activity-box {
-	margin: 0 32rpx;
-}
+	.activity-box {
+		margin: 0 32rpx;
+	}
 
-.footer-box {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	margin-top: 40rpx;
-	margin-bottom: 10rpx;
-}
+	.footer-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		margin-top: 40rpx;
+		margin-bottom: 10rpx;
+	}
 
-.vision-text {
-	font-size: 24rpx;
-	color: #767676;
-}
+	.vision-text {
+		font-size: 24rpx;
+		color: #767676;
+	}
 
-.ios-padding-bottom {
-	margin-bottom: 50rpx;
-}
+	.ios-padding-bottom {
+		margin-bottom: 50rpx;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/other/tickets-app/index.vue b/pages/other/tickets-app/index.vue
index 8703e41..06dc619 100644
--- a/pages/other/tickets-app/index.vue
+++ b/pages/other/tickets-app/index.vue
@@ -1,153 +1,192 @@
 <template>
 	<view class="container">
-		<NavBar title="选择机票" bgColor="#F0F4F9" isBack></NavBar>
+		<NavBar :title="`选择${type=='airTicket'?'机票':'火车票'}`" bgColor="#F0F4F9" isBack></NavBar>
 
 		<view class="content">
-			<view class="app-card" v-for="(item, index) in appList" :key="index" @click="handleItemClick(item)">
-				<!-- Background Watermark -->
-				<image class="watermark" :src="item.bgImage" mode="heightFix"></image>
+			<template v-for="(item, index) in appList" :key="index">
+				<view class="app-card" v-if="(type=='airTicket'&&item.airPath)||(type=='trainTicket'&&item.trainPath)"
+					@click="handleItemClick(item)">
+					<!-- Background Watermark -->
+					<image class="watermark" :src="item.bgImage" mode="heightFix"></image>
 
-				<!-- Front Content -->
-				<view class="card-left">
-					<view class="logo-box">
-						<image class="logo" :src="item.logo" mode="aspectFit"></image>
-						<!-- Hot Tag for Fliggy -->
-						<view v-if="item.isHot" class="hot-tag">
-							<image style="width: 72rpx;height:32rpx" src="/static/image/index/hot-icon.png"
-								mode="aspectFit"></image>
+					<!-- Front Content -->
+					<view class="card-left">
+						<view class="logo-box">
+							<image class="logo" :src="item.logo" mode="aspectFit"></image>
+							<!-- Hot Tag for Fliggy -->
+							<view v-if="item.isHot" class="hot-tag">
+								<image style="width: 72rpx;height:32rpx" src="/static/image/index/hot-icon.png"
+									mode="aspectFit"></image>
+							</view>
 						</view>
+						<text class="app-name">{{ item.name }}</text>
 					</view>
-					<text class="app-name">{{ item.name }}</text>
-				</view>
 
-				<uni-icons type="right" size="18" color="#CCCCCC"></uni-icons>
-			</view>
+					<uni-icons type="right" size="18" color="#CCCCCC"></uni-icons>
+				</view>
+			</template>
 		</view>
 	</view>
 </template>
 
 <script setup>
-import NavBar from '@/components/nav-bar/nav-bar.vue';
-import { reactive, toRefs, getCurrentInstance } from 'vue';
-import { onLoad } from '@dcloudio/uni-app';
-import { util } from '@/utils/common.js'; // Assuming util exists for navigation, similar to previous tasks
-const {
-	appContext,
-	proxy
-} = getCurrentInstance();
+	import NavBar from '@/components/nav-bar/nav-bar.vue';
+	import {
+		reactive,
+		toRefs,
+		getCurrentInstance,
+		ref
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		util
+	} from '@/utils/common.js'; // Assuming util exists for navigation, similar to previous tasks
+	const {
+		appContext,
+		proxy
+	} = getCurrentInstance();
 
-const appList = [
-	{
-		name: '去哪儿APP',
-		logo: '/static/image/other/tickets-app/qvnar-logo.png',
-		bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
-		path: '/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets',
-		isHot: false
-	},
-	{
-		name: '飞猪APP',
-		logo: '/static/image/other/tickets-app/fliggy-logo.png',
-		bgImage: '/static/image/other/tickets-app/fliggy-bg.png',
-		path: '/pages/other/air-tickets/fliggy-air-tickets/fliggy-air-tickets',
-		isHot: true
-	},
-	{
-		name: '携程APP',
-		logo: '/static/image/other/tickets-app/trip-com-logo.png',
-		bgImage: '/static/image/other/tickets-app/trip-com-bg.png',
-		path: '/pages/other/air-tickets/ctrip-air-tickets/ctrip-air-tickets',
-		isHot: false
-	},
-	// {
-	// 	name: '铁路12306',
-	// 	logo: '/static/image/other/tickets-app/12306-logo.png',
-	// 	bgImage: '/static/image/other/tickets-app/12306-bg.png',
-	// 	path: '/pages/other/train-tickets/12306-tickets/12306-tickets',
-	// 	isHot: false
-	// }
-]
+	let type = ref('airTicket')
+
+	const appList = [{
+			name: '去哪儿APP',
+			logo: '/static/image/other/tickets-app/qvnar-logo.png',
+			bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
+			airPath: '/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets',
+			trainPath: "",
+			isHot: false
+		},
+		{
+			name: '飞猪APP',
+			logo: '/static/image/other/tickets-app/fliggy-logo.png',
+			bgImage: '/static/image/other/tickets-app/fliggy-bg.png',
+			airPath: '/pages/other/air-tickets/fliggy-air-tickets/fliggy-air-tickets',
+			trainPath: "",
+			isHot: true
+		},
+		{
+			name: '携程APP',
+			logo: '/static/image/other/tickets-app/trip-com-logo.png',
+			bgImage: '/static/image/other/tickets-app/trip-com-bg.png',
+			airPath: '/pages/other/air-tickets/ctrip-air-tickets/ctrip-air-tickets',
+			trainPath: "",
+			isHot: false
+		},
+		{
+			name: '铁路12306',
+			logo: '/static/image/other/tickets-app/12306-logo.png',
+			bgImage: '/static/image/other/tickets-app/12306-bg.png',
+			airPath: '',
+			trainPath: "/pages/other/train-tickets/12306-tickets/12306-tickets",
+			isHot: false
+		}
+	]
+
+	onLoad((option) => {
+		const appType = option.type
+		if (appType == "trainTicket") {
+			type.value = "trainTicket"
+		} else {
+			type.value = "airTicket"
+			// 进入机票页面埋点
+			proxy.$apiUserEvent('all', {
+				type: 'event',
+				key: 'ticket',
+				prefix: '.uni.other.',
+				value: "机票"
+			})
+		}
 
-onLoad((option) => {
-	// 进入机票页面埋点
-	proxy.$apiUserEvent('all', {
-		type: 'event',
-		key: 'ticket',
-		prefix: '.uni.other.',
-		value: "机票"
 	})
-})
 
-const handleItemClick = (item) => {
-	if (item.path) {
-		util.goPage(item.path)
-	} else {
-		uni.showToast({
-			title: '开发中',
-			icon: 'none'
-		})
+
+	/**
+	 * 跳转火车票/飞机票页面
+	 */
+	const handleItemClick = (item) => {
+		if (type.value == 'trainTicket') {
+			if (item.trainPath) {
+				util.goPage(item.trainPath)
+			} else {
+				uni.showToast({
+					title: '开发中',
+					icon: 'none'
+				})
+			}
+		} else {
+			if (item.airPath) {
+				util.goPage(item.airPath)
+			} else {
+				uni.showToast({
+					title: '开发中',
+					icon: 'none'
+				})
+			}
+		}
+
 	}
-}
-
 </script>
 <style lang="less" scoped>
-.container {
-	min-height: 100vh;
-	background-color: #F0F4F9;
-}
-
-.content {
-	padding: 24rpx;
-}
-
-.app-card {
-	position: relative;
-	background-color: #FFFFFF;
-	border-radius: 20rpx;
-	height: 188rpx;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 24rpx 0 32rpx;
-	margin-bottom: 24rpx;
-	overflow: hidden;
-	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
-
-	.watermark {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		height: 80%;
-		pointer-events: none;
+	.container {
+		min-height: 100vh;
+		background-color: #F0F4F9;
 	}
 
-	.card-left {
+	.content {
+		padding: 24rpx;
+	}
+
+	.app-card {
+		position: relative;
+		background-color: #FFFFFF;
+		border-radius: 20rpx;
+		height: 188rpx;
 		display: flex;
 		align-items: center;
-		z-index: 1;
+		justify-content: space-between;
+		padding: 0 24rpx 0 32rpx;
+		margin-bottom: 24rpx;
+		overflow: hidden;
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
 
-		.logo-box {
-			position: relative;
-			margin-right: 28rpx;
-
-			.logo {
-				width: 108rpx;
-				height: 108rpx;
-				border-radius: 16rpx;
-				display: block; // Remove extra space
-			}
-
-			.hot-tag {
-				position: absolute;
-				top: -12rpx;
-				right: -30rpx;
-			}
+		.watermark {
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			height: 80%;
+			pointer-events: none;
 		}
 
-		.app-name {
-			font-size: 36rpx;
-			color: #3D3D3D;
-			font-weight: 500;
+		.card-left {
+			display: flex;
+			align-items: center;
+			z-index: 1;
+
+			.logo-box {
+				position: relative;
+				margin-right: 28rpx;
+
+				.logo {
+					width: 108rpx;
+					height: 108rpx;
+					border-radius: 16rpx;
+					display: block; // Remove extra space
+				}
+
+				.hot-tag {
+					position: absolute;
+					top: -12rpx;
+					right: -30rpx;
+				}
+			}
+
+			.app-name {
+				font-size: 36rpx;
+				color: #3D3D3D;
+				font-weight: 500;
+			}
 		}
 	}
-}
 </style>
\ No newline at end of file