/* ============================================================ 医生个人主页 · theme.css（多配色主题）换肤方式：，各主题变量覆盖块见文件末尾；默认（blue）取 :root 值。 ============================================================ */ :root { --primary: #1E6FFF; --primary-dark: #0C447C; --primary-light: #E6F1FB; --page-bg: #F5F8FC; --card-bg: #FFFFFF; --card-border: #E3EBF5; --ok: #0F6E56; --warn: #BA7517; --danger: #A32D2D; --text: #1F2937; --text-2: #6B7280; --radius: 12px; /* ---- 主题派生色（各主题覆盖块会替换）---- */ --primary-hover: #1859D6; /* 主按钮悬停 */ --primary-rgb: 30, 111, 255; /* 主色 RGB，用于 rgba 阴影/光晕 */ --primary-soft: #CFE0FF; /* 主色底上的浅色文字（激活页签小字/页脚链接） */ --on-dark: #9FB8D8; /* 深色页脚上的次要文字 */ --ok-bg: #E1F5EE; /* 成功状态底色 */ --warn-bg: #FAEEDA; /* 警示状态底色 */ --danger-bg: #FCEBEB; /* 危险状态底色 */ --danger-border: #F0C4C4; /* 危险按钮描边 */ --neutral-bg: #F1EFE8; /* 中性徽章底色 */ --disabled: #B6BEC9; /* 禁用/约满 */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--page-bg); color: var(--text); font-size: 15px; line-height: 1.7; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* ---------- 顶栏 ---------- */ .site-header { background: var(--card-bg); border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 58px; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--primary-dark); font-size: 16px; } .brand-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); display: inline-block; } .nav { display: flex; gap: 24px; } .nav a { color: var(--text-2); font-size: 14px; } .nav a:hover { color: var(--primary); } .main { padding: 24px 20px 48px; display: flex; flex-direction: column; gap: 20px; } /* ---------- 卡片 ---------- */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 28px; } .card.narrow { max-width: 560px; margin: 0 auto; width: 100%; } .card-title { font-size: 17px; font-weight: 500; color: var(--primary-dark); margin-bottom: 18px; padding-left: 12px; border-left: 4px solid var(--primary); } .muted { color: var(--text-2); font-size: 14px; } .tips { margin-top: 12px; } /* ---------- 主页横幅 ---------- */ .hero { display: flex; gap: 28px; align-items: center; background: linear-gradient(135deg, var(--primary-light) 0%, var(--card-bg) 60%); } .hero-avatar { flex: 0 0 128px; } .hero-avatar img, .avatar-fallback { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--card-border); } .avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 48px; font-weight: 500; } .hero-name { font-size: 24px; font-weight: 500; color: var(--text); } .hero-name small { font-size: 15px; color: var(--text-2); margin-left: 8px; } .hero-meta { color: var(--text-2); margin: 6px 0 12px; } /* ---------- 标签 ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tags-lg .tag { font-size: 14px; padding: 6px 14px; } .tag { background: var(--primary-light); color: var(--primary); font-size: 13px; padding: 3px 12px; border-radius: 999px; } /* 医生页「擅长病种」的标签可点击（跳转搜索），保持与普通标签一致的外观 */ a.tag-link { text-decoration: none; transition: background .15s, color .15s; } a.tag-link:hover { background: var(--primary); color: #fff; } /* ---------- 病种标签多选器（后台医生管理） ---------- */ .tag-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; } .tag-opt { display: inline-flex; align-items: center; gap: 6px; background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 4px 12px 4px 8px; cursor: pointer; font-size: 13px; color: var(--text); user-select: none; } .tag-opt:hover { border-color: var(--primary); } .tag-opt input { margin: 0; cursor: pointer; } .tag-opt:has(input:checked) { background: var(--primary-light); border-color: var(--primary); } .tag-opt input:checked + span { color: var(--primary); font-weight: 500; } .tag-opt input:disabled { cursor: default; } /* ---------- 出诊安排 ---------- */ .schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; } .schedule-day { background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 12px; } .schedule-date { font-weight: 500; font-size: 14px; margin-bottom: 8px; } .schedule-date small { color: var(--text-2); font-weight: 400; margin-left: 4px; } .schedule-slot { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; gap: 8px; } .schedule-slot .slot-time { color: var(--text-2); font-size: 12px; } .schedule-slot.is-full { color: var(--disabled); } .schedule-slot.is-full .slot-time { color: var(--disabled); } .slot-count { color: var(--primary); } .schedule-slot.is-full .slot-count { color: var(--disabled); } /* ---------- 按钮 ---------- */ .btn { display: inline-block; border: none; border-radius: 8px; padding: 10px 24px; font-size: 15px; cursor: pointer; transition: background .15s; } .btn-lg { padding: 13px 36px; font-size: 16px; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); color: #fff; } .btn-danger { background: #fff; color: var(--danger); border: 1px solid var(--danger-border); } .btn-danger:hover { background: var(--danger-bg); } .btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 6px; } .btn:disabled { background: var(--disabled); cursor: not-allowed; } /* ---------- 预约页 ---------- */ .day-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .day-tab { border: 1px solid var(--card-border); background: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; text-align: center; min-width: 84px; } .day-tab small { display: block; color: var(--text-2); font-size: 12px; } .day-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; } .day-tab.active small { color: var(--primary-soft); } .slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .slot-card { border: 1px solid var(--card-border); border-radius: 8px; padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .slot-card strong { font-weight: 500; } .slot-card small { display: block; color: var(--text-2); font-size: 12px; } .slot-card.active { border-color: var(--primary); background: var(--primary-light); } .slot-card.disabled { opacity: .45; cursor: not-allowed; background: var(--page-bg); } .selected-slot { margin: -8px 0 14px; } /* ---------- 表单 ---------- */ .form-row { margin-bottom: 16px; } .form-row label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--text); } .form-row label em { color: var(--danger); font-style: normal; } .form-row input, .form-row select, .form-row textarea { width: 100%; border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 12px; font-size: 15px; font-family: inherit; background: #fff; color: var(--text); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); } .form-inline { display: flex; gap: 16px; } .form-inline > div { flex: 1; } .captcha-box img { height: 42px; border-radius: 8px; border: 1px solid var(--card-border); cursor: pointer; } /* ---------- 结果 / 状态 ---------- */ .result-body { background: var(--primary-light); border-radius: 8px; padding: 18px 20px; margin-bottom: 14px; } .result-body p { margin-bottom: 6px; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; } .badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-off { background: var(--neutral-bg); color: var(--text-2); } .badge-info { background: var(--primary-light); color: var(--primary); } /* 失败态（退款失败等）：此前只有 ok/warn/off/info 四态 */ .badge-err { background: var(--danger-bg); color: var(--danger); } .notice { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .notice-ok { background: var(--ok-bg); color: var(--ok); } .notice-err { background: var(--danger-bg); color: var(--danger); } .prose p { margin-bottom: 10px; } /* ---------- 底部 ---------- */ .site-footer { background: var(--primary-dark); color: var(--on-dark); padding: 28px 0; margin-top: 40px; font-size: 13px; } .footer-inner { text-align: center; } .footer-inner p { margin-bottom: 4px; } .footer-inner a { color: var(--primary-soft); } .footer-text { color: var(--primary-light); } /* ---------- 后台管理 ---------- */ .admin-layout { display: flex; min-height: calc(100vh - 58px); } .admin-side { width: 190px; background: var(--card-bg); border-right: 1px solid var(--card-border); padding: 20px 12px; flex-shrink: 0; } .admin-side a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--text-2); font-size: 14px; margin-bottom: 2px; } .admin-side a.active, .admin-side a:hover { background: var(--primary-light); color: var(--primary); } .admin-body { flex: 1; padding: 24px; min-width: 0; } /* 后台卡片内容防溢出：宽表格/宽表单超出卡片宽度时在卡片内部横向滚动，而不是撑破边框溢出到框架外（预约管理等多列表格页面） */ .admin-body .card { overflow-x: auto; } .admin-body .card > table.tbl { min-width: 640px; } .admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .admin-top h1 { font-size: 19px; font-weight: 500; color: var(--primary-dark); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat-card { background: var(--page-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px 18px; } .stat-card .num { font-size: 26px; font-weight: 500; color: var(--primary); } .stat-card .lbl { font-size: 13px; color: var(--text-2); } table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; } table.tbl th, table.tbl td { border-bottom: 1px solid var(--card-border); padding: 10px 12px; text-align: left; white-space: nowrap; } table.tbl th { background: var(--page-bg); color: var(--text-2); font-weight: 400; } table.tbl td.wrap { white-space: normal; min-width: 160px; } .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; background: var(--ok-bg); color: var(--ok); } .flash-err { background: var(--danger-bg); color: var(--danger); } .inline-form { display: inline-flex; gap: 6px; align-items: center; } .inline-form input[type="number"], .num-input { width: 64px; padding: 5px 8px; border: 1px solid var(--card-border); border-radius: 6px; } /* ---------- 后台 · 排班号源 ---------- */ .time-input, .date-input, .sel-input { padding: 6px 10px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text); } .time-input:focus, .date-input:focus, .sel-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 111, 255, .12); } .list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; } .list-toolbar .sel-all { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; } .slot-del { font-size: 12px; color: var(--danger); display: inline-flex; align-items: center; gap: 3px; } .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 14px; } .pager a { border: 1px solid var(--card-border); border-radius: 6px; padding: 5px 12px; color: var(--text); background: #fff; } .pager a:hover { border-color: var(--primary); color: var(--primary); } .pager .muted { color: var(--text-2); } .sch-day { border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; } .sch-day-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; } .sch-day-date { font-weight: 500; font-size: 14px; } .sch-day-date small { font-weight: 400; margin-left: 6px; } .slot-editors { display: flex; flex-wrap: wrap; gap: 10px; } .slot-edit { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--page-bg); } .slot-edit.is-empty { background: #fff; border-style: dashed; } .slot-edit.is-stop { opacity: .62; } .slot-edit .slot-name { font-size: 13px; color: var(--text-2); } .slot-edit input[type="number"] { width: 58px; padding: 4px 6px; border: 1px solid var(--card-border); border-radius: 6px; } .slot-edit .slot-booked { font-size: 12px; } .slot-edit .slot-stop { font-size: 12px; color: var(--danger); display: inline-flex; align-items: center; gap: 3px; } /* ---------- 响应式 ---------- */ @media (max-width: 720px) { .hero { flex-direction: column; text-align: center; } .hero-avatar { flex: none; } .tags { justify-content: center; } .form-inline { flex-direction: column; gap: 0; } .nav { gap: 14px; } .admin-layout { flex-direction: column; } .admin-side { width: 100%; display: flex; overflow-x: auto; padding: 10px; } .admin-side a { white-space: nowrap; margin-bottom: 0; } } /* ---------- 人工客服（预约查询页） ---------- */ .contact-list { display: grid; gap: 14px; } .contact-item { border: 1px solid var(--card-border); border-radius: 10px; padding: 14px 16px; background: var(--page-bg); overflow: hidden; } .contact-name { font-weight: 600; margin-bottom: 8px; color: var(--primary); } .contact-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; min-width: 0; } .contact-line span { word-break: break-all; } .contact-qr { margin-top: 10px; } .contact-qr img { display: block; width: 140px; height: auto; max-width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; border: 1px solid var(--card-border); background: #fff; } .copy-btn { padding: 3px 12px; font-size: 12px; border: 1px solid var(--primary); color: var(--primary); background: #fff; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; flex: none; } .copy-btn:hover { background: var(--primary); color: #fff; } .copy-btn.copied { background: var(--primary); color: #fff; } /* ---------- 友情链接（首页底部） ---------- */ .friend-links { display: flex; flex-wrap: wrap; gap: 10px 22px; } .friend-links a { color: var(--text-2); font-size: 14px; text-decoration: none; } .friend-links a:hover { color: var(--primary); } /* ---------- 后台：人工客服编辑行 ---------- */ .contact-row { border: 1px solid var(--card-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--page-bg); display: flex; gap: 12px; align-items: flex-start; } .contact-row .contact-fields { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; } .contact-row .contact-fields label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; } .contact-row .contact-fields input[type="text"] { width: 100%; padding: 7px 10px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; } .qr-thumb { display: block; margin-top: 6px; width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--card-border); border-radius: 6px; background: #fff; } /* ---------- 后台：顶部当前账号 ---------- */ .nav a.active { color: var(--primary); } .admin-user { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); } .admin-user em { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary); } /* ---------- 后台：表单网格 / 权限勾选 ---------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; } .form-row .check-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; } .form-row .check-line input[type="checkbox"] { width: auto; margin: 0; } .form-row .perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 14px; } .form-row .perm-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--page-bg); font-size: 14px; cursor: pointer; margin: 0; } .form-row .perm-item input[type="checkbox"] { width: auto; margin: 3px 0 0; } .form-row .perm-item b { font-weight: 500; display: block; } .form-row .perm-item em { display: block; font-style: normal; font-size: 11px; color: var(--text-2); font-family: Consolas, Monaco, monospace; margin: 0; } .form-row .perm-item:has(input:checked) { border-color: var(--primary); background: var(--primary-light); } .btn:disabled { cursor: not-allowed; opacity: .65; } code { background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 4px; padding: 1px 6px; font-size: 13px; font-family: Consolas, Monaco, monospace; color: var(--text); } /* ---------- 移动端补充（放在末尾以保证覆盖上面的默认值） ---------- */ @media (max-width: 720px) { .contact-item { padding: 12px; } .contact-qr img { width: 120px; } .contact-line { font-size: 13px; } .contact-row { flex-direction: column; } .contact-row .contact-del { align-self: flex-end; } .qr-thumb { width: 56px; height: 56px; } .form-grid { grid-template-columns: 1fr; } .admin-user em { display: none; } } /* ---------- 导航菜单当前页高亮 / 首页按钮组 ---------- */ .nav a.active { color: var(--primary); font-weight: 500; } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .btn-ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary); } .btn-ghost:hover { background: var(--primary-light); color: var(--primary-dark); } /* ---------- 来院导航页 ---------- */ .loc-info { display: grid; gap: 12px; } .loc-line { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; } .loc-label { flex: 0 0 80px; color: var(--text-2); } .loc-value { flex: 1; min-width: 0; word-break: break-all; } .map-wrap { border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; background: var(--page-bg); } .map-canvas { width: 100%; height: 380px; } .map-fallback { padding: 34px 22px; text-align: center; } .map-fallback p { margin-bottom: 8px; } .map-fallback .muted { line-height: 1.8; } .nav-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .nav-btns .btn { flex: 1 1 auto; min-width: 150px; text-align: center; } .nav-btns .copy-btn { padding: 10px 24px; font-size: 15px; border-radius: 8px; white-space: normal; } .nav-btn { background: #fff; border: 1px solid var(--card-border); color: var(--text); } .nav-btn:hover { border-color: var(--primary); color: var(--primary); background: #fff; } .loc-route { display: grid; gap: 9px; font-size: 15px; } .loc-route li { list-style: none; position: relative; padding-left: 18px; } .loc-route li::before { content: ''; position: absolute; left: 3px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } /* ---------- 移动端：顶栏换行 + 导航页适配 ---------- */ @media (max-width: 720px) { .header-inner { height: auto; flex-wrap: wrap; padding: 8px 0; gap: 6px; } .nav { width: 100%; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .nav a { white-space: nowrap; } .hero-actions .btn { flex: 1 1 auto; text-align: center; } .loc-label { flex: 0 0 68px; font-size: 14px; } .loc-line { font-size: 14px; } .map-canvas { height: 260px; } .map-fallback { padding: 26px 16px; } .nav-btns .btn { min-width: 0; flex: 1 1 calc(50% - 5px); padding: 11px 10px; font-size: 14px; } } /* ---------- 医院多科室多医生：门户首页 / 科室页 / 搜索 ---------- */ .portal-search { padding: 16px 20px; } .search-form { display: flex; gap: 10px; } .search-form input[type="search"] { flex: 1; min-width: 0; padding: 12px 14px; font-size: 15px; border: 1px solid var(--card-border, #d8e4f4); border-radius: 10px; outline: none; } .search-form input[type="search"]:focus { border-color: var(--primary); } .banner-wrap { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 20px; background: var(--page-bg); } .banner-track { display: flex; transition: transform .5s ease; } .banner-slide { flex: 0 0 100%; } .banner-slide img { display: block; width: 100%; height: 260px; object-fit: cover; } .banner-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; } .banner-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; } .banner-dot.active { background: #fff; } .dept-grid { display: grid; gap: 12px; margin-bottom: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 第二条声明：支持 min() 的浏览器用「不超过容器宽」的下限，窄屏也不会撑破容器 */ grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); } .dept-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 16px 10px; border: 1px solid var(--card-border, #d8e4f4); border-radius: 12px; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .2s, border-color .2s; } .dept-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(var(--primary-rgb), .10); } .dept-icon { font-size: 30px; line-height: 1; } .dept-name { font-weight: 600; } .dept-count { font-size: 12px; } .doc-grid { display: grid; gap: 12px; margin-bottom: 6px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 同上：min() 下限防止窄容器（尤其手机端）被 nowrap 的擅长简介撑破 */ grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } /* 关键修复：医生卡片是网格项，默认 min-width:auto 会继承「最小内容宽度」（.doc-spec 不换行文字 ≈ 380px+），把 1fr 轨道撑破容器导致手机端横向溢出。显式 min-width:0 后轨道才能收缩到容器宽度。 */ .doc-grid > *, .dept-grid > *, .slot-list > *, .schedule-grid > * { min-width: 0; } .doc-card { display: flex; align-items: center; gap: 14px; padding: 14px; min-width: 0; border: 1px solid var(--card-border, #d8e4f4); border-radius: 12px; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .2s, border-color .2s; } .doc-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(var(--primary-rgb), .10); } .doc-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--page-bg); } .doc-avatar img { width: 100%; height: 100%; object-fit: cover; } .doc-avatar .avatar-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; color: var(--primary); } .doc-info { flex: 1; min-width: 0; } .doc-name { font-weight: 600; } .doc-name small { color: var(--text-2); font-weight: 400; margin-left: 6px; } .doc-dept { font-size: 13px; margin-top: 2px; } .doc-spec { font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-go { flex: none; color: var(--primary); font-size: 13px; } .choose-dept { border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; } .choose-dept-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .choose-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .choose-doc { padding: 8px 14px; border: 1px solid var(--card-border); border-radius: 999px; text-decoration: none; color: inherit; font-size: 14px; background: var(--page-bg); } .choose-doc:hover { border-color: var(--primary); color: var(--primary); } @media (max-width: 720px) { .banner-slide img { height: 150px; } /* 手机端单列；minmax(0,1fr) 显式把轨道下限设为 0，杜绝内容撑破 */ .doc-grid { grid-template-columns: minmax(0, 1fr); } .doc-card { padding: 12px; gap: 12px; } .doc-avatar { width: 56px; height: 56px; } .dept-grid { grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); gap: 10px; } .dept-card { padding: 12px 6px; } .dept-icon { font-size: 24px; } .search-form .btn { flex: none; } /* 收窄留白，给内容更多可用宽度 */ .main { padding: 16px 14px 40px; } .card { padding: 18px 14px; } } /* ---------- 科室图标图片（有上传图片时替代表情/符号） ---------- */ .dept-icon .dept-icon-img { display: block; margin: 0 auto; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; } .card-title .dept-icon-img { display: inline-block; width: 24px; height: 24px; object-fit: contain; vertical-align: -5px; border-radius: 5px; margin-right: 4px; } .choose-dept-head .dept-icon-img { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; border-radius: 4px; margin-right: 4px; } /* ============================================================ 多配色主题（后台「站点设置 → 配色方案」切换，输出在）默认 blue 取 :root 值，无需覆盖块。状态语义色（ok/warn/danger 及其底色）全主题一致。 ============================================================ */ /* ② 医护青绿 —— 体检/康养/护理 */ [data-theme="teal"] { --primary: #0F766E; --primary-dark: #115E59; --primary-light: #CCFBF1; --page-bg: #F2FAF7; --card-border: #D8EDE6; --primary-hover: #0C5D57; --primary-rgb: 15, 118, 110; --primary-soft: #B9F0E6; --on-dark: #9CCFC5; } /* ③ 温暖杏橙 —— 儿科/妇产/中医馆 */ [data-theme="amber"] { --primary: #B45309; --primary-dark: #92400E; --primary-light: #FDECD2; --page-bg: #FDF9F3; --card-border: #F0E4D2; --primary-hover: #964508; --primary-rgb: 180, 83, 9; --primary-soft: #FDE3C0; --on-dark: #D8BFA0; } /* ④ 沉稳靛紫 —— 高端私立/专科诊所 */ [data-theme="violet"] { --primary: #7C3AED; --primary-dark: #5B21B6; --primary-light: #EDE9FE; --page-bg: #F9F7FD; --card-border: #E6E0F2; --primary-hover: #6B2FD0; --primary-rgb: 124, 58, 237; --primary-soft: #DDD3F9; --on-dark: #BCA8E8; } /* ⑤ 经典藏青 —— 三甲公立/学术型 */ [data-theme="navy"] { --primary: #1A4F8B; --primary-dark: #123A67; --primary-light: #DBE7F3; --page-bg: #F2F6FA; --card-border: #DCE5EF; --primary-hover: #154274; --primary-rgb: 26, 79, 139; --primary-soft: #C3D8EC; --on-dark: #92ACCB; } .tbl .dept-icon-img { display: inline-block; width: 28px; height: 28px; object-fit: contain; vertical-align: -8px; border-radius: 6px; margin-right: 6px; background: #fff; border: 1px solid var(--card-border, #d8e4f4); } @media (max-width: 720px) { .dept-icon .dept-icon-img { width: 32px; height: 32px; } } /* ---------- 科室医生总览（按科室分组的医生列表） ---------- */ .dept-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .dept-jump-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--page-bg); font-size: 13px; color: var(--text); text-decoration: none; transition: border-color .2s, color .2s, background .2s; } .dept-jump-item:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .dept-jump-count { font-size: 12px; color: var(--text-2); } .dept-jump-item:hover .dept-jump-count { color: var(--primary); } /* scroll-margin-top：点锚点跳转时不被吸顶导航遮住分组标题 */ .dept-group { scroll-margin-top: 72px; } .dept-group + .dept-group { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--card-border); } .dept-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .dept-group-title { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--primary-dark); } .dept-group-icon { display: inline-flex; align-items: center; font-size: 18px; line-height: 1; } .dept-group-title .dept-icon-img { display: block; width: 24px; height: 24px; object-fit: contain; border-radius: 6px; } .dept-group-count { font-size: 13px; color: var(--text-2); } .dept-group-more { margin-left: auto; font-size: 13px; } @media (max-width: 720px) { /* 科室多时跳转条横向滚动，避免挤成多行占屏 */ .dept-jump { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .dept-jump-item { flex: none; } .dept-group-more { margin-left: 0; } .dept-group + .dept-group { margin-top: 18px; padding-top: 16px; } } /* ---------- 挂号费与微信支付 ---------- */ .doc-fee { margin-top: 2px; font-size: 13px; color: #c46a00; } .doc-fee em { font-style: normal; color: var(--text-2, #6b7280); margin-right: 4px; } .hero-fee { margin: 6px 0 0; font-size: 14px; color: var(--text); } .hero-fee strong { color: #c46a00; font-size: 17px; } .fee-text, .selected-slot strong.fee-text { color: #c46a00; } .pay-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; line-height: 20px; vertical-align: 1px; background: #faeeda; color: #ba7517; } .pay-badge.paid { background: #e1f5ee; color: #0f6e56; } .pay-box { margin: 12px 0 4px; padding: 18px 14px 14px; text-align: center; border: 1px dashed var(--card-border, #d8e4f4); border-radius: 12px; background: var(--page-bg, #f5f8fc); } .pay-box > strong { display: block; margin-bottom: 4px; } .pay-qr { display: inline-block; margin: 10px auto 6px; padding: 10px; background: #fff; border: 1px solid var(--card-border, #d8e4f4); border-radius: 10px; } .pay-qr img, .pay-qr canvas { display: block; max-width: 100%; } .pay-qr + p { margin-top: 2px; } .pay-done { color: var(--ok, #0f6e56); font-weight: 600; } #pay-tip { font-size: 13px; } @media (max-width: 720px) { .pay-box { padding: 14px 8px 10px; } }