编辑页面

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:#f5f0eb;color:#333;max-width:430px;margin:0 auto}
.page{display:none;min-height:100vh;padding-bottom:70px}
.page.active{display:block}

/* 首页-团课预约 */
.home-header{background:#d4a574;padding:15px;color:#fff;text-align:center}
.home-header h1{font-size:18px;font-weight:bold}
.home-header .subtitle{font-size:12px;opacity:0.9;margin-top:3px}

/* 日期选择器 */
.date-selector{background:#fff;padding:8px 10px;display:flex;overflow-x:auto;gap:8px;scrollbar-width:none}
.date-selector::-webkit-scrollbar{display:none}
.date-item{min-width:45px;text-align:center;padding:5px 4px;border-radius:8px;cursor:pointer;flex-shrink:0}
.date-item.active{background:#d4a574;color:#fff}
.date-item .day{font-size:10px;color:#999}
.date-item.active .day{color:rgba(255,255,255,0.8)}
.date-item .date{font-size:14px;font-weight:bold;margin-top:1px}
.date-item.active .date{color:#fff}

<!-- 课程卡片 -->
.course-card{background:#fff;margin:10px 15px;border-radius:15px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.06);cursor:pointer}
.course-card .card-bg{height:80px;position:relative;background:linear-gradient(135deg,#e8d5c4,#d4a574)}
.course-card .card-bg .time-tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,0.95);padding:5px 10px;border-radius:5px;font-size:12px;color:#8b6914;font-weight:bold}
.course-card .card-bg .tag{position:absolute;top:10px;right:10px;background:#8b6914;color:#fff;padding:3px 8px;border-radius:3px;font-size:10px}
.course-card .card-body{padding:10px 12px}
.course-card .course-name{font-size:15px;font-weight:bold;color:#333;margin-bottom:5px}
.course-card .course-meta{display:flex;align-items:center;gap:12px;font-size:11px;color:#999;margin-bottom:8px}
.course-card .course-meta .star{color:#f5a623}
.course-card .course-meta .teacher{color:#666}
.course-card .course-meta .condition{color:#c49a6c;font-weight:500}
.course-card .bottom-row{display:flex;align-items:center;justify-content:space-between}
.course-card .book-info{display:flex;align-items:center;gap:8px}
.course-card .book-info .avatars{display:flex}
.course-card .book-info .avatar{width:20px;height:20px;border-radius:50%;background:#e8d5c4;border:2px solid #fff;margin-left:-6px}
.course-card .book-info .avatar:first-child{margin-left:0}
.course-card .book-info .count{font-size:13px;color:#8b6914;font-weight:500}
.course-card .book-btn{padding:6px 18px;border:1.5px solid #d4a574;color:#d4a574;border-radius:20px;font-size:13px;background:#fff}

/* 底部导航 */
.tab-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;display:flex;justify-content:space-around;padding:8px 0;border-top:1px solid #eee;z-index:100}
.tab-item{display:flex;flex-direction:column;align-items:center;font-size:11px;color:#999;cursor:pointer;padding:5px 15px}
.tab-item.active{color:#d4a574}
.tab-item svg{width:24px;height:24px;margin-bottom:3px}

/* 课程详情页 */
.detail-header{position:relative}
.detail-header .bg{width:100%;height:200px;background:linear-gradient(135deg,#e8d5c4,#d4a574);display:flex;align-items:center;justify-content:center;font-size:60px}
.back-btn{position:absolute;top:15px;left:15px;background:rgba(255,255,255,0.9);width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
.detail-content{background:#fff;margin:-30px 15px 15px;padding:20px;border-radius:15px;position:relative}
.detail-content h2{font-size:20px;font-weight:bold;margin-bottom:10px}
.detail-content .meta{font-size:13px;color:#999;margin-bottom:15px}
.detail-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #f5f0eb;font-size:14px}
.detail-row .label{color:#999;width:70px}
.detail-row .value{color:#333}
.detail-row .value.star{color:#f5a623}
.btn-book{display:block;width:100%;background:#d4a574;color:#fff;text-align:center;padding:14px;border-radius:25px;margin-top:20px;border:none;font-size:16px;cursor:pointer}

/* 约课确认弹窗 */
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;justify-content:center;align-items:center}
.modal.show{display:flex}
.modal-content{background:#fff;border-radius:15px;padding:20px;margin:15px;width:calc(100% - 30px);max-width:400px}
.modal-content h3{text-align:center;margin-bottom:15px;color:#d4a574}
.modal-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.modal-btns{display:flex;gap:10px;margin-top:20px}
.modal-btns button{flex:1;padding:12px;border-radius:25px;border:none;font-size:14px;cursor:pointer}
.modal-btns .cancel{background:#eee;color:#666}
.modal-btns .confirm{background:#d4a574;color:#fff}

/* 我的约课页 */
.page-header{background:#d4a574;padding:15px;color:#fff;display:flex;align-items:center}
.page-header .back{width:30px;cursor:pointer;font-size:18px}
.page-header h2{flex:1;text-align:center;font-size:16px}
.filter-tabs{display:flex;background:#fff;padding:12px 15px;gap:10px}
.filter-tabs span{padding:8px 16px;border-radius:20px;font-size:13px;cursor:pointer}
.filter-tabs span.active{background:#d4a574;color:#fff}
.filter-tabs span:not(.active){background:#f5f0eb;color:#666}
.record-item{background:#fff;margin:10px 15px;padding:15px;border-radius:12px}
.record-item .top{display:flex;justify-content:space-between;margin-bottom:8px}
.record-item .course-name{font-size:15px;font-weight:bold}
.record-item .status{padding:4px 10px;border-radius:15px;font-size:12px}
.record-item .status.pending{background:#fff3e0;color:#f5a623}
.record-item .status.done{background:#e8f5e9;color:#4caf50}
.record-item .status.canceled{background:#f5f5f5;color:#999}
.record-item .info{font-size:12px;color:#999}

/* 会员卡页 */
.card-item{background:linear-gradient(135deg,#d4a574,#c49a6c);color:#fff;margin:15px;border-radius:15px;padding:20px;position:relative;overflow:hidden}
.card-item::before{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:rgba(255,255,255,0.1);border-radius:50%}
.card-item .card-type{font-size:13px;opacity:0.9}
.card-item .card-name{font-size:20px;font-weight:bold;margin:8px 0}
.card-item .card-num{font-size:32px;font-weight:bold;margin-top:10px}
.card-item .card-num span{font-size:14px;font-weight:normal}
.card-item .card-expire{font-size:11px;opacity:0.8;margin-top:8px}
.card-item.type2{background:linear-gradient(135deg,#8b7355,#6b5344)}
.menu-section{background:#fff;margin:15px;border-radius:12px}
.menu-section-title{padding:12px 15px;font-size:14px;font-weight:bold;color:#333;border-bottom:1px solid #f5f0eb}
.menu-item{padding:14px 15px;display:flex;align-items:center;cursor:pointer;border-bottom:1px solid #f5f0eb;font-size:14px}
.menu-item:last-child{border-bottom:none}
.menu-item .icon{width:24px;height:24px;margin-right:12px;display:flex;align-items:center;justify-content:center;background:#f5f0eb;border-radius:6px;font-size:14px}
.menu-item .text{flex:1}
.menu-item .arrow{color:#ccc}

/* 课时明细页 */
.stat-row{display:flex;background:#fff;margin:15px;padding:20px;border-radius:12px;justify-content:space-around;text-align:center}
.stat-row .item .num{font-size:28px;font-weight:bold;color:#d4a574}
.stat-row .item .label{font-size:12px;color:#999;margin-top:5px}
.history-list{background:#fff;margin:0 15px 15px;border-radius:12px}
.history-item{padding:15px;border-bottom:1px solid #f5f0eb;font-size:13px}
.history-item:last-child{border-bottom:none}
.history-item .time{color:#999;font-size:11px}
.history-item .content{margin-top:5px;color:#333}
.history-item .balance{font-size:12px;margin-top:5px}
.history-item .balance.add{color:#4caf50}
.history-item .balance.sub{color:#f44336}

/* 个人中心 */
.profile-header{background:linear-gradient(135deg,#d4a574,#c49a6c);padding:30px 15px;color:#fff;text-align:center}
.avatar{width:70px;height:70px;background:#fff;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:30px}
.profile-name{font-size:18px;font-weight:bold}
.profile-phone{font-size:12px;opacity:0.8;margin-top:5px}

/* 消息通知页 */
.notice-item{background:#fff;margin:10px 15px;padding:15px;border-radius:12px}
.notice-item .title{font-size:15px;font-weight:bold;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.notice-item .content{font-size:13px;color:#666;line-height:1.6}
.notice-item .time{font-size:11px;color:#999;margin-top:10px}

/* 购买页 */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:15px}
.product-card{background:#fff;border-radius:12px;padding:20px;text-align:center;border:2px solid transparent}
.product-card.selected{border-color:#d4a574}
.product-card .p-name{font-size:16px;font-weight:bold;color:#333;margin-bottom:8px}
.product-card .p-desc{font-size:12px;color:#999;margin-bottom:12px}
.product-card .p-price{font-size:22px;color:#d4a574;font-weight:bold}
.product-card .p-price span{font-size:14px}
.buy-btn{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);width:calc(100% - 30px);max-width:400px;background:#d4a574;color:#fff;padding:14px;border-radius:25px;border:none;font-size:16px;cursor:pointer}
.buy-info{background:#fff;margin:15px;padding:15px;border-radius:12px;font-size:13px;color:#666;line-height:1.8}

/* 成功提示 */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:#fff;padding:15px 30px;border-radius:10px;font-size:14px;z-index:300;display:none}
.toast.show{display:block}
</style>
</head>
<body>

<!-- 首页-团课 -->
<div id="home" class="page active">
  <div class="home-header">
    <h1>中国舞团课</h1>
    <div class="subtitle">南舞西校区</div>
  </div>
  
  <div class="date-selector">
      <div class="date-item" onclick="selectDate(this)">
        <div class="day">今天</div>
        <div class="date">18</div>
      </div>
      <div class="date-item active" onclick="selectDate(this)">
        <div class="day">周一</div>
        <div class="date">19</div>
      </div>
      <div class="date-item" onclick="selectDate(this)">
        <div class="day">周二</div>
        <div class="date">20</div>
      </div>
      <div class="date-item" onclick="selectDate(this)">
        <div class="day">周三</div>
        <div class="date">21</div>
      </div>
      <div class="date-item" onclick="selectDate(this)">
        <div class="day">周四</div>
        <div class="date">22</div>
      </div>
      <div class="date-item" onclick="selectDate(this)">
        <div class="day">周五</div>
        <div class="date">23</div>
      </div>
      <div class="date-item" onclick="selectDate(this)">
        <div class="day">周六</div>
        <div class="date">24</div>
      </div>
      <div class="date-item" onclick="selectDate(this)">
        <div class="day">周日</div>
        <div class="date">25</div>
      </div>
    </div>
  
  <div class="course-card" onclick="showPage('detail')">
    <div class="card-bg">
      <span class="time-tag">10:00-11:30</span>
      <span class="tag">常规课程</span>
    </div>
    <div class="card-body">
      <div class="course-name">朝鲜族《映山红》3/10</div>
      <div class="course-meta">
        <span class="teacher">肖静</span>
        <span class="condition">满3人开课</span>
        <span class="star">★★★★★</span>
      </div>
      <div class="bottom-row">
        <div class="book-info">
          <div class="avatars">
            <div class="avatar">👤</div>
            <div class="avatar">👤</div>
            <div class="avatar">👤</div>
          </div>
          <span class="count">已约 9/18</span>
        </div>
        <span class="book-btn">预约</span>
      </div>
    </div>
  </div>
  
  <div class="course-card" onclick="showPage('detail')">
    <div class="card-bg" style="background:linear-gradient(135deg,#c9b896,#b5a57e)">
      <span class="time-tag">14:00-15:30</span>
    </div>
    <div class="card-body">
      <div class="course-name">基训C班《明妃曲》</div>
      <div class="course-meta">
        <span class="teacher">李婷</span>
        <span class="condition">满5人开课</span>
        <span class="star">★★</span>
      </div>
      <div class="bottom-row">
        <div class="book-info">
          <div class="avatars">
            <div class="avatar">👤</div>
            <div class="avatar">👤</div>
          </div>
          <span class="count">已约 6/15</span>
        </div>
        <span class="book-btn">预约</span>
      </div>
    </div>
  </div>
  
  <div class="course-card" onclick="showPage('detail')">
    <div class="card-bg" style="background:linear-gradient(135deg,#e6d5c4,#d4c4b0)">
      <span class="time-tag">16:00-17:00</span>
    </div>
    <div class="card-body">
      <div class="course-name">PBT《核心能力训练》</div>
      <div class="course-meta">
        <span class="teacher">王芳</span>
        <span class="condition">满3人开课</span>
        <span class="star">★</span>
      </div>
      <div class="bottom-row">
        <div class="book-info">
          <div class="avatars">
            <div class="avatar">👤</div>
          </div>
          <span class="count">已约 6/15</span>
        </div>
        <span class="book-btn">预约</span>
      </div>
    </div>
  </div>
  
  <div class="course-card" onclick="showPage('detail')">
    <div class="card-bg" style="background:linear-gradient(135deg,#d8c8b8,#c4b4a0)">
      <span class="time-tag">16:00-17:30</span>
    </div>
    <div class="card-body">
      <div class="course-name">身韵巡礼《站气+提沉仰》</div>
      <div class="course-meta">
        <span class="teacher">赵燕</span>
        <span class="condition">满4人开课</span>
        <span class="star">★★</span>
      </div>
      <div class="bottom-row">
        <div class="book-info">
          <span class="count">已约 4/12</span>
        </div>
        <span class="book-btn">预约</span>
      </div>
    </div>
  </div>
</div>

<!-- 课程详情页 -->
<div id="detail" class="page">
  <div class="detail-header">
    <div class="bg">💃</div>
    <div class="back-btn" onclick="showPage('home')">←</div>
  </div>
  <div class="detail-content">
    <h2>朝鲜族《映山红》3/10</h2>
    <div class="meta">常规课程 · 难度 ★★★★★</div>
    
    <div class="detail-row">
      <span class="label">上课时间</span>
      <span class="value">周一 10:00-11:30</span>
    </div>
    <div class="detail-row">
      <span class="label">上课地点</span>
      <span class="value">南舞西校区 · A教室</span>
    </div>
    <div class="detail-row">
      <span class="label">授课老师</span>
      <span class="value">肖静</span>
    </div>
    <div class="detail-row">
      <span class="label">开课条件</span>
      <span class="value">满3人开课</span>
    </div>
    <div class="detail-row">
      <span class="label">已约人数</span>
      <span class="value">9 / 18 人</span>
    </div>
    <div class="detail-row">
      <span class="label">上课须知</span>
      <span class="value">穿着舞蹈服、舞蹈鞋</span>
    </div>
    
    <div style="margin-top:15px;padding:15px;background:#faf7f4;border-radius:10px;font-size:13px;color:#666;line-height:1.6">
      朝鲜族舞蹈《映山红》，学习东北朝鲜族舞蹈风格特点，掌握朝鲜族基本体态、节奏型及呼吸方法。
    </div>
    
    <button class="btn-book" onclick="showModal()">立即预约</button>
  </div>
</div>

<!-- 我的约课页 -->
<div id="records" class="page">
  <div class="page-header">
    <div class="back" onclick="showPage('home')">←</div>
    <h2>我的约课</h2>
    <div style="width:30px"></div>
  </div>
  <div class="filter-tabs">
    <span class="active">全部</span>
    <span>待上课</span>
    <span>已结束</span>
  </div>
  <div class="record-item">
    <div class="top">
      <div class="course-name">朝鲜族《映山红》</div>
      <div class="status pending">待上课</div>
    </div>
    <div class="info">周一 10:00-11:30 · 南舞西校区</div>
  </div>
  <div class="record-item">
    <div class="top">
      <div class="course-name">基训C班《明妃曲》</div>
      <div class="status pending">待上课</div>
    </div>
    <div class="info">周二 14:00-15:30 · 南舞西校区</div>
  </div>
  <div class="record-item">
    <div class="top">
      <div class="course-name">PBT核心能力训练</div>
      <div class="status done">已上课</div>
    </div>
    <div class="info">上周六 16:00-17:00 · 南舞西校区</div>
  </div>
  <div class="record-item">
    <div class="top">
      <div class="course-name">身韵巡礼</div>
      <div class="status canceled">已取消</div>
    </div>
    <div class="info">5月15日 16:00-17:30 · 南舞西校区</div>
  </div>
</div>

<!-- 我的页 -->
<div id="profile" class="page">
  <div class="profile-header">
    <div class="avatar">👤</div>
    <div class="profile-name">王小美</div>
    <div class="profile-phone">138****8888</div>
  </div>
  
  <div class="menu-section">
    <div class="menu-item" onclick="showPage('card')">
      <div class="icon">💳</div>
      <div class="text">我的会员卡</div>
      <div class="arrow">›</div>
    </div>
    <div class="menu-item" onclick="showPage('hours')">
      <div class="icon">📊</div>
      <div class="text">课时明细</div>
      <div class="arrow">›</div>
    </div>
    <div class="menu-item" onclick="showPage('records')">
      <div class="icon">📅</div>
      <div class="text">我的约课</div>
      <div class="arrow">›</div>
    </div>
    <div class="menu-item" onclick="showPage('notice')">
      <div class="icon">🔔</div>
      <div class="text">消息通知</div>
      <div class="arrow">›</div>
    </div>
  </div>
  
  <div class="menu-section">
    <div class="menu-item">
      <div class="icon">👤</div>
      <div class="text">个人信息</div>
      <div class="arrow">›</div>
    </div>
    <div class="menu-item">
      <div class="icon">❓</div>
      <div class="text">帮助与反馈</div>
      <div class="arrow">›</div>
    </div>
    <div class="menu-item">
      <div class="icon">ℹ️</div>
      <div class="text">关于我们</div>
      <div class="arrow">›</div>
    </div>
  </div>
</div>

<!-- 会员卡页 -->
<div id="card" class="page">
  <div class="page-header">
    <div class="back" onclick="showPage('profile')">←</div>
    <h2>我的会员卡</h2>
    <div style="width:30px"></div>
  </div>
  
  <div class="card-item">
    <div class="card-type">次卡</div>
    <div class="card-name">舞蹈通用次卡</div>
    <div class="card-num">8<span> 节</span></div>
    <div class="card-expire">有效期至 2025.12.31</div>
  </div>
  
  <div class="card-item type2">
    <div class="card-type">时效卡</div>
    <div class="card-name">季度畅学卡</div>
    <div class="card-num">45<span> 天</span></div>
    <div class="card-expire">有效期至 2025.08.15</div>
  </div>
  
  <div class="menu-section">
    <div class="menu-section-title">购卡服务</div>
    <div class="menu-item" onclick="showPage('buyTimes')">
      <div class="icon">🎫</div>
      <div class="text">购买次卡</div>
      <div class="arrow">›</div>
    </div>
    <div class="menu-item" onclick="showPage('buyTime')">
      <div class="icon">📆</div>
      <div class="text">购买时效卡</div>
      <div class="arrow">›</div>
    </div>
  </div>
</div>

<!-- 课时明细页 -->
<div id="hours" class="page">
  <div class="page-header">
    <div class="back" onclick="showPage('profile')">←</div>
    <h2>课时明细</h2>
    <div style="width:30px"></div>
  </div>
  <div class="stat-row">
    <div class="item">
      <div class="num">8</div>
      <div class="label">当前剩余</div>
    </div>
    <div class="item">
      <div class="num">15</div>
      <div class="label">累计购买</div>
    </div>
  </div>
  <div class="menu-section-title" style="padding:12px 15px">变动记录</div>
  <div class="history-list">
    <div class="history-item">
      <div class="time">2025.05.17 10:00</div>
      <div class="content">消费 -1节 · 朝鲜族《映山红》</div>
      <div class="balance sub">剩余: 8节</div>
    </div>
    <div class="history-item">
      <div class="time">2025.05.15 14:00</div>
      <div class="content">取消退款 +1节 · 身韵巡礼</div>
      <div class="balance add">剩余: 9节</div>
    </div>
    <div class="history-item">
      <div class="time">2025.05.10 16:00</div>
      <div class="content">消费 -1节 · PBT核心能力训练</div>
      <div class="balance sub">剩余: 8节</div>
    </div>
    <div class="history-item">
      <div class="time">2025.05.01 10:00</div>
      <div class="content">购买 +10节 · 舞蹈通用次卡</div>
      <div class="balance add">剩余: 9节</div>
    </div>
    <div class="history-item">
      <div class="time">2025.04.20 10:00</div>
      <div class="content">赠送 +5节 · 周年庆福利</div>
      <div class="balance add">剩余: 5节</div>
    </div>
  </div>
</div>

<!-- 消息通知页 -->
<div id="notice" class="page">
  <div class="page-header">
    <div class="back" onclick="showPage('profile')">←</div>
    <h2>消息通知</h2>
    <div style="width:30px"></div>
  </div>
  <div class="notice-item">
    <div class="title">🔔 上课提醒</div>
    <div class="content">您明天有课！朝鲜族《映山红》将于明天10:00在南舞西校区A教室上课，请提前10分钟到达。</div>
    <div class="time">今天 09:00</div>
  </div>
  <div class="notice-item">
    <div class="title">✅ 约课成功</div>
    <div class="content">您已成功预约基训C班《明妃曲》，时间：周二 14:00-15:30，地点：南舞西校区。</div>
    <div class="time">昨天 15:30</div>
  </div>
  <div class="notice-item">
    <div class="title">🎁 会员卡到期提醒</div>
    <div class="content">您的季度畅学卡将于30天后到期，届时未使用课时将自动清零，请及时使用。</div>
    <div class="time">3天前</div>
  </div>
  <div class="notice-item">
    <div class="title">ℹ️ 系统通知</div>
    <div class="content">恭喜您获得新人优惠券：首次购卡立减50元，有效期30天。</div>
    <div class="time">1周前</div>
  </div>
</div>

<!-- 购买次卡页 -->
<div id="buyTimes" class="page">
  <div class="page-header">
    <div class="back" onclick="showPage('card')">←</div>
    <h2>购买次卡</h2>
    <div style="width:30px"></div>
  </div>
  <div class="product-grid">
    <div class="product-card selected" onclick="selectProduct(this)">
      <div class="p-name">10次卡</div>
      <div class="p-desc">有效期30天</div>
      <div class="p-price"><span>¥</span>680</div>
    </div>
    <div class="product-card" onclick="selectProduct(this)">
      <div class="p-name">20次卡</div>
      <div class="p-desc">有效期60天</div>
      <div class="p-price"><span>¥</span>1280</div>
    </div>
    <div class="product-card" onclick="selectProduct(this)">
      <div class="p-name">30次卡</div>
      <div class="p-desc">有效期90天</div>
      <div class="p-price"><span>¥</span>1800</div>
    </div>
    <div class="product-card" onclick="selectProduct(this)">
      <div class="p-name">50次卡</div>
      <div class="p-desc">有效期180天</div>
      <div class="p-price"><span>¥</span>2800</div>
    </div>
  </div>
  <div class="buy-info">
    <p><strong>适用课程：</strong>全部舞蹈课程</p>
    <p><strong>使用规则：</strong>不限次数预约，有效期内使用</p>
  </div>
  <button class="buy-btn" onclick="showToast('购买成功！')">立即购买</button>
</div>

<!-- 购买时效卡页 -->
<div id="buyTime" class="page">
  <div class="page-header">
    <div class="back" onclick="showPage('card')">←</div>
    <h2>购买时效卡</h2>
    <div style="width:30px"></div>
  </div>
  <div class="product-grid">
    <div class="product-card selected" onclick="selectProduct(this)">
      <div class="p-name">月卡</div>
      <div class="p-desc">31天有效期</div>
      <div class="p-price"><span>¥</span>599</div>
    </div>
    <div class="product-card" onclick="selectProduct(this)">
      <div class="p-name">季卡</div>
      <div class="p-desc">93天有效期</div>
      <div class="p-price"><span>¥</span>1599</div>
    </div>
    <div class="product-card" onclick="selectProduct(this)">
      <div class="p-name">半年卡</div>
      <div class="p-desc">183天有效期</div>
      <div class="p-price"><span>¥</span>2899</div>
    </div>
    <div class="product-card" onclick="selectProduct(this)">
      <div class="p-name">年卡</div>
      <div class="p-desc">365天有效期</div>
      <div class="p-price"><span>¥</span>4999</div>
    </div>
  </div>
  <div class="buy-info">
    <p><strong>适用课程：</strong>全部舞蹈课程</p>
    <p><strong>每日限制：</strong>最多约2节课</p>
  </div>
  <button class="buy-btn" onclick="showToast('购买成功！')">立即购买</button>
</div>

<!-- 约课确认弹窗 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <h3>确认预约</h3>
    <div class="modal-row">
      <span>课程</span>
      <span>朝鲜族《映山红》</span>
    </div>
    <div class="modal-row">
      <span>时间</span>
      <span>周一 10:00-11:30</span>
    </div>
    <div class="modal-row">
      <span>地点</span>
      <span>南舞西校区A教室</span>
    </div>
    <div class="modal-row">
      <span>消耗课时</span>
      <span style="color:#d4a574">1节</span>
    </div>
    <div class="modal-row">
      <span>当前余额</span>
      <span style="color:#4caf50">8节</span>
    </div>
    <div class="modal-btns">
      <button class="cancel" onclick="closeModal()">取消</button>
      <button class="confirm" onclick="confirmBook()">确认预约</button>
    </div>
  </div>
</div>

<!-- 吐司提示 -->
<div id="toast" class="toast"></div>

<!-- 底部导航 -->
<div class="tab-bar">
  <div class="tab-item active" onclick="showPage('home')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
    首页
  </div>
  <div class="tab-item" onclick="showPage('records')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
    预约
  </div>
  <div class="tab-item" onclick="showPage('profile')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
    我的
  </div>
</div>

<script>
function showPage(id){
  document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
  document.getElementById(id).classList.add('active');
  document.querySelectorAll('.tab-item').forEach(t=>t.classList.remove('active'));
  const tabs=document.querySelectorAll('.tab-item');
  const map={home:0,records:1,profile:2,detail:2,card:2,hours:2,notice:2,buyTimes:2,buyTime:2};
  if(map[id]!==undefined)tabs[map[id]].classList.add('active');
  window.scrollTo(0,0);
}
function selectDate(el){
  document.querySelectorAll('.date-item').forEach(d=>d.classList.remove('active'));
  el.classList.add('active');
}
function showModal(){document.getElementById('modal').classList.add('show');}
function closeModal(){document.getElementById('modal').classList.remove('show');}
function confirmBook(){
  closeModal();
  showToast('预约成功！');
  setTimeout(()=>showPage('records'),1500);
}
function showToast(msg){
  const t=document.getElementById('toast');
  t.textContent=msg;
  t.classList.add('show');
  setTimeout(()=>t.classList.remove('show'),2000);
}
function selectProduct(el){
  document.querySelectorAll('.product-card').forEach(c=>c.classList.remove('selected'));
  el.classList.add('selected');
}
document.querySelectorAll('.filter-tabs span').forEach(tab=>{
  tab.addEventListener('click',function(){
    document.querySelectorAll('.filter-tabs span').forEach(t=>t.classList.remove('active'));
    this.classList.add('active');
  });
});
</script>
</body>
</html>