编辑页面

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>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #8B4513;
            --primary-dark: #6B3510;
            --secondary: #C4A35A;
            --accent: #B8860B;
            --bg: #FDF8F0;
            --surface: #FFFFFF;
            --text: #2D2D2D;
            --text-light: #666666;
            --success: #4A7C59;
            --error: #C45B5B;
            --border: #E8E0D5;
            --shadow: 0 2px 12px rgba(0,0,0,0.08);
            --shadow-lg: 0 4px 24px rgba(0,0,0,0.12);
            --radius: 12px;
            --radius-sm: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* 手机容器 */
        .phone-frame {
            width: 100%;
            max-width: 414px;
            min-height: 100vh;
            margin: 0 auto;
            background: var(--bg);
            position: relative;
        }

        /* 顶部状态栏 */
        .status-bar {
            height: 44px;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 16px;
            color: white;
            font-size: 14px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .status-bar .time {
            font-weight: 600;
        }

        /* 页面容器 */
        .page {
            display: none;
            min-height: calc(100vh - 44px);
            padding-bottom: 80px;
        }

        .page.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Banner轮播 */
        .banner {
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .banner-slides {
            display: flex;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .banner-slide {
            min-width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .banner-slide::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(transparent, rgba(0,0,0,0.4));
        }

        .banner-dots {
            position: absolute;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 10;
        }

        .banner-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s;
        }

        .banner-dot.active {
            background: white;
            width: 24px;
            border-radius: 4px;
        }

        /* 快捷入口 */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            padding: 24px 16px;
        }

        .action-card {
            background: var(--surface);
            border-radius: var(--radius);
            padding: 20px;
            text-align: center;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.3s;
        }

        .action-card:active {
            transform: scale(0.98);
        }

        .action-card.primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
        }

        .action-card .icon {
            font-size: 32px;
            margin-bottom: 8px;
        }

        .action-card .title {
            font-size: 16px;
            font-weight: 600;
        }

        .action-card .desc {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 4px;
        }

        /* 功能列表 */
        .feature-section {
            padding: 0 16px 24px;
        }

        .section-title {
            font-family: 'Noto Serif SC', serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title::before {
            content: '';
            width: 4px;
            height: 20px;
            background: var(--secondary);
            border-radius: 2px;
        }

        .feature-list {
            background: var(--surface);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .feature-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.2s;
        }

        .feature-item:last-child {
            border-bottom: none;
        }

        .feature-item:active {
            background: var(--bg);
        }

        .feature-item .icon {
            width: 40px;
            height: 40px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 12px;
        }

        .feature-item .content {
            flex: 1;
        }

        .feature-item .title {
            font-size: 15px;
            font-weight: 500;
        }

        .feature-item .arrow {
            color: var(--text-light);
            font-size: 14px;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: var(--surface);
            display: flex;
            justify-content: space-around;
            padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
            box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
            z-index: 100;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4px 16px;
            color: var(--text-light);
            cursor: pointer;
            transition: color 0.2s;
        }

        .nav-item.active {
            color: var(--primary);
        }

        .nav-item .icon {
            font-size: 24px;
            margin-bottom: 2px;
        }

        .nav-item .label {
            font-size: 11px;
        }

        /* 地图页 */
        .map-container {
            position: relative;
            height: calc(100vh - 44px - 70px);
        }

        .map-view {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #E8E0D5 0%, #D4C8B8 100%);
            position: relative;
            overflow: hidden;
        }

        /* 模拟地图网格 */
        .map-grid {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
            opacity: 0.3;
        }

        .map-grid div {
            border: 1px dashed rgba(139,69,19,0.2);
        }

        .map-roads {
            position: absolute;
            inset: 0;
        }

        .map-road {
            position: absolute;
            background: rgba(255,255,255,0.6);
        }

        .map-road.h {
            height: 20px;
            left: 0;
            right: 0;
        }

        .map-road.v {
            width: 20px;
            top: 0;
            bottom: 0;
        }

        /* 景点标记 */
        .spot-marker {
            position: absolute;
            width: 32px;
            height: 32px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(139,69,19,0.3);
            z-index: 10;
        }

        .spot-marker.unlocked {
            background: var(--secondary);
        }

        .spot-marker.active {
            background: var(--accent);
            transform: scale(1.2);
            animation: pulse 2s infinite;
        }

        .spot-marker:hover {
            transform: scale(1.15);
            z-index: 20;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(184,134,11,0.4); }
            50% { box-shadow: 0 0 0 12px rgba(184,134,11,0); }
        }

        /* GPS定位 */
        .gps-marker {
            position: absolute;
            width: 24px;
            height: 24px;
            background: #3B82F6;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(59,130,246,0.5);
            z-index: 15;
        }

        .gps-marker::after {
            content: '';
            position: absolute;
            inset: -8px;
            border: 2px solid rgba(59,130,246,0.3);
            border-radius: 50%;
            animation: gpsPulse 2s infinite;
        }

        @keyframes gpsPulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }

        /* 用户位置弹窗 */
        .user-location-popup {
            position: absolute;
            background: var(--surface);
            border-radius: var(--radius);
            padding: 12px 16px;
            box-shadow: var(--shadow-lg);
            z-index: 25;
            min-width: 200px;
        }

        .user-location-popup .name {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .user-location-popup .address {
            font-size: 12px;
            color: var(--text-light);
        }

        /* 地图控制按钮 */
        .map-controls {
            position: absolute;
            right: 16px;
            top: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 20;
        }

        .map-control-btn {
            width: 44px;
            height: 44px;
            background: var(--surface);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            box-shadow: var(--shadow);
            cursor: pointer;
        }

        /* 列表视图 */
        .list-view {
            padding: 16px;
        }

        .spot-card {
            background: var(--surface);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            display: flex;
            gap: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .spot-card:active {
            transform: scale(0.99);
        }

        .spot-card .cover {
            width: 80px;
            height: 80px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            object-fit: cover;
        }

        .spot-card .info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .spot-card .name {
            font-weight: 600;
            font-size: 16px;
        }

        .spot-card .intro {
            font-size: 13px;
            color: var(--text-light);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .spot-card .meta {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: var(--text-light);
        }

        .spot-card .tag {
            background: var(--bg);
            padding: 2px 8px;
            border-radius: 4px;
        }

        .spot-card .tag.unlocked {
            background: rgba(74,124,89,0.1);
            color: var(--success);
        }

        /* 景点详情页 */
        .detail-header {
            position: relative;
            height: 280px;
        }

        .detail-header img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .detail-header .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent 50%, rgba(0,0,0,0.6));
        }

        .detail-header .back-btn {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            backdrop-filter: blur(4px);
        }

        .detail-content {
            padding: 20px 16px;
            margin-top: -40px;
            position: relative;
        }

        .detail-card {
            background: var(--surface);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow-lg);
            margin-bottom: 16px;
        }

        .detail-card h2 {
            font-family: 'Noto Serif SC', serif;
            font-size: 22px;
            color: var(--primary);
            margin-bottom: 8px;
        }

        .detail-card .subtitle {
            font-size: 14px;
            color: var(--text-light);
            margin-bottom: 16px;
        }

        .detail-card .desc {
            font-size: 15px;
            line-height: 1.8;
            color: var(--text);
        }

        /* 音频播放器 */
        .audio-player {
            background: var(--surface);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow);
        }

        .player-info {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .player-cover {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
        }

        .player-text {
            flex: 1;
        }

        .player-title {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .player-status {
            font-size: 13px;
            color: var(--text-light);
        }

        .player-progress {
            margin-bottom: 12px;
        }

        .progress-bar {
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            cursor: pointer;
            position: relative;
        }

        .progress-bar .fill {
            height: 100%;
            background: var(--secondary);
            border-radius: 2px;
            width: 35%;
            transition: width 0.1s;
        }

        .progress-time {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--text-light);
            margin-top: 6px;
        }

        .player-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
        }

        .player-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .player-btn.play {
            background: var(--primary);
            color: white;
            width: 56px;
            height: 56px;
            font-size: 24px;
        }

        .player-btn:active {
            transform: scale(0.95);
        }

        .speed-selector {
            display: flex;
            gap: 8px;
        }

        .speed-btn {
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: transparent;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .speed-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* 底部播放条 */
        .mini-player {
            position: fixed;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 32px);
            max-width: 382px;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            border-radius: var(--radius);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: var(--shadow-lg);
            z-index: 90;
            cursor: pointer;
        }

        .mini-player .cover {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }

        .mini-player .info {
            flex: 1;
        }

        .mini-player .title {
            font-weight: 600;
            font-size: 14px;
        }

        .mini-player .status {
            font-size: 12px;
            color: var(--text-light);
        }

        .mini-player .btn {
            font-size: 24px;
            color: var(--primary);
        }

        /* 付费弹窗 */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: flex-end;
            justify-content: center;
            z-index: 200;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-content {
            background: var(--surface);
            border-radius: var(--radius) var(--radius) 0 0;
            width: 100%;
            max-width: 414px;
            max-height: 85vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--surface);
        }

        .modal-header h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .modal-close {
            font-size: 24px;
            color: var(--text-light);
            cursor: pointer;
        }

        .modal-body {
            padding: 20px 16px;
        }

        /* 套餐选择 */
        .package-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .package-item {
            border: 2px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .package-item.selected {
            border-color: var(--primary);
            background: rgba(139,69,19,0.05);
        }

        .package-item .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .package-item .name {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .package-item .tag {
            background: var(--secondary);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
        }

        .package-item .price {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
        }

        .package-item .original {
            font-size: 13px;
            color: var(--text-light);
            text-decoration: line-through;
        }

        .package-item .features {
            font-size: 13px;
            color: var(--text-light);
        }

        /* 优惠码 */
        .coupon-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }

        .coupon-input {
            display: flex;
            gap: 8px;
        }

        .coupon-input input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 15px;
            outline: none;
        }

        .coupon-input input:focus {
            border-color: var(--primary);
        }

        .coupon-input button {
            padding: 12px 20px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 14px;
            cursor: pointer;
        }

        .coupon-success {
            margin-top: 12px;
            padding: 12px;
            background: rgba(74,124,89,0.1);
            border-radius: var(--radius-sm);
            color: var(--success);
            font-size: 14px;
            display: none;
        }

        .coupon-success.show {
            display: block;
        }

        /* 价格汇总 */
        .price-summary {
            margin-top: 20px;
            padding: 16px;
            background: var(--bg);
            border-radius: var(--radius-sm);
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .price-row:last-child {
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
            padding-top: 8px;
            border-top: 1px dashed var(--border);
        }

        /* 支付按钮 */
        .pay-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border: none;
            border-radius: var(--radius);
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
        }

        /* 离线下载页 */
        .download-header {
            padding: 20px 16px;
            text-align: center;
        }

        .download-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 40px;
        }

        .download-size {
            font-size: 14px;
            color: var(--text-light);
        }

        .download-btn {
            padding: 12px 32px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 24px;
            font-size: 15px;
            cursor: pointer;
            margin-top: 16px;
        }

        .download-btn.secondary {
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }

        /* 下载进度 */
        .download-progress {
            padding: 20px 16px;
        }

        .progress-card {
            background: var(--surface);
            border-radius: var(--radius);
            padding: 16px;
            box-shadow: var(--shadow);
            margin-bottom: 16px;
        }

        .progress-card .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .progress-card .title {
            font-weight: 600;
        }

        .progress-card .percent {
            color: var(--primary);
            font-weight: 600;
        }

        .progress-card .bar {
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-card .bar .fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 4px;
            width: 68%;
            transition: width 0.5s;
        }

        .progress-card .meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--text-light);
            margin-top: 8px;
        }

        /* 存储信息 */
        .storage-info {
            padding: 16px;
            background: var(--surface);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .storage-icon {
            width: 48px;
            height: 48px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .storage-text {
            flex: 1;
        }

        .storage-text .label {
            font-size: 13px;
            color: var(--text-light);
        }

        .storage-text .value {
            font-weight: 600;
        }

        .delete-btn {
            padding: 8px 16px;
            border: 1px solid var(--error);
            color: var(--error);
            background: transparent;
            border-radius: 16px;
            font-size: 13px;
            cursor: pointer;
        }

        /* 个人中心 */
        .profile-header {
            padding: 24px 16px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
        }

        .profile-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .profile-avatar {
            width: 64px;
            height: 64px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }

        .profile-text .name {
            font-size: 20px;
            font-weight: 600;
        }

        .profile-text .status {
            font-size: 13px;
            opacity: 0.8;
        }

        .profile-card {
            margin: 16px;
            background: var(--surface);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .profile-card .row {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }

        .profile-card .row:last-child {
            border-bottom: none;
        }

        .profile-card .row .icon {
            width: 36px;
            height: 36px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }

        .profile-card .row .label {
            flex: 1;
            font-size: 15px;
        }

        .profile-card .row .value {
            color: var(--text-light);
            font-size: 14px;
        }

        /* 订单列表 */
        .order-tabs {
            display: flex;
            padding: 0 16px;
            gap: 16px;
            margin-bottom: 16px;
        }

        .order-tab {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            background: var(--surface);
            color: var(--text-light);
        }

        .order-tab.active {
            background: var(--primary);
            color: white;
        }

        .order-card {
            background: var(--surface);
            border-radius: var(--radius);
            padding: 16px;
            margin: 0 16px 12px;
            box-shadow: var(--shadow);
        }

        .order-card .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .order-card .order-no {
            font-size: 13px;
            color: var(--text-light);
        }

        .order-card .status {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .order-card .status.paid {
            background: rgba(74,124,89,0.1);
            color: var(--success);
        }

        .order-card .status.refunded {
            background: rgba(196,91,91,0.1);
            color: var(--error);
        }

        .order-card .info {
            display: flex;
            gap: 12px;
        }

        .order-card .cover {
            width: 60px;
            height: 60px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }

        .order-card .detail .name {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .order-card .detail .date {
            font-size: 12px;
            color: var(--text-light);
        }

        .order-card .amount {
            text-align: right;
        }

        .order-card .amount .money {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
        }

        .order-card .amount .original {
            font-size: 12px;
            color: var(--text-light);
            text-decoration: line-through;
        }

        /* ========== 管理后台样式 ========== */
        .admin-container {
            display: none;
            min-height: 100vh;
            background: #F5F6F8;
        }

        .admin-container.active {
            display: flex;
        }

        /* 侧边栏 */
        .admin-sidebar {
            width: 240px;
            background: #1A1A2E;
            color: white;
            padding: 24px 0;
            min-height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
        }

        .admin-logo {
            padding: 0 24px;
            margin-bottom: 32px;
        }

        .admin-logo h1 {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .admin-logo .icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .admin-nav {
            padding: 0 12px;
        }

        .admin-nav-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 4px;
            color: rgba(255,255,255,0.7);
        }

        .admin-nav-item:hover {
            background: rgba(255,255,255,0.1);
            color: white;
        }

        .admin-nav-item.active {
            background: rgba(139,69,19,0.3);
            color: white;
        }

        .admin-nav-item .icon {
            margin-right: 12px;
            font-size: 18px;
        }

        /* 主内容区 */
        .admin-main {
            flex: 1;
            margin-left: 240px;
            padding: 24px;
        }

        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .admin-header h2 {
            font-size: 24px;
            font-weight: 600;
        }

        .admin-header .actions {
            display: flex;
            gap: 12px;
        }

        .admin-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .admin-btn.primary {
            background: var(--primary);
            color: white;
            border: none;
        }

        .admin-btn.secondary {
            background: white;
            border: 1px solid var(--border);
            color: var(--text);
        }

        .admin-btn:hover {
            opacity: 0.9;
        }

        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: white;
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .stat-card .label {
            font-size: 13px;
            color: var(--text-light);
            margin-bottom: 8px;
        }

        .stat-card .value {
            font-size: 28px;
            font-weight: 700;
            color: var(--text);
        }

        .stat-card .trend {
            font-size: 12px;
            color: var(--success);
            margin-top: 8px;
        }

        /* 数据表格 */
        .data-table {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }

        .table-header h3 {
            font-size: 16px;
            font-weight: 600;
        }

        .table-search {
            display: flex;
            gap: 12px;
        }

        .table-search input {
            padding: 8px 16px;
            border: 1px solid var(--border);
            border-radius: 6px;
            width: 240px;
            font-size: 14px;
        }

        .table-actions {
            display: flex;
            gap: 8px;
        }

        .table-btn {
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .table-btn.edit {
            background: rgba(139,69,19,0.1);
            color: var(--primary);
        }

        .table-btn.delete {
            background: rgba(196,91,91,0.1);
            color: var(--error);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 14px 20px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        th {
            background: #FAFAFA;
            font-weight: 600;
            font-size: 13px;
            color: var(--text-light);
        }

        td {
            font-size: 14px;
        }

        tbody tr:hover {
            background: #FAFAFA;
        }

        /* 表单弹窗 */
        .form-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            align-items: center;
            justify-content: center;
            z-index: 300;
        }

        .form-modal.active {
            display: flex;
        }

        .form-content {
            background: white;
            border-radius: var(--radius);
            width: 560px;
            max-height: 80vh;
            overflow-y: auto;
        }

        .form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }

        .form-header h3 {
            font-size: 18px;
        }

        .form-body {
            padding: 24px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 14px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
        }

        .form-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 24px;
            border-top: 1px solid var(--border);
        }

        /* 系统设置 */
        .settings-section {
            background: white;
            border-radius: var(--radius);
            padding: 24px;
            margin-bottom: 20px;
        }

        .settings-section h3 {
            font-size: 16px;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
        }

        .settings-row:last-child {
            border-bottom: none;
        }

        .settings-row .info h4 {
            font-weight: 500;
            margin-bottom: 4px;
        }

        .settings-row .info p {
            font-size: 13px;
            color: var(--text-light);
        }

        /* 开关 */
        .toggle {
            width: 48px;
            height: 26px;
            background: #E0E0E0;
            border-radius: 13px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s;
        }

        .toggle.active {
            background: var(--success);
        }

        .toggle::after {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: all 0.3s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .toggle.active::after {
            left: 24px;
        }

        /* 图表区 */
        .chart-container {
            background: white;
            border-radius: var(--radius);
            padding: 24px;
            margin-bottom: 20px;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .chart-header h3 {
            font-size: 16px;
        }

        .chart-legend {
            display: flex;
            gap: 16px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-light);
        }

        .legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        /* 模拟柱状图 */
        .bar-chart {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            height: 200px;
            padding: 20px 0;
        }

        .bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .bar-item .bar {
            width: 40px;
            background: linear-gradient(to top, var(--primary), var(--secondary));
            border-radius: 4px 4px 0 0;
            transition: height 0.5s ease;
        }

        .bar-item .label {
            font-size: 12px;
            color: var(--text-light);
        }

        /* 切换按钮 */
        .view-switch {
            display: flex;
            background: var(--surface);
            border-radius: var(--radius-sm);
            padding: 4px;
            margin: 16px;
        }

        .view-switch-btn {
            flex: 1;
            padding: 10px;
            text-align: center;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            background: transparent;
            border: none;
            color: var(--text-light);
        }

        .view-switch-btn.active {
            background: var(--primary);
            color: white;
        }

        /* Toast提示 */
        .toast {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 12px 24px;
            border-radius: 24px;
            font-size: 14px;
            opacity: 0;
            transition: all 0.3s;
            z-index: 500;
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* 客服悬浮按钮 */
        .service-btn {
            position: fixed;
            bottom: 90px;
            right: 16px;
            width: 50px;
            height: 50px;
            background: var(--success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 4px 12px rgba(74,124,89,0.4);
            cursor: pointer;
            z-index: 80;
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state .icon {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .empty-state p {
            color: var(--text-light);
            font-size: 14px;
        }

        /* 使用说明 */
        .guide-list {
            padding: 16px;
        }

        .guide-item {
            display: flex;
            gap: 16px;
            padding: 16px;
            background: var(--surface);
            border-radius: var(--radius);
            margin-bottom: 12px;
        }

        .guide-item .num {
            width: 36px;
            height: 36px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            flex-shrink: 0;
        }

        .guide-item .content h4 {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .guide-item .content p {
            font-size: 13px;
            color: var(--text-light);
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .admin-container {
                display: none !important;
            }
            
            .phone-frame {
                display: block;
            }
        }

        @media (min-width: 769px) {
            .phone-frame {
                display: none;
            }
        }

        @media (min-width: 1200px) {
            .admin-sidebar {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- Toast提示 -->
    <div class="toast" id="toast"></div>

    <!-- ========== 手机端小程序 ========== -->
    <div class="phone-frame">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span class="time" id="currentTime">19:31</span>
            <span style="margin-left: auto;">5G</span>
            <span style="margin-left: 4px;">WiFi</span>
        </div>

        <!-- 首页 -->
        <div class="page active" id="pageHome">
            <div class="banner">
                <div class="banner-slides" id="bannerSlides">
                    <div class="banner-slide" style="background-image: url('https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=800&q=80')"></div>
                    <div class="banner-slide" style="background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80')"></div>
                    <div class="banner-slide" style="background-image: url('https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?w=800&q=80')"></div>
                </div>
                <div class="banner-dots">
                    <div class="banner-dot active" data-index="0"></div>
                    <div class="banner-dot" data-index="1"></div>
                    <div class="banner-dot" data-index="2"></div>
                </div>
            </div>

            <div class="quick-actions">
                <div class="action-card primary" onclick="navigateTo('map')">
                    <div class="icon">🗺️</div>
                    <div class="title">进入导览</div>
                    <div class="desc">100个景点随您游览</div>
                </div>
                <div class="action-card" onclick="showPaymentModal()">
                    <div class="icon">🔓</div>
                    <div class="title">立即解锁</div>
                    <div class="desc">全区通听永久有效</div>
                </div>
            </div>

            <div class="feature-section">
                <div class="section-title">快捷服务</div>
                <div class="feature-list">
                    <div class="feature-item" onclick="navigateTo('guide')">
                        <div class="icon">📖</div>
                        <div class="content">
                            <div class="title">使用说明</div>
                        </div>
                        <div class="arrow">›</div>
                    </div>
                    <div class="feature-item" onclick="navigateTo('faq')">
                        <div class="icon">❓</div>
                        <div class="content">
                            <div class="title">常见问题</div>
                        </div>
                        <div class="arrow">›</div>
                    </div>
                    <div class="feature-item" onclick="navigateTo('offline')">
                        <div class="icon">📥</div>
                        <div class="content">
                            <div class="title">离线下载</div>
                        </div>
                        <div class="arrow">›</div>
                    </div>
                </div>
            </div>

            <div class="feature-section">
                <div class="section-title">热门景点</div>
                <div class="feature-list" id="hotSpotsList"></div>
            </div>
        </div>

        <!-- 地图页 -->
        <div class="page" id="pageMap">
            <div class="view-switch">
                <button class="view-switch-btn active" onclick="switchMapView('map')">地图模式</button>
                <button class="view-switch-btn" onclick="switchMapView('list')">列表模式</button>
            </div>

            <div class="map-view" id="mapView">
                <div class="map-grid">
                    <div></div><div></div><div></div><div></div><div></div>
                    <div></div><div></div><div></div><div></div><div></div>
                </div>
                <div class="map-roads">
                    <div class="map-road h" style="top: 30%"></div>
                    <div class="map-road h" style="top: 60%"></div>
                    <div class="map-road v" style="left: 25%"></div>
                    <div class="map-road v" style="left: 55%"></div>
                    <div class="map-road v" style="left: 80%"></div>
                </div>
                <div id="spotMarkers"></div>
                <div class="gps-marker" style="left: 45%; top: 40%"></div>
                <div class="map-controls">
                    <div class="map-control-btn" onclick="showToast('已刷新位置')">📍</div>
                    <div class="map-control-btn" onclick="showToast('缩放功能')">➕</div>
                    <div class="map-control-btn" onclick="toggleGps()">🎯</div>
                </div>
            </div>

            <div class="list-view" id="listView" style="display: none;">
                <div id="spotListContainer"></div>
            </div>
        </div>

        <!-- 景点详情页 -->
        <div class="page" id="pageDetail">
            <div class="detail-header">
                <img src="https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=800&q=80" alt="" id="detailImage">
                <div class="overlay"></div>
                <div class="back-btn" onclick="navigateTo('map')">‹</div>
            </div>
            <div class="detail-content">
                <div class="detail-card">
                    <h2 id="detailName">景点名称</h2>
                    <div class="subtitle" id="detailLocation">天津市和平区五大道</div>
                    <div class="desc" id="detailDesc">
                        这里是景点的详细介绍内容，包含了丰富的历史背景和文化价值。游客可以通过语音导览深入了解每一处建筑的独特魅力。
                    </div>
                </div>

                <div class="audio-player">
                    <div class="player-info">
                        <div class="player-cover">🎵</div>
                        <div class="player-text">
                            <div class="player-title">语音讲解</div>
                            <div class="player-status" id="playerStatus">点击播放</div>
                        </div>
                    </div>
                    <div class="player-progress">
                        <div class="progress-bar" onclick="seekAudio(event)">
                            <div class="fill" id="progressFill"></div>
                        </div>
                        <div class="progress-time">
                            <span id="currentTimeDisplay">0:00</span>
                            <span id="totalTimeDisplay">3:45</span>
                        </div>
                    </div>
                    <div class="player-controls">
                        <div class="speed-selector">
                            <button class="speed-btn" onclick="setSpeed(0.75)">0.75x</button>
                            <button class="speed-btn active" onclick="setSpeed(1)">1.0x</button>
                            <button class="speed-btn" onclick="setSpeed(1.25)">1.25x</button>
                            <button class="speed-btn" onclick="setSpeed(1.5)">1.5x</button>
                        </div>
                        <button class="player-btn play" id="playBtn" onclick="togglePlay()">▶</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 离线下载页 -->
        <div class="page" id="pageOffline">
            <div class="download-header">
                <div class="download-icon">🎧</div>
                <h2 style="margin-bottom: 8px;">离线音频包</h2>
                <p class="download-size">包含全部100个景点语音讲解</p>
<p class="download-size">总大小：约 485 MB</p>
                <button class="download-btn" onclick="startDownload()">立即下载</button>
                <button class="download-btn secondary" onclick="showToast('已删除离线包')">删除离线包</button>
            </div>

            <div class="download-progress">
                <div class="progress-card" id="downloadCard" style="display: none;">
                    <div class="header">
                        <span class="title">下载进度</span>
                        <span class="percent" id="downloadPercent">68%</span>
                    </div>
                    <div class="bar">
                        <div class="fill" id="downloadBar"></div>
                    </div>
                    <div class="meta">
                        <span id="downloadSize">330 MB / 485 MB</span>
                        <span id="downloadTime">预计剩余 5 分钟</span>
                    </div>
                </div>
            </div>

            <div style="padding: 0 16px;">
                <div class="section-title">存储信息</div>
                <div class="storage-info">
                    <div class="storage-icon">💾</div>
                    <div class="storage-text">
                        <div class="label">已用存储空间</div>
                        <div class="value">330 MB / 2 GB</div>
                    </div>
                    <button class="delete-btn">清理</button>
                </div>

                <div class="feature-section" style="padding: 16px 0;">
                    <div class="section-title">下载说明</div>
                    <div class="feature-list">
                        <div class="feature-item">
                            <div class="icon" style="background: rgba(74,124,89,0.1); color: var(--success);">✓</div>
                            <div class="content">
                                <div class="title">无网可播放</div>
<div class="desc">下载完成后，景区内无需网络即可畅听讲解</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="icon" style="background: rgba(74,124,89,0.1); color: var(--success);">✓</div>
                            <div class="content">
                                <div class="title">节省流量</div>
                                <div class="desc">离线播放，不消耗手机流量</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="icon" style="background: rgba(139,69,19,0.1); color: var(--primary);">💡</div>
                            <div class="content">
                                <div class="title">建议在WiFi下下载</div>
                                <div class="desc">完整音频包较大，建议连接WiFi后下载</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人中心 -->
        <div class="page" id="pageProfile">
            <div class="profile-header">
                <div class="profile-info">
                    <div class="profile-avatar">👤</div>
                    <div class="profile-text">
                        <div class="name">游客用户</div>
                        <div class="status">已解锁全部景点</div>
                    </div>
                </div>
            </div>

            <div class="order-tabs">
                <div class="order-tab active">全部订单</div>
                <div class="order-tab">已完成</div>
                <div class="order-tab">已退款</div>
            </div>

            <div id="orderList">
                <div class="order-card">
                    <div class="header">
                        <span class="order-no">订单号：20260415100001</span>
                        <span class="status paid">已完成</span>
                    </div>
                    <div class="info">
                        <div class="cover">🎧</div>
                        <div class="detail">
                            <div class="name">家庭套餐</div>
                            <div class="date">2026-04-15 19:25</div>
                        </div>
                        <div class="amount">
                            <div class="money">¥128.00</div>
                            <div class="original">¥198.00</div>
                        </div>
                    </div>
                </div>

                <div class="order-card">
                    <div class="header">
                        <span class="order-no">订单号：20260415100002</span>
                        <span class="status refunded">已退款</span>
                    </div>
                    <div class="info">
                        <div class="cover">🎧</div>
                        <div class="detail">
                            <div class="name">个人套餐</div>
                            <div class="date">2026-04-10 14:30</div>
                        </div>
                        <div class="amount">
                            <div class="money">¥68.00</div>
                            <div class="original">¥98.00</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="profile-card" style="margin: 16px;">
                <div class="row" onclick="showToast('已解锁景点：100个')">
                    <div class="icon">🔓</div>
                    <div class="label">已解锁权限</div>
                    <div class="value">100个景点</div>
                    <span>›</span>
                </div>
                <div class="row">
                    <div class="icon">📥</div>
                    <div class="label">离线包管理</div>
                    <span>›</span>
                </div>
                <div class="row">
                    <div class="icon">💬</div>
                    <div class="label">联系客服</div>
                    <span>›</span>
                </div>
                <div class="row">
                    <div class="icon">❓</div>
                    <div class="label">使用帮助</div>
                    <span>›</span>
                </div>
            </div>
        </div>

        <!-- 使用说明页 -->
        <div class="page" id="pageGuide">
            <div style="padding: 16px;">
                <div class="section-title">使用步骤</div>
                <div class="guide-list">
                    <div class="guide-item">
                        <div class="num">1</div>
                        <div class="content">
                            <h4>购买解锁套餐</h4>
                            <p>点击首页"立即解锁"按钮，选择适合您的套餐（个人或家庭），完成支付后即可使用全部功能。</p>
                        </div>
                    </div>
                    <div class="guide-item">
                        <div class="num">2</div>
                        <div class="content">
                            <h4>进入景区导览</h4>
                            <p>到达五大道景区后，点击"进入导览"进入地图页面，系统会自动定位您的位置。</p>
                        </div>
                    </div>
                    <div class="guide-item">
                        <div class="num">3</div>
                        <div class="content">
                            <h4>自动或手动播放</h4>
                            <p>开启GPS后，当您靠近景点时会自动触发语音讲解；也可以点击地图上的标注手动播放。</p>
                        </div>
                    </div>
                    <div class="guide-item">
                        <div class="num">4</div>
                        <div class="content">
                            <h4>下载离线包</h4>
                            <p>在"离线下载"页面下载全部音频包，之后无网络也能畅听讲解，节省流量。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 常见问题页 -->
        <div class="page" id="pageFaq">
            <div style="padding: 16px;">
                <div class="section-title">常见问题</div>
                <div class="feature-list" style="margin-bottom: 16px;">
                    <div class="feature-item">
                        <div class="icon">💳</div>
                        <div class="content">
                            <div class="title">支付方式</div>
                            <div class="desc" style="font-size: 12px; color: var(--text-light);">目前支持微信支付</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="icon">📱</div>
                        <div class="content">
                            <div class="title">家庭套餐是什么</div>
                            <div class="desc" style="font-size: 12px; color: var(--text-light);">家庭套餐可分享给另外2人使用，共3人同时享有权限</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="icon">🔄</div>
                        <div class="content">
                            <div class="title">可以退款吗</div>
                            <div class="desc" style="font-size: 12px; color: var(--text-light);">支付7天内，未使用可申请退款</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="icon">📍</div>
                        <div class="content">
                            <div class="title">GPS不准确怎么办</div>
                            <div class="desc" style="font-size: 12px; color: var(--text-light);">老城区GPS可能有漂移，可手动点击景点播放</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="icon">📶</div>
                        <div class="content">
                            <div class="title">没有网络能用吗</div>
                            <div class="desc" style="font-size: 12px; color: var(--text-light);">下载离线包后，无网络也可播放</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="icon">⏰</div>
                        <div class="content">
                            <div class="title">有效期多久</div>
                            <div class="desc" style="font-size: 12px; color: var(--text-light);">一次性付费，永久有效</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <div class="nav-item active" onclick="navigateTo('home')">
                <div class="icon">🏠</div>
                <div class="label">首页</div>
            </div>
            <div class="nav-item" onclick="navigateTo('map')">
                <div class="icon">🗺️</div>
                <div class="label">导览</div>
            </div>
            <div class="nav-item" onclick="navigateTo('offline')">
                <div class="icon">📥</div>
                <div class="label">下载</div>
            </div>
            <div class="nav-item" onclick="navigateTo('profile')">
                <div class="icon">👤</div>
                <div class="label">我的</div>
            </div>
        </nav>

        <!-- 客服悬浮按钮 -->
        <div class="service-btn">💬</div>
    </div>

    <!-- ========== 管理后台 ========== -->
    <div class="admin-container" id="adminContainer">
        <aside class="admin-sidebar">
            <div class="admin-logo">
                <h1>
                    <div class="icon">🏛️</div>
                    五大道导览
                </h1>
            </div>
            <nav class="admin-nav">
                <div class="admin-nav-item active" onclick="switchAdminTab('dashboard')">
                    <span class="icon">📊</span>
                    <span>数据统计</span>
                </div>
                <div class="admin-nav-item" onclick="switchAdminTab('spots')">
                    <span class="icon">📍</span>
                    <span>景点管理</span>
                </div>
                <div class="admin-nav-item" onclick="switchAdminTab('audio')">
                    <span class="icon">🎵</span>
                    <span>音频管理</span>
                </div>
                <div class="admin-nav-item" onclick="switchAdminTab('orders')">
                    <span class="icon">📋</span>
                    <span>订单管理</span>
                </div>
                <div class="admin-nav-item" onclick="switchAdminTab('settings')">
                    <span class="icon">⚙️</span>
                    <span>系统配置</span>
                </div>
            </nav>
            <div style="position: absolute; bottom: 24px; left: 12px; right: 12px;">
                <div class="admin-nav-item" onclick="switchAdminTab('tourist')">
                    <span class="icon">📱</span>
                    <span>返回小程序</span>
                </div>
            </div>
        </aside>

        <main class="admin-main">
            <!-- 数据统计 -->
            <div class="admin-page active" id="adminDashboard">
                <div class="admin-header">
                    <h2>数据统计</h2>
                    <div class="actions">
                        <button class="admin-btn secondary">📅 选择时间范围</button>
                        <button class="admin-btn secondary">📤 导出报表</button>
                    </div>
                </div>

                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="label">访问人数</div>
                        <div class="value">12,847</div>
                        <div class="trend">↑ 15.3% 较上周</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">付费人数</div>
                        <div class="value">2,156</div>
                        <div class="trend">↑ 8.7% 较上周</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">总收入</div>
                        <div class="value">¥186,420</div>
                        <div class="trend">↑ 12.5% 较上周</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">离线下载</div>
                        <div class="value">856</div>
                        <div class="trend">↑ 22.1% 较上周</div>
                    </div>
                </div>

                <div class="chart-container">
                    <div class="chart-header">
                        <h3>每日访问趋势</h3>
                        <div class="chart-legend">
                            <div class="legend-item">
                                <div class="legend-dot" style="background: var(--primary)"></div>
                                <span>访问人数</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-dot" style="background: var(--success)"></div>
                                <span>付费人数</span>
                            </div>
                        </div>
                    </div>
                    <div class="bar-chart">
                        <div class="bar-item">
                            <div class="bar" style="height: 120px"></div>
                            <span class="label">周一</span>
                        </div>
                        <div class="bar-item">
                            <div class="bar" style="height: 150px"></div>
                            <span class="label">周二</span>
                        </div>
                        <div class="bar-item">
                            <div class="bar" style="height: 100px"></div>
                            <span class="label">周三</span>
                        </div>
                        <div class="bar-item">
                            <div class="bar" style="height: 180px"></div>
                            <span class="label">周四</span>
                        </div>
                        <div class="bar-item">
                            <div class="bar" style="height: 160px"></div>
                            <span class="label">周五</span>
                        </div>
                        <div class="bar-item">
                            <div class="bar" style="height: 200px"></div>
                            <span class="label">周六</span>
                        </div>
                        <div class="bar-item">
                            <div class="bar" style="height: 190px"></div>
                            <span class="label">周日</span>
                        </div>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
                    <div class="chart-container">
                        <div class="chart-header">
                            <h3>各景点播放次数 TOP 10</h3>
                        </div>
                        <table style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>景点名称</th>
                                    <th>播放次数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>民园广场</td><td>2,345</td></tr>
                                <tr><td>疙瘩楼</td><td>1,876</td></tr>
                                <tr><td>庆王府</td><td>1,654</td></tr>
                                <tr><td>张学良故居</td><td>1,432</td></tr>
                                <tr><td>梁启超故居</td><td>1,208</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="chart-container">
                        <div class="chart-header">
                            <h3>优惠码使用统计</h3>
                        </div>
                        <table style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>优惠码</th>
                                    <th>使用次数</th>
                                    <th>使用金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>SPRING2026</td><td>156</td><td>¥12,012</td></tr>
                                <tr><td>WUXIADAO</td><td>89</td><td>¥6,856</td></tr>
                                <tr><td>VIP888</td><td>45</td><td>¥3,465</td></tr>
                                <tr><td>TIANJIN</td><td>32</td><td>¥2,464</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 景点管理 -->
            <div class="admin-page" id="adminSpots">
                <div class="admin-header">
                    <h2>景点管理</h2>
                    <div class="actions">
                        <button class="admin-btn secondary">📤 导入</button>
                        <button class="admin-btn primary" onclick="showSpotForm()">➕ 新增景点</button>
                    </div>
                </div>

                <div class="data-table">
                    <div class="table-header">
                        <h3>景点列表（共100个）</h3>
                        <div class="table-search">
                            <input type="text" placeholder="搜索景点名称...">
                            <button class="admin-btn secondary">搜索</button>
                        </div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>景点名称</th>
                                <th>简介</th>
                                <th>坐标</th>
                                <th>排序</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="spotsTableBody">
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 音频管理 -->
            <div class="admin-page" id="adminAudio">
                <div class="admin-header">
                    <h2>音频管理</h2>
                    <div class="actions">
                        <button class="admin-btn secondary">📤 批量上传</button>
                        <button class="admin-btn primary">➕ 上传音频</button>
                    </div>
                </div>

                <div class="data-table">
                    <div class="table-header">
                        <h3>音频列表（共100个）</h3>
                        <div class="table-search">
                            <input type="text" placeholder="搜索景点...">
                            <select style="padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;">
                                <option>全部状态</option>
                                <option>已上传</option>
                                <option>未上传</option>
                            </select>
                        </div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>绑定景点</th>
                                <th>文件名</th>
                                <th>时长</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="audioTableBody">
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 订单管理 -->
            <div class="admin-page" id="adminOrders">
                <div class="admin-header">
                    <h2>订单管理</h2>
                    <div class="actions">
                        <button class="admin-btn secondary">📤 导出Excel</button>
                        <button class="admin-btn secondary">📅 日期筛选</button>
                    </div>
                </div>

                <div class="data-table">
                    <div class="table-header">
                        <h3>订单列表</h3>
                        <div class="table-search">
                            <input type="text" placeholder="订单号/用户昵称/优惠码">
                            <select style="padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;">
                                <option>全部状态</option>
                                <option>已支付</option>
                                <option>已退款</option>
                                <option>待支付</option>
                            </select>
                        </div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>用户昵称</th>
                                <th>套餐类型</th>
                                <th>金额</th>
                                <th>优惠码</th>
                                <th>状态</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="ordersTableBody">
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 系统配置 -->
            <div class="admin-page" id="adminSettings">
                <div class="admin-header">
                    <h2>系统配置</h2>
                </div>

                <div class="settings-section">
                    <h3>💰 套餐价格设置</h3>
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
                        <div class="form-group">
                            <label>个人套餐 - 标准价格</label>
                            <input type="number" value="98" placeholder="请输入价格">
                        </div>
                        <div class="form-group">
                            <label>个人套餐 - 优惠价格</label>
                            <input type="number" value="68" placeholder="请输入价格">
                        </div>
                        <div class="form-group">
                            <label>家庭套餐 - 标准价格</label>
                            <input type="number" value="198" placeholder="请输入价格">
                        </div>
                        <div class="form-group">
                            <label>家庭套餐 - 优惠价格</label>
                            <input type="number" value="128" placeholder="请输入价格">
                        </div>
                    </div>
                    <button class="admin-btn primary" style="margin-top: 16px;" onclick="showToast('价格设置已保存')">保存设置</button>
                </div>

                <div class="settings-section">
                    <h3>🔧 功能开关</h3>
                    <div class="settings-row">
                        <div class="info">
                            <h4>GPS触发播报</h4>
                            <p>开启后，用户靠近景点会自动播放语音讲解</p>
                        </div>
                        <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                    </div>
                    <div class="settings-row">
                        <div class="info">
                            <h4>离线下载功能</h4>
                            <p>允许用户下载音频包离线使用</p>
                        </div>
                        <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                    </div>
                    <div class="settings-row">
                        <div class="info">
                            <h4>优惠码功能</h4>
                            <p>允许用户输入优惠码享受折扣</p>
                        </div>
                        <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                    </div>
                </div>

                <div class="settings-section">
                    <h3>🎨 Banner管理</h3>
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px;">
                        <div style="background: var(--bg); border-radius: 8px; padding: 16px; text-align: center; cursor: pointer;">
                            <div style="font-size: 48px; margin-bottom: 8px;">🖼️</div>
                            <div style="font-size: 14px;">添加Banner 1</div>
                        </div>
                        <div style="background: var(--bg); border-radius: 8px; padding: 16px; text-align: center; cursor: pointer;">
                            <div style="font-size: 48px; margin-bottom: 8px;">🖼️</div>
                            <div style="font-size: 14px;">添加Banner 2</div>
                        </div>
                        <div style="background: var(--bg); border-radius: 8px; padding: 16px; text-align: center; cursor: pointer;">
                            <div style="font-size: 48px; margin-bottom: 8px;">🖼️</div>
                            <div style="font-size: 14px;">添加Banner 3</div>
                        </div>
                    </div>
                </div>

                <div class="settings-section">
                    <h3>💬 在线客服</h3>
                    <div class="form-group">
                        <label>客服链接/二维码</label>
                        <input type="text" placeholder="请输入客服链接或上传二维码">
                    </div>
                    <button class="admin-btn primary" style="margin-top: 16px;" onclick="showToast('客服设置已保存')">保存设置</button>
                </div>
            </div>
        </main>

        <!-- 景点表单弹窗 -->
        <div class="form-modal" id="spotFormModal">
            <div class="form-content">
                <div class="form-header">
                    <h3 id="formTitle">新增景点</h3>
                    <span class="modal-close" onclick="closeSpotForm()">×</span>
                </div>
                <div class="form-body">
                    <div class="form-group">
                        <label>景点名称 *</label>
                        <input type="text" placeholder="请输入景点名称">
                    </div>
                    <div class="form-group">
                        <label>景点简介</label>
                        <textarea placeholder="请输入景点简介">