编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>美丽时光美容会所</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
            min-height: 100vh;
            background: #fff;
        }

        /* 页面容器 */
        .page {
            display: none;
            min-height: 100vh;
            padding-bottom: 70px;
        }

        .page.active {
            display: block;
        }

        /* 通用头部 */
        .page-header {
            position: sticky;
            top: 0;
            background: #fff;
            padding: 15px 15px 10px;
            z-index: 50;
            border-bottom: 1px solid #f0f0f0;
        }

        .page-header-title {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }

        /* Banner区域 */
        .banner {
            position: relative;
            width: 100%;
            height: 100vh;
            max-height: 600px;
            overflow: hidden;
        }

        .banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
        }

        .banner-logo {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.95);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .banner-logo svg {
            width: 50px;
            height: 50px;
        }

        .banner-title {
            font-size: 32px;
            font-weight: 300;
            letter-spacing: 8px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            margin-bottom: 10px;
        }

        .banner-subtitle {
            font-size: 14px;
            letter-spacing: 4px;
            opacity: 0.9;
            text-shadow: 0 1px 5px rgba(0,0,0,0.3);
        }

        .banner-scroll-hint {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            animation: bounce 2s infinite;
        }

        .banner-scroll-hint span {
            font-size: 12px;
            margin-bottom: 8px;
            opacity: 0.8;
        }

        @keyframes bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(10px); }
        }

        .scroll-arrow {
            width: 24px;
            height: 24px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg);
            opacity: 0.8;
        }

        /* 内容区域 */
        .content {
            padding: 20px 15px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 500;
            color: #1a1a1a;
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 40px;
            height: 2px;
            background: linear-gradient(135deg, #d4a574, #e8c4a0);
            margin: 12px auto 0;
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 30px;
        }

        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px 5px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .category-item:active {
            transform: scale(0.95);
            background: #fafafa;
        }

        .category-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
        }

        .category-icon svg {
            width: 24px;
            height: 24px;
        }

        .category-name {
            font-size: 12px;
            color: #666;
        }

        .hot-projects {
            margin-bottom: 30px;
        }

        .project-list {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding-bottom: 10px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .project-list::-webkit-scrollbar {
            display: none;
        }

        .project-card {
            flex-shrink: 0;
            width: 140px;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: all 0.3s ease;
        }

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

        .project-image {
            width: 100%;
            height: 100px;
            object-fit: cover;
            background: linear-gradient(135deg, #f8e8d8, #f0d8c8);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .project-image svg {
            width: 40px;
            height: 40px;
            opacity: 0.5;
        }

        .project-info {
            padding: 12px;
        }

        .project-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-price {
            font-size: 16px;
            color: #c8a479;
            font-weight: 600;
        }

        .project-price span {
            font-size: 11px;
            color: #999;
            font-weight: 400;
        }

        .technician-section {
            margin-bottom: 30px;
        }

        .technician-list {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding-bottom: 10px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .technician-list::-webkit-scrollbar {
            display: none;
        }

        .technician-card {
            flex-shrink: 0;
            width: 100px;
            text-align: center;
            cursor: pointer;
        }

        .technician-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            margin: 0 auto 10px;
            background: linear-gradient(135deg, #e8d8c8, #d8c8b8);
            display: flex;
            justify-content: center;
            align-items: center;
            border: 3px solid #fff;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .technician-avatar svg {
            width: 35px;
            height: 35px;
            opacity: 0.5;
        }

        .technician-name {
            font-size: 13px;
            color: #333;
            font-weight: 500;
        }

        .technician-title {
            font-size: 11px;
            color: #999;
            margin-top: 2px;
        }

        .store-info {
            background: linear-gradient(135deg, #faf6f3, #f5efe9);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .store-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .store-logo {
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
        }

        .store-logo svg {
            width: 30px;
            height: 30px;
            opacity: 0.6;
        }

        .store-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .store-address {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
            padding-left: 62px;
        }

        .store-contact {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .contact-btn {
            flex: 1;
            padding: 12px;
            border-radius: 25px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .contact-btn:active {
            transform: scale(0.97);
            opacity: 0.9;
        }

        .contact-btn.primary {
            background: linear-gradient(135deg, #d4a574, #c49464);
            color: #fff;
        }

        .contact-btn.secondary {
            background: #fff;
            color: #333;
            border: 1px solid #e0e0e0;
        }

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

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 5px 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-item svg {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
            opacity: 0.5;
            transition: all 0.3s ease;
        }

        .nav-item span {
            font-size: 11px;
            color: #999;
            transition: all 0.3s ease;
        }

        .nav-item.active svg {
            opacity: 1;
        }

        .nav-item.active span {
            color: #c8a479;
        }

        .nav-item:active {
            transform: scale(0.9);
        }

        .page-bottom {
            height: 70px;
        }

        /* ========== 项目页面 ========== */
        .project-filter {
            display: flex;
            gap: 12px;
            padding: 15px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .project-filter::-webkit-scrollbar {
            display: none;
        }

        .filter-tag {
            flex-shrink: 0;
            padding: 8px 16px;
            background: #f5f5f5;
            border-radius: 20px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-tag.active {
            background: linear-gradient(135deg, #d4a574, #c49464);
            color: #fff;
        }

        .filter-tag:active {
            transform: scale(0.95);
        }

        .project-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 0 15px 20px;
        }

        .project-grid-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            cursor: pointer;
        }

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

        .project-grid-image {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, #f8e8d8, #f0d8c8);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .project-grid-image svg {
            width: 50px;
            height: 50px;
            opacity: 0.4;
        }

        .project-grid-info {
            padding: 12px;
        }

        .project-grid-name {
            font-size: 14px;
            font-weight: 500;
color: #333;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
            height: 40px;
        }

        .project-grid-price {
            font-size: 16px;
            color: #c8a479;
            font-weight: 600;
        }

        .project-grid-price span {
            font-size: 11px;
            color: #999;
        }

        /* ========== 订单页面 ========== */
        .order-tabs {
            display: flex;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
        }

        .order-tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            position: relative;
        }

        .order-tab.active {
            color: #c8a479;
            font-weight: 600;
        }

        .order-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background: linear-gradient(135deg, #d4a574, #c49464);
            border-radius: 2px;
        }

        .order-list {
            padding: 15px;
        }

        .order-item {
            background: #fff;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

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

        .order-number {
            font-size: 12px;
            color: #999;
        }

        .order-status {
            font-size: 13px;
            color: #c8a479;
            font-weight: 500;
        }

        .order-status.pending {
            color: #ff9800;
        }

        .order-status.completed {
            color: #4caf50;
        }

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

        .order-image {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #f8e8d8, #f0d8c8);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }

        .order-image svg {
            width: 30px;
            height: 30px;
            opacity: 0.4;
        }

        .order-detail {
            flex: 1;
        }

        .order-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 6px;
        }

        .order-info {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
        }

        .order-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
        }

        .order-price {
            font-size: 16px;
            color: #c8a479;
            font-weight: 600;
        }

        .order-action {
            padding: 6px 16px;
            background: linear-gradient(135deg, #d4a574, #c49464);
            color: #fff;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
        }

        .order-action:active {
            transform: scale(0.95);
            opacity: 0.9;
        }

        .order-empty {
            text-align: center;
            padding: 60px 0;
        }

        .order-empty svg {
            width: 80px;
            height: 80px;
            opacity: 0.3;
            margin-bottom: 20px;
        }

        .order-empty p {
            color: #999;
            font-size: 14px;
        }

        /* ========== 我的页面 ========== */
        .user-header {
            background: linear-gradient(135deg, #d4a574, #c49464);
            padding: 30px 15px;
            color: #fff;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid rgba(255,255,255,0.5);
        }

        .user-avatar svg {
            width: 30px;
            height: 30px;
            opacity: 0.8;
        }

        .user-detail {
            flex: 1;
        }

        .user-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .user-phone {
            font-size: 13px;
            opacity: 0.8;
        }

        .user-vip {
            display: inline-block;
            padding: 3px 10px;
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            font-size: 11px;
            margin-top: 6px;
        }

        .user-stats {
            display: flex;
            margin-top: 20px;
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 15px;
        }

        .stat-item {
            flex: 1;
            text-align: center;
        }

        .stat-value {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 11px;
            opacity: 0.8;
        }

        .stat-divider {
            width: 1px;
            background: rgba(255,255,255,0.3);
        }

        .menu-section {
            padding: 15px;
        }

        .menu-group {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }

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

        .menu-item:active {
            background: #fafafa;
        }

        .menu-icon {
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
        }

        .menu-icon svg {
            width: 20px;
            height: 20px;
            opacity: 0.6;
        }

        .menu-text {
            flex: 1;
            font-size: 14px;
            color: #333;
        }

        .menu-arrow {
            width: 20px;
            height: 20px;
            opacity: 0.3;
        }

        /* 弹窗层 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 200;
            animation: fadeIn 0.3s ease;
        }

        .modal.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 750px;
            background: #fff;
            border-radius: 20px 20px 0 0;
            padding: 20px;
            animation: slideUp 0.3s ease;
        }

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

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

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

        .modal-close {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .modal-close svg {
            width: 20px;
            height: 20px;
            opacity: 0.5;
        }

        .modal-body {
            text-align: center;
            padding: 20px 0;
        }

        .modal-body p {
            font-size: 14px;
            color: #666;
            line-height: 1.8;
            white-space: pre-line;
            text-align: left;
        }

        .modal-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #d4a574, #c49464);
            color: #fff;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
        }

        .modal-btn:active {
            transform: scale(0.98);
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <!-- ========== 首页 ========== -->
    <div class="page active" id="page-home">
        <div class="banner">
            <img src="https://img.freepik.com/premium-photo/modern-elegant-interior-design-professional-beauty-salon-spa-with-luxury-styling-chair_848676-5159.jpg" alt="美丽时光美容会所" class="banner-image">
            <div class="banner-overlay">
                <div class="banner-logo">
                    <svg viewBox="0 0 50 50" fill="none">
                        <path d="M25 5C20 10 12 18 12 28C12 35 17 40 25 40C33 40 38 35 38 28C38 18 30 10 25 5Z" fill="#d4a574"/>
                        <path d="M25 15C23 18 20 23 20 28C20 32 22 35 25 35C28 35 30 32 30 28C30 23 27 18 25 15Z" fill="#fff"/>
                    </svg>
                </div>
                <h1 class="banner-title">美丽时光</h1>
                <p class="banner-subtitle">美容会所</p>
            </div>
            <div class="banner-scroll-hint">
                <span>向下滑动</span>
                <div class="scroll-arrow"></div>
            </div>
        </div>

        <div class="content">
            <h2 class="section-title">精选服务</h2>
            <div class="category-grid">
                <div class="category-item" onclick="switchPage('page-project'); filterProject('面部护理')">
                    <div class="category-icon" style="background: linear-gradient(135deg, #ffe8e0, #ffd0c0);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#d4785c" stroke-width="2">
                            <circle cx="12" cy="8" r="5"/>
                            <path d="M3 21c0-4 4-7 9-7s9 3 9 7"/>
                        </svg>
                    </div>
                    <span class="category-name">面部护理</span>
                </div>
                <div class="category-item" onclick="switchPage('page-project'); filterProject('身体SPA')">
                    <div class="category-icon" style="background: linear-gradient(135deg, #e8f0ff, #d0e0ff);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#5c8fd4" stroke-width="2">
                            <path d="M12 2v6m0 0a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>
                            <path d="M4 14c0 2 2 4 4 4h8c2 0 4-2 4-4"/>
                        </svg>
                    </div>
                    <span class="category-name">身体SPA</span>
                </div>
                <div class="category-item" onclick="switchPage('page-project'); filterProject('美甲美睫')">
                    <div class="category-icon" style="background: linear-gradient(135deg, #fff0e0, #ffe0c0);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#d4a05c" stroke-width="2">
                            <path d="M6 12c0-3 2-6 6-6s6 3 6 6"/>
                            <path d="M12 12v8"/>
                            <path d="M8 18h8"/>
                        </svg>
                    </div>
                    <span class="category-name">美甲美睫</span>
                </div>
                <div class="category-item" onclick="switchPage('page-project'); filterProject('美容仪器')">
                    <div class="category-icon" style="background: linear-gradient(135deg, #f0e8ff, #e0d0ff);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#8c5cd4" stroke-width="2">
                            <rect x="4" y="4" width="16" height="16" rx="2"/>
                            <circle cx="12" cy="12" r="3"/>
                            <path d="M12 4v3m0 10v3m-5-5H4m16 0h-3"/>
                        </svg>
                    </div>
                    <span class="category-name">美容仪器</span>
                </div>
            </div>

            <div class="hot-projects">
                <h2 class="section-title">热门推荐</h2>
                <div class="project-list">
                    <div class="project-card" onclick="showModal('韩国小气泡深层清洁', '采用韩国先进的小气泡技术，深层清洁毛孔，去除黑头粉刺，补充肌肤水分。\n\n适合肤质：所有肤质\n推荐人群：油性及混合性肌肤\n服务时长：60分钟\n市场价格：¥328')">
                        <div class="project-image">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5">
                                <circle cx="12" cy="12" r="8"/>
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </div>
                        <div class="project-info">
                            <div class="project-name">韩国小气泡深层清洁</div>
                            <div class="project-price">¥328 <span>起</span></div>
                        </div>
                    </div>
                    <div class="project-card" onclick="showModal('法尔曼贵妇级面部护理', '源自瑞士的顶级护肤品牌，蕴含珍贵活性成分，焕活肌肤细胞，重现年轻光彩。\n\n适合肤质：所有肤质\n推荐人群：熟龄肌肤需求者\n服务时长：90分钟\n市场价格：¥1280')">
                        <div class="project-image">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5">
                                <path d="M12 3c-4 0-8 4-8 8s4 10 8 10 8-6 8-10-4-8-8-8z"/>
                            </svg>
                        </div>
                        <div class="project-info">
                            <div class="project-name">法尔曼贵妇级面部护理</div>
                            <div class="project-price">¥1280 <span>起</span></div>
                        </div>
                    </div>
                    <div class="project-card" onclick="showModal('全身芳香精油按摩', '甄选天然植物精油，配合专业按摩手法，舒缓肌肉紧张，释放身心压力。\n\n适合人群：压力大人群\n推荐功效：舒缓放松\n服务时长：75分钟\n市场价格：¥458')">
                        <div class="project-image">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5">
                                <path d="M12 2l3 7h7l-5.5 4.5 2 7L12 16l-6.5 4.5 2-7L2 9h7l3-7z"/>
                            </svg>
                        </div>
                        <div class="project-info">
                            <div class="project-name">全身芳香精油按摩</div>
                            <div class="project-price">¥458 <span>起</span></div>
                        </div>
                    </div>
                    <div class="project-card" onclick="showModal('日式美睫嫁接', '采用日本进口睫毛材料，专业技师一对一嫁接，持久自然，舒适无异物感。\n\n睫毛材质：日本进口蚕丝蛋白\n持久度：1-2个月\n服务时长：45分钟\n市场价格：¥298')">
                        <div class="project-image">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5">
                                <path d="M4 12c2-4 6-6 8-6s6 2 8 6"/>
                                <path d="M4 12v4c0 2 2 4 4 4"/>
                                <path d="M20 12v4c0 2-2 4-4 4"/>
                            </svg>
                        </div>
                        <div class="project-info">
                            <div class="project-name">日式美睫嫁接</div>
                            <div class="project-price">¥298 <span>起</span></div>
                        </div>
                    </div>
                    <div class="project-card" onclick="showModal('肩颈舒缓理疗', '针对现代人常见的肩颈问题，精准放松紧绷肌肉，缓解疲劳酸痛。\n\n适合人群：久坐办公人群\n主要功效：缓解酸痛\n服务时长：40分钟\n市场价格：¥198')">
                        <div class="project-image">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5">
                                <path d="M12 4v16"/>
                                <path d="M8 8l4-4 4 4"/>
                                <path d="M6 12h4m4 0h4"/>
                            </svg>
                        </div>
                        <div class="project-info">
                            <div class="project-name">肩颈舒缓理疗</div>
                            <div class="project-price">¥198 <span>起</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="technician-section">
                <h2 class="section-title">明星技师</h2>
                <div class="technician-list">
                    <div class="technician-card" onclick="showModal('Linda 首席美容师', '资深美容师，从业10年\n\n擅长领域：面部抗衰、问题肌护理\n资质认证：国家高级美容师\n服务评价：★★★★★\n\n曾为多位明星提供专属服务，技术精湛，备受客户信赖。')">
                        <div class="technician-avatar">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#8c7c6c" stroke-width="1.5">
                                <circle cx="12" cy="8" r="4"/>
                                <path d="M4 20c0-4 4-7 8-7s8 3 8 7"/>
                            </svg>
                        </div>
                        <div class="technician-name">Linda</div>
                        <div class="technician-title">首席美容师</div>
                    </div>
                    <div class="technician-card" onclick="showModal('陈雪 SPA理疗师', '专业SPA理疗师\n\n擅长领域：芳疗按摩、身体理疗\n资质认证：国际芳疗师认证\n服务评价：★★★★★\n\n擅长结合中医经络与西方芳疗技术，效果显著。')">
                        <div class="technician-avatar">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#8c7c6c" stroke-width="1.5">
                                <circle cx="12" cy="8" r="4"/>
                                <path d="M4 20c0-4 4-7 8-7s8 3 8 7"/>
                            </svg>
                        </div>
                        <div class="technician-name">陈雪</div>
                        <div class="technician-title">SPA理疗师</div>
                    </div>
                    <div class="technician-card" onclick="showModal('王妍 美睫师', '资深美睫师\n\n擅长领域：睫毛嫁接、眼部护理\n资质认证：日本JLA认证美睫师\n服务评价：★★★★☆\n\n经验丰富，手法轻柔细致，深受客户好评。')">
                        <div class="technician-avatar">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#8c7c6c" stroke-width="1.5">
                                <circle cx="12" cy="8" r="4"/>
                                <path d="M4 20c0-4 4-7 8-7s8 3 8 7"/>
                            </svg>
                        </div>
                        <div class="technician-name">王妍</div>
                        <div class="technician-title">美睫师</div>
                    </div>
                    <div class="technician-card" onclick="showModal('李婷 高级美容师', '高级美容师\n\n擅长领域：皮肤管理、个性化方案\n资质认证：皮肤管理师认证\n服务评价：★★★★★\n\n专注皮肤管理多年，擅长根据肤质制定个性化护理方案。')">
                        <div class="technician-avatar">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#8c7c6c" stroke-width="1.5">
                                <circle cx="12" cy="8" r="4"/>
                                <path d="M4 20c0-4 4-7 8-7s8 3 8 7"/>
                            </svg>
                        </div>
                        <div class="technician-name">李婷</div>
                        <div class="technician-title">高级美容师</div>
                    </div>
                </div>
            </div>

            <div class="store-info">
                <div class="store-header">
                    <div class="store-logo">
                        <svg viewBox="0 0 30 30" fill="none">
                            <path d="M15 3C10 8 6 14 6 20c0 4 3 7 9 7s9-3 9-7c0-6-4-12-9-17z" fill="#d4a574"/>
                            <circle cx="15" cy="15" r="4" fill="#fff"/>
                        </svg>
                    </div>
                    <div class="store-name">美丽时光美容会所</div>
                </div>
                <div class="store-address">
                    地址：上海市静安区南京西路1266号恒隆广场3层<br>
                    电话：021-6288-8888
                </div>
                <div class="store-contact">
                    <div class="contact-btn secondary">电话咨询</div>
                    <div class="contact-btn primary">立即预约</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ========== 项目页面 ========== -->
    <div class="page" id="page-project">
        <div class="page-header">
            <div class="page-header-title">全部项目</div>
        </div>

        <div class="project-filter">
            <div class="filter-tag active" onclick="filterProject('')">全部</div>
            <div class="filter-tag" onclick="filterProject('面部护理')">面部护理</div>
            <div class="filter-tag" onclick="filterProject('身体SPA')">身体SPA</div>
            <div class="filter-tag" onclick="filterProject('美甲美睫')">美甲美睫</div>
            <div class="filter-tag" onclick="filterProject('美容仪器')">美容仪器</div>
        </div>

        <div class="project-grid" id="project-grid">
            <!-- 项目将通过JS动态生成 -->
        </div>
    </div>

    <!-- ========== 订单页面 ========== -->
    <div class="page" id="page-order">
        <div class="page-header">
            <div class="page-header-title">我的订单</div>
        </div>

        <div class="order-tabs">
            <div class="order-tab active" onclick="filterOrder('all')">全部</div>
            <div class="order-tab" onclick="filterOrder('pending')">待服务</div>
            <div class="order-tab" onclick="filterOrder('ongoing')">进行中</div>
            <div class="order-tab" onclick="filterOrder('completed')">已完成</div>
        </div>

        <div class="order-list" id="order-list">
            <!-- 订单将通过JS动态生成 -->
        </div>
    </div>

    <!-- ========== 我的页面 ========== -->
    <div class="page" id="page-user">
        <div class="user-header">
            <div class="user-info">
                <div class="user-avatar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
                        <circle cx="12" cy="8" r="4"/>
                        <path d="M4 20c0-4 4-7 8-7s8 3 8 7"/>
                    </svg>
                </div>
                <div class="user-detail">
                    <div class="user-name">李小姐</div>
                    <div class="user-phone">138****8888</div>
                    <div class="user-vip">VIP会员</div>
                </div>
            </div>
            <div class="user-stats">
                <div class="stat-item">
                    <div class="stat-value">8</div>
                    <div class="stat-label">优惠券</div>
                </div>
                <div class="stat-divider"></div>
                <div class="stat-item">
                    <div class="stat-value">1,280</div>
                    <div class="stat-label">积分</div>
                </div>
                <div class="stat-divider"></div>
                <div class="stat-item">
                    <div class="stat-value">5</div>
                    <div class="stat-label">收藏</div>
                </div>
            </div>
        </div>

        <div class="menu-section">
            <div class="menu-group">
                <div class="menu-item" onclick="showModal('会员卡', '您当前是VIP会员\n\n会员权益：\n• 享受8.8折优惠\n• 优先预约时段\n• 专属客服服务\n• 每月免费护理一次\n\n有效期至：2026年12月31日')">
                    <div class="menu-icon" style="background: linear-gradient(135deg, #ffe8e0, #ffd0c0);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#d4785c" stroke-width="2">
                            <rect x="2" y="5" width="20" height="14" rx="2"/>
                            <path d="M2 10h20"/>
                        </svg>
                    </div>
                    <span class="menu-text">会员卡</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </div>
                <div class="menu-item" onclick="showModal('优惠券', '您有8张可用优惠券\n\n可用优惠券：\n• 新客专享券 ¥50（满200可用）\n• 满减券 ¥100（满500可用）x3\n• 项目专享券 8折（面部护理）\n• 好友邀请券 ¥30 x2\n• 生日礼券 ¥80')">
                    <div class="menu-icon" style="background: linear-gradient(135deg, #fff0e0, #ffe0c0);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#d4a05c" stroke-width="2">
                            <path d="M20 12v6a2 2 0 01-2 2H6a2 2 0 01-2-2v-6"/>
                            <path d="M12 6v12"/>
                            <path d="M8 6v12"/>
                        </svg>
                    </div>
                    <span class="menu-text">优惠券</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </div>
                <div class="menu-item" onclick="showModal('我的收藏', '您共收藏了5个项目\n\n收藏列表：\n1. 韩国小气泡深层清洁\n2. 法尔曼贵妇级面部护理\n3. 全身芳香精油按摩\n4. 日式美睫嫁接\n5. 肩颈舒缓理疗')">
                    <div class="menu-icon" style="background: linear-gradient(135deg, #f0e8ff, #e0d0ff);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#8c5cd4" stroke-width="2">
                            <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"/>
                        </svg>
                    </div>
                    <span class="menu-text">我的收藏</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </div>
            </div>

            <div class="menu-group">
                <div class="menu-item" onclick="showModal('预约记录', '暂无预约记录\n\n您还没有预约任何服务\n点击下方按钮开始预约')">
                    <div class="menu-icon" style="background: linear-gradient(135deg, #e8f0ff, #d0e0ff);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#5c8fd4" stroke-width="2">
                            <rect x="3" y="4" width="18" height="18" rx="2"/>
                            <path d="M16 2v4M8 2v4M3 10h18"/>
                        </svg>
                    </div>
                    <span class="menu-text">预约记录</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </div>
                <div class="menu-item" onclick="showModal('历史评价', '暂无评价记录\n\n完成服务后可对技师进行评价')">
                    <div class="menu-icon" style="background: linear-gradient(135deg, #e8ffe0, #d0ffb8);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#5cd46d" stroke-width="2">
                            <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"/>
                        </svg>
                    </div>
                    <span class="menu-text">历史评价</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </div>
            </div>

            <div class="menu-group">
                <div class="menu-item" onclick="showModal('帮助中心', '美丽时光美容会所\n\n客服热线：021-6288-8888\n服务时间：周一至周日 10:00-22:00\n\n常见问题：\nQ: 如何预约？\nA: 在项目页面选择服务，填写预约信息即可。\n\nQ: 预约可以改期吗？\nA: 可以在预约时间前2小时修改。\n\nQ: 支持退款吗？\nA: 未消费可全额退款，联系客服即可。')">
                    <div class="menu-icon" style="background: linear-gradient(135deg, #f5f5f5, #e8e8e8);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="M9 9a3 3 0 115 2.5c0 1.5-3 2-3 4"/>
                            <circle cx="12" cy="18" r="1"/>
                        </svg>
                    </div>
                    <span class="menu-text">帮助中心</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </div>
                <div class="menu-item" onclick="showModal('关于我们', '美丽时光美容会所\n\n我们是一家专业的美容SPA会所，致力于为每位顾客提供高品质的美容服务。\n\n联系方式：\n电话：021-6288-8888\n地址：上海市静安区南京西路1266号恒隆广场3层\n\n营业时间：周一至周日 10:00-22:00')">
                    <div class="menu-icon" style="background: linear-gradient(135deg, #f5f5f5, #e8e8e8);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="M12 16v-4"/>
                            <path d="M12 8h.01"/>
                        </svg>
                    </div>
                    <span class="menu-text">关于我们</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" onclick="switchPage('page-home')">
            <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C8 2 4 6 4 10c0 6 8 12 8 12s8-6 8-12c0-4-4-8-8-8zm0 10c-1 0-2-.5-2-2s1-2 2-2 2 .5 2 2-1 2-2 2z"/>
            </svg>
            <span>首页</span>
        </div>
        <div class="nav-item" onclick="switchPage('page-project')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="7" height="7" rx="1"/>
                <rect x="14" y="3" width="7" height="7" rx="1"/>
                <rect x="3" y="14" width="7" height="7" rx="1"/>
                <rect x="14" y="14" width="7" height="7" rx="1"/>
            </svg>
            <span>项目</span>
        </div>
        <div class="nav-item" onclick="switchPage('page-order')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M8 2v4m8-4v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z"/>
            </svg>
            <span>订单</span>
        </div>
        <div class="nav-item" onclick="switchPage('page-user')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="8" r="4"/>
                <path d="M4 20c0-4 4-7 8-7s8 3 8 7"/>
            </svg>
            <span>我的</span>
        </div>
    </div>

    <div class="page-bottom"></div>

    <!-- 详情弹窗 -->
    <div class="modal" id="modal" onclick="closeModal(event)">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <div class="modal-title" id="modal-title">标题</div>
                <div class="modal-close" onclick="closeModal()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18 6L6 18M6 6l12 12"/>
                    </svg>
                </div>
            </div>
            <div class="modal-body">
                <p id="modal-content">内容</p>
            </div>
            <button class="modal-btn" onclick="closeModal()">知道了</button>
        </div>
    </div>

    <script>
        // 项目数据
        const projectData = [
            { id: 1, name: '韩国小气泡深层清洁', price: 328, category: '面部护理', duration: '60分钟', icon: 'circle' },
            { id: 2, name: '法尔曼贵妇级面部护理', price: 1280, category: '面部护理', duration: '90分钟', icon: 'heart' },
            { id: 3, name: '补水保湿精华护理', price: 258, category: '面部护理', duration: '45分钟', icon: 'drop' },
            { id: 4, name: '抗衰老紧致提升', price: 880, category: '面部护理', duration: '75分钟', icon: 'star' },
            { id: 5, name: '全身芳香精油按摩', price: 458, category: '身体SPA', duration: '75分钟', icon: 'star' },
            { id: 6, name: '肩颈舒缓理疗', price: 198, category: '身体SPA', duration: '40分钟', icon: 'plus' },
            { id: 7, name: '淋巴排毒护理', price: 368, category: '身体SPA', duration: '60分钟', icon: 'circle' },
            { id: 8, name: '背部热石理疗', price: 328, category: '身体SPA', duration: '50分钟', icon: 'circle' },
            { id: 9, name: '日式美睫嫁接', price: 298, category: '美甲美睫', duration: '45分钟', icon: 'eye' },
            { id: 10, name: '精致美甲套餐', price: 168, category: '美甲美睫', duration: '60分钟', icon: 'hand' },
            { id: 11, name: '眼部SPA护理', price: 128, category: '美甲美睫', duration: '30分钟', icon: 'eye' },
            { id: 12, name: '皮肤检测分析', price: 88, category: '美容仪器', duration: '20分钟', icon: 'scan' },
            { id: 13, name: '光子嫩肤护理', price: 680, category: '美容仪器', duration: '45分钟', icon: 'sun' },
            { id: 14, name: '射频紧致提升', price: 580, category: '美容仪器', duration: '40分钟', icon: 'zap' },
            { id: 15, name: '冰点脱毛护理', price: 398, category: '美容仪器', duration: '30分钟', icon: 'wind' },
            { id: 16, name: '超声刀面部提拉', price: 1880, category: '美容仪器', duration: '90分钟', icon: 'activity' },
        ];

        // 订单数据
        const orderData = [
            { id: 'ML20240513001', name: '韩国小气泡深层清洁', price: 328, date: '2024-05-13 14:00', status: 'pending', technician: 'Linda', icon: 'circle' },
            { id: 'ML20240512002', name: '全身芳香精油按摩', price: 458, date: '2024-05-12 10:00', status: 'ongoing', technician: '陈雪', icon: 'star' },
            { id: 'ML20240510003', name: '日式美睫嫁接', price: 298, date: '2024-05-10 15:00', status: 'completed', technician: '王妍', icon: 'eye' },
        ];

        // 切换页面
        function switchPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            
            document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
            const navIndex = ['page-home', 'page-project', 'page-order', 'page-user'].indexOf(pageId);
            document.querySelectorAll('.nav-item')[navIndex].classList.add('active');
        }

        // 弹窗功能
        function showModal(title, content) {
            document.getElementById('modal-title').textContent = title;
            document.getElementById('modal-content').textContent = content;
            document.getElementById('modal').classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeModal(event) {
            if (event && event.target !== document.getElementById('modal')) return;
            document.getElementById('modal').classList.remove('active');
            document.body.style.overflow = '';
        }

        // 生成项目图标SVG
        function getProjectIcon(type) {
            const icons = {
                circle: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><circle cx="12" cy="12" r="8"/></svg>',
                heart: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M12 21C12 21 4 14 4 9C4 6 6 4 9 4C11 4 12 5 12 5C12 5 13 4 15 4C18 4 20 6 20 9C20 14 12 21 12 21Z"/></svg>',
                drop: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M12 2C12 2 6 10 6 14C6 17 9 20 12 20C15 20 18 17 18 14C18 10 12 2 12 2Z"/></svg>',
                star: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"/></svg>',
                plus: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M12 5v14m-7-7h14"/></svg>',
                eye: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
                hand: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M18 11V6a2 2 0 00-2-2 2 2 0 00-2 2v0M14 10V4a2 2 0 00-2-2 2 2 0 00-2 2v6M10 10V6a2 2 0 00-2-2 2 2 0 00-2 2v8"/><path d="M18 11a2 2 0 014 0v3a8 8 0 01-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.61a2 2 0 012.8-2.8"/></svg>',
                scan: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M3 7V5a2 2 0 012-2h2m0 16v2a2 2 0 01-2 2H5m16-16v2a2 2 0 01-2 2h-2m0-16V5a2 2 0 012-2h2"/><rect x="7" y="7" width="10" height="10"/></svg>',
                sun: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>',
                zap: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>',
                wind: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M9.59 4.59A2 2 0 1011 8H2m12.59 11.41A2 2 0 1014 16H2m15.73-8.27A2.5 2.5 0 1119.5 12H2"/></svg>',
                activity: '<svg viewBox="0 0 24 24" fill="none" stroke="#c8a479" stroke-width="1.5"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>'
            };
            return icons[type] || icons.circle;
        }

        // 渲染项目列表
        function renderProjects(filter = '') {
            const grid = document.getElementById('project-grid');
            const filtered = filter ? projectData.filter(p => p.category === filter) : projectData;
            
            grid.innerHTML = filtered.map(p => `
                <div class="project-grid-card" onclick="showModal('${p.name}', '服务项目：${p.name}\n\n类别：${p.category}\n服务时长：${p.duration}\n市场价格：¥${p.price}\n\n点击下方按钮立即预约')">
                    <div class="project-grid-image">
                        ${getProjectIcon(p.icon)}
                    </div>
                    <div class="project-grid-info">
                        <div class="project-grid-name">${p.name}</div>
                        <div class="project-grid-price">¥${p.price} <span>起</span></div>
                    </div>
                </div>
            `).join('');
        }

        // 项目筛选
        function filterProject(category) {
            document.querySelectorAll('.filter-tag').forEach(tag => tag.classList.remove('active'));
            event.target.classList.add('active');
            renderProjects(category);
        }

        // 订单状态文本
        function getStatusText(status) {
            const statusMap = {
                pending: '待服务',
                ongoing: '服务中',
                completed: '已完成'
            };
            return statusMap[status] || status;
        }

        // 渲染订单列表
        function renderOrders(filter = 'all') {
            const list = document.getElementById('order-list');
            const filtered = filter === 'all' ? orderData : orderData.filter(o => o.status === filter);
            
            if (filtered.length === 0) {
                list.innerHTML = `
                    <div class="order-empty">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5">
                            <path d="M8 2v4m8-4v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z"/>
                        </svg>
                        <p>暂无订单记录</p>
                    </div>
                `;
                return;
            }
            
            list.innerHTML = filtered.map(o => `
                <div class="order-item">
                    <div class="order-header">
                        <span class="order-number">订单号：${o.id}</span>
                        <span class="order-status ${o.status}">${getStatusText(o.status)}</span>
                    </div>
                    <div class="order-content">
                        <div class="order-image">
                            ${getProjectIcon(o.icon)}
                        </div>
                        <div class="order-detail">
                            <div class="order-name">${o.name}</div>
                            <div class="order-info">预约时间：${o.date}</div>
                            <div class="order-info">技师：${o.technician}</div>
                        </div>
                    </div>
                    <div class="order-footer">
                        <span class="order-price">¥${o.price}</span>
                        ${o.status === 'pending' ? '<div class="order-action">取消预约</div>' : ''}
                        ${o.status === 'ongoing' ? '<div class="order-action">查看详情</div>' : ''}
                        ${o.status === 'completed' ? '<div class="order-action">去评价</div>' : ''}
                    </div>
                </div>
            `).join('');
        }

        // 订单筛选
        function filterOrder(status) {
            document.querySelectorAll('.order-tab').forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            renderOrders(status);
        }

        // 初始化
        renderProjects();
        renderOrders();
    </script>
</body>
</html>