编辑页面

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;
        }

        :root {
            --primary: #E8B4B8;
            --secondary: #5D9C9C;
            --accent: #F4A460;
            --bg: #FDF6F0;
            --text: #4A4A4A;
            --text-light: #7A7A7A;
            --white: #FFFFFF;
            --shadow: 0 4px 12px rgba(0,0,0,0.08);
            --radius: 16px;
            --radius-lg: 28px;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 18px;
            line-height: 1.8;
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--primary), #D4949A);
            padding: 12px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--white);
        }

        .header-logo svg {
            width: 36px;
            height: 36px;
        }

        .header-title {
            font-size: 20px;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .header-user {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .header-user:active {
            transform: scale(1.1);
        }

        .header-user svg {
            width: 24px;
            height: 24px;
            color: var(--primary);
        }

        /* Main Content */
        .main-content {
            padding-bottom: 80px;
            min-height: calc(100vh - 60px);
        }

        /* Page Container */
        .page {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .page.active {
            display: block;
        }

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

        /* Banner */
        .banner {
            position: relative;
            margin: 16px;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .banner-slider {
            display: flex;
            transition: transform 0.5s ease;
        }

        .banner-slide {
            min-width: 100%;
            height: 180px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: var(--white);
            text-align: center;
            padding: 20px;
        }

        .banner-slide:nth-child(2) {
            background: linear-gradient(135deg, var(--secondary), #4A8080);
        }

        .banner-slide:nth-child(3) {
            background: linear-gradient(135deg, var(--accent), #E8944D);
        }

        .banner-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .banner-subtitle {
            font-size: 16px;
            opacity: 0.9;
        }

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

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

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

        /* Quick Services */
        .quick-services {
            padding: 0 16px;
            margin-top: 24px;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .section-title-more {
            font-size: 14px;
            color: var(--text-light);
            font-weight: normal;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .service-item {
            background: var(--white);
            border-radius: var(--radius);
            padding: 16px 8px;
            text-align: center;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .service-item:active {
            transform: scale(0.95);
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .service-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 8px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service-icon svg {
            width: 28px;
            height: 28px;
            color: var(--white);
        }

        .service-icon.pink { background: var(--primary); }
        .service-icon.green { background: var(--secondary); }
        .service-icon.orange { background: var(--accent); }

        .service-name {
            font-size: 14px;
            font-weight: 500;
        }

        /* Activity Banner */
        .activity-banner {
            padding: 0 16px;
            margin-top: 24px;
        }

        .activity-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .activity-card {
            background: var(--white);
            border-radius: var(--radius);
            padding: 20px 16px;
            text-align: center;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

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

        .activity-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }

        .activity-card.travel::before {
            background: linear-gradient(90deg, #FF6B6B, #FF8E53);
        }

        .activity-card.culture::before {
            background: linear-gradient(90deg, #4ECDC4, #44A08D);
        }

        .activity-icon {
            font-size: 48px;
            margin-bottom: 12px;
        }

        .activity-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 6px;
            color: var(--text);
        }

        .activity-desc {
            font-size: 13px;
            color: var(--text-light);
            margin-bottom: 12px;
        }

        .activity-btn {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .activity-card.travel .activity-btn {
            background: linear-gradient(135deg, #FF6B6B, #FF8E53);
            color: var(--white);
        }

        .activity-card.culture .activity-btn {
            background: linear-gradient(135deg, #4ECDC4, #44A08D);
            color: var(--white);
        }

        /* Registration Form */
        .registration-container {
            padding: 16px;
        }

        .registration-header {
            background: var(--white);
            border-radius: var(--radius);
            padding: 24px;
            text-align: center;
            box-shadow: var(--shadow);
            margin-bottom: 16px;
        }

        .registration-icon {
            font-size: 64px;
            margin-bottom: 12px;
        }

        .registration-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 8px;
        }

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

        .registration-form {
            background: var(--white);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow);
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .form-select {
            width: 100%;
            height: 56px;
            border: 2px solid #e8e8e8;
            border-radius: 12px;
            padding: 0 16px;
            font-size: 16px;
            background: var(--white);
            color: var(--text);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .form-select:focus {
            outline: none;
            border-color: var(--primary);
            background: #FFF5F6;
        }

        .form-checkbox {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 16px 0;
        }

        .form-checkbox input {
            width: 22px;
            height: 22px;
            accent-color: var(--primary);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .form-checkbox label {
            font-size: 14px;
            color: var(--text-light);
            line-height: 1.6;
        }

        .form-checkbox a {
            color: var(--primary);
            text-decoration: none;
        }

        /* Product Grid */
        .product-section {
            padding: 0 16px;
            margin-top: 24px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .product-card {
            background: var(--white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.3s ease;
        }

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

        .product-image {
            width: 100%;
            height: 140px;
            background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }

        .product-info {
            padding: 12px;
        }

        .product-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-price {
            color: var(--accent);
            font-size: 18px;
            font-weight: bold;
        }

        .product-price span {
            font-size: 12px;
        }

        /* Bottom Navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: var(--white);
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
            box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
            z-index: 100;
        }

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

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

        .nav-item svg {
            width: 26px;
            height: 26px;
            color: var(--text-light);
            margin-bottom: 4px;
            transition: all 0.3s ease;
        }

        .nav-item span {
            font-size: 12px;
            color: var(--text-light);
            transition: all 0.3s ease;
        }

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

        .nav-item.active span {
            color: var(--primary);
            font-weight: 600;
        }

        /* Category Page */
        .category-tabs {
            display: flex;
            padding: 16px;
            gap: 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .category-tab {
            padding: 10px 20px;
            background: var(--white);
            border-radius: 25px;
            font-size: 16px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .category-tab:active {
            transform: scale(0.95);
        }

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

        /* Service List */
        .service-list {
            padding: 0 16px;
        }

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

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

        .service-card-icon {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .service-card-icon svg {
            width: 32px;
            height: 32px;
            color: var(--white);
        }

        .service-card-content {
            flex: 1;
        }

        .service-card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 6px;
        }

        .service-card-desc {
            font-size: 14px;
            color: var(--text-light);
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .service-card-price {
            color: var(--accent);
            font-size: 18px;
            font-weight: bold;
        }

        .service-card-price span {
            font-size: 12px;
            font-weight: normal;
        }

        /* Publish Page */
        .publish-form {
            padding: 16px;
        }

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

        .form-label {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            display: block;
        }

        .form-input {
            width: 100%;
            height: 56px;
            border: 2px solid #e8e8e8;
            border-radius: 12px;
            padding: 0 16px;
            font-size: 18px;
            transition: all 0.3s ease;
            background: var(--white);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            background: #FFF5F6;
        }

        textarea.form-input {
            height: 120px;
            padding: 16px;
            resize: none;
        }

        .type-selector {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .type-option {
            background: var(--white);
            border: 2px solid #e8e8e8;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .type-option:active {
            transform: scale(0.95);
        }

        .type-option.selected {
            border-color: var(--primary);
            background: #FFF5F6;
        }

        .type-option-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }

        .type-option-name {
            font-size: 16px;
            font-weight: 500;
        }

        .btn {
            height: 56px;
            border-radius: var(--radius-lg);
            font-size: 18px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn:active {
            transform: scale(0.98);
        }

        .btn-primary {
            background: var(--accent);
            color: var(--white);
        }

        .btn-primary:hover {
            background: #E8944D;
        }

        .btn-secondary {
            background: var(--white);
            color: var(--text);
            border: 2px solid #e8e8e8;
        }

        .btn-full {
            width: 100%;
        }

        /* Orders Page */
        .orders-tabs {
            display: flex;
            padding: 0 16px;
            gap: 24px;
            border-bottom: 2px solid #e8e8e8;
        }

        .orders-tab {
            padding: 16px 0;
            font-size: 16px;
            color: var(--text-light);
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }

        .orders-tab.active {
            color: var(--primary);
            font-weight: bold;
        }

        .orders-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
        }

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

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

        .order-type {
            font-size: 16px;
            font-weight: bold;
        }

        .order-status {
            font-size: 14px;
            color: var(--secondary);
        }

        .order-status.pending { color: var(--accent); }
        .order-status.completed { color: var(--secondary); }

        .order-content {
            padding: 16px;
        }

        .order-item {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
        }

        .order-item:last-child {
            margin-bottom: 0;
        }

        .order-item-icon {
            width: 60px;
            height: 60px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }

        .order-item-info {
            flex: 1;
        }

        .order-item-name {
            font-size: 16px;
            font-weight: 500;
        }

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

        .order-item-price {
            font-size: 16px;
            font-weight: bold;
            color: var(--accent);
        }

        .order-footer {
            padding: 16px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .order-total {
            font-size: 16px;
        }

        .order-total-price {
            color: var(--accent);
            font-weight: bold;
        }

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

        .order-btn {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

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

        .order-btn-primary {
            background: var(--accent);
            color: var(--white);
        }

        .order-btn-secondary {
            background: #f5f5f5;
            color: var(--text);
        }

        /* Profile Page */
        .profile-header {
            background: linear-gradient(135deg, var(--primary), #D4949A);
            padding: 32px 20px;
            text-align: center;
            color: var(--white);
        }

        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--white);
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }

        .profile-name {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .profile-phone {
            font-size: 14px;
            opacity: 0.9;
        }

        .profile-menu {
            padding: 16px;
        }

        .profile-menu-item {
            background: var(--white);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
        }

        .profile-menu-item:active {
            transform: scale(0.98);
        }

        .profile-menu-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .profile-menu-icon svg {
            width: 24px;
            height: 24px;
            color: var(--white);
        }

        .profile-menu-icon.pink { background: var(--primary); }
        .profile-menu-icon.green { background: var(--secondary); }
        .profile-menu-icon.orange { background: var(--accent); }

        .profile-menu-text {
            flex: 1;
            font-size: 18px;
        }

        .profile-menu-arrow {
            color: var(--text-light);
        }

        .profile-menu-arrow svg {
            width: 20px;
            height: 20px;
        }

        /* Detail Pages */
        .detail-header {
            position: relative;
        }

        .detail-image {
            width: 100%;
            height: 280px;
            background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
        }

        .detail-back {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
        }

        .detail-back:active {
            transform: scale(0.95);
        }

        .detail-back svg {
            width: 24px;
            height: 24px;
            color: var(--text);
        }

        .detail-content {
            padding: 20px;
            margin-top: -24px;
            background: var(--bg);
            border-radius: 24px 24px 0 0;
            position: relative;
        }

        .detail-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .detail-price {
            font-size: 28px;
            color: var(--accent);
            font-weight: bold;
            margin-bottom: 16px;
        }

        .detail-price span {
            font-size: 16px;
        }

        .detail-desc {
            color: var(--text-light);
            margin-bottom: 20px;
        }

        .detail-section {
            background: var(--white);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: var(--shadow);
        }

        .detail-section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .detail-tag {
            padding: 6px 14px;
            background: #f5f5f5;
            border-radius: 20px;
            font-size: 14px;
        }

        .detail-footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: var(--white);
            padding: 12px 20px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
            display: flex;
            gap: 12px;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
            z-index: 100;
        }

        .detail-footer .btn {
            flex: 1;
        }

        /* Cart Badge */
        .cart-badge {
            position: relative;
        }

        .cart-count {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent);
            color: var(--white);
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Empty State */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
        }

        .empty-icon {
            font-size: 80px;
            margin-bottom: 20px;
        }

        .empty-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .empty-desc {
            color: var(--text-light);
            margin-bottom: 24px;
        }

        /* Toast */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: var(--white);
            padding: 16px 32px;
            border-radius: 12px;
            font-size: 16px;
            z-index: 1000;
            animation: toastIn 0.3s ease;
        }

        @keyframes toastIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 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 {
            background: var(--white);
            width: 100%;
            max-width: 430px;
            border-radius: 24px 24px 0 0;
            padding: 24px;
            animation: slideUp 0.3s ease;
        }

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

        .modal-title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 24px;
        }

        .modal-handle {
            width: 40px;
            height: 4px;
            background: #e8e8e8;
            border-radius: 2px;
            margin: 0 auto 20px;
        }

        .address-item {
            padding: 16px;
            border: 2px solid #e8e8e8;
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .address-item.selected {
            border-color: var(--primary);
            background: #FFF5F6;
        }

        .address-item:active {
            transform: scale(0.98);
        }

        .address-name {
            font-weight: bold;
            margin-bottom: 4px;
        }

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

        .quantity-selector {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .quantity-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #f5f5f5;
            border: none;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quantity-btn:active {
            transform: scale(0.95);
            background: #e8e8e8;
        }

        .quantity-value {
            font-size: 24px;
            font-weight: bold;
            min-width: 40px;
            text-align: center;
        }

        /* Time Slot */
        .time-slots {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .time-slot {
            padding: 12px;
            background: #f5f5f5;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .time-slot:active {
            transform: scale(0.95);
        }

        .time-slot.selected {
            background: #FFF5F6;
            border-color: var(--primary);
            color: var(--primary);
        }

        .time-slot-date {
            font-weight: bold;
            font-size: 16px;
        }

        .time-slot-week {
            font-size: 12px;
            color: var(--text-light);
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        /* Safe Area */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .bottom-nav {
                padding-bottom: calc(8px + env(safe-area-inset-bottom));
            }
        }

        /* Sub Page Header */
        .sub-page-header {
            background: linear-gradient(135deg, var(--primary), #D4949A);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .sub-page-back {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sub-page-back:active {
            transform: scale(0.95);
            background: rgba(255,255,255,0.3);
        }

        .sub-page-back svg {
            width: 24px;
            height: 24px;
            color: var(--white);
        }

        .sub-page-title {
            font-size: 20px;
            font-weight: bold;
            color: var(--white);
        }

        /* Message List */
        .message-list {
            padding: 16px;
        }

        .message-item {
            background: var(--white);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .message-item:active {
            transform: scale(0.98);
        }

        .message-item.unread {
            border-left: 4px solid var(--accent);
        }

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

        .message-title {
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .message-icon {
            font-size: 20px;
        }

        .message-badge {
            background: var(--accent);
            color: var(--white);
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
        }

        .message-time {
            font-size: 12px;
            color: var(--text-light);
        }

        .message-content {
            font-size: 14px;
            color: var(--text-light);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Address List */
        .address-list {
            padding: 16px;
        }

        .address-card {
            background: var(--white);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            position: relative;
        }

        .address-card.default {
            border: 2px solid var(--primary);
        }

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

        .address-user {
            font-size: 18px;
            font-weight: bold;
        }

        .address-phone {
            font-size: 16px;
            color: var(--text-light);
        }

        .address-default-tag {
            background: var(--primary);
            color: var(--white);
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
        }

        .address-text {
            font-size: 16px;
            color: var(--text);
            margin-bottom: 12px;
        }

        .address-actions {
            display: flex;
            justify-content: flex-end;
            gap: 16px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
        }

        .address-action {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            color: var(--text-light);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .address-action:active {
            transform: scale(0.95);
            color: var(--primary);
        }

        .address-action svg {
            width: 18px;
            height: 18px;
        }

        .add-address-btn {
            background: var(--white);
            border: 2px dashed var(--primary);
            border-radius: var(--radius);
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .add-address-btn:active {
            transform: scale(0.98);
            background: #FFF5F6;
        }

        .add-address-icon {
            font-size: 40px;
            margin-bottom: 8px;
        }

        .add-address-text {
            font-size: 16px;
            color: var(--primary);
        }

        /* Settings List */
        .settings-list {
            padding: 16px;
        }

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

        .settings-group-title {
            font-size: 14px;
            color: var(--text-light);
            margin-bottom: 8px;
            padding-left: 4px;
        }

        .settings-item {
            background: var(--white);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .settings-item:active {
            transform: scale(0.98);
        }

        .settings-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .settings-icon.notifications { background: #FFE4E1; }
        .settings-icon.font { background: #E0FFFF; }
        .settings-icon.language { background: #FFF8DC; }
        .settings-icon.about { background: #E6E6FA; }
        .settings-icon.logout { background: #FFF0F5; }

        .settings-text {
            flex: 1;
            font-size: 16px;
        }

        .settings-arrow {
            color: var(--text-light);
        }

        .settings-arrow svg {
            width: 20px;
            height: 20px;
        }

        /* Toggle Switch */
        .toggle-switch {
            width: 52px;
            height: 28px;
            background: #e8e8e8;
            border-radius: 14px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

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

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

        .toggle-switch.active::after {
            left: 26px;
        }

        /* Help & Feedback */
        .help-section {
            padding: 16px;
        }

        .help-faq {
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }

        .help-faq-item {
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

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

        .help-faq-item:active {
            background: #f9f9f9;
        }

        .help-faq-question {
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .help-faq-question svg {
            width: 20px;
            height: 20px;
            color: var(--text-light);
            transition: transform 0.3s ease;
        }

        .help-faq-item.expanded .help-faq-question svg {
            transform: rotate(180deg);
        }

        .help-faq-answer {
            font-size: 14px;
            color: var(--text-light);
            margin-top: 12px;
            display: none;
            line-height: 1.6;
        }

        .help-faq-item.expanded .help-faq-answer {
            display: block;
        }

        .feedback-form {
            background: var(--white);
            border-radius: var(--radius);
            padding: 16px;
            box-shadow: var(--shadow);
        }

        .feedback-type {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .feedback-type-btn {
            padding: 8px 16px;
            border: 2px solid #e8e8e8;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .feedback-type-btn.active {
            border-color: var(--primary);
            background: #FFF5F6;
            color: var(--primary);
        }

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

        .contact-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 20px;
        }

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

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

        .contact-icon {
            font-size: 36px;
            margin-bottom: 8px;
        }

        .contact-name {
            font-size: 16px;
            font-weight: 500;
        }

        /* Privacy Policy */
        .policy-content {
            padding: 20px;
            background: var(--white);
            margin: 16px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .policy-title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 16px;
        }

        .policy-date {
            font-size: 12px;
            color: var(--text-light);
            text-align: center;
            margin-bottom: 24px;
        }

        .policy-section {
            margin-bottom: 20px;
        }

        .policy-section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .policy-text {
            font-size: 14px;
            color: var(--text-light);
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="header-logo">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
            </svg>
            <span class="header-title">温馨助老</span>
        </div>
        <div class="header-user" onclick="navigateTo('profile')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
            </svg>
        </div>
    </header>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Home Page -->
        <div id="page-home" class="page active">
            <!-- Banner -->
            <div class="banner">
                <div class="banner-slider" id="bannerSlider">
                    <div class="banner-slide">
                        <div class="banner-title">温暖相伴，贴心服务</div>
                        <div class="banner-subtitle">为您的品质生活保驾护航</div>
                    </div>
                    <div class="banner-slide">
                        <div class="banner-title">土特产直供</div>
                        <div class="banner-subtitle">来自乡村的纯净味道</div>
                    </div>
                    <div class="banner-slide">
                        <div class="banner-title">专业陪护服务</div>
                        <div class="banner-subtitle">让关爱时刻在身边</div>
                    </div>
                </div>
                <div class="banner-dots">
                    <div class="banner-dot active" onclick="goToSlide(0)"></div>
                    <div class="banner-dot" onclick="goToSlide(1)"></div>
                    <div class="banner-dot" onclick="goToSlide(2)"></div>
                </div>
            </div>

            <!-- Quick Services -->
            <div class="quick-services">
                <div class="section-title">
                    <span>便捷服务</span>
                    <span class="section-title-more" onclick="navigateTo('category')">更多 ></span>
                </div>
                <div class="services-grid">
                    <div class="service-item" onclick="showServiceDetail('accompany')">
                        <div class="service-icon pink">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                <circle cx="9" cy="7" r="4"></circle>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                            </svg>
                        </div>
                        <div class="service-name">上门陪护</div>
                    </div>
                    <div class="service-item" onclick="showServiceDetail('hospital')">
                        <div class="service-icon green">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                            </svg>
                        </div>
                        <div class="service-name">医院陪诊</div>
                    </div>
                    <div class="service-item" onclick="showServiceDetail('cooking')">
                        <div class="service-icon orange">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
                                <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
                                <line x1="6" y1="1" x2="6" y2="4"></line>
                                <line x1="10" y1="1" x2="10" y2="4"></line>
                                <line x1="14" y1="1" x2="14" y2="4"></line>
                            </svg>
                        </div>
                        <div class="service-name">上门做饭</div>
                    </div>
                    <div class="service-item" onclick="showServiceDetail('cleaning')">
                        <div class="service-icon green">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                                <path d="M2 17l10 5 10-5"></path>
                                <path d="M2 12l10 5 10-5"></path>
                            </svg>
                        </div>
                        <div class="service-name">上门清洁</div>
                    </div>
                </div>
            </div>

            <!-- Activity Banners -->
            <div class="activity-banner">
                <div class="section-title">
                    <span>精彩活动</span>
                </div>
                <div class="activity-cards">
                    <div class="activity-card travel" onclick="navigateTo('travel-registration')">
                        <div class="activity-icon">✈️</div>
                        <div class="activity-title">旅游团队报名</div>
                        <div class="activity-desc">一起去看祖国大好河山</div>
                        <div class="activity-btn">立即报名</div>
                    </div>
                    <div class="activity-card culture" onclick="navigateTo('culture-registration')">
                        <div class="activity-icon">🎭</div>
                        <div class="activity-title">文化交流报名</div>
                        <div class="activity-desc">琴棋书画，诗酒茶花</div>
                        <div class="activity-btn">立即报名</div>
                    </div>
                </div>
            </div>

            <!-- Products -->
            <div class="product-section">
                <div class="section-title">
                    <span>精选土特产</span>
                    <span class="section-title-more" onclick="navigateTo('category')">更多 ></span>
                </div>
                <div class="product-grid" id="productGrid"></div>
            </div>
        </div>

        <!-- Category Page -->
        <div id="page-category" class="page">
            <div class="category-tabs">
                <div class="category-tab active" onclick="switchCategory('all', this)">全部</div>
                <div class="category-tab" onclick="switchCategory('product', this)">土特产</div>
                <div class="category-tab" onclick="switchCategory('service', this)">生活服务</div>
                <div class="category-tab" onclick="switchCategory('accompany', this)">陪护陪诊</div>
            </div>
            <div class="service-list" id="categoryList"></div>
        </div>

        <!-- Publish Page -->
        <div id="page-publish" class="page">
            <div class="publish-form">
                <div class="form-group">
                    <label class="form-label">选择服务类型</label>
                    <div class="type-selector" id="typeSelector">
                        <div class="type-option" onclick="selectPublishType(this, 'accompany')">
                            <div class="type-option-icon">👴</div>
                            <div class="type-option-name">上门陪护</div>
                        </div>
                        <div class="type-option" onclick="selectPublishType(this, 'hospital')">
                            <div class="type-option-icon">🏥</div>
                            <div class="type-option-name">医院陪诊</div>
                        </div>
                        <div class="type-option" onclick="selectPublishType(this, 'cooking')">
                            <div class="type-option-icon">🍳</div>
                            <div class="type-option-name">上门做饭</div>
                        </div>
                        <div class="type-option" onclick="selectPublishType(this, 'cleaning')">
                            <div class="type-option-icon">🧹</div>
                            <div class="type-option-name">上门清洁</div>
                        </div>
                        <div class="type-option" onclick="selectPublishType(this, 'other')">
                            <div class="type-option-icon">📝</div>
                            <div class="type-option-name">其他需求</div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">详细描述您的需求</label>
                    <textarea class="form-input" placeholder="请详细描述您的需求，如服务时间、地点、特殊要求等..." id="publishDesc">
商品名称
¥0
商品介绍
商品详细描述内容
选择数量
配送地址
张三 138****8888
北京市朝阳区建国路88号1号楼101室
添加新地址
点击添加收货地址