/** * h5.css —— 用户端 H5（微信内扫码注册页）Liquid Glass 移动端样式 * 说明：本文件自包含，不依赖 ../assets/ 下的 glass.css / motion.css； * 配色变量与后台保持同一套 Liquid Glass 语言（毛玻璃、大圆角、胶囊按钮）。 * 适配：微信内嵌浏览器 / 移动端 Safari / Chrome，支持 prefers-color-scheme 深浅色。 */ /* ============ 设计变量（Liquid Glass 主题） ============ */ :root { /* 主题色：暖玉守护——玉绿主色，暖金/堇紫光晕点缀 */ --h5-primary: #0ea47f; --h5-primary-2: #3fe0b6; --h5-primary-grad: linear-gradient(135deg, #3fe0b6 0%, #0ea47f 100%); --h5-danger: #ff453a; --h5-success: #30d158; --h5-warning: #ff9f0a; /* 文字 */ --h5-text-1: #1c1c1e; --h5-text-2: #6e6e73; --h5-text-3: #aeaeb2; /* 玻璃材质 */ --h5-glass-bg: rgba(255, 255, 255, 0.55); --h5-glass-bg-strong: rgba(255, 255, 255, 0.78); --h5-glass-border: rgba(255, 255, 255, 0.65); --h5-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12); --h5-glass-blur: blur(20px) saturate(180%); /* 输入控件 */ --h5-input-bg: rgba(255, 255, 255, 0.5); --h5-input-border: rgba(60, 60, 67, 0.12); /* 圆角（连续大圆角 squircle 近似） */ --h5-radius-lg: 24px; --h5-radius-md: 16px; --h5-radius-sm: 12px; --h5-radius-capsule: 999px; /* 页面背景 */ --h5-page-bg: #eef2f7; --h5-blob-1: rgba(14, 164, 127, 0.35); --h5-blob-2: rgba(244, 180, 90, 0.34); --h5-blob-3: rgba(129, 140, 248, 0.20); /* 动效曲线（spring / overshoot 弹性） */ --h5-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --h5-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 吸顶头 / 吸住标题条 / 悬浮玻璃条（浅色值；深色在 [data-theme="dark"] 覆盖） */ --h5-head-grad: linear-gradient(165deg, rgba(190, 255, 225, 0.26), rgba(255, 255, 255, 0.24) 34%, rgba(243, 246, 250, 0.42) 72%, rgba(238, 242, 247, 0.55)); --h5-head-hl: rgba(255, 255, 255, 0.72); --h5-sticky-bg: rgba(238, 242, 247, 0.55); --h5-sticky-tag: #8e8e93; --h5-sticky-ts: none; --h5-tabbar-grad: linear-gradient(160deg, rgba(255, 255, 255, 0.84), rgba(242, 245, 249, 0.88)); --h5-bar-hl: rgba(255, 255, 255, 0.85); --h5-bar-drop: rgba(31, 38, 135, 0.14); --h5-qk-bg: rgba(255, 255, 255, 0.55); --h5-qk-border: rgba(255, 255, 255, 0.78); --h5-save-grad: linear-gradient(165deg, rgba(190, 255, 225, 0.30), rgba(255, 255, 255, 0.34) 40%, rgba(243, 246, 250, 0.60)); --h5-fog-blur: blur(30px) saturate(160%); /* confirm 弹窗（浅色值；深色在 [data-theme="dark"] 覆盖） */ --h5-modal-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52) 45%, rgba(255, 255, 255, 0.62)), rgba(248, 250, 252, 0.88); --h5-modal-border: rgba(255, 255, 255, 0.85); --h5-modal-shadow: 0 24px 60px rgba(31, 38, 135, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(60, 60, 67, 0.05); --h5-modal-text: var(--h5-text-1); --h5-modal-text-2: var(--h5-text-2); --h5-modal-btn-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(240, 243, 248, 0.78)); --h5-modal-btn-border: rgba(60, 60, 67, 0.10); --h5-modal-btn-text: var(--h5-text-1); --h5-modal-btn-hl: rgba(255, 255, 255, 0.95); --h5-modal-glare: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 85%); /* 主按钮（浅色：实心渐变才压得住白字；半透明玻璃风只适合深色） */ --h5-modal-primary-bg: linear-gradient(150deg, var(--h5-primary-2), var(--h5-primary)); --h5-modal-primary-text: #fff; --h5-modal-primary-border: rgba(14, 164, 127, 0.35); --h5-modal-primary-shadow: 0 6px 20px rgba(14, 164, 127, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* 深色模式：不再直接用媒体查询——由 h5.js 按用户偏好（localStorage h5_theme：auto/light/dark） 解析出确定主题后写到 上；auto 时 JS 监听系统深浅色切换实时跟随。 各页 的内联脚本在 CSS 加载前做同样解析，避免首屏闪烁。 */ :root[data-theme="dark"] { --h5-text-1: #f2f2f7; --h5-text-2: #aeaeb2; --h5-text-3: #636366; --h5-glass-bg: rgba(26, 32, 29, 0.55); --h5-glass-bg-strong: rgba(33, 41, 38, 0.82); --h5-glass-border: rgba(255, 255, 255, 0.12); --h5-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --h5-input-bg: rgba(50, 58, 54, 0.5); --h5-input-border: rgba(255, 255, 255, 0.1); --h5-page-bg: #0d1311; --h5-blob-1: rgba(14, 164, 127, 0.28); --h5-blob-2: rgba(244, 180, 90, 0.18); --h5-blob-3: rgba(129, 140, 248, 0.16); /* 吸顶头 / 吸住标题条 / 悬浮玻璃条（深色值，浅色见 :root） */ --h5-head-grad: linear-gradient(165deg, rgba(150,255,205,0.10), rgba(255,255,255,0.05) 34%, rgba(20,26,22,0.40) 72%, rgba(16,16,20,0.55)); --h5-head-hl: rgba(255, 255, 255, 0.10); --h5-sticky-bg: rgba(13, 19, 17, 0.55); --h5-sticky-tag: rgba(255, 255, 255, 0.62); --h5-sticky-ts: 0 1px 8px rgba(0, 0, 0, 0.55); --h5-tabbar-grad: linear-gradient(160deg, rgba(38, 50, 42, 0.72), rgba(16, 22, 18, 0.76)); --h5-bar-hl: rgba(255, 255, 255, 0.22); --h5-bar-drop: rgba(0, 0, 0, 0.40); --h5-qk-bg: rgba(255, 255, 255, 0.07); --h5-qk-border: rgba(255, 255, 255, 0.16); --h5-save-grad: linear-gradient(165deg, rgba(150,255,205,0.10), rgba(255,255,255,0.06) 40%, rgba(16,16,20,0.38)); --h5-fog-blur: blur(30px) saturate(200%) brightness(1.12); /* confirm 弹窗（深色值，浅色见 :root） */ --h5-modal-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.06)), rgba(20, 22, 26, 0.82); --h5-modal-border: rgba(255, 255, 255, 0.22); --h5-modal-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.06); --h5-modal-text: #fff; --h5-modal-text-2: rgba(255, 255, 255, 0.85); --h5-modal-btn-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)); --h5-modal-btn-border: rgba(255, 255, 255, 0.22); --h5-modal-btn-text: #fff; --h5-modal-btn-hl: rgba(255, 255, 255, 0.22); --h5-modal-glare: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 85%); /* 主按钮（深色：半透明玻璃绿，浅色见 :root） */ --h5-modal-primary-bg: linear-gradient(150deg, rgba(63, 224, 182, 0.55), rgba(14, 164, 127, 0.38)); --h5-modal-primary-text: #fff; --h5-modal-primary-border: rgba(110, 231, 183, 0.45); --h5-modal-primary-shadow: 0 6px 20px rgba(14, 164, 127, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* ============ 基础重置 ============ */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { font-size: 17px; /* 老人友好：全局基准字号 16→17 */ -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; color: var(--h5-text-1); background: var(--h5-page-bg); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; line-height: 1.6; /* 老人友好：行高 1.5→1.6，阅读不费劲 */ } input, button, textarea { font-family: inherit; font-size: inherit; color: inherit; border: none; outline: none; background: none; } /* ============ 背景光斑（液态玻璃氛围） ============ */ .h5-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .h5-bg .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.9; animation: h5BlobFloat 14s var(--h5-ease-out) infinite alternate; } .h5-bg .blob-1 { width: 62vw; height: 62vw; top: -18vw; left: -16vw; background: var(--h5-blob-1); } .h5-bg .blob-2 { width: 70vw; height: 70vw; top: 30vh; right: -28vw; background: var(--h5-blob-2); animation-delay: -5s; } .h5-bg .blob-3 { width: 55vw; height: 55vw; bottom: -20vw; left: 8vw; background: var(--h5-blob-3); animation-delay: -9s; } @keyframes h5BlobFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, -4vh) scale(1.12); } } /* ============ 页面容器 ============ */ .h5-page { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; } /* 顶部品牌区 */ .h5-brand { padding: 40px 8px 20px; text-align: center; animation: h5FadeDown 0.6s var(--h5-ease-out) both; } .h5-brand .logo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; background: var(--h5-primary-grad); box-shadow: 0 10px 26px rgba(14, 164, 127, 0.35); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; } /* 统一应用 logo：SVG 圆形图标（与后台登录页一致），替换原「护」字方块 */ .h5-brand .logo.logo-app { background: none; border-radius: 50%; } .h5-brand .logo.logo-app img { width: 100%; height: 100%; display: block; border-radius: 50%; } .h5-brand h1 { font-size: 22px; font-weight: 700; letter-spacing: 1px; } .h5-brand p { margin-top: 4px; font-size: 13px; color: var(--h5-text-2); } @keyframes h5FadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } /* ============ 毛玻璃卡片 ============ */ .h5-card { background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); border-radius: var(--h5-radius-lg); box-shadow: var(--h5-glass-shadow); padding: 18px; margin-bottom: 14px; animation: h5CardIn 0.55s var(--h5-ease-spring) both; } .h5-card + .h5-card { animation-delay: 0.06s; } @keyframes h5CardIn { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .h5-card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .h5-card-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--h5-primary-grad); } /* ============ 微信用户信息卡 ============ */ .h5-wxcard { display: flex; align-items: center; gap: 12px; } .h5-wxcard .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); background: var(--h5-input-bg); } .h5-wxcard .info { flex: 1; min-width: 0; } .h5-wxcard .nickname { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h5-wxcard .desc { font-size: 12px; color: var(--h5-text-2); margin-top: 2px; } .h5-wxcard .wx-badge { flex-shrink: 0; font-size: 11px; color: var(--h5-success); background: rgba(48, 209, 88, 0.12); border-radius: var(--h5-radius-capsule); padding: 3px 10px; } /* ============ 表单 ============ */ .h5-field { margin-bottom: 14px; } .h5-field:last-child { margin-bottom: 0; } .h5-field-label { display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--h5-text-2); margin-bottom: 6px; padding-left: 4px; } .h5-field-label .required { color: var(--h5-danger); margin-right: 2px; } .h5-field-label .tag { margin-left: 6px; font-size: 10px; line-height: 1; padding: 3px 8px; border-radius: var(--h5-radius-capsule); color: var(--h5-primary); background: rgba(14, 164, 127, 0.12); } /* 字段名后的填写例子（老人友好：小灰字，如「如：张阿姨」） */ .h5-field-label .eg { margin-left: 6px; font-weight: 400; color: var(--h5-text-3); } /* iOS 风输入框 */ .h5-input { width: 100%; height: 52px; /* 老人友好：48→52，好按 */ padding: 0 16px; border-radius: var(--h5-radius-md); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); font-size: 16px; /* 防止 iOS 聚焦自动放大 */ transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } .h5-input::placeholder { color: var(--h5-text-3); font-size: 14px; } .h5-input:focus { border-color: var(--h5-primary); box-shadow: 0 0 0 3px rgba(14, 164, 127, 0.15); background: var(--h5-glass-bg-strong); } .h5-input[readonly] { color: var(--h5-text-2); } .h5-input.is-error { border-color: var(--h5-danger); box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.12); animation: h5Shake 0.4s; } @keyframes h5Shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* 双列（紧急联系人 姓名+电话 同行） */ .h5-field-row { display: flex; gap: 10px; } .h5-field-row .h5-input { flex: 1; min-width: 0; } /* 邀请码行内“修改”按钮 */ .h5-input-group { position: relative; display: flex; align-items: center; } .h5-input-group .h5-input { padding-right: 64px; } .h5-input-group .inline-btn { position: absolute; right: 8px; font-size: 12px; color: var(--h5-primary); padding: 6px 10px; border-radius: var(--h5-radius-capsule); background: rgba(14, 164, 127, 0.1); } .h5-input-group .inline-btn:active { opacity: 0.6; } /* 字段说明文字 */ .h5-field-tip { margin-top: 6px; padding-left: 4px; font-size: 13px; /* 老人友好：12→13 */ color: var(--h5-text-3); } /* ============ 性别分段选择器（iOS Segmented） ============ */ .h5-segment { display: flex; padding: 3px; border-radius: var(--h5-radius-capsule); /* 半圆胶囊轨道 */ background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); } .h5-segment .seg-item { flex: 1; height: 48px; /* 老人友好：40→48，分段选项更好点 */ display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--h5-text-2); border-radius: var(--h5-radius-capsule); /* 半圆胶囊选项 */ cursor: pointer; transition: all 0.3s var(--h5-ease-spring); user-select: none; } .h5-segment .seg-item.active { color: #fff; background: var(--h5-primary-grad); box-shadow: 0 4px 12px rgba(14, 164, 127, 0.3); font-weight: 600; } /* ============ 区域选择行（定位结果 + 可修改） ============ */ .h5-region-row { display: flex; align-items: center; gap: 10px; min-height: 52px; /* 老人友好：48→52，与输入框同高 */ padding: 10px 16px; border-radius: var(--h5-radius-md); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); cursor: pointer; transition: border-color 0.25s; } .h5-region-row:active { border-color: var(--h5-primary); } .h5-region-row .loc-icon { font-size: 18px; flex-shrink: 0; } .h5-region-row .region-text { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h5-region-row .region-text.placeholder { color: var(--h5-text-3); font-size: 14px; } .h5-region-row .region-text.locating { color: var(--h5-text-2); } .h5-region-row .arrow { color: var(--h5-text-3); font-size: 13px; flex-shrink: 0; } /* 定位状态小标签 */ .h5-loc-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: var(--h5-radius-capsule); white-space: nowrap; /* 短标签不许折行 */ flex-shrink: 0; } .h5-loc-status.ok { color: var(--h5-success); background: rgba(48, 209, 88, 0.12); } .h5-loc-status.fail { color: var(--h5-warning); background: rgba(255, 159, 10, 0.12); } .h5-loc-status.ing { color: var(--h5-primary); background: rgba(14, 164, 127, 0.1); } /* 迷你定位转圈 */ .h5-loc-spinner { width: 12px; height: 12px; border: 2px solid rgba(14, 164, 127, 0.25); border-top-color: var(--h5-primary); border-radius: 50%; animation: h5Spin 0.8s linear infinite; } /* ===== 基础资料页：底部漂浮保存条（液态玻璃胶囊，内容从底下滚过被化开） ===== */ .pf-save-float { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 448px; z-index: 700; padding: 10px; border-radius: 40px; background: var(--h5-save-grad); -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.1); backdrop-filter: blur(26px) saturate(190%) brightness(1.1); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 var(--h5-bar-hl), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px var(--h5-bar-drop); } .pf-save-float .h5-submit { margin-top: 0; height: 52px; } /* 内容底部垫高：漂浮条高度 + 间距，保证最后一个表单项能完全滚出来 */ .pf-save-spacer { height: calc(96px + env(safe-area-inset-bottom)); } @keyframes h5Spin { to { transform: rotate(360deg); } } /* ============ 添加/删除联系人按钮 ============ */ .h5-link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--h5-primary); padding: 8px 4px; cursor: pointer; user-select: none; } .h5-link-btn:active { opacity: 0.6; } .h5-link-btn.danger { color: var(--h5-danger); } /* 联系人2展开动画 */ .h5-collapse { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s var(--h5-ease-out), opacity 0.3s; } .h5-collapse.open { max-height: 240px; opacity: 1; } /* ============ 提交按钮（胶囊） ============ */ .h5-submit { width: 100%; height: 54px; /* 老人友好：52→54，主按钮更大更显眼 */ margin-top: 6px; border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 2px; box-shadow: 0 10px 24px rgba(14, 164, 127, 0.35); cursor: pointer; transition: transform 0.25s var(--h5-ease-spring), opacity 0.25s, box-shadow 0.25s; display: flex; align-items: center; justify-content: center; gap: 8px; } .h5-submit:active { transform: scale(0.97); } .h5-submit[disabled] { opacity: 0.65; pointer-events: none; box-shadow: none; } .h5-submit .btn-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: h5Spin 0.8s linear infinite; } /* 隐私说明 */ .h5-privacy { margin-top: 16px; text-align: center; font-size: 11px; line-height: 1.7; color: var(--h5-text-3); padding: 0 12px; } /* ============ 骨架屏 ============ */ .h5-skeleton { border-radius: var(--h5-radius-lg); background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); padding: 18px; margin-bottom: 14px; } .sk-line { height: 14px; border-radius: 7px; margin-bottom: 12px; background: linear-gradient( 90deg, rgba(140, 140, 150, 0.14) 25%, rgba(140, 140, 150, 0.28) 50%, rgba(140, 140, 150, 0.14) 75% ); background-size: 200% 100%; animation: h5Shimmer 1.4s infinite; } .sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; } .sk-line.h48 { height: 48px; border-radius: var(--h5-radius-md); } .sk-line:last-child { margin-bottom: 0; } .sk-circle { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: linear-gradient( 90deg, rgba(140, 140, 150, 0.14) 25%, rgba(140, 140, 150, 0.28) 50%, rgba(140, 140, 150, 0.14) 75% ); background-size: 200% 100%; animation: h5Shimmer 1.4s infinite; } @keyframes h5Shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============ Toast（轻量自绘） ============ */ .h5-toast-root { position: fixed; top: calc(24px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .h5-toast { max-width: 82vw; padding: 12px 20px; border-radius: var(--h5-radius-capsule); background: var(--h5-glass-bg-strong); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); box-shadow: var(--h5-glass-shadow); font-size: 15px; /* 老人友好：提示字大一点，看得清 */ color: var(--h5-text-1); display: flex; align-items: center; gap: 8px; animation: h5ToastIn 0.4s var(--h5-ease-spring) both; } .h5-toast.out { animation: h5ToastOut 0.3s var(--h5-ease-out) both; } .h5-toast .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .h5-toast.success .dot { background: var(--h5-success); } .h5-toast.error .dot { background: var(--h5-danger); } .h5-toast.info .dot { background: var(--h5-primary); } @keyframes h5ToastIn { from { opacity: 0; transform: translateY(-18px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes h5ToastOut { to { opacity: 0; transform: translateY(-14px) scale(0.92); } } /* ============ Confirm（iOS 26 液态玻璃风格） ============ */ .h5-modal-mask { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); display: flex; align-items: center; justify-content: center; padding: 32px; animation: h5MaskIn 0.25s both; } @keyframes h5MaskIn { from { opacity: 0; } to { opacity: 1; } } .h5-modal { position: relative; width: 100%; max-width: 300px; border-radius: 26px; background: var(--h5-modal-bg); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); border: 1px solid var(--h5-modal-border); box-shadow: var(--h5-modal-shadow); overflow: hidden; animation: h5ModalIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both; /* 液态回弹 */ } /* 玻璃顶部反光层 */ .h5-modal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52%; background: var(--h5-modal-glare); pointer-events: none; } @keyframes h5ModalIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } .h5-modal-mask.out { animation: h5MaskOut 0.2s ease-in both; } .h5-modal-mask.out .h5-modal { animation: h5ModalOut 0.2s ease-in both; } @keyframes h5MaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes h5ModalOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.92); } } .h5-modal .modal-body { position: relative; padding: 24px 20px 18px; text-align: center; } .h5-modal .modal-title { font-size: 18px; font-weight: 700; letter-spacing: 0.2px; color: var(--h5-modal-text); margin-bottom: 8px; } .h5-modal .modal-content { font-size: 14px; color: var(--h5-modal-text-2); line-height: 1.6; } .h5-modal .modal-actions { position: relative; display: flex; gap: 10px; /* 独立玻璃胶囊，取消发丝分割线 */ padding: 0 14px 14px; } .h5-modal .modal-btn { flex: 1; height: 46px; border-radius: 999px; /* 半圆胶囊 */ font-size: 16px; font-weight: 500; color: var(--h5-modal-btn-text); background: var(--h5-modal-btn-bg); border: 1px solid var(--h5-modal-btn-border); box-shadow: inset 0 1px 0 var(--h5-modal-btn-hl); cursor: pointer; transition: transform 0.15s, filter 0.15s; } .h5-modal .modal-btn:active { transform: scale(0.96); } /* 悬停不变色、只放大（仅桌面指针设备触发，避免移动端点按后滞留 hover 态） */ @media (hover: hover) { .h5-modal .modal-btn:hover { transform: scale(1.04); } } .h5-modal .modal-btn.primary { font-weight: 600; color: var(--h5-modal-primary-text); background: var(--h5-modal-primary-bg); border-color: var(--h5-modal-primary-border); box-shadow: var(--h5-modal-primary-shadow); } .h5-modal .modal-btn.primary:active { transform: scale(0.96); } /* ============ 区域三级滚轮选择器 ============ */ .h5-picker-mask { position: fixed; inset: 0; z-index: 9997; background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: flex-end; animation: h5MaskIn 0.25s both; } .h5-picker { width: 100%; border-radius: var(--h5-radius-lg) var(--h5-radius-lg) 0 0; background: var(--h5-glass-bg-strong); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border-top: 1px solid var(--h5-glass-border); padding-bottom: env(safe-area-inset-bottom); animation: h5PickerIn 0.45s var(--h5-ease-spring) both; } @keyframes h5PickerIn { from { transform: translateY(100%); } to { transform: translateY(0); } } .h5-picker .picker-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--h5-input-border); } .h5-picker .picker-title { font-size: 15px; font-weight: 600; } .h5-picker .picker-btn { font-size: 15px; color: var(--h5-primary); padding: 4px 8px; cursor: pointer; } .h5-picker .picker-btn.confirm { font-weight: 600; } .h5-picker .picker-btn:active { opacity: 0.5; } /* 滚轮主体 */ .h5-wheels { display: flex; height: 260px; /* 老人友好：5 行 × 52px（原 44px 行高，与 h5.js WHEEL_ITEM_H 同步） */ position: relative; overflow: hidden; padding: 0 8px; } /* 中心选中指示条 */ .h5-wheels::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 52px; transform: translateY(-50%); border-radius: var(--h5-radius-sm); background: rgba(14, 164, 127, 0.08); border: 1px solid rgba(14, 164, 127, 0.2); pointer-events: none; z-index: 2; } /* 上下渐隐遮罩 */ .h5-wheels::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, var(--h5-glass-bg-strong) 0%, transparent 32%, transparent 68%, var(--h5-glass-bg-strong) 100% ); pointer-events: none; z-index: 3; } .h5-wheel-col { flex: 1; position: relative; z-index: 1; } .h5-wheel-col ul { list-style: none; position: absolute; left: 0; right: 0; top: 50%; transition: transform 0.28s var(--h5-ease-out); will-change: transform; } .h5-wheel-col li { height: 52px; /* 老人友好：44→52，滚动选项更好点 */ display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--h5-text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 6px; transition: color 0.2s, font-size 0.2s; } .h5-wheel-col li.active { color: var(--h5-text-1); font-size: 17px; font-weight: 600; } /* ============ 首页（home.html） ============ */ /* 首页头部：品牌条 + 问候（左对齐，商城式） */ .hm-head { padding: calc(16px + env(safe-area-inset-top)) 2px 0; /* 与下方金刚区间距由 .hm-quick margin-top 统一承担（14px 节奏） */ animation: h5FadeDown 0.6s var(--h5-ease-out) both; } .hm-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .hm-brand .hm-logo { width: 26px; height: 26px; } .hm-brand .hm-brand-name { font-size: 14px; font-weight: 600; color: var(--h5-text-2); letter-spacing: 1px; } .hm-hello { display: flex; align-items: center; gap: 12px; } .hm-hello .hello-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); background: var(--h5-input-bg); } .hm-hello h2 { font-size: 24px; /* 老人友好：问候语大字 */ font-weight: 700; } .hm-hello p { margin-top: 2px; font-size: 13px; color: var(--h5-text-2); } /* 商城式 Banner */ .hm-banner { position: relative; overflow: hidden; margin: 14px 0 16px; padding: 22px 20px; border-radius: var(--h5-radius-lg); background: linear-gradient(120deg, #0c9172 0%, #0ea47f 45%, #3fe0b6 100%); color: #fff; cursor: pointer; /* fill 用 backwards：both 的 transform 残留会压住 h5.js 收起时的 inline translateY */ animation: h5FadeDown 0.6s var(--h5-ease-out) 0.08s backwards; } .hm-banner .hm-banner-title { font-size: 22px; font-weight: 800; letter-spacing: 1px; } .hm-banner .hm-banner-sub { margin-top: 6px; font-size: 13px; line-height: 1.7; opacity: 0.92; } .hm-banner .hm-banner-cta { display: inline-block; margin-top: 14px; padding: 8px 20px; border-radius: var(--h5-radius-capsule); background: rgba(255, 255, 255, 0.95); color: #0c9172; font-size: 14px; font-weight: 700; } .hm-banner .hm-banner-dot { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.14); } .hm-banner .hm-banner-dot.d1 { width: 120px; height: 120px; right: -30px; top: -40px; } .hm-banner .hm-banner-dot.d2 { width: 70px; height: 70px; right: 70px; bottom: -30px; } /* 快捷入口（金刚区）：iOS26 彩色渐变图标 + 玻璃拟态 */ .hm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; /* 与页面左右 14px 外边距协调的间隙节奏 */ margin: 14px 0 0; /* 间距节奏统一：问候→金刚区→Banner→头部底边均 14px */ animation: h5FadeDown 0.6s var(--h5-ease-out) 0.16s both; } .hm-quick .qk-item { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 4px 12px; /* 内边距上下 14/12：图标上下留白与格间间隙协调 */ border-radius: var(--h5-radius-md); /* 液态玻璃卡片底（深浅色变量） */ background: var(--h5-qk-bg); -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.08); backdrop-filter: blur(24px) saturate(180%) brightness(1.08); border: 1px solid var(--h5-qk-border); box-shadow: inset 0 1px 0 var(--h5-bar-hl), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 8px 20px var(--h5-bar-drop); cursor: pointer; transition: transform 0.25s var(--h5-ease-spring); } .hm-quick .qk-item:active { transform: scale(0.93); } .hm-quick .qk-ico { width: 58px; height: 58px; border-radius: 19px; display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(0, 0, 0, 0.28); } .hm-quick .qk-ico svg { width: 27px; height: 27px; } .hm-quick .qk-ico.qk-c1 { background: linear-gradient(140deg, #3fe0b6 0%, #0b8a6b 100%); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(14, 164, 127, 0.4); } .hm-quick .qk-ico.qk-c2 { background: linear-gradient(140deg, #fbbf24 0%, #f59e0b 100%); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(245, 158, 11, 0.38); } .hm-quick .qk-ico.qk-c3 { background: linear-gradient(140deg, #60a5fa 0%, #3b82f6 100%); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(59, 130, 246, 0.38); } .hm-quick .qk-ico.qk-c4 { background: linear-gradient(140deg, #c084fc 0%, #a855f7 100%); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(168, 85, 247, 0.38); } .hm-quick .qk-name { font-size: 12px; font-weight: 600; color: var(--h5-text-2); } /* 品牌行右侧迷你预约按钮：Banner 收起后渐入（h5.js 按滚动比例控制），绝对定位不占布局 */ .hm-head { position: relative; } .hm-book-mini { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 2px; height: 34px; padding: 0 15px; border: none; border-radius: var(--h5-radius-capsule); background: linear-gradient(135deg, #3fe0b6, #0ea47f); color: #fff; font-size: 13px; font-weight: 700; font-family: inherit; box-shadow: 0 6px 16px rgba(14, 164, 127, 0.4); opacity: 0; transform: scale(0.85); pointer-events: none; will-change: opacity, transform; } .hm-hello .hm-hello-text { flex: 1; min-width: 0; } /* 服务说明 */ .hm-note p { font-size: 13px; color: var(--h5-text-2); line-height: 1.9; } /* 信息卡行 */ .h5-info-row { display: flex; align-items: center; padding: 14px 2px; /* 老人友好：行高加大 */ border-bottom: 1px solid var(--h5-input-border); font-size: 15px; } .h5-info-row:last-child { border-bottom: none; } .h5-info-row .k { width: 92px; flex-shrink: 0; color: var(--h5-text-2); white-space: nowrap; /* 标签不换行，避免长标签把值挤歪 */ overflow: hidden; text-overflow: ellipsis; } .h5-info-row .v { flex: 1; min-width: 0; word-break: break-all; } /* 幽灵胶囊按钮（退出登录等次操作） */ .h5-ghost-btn { width: 100%; height: 52px; /* 老人友好：46→52 */ border-radius: var(--h5-radius-capsule); border: 1px solid var(--h5-input-border); background: var(--h5-glass-bg); color: var(--h5-text-2); font-size: 16px; cursor: pointer; transition: transform 0.25s var(--h5-ease-spring), opacity 0.2s; } .h5-ghost-btn:active { transform: scale(0.97); opacity: 0.8; } /* 演示模式水印条 */ .h5-mock-bar { margin: 0 auto 12px; max-width: fit-content; font-size: 11px; color: var(--h5-warning); background: rgba(255, 159, 10, 0.12); border: 1px solid rgba(255, 159, 10, 0.25); border-radius: var(--h5-radius-capsule); padding: 4px 12px; } /* 工具类 */ .h5-hidden { display: none !important; } .h5-mt8 { margin-top: 8px; } .h5-mt12 { margin-top: 12px; } /* ============ 底部 Tabbar（固定视口底部，适配安全区） ============ */ /* 底部 Tabbar：悬浮胶囊 · iOS26 液态玻璃（高透明 + 顶部高光 + 底部投影） */ .h5-tabbar { position: fixed; left: 16px; right: 16px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 900; max-width: 448px; /* 480 - 左右各 16 外边距 */ margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: var(--h5-radius-capsule); /* 底色调实：避免后方绿色按钮/卡片透过玻璃把整条菜单染色 */ background: var(--h5-tabbar-grad); -webkit-backdrop-filter: blur(28px) saturate(140%) brightness(1.04); backdrop-filter: blur(28px) saturate(140%) brightness(1.04); border: 1px solid var(--h5-glass-border); box-shadow: inset 0 1px 0 var(--h5-bar-hl), /* 顶部镜面高光 */ inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px var(--h5-bar-drop); } .h5-tabbar .tab-item { position: relative; z-index: 1; /* 压在滑动胶囊之上 */ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 0 6px; border-radius: var(--h5-radius-capsule); color: var(--h5-text-2); /* 液态玻璃条上未选中项也要够清晰 */ font-size: 11px; text-decoration: none; cursor: pointer; transition: color 0.25s; } /* 选中项：只改文字色，背景由 .tab-glider 滑动胶囊承载 */ .h5-tabbar .tab-item.active { color: #fff; font-weight: 700; } /* 滑动胶囊：选中态背景，随点击在标签间滑动（h5.js 控制位置） */ .h5-tabbar .tab-glider { position: absolute; top: 8px; left: 0; height: calc(100% - 16px); width: 0; border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); box-shadow: 0 6px 16px rgba(14, 164, 127, 0.35); transition: transform 0.32s var(--h5-ease-spring), width 0.32s var(--h5-ease-spring); pointer-events: none; } .h5-tabbar .tab-glider.no-anim { transition: none; } .h5-tabbar .tab-item:active { opacity: 0.7; } /* Tab 切换果冻：点击项/到达页选中项做一次挤压回弹（关键帧复用 h5Jelly） */ .h5-tabbar .tab-item.jelly { animation: h5Jelly 0.6s var(--h5-ease-out); } /* 筛选 tab 同效果：点击项做一次挤压回弹（关键帧复用 h5Jelly） */ .h5-ord-tabs .ord-tab.jelly { animation: h5Jelly 0.6s var(--h5-ease-out); } .h5-tabbar .tab-icon { width: 22px; height: 22px; } /* 含 Tabbar 页面：内容区底部留白防遮挡（悬浮条更高） */ .h5-page.with-tabbar { padding-bottom: calc(112px + env(safe-area-inset-bottom)); } /* ============ 区块标题（卡外） ============ */ .h5-section-title { font-size: 16px; font-weight: 700; margin: 20px 4px 12px; display: flex; align-items: center; gap: 8px; } .h5-section-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--h5-primary-grad); } .h5-section-title .tag { font-size: 11px; font-weight: 400; color: var(--h5-text-3); } /* ============ 服务项目卡片（首页） ============ */ .h5-proj-card { position: relative; background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); border-radius: var(--h5-radius-lg); box-shadow: var(--h5-glass-shadow); padding: 18px; margin-bottom: 14px; cursor: pointer; transition: transform 0.25s var(--h5-ease-spring), box-shadow 0.25s; animation: h5CardIn 0.55s var(--h5-ease-spring) both; } .h5-proj-card:active { transform: scale(0.98); } .h5-proj-card .proj-head { display: flex; align-items: center; gap: 12px; } .h5-proj-card .proj-ico { width: 52px; height: 52px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: rgba(14, 164, 127, 0.12); } .h5-proj-card .proj-main { flex: 1; min-width: 0; } .h5-proj-card .proj-name-row { display: flex; align-items: center; gap: 8px; } .h5-proj-card .proj-name { font-size: 17px; /* 老人友好：项目名加大加粗 */ font-weight: 700; } .h5-proj-card .proj-tag { flex: none; padding: 2px 8px; border-radius: var(--h5-radius-capsule); background: linear-gradient(120deg, #f59e0b, #f97316); color: #fff; font-size: 11px; font-weight: 700; } .h5-proj-card .proj-desc { margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--h5-text-2); } .h5-proj-card .proj-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; } .h5-proj-card .proj-price { color: var(--h5-warning); font-weight: 700; } .h5-proj-card .proj-price .cur { font-size: 13px; margin-right: 1px; } .h5-proj-card .proj-price .num { font-size: 21px; } .h5-proj-card .proj-price.negotiable { font-size: 14px; font-weight: 500; color: var(--h5-text-2); } .h5-proj-card .proj-book-btn { padding: 10px 26px; /* 老人友好：预约按钮加大 */ border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); color: #fff; font-size: 15px; font-weight: 700; /* 老人友好：加粗 */ box-shadow: 0 6px 16px rgba(14, 164, 127, 0.3); } /* ============ Chip 单 / 多选 ============ */ .h5-chip-group { display: flex; flex-wrap: wrap; gap: 10px; } .h5-chip { padding: 12px 24px; /* 老人友好：选项加大一档，好按 */ border-radius: var(--h5-radius-capsule); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); font-size: 15px; color: var(--h5-text-2); cursor: pointer; user-select: none; transition: all 0.25s var(--h5-ease-spring); } .h5-chip.active { color: #fff; background: var(--h5-primary-grad); border-color: transparent; font-weight: 600; box-shadow: 0 4px 12px rgba(14, 164, 127, 0.3); } .h5-chip:active { transform: scale(0.95); } /* ============ 明细多选项（名称 + 描述小字） ============ */ .h5-opt-group-title { font-size: 13px; font-weight: 600; color: var(--h5-text-2); margin: 14px 0 8px; padding-left: 4px; } .h5-opt-group-title:first-child { margin-top: 2px; } /* 明细选项空态提示（未选大类 / 该大类无可选项） */ .h5-opt-empty { padding: 18px 14px; font-size: 14px; line-height: 1.7; color: var(--h5-text-3); text-align: center; } .h5-opt { position: relative; padding: 16px 50px 16px 16px; /* 老人友好：选项卡内边距加大一档；右侧 50px 留位给卡片级勾选圈 */ border-radius: var(--h5-radius-md); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); margin-bottom: 10px; cursor: pointer; user-select: none; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; } .h5-opt .opt-name { font-size: 16px; /* 老人友好：选项名称加大一档 */ font-weight: 500; display: flex; align-items: center; justify-content: space-between; } /* 勾选圈：卡片级绝对定位，垂直居中于整张卡（名称+描述两行时不会偏上） */ .h5-opt::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--h5-text-3); transition: all 0.25s; } .h5-opt .opt-desc { margin-top: 3px; font-size: 13px; /* 老人友好：选项说明 12→13 */ line-height: 1.5; color: var(--h5-text-2); } .h5-opt.active { border-color: var(--h5-primary); background: rgba(14, 164, 127, 0.08); box-shadow: 0 0 0 1px var(--h5-primary) inset; } .h5-opt.active .opt-name { color: var(--h5-primary); } .h5-opt.active::after { content: "✓"; border-color: transparent; background: var(--h5-primary-grad); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ============ 已选服务类型卡（预约页） ============ */ .h5-type-card { display: flex; align-items: center; gap: 12px; } .h5-type-card .type-main { flex: 1; min-width: 0; } .h5-type-card .type-name { font-size: 16px; font-weight: 700; } .h5-type-card .type-desc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--h5-text-2); } .h5-type-card .type-price { flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--h5-warning); } /* ============ 日期网格（预约页，未来 14 天） ============ */ .h5-date-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .h5-date-cell { padding: 12px 4px; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--h5-radius-sm); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); text-align: center; cursor: pointer; user-select: none; transition: all 0.25s var(--h5-ease-spring); } .h5-date-cell .d-top { font-size: 13px; color: var(--h5-text-3); } .h5-date-cell .d-day { margin-top: 3px; font-size: 17px; font-weight: 700; } .h5-date-cell.active { background: var(--h5-primary-grad); border-color: transparent; box-shadow: 0 4px 12px rgba(14, 164, 127, 0.3); } .h5-date-cell.active .d-top, .h5-date-cell.active .d-day { color: #fff; } /* ============ 多行文本框（备注） ============ */ .h5-textarea { width: 100%; min-height: 96px; padding: 12px 16px; border-radius: var(--h5-radius-md); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); font-size: 15px; line-height: 1.6; resize: none; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } .h5-textarea::placeholder { color: var(--h5-text-3); font-size: 14px; } .h5-textarea:focus { border-color: var(--h5-primary); box-shadow: 0 0 0 3px rgba(14, 164, 127, 0.15); background: var(--h5-glass-bg-strong); } .h5-textarea-count { margin-top: 4px; text-align: right; font-size: 11px; color: var(--h5-text-3); } /* ============ 顶部返回栏（固定吸顶；页面底色 + 底部 16px 渐隐，栏底溶进页面无割裂） ============ */ .h5-navbar { position: sticky; top: 0; z-index: 800; display: flex; align-items: center; gap: 10px; margin: 0 -16px 14px; /* 抵消 .h5-page 左右 padding，背景条满宽；底部留出与内容的间隙 */ padding: calc(14px + env(safe-area-inset-top)) 20px 12px; background: none; /* 完全透明导航：无任何底色/模糊，标题直接浮在页面上 */ } .h5-navbar .nav-back { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); box-shadow: var(--h5-glass-shadow); font-size: 22px; line-height: 1; color: var(--h5-text-1); cursor: pointer; user-select: none; transition: transform 0.25s var(--h5-ease-spring); } .h5-navbar .nav-back:active { transform: scale(0.92); } .h5-navbar .nav-title { font-size: 17px; font-weight: 600; /* 半圆胶囊液态玻璃底板：滚动时内容从标题下方穿过，保证标题可读 */ padding: 7px 18px; border-radius: 999px; background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); box-shadow: var(--h5-glass-shadow); white-space: nowrap; } /* 导航标题统一居中：胶囊随文字宽度收缩，自动外边距居中（:only-child = 无返回键独占整行；.center = 右侧操作钮绝对定位不占位） */ .h5-navbar .nav-title:only-child, .h5-navbar .nav-title.center { flex: 0 1 auto; margin-left: auto; margin-right: auto; } /* 有返回键：左移 23px 补偿返回键占位（36px 返回键 + 10px 间距）的一半，胶囊中线落在导航条中线上 */ .h5-navbar .nav-back + .nav-title { flex: 0 1 auto; margin-left: auto; margin-right: auto; transform: translateX(-23px); } .h5-navbar .nav-action { position: absolute; right: 16px; top: 0; bottom: 0; margin: auto 0; height: 32px; padding: 0 14px; border: none; border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(14, 164, 127, 0.3); cursor: pointer; transition: transform 0.15s; } .h5-navbar .nav-action:active { transform: scale(0.94); } /* ============ 个人中心：用户头卡 ============ */ .h5-me-head { display: flex; align-items: center; gap: 14px; padding: calc(28px + env(safe-area-inset-top)) 8px 18px; animation: h5FadeDown 0.6s var(--h5-ease-out) both; } .h5-me-head .me-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid rgba(255, 255, 255, 0.7); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); background: var(--h5-input-bg); } .h5-me-head .me-info { flex: 1; min-width: 0; } .h5-me-head .me-name { font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h5-me-head .me-sub { margin-top: 2px; font-size: 12px; color: var(--h5-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 头像可点击更换：右下角编辑角标 */ .h5-me-head .me-avatar-wrap { position: relative; flex-shrink: 0; cursor: pointer; } .h5-me-head .me-avatar-wrap .me-avatar { display: block; } .h5-me-head .me-avatar-edit { position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--h5-primary); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--h5-page-bg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); pointer-events: none; } /* 顶栏右侧头像（陪护端 orders）：点击更换 */ .h5-navbar .nav-avatar-wrap { position: absolute; right: 16px; top: calc(50% + env(safe-area-inset-top) / 2); transform: translateY(-50%); cursor: pointer; } .h5-navbar .nav-avatar { display: block; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.35); background: var(--h5-input-bg); } .h5-navbar .nav-avatar-edit { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--h5-primary); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--h5-page-bg); pointer-events: none; } /* ============ 功能列表行（个人中心） ============ */ .h5-card.h5-menu-card { padding-top: 6px; padding-bottom: 6px; } .h5-menu-row { display: flex; align-items: center; gap: 12px; padding: 16px 2px; /* 老人友好：菜单行高加大 */ border-bottom: 1px solid var(--h5-input-border); font-size: 16px; color: var(--h5-text-1); text-decoration: none; cursor: pointer; transition: opacity 0.2s; } .h5-menu-row:last-child { border-bottom: none; } .h5-menu-row:active { opacity: 0.55; } .h5-menu-row .menu-icon { width: 38px; /* 老人友好：图标 34→38 */ height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .h5-menu-row .menu-label { flex: 1; min-width: 0; } .h5-menu-row .menu-arrow { flex-shrink: 0; color: var(--h5-text-3); font-size: 18px; } /* 菜单行右侧附加值（如「外观」行显示当前模式） */ .h5-menu-row .menu-extra { flex-shrink: 0; font-size: 13px; color: var(--h5-text-3); } /* 外观选择弹层选项（跟随系统 / 浅色 / 深色） */ .theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 20px; margin: 6px 0; border-radius: 999px; /* 半圆胶囊 */ border: 1px solid var(--h5-input-border); background: var(--h5-input-bg); color: var(--h5-text-1); text-align: left; cursor: pointer; transition: border-color 0.2s; } .theme-opt .theme-opt-name { font-size: 15px; font-weight: 600; } .theme-opt .theme-opt-desc { flex: 1; min-width: 0; font-size: 12px; color: var(--h5-text-3); } .theme-opt .theme-opt-check { color: var(--h5-primary); font-size: 16px; font-weight: 700; } .theme-opt.on { border-color: var(--h5-primary); background: rgba(14, 164, 127, 0.08); } /* ============ BD管理 ============ */ /* 空态 */ .h5-empty { text-align: center; padding: 44px 20px; } .h5-empty .empty-icon { font-size: 44px; margin-bottom: 12px; } /* 「我的」卡头部 */ .h5-bd-myhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .h5-bd-myhead .bd-myname { font-size: 18px; font-weight: 700; } /* 层级徽章 */ .h5-level-badge { font-size: 11px; line-height: 1; padding: 4px 10px; border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); color: #fff; font-weight: 600; flex-shrink: 0; } /* 邀请码（大字号等宽） */ .h5-bd-invite { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 26px; font-weight: 700; letter-spacing: 6px; text-align: center; padding: 14px 10px 14px 16px; border-radius: var(--h5-radius-md); background: rgba(14, 164, 127, 0.08); border: 1px dashed rgba(14, 164, 127, 0.45); color: var(--h5-primary); } /* 二维码 */ .h5-bd-qr { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .h5-bd-qr img { width: 168px; height: 168px; border-radius: var(--h5-radius-md); border: 1px solid var(--h5-input-border); background: #fff; } /* 列表空文案 */ .h5-bd-none { padding: 12px 2px; font-size: 13px; color: var(--h5-text-3); text-align: center; } /* 下级条目 */ .h5-bd-child { padding: 8px 0; border-bottom: 1px solid var(--h5-input-border); } .h5-bd-child:last-child { border-bottom: none; } .h5-bd-child .child-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 2px; } .h5-bd-child .child-name { font-size: 15px; font-weight: 600; } /* 邀请用户条目 */ .h5-bd-invited { padding: 10px 2px; border-bottom: 1px solid var(--h5-input-border); } .h5-bd-invited:last-child { border-bottom: none; } .h5-bd-invited .invited-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .h5-bd-invited .invited-name { font-size: 14px; font-weight: 500; } .h5-bd-invited .invited-phone { font-size: 13px; color: var(--h5-text-2); font-family: "SF Mono", Menlo, Consolas, monospace; } .h5-bd-invited .invited-sub { margin-top: 2px; font-size: 12px; color: var(--h5-text-3); } /* 「共 N 人」计数 */ .h5-bd-total { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--h5-text-2); } /* 超 50 条提示 */ .h5-bd-tip { margin-top: 10px; padding: 8px 10px; border-radius: var(--h5-radius-sm); background: rgba(255, 159, 10, 0.1); font-size: 12px; color: var(--h5-warning); text-align: center; } /* 我的业绩：三个数字块横排（我发展的 / 团队发展的共用） */ .h5-bd-statlabel { font-size: 13px; font-weight: 600; color: var(--h5-text-2); margin-bottom: 8px; } .h5-bd-stats { display: flex; gap: 10px; margin-bottom: 14px; } .h5-bd-stats:last-of-type { margin-bottom: 0; } .h5-bd-stats .stat-item { flex: 1; text-align: center; padding: 12px 4px 10px; border-radius: var(--h5-radius-sm); background: var(--h5-glass-bg); border: 1px solid var(--h5-glass-border); } .h5-bd-stats .stat-num { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--h5-primary); font-variant-numeric: tabular-nums; } .h5-bd-stats .stat-cap { margin-top: 2px; font-size: 12px; color: var(--h5-text-3); } /* 业绩口径小字说明 */ .h5-bd-statnote { margin-top: 10px; font-size: 11px; color: var(--h5-text-3); text-align: center; } /* 团队明细脑图：入口链接 + 横向可滚动的卡片树（对齐后台 BD 详情脑图） */ .h5-bd-treelink { display: block; margin-top: 10px; text-align: center; font-size: 13px; color: var(--h5-primary); text-decoration: none; } .h5-mind-wrap { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; /* 横竖两个方向都交给原生滚动：横向滚本容器（触摸跟手、自带惯性）， 纵向本容器不可滚自然串联到页面；JS 不再驱动触摸位移（bindMindDrag 只识别轻点） */ touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; /* 滚动条融入暗色主题：细条+半透明滑块（Firefox） */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; /* 提示浏览器把滚动内容提升到独立合成层，拖动时避免整页重排重绘 */ will-change: scroll-position; /* 禁掉 iOS 长按放大镜/文本选择标注，否则长按会先打断拖动手势 */ -webkit-touch-callout: none; } /* 滚动条融入暗色主题（WebKit/Blink），轨道透明不留白底 */ .h5-mind-wrap::-webkit-scrollbar { height: 4px; } .h5-mind-wrap::-webkit-scrollbar-track { background: transparent; } .h5-mind-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; } .h5-mind-wrap.is-dragging { cursor: grabbing; } /* 拖动/惯性期间关掉卡片毛玻璃：iPhone 上每张卡的 backdrop-filter 都会逐帧 重算 20px 高斯模糊，是横向拖动掉帧的主因；用更不透明的实色背景顶替保持可读 */ .h5-mind-wrap.is-dragging .h5-mind-node, .h5-mind-wrap.is-dragging .h5-mind-node .n-toggle { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--h5-glass-bg-strong); } .h5-mind { position: relative; display: inline-block; min-width: 100%; text-align: center; padding: 6px 2px 2px; } .h5-mind-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .h5-mind-svg path { fill: none; stroke: var(--h5-text-3); stroke-width: 1.5; opacity: .55; } /* 树分支：节点卡片在上、下级容器在下；is-collapsed 收起整支 */ .h5-mind-branch { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; } .h5-mind-kids { display: flex; flex-wrap: nowrap; justify-content: center; gap: 12px; margin-top: 42px; } .h5-mind-branch.is-collapsed > .h5-mind-kids { display: none; } .h5-mind-node { position: relative; min-width: 138px; max-width: 200px; padding: 9px 14px; border-radius: 14px; text-align: center; background: var(--h5-glass-bg); border: 1px solid var(--h5-glass-border); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } /* 自己节点：主色描边高亮 */ .h5-mind-node.is-current { border-color: var(--h5-primary); box-shadow: 0 0 0 3px rgba(14, 164, 127, 0.15); } .h5-mind-node .n-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } /* 「我」小胶囊 */ .h5-mind-node .n-me { font-size: 10px; font-weight: 600; color: var(--h5-primary); border: 1px solid var(--h5-primary); border-radius: 999px; padding: 1px 6px; } .h5-mind-node .n-sub { margin-top: 5px; font-size: 12px; color: var(--h5-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 折叠钮：吸在卡片底边中点，盖住连线路径 */ .h5-mind-node .n-toggle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--h5-glass-bg); border: 1px solid var(--h5-glass-border); color: var(--h5-text-2); font-size: 12px; line-height: 1; cursor: pointer; z-index: 2; user-select: none; } .h5-mind-leaf { margin-top: 14px; text-align: center; font-size: 12px; color: var(--h5-text-3); position: relative; z-index: 1; } /* ===== 伙伴详情弹层内容（脑图点卡片；复用 .h5-sheet 组件，作用域限 #bdNodeSheet 防互染） ===== */ #bdNodeSheet .node-head { display: flex; align-items: center; gap: 8px; padding: 6px 2px 12px; } #bdNodeSheet .node-name { font-size: 17px; font-weight: 700; } #bdNodeSheet .node-stats { margin-bottom: 6px; } #bdNodeSheet .info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 2px; font-size: 13px; border-top: 1px solid var(--h5-input-border); } #bdNodeSheet .info-row .k { flex: none; color: var(--h5-text-3); } #bdNodeSheet .info-row .v { text-align: right; word-break: break-all; } #bdNodeSheet .sheet-foot { margin-top: 12px; } /* 「发展的用户」区块：标题 + 列表 + 状态行 */ #bdNodeSheet .dev-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--h5-input-border); font-size: 13px; font-weight: 600; color: var(--h5-text-2); } #bdNodeSheet .dev-list { margin-top: 6px; margin-bottom: 4px; } #bdNodeSheet .dev-state { padding: 14px 0; text-align: center; font-size: 12px; color: var(--h5-text-3); } /* ============ 开发中占位页（wip.html） ============ */ .h5-wip { min-height: 68vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; } .h5-wip-icon { width: 88px; height: 88px; border-radius: 26px; background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); box-shadow: var(--h5-glass-shadow); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } /* CSS 自绘时钟图标（敬请期待） */ .h5-wip-clock { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--h5-primary); } .h5-wip-clock::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 13px; border-radius: 2px; background: var(--h5-primary); transform: translate(-50%, -100%); } .h5-wip-clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 11px; border-radius: 2px; background: var(--h5-primary-2); transform-origin: 50% 0; transform: translate(-50%, 0) rotate(130deg); } .h5-wip .wip-title { font-size: 18px; font-weight: 700; } .h5-wip .wip-sub { font-size: 13px; color: var(--h5-text-2); margin-bottom: 10px; } /* ============ 字段红字错误提示（身份证号格式等） ============ */ .h5-field-error { margin-top: 6px; padding-left: 4px; font-size: 12px; color: var(--h5-danger); } /* 身份证解析结果只读展示（出生日期 / 年龄） */ .h5-idcard-info { margin-top: 8px; padding: 10px 12px; border-radius: var(--h5-radius-sm); background: rgba(48, 209, 88, 0.08); border: 1px solid rgba(48, 209, 88, 0.25); } .h5-idcard-info .info-item { display: flex; align-items: center; font-size: 13px; line-height: 1.9; } .h5-idcard-info .info-item .k { width: 70px; flex-shrink: 0; color: var(--h5-text-3); } .h5-idcard-info .info-item .v { color: var(--h5-text-1); font-weight: 500; } /* 分段选择器 / chip 组只读态（身份证解析自动值，禁止手改） */ .h5-segment.readonly, .h5-chip-group.readonly { opacity: 0.6; pointer-events: none; } /* ============ 注册页协议勾选行（自绘 checkbox，非原生） ============ */ .h5-agree-row { display: flex; align-items: flex-start; gap: 8px; margin: 16px 4px 12px; font-size: 14px; /* 老人友好：协议行字号 12→14，看得清才点得准 */ line-height: 1.7; color: var(--h5-text-2); user-select: none; } .h5-checkbox { width: 22px; /* 老人友好：勾选圈 18→22，更好点 */ height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--h5-text-3); background: var(--h5-input-bg); cursor: pointer; position: relative; transition: background 0.2s, border-color 0.2s; } .h5-checkbox.checked { background: var(--h5-primary-grad); border-color: transparent; } /* 勾选内对白勾（CSS 自绘，随勾选圈放大同步放大） */ .h5-checkbox.checked::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .h5-agree-row .agree-text { flex: 1; min-width: 0; } .h5-agree-row .doc-link { color: var(--h5-primary); text-decoration: none; } .h5-agree-row .doc-link:active { opacity: 0.6; } /* ============ 协议查看页（agreement.html） ============ */ /* 固定布局：顶部胶囊 + 正文卡片内嵌滚动 + 底部固定返回栏，页面本身不滚动 */ body[data-page="agreement"] .h5-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } /* 顶部胶囊切换（doc-glider 滑动承载选中背景，对齐底部 tabbar 观感） */ .h5-doc-tabs { position: relative; display: flex; flex-shrink: 0; padding: 3px; margin-top: calc(18px + env(safe-area-inset-top)); margin-bottom: 14px; border-radius: var(--h5-radius-capsule); background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); box-shadow: var(--h5-glass-shadow); } .h5-doc-tabs .doc-glider { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); box-shadow: 0 4px 12px rgba(14, 164, 127, 0.3); transition: transform 0.34s var(--h5-ease-spring); pointer-events: none; } .h5-doc-tabs.show-privacy .doc-glider { transform: translateX(100%); } .h5-doc-tabs .doc-tab { position: relative; z-index: 1; /* 压在滑动胶囊之上 */ flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--h5-radius-capsule); font-size: 14px; color: var(--h5-text-2); cursor: pointer; user-select: none; transition: color 0.25s; } /* 选中项只改文字态，背景由 doc-glider 滑动胶囊承载 */ .h5-doc-tabs .doc-tab.active { color: #fff; font-weight: 600; } /* 正文卡片：占满剩余高度，内容在卡片内滚动 */ .h5-card.h5-doc-card { flex: 1; min-height: 0; margin-bottom: 12px; padding: 22px 18px; overflow-y: auto; overscroll-behavior: contain; /* 卡片滚到底/顶不牵连页面 */ -webkit-overflow-scrolling: touch; } /* 卡片内滚动条收窄淡化（桌面端可见时） */ .h5-card.h5-doc-card::-webkit-scrollbar { width: 4px; } .h5-card.h5-doc-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; } /* 切换篇目：正文随方向滑入（配合 h5.js 的 doc-in-l/doc-in-r） */ @keyframes h5DocInL { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } } @keyframes h5DocInR { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } .h5-doc.doc-in-l { animation: h5DocInL 0.32s var(--h5-ease-out); } .h5-doc.doc-in-r { animation: h5DocInR 0.32s var(--h5-ease-out); } /* 底部固定返回栏（flex 布局下自然停在屏底，页面不滚即视觉固定） */ .doc-bottombar { flex-shrink: 0; } .doc-bottombar .doc-footer { margin-top: 10px; text-align: center; font-size: 11px; line-height: 1.8; color: var(--h5-text-3); } .h5-doc h1 { text-align: center; font-size: 19px; font-weight: 700; } .h5-doc .doc-meta { margin-top: 6px; margin-bottom: 14px; text-align: center; font-size: 11px; color: var(--h5-text-3); } .h5-doc h2 { margin: 18px 0 8px; font-size: 15px; font-weight: 600; line-height: 1.5; } .h5-doc p { margin-bottom: 8px; font-size: 13px; line-height: 1.9; color: var(--h5-text-2); text-align: justify; } /* ============================================================ * 登录页（login.html）美化 —— 全部样式按 body[data-page="login"], body[data-page="partner-login"] 作用域隔离 * ============================================================ */ body[data-page="login"] .login-brand , body[data-page="partner-login"] .login-brand { padding-top: 64px; } body[data-page="login"] .login-brand .logo , body[data-page="partner-login"] .login-brand .logo { width: 76px; height: 76px; border-radius: 24px; font-size: 36px; animation: loginLogoBreath 3.2s ease-in-out infinite; } @keyframes loginLogoBreath { 0%, 100% { box-shadow: 0 14px 34px rgba(14, 164, 127, .4), 0 0 0 6px rgba(14, 164, 127, .07); } 50% { box-shadow: 0 14px 38px rgba(251, 191, 36, .45), 0 0 0 12px rgba(251, 191, 36, .1); } } body[data-page="login"] .login-brand h1 , body[data-page="partner-login"] .login-brand h1 { letter-spacing: 1px; } body[data-page="login"] .login-card , body[data-page="partner-login"] .login-card { padding: 24px 20px 20px; } /* 登录说明行（老人友好：告诉老人不用记密码） */ .login-tip { margin: -4px 0 14px; font-size: 14px; color: var(--h5-text-2); text-align: center; } /* 手机号输入框：图标前缀 + 大圆角 */ .login-input-wrap { position: relative; margin-bottom: 16px; } .login-input-wrap .login-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--h5-text-3); pointer-events: none; } .login-input-wrap .h5-input { height: 52px; padding-left: 42px; border-radius: var(--h5-radius-lg); font-size: 17px; letter-spacing: 1px; } .login-input-wrap .h5-input:focus { border-color: var(--h5-primary); box-shadow: 0 0 0 4px rgba(14, 164, 127, .15); } /* 登录按钮：周期流光 */ body[data-page="login"] .login-submit , body[data-page="partner-login"] .login-submit { position: relative; overflow: hidden; height: 54px; } body[data-page="login"] .login-submit::after , body[data-page="partner-login"] .login-submit::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: loginShine 2.8s ease-in-out infinite; pointer-events: none; } @keyframes loginShine { 0%, 55% { left: -70%; } 100% { left: 135%; } } /* 分隔线 */ .login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 2px 12px; color: var(--h5-text-3); font-size: 12px; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--h5-input-border); } /* 注册入口：幽灵按钮样式的链接 */ .login-register-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; /* 老人友好：46→52，注册入口更好按 */ border-radius: var(--h5-radius-capsule); border: 1px solid var(--h5-input-border); background: var(--h5-glass-bg); color: var(--h5-primary); font-size: 16px; text-decoration: none; transition: transform .25s var(--h5-ease-spring), opacity .2s; } .login-register-btn:active { transform: scale(.97); opacity: .8; } /* 信任角标 */ .login-badges { display: flex; justify-content: center; gap: 18px; margin-top: 6px; } .login-badges .badge { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--h5-text-3); white-space: nowrap; } .login-badges .badge svg { width: 14px; height: 14px; color: var(--h5-primary); } /* 底部协议 */ body[data-page="login"] .login-foot , body[data-page="partner-login"] .login-foot { margin-top: 30px; text-align: center; font-size: 12px; color: var(--h5-text-3); } .login-foot a { color: var(--h5-primary); text-decoration: none; } /* 桌面端：收窄居中、品牌区下移，避免宽屏拉伸感 */ @media (min-width: 768px) { body[data-page="login"] .h5-page , body[data-page="partner-login"] .h5-page { max-width: 430px; } body[data-page="login"] .login-brand , body[data-page="partner-login"] .login-brand { padding-top: 96px; } } /* ============ 底部滑出弹层（地址编辑 / 预约选地址共用） ============ */ .h5-sheet { position: fixed; inset: 0; z-index: 9996; } .h5-sheet .sheet-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: h5MaskIn 0.25s both; } .h5-sheet .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; border-radius: var(--h5-radius-lg) var(--h5-radius-lg) 0 0; background: var(--h5-glass-bg-strong); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border-top: 1px solid var(--h5-glass-border); padding-bottom: env(safe-area-inset-bottom); animation: h5PickerIn 0.45s var(--h5-ease-spring) both; /* 滚动条融入暗色主题（Firefox） */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; } /* 滚动条融入暗色主题（WebKit/Blink），轨道透明不留白底 */ .h5-sheet .sheet-panel::-webkit-scrollbar { width: 4px; } .h5-sheet .sheet-panel::-webkit-scrollbar-track { background: transparent; } .h5-sheet .sheet-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; } .h5-sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--h5-input-border); } .h5-sheet .sheet-title { font-size: 15px; font-weight: 600; } .h5-sheet .sheet-close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--h5-input-bg); color: var(--h5-text-2); font-size: 13px; cursor: pointer; } .h5-sheet .sheet-body { padding: 6px 16px 0; } .h5-sheet .sheet-foot { padding: 6px 16px 16px; } /* ===== 微信式操作面板（更换头像：拍照 / 从相册选择 / 取消） ===== 复用 .h5-sheet 骨架与 h5PickerIn/h5SheetOut 动画； 面板本体透明，选项组与取消按钮做成两块独立悬浮玻璃，两侧留白 */ .h5-sheet.actsheet .sheet-panel { max-height: none; overflow: visible; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: none; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); } .actsheet-group { overflow: hidden; border-radius: var(--h5-radius-lg); background: var(--h5-glass-bg-strong); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); box-shadow: var(--h5-glass-shadow); } .actsheet-item { display: block; width: 100%; padding: 15px 16px; border: none; background: transparent; font-size: 16px; color: var(--h5-text-1); cursor: pointer; transition: background 0.15s ease; } .actsheet-item + .actsheet-item { border-top: 1px solid var(--h5-input-border); } .actsheet-item:active { background: var(--h5-input-bg); } .actsheet-cancel { display: block; width: 100%; margin-top: 8px; padding: 15px 16px; border: 1px solid var(--h5-glass-border); border-radius: var(--h5-radius-lg); background: var(--h5-glass-bg-strong); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); box-shadow: var(--h5-glass-shadow); font-size: 16px; font-weight: 600; color: var(--h5-text-2); cursor: pointer; animation: h5ActFadeIn 0.4s var(--h5-ease-out) 0.06s both; transition: transform 0.15s ease, opacity 0.15s ease; } .actsheet-cancel:active { transform: scale(0.98); opacity: 0.85; } @keyframes h5ActFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 类输入框的可点行（区域选择触发） */ .h5-input-like { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .h5-input-like .placeholder { color: var(--h5-text-3, #8e8e93); } .h5-input-like .h5-input-arrow { color: var(--h5-text-2); font-size: 16px; } /* 开关 */ .h5-switch-row { display: flex; align-items: center; justify-content: space-between; } .h5-switch { width: 46px; height: 28px; border-radius: 999px; background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); position: relative; cursor: pointer; transition: background 0.25s, border-color 0.25s; flex: none; } .h5-switch i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.25s var(--h5-ease-spring); } .h5-switch.on { background: linear-gradient(90deg, #3fe0b6, #0b8a6b); border-color: transparent; } .h5-switch.on i { transform: translateX(18px); } /* ============ 地址管理（address.html） ============ */ .addr-card { background: var(--h5-glass-bg, rgba(255, 255, 255, 0.55)); border: 1px solid var(--h5-glass-border, rgba(255, 255, 255, 0.6)); border-radius: var(--h5-radius-lg); padding: 16px 18px; /* 老人友好：卡片行高加大 */ margin-bottom: 12px; } .addr-card .addr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .addr-card .addr-name { font-size: 16px; font-weight: 600; } .addr-card .addr-phone { font-size: 14px; color: var(--h5-text-2); font-variant-numeric: tabular-nums; } .addr-card .addr-default-tag { font-size: 12px; /* 老人友好：默认标记更醒目 */ font-weight: 700; color: #fff; background: linear-gradient(90deg, #3fe0b6, #0b8a6b); border-radius: var(--h5-radius-capsule); padding: 3px 9px; margin-left: auto; } .addr-card .addr-text { font-size: 14px; color: var(--h5-text-2); line-height: 1.6; } .addr-card .addr-ops { display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--h5-input-border); } .addr-card .addr-op { font-size: 14px; /* 老人友好：操作字加大，点击区域加高 */ padding: 6px 0; color: var(--h5-text-2); cursor: pointer; } .addr-card .addr-op:active { opacity: 0.5; } .addr-card .addr-op.is-primary { color: var(--h5-primary); } .addr-card .addr-op.is-danger { color: #ff453a; } /* ============ 预约页服务地址（booking.html） ============ */ .bk-addr-row { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: var(--h5-radius-md, 14px); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); cursor: pointer; } .bk-addr-row:active { opacity: 0.7; } .bk-addr-row .a-ico { font-size: 17px; flex: none; } .bk-addr-row .a-main { flex: 1; min-width: 0; } .bk-addr-row .a-title { font-size: 14px; font-weight: 600; } .bk-addr-row .a-title .a-phone { font-weight: 400; color: var(--h5-text-2); margin-left: 8px; font-size: 12px; } .bk-addr-row .a-text { font-size: 12px; color: var(--h5-text-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-addr-row .a-placeholder { font-size: 14px; color: var(--h5-text-3, #8e8e93); } .bk-addr-row .a-arrow { color: var(--h5-text-2); flex: none; } .bk-addr-row.is-error { border-color: #ff453a; } /* 预约页选地址弹层条目 */ .bk-addr-opt { display: flex; align-items: center; gap: 10px; padding: 13px 4px; border-bottom: 1px solid var(--h5-input-border); cursor: pointer; } .bk-addr-opt:last-child { border-bottom: none; } .bk-addr-opt .o-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--h5-text-2); position: relative; } .bk-addr-opt.active .o-radio { border-color: var(--h5-primary); } .bk-addr-opt.active .o-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--h5-primary); } .bk-addr-opt .o-main { flex: 1; min-width: 0; } .bk-addr-opt .o-title { font-size: 14px; font-weight: 600; } .bk-addr-opt .o-title .o-tag { font-size: 10px; color: var(--h5-primary); border: 1px solid var(--h5-primary); border-radius: 6px; padding: 1px 5px; margin-left: 6px; font-weight: 400; } .bk-addr-opt .o-text { font-size: 12px; color: var(--h5-text-2); margin-top: 2px; } /* ============ 服务边界提示（booking.html，GB/T 47801—2026 §8.2 禁止事项明示） ============ */ .h5-redline { margin-top: 14px; padding: 14px 16px; border-radius: var(--h5-radius-md); background: rgba(255, 159, 10, 0.08); border: 1px solid rgba(255, 159, 10, 0.28); } .h5-redline .rl-title { font-size: 14px; font-weight: 600; color: var(--h5-warning); margin-bottom: 6px; } .h5-redline .rl-title::before { content: '⚠️ '; } .h5-redline .rl-intro { font-size: 12px; color: var(--h5-text-2); line-height: 1.7; margin-bottom: 6px; } .h5-redline .rl-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--h5-text-2); line-height: 1.9; } .h5-redline .rl-more { font-size: 11px; color: var(--h5-text-3); margin-top: 8px; } .h5-redline .rl-more a { color: var(--h5-primary); text-decoration: none; } /* ============ 我的预约列表（appointments.html） ============ */ .appt-card { padding: 18px; /* 老人友好：卡片行高加大 */ border-radius: var(--h5-radius-lg); background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); margin-bottom: 12px; } .appt-card .appt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .appt-card .appt-type { font-size: 16px; font-weight: 600; } .appt-card .appt-status { flex: none; font-size: 13px; /* 老人友好：状态加大加粗，一眼看清进度 */ font-weight: 700; color: var(--h5-primary); border: 1px solid var(--h5-primary); border-radius: var(--h5-radius-capsule); padding: 4px 10px; } .appt-card .appt-row { display: flex; gap: 8px; font-size: 14px; color: var(--h5-text-2); margin-top: 10px; line-height: 1.6; } .appt-card .appt-row .r-ico { flex: none; } .appt-card .appt-row .r-text { flex: 1; min-width: 0; } .appt-card .appt-items { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--h5-input-border); font-size: 12px; color: var(--h5-text-3); line-height: 1.7; } .appt-card .appt-foot { margin-top: 8px; font-size: 11px; color: var(--h5-text-3); } /* ============ 预约向导（booking.html 答题式分步） ============ */ /* 内容底部让出固定操作条的位置 */ #bookingContent { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* 进度条 */ .bk-progress { margin: 4px 0 18px; } .bk-progress .bp-text { font-size: 14px; color: var(--h5-text-2); margin-bottom: 8px; } .bk-progress .bp-text span { color: var(--h5-primary); font-weight: 700; } .bk-progress .bp-track { height: 6px; border-radius: 3px; background: var(--h5-input-bg); overflow: hidden; } .bk-progress .bp-bar { height: 100%; border-radius: 3px; background: var(--h5-primary-grad); transition: width 0.3s var(--h5-ease-out); } /* 题目区：一次只显示一题，切换时淡入上移 */ .bk-step { display: none; } .bk-step.is-active { display: block; animation: bkStepIn 0.3s var(--h5-ease-out); } @keyframes bkStepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .bk-q { font-size: 22px; /* 老人友好：题目大而醒目 */ font-weight: 700; margin-bottom: 4px; } .bk-q-sub { font-size: 14px; color: var(--h5-text-2); margin-bottom: 16px; } /* 大选项卡（第 1 题服务、第 4 题时段）：比明细选项更大更好点 */ .bk-opt { padding: 18px 50px 18px 18px; /* 右侧留位给勾选圈；第 1 题（#bkTypeList）单独还原 */ margin-bottom: 12px; border-radius: var(--h5-radius-lg); } .bk-opt .opt-name { font-size: 18px; font-weight: 600; } .bk-opt .opt-desc { font-size: 13px; color: var(--h5-text-2); margin-top: 4px; } /* 第 1 题服务卡：左文右价 */ #bkTypeList .bk-opt { display: flex; align-items: center; gap: 12px; padding-right: 18px; /* 勾选圈在价格列内（::before），无需右侧留位 */ } #bkTypeList .bk-opt::after { display: none; } #bkTypeList .bk-opt .opt-main { flex: 1; min-width: 0; } /* 勾选圈并入价格列（::before）：与价格文字同一行盒垂直居中，三张卡的圈与价格严格同线同位； 若沿用 .opt-name::after，圈在名称行（偏上），价格在卡片垂直中心，两者错位 */ #bkTypeList .bk-opt .opt-name::after { display: none; } #bkTypeList .bk-opt .opt-price { flex: none; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--h5-warning); } #bkTypeList .bk-opt .opt-price::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--h5-text-3); transition: all 0.25s; } #bkTypeList .bk-opt.active .opt-price::before { content: "✓"; border-color: transparent; background: var(--h5-primary-grad); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* 底部固定操作条 */ .bk-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; z-index: 800; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--h5-glass-bg-strong); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border-top: 1px solid var(--h5-glass-border); } .bk-nav-btn { flex: 1; height: 54px; border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 2px; box-shadow: 0 10px 24px rgba(14, 164, 127, 0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.25s var(--h5-ease-spring); } .bk-nav-btn:active { transform: scale(0.97); } .bk-nav-btn.ghost { flex: 0.6; background: var(--h5-input-bg); color: var(--h5-text-1); border: 1px solid var(--h5-input-border); box-shadow: none; } .bk-nav-btn[disabled] { /* 置灰态（服务升级中）：褪去主色渐变，走主题变量适配深浅色 */ background: var(--h5-input-bg); color: var(--h5-text-3); border: 1px solid var(--h5-input-border); box-shadow: none; cursor: not-allowed; } /* 确认页汇总行 */ .bk-summary { padding: 6px 16px; } .bk-summary .sm-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--h5-glass-border); font-size: 15px; } .bk-summary .sm-row:last-child { border-bottom: none; } .bk-summary .sm-k { flex: none; width: 66px; color: var(--h5-text-2); } .bk-summary .sm-v { flex: 1; min-width: 0; word-break: break-all; } .bk-summary .sm-edit { flex: none; color: var(--h5-primary); font-weight: 600; padding: 2px 10px; border: 1px solid var(--h5-primary); border-radius: var(--h5-radius-capsule); cursor: pointer; } /* 协议勾选行 */ .bk-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 14px; border-radius: var(--h5-radius-md); background: var(--h5-input-bg); border: 1px solid var(--h5-input-border); cursor: pointer; user-select: none; } .bk-agree .ag-box { flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 8px; border: 2px solid var(--h5-text-3); background: transparent; } .bk-agree.on .ag-box { border-color: transparent; background: var(--h5-primary-grad); position: relative; } .bk-agree.on .ag-box::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; } .bk-agree .ag-text { flex: 1; font-size: 14px; line-height: 1.7; color: var(--h5-text-2); } .bk-agree .ag-text a { color: var(--h5-primary); text-decoration: none; } .bk-agree.shake { animation: bkShake 0.4s; } @keyframes bkShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* ===== 首页吸顶头部（液态玻璃，背景偏实避免下方内容透出造成“冻结”错觉） ===== */ /* ===== 首页吸顶头部（液态玻璃；背景/模糊在 ::before 上并做底部渐进淡出，下沿溶进页面无硬边；内容文字不随之变淡） ===== */ .hm-fixed { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 800; padding: 8px 14px 12px; /* 下 padding 12px：底部 10px 淡出带全落在 padding 里，不会切到金刚区内容 */ } .hm-fixed::before { content: ''; position: absolute; inset: 0; z-index: -1; /* 液态玻璃模糊层：更强饱和与提亮，四周高光描边模拟玻璃折射；底部 10px 淡出与底色层对齐——模糊和底色同区同速淡出，中间不留弱模糊带（否则滚过的文字只被压暗没被化开，像一条透明缝） */ -webkit-backdrop-filter: var(--h5-fog-blur); backdrop-filter: var(--h5-fog-blur); box-shadow: inset 0 1px 0 var(--h5-bar-hl), inset 1px 0 0 rgba(255,255,255,0.06), inset -1px 0 0 rgba(255,255,255,0.06); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent 100%); pointer-events: none; } .hm-fixed::after { content: ''; position: absolute; inset: 0; z-index: -1; /* 液态玻璃底色层：高透亮泽（青绿反光→顶部镜面高光→底部微暗），底部 10px 淡出与模糊层叠加溶解 */ background: var(--h5-head-grad), linear-gradient(to bottom, var(--h5-head-hl), transparent 18%); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent 100%); pointer-events: none; } .hm-fixed .hm-head { margin-bottom: 0; } /* 吮吸动效堆叠：飞行的 Banner 沉到底层，从问候区和金刚区下面穿过、钻进迷你按钮 */ .hm-fixed .hm-head { position: relative; z-index: 3; } .hm-fixed .hm-quick { position: relative; z-index: 2; } #hmCollapse { position: relative; z-index: 1; } /* 迷你预约按钮果冻出现：挤压-回弹-衰减的果冻弹跳（沿按钮自身 transform 之外用 animation 覆盖） */ @keyframes h5Jelly { 0% { transform: scale(1, 1); } 22% { transform: scale(1.22, 0.78); } 42% { transform: scale(0.84, 1.16); } 62% { transform: scale(1.10, 0.92); } 80% { transform: scale(0.96, 1.04); } 100% { transform: scale(1, 1); } } .hm-book-mini.jelly { animation: h5Jelly 0.65s var(--h5-ease-out); } #hmCollapse { overflow: visible; /* 吮吸动效：Banner 要飞出容器被吸进右上角按钮，不能再裁切 */ will-change: height, opacity; } #hmCollapse .hm-banner { margin: 14px 0 0; transform-origin: 50% 50%; will-change: transform, opacity; } /* 覆盖 .hm-banner 默认 margin，间距节奏统一 14px；吮吸动效以中心为原点缩小 */ /* ===== H5 页面切换丝滑过渡 ===== */ @keyframes h5PageInR { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } } @keyframes h5PageInL { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } } @keyframes h5PageOutL { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-26px); } } @keyframes h5PageOutR { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(26px); } } /* 滑入用 backwards：动画结束不留 transform 残留，否则 fixed 吸顶头会失效（transform 祖先会成为 fixed 的包含块） */ .h5-page.page-in-r { animation: h5PageInR 0.34s var(--h5-ease-out) backwards; } .h5-page.page-in-l { animation: h5PageInL 0.34s var(--h5-ease-out) backwards; } .h5-page.page-out-l { animation: h5PageOutL 0.18s ease-in both; pointer-events: none; } .h5-page.page-out-r { animation: h5PageOutR 0.18s ease-in both; pointer-events: none; } /* 首页「服务项目」标题：滑到头部下沿时吸住，下方列表继续滚动（--hm-head-h 由 h5.js 每帧同步头部高度；top 上叠量 = 淡出带 10px + 1px 防亚像素缝隙） */ .h5-section-title.hm-sticky { position: sticky; top: calc(var(--hm-head-h, 260px) - 11px); z-index: 700; padding: 9px 28px; margin: 8px -16px 10px; /* 负边距抵消 .h5-page padding，吸住时遮罩条满宽；top 上叠 11px 盖住吸顶头底部 10px 淡出带，滚动内容不会从缝隙里露出来 */ background: transparent; border-top: 1px solid transparent; border-bottom: 1px solid transparent; transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; } /* 吸住时变成透明毛玻璃条：半透底色+大模糊，与吸顶头溶成一体，投影由这里承担；平时为纯文字标题 */ .h5-section-title.hm-sticky.stuck { /* 吸住时与吸顶头底边同色同参数（--h5-sticky-bg 即头部渐变收尾色，深浅色各自对齐），标题条上叠 11px 与头部淡出带交叉，接缝两侧透明度完全一致、无割裂；透明度兼顾滚过内容的遮挡（标题文字可读性） */ background: var(--h5-sticky-bg); -webkit-backdrop-filter: var(--h5-fog-blur); backdrop-filter: var(--h5-fog-blur); border-color: transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* 投影收敛：避免把下方卡片压暗成一块 */ text-shadow: var(--h5-sticky-ts); /* 深色下文字压在滚动内容上保持可读；浅色为 none */ } .h5-section-title.hm-sticky.stuck .tag { color: var(--h5-sticky-tag); } /* 吸住时小字提亮，不被透上来的内容吃掉 */ /* ===== 预约详情弹层内容（复用 .h5-sheet 底部弹层组件；样式作用域限 #apptSheetBody，避免与卡片样式互染） ===== */ #apptSheetBody .sheet-appt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 12px; } #apptSheetBody .appt-type { font-size: 17px; font-weight: 700; } #apptSheetBody .appt-status { flex: none; font-size: 13px; font-weight: 700; color: var(--h5-primary); border: 1px solid var(--h5-primary); border-radius: var(--h5-radius-capsule); padding: 4px 10px; } #apptSheetBody .sheet-row { display: flex; gap: 14px; padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 15px; line-height: 1.6; } #apptSheetBody .sheet-row .k { flex: none; width: 76px; color: var(--h5-text-2); } #apptSheetBody .sheet-row .v { flex: 1; min-width: 0; word-break: break-all; } /* 预约卡片「详情 ›」入口（整卡可点，给按压反馈） */ .appt-card { cursor: pointer; transition: transform 0.25s var(--h5-ease-spring), border-color 0.25s; } .appt-card:active { transform: scale(0.98); } .appt-foot { display: flex; align-items: center; justify-content: space-between; } .appt-foot .appt-more { color: var(--h5-primary); font-size: 13px; font-weight: 600; } /* ===== 选项选中小弹跳（单选卡、胶囊、日期格统一） ===== */ @keyframes h5OptPop { 0% { transform: scale(0.96); } 55% { transform: scale(1.02); } 100% { transform: scale(1); } } .h5-opt.active, .h5-chip.active, .h5-date-cell.active { animation: h5OptPop 0.32s var(--h5-ease-spring); } /* ===== 全站页面进入/离开过渡（tab 页之间的左右滑动由 bindTabbar 负责，不走这里） ===== */ @keyframes h5PageEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes h5PageLeave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } } /* backwards：动画结束不留 transform 残留，避免 fixed 后代（吸顶头/底部条）失效 */ .h5-page.h5-enter { animation: h5PageEnter 0.32s var(--h5-ease-out) backwards; } .h5-page.h5-leave { animation: h5PageLeave 0.18s ease-in both; pointer-events: none; } /* ===== 桌面端适配（≥768px）：480px 应用栏居中成「手机框」，两侧光斑降噪，底部弹层收窄 ===== */ @media (min-width: 768px) { /* 应用栏铺与移动端一致的纯色底，光斑只留在两侧做氛围； 不用 backdrop-filter/transform：它们会让栏内 fixed 后代（吸顶头/底部条）失效 */ body:not([data-page="login"]) .h5-page { background: var(--h5-page-bg); border-left: 1px solid rgba(255, 255, 255, 0.07); border-right: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 0 80px rgba(0, 0, 0, 0.55); } /* 光斑按 vw 取值，宽屏下过大过艳，降噪聚焦应用栏 */ body:not([data-page="login"]) .h5-bg .blob { opacity: 0.45; } /* 底部弹层 / 三级滚轮收窄到应用栏宽；用 margin auto 居中，不动 transform（进场动画要用） */ .h5-sheet .sheet-panel { max-width: 480px; margin: 0 auto; } .h5-picker-mask { justify-content: center; } .h5-picker { max-width: 480px; } } /* ===== 底部弹层/滚轮选择器 关闭动画（h5.js closeSheetAnimated 加 .closing，300ms 后再隐藏） ===== */ @keyframes h5SheetOut { from { transform: translateY(0); } to { transform: translateY(105%); } } @keyframes h5MaskOut { from { opacity: 1; } to { opacity: 0; } } .h5-sheet.closing .sheet-panel { animation: h5SheetOut 0.3s ease-in both; } .h5-sheet.closing .sheet-mask { animation: h5MaskOut 0.3s ease-in both; } .h5-picker-mask.closing { animation: h5MaskOut 0.3s ease-in both; } .h5-picker-mask.closing .h5-picker { animation: h5SheetOut 0.3s ease-in both; } /* ============ 服务码大字块（预约卡 assigned 态，样式对齐 h5-bd-invite） ============ */ .h5-svc-code { margin-top: 12px; padding: 12px 10px; border-radius: var(--h5-radius-md); background: rgba(14, 164, 127, 0.08); border: 1px dashed rgba(14, 164, 127, 0.45); text-align: center; } .h5-svc-code .sc-num { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 28px; font-weight: 700; letter-spacing: 8px; text-indent: 8px; /* 抵消末位 letter-spacing，视觉居中 */ color: var(--h5-primary); } .h5-svc-code .sc-tip { margin-top: 4px; font-size: 12px; color: var(--h5-text-3); } /* ============ 星级（rated 展示 + 评价弹层点选） ============ */ .h5-stars { color: var(--h5-warning); font-size: 14px; letter-spacing: 2px; } .appt-card .appt-rating { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--h5-input-border); } .appt-card .appt-rating .rating-comment { flex: 1; min-width: 0; font-size: 12px; color: var(--h5-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 评价弹层大星星点选 */ .h5-rate-stars { display: flex; justify-content: center; gap: 12px; padding: 10px 0 6px; } .h5-rate-stars .rate-star { font-size: 40px; line-height: 1; color: var(--h5-text-3); cursor: pointer; transition: transform 0.2s var(--h5-ease-spring), color 0.2s; } .h5-rate-stars .rate-star.on { color: var(--h5-warning); } .h5-rate-stars .rate-star:active { transform: scale(1.18); } /* ============ 预约卡状态修饰与底部操作行（取消预约 / 评价） ============ */ .appt-card .appt-status.is-grey, #apptSheetBody .appt-status.is-grey { color: var(--h5-text-3); border-color: var(--h5-text-3); } .appt-card .appt-ops { display: flex; justify-content: flex-end; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--h5-input-border); } .appt-card .appt-op { font-size: 14px; padding: 6px 0; color: var(--h5-text-2); cursor: pointer; } .appt-card .appt-op:active { opacity: 0.5; } .appt-card .appt-op.is-primary { color: var(--h5-primary); } .appt-card .appt-op.is-danger { color: var(--h5-danger); } /* ============ 筛选 tab（订单列表 / 工单）与工单卡 ============ */ .h5-ord-tabs { position: relative; /* ord-glider 定位基准 */ display: flex; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: var(--h5-radius-capsule); background: var(--h5-glass-bg); -webkit-backdrop-filter: var(--h5-glass-blur); backdrop-filter: var(--h5-glass-blur); border: 1px solid var(--h5-glass-border); } /* 滑动胶囊：选中背景由它承载，切换时平滑滑动（对齐底部 tabbar 观感，JS 测量 offsetLeft/offsetWidth 驱动） */ .h5-ord-tabs .ord-glider { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: var(--h5-radius-capsule); background: var(--h5-primary-grad); box-shadow: 0 4px 12px rgba(14, 164, 127, 0.3); transition: transform 0.34s var(--h5-ease-spring), width 0.34s var(--h5-ease-spring); pointer-events: none; } .h5-ord-tabs .ord-glider.no-anim { transition: none; } .h5-ord-tabs .ord-tab { position: relative; z-index: 1; /* 压在滑动胶囊之上 */ flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--h5-radius-capsule); font-size: 15px; font-weight: 600; color: var(--h5-text-2); cursor: pointer; transition: color 0.25s; } /* 选中项只改文字色，背景由 ord-glider 滑动胶囊承载 */ .h5-ord-tabs .ord-tab.active { color: #fff; } /* 工单卡内主按钮小一号 */ .ord-card .h5-submit { margin-top: 14px; height: 48px; font-size: 15px; } /* 联系电话（完整号，可点击拨号） */ .ord-tel { color: var(--h5-primary); font-weight: 600; text-decoration: none; } /* 服务码输入框（等宽大字居中） */ .ord-code-input { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 20px; letter-spacing: 6px; text-align: center; } /* ============ 数量徽标（如「待服务 3 单」） ============ */ .h5-badge { flex-shrink: 0; padding: 4px 10px; border-radius: var(--h5-radius-capsule); background: rgba(255, 159, 10, 0.12); color: var(--h5-warning); font-size: 12px; font-weight: 600; line-height: 1.3; } /* ============================================================ * 全站备案页脚（h5.js bootstrap 统一注入 #siteFooter；ICP/公司/版本，合规要求） * ============================================================ */ .h5-icp-foot { margin-top: 28px; padding: 10px 8px 6px; font-size: 11px; line-height: 1.8; color: var(--h5-text-3); text-align: center; } .h5-icp-foot a { color: inherit; text-decoration: none; } .h5-icp-foot a:active { opacity: 0.7; }