编辑页面

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, viewport-fit=cover">
    <title>诗词背诵免门票</title>
    <style>
        :root {
            --primary: #FF6B6B;
            --accent: #FF8E53;
            --text-primary: #333333;
            --text-secondary: #666666;
            --text-tertiary: #999999;
            --bg-page: #F5F5F5;
            --bg-card: #FFFFFF;
            --border: #EEEEEE;
            --safe-bottom: env(safe-area-inset-bottom);
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: var(--bg-page);
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
            padding-bottom: calc(50px + var(--safe-bottom));
        }
        .nav-bar {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--bg-card);
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid var(--border);
        }
        .nav-bar .nav-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .page-container {
            padding: 16px;
            padding-bottom: 120px;
        }
        .home-banner {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            border-radius: 16px;
            padding: 24px 20px;
            color: white;
            margin-bottom: 16px;
        }
        .home-banner .title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .home-banner .subtitle {
            font-size: 13px;
            opacity: 0.85;
        }
        .home-banner .poem-preview {
            margin-top: 20px;
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
        }
        .home-banner .poem-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .home-banner .poem-text {
            font-size: 14px;
            line-height: 1.7;
            opacity: 0.9;
        }
        .quick-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        .quick-item {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 20px 12px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: transform 0.15s ease;
            cursor: pointer;
        }
        .quick-item:active {
            transform: scale(0.96);
        }
        .quick-item .icon {
            width: 44px;
            height: 44px;
            margin: 0 auto 10px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .quick-item .icon.green { background: #E8F5E9; }
        .quick-item .icon.orange { background: #FFF3E0; }
        .quick-item .icon.blue { background: #E3F2FD; }
        .quick-item .label {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .rule-card {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .rule-card .rule-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .rule-card .rule-list {
            list-style: none;
        }
        .rule-card .rule-list li {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.8;
            padding-left: 16px;
            position: relative;
        }
        .rule-card .rule-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 5px;
            height: 5px;
            background: var(--primary);
            border-radius: 50%;
        }
        .story-card {
            background: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            margin-bottom: 120px;
        }
        .story-item {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            border-bottom: 1px solid var(--border);
            transition: background 0.15s;
            cursor: pointer;
        }
        .story-item:last-child {
            border-bottom: none;
        }
        .story-item:active {
            background: var(--bg-page);
        }
        .story-item.selected {
            background: #FFF3E0;
        }
        .story-item.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        .story-item .check {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.15s;
        }
        .story-item.selected .check {
            background: var(--primary);
            border-color: var(--primary);
        }
        .story-item.selected .check::after {
            content: "";
            width: 6px;
            height: 10px;
            border-right: 2px solid white;
            border-bottom: 2px solid white;
            transform: rotate(45deg);
            margin-bottom: 4px;
        }
        .story-item .info {
            flex: 1;
        }
        .story-item .name {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .story-item .tag {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            background: var(--bg-page);
        }
        .story-item .tag.easy { background: #E8F5E9; color: #4CAF50; }
        .story-item .tag.medium { background: #FFF3E0; color: #FF9800; }
        .story-item .tag.hard { background: #FFEBEE; color: #F44336; }
        .story-item .preview {
            font-size: 13px;
            color: var(--text-tertiary);
        }
        .fixed-bottom {
            position: fixed;
            bottom: calc(70px + var(--safe-bottom));
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 32px);
            max-width: 398px;
            z-index: 40;
        }
        .btn-primary {
            width: 100%;
            height: 48px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            color: white;
            border: none;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(255,107,107,0.3);
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .btn-primary:active {
            transform: scale(0.98);
        }
        .btn-primary:disabled {
            background: #CCCCCC;
            box-shadow: none;
            cursor: not-allowed;
        }
        .queue-status-card {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            border-radius: 16px;
            padding: 28px;
            color: white;
            text-align: center;
            margin-bottom: 16px;
        }
        .queue-status-card.cancelled {
            background: linear-gradient(135deg, #999999 0%, #777777 100%);
        }
        .queue-status-card .label {
            font-size: 13px;
            opacity: 0.8;
            margin-bottom: 8px;
        }
        .queue-status-card .number {
            font-size: 56px;
            font-weight: 700;
            letter-spacing: 2px;
        }
        .queue-status-card .poem-name {
            font-size: 14px;
            margin-top: 12px;
            opacity: 0.85;
        }
        .queue-info-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        .info-box {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .info-box .value {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
        }
        .info-box .label {
            font-size: 12px;
            color: var(--text-tertiary);
            margin-top: 4px;
        }
        .progress-section {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .progress-section h4 {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-bottom: 12px;
        }
        .progress-bar {
            height: 8px;
            background: var(--bg-page);
            border-radius: 4px;
            overflow: hidden;
        }
        .progress-bar .fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 4px;
            transition: width 0.5s ease;
        }
        .call-list {
            background: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            margin-bottom: 16px;
        }
        .call-list .header {
            padding: 14px 16px;
            font-size: 13px;
            color: var(--text-tertiary);
            border-bottom: 1px solid var(--border);
        }
        .call-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
        }
        .call-item:last-child {
            border-bottom: none;
        }
        .call-item .num {
            width: 44px;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .call-item.current .num {
            color: var(--primary);
            font-weight: 600;
        }
        .call-item .status {
            flex: 1;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .call-item .badge {
            font-size: 11px;
            padding: 3px 10px;
            border-radius: 10px;
        }
        .call-item .badge.calling { background: #FFEBEE; color: #F44336; }
        .call-item .badge.waiting { background: #E3F2FD; color: #2196F3; }
        .action-row {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        .action-btn {
            flex: 1;
            height: 46px;
            border-radius: 23px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: transform 0.15s;
        }
        .action-btn:active {
            transform: scale(0.98);
        }
        .action-btn.cancel {
            background: #f5f5f5;
            color: #666666;
        }
        .action-btn.remind {
            background: #FFF3E0;
            color: #FF9800;
        }
        .action-btn.primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(255,107,107,0.25);
        }
        .profile-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            border-radius: 16px;
            padding: 24px;
            color: white;
            margin-bottom: 16px;
            cursor: pointer;
        }
        .profile-info {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
        }
        .profile-details h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .profile-details p {
            font-size: 12px;
            opacity: 0.75;
        }
        .menu-list {
            background: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            margin-bottom: 16px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.15s;
        }
        .menu-item:last-child {
            border-bottom: none;
        }
        .menu-item:active {
            background: var(--bg-page);
        }
        .menu-item .icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        .menu-item .icon.ticket { background: #FFEBEE; }
        .menu-item .icon.history { background: #E3F2FD; }
        .menu-item .icon.rule { background: #FFF3E0; }
        .menu-item .icon.help { background: #E8F5E9; }
        .menu-item .text {
            flex: 1;
            font-size: 15px;
            color: var(--text-primary);
        }
        .menu-item .arrow {
            color: var(--text-tertiary);
            font-size: 14px;
        }
        .logout-btn {
            width: 100%;
            height: 48px;
            background: var(--bg-card);
            border: none;
            border-radius: 12px;
            font-size: 15px;
            color: #F44336;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .history-card {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .history-card .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .history-card .title {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .history-card .badge {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 12px;
        }
        .history-card .badge.pass { background: #E8F5E9; color: #4CAF50; }
        .history-card .badge.fail { background: #FFEBEE; color: #F44336; }
        .history-card .meta {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: var(--text-tertiary);
        }
        .ticket-card {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            border-radius: 16px;
            padding: 24px;
            color: white;
            margin-bottom: 16px;
        }
        .ticket-card .ticket-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .ticket-card .ticket-title {
            font-size: 18px;
            font-weight: 600;
        }
        .ticket-card .ticket-badge {
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
        }
        .ticket-card .ticket-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        .ticket-card .ticket-label {
            font-size: 12px;
            opacity: 0.75;
        }
        .ticket-card .ticket-value {
            font-size: 14px;
        }
        .ticket-card .divider {
            border-top: 1px dashed rgba(255,255,255,0.3);
            margin: 16px 0;
        }
        .ticket-card .qr-box {
            width: 110px;
            height: 110px;
            background: white;
            border-radius: 12px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .qr-placeholder {
            width: 90px;
            height: 90px;
            background: repeating-linear-gradient(45deg, #333333 0px, #333333 4px, white 4px, white 8px);
            border-radius: 4px;
        }
        .ticket-note {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .ticket-note h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
        }
        .ticket-note ul {
            list-style: none;
        }
        .ticket-note li {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.8;
            padding-left: 14px;
            position: relative;
        }
        .ticket-note li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            width: 4px;
            height: 4px;
            background: var(--text-tertiary);
            border-radius: 50%;
        }
        .notice-card {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .notice-card h4 {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .notice-card ul {
            list-style: none;
        }
        .notice-card li {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.9;
            padding-left: 14px;
            position: relative;
        }
        .notice-card li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 4px;
            height: 4px;
            background: var(--primary);
            border-radius: 50%;
        }
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: var(--bg-card);
            display: flex;
            padding: 6px 0;
            padding-bottom: calc(6px + var(--safe-bottom));
            box-shadow: 0 -1px 0 var(--border);
            z-index: 100;
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 6px 0;
            cursor: pointer;
            color: var(--text-tertiary);
            transition: color 0.15s;
        }
        .tab-item.active {
            color: var(--primary);
        }
        .tab-item .icon {
            font-size: 22px;
            margin-bottom: 2px;
        }
        .tab-item .label {
            font-size: 10px;
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            z-index: 200;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s, visibility 0.25s;
        }
        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background: var(--bg-card);
            border-radius: 20px 20px 0 0;
            width: 100%;
            max-width: 430px;
            padding: 20px 24px calc(24px + var(--safe-bottom));
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        }
        .modal-overlay.show .modal-content {
            transform: translateY(0);
        }
        .modal-handle {
            width: 36px;
            height: 4px;
            background: #DDDDDD;
            border-radius: 2px;
            margin: 0 auto 16px;
        }
        .modal-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            margin-bottom: 16px;
        }
        .modal-poem {
            background: #FFF8F0;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
        }
        .modal-poem .poem-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 8px;
        }
        .modal-poem .poem-text {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.7;
        }
        .modal-btns {
            display: flex;
            gap: 12px;
        }
        .modal-btn {
            flex: 1;
            height: 46px;
            border-radius: 23px;
            font-size: 15px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: transform 0.15s;
        }
        .modal-btn:active {
            transform: scale(0.98);
        }
        .modal-btn.gray {
            background: var(--bg-page);
            color: var(--text-secondary);
        }
        .modal-btn.primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            color: white;
        }
        .success-modal .modal-content {
            text-align: center;
            padding: 32px 24px 28px;
        }
        .success-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
            color: white;
        }
        .success-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .success-sub {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-bottom: 24px;
        }
        .login-modal .modal-content {
            padding: 20px 24px 32px;
        }
        .login-modal .subtitle {
            font-size: 13px;
            color: var(--text-tertiary);
            text-align: center;
            margin-bottom: 20px;
        }
        .login-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .login-btn {
            height: 50px;
            border-radius: 25px;
            font-size: 15px;
            font-weight: 500;
            border: 1px solid var(--border);
            background: var(--bg-card);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.15s;
        }
        .login-btn:active {
            transform: scale(0.98);
        }
        .login-btn.wechat {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            color: white;
            border: none;
        }
        .login-btn.phone {
            color: var(--text-primary);
        }
        .skip-btn {
            background: none;
            border: none;
            color: var(--text-tertiary);
            font-size: 13px;
            padding: 12px;
            cursor: pointer;
        }
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: rgba(0,0,0,0.75);
            color: white;
            padding: 14px 28px;
            border-radius: 10px;
            font-size: 14px;
            z-index: 300;
            opacity: 0;
            transition: opacity 0.2s, transform 0.2s;
            pointer-events: none;
        }
        .toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
        .page-header {
            display: flex;
            align-items: center;
            padding: 16px;
            background: var(--bg-card);
            border-bottom: 1px solid var(--border);
        }
        .page-header .back-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            cursor: pointer;
        }
        .page-header .back-btn::before {
            content: "";
            width: 10px;
            height: 10px;
            border-left: 2px solid var(--text-secondary);
            border-bottom: 2px solid var(--text-secondary);
            transform: rotate(45deg);
        }
        .page-header .page-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }
    </style>
</head>
<body>
    <div class="nav-bar" id="navBar">
        <span class="nav-title" id="navTitle">诗词背诵免门票</span>
    </div>

    <div class="page-container">
        <div id="homePage" class="page active">
            <div class="home-banner">
                <div class="title">诗词背诵免门票</div>
                <div class="subtitle">背诵指定诗词，正确率达90%即可免费入园</div>
                <div class="poem-preview" onclick="showToast('诗词详情')">
                    <div class="poem-title">今日推荐：静夜思</div>
                    <div class="poem-text">床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。</div>
                </div>
            </div>

            <div class="quick-grid">
                <div class="quick-item" id="homeQueueItem" onclick="switchTab('queue')">
                    <div class="icon orange">✎</div>
                    <div class="label" id="homeQueueLabel">取号</div>
                </div>
                <div class="quick-item" onclick="switchTab('my')">
                    <div class="icon blue">★</div>
                    <div class="label">我的门票</div>
                </div>
                <div class="quick-item" onclick="showPage('noticePage')">
                    <div class="icon green">☰</div>
                    <div class="label">活动须知</div>
                </div>
            </div>

            <div class="rule-card">
                <div class="rule-header">
                    <span>★</span> 活动规则
                </div>
                <ul class="rule-list">
                    <li>选择一首诗词进行背诵，正确率达90%即可获得免费门票</li>
                    <li>每位用户每天有3次背诵机会</li>
                    <li>门票有效期为领取后24小时内使用</li>
                    <li>请文明参与，遵守排队秩序</li>
                </ul>
            </div>
        </div>

        <div id="queuePage" class="page">
            <div class="story-card" id="storyCard">
                <div class="story-item selected" onclick="selectStory(this, '静夜思')">
                    <div class="check"></div>
                    <div class="info">
                        <div class="name">静夜思<span class="tag easy">简单</span></div>
                        <div class="preview">床前明月光，疑是地上霜...</div>
                    </div>
                </div>
                <div class="story-item" onclick="selectStory(this, '春晓')">
                    <div class="check"></div>
                    <div class="info">
                        <div class="name">春晓<span class="tag easy">简单</span></div>
                        <div class="preview">春眠不觉晓，处处闻啼鸟...</div>
                    </div>
                </div>
                <div class="story-item" onclick="selectStory(this, '登鹳雀楼')">
                    <div class="check"></div>
                    <div class="info">
                        <div class="name">登鹳雀楼<span class="tag medium">中等</span></div>
                        <div class="preview">白日依山尽，黄河入海流...</div>
                    </div>
                </div>
                <div class="story-item" onclick="selectStory(this, '望庐山瀑布')">
                    <div class="check"></div>
                    <div class="info">
                        <div class="name">望庐山瀑布<span class="tag medium">中等</span></div>
                        <div class="preview">日照香炉生紫烟，遥看瀑布...</div>
                    </div>
                </div>
                <div class="story-item" onclick="selectStory(this, '将进酒')">
                    <div class="check"></div>
                    <div class="info">
                        <div class="name">将进酒<span class="tag hard">困难</span></div>
                        <div class="preview">君不见黄河之水天上来...</div>
                    </div>
                </div>
                <div class="story-item" onclick="selectStory(this, '长恨歌')">
                    <div class="check"></div>
                    <div class="info">
                        <div class="name">长恨歌（节选）<span class="tag hard">困难</span></div>
                        <div class="preview">汉皇重色思倾国，御宇多...</div>
                    </div>
                </div>
            </div>
        </div>

        <div id="queueStatusPage" class="page">
            <div class="queue-status-card" id="queueStatusCard">
                <div class="label">当前暂无排队</div>
                <div class="number" style="font-size:24px">-</div>
                <div class="poem-name">请先取号排队</div>
            </div>
            <div class="queue-info-row" id="queueInfoRow" style="display:none">
                <div class="info-box">
                    <div class="value" id="waitCount">0</div>
                    <div class="label">前方等待人数</div>
                </div>
                <div class="info-box">
                    <div class="value" id="waitTime">约0分钟</div>
                    <div class="label">预计等待时间</div>
                </div>
            </div>
            <div class="progress-section" id="progressSection" style="display:none">
                <h4>当前叫号进度</h4>
                <div class="progress-bar">
                    <div class="fill" id="progressFill" style="width:0%"></div>
                </div>
            </div>
            <div class="call-list" id="callList" style="display:none">
                <div class="header">排队叫号状态</div>
                <div class="call-item current">
                    <span class="num">A018</span>
                    <span class="status">正在背诵</span>
                    <span class="badge calling">叫号中</span>
                </div>
                <div class="call-item">
                    <span class="num">A019</span>
                    <span class="status">准备就绪</span>
                    <span class="badge waiting">等待中</span>
                </div>
                <div class="call-item">
                    <span class="num">A020</span>
                    <span class="status">准备就绪</span>
                    <span class="badge waiting">等待中</span>
                </div>
            </div>
            <div class="action-row" id="actionRow">
                <button class="action-btn primary" onclick="switchTab('queue')">去取号</button>
            </div>
        </div>

        <div id="myPage" class="page">
            <div class="profile-header" onclick="showLoginModal()">
                <div class="profile-info">
                    <div class="avatar">☆</div>
                    <div class="profile-details">
                        <h3 id="userName">点击登录</h3>
                        <p id="userPhone">登录后可查看更多功能</p>
                    </div>
                </div>
            </div>
            <div class="menu-list">
                <div class="menu-item" onclick="showPage('ticketPage')">
                    <div class="icon ticket">★</div>
                    <span class="text">我的门票</span>
                    <span class="arrow">›</span>
                </div>
                <div class="menu-item" onclick="showPage('historyPage')">
                    <div class="icon history">☰</div>
                    <span class="text">背诵记录</span>
                    <span class="arrow">›</span>
                </div>
                <div class="menu-item" onclick="showPage('noticePage')">
                    <div class="icon rule">☰</div>
                    <span class="text">活动须知</span>
                    <span class="arrow">›</span>
                </div>
                <div class="menu-item" onclick="showToast('帮助中心开发中')">
                    <div class="icon help">☆</div>
                    <span class="text">帮助与反馈</span>
                    <span class="arrow">›</span>
                </div>
            </div>
            <button class="logout-btn" id="logoutBtn" style="display:none" onclick="logout()">退出登录</button>
        </div>

        <div id="historyPage" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="goBack()"></div>
                <span class="page-title">背诵记录</span>
            </div>
            <div class="page-container">
                <div class="history-card">
                    <div class="header">
                        <span class="title">静夜思</span>
                        <span class="badge pass">已通过</span>
                    </div>
                    <div class="meta"><span>2024-03-15 14:30</span><span>正确率 95%</span></div>
                </div>
                <div class="history-card">
                    <div class="header">
                        <span class="title">春晓</span>
                        <span class="badge pass">已通过</span>
                    </div>
                    <div class="meta"><span>2024-03-14 10:20</span><span>正确率 92%</span></div>
                </div>
                <div class="history-card">
                    <div class="header">
                        <span class="title">登鹳雀楼</span>
                        <span class="badge fail">未通过</span>
                    </div>
                    <div class="meta"><span>2024-03-13 16:45</span><span>正确率 78%</span></div>
                </div>
            </div>
        </div>

        <div id="ticketPage" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="goBack()"></div>
                <span class="page-title">我的门票</span>
            </div>
            <div class="page-container">
                <div class="ticket-card">
                    <div class="ticket-header">
                        <span class="ticket-title">景区门票</span>
                        <span class="ticket-badge">有效</span>
                    </div>
                    <div class="ticket-row">
                        <div><div class="ticket-label">景区名称</div><div class="ticket-value">诗韵景区</div></div>
                        <div><div class="ticket-label">票型</div><div class="ticket-value">免费体验票</div></div>
                    </div>
                    <div class="ticket-row">
                        <div><div class="ticket-label">有效期至</div><div class="ticket-value">2024-03-16 18:00</div></div>
                        <div><div class="ticket-label">获取方式</div><div class="ticket-value">背诵通过</div></div>
                    </div>
                    <div class="divider"></div>
                    <div class="qr-box"><div class="qr-placeholder"></div></div>
                    <div style="text-align:center;font-size:12px;margin-top:12px;opacity:0.8">请将二维码对准闸机扫描</div>
                </div>
                <div class="ticket-note">
                    <h4>使用须知</h4>
                    <ul>
                        <li>门票仅限本人使用，不可转让</li>
                        <li>请在有效期内使用，过期自动作废</li>
                        <li>入园时请出示本门票供工作人员核验</li>
                        <li>本门票包含景区大门票，不含园中园项目</li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="noticePage" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="goBack()"></div>
                <span class="page-title">活动须知</span>
            </div>
            <div class="page-container">
                <div class="notice-card">
                    <h4>★ 活动规则</h4>
                    <ul>
                        <li>参与者需选择一首指定的诗词进行完整背诵</li>
                        <li>背诵正确率达到90%及以上即可获得免费门票</li>
                        <li>每位用户每天有3次背诵机会</li>
                        <li>排队取号后请在规定时间内到达设备区</li>
                        <li>过号后需重新排队</li>
                    </ul>
                </div>
                <div class="notice-card">
                    <h4>★ 门票说明</h4>
                    <ul>
                        <li>通过背诵获得的门票为电子票，领取后24小时内有效</li>
                        <li>门票仅限本人使用，入园时需人脸核验</li>
                        <li>门票包含景区大门票，不含园中园及二次消费项目</li>
                    </ul>
                </div>
                <div class="notice-card">
                    <h4>★ 注意事项</h4>
                    <ul>
                        <li>请文明参与，遵守现场秩序</li>
                        <li>背诵时请使用普通话，声音清晰</li>
                        <li>如遇设备故障，请联系现场工作人员</li>
                        <li>活动最终解释权归景区所有</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="fixed-bottom" id="queueBtnContainer">
        <button class="btn-primary" id="queueBtn" onclick="showQueueModal()">立即取号</button>
    </div>

    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab('home')">
            <span class="icon">●</span>
            <span class="label">首页</span>
        </div>
        <div class="tab-item" onclick="switchTab('queue')">
            <span class="icon">■</span>
            <span class="label">取号</span>
        </div>
        <div class="tab-item" onclick="switchTab('queueStatus')">
            <span class="icon">●</span>
            <span class="label">排队</span>
        </div>
        <div class="tab-item" onclick="switchTab('my')">
            <span class="icon">○</span>
            <span class="label">我的</span>
        </div>
    </div>

    <div class="modal-overlay" id="queueModal">
        <div class="modal-content">
            <div class="modal-handle"></div>
            <div class="modal-title">确认取号</div>
            <div class="modal-poem">
                <div class="poem-name" id="modalPoemName">静夜思</div>
                <div class="poem-text" id="modalPoemText">床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。</div>
            </div>
            <div class="modal-btns">
                <button class="modal-btn gray" onclick="closeModal('queueModal')">取消</button>
                <button class="modal-btn primary" onclick="confirmQueue()">确认取号</button>
            </div>
        </div>
    </div>

    <div class="modal-overlay login-modal" id="loginModal">
        <div class="modal-content">
            <div class="modal-handle"></div>
            <div class="modal-title">登录</div>
            <p class="subtitle">欢迎参与诗词背诵免门票活动</p>
            <div class="login-options">
                <button class="login-btn wechat" onclick="login('wechat')">
                    <span>★</span><span>微信一键登录</span>
                </button>
                <button class="login-btn phone" onclick="login('phone')">
                    <span>☆</span><span>手机号登录</span>
                </button>
            </div>
            <button class="skip-btn" onclick="closeModal('loginModal')">稍后再说</button>
        </div>
    </div>

    <div class="modal-overlay success-modal" id="successModal">
        <div class="modal-content">
            <div class="success-icon">✓</div>
            <div class="success-title">取号成功!</div>
            <div class="success-sub">请留意叫号通知，耐心等待</div>
            <button class="modal-btn primary" style="width:100%" onclick="goToQueueStatus()">查看排队状态</button>
        </div>
    </div>

    <div class="toast" id="toast"></div>

    <script>
        var selectedPoem = '静夜思';
        var isLoggedIn = false;
        var queueState = {
            hasQueue: false,
            queueNumber: '',
            poemName: '',
            status: 'none',
            frontCount: 0,
            progress: 0
        };

        function switchTab(tab) {
            document.querySelectorAll('.tab-item').forEach(function(item) { item.classList.remove('active'); });
            var tabItems = document.querySelectorAll('.tab-item');
            var tabIndex = tab === 'home' ? 0 : tab === 'queue' ? 1 : tab === 'queueStatus' ? 2 : 3;
            tabItems[tabIndex].classList.add('active');

            document.querySelectorAll('.page').forEach(function(page) { page.classList.remove('active'); });
            var navTitle = document.getElementById('navTitle');
            var queueBtnContainer = document.getElementById('queueBtnContainer');

            switch(tab) {
                case 'home':
                    document.getElementById('homePage').classList.add('active');
                    navTitle.textContent = '诗词背诵免门票';
                    queueBtnContainer.style.display = 'none';
                    break;
                case 'queue':
                    document.getElementById('queuePage').classList.add('active');
                    navTitle.textContent = '选择背诵内容';
                    queueBtnContainer.style.display = 'block';
                    updateQueuePageState();
                    break;
                case 'queueStatus':
                    document.getElementById('queueStatusPage').classList.add('active');
                    navTitle.textContent = '排队状态';
                    queueBtnContainer.style.display = 'none';
                    updateQueueStatusPage();
                    break;
                case 'my':
                    document.getElementById('myPage').classList.add('active');
                    navTitle.textContent = '我的';
                    queueBtnContainer.style.display = 'none';
                    break;
            }
            window.scrollTo(0, 0);
        }

        function updateQueuePageState() {
            var queueBtn = document.getElementById('queueBtn');
            var storyItems = document.querySelectorAll('.story-item');
            
            if (queueState.hasQueue) {
                queueBtn.textContent = '已在排队中';
                queueBtn.disabled = true;
                storyItems.forEach(function(item) { item.classList.add('disabled'); });
            } else {
                queueBtn.textContent = '立即取号';
                queueBtn.disabled = false;
                storyItems.forEach(function(item) { item.classList.remove('disabled'); });
            }
            updateHomeQueueBtn();
        }

        function updateHomeQueueBtn() {
            var label = document.getElementById('homeQueueLabel');
            if (queueState.hasQueue) {
                label.textContent = '查看排队';
            } else {
                label.textContent = '取号';
            }
        }

        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(function(page) { page.classList.remove('active'); });
            document.getElementById(pageId).classList.add('active');
            var navTitle = document.getElementById('navTitle');
            var queueBtnContainer = document.getElementById('queueBtnContainer');
            queueBtnContainer.style.display = 'none';
            switch(pageId) {
                case 'historyPage': navTitle.textContent = '背诵记录'; break;
                case 'ticketPage': navTitle.textContent = '我的门票'; break;
                case 'noticePage': navTitle.textContent = '活动须知'; break;
            }
            window.scrollTo(0, 0);
        }

        function goBack() {
            document.querySelectorAll('.page').forEach(function(page) { page.classList.remove('active'); });
            document.getElementById('myPage').classList.add('active');
            document.getElementById('navTitle').textContent = '我的';
        }

        function selectStory(el, poem) {
            if (queueState.hasQueue) {
                showToast('您已在排队中，无法选择其他诗词');
                return;
            }
            document.querySelectorAll('.story-item').forEach(function(item) { item.classList.remove('selected'); });
            el.classList.add('selected');
            selectedPoem = poem;
        }

        function showQueueModal() {
            if (queueState.hasQueue) {
                showToast('您已在排队中，请查看排队状态');
                return;
            }
            var poems = {
                '静夜思': '床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。',
                '春晓': '春眠不觉晓，处处闻啼鸟。<br>夜来风雨声，花落知多少。',
                '登鹳雀楼': '白日依山尽，黄河入海流。<br>欲穷千里目，更上一层楼。',
                '望庐山瀑布': '日照香炉生紫烟，遥看瀑布挂前川。<br>飞流直下三千尺，疑是银河落九天。',
                '将进酒': '君不见黄河之水天上来，奔流到海不复回...',
                '长恨歌': '汉皇重色思倾国，御宇多年求不得...'
            };
            document.getElementById('modalPoemName').textContent = selectedPoem;
            document.getElementById('modalPoemText').innerHTML = poems[selectedPoem] || '';
            document.getElementById('queueModal').classList.add('show');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        function confirmQueue() {
            if (queueState.hasQueue) {
                closeModal('queueModal');
                return;
            }
            var queueNum = 'A' + String(Math.floor(Math.random() * 50) + 10).padStart(3, '0');
            queueState.queueNumber = queueNum;
            queueState.poemName = selectedPoem;
            queueState.hasQueue = true;
            queueState.status = 'waiting';
            queueState.frontCount = Math.floor(Math.random() * 8) + 1;
            queueState.progress = Math.floor(Math.random() * 30) + 60;
            closeModal('queueModal');
            document.getElementById('successModal').classList.add('show');
        }

        function goToQueueStatus() {
            closeModal('successModal');
            switchTab('queueStatus');
        }

        function updateQueueStatusPage() {
            var card = document.getElementById('queueStatusCard');
            var infoRow = document.getElementById('queueInfoRow');
            var progressSection = document.getElementById('progressSection');
            var callList = document.getElementById('callList');
            var actionRow = document.getElementById('actionRow');
            
            if (!queueState.hasQueue || queueState.status === 'none') {
                card.classList.remove('cancelled');
                card.innerHTML = '<div class="label">当前暂无排队</div><div class="number" style="font-size:24px">-</div><div class="poem-name">请先取号排队</div>';
                infoRow.style.display = 'none';
                progressSection.style.display = 'none';
                callList.style.display = 'none';
                actionRow.innerHTML = '<button class="action-btn primary" onclick="switchTab(\'queue\')">去取号</button>';
                return;
            }
            
            if (queueState.status === 'cancelled') {
                card.classList.add('cancelled');
                card.innerHTML = '<div class="label">已取消排队</div><div class="number" style="font-size:36px">-</div><div class="poem-name">您已取消排队</div>';
                infoRow.style.display = 'none';
                progressSection.style.display = 'none';
                callList.style.display = 'none';
                actionRow.innerHTML = '<button class="action-btn primary" onclick="reQueue()">重新取号</button>';
            } else {
                card.classList.remove('cancelled');
                card.innerHTML = '<div class="label">您的排队号码</div><div class="number">' + queueState.queueNumber + '</div><div class="poem-name">背诵内容：' + queueState.poemName + '</div>';
                infoRow.style.display = '';
                progressSection.style.display = '';
                callList.style.display = '';
                document.getElementById('waitCount').textContent = queueState.frontCount;
                document.getElementById('waitTime').textContent = '约' + (queueState.frontCount * 3) + '分钟';
                document.getElementById('progressFill').style.width = queueState.progress + '%';
                actionRow.innerHTML = '<button class="action-btn cancel" onclick="cancelQueue()">取消排队</button><button class="action-btn remind" onclick="showToast(\'已发送催单提醒\')">催单提醒</button>';
            }
        }

        function cancelQueue() {
            if (!queueState.hasQueue || queueState.status === 'cancelled' || queueState.status === 'none') return;
            queueState.status = 'cancelled';
            updateQueueStatusPage();
            updateHomeQueueBtn();
            showToast('已取消排队');
        }

        function reQueue() {
            queueState.hasQueue = false;
            queueState.queueNumber = '';
            queueState.poemName = '';
            queueState.status = 'none';
            queueState.frontCount = 0;
            queueState.progress = 0;
            updateQueuePageState();
            switchTab('queue');
            showToast('可重新取号');
        }

        function showToast(msg) {
            var toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.classList.add('show');
            setTimeout(function() { toast.classList.remove('show'); }, 2000);
        }

        function showLoginModal() {
            document.getElementById('loginModal').classList.add('show');
        }

        function login(type) {
            closeModal('loginModal');
            isLoggedIn = true;
            var name = type === 'wechat' ? '微信用户' : '手机用户';
            document.getElementById('userName').textContent = name;
            document.getElementById('userPhone').textContent = type === 'phone' ? '138****8888' : '已登录';
            document.getElementById('logoutBtn').style.display = 'block';
showToast('登录成功');
        }

        function logout() {
            if (confirm('确定要退出登录吗？')) {
                isLoggedIn = false;
                document.getElementById('userName').textContent = '点击登录';
                document.getElementById('userPhone').textContent = '登录后可查看更多功能';
                document.getElementById('logoutBtn').style.display = 'none';
                showToast('已退出登录');
            }
        }

        document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
            overlay.addEventListener('click', function(e) {
                if (e.target === this) this.classList.remove('show');
            });
        });

        setInterval(function() {
            var statusPage = document.getElementById('queueStatusPage');
            if (statusPage.classList.contains('active') && queueState.hasQueue && queueState.status === 'waiting') {
                queueState.progress = Math.min(95, queueState.progress + Math.random() * 2);
                if (Math.random() > 0.7) queueState.frontCount = Math.max(0, queueState.frontCount - 1);
                document.getElementById('progressFill').style.width = queueState.progress + '%';
                document.getElementById('waitCount').textContent = queueState.frontCount;
                document.getElementById('waitTime').textContent = '约' + (queueState.frontCount * 3) + '分钟';
            }
        }, 3000);

        updateQueuePageState();
    </script>
</body>
</html>