编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>旅游小程序 - 用户端原型</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: 70px; }

/* 页面容器 */
.page { display: none; padding-bottom: 20px; }
.page.active { display: block; }

/* 图片卡片通用样式 - 带fallback */
.img-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.img-card::before {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  z-index: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.img-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 首页 */
.home-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 15px 60px; position: relative; }
.home-header .search-bar { background: white; border-radius: 25px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; margin-top: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.home-header .search-bar input { border: none; flex: 1; font-size: 14px; outline: none; }
.home-header .search-bar svg { width: 20px; height: 20px; color: #999; }

.banner-section { margin: -50px 15px 15px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.banner-img { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold; position: relative; overflow: hidden; background: linear-gradient(135deg, #ff9a56 0%, #ff6a00 100%); }
.banner-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.banner-img .banner-text { position: relative; z-index: 2; background: rgba(0,0,0,0.4); padding: 8px 16px; border-radius: 20px; }

.section-title { padding: 20px 15px 10px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 16px; }
.section-title span { color: #666; font-size: 12px; font-weight: normal; }

.dest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 15px; }
.dest-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s; }
.dest-card:hover { transform: translateY(-2px); }
.dest-card .img-card { width: 100%; height: 90px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.dest-card .dest-info { padding: 10px; }
.dest-card .dest-name { font-size: 14px; font-weight: bold; }
.dest-card .dest-count { font-size: 12px; color: #999; margin-top: 3px; }

.route-scroll { display: flex; gap: 12px; padding: 0 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.route-scroll::-webkit-scrollbar { display: none; }
.route-card { min-width: 160px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s; }
.route-card:hover { transform: translateY(-2px); }
.route-card .img-card { width: 100%; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.route-card .route-info { padding: 10px; }
.route-card .route-name { font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-card .route-price { color: #ff6a00; font-size: 14px; margin-top: 5px; }
.route-card .route-price small { font-size: 11px; color: #999; text-decoration: line-through; margin-left: 5px; }
.route-card .route-score { font-size: 11px; color: #999; margin-top: 3px; }

/* 底部导航 */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; display: flex; justify-content: space-around; padding: 8px 0 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: #999; transition: color 0.2s; }
.nav-item.active { color: #667eea; }
.nav-item svg { width: 24px; height: 24px; }
.nav-item span { font-size: 10px; }

/* 页面标题栏 */
.page-header { background: white; padding: 15px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 50; }
.back-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.page-title { font-size: 16px; font-weight: bold; flex: 1; }

/* 筛选栏 */
.filter-bar { background: white; padding: 12px 15px; display: flex; gap: 10px; overflow-x: auto; }
.filter-chip { padding: 6px 14px; background: #f0f0f0; border-radius: 15px; font-size: 12px; white-space: nowrap; cursor: pointer; transition: all 0.2s; }
.filter-chip.active { background: #667eea; color: white; }

/* 卡片列表 */
.card-list { padding: 0 15px; display: flex; flex-direction: column; gap: 12px; }
.list-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s; }
.list-card:hover { transform: translateY(-2px); }
.list-card .img-card { width: 100%; height: 150px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.list-card .card-info { padding: 12px; }
.list-card .card-title { font-size: 15px; font-weight: bold; margin-bottom: 8px; }
.list-card .card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.list-card .card-tag { padding: 3px 8px; background: #f0f0f0; border-radius: 3px; font-size: 11px; color: #666; }
.list-card .card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.list-card .card-price { color: #ff6a00; font-size: 16px; }
.list-card .card-price small { font-size: 11px; color: #999; }
.list-card .card-score { font-size: 12px; color: #f5a623; }

/* 详情页 */
.detail-cover { width: 100%; height: 250px; display: flex; align-items: center; justify-content: center; color: white; position: relative; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.detail-cover img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.detail-cover .back-overlay { position: absolute; top: 15px; left: 15px; width: 36px; height: 36px; background: rgba(0,0,0,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }
.detail-cover .cover-content { position: relative; z-index: 5; text-align: center; background: rgba(0,0,0,0.4); padding: 15px 30px; border-radius: 10px; }
.detail-content { background: white; margin: -20px 15px 0; border-radius: 15px; padding: 20px; position: relative; box-shadow: 0 -5px 20px rgba(0,0,0,0.1); }
.detail-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.detail-tag { padding: 4px 10px; background: #f0f0f0; border-radius: 4px; font-size: 11px; }
.detail-meta { display: flex; gap: 20px; font-size: 13px; color: #666; margin-bottom: 15px; }
.detail-price { font-size: 24px; color: #ff6a00; font-weight: bold; }
.detail-price small { font-size: 12px; color: #999; font-weight: normal; }

.book-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 25px; font-size: 16px; font-weight: bold; margin-top: 15px; cursor: pointer; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }

/* 行程安排 */
.itinerary { margin-top: 20px; }
.itinerary-title { font-size: 15px; font-weight: bold; margin-bottom: 12px; padding-left: 10px; border-left: 3px solid #667eea; }
.itinerary-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.itinerary-day { min-width: 45px; text-align: center; }
.itinerary-day .day-num { font-size: 16px; font-weight: bold; color: #667eea; }
.itinerary-day .day-label { font-size: 10px; color: #999; }
.itinerary-content { flex: 1; }
.itinerary-content h4 { font-size: 14px; margin-bottom: 5px; }
.itinerary-content p { font-size: 12px; color: #999; }

/* 门票页面 */
.ticket-tabs { display: flex; background: white; padding: 10px 15px; gap: 20px; border-bottom: 1px solid #f0f0f0; }
.ticket-tab { padding: 8px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
.ticket-tab.active { color: #667eea; border-bottom-color: #667eea; }

.ticket-list { padding: 15px; }
.ticket-card { background: white; border-radius: 12px; padding: 15px; margin-bottom: 12px; display: flex; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; }
.ticket-img { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; position: relative; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.ticket-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ticket-info { flex: 1; }
.ticket-name { font-size: 14px; font-weight: bold; margin-bottom: 5px; }
.ticket-price { color: #ff6a00; font-size: 16px; margin-bottom: 5px; }
.ticket-price small { font-size: 11px; color: #999; }
.ticket-status { font-size: 11px; color: #38ef7d; }

/* 酒店页面 */
.hotel-card { background: white; border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; }
.hotel-img { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; color: white; position: relative; overflow: hidden; background: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%); }
.hotel-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hotel-img .hotel-name-overlay { position: relative; z-index: 5; background: rgba(0,0,0,0.5); padding: 8px 16px; border-radius: 20px; }
.hotel-info { padding: 12px; }
.hotel-name { font-size: 15px; font-weight: bold; margin-bottom: 8px; }
.hotel-meta { display: flex; gap: 10px; font-size: 12px; color: #666; margin-bottom: 8px; }
.hotel-bottom { display: flex; justify-content: space-between; align-items: center; }
.hotel-price { color: #ff6a00; font-size: 18px; }
.hotel-price small { font-size: 11px; color: #999; }
.hotel-score { background: #ff6a00; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; }

/* 订单页面 */
.order-list { padding: 15px; }
.order-card { background: white; border-radius: 12px; padding: 15px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; }
.order-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.order-type { font-size: 14px; font-weight: bold; }
.order-status { font-size: 12px; padding: 3px 10px; border-radius: 10px; }
.order-status.pending { background: #fff3e0; color: #ff9800; }
.order-status.paid { background: #e8f5e9; color: #4caf50; }
.order-status.completed { background: #e3f2fd; color: #2196f3; }
.order-content { display: flex; gap: 12px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
.order-img { width: 60px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 11px; position: relative; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.order-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.order-info { flex: 1; }
.order-info h4 { font-size: 13px; margin-bottom: 5px; }
.order-info p { font-size: 11px; color: #999; }
.order-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
.order-price { color: #ff6a00; font-size: 14px; }
.order-action { padding: 5px 15px; background: #667eea; color: white; border-radius: 15px; font-size: 12px; cursor: pointer; }

/* 攻略页面 */
.strategy-card { background: white; border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; }
.strategy-img { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; color: white; position: relative; overflow: hidden; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.strategy-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.strategy-img .strategy-title-overlay { position: relative; z-index: 5; text-align: center; background: rgba(0,0,0,0.4); padding: 10px 20px; border-radius: 8px; }
.strategy-content { padding: 12px; }
.strategy-title { font-size: 15px; font-weight: bold; margin-bottom: 8px; }
.strategy-meta { display: flex; gap: 15px; font-size: 11px; color: #999; margin-bottom: 10px; }
.strategy-author { display: flex; align-items: center; gap: 8px; }
.strategy-avatar { width: 24px; height: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; object-fit: cover; }

/* 个人中心 */
.profile-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px 20px; display: flex; align-items: center; gap: 15px; }
.profile-avatar { width: 70px; height: 70px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid rgba(255,255,255,0.5); }
.profile-info { flex: 1; }
.profile-name { font-size: 18px; font-weight: bold; margin-bottom: 5px; }
.profile-phone { font-size: 12px; opacity: 0.8; }

.menu-section { margin-top: 15px; }
.menu-group { background: white; margin: 0 15px 12px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.menu-item { display: flex; align-items: center; padding: 15px; gap: 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
.menu-item:last-child { border-bottom: none; }
.menu-icon { width: 36px; height: 36px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.menu-icon svg { width: 20px; height: 20px; color: #666; }
.menu-text { flex: 1; font-size: 14px; }
.menu-arrow { color: #ccc; }

/* 优惠券*/
.coupon-list { padding: 15px; }
.coupon-card { background: linear-gradient(135deg, #ff6a00 0%, #ff9a56 100%); color: white; border-radius: 12px; padding: 15px; margin-bottom: 12px; display: flex; align-items: center; cursor: pointer; }
.coupon-value { font-size: 28px; font-weight: bold; margin-right: 15px; }
.coupon-value small { font-size: 12px; }
.coupon-info { flex: 1; }
.coupon-info h4 { font-size: 14px; margin-bottom: 5px; }
.coupon-info p { font-size: 11px; opacity: 0.9; }
.coupon-btn { background: white; color: #ff6a00; padding: 6px 15px; border-radius: 15px; font-size: 12px; font-weight: bold; }

/* 消息列表 */
.message-list { padding: 0; }
.message-item { display: flex; gap: 12px; padding: 15px; background: white; margin-bottom: 1px; cursor: pointer; }
.message-icon { width: 44px; height: 44px; background: #667eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; }
.message-content { flex: 1; }
.message-title { font-size: 14px; font-weight: bold; margin-bottom: 5px; }
.message-desc { font-size: 12px; color: #999; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-time { font-size: 11px; color: #ccc; }

/* 设置页面 */
.settings-group { background: white; margin: 0 15px 12px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.settings-item { display: flex; align-items: center; justify-content: space-between; padding: 15px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
.settings-item:last-child { border-bottom: none; }
.settings-label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.toggle { width: 44px; height: 24px; background: #ccc; border-radius: 12px; position: relative; cursor: pointer; }
.toggle.active { background: #667eea; }
.toggle::after { content: ''; position: absolute; width: 20px; height: 20px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.2s; }
.toggle.active::after { transform: translateX(20px); }

/* 二维码弹窗 */
.qr-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
.qr-modal.show { display: flex; }
.qr-content { background: white; border-radius: 15px; padding: 30px; text-align: center; }
.qr-code { width: 200px; height: 200px; background: #f0f0f0; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.qr-code img { width: 100%; height: 100%; }
.qr-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
.qr-code-num { font-size: 14px; color: #666; margin-bottom: 15px; }
.qr-btn { padding: 10px 30px; background: #667eea; color: white; border: none; border-radius: 20px; font-size: 14px; cursor: pointer; }

/* 收藏页面 */
.collect-tabs { display: flex; background: white; }
.collect-tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
.collect-tab.active { color: #667eea; border-bottom-color: #667eea; }

/* 评论列表 */
.comment-list { padding: 15px; }
.comment-item { display: flex; gap: 12px; margin-bottom: 20px; }
.comment-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.comment-content { flex: 1; }
.comment-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.comment-name { font-size: 13px; font-weight: bold; }
.comment-time { font-size: 11px; color: #999; }
.comment-text { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.comment-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.comment-img { width: 80px; height: 80px; background: #f0f0f0; border-radius: 4px; }
.comment-actions { display: flex; gap: 20px; font-size: 12px; color: #999; }
.comment-action { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* 搜索页面 */
.search-header { background: white; padding: 15px; display: flex; gap: 10px; }
.search-input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 20px; font-size: 14px; outline: none; }
.search-cancel { color: #667eea; font-size: 14px; cursor: pointer; }
.history-section { padding: 15px; }
.history-title { display: flex; justify-content: space-between; margin-bottom: 12px; }
.history-title span { font-size: 14px; font-weight: bold; }
.history-title button { background: none; border: none; color: #999; font-size: 12px; cursor: pointer; }
.history-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.history-tag { padding: 6px 14px; background: #f0f0f0; border-radius: 15px; font-size: 12px; cursor: pointer; }
.hot-tags { margin-top: 15px; }
.hot-tags h4 { font-size: 14px; margin-bottom: 12px; }

/* 支付弹窗 */
.pay-modal { display: none; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; border-radius: 15px 15px 0 0; padding: 20px; z-index: 200; }
.pay-modal.show { display: block; }
.pay-title { font-size: 16px; font-weight: bold; text-align: center; margin-bottom: 20px; }
.pay-amount { font-size: 32px; color: #ff6a00; font-weight: bold; text-align: center; margin-bottom: 20px; }
.pay-method { border: 1px solid #ddd; border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer; }
.pay-method.selected { border-color: #667eea; background: #f8f6ff; }
.pay-icon { width: 40px; height: 40px; background: #07c160; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; }
.pay-name { flex: 1; font-size: 14px; }
.pay-check { width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 50%; }
.pay-method.selected .pay-check { border-color: #667eea; background: #667eea; }
.pay-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 25px; font-size: 16px; font-weight: bold; margin-top: 15px; cursor: pointer; }
.pay-close { text-align: center; color: #999; margin-top: 10px; cursor: pointer; }

/* 动画 */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page.active { animation: fadeIn 0.3s ease; }

/* 页面指示器 */
.page-indicator { position: fixed; top: 15px; right: 15px; z-index: 150; display: flex; gap: 5px; }
.indicator-dot { width: 8px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 50%; cursor: pointer; }
.indicator-dot.active { background: white; }
</style>
</head>
<body>

<!-- 页面指示器 -->
<div class="page-indicator" id="pageIndicator">
  <div class="indicator-dot active"></div>
  <div class="indicator-dot"></div>
  <div class="indicator-dot"></div>
  <div class="indicator-dot"></div>
  <div class="indicator-dot"></div>
</div>

<!-- 首页 -->
<div class="page active" id="page-home">
  <div class="home-header">
    <div style="font-size: 20px; font-weight: bold;">旅游小程序</div>
    <div class="search-bar" onclick="showPage('search')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
      <input type="text" placeholder="搜索线路、目的地" readonly>
    </div>
  </div>
  
  <div class="banner-section" onclick="showPage('route-detail')">
    <div class="banner-img">
      <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="丽江" onerror="this.style.display='none'">
      <div class="banner-text">🏖️ 云南丽江5日游 · 特惠来袭</div>
    </div>
  </div>
  
  <div class="section-title">
    热门目的地
    <span onclick="showPage('route-list')">查看更多 ></span>
  </div>
  <div class="dest-grid">
    <div class="dest-card" onclick="showPage('route-list')">
      <div class="img-card" data-title="云南">
        <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="云南" onerror="this.style.display='none'">
      </div>
      <div class="dest-info">
        <div class="dest-name">云南</div>
        <div class="dest-count">1,286条线路</div>
      </div>
    </div>
    <div class="dest-card" onclick="showPage('route-list')">
      <div class="img-card" data-title="三亚">
        <img src="imgs/sanya-beach-hainan-china-tropical-resort-aerial.jpg" alt="三亚" onerror="this.style.display='none'">
      </div>
      <div class="dest-info">
        <div class="dest-name">三亚</div>
        <div class="dest-count">856条线路</div>
      </div>
    </div>
    <div class="dest-card" onclick="showPage('route-list')">
      <div class="img-card" data-title="成都">
        <img src="imgs/chengdu-anshun-bridge-night-cityscape.jpg" alt="成都" onerror="this.style.display='none'">
      </div>
      <div class="dest-info">
        <div class="dest-name">成都</div>
        <div class="dest-count">1,103条线路</div>
      </div>
    </div>
    <div class="dest-card" onclick="showPage('route-list')">
      <div class="img-card" data-title="厦门">
        <img src="imgs/aerial-view-gulangyu-island-xiamen-china.jpg" alt="厦门" onerror="this.style.display='none'">
      </div>
      <div class="dest-info">
        <div class="dest-name">厦门</div>
        <div class="dest-count">768条线路</div>
      </div>
    </div>
  </div>
  
  <div class="section-title">
    热门线路
    <span onclick="showPage('route-list')">查看更多 ></span>
  </div>
  <div class="route-scroll">
    <div class="route-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="丽江">
        <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="丽江">
      </div>
      <div class="route-info">
        <div class="route-name">丽江大理双飞5日游</div>
        <div class="route-price">¥2,680 <small>¥3,280</small></div>
        <div class="route-score">⭐ 4.9 (1,286条评价)</div>
      </div>
    </div>
    <div class="route-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="三亚">
        <img src="imgs/wuzhizhou-island-sanya-beach-resort-aerial.jpg" alt="三亚">
      </div>
      <div class="route-info">
        <div class="route-name">三亚蜈支洲5日亲子游</div>
        <div class="route-price">¥4,580 <small>¥5,980</small></div>
        <div class="route-score">⭐ 4.8 (856条评价)</div>
      </div>
    </div>
    <div class="route-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="九寨沟">
        <img src="imgs/jiuzhaigou-national-park-sichuan-china-nature.jpg" alt="九寨沟">
      </div>
      <div class="route-info">
        <div class="route-name">九寨沟黄龙3日游</div>
        <div class="route-price">¥1,680 <small>¥2,180</small></div>
        <div class="route-score">⭐ 4.7 (623条评价)</div>
      </div>
    </div>
  </div>
</div>

<!-- 搜索页 -->
<div class="page" id="page-search">
  <div class="search-header">
    <input type="text" class="search-input" placeholder="搜索线路、目的地" id="searchInput">
    <span class="search-cancel" onclick="showPage('home')">取消</span>
  </div>
  <div class="history-section">
    <div class="history-title">
      <span>搜索历史</span>
      <button onclick="this.parentElement.parentElement.querySelector('.history-tags').innerHTML=''">清空</button>
    </div>
    <div class="history-tags">
      <span class="history-tag" onclick="document.getElementById('searchInput').value='云南'">云南</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='丽江'">丽江</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='三亚'">三亚</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='亲子游'">亲子游</span>
    </div>
  </div>
  <div class="history-section hot-tags">
    <h4>🔥 热门搜索</h4>
    <div class="history-tags">
      <span class="history-tag" onclick="document.getElementById('searchInput').value='马尔代夫'">马尔代夫</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='巴厘岛'">巴厘岛</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='日本'">日本</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='欧洲'">欧洲</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='海岛'">海岛</span>
      <span class="history-tag" onclick="document.getElementById('searchInput').value='避暑'">避暑</span>
    </div>
  </div>
</div>

<!-- 线路列表页 -->
<div class="page" id="page-route-list">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('home')">←</div>
    <div class="page-title">旅游线路</div>
  </div>
  <div class="filter-bar">
    <span class="filter-chip active">综合排序</span>
    <span class="filter-chip">价格最低</span>
    <span class="filter-chip">评分最高</span>
    <span class="filter-chip">销量最高</span>
  </div>
  <div class="card-list">
    <div class="list-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="丽江大理5日游">
        <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="丽江">
      </div>
      <div class="card-info">
        <div class="card-title">丽江大理双飞5日深度游</div>
        <div class="card-tags">
          <span class="card-tag">纯玩团</span>
          <span class="card-tag">五星酒店</span>
          <span class="card-tag">自由行</span>
        </div>
        <div class="card-bottom">
          <div class="card-price">¥2,680 <small>¥3,280</small></div>
          <div class="card-score">⭐ 4.9 · 1,286人去过</div>
        </div>
      </div>
    </div>
    <div class="list-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="三亚亲子游">
        <img src="imgs/wuzhizhou-island-sanya-beach-resort-aerial.jpg" alt="三亚">
      </div>
      <div class="card-info">
        <div class="card-title">三亚蜈支洲岛5日亲子游</div>
        <div class="card-tags">
          <span class="card-tag">亲子游</span>
          <span class="card-tag">海景房</span>
          <span class="card-tag">含门票</span>
        </div>
        <div class="card-bottom">
          <div class="card-price">¥4,580 <small>¥5,980</small></div>
          <div class="card-score">⭐ 4.8 · 856人去过</div>
        </div>
      </div>
    </div>
    <div class="list-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="九寨沟3日游">
        <img src="imgs/jiuzhaigou-national-park-sichuan-china-nature.jpg" alt="九寨沟">
      </div>
      <div class="card-info">
        <div class="card-title">九寨沟黄龙3日精品游</div>
        <div class="card-tags">
          <span class="card-tag">跟团游</span>
          <span class="card-tag">含餐</span>
        </div>
        <div class="card-bottom">
          <div class="card-price">¥1,680 <small>¥2,180</small></div>
          <div class="card-score">⭐ 4.7 · 623人去过</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 线路详情页 -->
<div class="page" id="page-route-detail">
  <div class="detail-cover">
    <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="丽江" onerror="this.style.display='none'">
    <div class="back-overlay" onclick="showPage('route-list')">←</div>
    <div class="cover-content">
      <div style="font-size:14px;opacity:0.9;">云南 · 丽江</div>
      <div style="font-size:20px;font-weight:bold;margin-top:8px;">丽江大理双飞5日深度游</div>
    </div>
  </div>
  <div class="detail-content">
    <div class="detail-title">丽江大理双飞5日深度游</div>
    <div class="detail-tags">
      <span class="detail-tag">纯玩团</span>
      <span class="detail-tag">五星酒店</span>
      <span class="detail-tag">含往返机票</span>
      <span class="detail-tag">全程包餐</span>
    </div>
    <div class="detail-meta">
      <span>⭐ 4.9分</span>
      <span>1,286条评价</span>
      <span>已售 5,682</span>
    </div>
    <div style="margin-bottom:15px;">
      <span class="detail-price">¥2,680</span>
      <small>起/人</small>
    </div>
    
    <div class="itinerary">
      <div class="itinerary-title">行程安排</div>
      <div class="itinerary-item">
        <div class="itinerary-day">
          <div class="day-num">D1</div>
          <div class="day-label">Day1</div>
        </div>
        <div class="itinerary-content">
          <h4>出发 → 丽江古城</h4>
          <p>乘机前往丽江，抵达后入住古城特色客栈，游览四方街夜景</p>
        </div>
      </div>
      <div class="itinerary-item">
        <div class="itinerary-day">
          <div class="day-num">D2</div>
          <div class="day-label">Day2</div>
        </div>
        <div class="itinerary-content">
          <h4>玉龙雪山一日游</h4>
          <p>乘索道登顶玉龙雪山，游览蓝月谷，观看印象丽江演出</p>
        </div>
      </div>
      <div class="itinerary-item">
        <div class="itinerary-day">
          <div class="day-num">D3</div>
          <div class="day-label">Day3</div>
        </div>
        <div class="itinerary-content">
          <h4>丽江 → 大理</h4>
          <p>乘车前往大理，游览洱海双廊，骑行洱海西岸</p>
        </div>
      </div>
      <div class="itinerary-item">
        <div class="itinerary-day">
          <div class="day-num">D4</div>
          <div class="day-label">Day4</div>
        </div>
        <div class="itinerary-content">
          <h4>大理古城 → 丽江</h4>
          <p>游览大理古城，洋人街，五华楼，返回丽江</p>
        </div>
      </div>
      <div class="itinerary-item">
        <div class="itinerary-day">
          <div class="day-num">D5</div>
          <div class="day-label">Day5</div>
        </div>
        <div class="itinerary-content">
          <h4>丽江 → 返程</h4>
          <p>自由活动，根据航班时间送机，结束愉快旅程</p>
        </div>
      </div>
    </div>
    
    <button class="book-btn" onclick="showPayModal()">立即预订</button>
  </div>
</div>

<!-- 票务预订页 -->
<div class="page" id="page-ticket">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('home')">←</div>
    <div class="page-title">票务预订</div>
  </div>
  <div class="ticket-tabs">
    <div class="ticket-tab active" onclick="switchTicketTab(this, 'ticket-list')">门票</div>
    <div class="ticket-tab" onclick="switchTicketTab(this, 'hotel-list')">酒店</div>
  </div>
  
  <div id="ticket-list-page" class="ticket-list">
    <div class="ticket-card" onclick="showPage('route-detail')">
      <div class="ticket-img">
        <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="古城">
      </div>
      <div class="ticket-info">
        <div class="ticket-name">丽江古城门票</div>
        <div class="ticket-price">¥80 <small>原价¥120</small></div>
        <div class="ticket-status">✓ 随时可退 · 有余票</div>
      </div>
    </div>
    <div class="ticket-card" onclick="showPage('route-detail')">
      <div class="ticket-img" style="background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <img src="imgs/yulong-snow-mountain-lijiang-china-scenery.jpg" alt="雪山">
      </div>
      <div class="ticket-info">
        <div class="ticket-name">玉龙雪山索道票</div>
        <div class="ticket-price">¥180 <small>原价¥220</small></div>
        <div class="ticket-status">✓ 随时可退 · 有余票</div>
      </div>
    </div>
    <div class="ticket-card" onclick="showPage('route-detail')">
      <div class="ticket-img" style="background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
        <img src="imgs/dali-erhai-lake-yunnan-china-scenery.jpg" alt="大理">
      </div>
      <div class="ticket-info">
        <div class="ticket-name">大理三塔门票</div>
        <div class="ticket-price">¥75 <small>原价¥100</small></div>
        <div class="ticket-status">✓ 随时可退 · 有余票</div>
      </div>
    </div>
    <div class="ticket-card" onclick="showPage('route-detail')">
      <div class="ticket-img" style="background:linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
        <img src="imgs/jiuzhaigou-national-park-sichuan-china-nature.jpg" alt="九寨沟">
      </div>
      <div class="ticket-info">
        <div class="ticket-name">九寨沟门票+观光车</div>
        <div class="ticket-price">¥220 <small>原价¥280</small></div>
        <div class="ticket-status">✓ 随时可退 · 有余票</div>
      </div>
    </div>
  </div>
  
  <div id="hotel-list-page" class="ticket-list" style="display:none;">
    <div class="hotel-card" onclick="showPage('route-detail')">
      <div class="hotel-img">
        <img src="imgs/lijiang-old-town-black-dragon-pool-yunnan-china.jpg" alt="酒店">
        <div class="hotel-name-overlay">🏨 丽江和府洲际酒店</div>
      </div>
      <div class="hotel-info">
        <div class="hotel-name">丽江和府洲际酒店</div>
        <div class="hotel-meta">
          <span>⭐ 4.9</span>
          <span>豪华五星级</span>
          <span>古城内</span>
        </div>
        <div class="hotel-bottom">
          <div class="hotel-price">¥880 <small>起/晚</small></div>
          <div class="hotel-score">9.2分</div>
        </div>
      </div>
    </div>
    <div class="hotel-card" onclick="showPage('route-detail')">
      <div class="hotel-img" style="background:linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
        <img src="imgs/dali-erhai-lake-yunnan-china-scenery.jpg" alt="酒店">
        <div class="hotel-name-overlay">🏨 大理希尔顿酒店</div>
      </div>
      <div class="hotel-info">
        <div class="hotel-name">大理希尔顿酒店</div>
        <div class="hotel-meta">
          <span>⭐ 4.8</span>
          <span>五星级</span>
          <span>洱海边</span>
        </div>
        <div class="hotel-bottom">
          <div class="hotel-price">¥680 <small>起/晚</small></div>
          <div class="hotel-score">9.0分</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 行程管理页 -->
<div class="page" id="page-trip">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('home')">←</div>
    <div class="page-title">我的行程</div>
  </div>
  <div class="filter-bar">
    <span class="filter-chip active">即将出行</span>
    <span class="filter-chip">历史行程</span>
  </div>
  <div class="order-list">
    <div class="order-card" onclick="showPage('route-detail')">
      <div class="order-header">
        <span class="order-type">丽江大理5日游</span>
        <span class="order-status paid">即将出行</span>
      </div>
      <div class="order-content">
        <div class="order-img">
          <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="行程">
        </div>
        <div class="order-info">
          <h4>出发日期：2025-06-01</h4>
          <p>行程天数：5天4晚 · 2人</p>
        </div>
      </div>
      <div class="order-footer">
        <div class="order-price">¥5,360</div>
        <div style="display:flex;gap:8px;">
          <span class="order-action" style="background:#f0f0f0;color:#666;" onclick="event.stopPropagation();showQRModal()">查看核销码</span>
          <span class="order-action" onclick="event.stopPropagation();showPage('trip-detail')">行程详情</span>
        </div>
      </div>
    </div>
    <div class="order-card" onclick="showPage('route-detail')">
      <div class="order-header">
        <span class="order-type">三亚亲子游</span>
        <span class="order-status completed">已完成</span>
      </div>
      <div class="order-content">
        <div class="order-img" style="background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
          <img src="imgs/sanya-beach-hainan-china-tropical-resort-aerial.jpg" alt="行程">
        </div>
        <div class="order-info">
          <h4>出发日期：2025-05-01</h4>
          <p>行程天数：5天4晚 · 3人</p>
        </div>
      </div>
      <div class="order-footer">
        <div class="order-price">¥13,740</div>
        <span class="order-action" style="background:#f0f0f0;color:#666;">查看评价</span>
      </div>
    </div>
  </div>
</div>

<!-- 行程详情页 -->
<div class="page" id="page-trip-detail">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('trip')">←</div>
    <div class="page-title">行程详情</div>
  </div>
  <div style="background:white;margin:15px;padding:20px;border-radius:12px;">
    <div style="font-size:18px;font-weight:bold;margin-bottom:15px;">丽江大理双飞5日深度游</div>
    <div style="display:flex;gap:15px;font-size:13px;color:#666;margin-bottom:15px;">
      <span>📅 6月1日-6月5日</span>
      <span>👥 2人</span>
    </div>
    <div style="font-size:13px;color:#666;margin-bottom:15px;">
      <strong>集合信息：</strong>6月1日早8点，丽江古城南门停车场集合
    </div>
    <div style="font-size:13px;color:#666;margin-bottom:15px;">
      <strong>紧急联系：</strong>导游 李明 138-8888-8888
    </div>
    <div style="border-top:1px solid #f0f0f0;padding-top:15px;">
      <h4 style="font-size:14px;margin-bottom:10px;">📍 行程安排</h4>
      <div style="font-size:12px;color:#666;line-height:1.8;">
        <div>D1：抵达丽江 → 入住古城客栈 → 四方街夜景</div>
        <div>D2：玉龙雪山 → 蓝月谷 → 印象丽江</div>
        <div>D3：丽江 → 大理双廊 → 洱海骑行</div>
        <div>D4：大理古城 → 返回丽江</div>
        <div>D5：自由活动 → 送机返程</div>
      </div>
    </div>
  </div>
  <div style="padding:0 15px;">
    <div class="order-action" style="width:100%;text-align:center;background:#667eea;color:white;" onclick="showQRModal()">查看核销二维码</div>
  </div>
</div>

<!-- 订单管理页 -->
<div class="page" id="page-order">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('home')">←</div>
    <div class="page-title">我的订单</div>
  </div>
  <div class="filter-bar">
    <span class="filter-chip active">全部</span>
    <span class="filter-chip">待支付</span>
    <span class="filter-chip">待出行</span>
    <span class="filter-chip">已完成</span>
    <span class="filter-chip">已取消</span>
  </div>
  <div class="order-list">
    <div class="order-card" onclick="showPage('route-detail')">
      <div class="order-header">
        <span class="order-type">丽江大理5日游</span>
        <span class="order-status pending">待支付</span>
      </div>
      <div class="order-content">
        <div class="order-img">
          <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="订单">
        </div>
        <div class="order-info">
          <h4>订单号：LX20250514001</h4>
          <p>2025-06-01出发 · 2人</p>
        </div>
      </div>
      <div class="order-footer">
        <div class="order-price">¥5,360</div>
        <span class="order-action" style="background:#ff6a00;" onclick="event.stopPropagation();showPayModal()">去支付</span>
      </div>
    </div>
    <div class="order-card" onclick="showPage('route-detail')">
      <div class="order-header">
        <span class="order-type">丽江古城门票 ×2</span>
        <span class="order-status paid">待出行</span>
      </div>
      <div class="order-content">
        <div class="order-img">
          <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="订单">
        </div>
        <div class="order-info">
          <h4>订单号：MP20250512003</h4>
          <p>2025-05-20使用 · 2张</p>
        </div>
      </div>
      <div class="order-footer">
        <div class="order-price">¥160</div>
        <span class="order-action" style="background:#f0f0f0;color:#666;" onclick="event.stopPropagation();showQRModal()">查看核销码</span>
      </div>
    </div>
  </div>
</div>

<!-- 攻略分享页 -->
<div class="page" id="page-strategy">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('home')">←</div>
    <div class="page-title">旅游攻略</div>
  </div>
  <div class="filter-bar">
    <span class="filter-chip active">推荐</span>
    <span class="filter-chip">最新</span>
    <span class="filter-chip">云南</span>
    <span class="filter-chip">三亚</span>
    <span class="filter-chip">亲子游</span>
  </div>
  <div style="padding:15px;">
    <div class="strategy-card" onclick="showPage('strategy-detail')">
      <div class="strategy-img">
        <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="攻略" onerror="this.style.display='none'">
        <div class="strategy-title-overlay">🏔️ 丽江旅游全攻略</div>
      </div>
      <div class="strategy-content">
        <div class="strategy-title">丽江5日游全攻略｜本地人带你玩转古城</div>
        <div class="strategy-meta">
          <span>👍 2,856 点赞</span>
          <span>💬 326 评论</span>
          <span>👁️ 1.2万 阅读</span>
        </div>
        <div class="strategy-author">
          <div class="strategy-avatar"></div>
          <span style="font-size:12px;color:#666;">旅行家小王</span>
          <span style="font-size:11px;color:#999;margin-left:auto;">2小时前</span>
        </div>
      </div>
    </div>
    <div class="strategy-card" onclick="showPage('strategy-detail')">
      <div class="strategy-img" style="background:linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
        <img src="imgs/sanya-beach-hainan-china-tropical-resort-aerial.jpg" alt="攻略" onerror="this.style.display='none'">
        <div class="strategy-title-overlay">🏖️ 三亚亲子游攻略</div>
      </div>
      <div class="strategy-content">
        <div class="strategy-title">带娃必看！三亚5天4晚亲子游详细攻略</div>
        <div class="strategy-meta">
          <span>👍 1,563 点赞</span>
          <span>💬 208 评论</span>
          <span>👁️ 8,956 阅读</span>
        </div>
        <div class="strategy-author">
          <div class="strategy-avatar" style="background:linear-gradient(135deg, #11998e, #38ef7d);"></div>
          <span style="font-size:12px;color:#666;">辣妈日记</span>
          <span style="font-size:11px;color:#999;margin-left:auto;">昨天</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 攻略详情页 -->
<div class="page" id="page-strategy-detail">
  <div style="height:200px;position:relative;overflow:hidden;background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
    <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="封面" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none'">
    <div class="back-overlay" style="background:rgba(0,0,0,0.3);" onclick="showPage('strategy')">←</div>
    <div style="position:absolute;bottom:20px;left:0;right:0;text-align:center;color:white;">
      <div style="font-size:22px;font-weight:bold;">丽江5日游全攻略</div>
      <div style="font-size:12px;opacity:0.9;margin-top:8px;">本地人带你玩转古城</div>
    </div>
  </div>
  <div style="background:white;margin:-20px 15px 0;padding:20px;border-radius:15px;position:relative;">
    <div class="strategy-author" style="margin-bottom:15px;">
      <div class="strategy-avatar"></div>
      <div>
        <div style="font-size:14px;font-weight:bold;">旅行家小王</div>
        <div style="font-size:11px;color:#999;">发布于 2小时前</div>
      </div>
    </div>
    <div style="font-size:14px;line-height:1.8;color:#333;margin-bottom:20px;">
      <p>作为一个在丽江生活了20年的本地人，今天给大家分享一份超详细的丽江旅游攻略...</p>
      <p style="margin-top:10px;">【交通】从丽江机场到古城可以乘坐机场大巴，20元/人，车程约40分钟...</p>
      <p style="margin-top:10px;">【住宿】推荐住在古城南门附近，交通方便，离四方街也很近...</p>
      <p style="margin-top:10px;">【美食】丽江古城必吃的美食：腊排骨、鸡豆凉粉、纳西烤鱼...</p>
    </div>
    <div class="comment-list" style="padding:0;border-top:1px solid #f0f0f0;padding-top:15px;">
      <h4 style="font-size:14px;margin-bottom:15px;">💬 评论 (326)</h4>
      <div class="comment-item">
        <div class="comment-avatar" style="background:linear-gradient(135deg, #ff6a00, #ff9a56);"></div>
        <div class="comment-content">
          <div class="comment-header">
            <span class="comment-name">小红书达人</span>
            <span class="comment-time">1小时前</span>
          </div>
          <div class="comment-text">太详细了！准备下周去，照着这个攻略走起！</div>
          <div class="comment-actions">
            <span class="comment-action">👍 128</span>
            <span class="comment-action">回复</span>
          </div>
        </div>
      </div>
      <div class="comment-item">
        <div class="comment-avatar" style="background:linear-gradient(135deg, #667eea, #764ba2);"></div>
        <div class="comment-content">
          <div class="comment-header">
            <span class="comment-name">爱旅行的猫</span>
            <span class="comment-time">3小时前</span>
          </div>
          <div class="comment-text">请问腊排骨推荐哪家？</div>
          <div class="comment-actions">
            <span class="comment-action">👍 23</span>
            <span class="comment-action">回复</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 个人中心页 -->
<div class="page" id="page-profile">
  <div class="profile-header">
    <div class="profile-avatar">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
    </div>
    <div class="profile-info">
      <div class="profile-name">张三</div>
      <div class="profile-phone">138****8888</div>
    </div>
  </div>
  
  <div class="menu-section">
    <div class="menu-group">
      <div class="menu-item" onclick="showPage('order')">
        <div class="menu-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="m9 14 2 2 4-4"/></svg>
        </div>
        <div class="menu-text">我的订单</div>
        <span class="menu-arrow">></span>
      </div>
      <div class="menu-item" onclick="showPage('trip')">
        <div class="menu-icon" style="background:#e3f2fd;">
          <svg viewBox="0 0 24 24" fill="none" stroke="#2196f3" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        </div>
        <div class="menu-text">我的行程</div>
        <span class="menu-arrow">></span>
      </div>
      <div class="menu-item" onclick="showPage('collect')">
        <div class="menu-icon" style="background:#fce4ec;">
          <svg viewBox="0 0 24 24" fill="none" stroke="#e91e63" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </div>
        <div class="menu-text">我的收藏</div>
        <span class="menu-arrow">></span>
      </div>
      <div class="menu-item" onclick="showPage('coupon')">
        <div class="menu-icon" style="background:#fff3e0;">
          <svg viewBox="0 0 24 24" fill="none" stroke="#ff9800" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
        </div>
        <div class="menu-text">我的优惠券</div>
        <span class="menu-arrow">></span>
      </div>
    </div>
    
    <div class="menu-group">
      <div class="menu-item" onclick="showPage('message')">
        <div class="menu-icon" style="background:#e8f5e9;">
          <svg viewBox="0 0 24 24" fill="none" stroke="#4caf50" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
        </div>
        <div class="menu-text">消息通知</div>
        <span class="menu-arrow">></span>
      </div>
      <div class="menu-item">
        <div class="menu-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        </div>
        <div class="menu-text">客服咨询</div>
        <span class="menu-arrow">></span>
      </div>
    </div>
    
    <div class="menu-group">
      <div class="menu-item" onclick="showPage('settings')">
        <div class="menu-icon" style="background:#f5f5f5;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
        </div>
        <div class="menu-text">设置</div>
        <span class="menu-arrow">></span>
      </div>
    </div>
  </div>
</div>

<!-- 收藏页 -->
<div class="page" id="page-collect">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('profile')">←</div>
    <div class="page-title">我的收藏</div>
  </div>
  <div class="collect-tabs">
    <div class="collect-tab active" onclick="switchCollectTab(this)">线路 (3)</div>
    <div class="collect-tab" onclick="switchCollectTab(this)">攻略 (5)</div>
  </div>
  <div class="card-list" style="padding-top:15px;">
    <div class="list-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="丽江大理5日游">
        <img src="imgs/lijiang-old-town-yunnan-china-travel.jpg" alt="丽江">
      </div>
      <div class="card-info">
        <div class="card-title">丽江大理双飞5日深度游</div>
        <div class="card-bottom">
          <div class="card-price">¥2,680</div>
          <span style="color:#999;font-size:12px;">2025-05-14</span>
        </div>
      </div>
    </div>
    <div class="list-card" onclick="showPage('route-detail')">
      <div class="img-card" data-title="九寨沟3日游">
        <img src="imgs/jiuzhaigou-national-park-sichuan-china-nature.jpg" alt="九寨沟">
      </div>
      <div class="card-info">
        <div class="card-title">九寨沟黄龙3日精品游</div>
        <div class="card-bottom">
          <div class="card-price">¥1,680</div>
          <span style="color:#999;font-size:12px;">2025-05-10</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 优惠券页 -->
<div class="page" id="page-coupon">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('profile')">←</div>
    <div class="page-title">我的优惠券</div>
  </div>
  <div class="filter-bar">
    <span class="filter-chip active">待使用</span>
    <span class="filter-chip">已使用</span>
    <span class="filter-chip">已过期</span>
  </div>
  <div class="coupon-list">
    <div class="coupon-card" onclick="showPage('home')">
      <div class="coupon-value">¥50<small>券</small></div>
      <div class="coupon-info">
        <h4>新人专享券</h4>
        <p>满200可用 · 限线路产品</p>
        <p style="margin-top:3px;font-size:10px;">有效期至 2025-06-30</p>
      </div>
    </div>
    <div class="coupon-card" style="background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);" onclick="showPage('home')">
      <div class="coupon-value">¥100<small>券</small></div>
      <div class="coupon-info">
        <h4>限时折扣券</h4>
        <p>满500可用 · 全场通用</p>
        <p style="margin-top:3px;font-size:10px;">有效期至 2025-05-31</p>
      </div>
    </div>
  </div>
</div>

<!-- 消息通知页 -->
<div class="page" id="page-message">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('profile')">←</div>
    <div class="page-title">消息通知</div>
  </div>
  <div class="message-list">
    <div class="message-item">
      <div class="message-icon" style="background:#ff6a00;">📦</div>
      <div class="message-content">
        <div class="message-title">订单支付成功</div>
        <div class="message-desc">您的订单LX20250514001已支付成功，订单金额¥5,360</div>
        <div class="message-time">10分钟前</div>
      </div>
    </div>
    <div class="message-item">
      <div class="message-icon" style="background:#4caf50;">🗓️</div>
      <div class="message-content">
        <div class="message-title">行程提醒</div>
        <div class="message-desc">您预定的丽江大理5日游将于6月1日出发，请提前做好准备</div>
        <div class="message-time">2小时前</div>
      </div>
    </div>
    <div class="message-item">
      <div class="message-icon" style="background:#2196f3;">💬</div>
      <div class="message-content">
        <div class="message-title">攻略评论回复</div>
        <div class="message-desc">用户"旅行家小王"回复了您的评论</div>
        <div class="message-time">昨天</div>
      </div>
    </div>
  </div>
</div>

<!-- 设置页 -->
<div class="page" id="page-settings">
  <div class="page-header">
    <div class="back-btn" onclick="showPage('profile')">←</div>
    <div class="page-title">设置</div>
  </div>
  <div class="settings-group">
    <div class="settings-item">
      <div class="settings-label">
        <span>消息通知</span>
      </div>
      <div class="toggle active" onclick="this.classList.toggle('active')"></div>
    </div>
    <div class="settings-item">
      <div class="settings-label">
        <span>行程提醒</span>
      </div>
      <div class="toggle active" onclick="this.classList.toggle('active')"></div>
    </div>
    <div class="settings-item">
      <div class="settings-label">
        <span>营销推送</span>
      </div>
      <div class="toggle" onclick="this.classList.toggle('active')"></div>
    </div>
  </div>
  <div class="settings-group">
    <div class="settings-item" style="cursor:default;">
      <div class="settings-label">
        <span>清除缓存</span>
      </div>
      <span style="color:#999;font-size:12px;">12.5MB</span>
    </div>
    <div class="settings-item">
      <div class="settings-label">
        <span>关于我们</span>
      </div>
      <span class="menu-arrow">></span>
    </div>
    <div class="settings-item">
      <div class="settings-label">
        <span>意见反馈</span>
      </div>
      <span class="menu-arrow">></span>
    </div>
  </div>
  <div style="padding:20px 15px;">
    <div style="width:100%;padding:12px;background:#f0f0f0;color:#666;text-align:center;border-radius:8px;cursor:pointer;">退出登录</div>
  </div>
</div>

<!-- 底部导航 -->
<div class="bottom-nav">
  <div class="nav-item active" onclick="showPage('home')">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <span>首页</span>
  </div>
  <div class="nav-item" onclick="showPage('ticket')">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
    <span>票务</span>
  </div>
  <div class="nav-item" onclick="showPage('trip')">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
    <span>行程</span>
  </div>
  <div class="nav-item" onclick="showPage('strategy')">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
    <span>攻略</span>
  </div>
  <div class="nav-item" onclick="showPage('profile')">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
    <span>我的</span>
  </div>
</div>

<!-- 二维码弹窗 -->
<div class="qr-modal" id="qrModal">
  <div class="qr-content">
    <div class="qr-code">
      <svg width="180" height="180" viewBox="0 0 180 180">
        <rect fill="#fff" width="180" height="180"/>
        <g fill="#000">
          <rect x="10" y="10" width="50" height="50"/><rect x="120" y="10" width="50" height="50"/>
          <rect x="10" y="120" width="50" height="50"/><rect x="70" y="70" width="40" height="40"/>
          <rect x="20" y="20" width="30" height="30" fill="#fff"/><rect x="130" y="20" width="30" height="30" fill="#fff"/>
          <rect x="20" y="130" width="30" height="30" fill="#fff"/><rect x="80" y="80" width="20" height="20" fill="#fff"/>
          <rect x="30" y="30" width="10" height="10"/><rect x="140" y="30" width="10" height="10"/>
          <rect x="30" y="140" width="10" height="10"/><rect x="90" y="90" width="5" height="5"/>
          <rect x="50" y="50" width="5" height="5"/><rect x="60" y="50" width="5" height="5"/>
          <rect x="50" y="60" width="5" height="5"/><rect x="110" y="110" width="10" height="10"/>
          <rect x="120" y="120" width="10" height="10"/><rect x="150" y="150" width="10" height="10"/>
        </g>
      </svg>
    </div>
    <div class="qr-title">核销二维码</div>
    <div class="qr-code-num">LX20250514001</div>
    <div style="font-size:12px;color:#999;margin-bottom:15px;">请在景区入口出示此二维码进行核销</div>
    <button class="qr-btn" onclick="hideQRModal()">确定</button>
  </div>
</div>

<!-- 支付弹窗 -->
<div class="pay-modal" id="payModal">
  <div class="pay-title">确认支付</div>
  <div class="pay-amount">¥2,680</div>
  <div class="pay-method selected" onclick="selectPayMethod(this)">
    <div class="pay-icon">W</div>
    <div class="pay-name">微信支付</div>
    <div class="pay-check"></div>
  </div>
  <div class="pay-method" onclick="selectPayMethod(this)">
    <div style="width:40px;height:40px;background:#1677ff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;">支</div>
    <div class="pay-name">支付宝</div>
    <div class="pay-check"></div>
  </div>
  <button class="pay-btn" onclick="paySuccess()">确认支付</button>
  <div class="pay-close" onclick="hidePayModal()">取消</div>
</div>

<script>
// 页面切换
function showPage(pageId) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.getElementById('page-' + pageId).classList.add('active');
  
  // 更新导航状态
  const navMap = {
    'home': 0, 'ticket': 1, 'trip': 2, 'strategy': 3, 'profile': 4,
    'search': 0, 'route-list': 0, 'route-detail': 0,
    'trip-detail': 2, 'order': 4, 'collect': 4, 'coupon': 4, 'message': 4, 'settings': 4
  };
  document.querySelectorAll('.nav-item').forEach((item, i) => {
    item.classList.toggle('active', i === (navMap[pageId] ?? 0));
  });
  
  // 更新页面指示器
  const pageIndex = ['home', 'ticket', 'trip', 'strategy', 'profile'].indexOf(pageId);
  document.querySelectorAll('.indicator-dot').forEach((dot, i) => {
    dot.classList.toggle('active', i === pageIndex);
  });
}

// 票务Tab切换
function switchTicketTab(el, listId) {
  document.querySelectorAll('.ticket-tab').forEach(t => t.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('ticket-list-page').style.display = listId === 'ticket-list' ? 'block' : 'none';
  document.getElementById('hotel-list-page').style.display = listId === 'hotel-list' ? 'block' : 'none';
}

// 收藏Tab切换
function switchCollectTab(el) {
  document.querySelectorAll('.collect-tab').forEach(t => t.classList.remove('active'));
  el.classList.add('active');
}

// 二维码弹窗
function showQRModal() {
  document.getElementById('qrModal').classList.add('show');
}
function hideQRModal() {
  document.getElementById('qrModal').classList.remove('show');
}

// 支付弹窗
function showPayModal() {
  document.getElementById('payModal').classList.add('show');
}
function hidePayModal() {
  document.getElementById('payModal').classList.remove('show');
}
function selectPayMethod(el) {
  document.querySelectorAll('.pay-method').forEach(m => m.classList.remove('selected'));
  el.classList.add('selected');
}
function paySuccess() {
  hidePayModal();
  alert('支付成功！');
  showPage('order');
}

// 筛选芯片点击
document.querySelectorAll('.filter-chip').forEach(chip => {
  chip.addEventListener('click', function() {
    this.parentElement.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
    this.classList.add('active');
  });
});

// 点击弹窗外部关闭
document.getElementById('qrModal').addEventListener('click', function(e) {
  if (e.target === this) hideQRModal();
});
</script>
</body>
</html>