/* 益元智康 · 门店管理营销系统 样式 */
*{ margin: 0; padding: 0; box-sizing: border-box; }body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; font-size: 14px; }a{ text-decoration: none; color: inherit; }ul{ list-style: none; }img{ max-width: 100%; display: block; }/* 容器 */
.container{ max-width: 750px; margin: 0 auto; background: #fff; min-height: 100vh; padding-bottom: 60px; }/* 头部 */
.header{ background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%); color: #fff; padding: 20px 15px; }.header h1{ font-size: 20px; font-weight: 600; }.header-desc{ font-size: 12px; opacity: 0.9; margin-top: 5px; }/* Banner */
.banner{ width: 100%; height: 180px; background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); display: flex; align-items: center; justify-content: center; color: #2e7d32; font-size: 18px; }/* 快捷入口 */
.quick-nav{ display: flex; justify-content: space-around; padding: 20px 10px; background: #fff; }.quick-nav-item{ text-align: center; flex: 1; }.quick-nav-icon{ width: 50px; height: 50px; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 24px; }.quick-nav-text{ font-size: 12px; color: #666; }/* 区块 */
.section{ padding: 15px; }.section-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }.section-title{ font-size: 16px; font-weight: 600; color: #333; }.section-more{ font-size: 12px; color: #999; }/* 公告 */
.notice-card{ background: #fff9e6; border-radius: 8px; padding: 12px; border-left: 3px solid #ffc107; }.notice-title{ font-size: 14px; color: #333; margin-bottom: 5px; }.notice-content{ font-size: 12px; color: #666; line-height: 1.5; }/* 服务卡片 */
.service-list{ display: flex; flex-direction: column; gap: 12px; }.service-card{ background: #fff; border-radius: 8px; padding: 12px; display: flex; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }.service-cover{ width: 80px; height: 80px; background: #e8f5e9; border-radius: 6px; margin-right: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }.service-info{ flex: 1; }.service-name{ font-size: 15px; font-weight: 600; margin-bottom: 5px; }.service-desc{ font-size: 12px; color: #999; margin-bottom: 8px; }.service-tags{ display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }.service-tag{ font-size: 10px; background: #e8f5e9; color: #2e7d32; padding: 2px 6px; border-radius: 3px; }.service-bottom{ display: flex; justify-content: space-between; align-items: center; }.service-price{ color: #f56c6c; font-size: 16px; font-weight: 600; }.service-price small{ font-size: 12px; font-weight: normal; }.service-points{ font-size: 11px; color: #ffc107; }/* 底部导航 */
.tab-bar{ position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 750px; background: #fff; display: flex; justify-content: space-around; padding: 8px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 100; }.tab-item{ text-align: center; flex: 1; }.tab-icon{ font-size: 22px; margin-bottom: 3px; }.tab-text{ font-size: 11px; color: #999; }.tab-item.active .tab-text{ color: #2e7d32; }.tab-item.active .tab-icon{ color: #2e7d32; }/* 页面 */
.page{ display: none; }.page.active{ display: block; }/* 表单 */
.form-group{ padding: 12px 15px; border-bottom: 1px solid #f0f0f0; }.form-label{ font-size: 14px; color: #666; margin-bottom: 5px; display: block; }.form-input{ width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 10px; font-size: 14px; }.form-input:focus{ outline: none; border-color: #4caf50; }/* 按钮 */
.btn{ display: inline-block; padding: 12px 30px; border-radius: 25px; font-size: 15px; text-align: center; border: none; cursor: pointer; }.btn-primary{ background: #2e7d32; color: #fff; }.btn-outline{ background: transparent; border: 1px solid #2e7d32; color: #2e7d32; }.btn-block{ display: block; width: calc(100% - 30px); margin: 15px; }/* 任务 */
.task-item{ display: flex; align-items: center; padding: 15px; background: #fff; border-radius: 8px; margin-bottom: 10px; }.task-icon{ width: 45px; height: 45px; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; }.task-info{ flex: 1; }.task-name{ font-size: 15px; font-weight: 600; margin-bottom: 3px; }.task-desc{ font-size: 12px; color: #999; }.task-points{ color: #ffc107; font-size: 14px; font-weight: 600; }/* 商城 */
.product-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 15px; }.product-card{ background: #fff; border-radius: 8px; overflow: hidden; }.product-img{ width: 100%; height: 120px; background: #e8f5e9; display: flex; align-items: center; justify-content: center; font-size: 40px; }.product-detail{ padding: 10px; }.product-name{ font-size: 14px; font-weight: 600; margin-bottom: 5px; }.product-points{ color: #ffc107; font-size: 14px; }.product-stock{ font-size: 11px; color: #999; }/* 签到 */
.sign-card{ background: linear-gradient(135deg, #2e7d32, #4caf50); color: #fff; border-radius: 12px; padding: 25px; text-align: center; margin: 15px; }.sign-day.active{ background: #fff; color: #2e7d32; }.sign-day.today{ border: 2px solid #ffc107; }.sign-points{ font-size: 40px; font-weight: 700; }.sign-btn{ margin-top: 15px; padding: 12px 40px; background: #fff; color: #2e7d32; border-radius: 25px; font-size: 16px; font-weight: 600; }/* 用户中心 */
.user-card{ background: linear-gradient(135deg, #2e7d32, #4caf50); color: #fff; padding: 25px 15px; display: flex; align-items: center; }.user-avatar{ width: 70px; height: 70px; background: rgba(255,255,255,0.3); border-radius: 50%; margin-right: 15px; display: flex; align-items: center; justify-content: center; font-size: 35px; }.user-info{ flex: 1; }.user-name{ font-size: 18px; font-weight: 600; margin-bottom: 5px; }.user-level{ font-size: 12px; background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 10px; display: inline-block; }.menu-list{ background: #fff; margin-top: 10px; }.menu-item{ display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f5f5f5; }.menu-icon{ width: 35px; height: 35px; background: #e8f5e9; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 18px; }.menu-text{ flex: 1; font-size: 15px; }.menu-arrow{ color: #ccc; font-size: 18px; }/* 列表项 */
.list-item{ display: flex; padding: 15px; background: #fff; border-bottom: 1px solid #f5f5f5; }.list-img{ width: 60px; height: 60px; background: #e8f5e9; border-radius: 6px; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }.list-info{ flex: 1; }.list-title{ font-size: 15px; font-weight: 600; margin-bottom: 5px; }.list-desc{ font-size: 12px; color: #999; }.list-meta{ text-align: right; font-size: 12px; color: #999; }/* 状态标签 */
.status{ display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; }.status-pending{ background: #fff3e0; color: #ff9800; }.status-confirmed{ background: #e3f2fd; color: #2196f3; }.status-done{ background: #e8f5e9; color: #4caf50; }.status-cancelled{ background: #ffebee; color: #f44336; }/* 空状态 */
.empty{ text-align: center; padding: 50px 20px; color: #999; }.empty-icon{ font-size: 60px; margin-bottom: 15px; }.empty-text{ font-size: 14px; }/* 加载状态 */
.loading{ text-align: center; padding: 30px; color: #999; }.loading::after{ content: '...'; animation: loading 1s infinite; }@keyframes loading{ 0%, 100% { opacity: 0; } 50% { opacity: 1; } }/* Toast提示 */
.toast{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 15px 30px; border-radius: 8px; z-index: 9999; font-size: 14px; }/* Modal */
.modal{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; align-items: center; justify-content: center; }.modal.active{ display: flex; }.modal-content{ background: #fff; border-radius: 12px; width: 90%; max-width: 400px; max-height: 80vh; overflow-y: auto; }.modal-header{ padding: 15px; border-bottom: 1px solid #f0f0f0; text-align: center; font-weight: 600; }.modal-body{ padding: 15px; }.modal-footer{ padding: 15px; display: flex; gap: 10px; justify-content: center; border-top: 1px solid #f0f0f0; }/* 预约日历 */
.booking-calendar{ background: #fff; padding: 15px; }.calendar-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.calendar-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }.calendar-day{ padding: 8px 0; font-size: 13px; }.calendar-day.header{ font-size: 11px; color: #999; }.calendar-day.disabled{ color: #ccc; }.calendar-day.selected{ background: #2e7d32; color: #fff; border-radius: 50%; }.time-slots{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 15px; }.time-slot{ padding: 10px; background: #f5f5f5; border-radius: 6px; text-align: center; font-size: 13px; }.time-slot.selected{ background: #2e7d32; color: #fff; }.time-slot.disabled{ background: #eee; color: #ccc; }/* 购物车样式 */
.cart-list{ min-height: 200px; }.cart-footer{ position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 750px; z-index: 99; }/* 订单页样式 */
.order-tabs{ position: sticky; top: 0; z-index: 10; }.order-tab{ flex: 1; text-align: center; padding: 10px 0; font-size: 14px; color: #666; cursor: pointer; }.order-tab.active{ color: #2e7d32; border-bottom: 2px solid #2e7d32; }/* 徽章样式 */
.badge{ display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; }.badge-warning{ background: #fff3e0; color: #ff9800; }.badge-info{ background: #e3f2fd; color: #2196f3; }.badge-primary{ background: #e8f5e9; color: #2e7d32; }.badge-success{ background: #e8f5e9; color: #4caf50; }.badge-danger{ background: #ffebee; color: #f44336; }/* Tab角标 */
.tab-badge{ position: absolute; top: 2px; right: 50%; transform: translateX(20px); background: #f56c6c; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center; }.tab-item{ position: relative; }/* 卡片样式 */
.card{ background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }/* 按钮小号 */
.btn-sm{ padding: 6px 15px; font-size: 12px; border-radius: 15px; }/* 商城分类条 */
.category-bar{ display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; background: #fff; }.category-bar::-webkit-scrollbar{ display: none; }.cat-chip{ flex-shrink: 0; padding: 5px 14px; border-radius: 30px; background: #f5f6f7; font-size: 12px; color: #666; cursor: pointer; }.cat-chip.active{ background: #e8f5e9; color: #2e7d32; font-weight: 700; }