首页/ mobileweb/ 小草医院网络咨询管理系统 H5 移动端功能演示/ 代码预览

💻 代码预览 · 小草医院网络咨询管理系统 H5 移动端功能演示

mw_medical · 上传者 驰旭教育
← 返回详情
style.css · 约 8634 字符
1:root{2  --brand:#10b981; --brand-d:#059669; --brand-l:#d1fae5;3  --accent:#0ea5e9; --accent-d:#0369a1;4  --warn:#f59e0b; --danger:#ef4444; --purple:#8b5cf6;5  --bg:#f1f7f4; --surface:#ffffff; --surface2:#f7faf9;6  --text:#0f2e26; --text-mute:#6b8480; --border:#e2efe9;7  --radius:18px; --shadow:0 6px 22px rgba(16,185,129,.10);8  --tab:62px;9}10*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}11html,body{margin:0;padding:0}12body{13  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;14  background:var(--bg); color:var(--text); line-height:1.55;15  max-width:430px; margin:0 auto; padding-bottom:calc(var(--tab) + 14px);16  -webkit-font-smoothing:antialiased;17}18a{color:inherit;text-decoration:none}19img{display:block;max-width:100%}20.app-top{21  position:sticky; top:0; z-index:20; padding:14px 16px 12px;22  background:linear-gradient(135deg,var(--brand),var(--accent));23  color:#fff; border-radius:0 0 22px 22px;24}25.app-top .loc{display:flex;align-items:center;gap:6px;font-size:13px;opacity:.92}26.app-top h1{margin:6px 0 0;font-size:21px;font-weight:800;letter-spacing:.5px}27.app-top .sub{font-size:12.5px;opacity:.85;margin-top:2px}28.top-search{29  margin-top:12px; display:flex; align-items:center; gap:8px;30  background:rgba(255,255,255,.92); border-radius:999px; padding:9px 14px;31  color:var(--text-mute); font-size:13.5px;32}33.top-search .ico{font-size:15px}34.card{background:var(--surface);border-radius:var(--radius);padding:15px;margin:13px 14px;box-shadow:var(--shadow)}35.card.tight{padding:13px}36.sec-title{display:flex;align-items:center;justify-content:space-between;margin:18px 18px 4px}37.sec-title h2{font-size:16px;margin:0;font-weight:800}38.sec-title .more{font-size:12.5px;color:var(--brand-d);font-weight:600}39.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:13px 14px}40.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:13px 14px}41.tile{42  background:var(--surface);border-radius:16px;padding:14px 10px;text-align:center;43  box-shadow:var(--shadow);cursor:pointer;transition:transform .12s;44}45.tile:active{transform:scale(.96)}46.tile .emo{font-size:25px}47.tile .lb{font-size:12.5px;margin-top:6px;font-weight:600;color:var(--text)}48.tile .de{font-size:11px;color:var(--text-mute);margin-top:2px}49.btn{50  display:inline-flex;align-items:center;justify-content:center;gap:6px;51  border:none;border-radius:999px;padding:11px 18px;font-size:14.5px;font-weight:700;52  background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;cursor:pointer;53  box-shadow:0 4px 14px rgba(16,185,129,.35);transition:transform .12s;54}55.btn:active{transform:scale(.97)}56.btn.full{width:100%}57.btn.ghost{background:var(--surface);color:var(--brand-d);border:1.5px solid var(--brand-l);box-shadow:none}58.btn.sm{padding:7px 13px;font-size:13px}59.btn.warn{background:linear-gradient(135deg,#fbbf24,#f59e0b)}60.btn[disabled]{opacity:.5;filter:grayscale(.3)}61.chip{62  display:inline-block;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;63  background:var(--surface2);color:var(--text-mute);margin:0 7px 8px 0;cursor:pointer;border:1px solid var(--border);64}65.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}66.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600}67.pill.g{background:var(--brand-l);color:var(--brand-d)}68.pill.b{background:#e0f2fe;color:var(--accent-d)}69.pill.w{background:#fef3c7;color:#b45309}70.pill.r{background:#fee2e2;color:#b91c1c}71.doc{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}72.doc:last-child{border-bottom:none}73.avatar{74  width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;75  font-size:20px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--brand));76}77.avatar.sm{width:40px;height:40px;font-size:15px}78.avatar.lg{width:64px;height:64px;font-size:24px}79.doc .nm{font-weight:700;font-size:15px}80.doc .mt{font-size:12.5px;color:var(--text-mute);margin-top:2px}81.doc .rt{font-size:12.5px;color:var(--warn);font-weight:700;margin-top:3px}82.row{display:flex;align-items:center;gap:10px}83.row.bt{justify-content:space-between}84.spacer{flex:1}85.list{margin:13px 14px}86.item{87  display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:14px;88  padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s;89}90.item:active{transform:scale(.98)}91.item .ic{font-size:22px;width:30px;text-align:center}92.item .tt{font-weight:700;font-size:14.5px}93.item .ds{font-size:12.5px;color:var(--text-mute);margin-top:2px}94.item .ar{color:var(--text-mute);font-size:18px}95.banner{96  margin:13px 14px;border-radius:var(--radius);padding:16px;color:#fff;97  background:linear-gradient(120deg,#0ea5e9,#10b981);box-shadow:var(--shadow);98}99.banner.b2{background:linear-gradient(120deg,#8b5cf6,#6366f1)}100.banner h3{margin:0 0 6px;font-size:16px}101.banner p{margin:0;font-size:12.5px;opacity:.92}102.banner .go{margin-top:11px;display:inline-block;background:#fff;color:var(--brand-d);padding:6px 15px;border-radius:999px;font-size:13px;font-weight:700}103.notice{104  display:flex;align-items:center;gap:8px;background:#fffbeb;border:1px solid #fde68a;105  color:#92400e;border-radius:12px;padding:10px 13px;font-size:13px;margin:13px 14px;106}107.notice .ic{font-size:16px}108.chat-area{background:var(--surface2);border-radius:14px;padding:14px;margin-top:6px}109.msg{display:flex;gap:9px;margin-bottom:13px}110.msg.me{flex-direction:row-reverse}111.msg .bubble{112  max-width:74%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;113  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);114}115.msg.me .bubble{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff}116.msg .who{font-size:11px;color:var(--text-mute);margin:0 0 3px}117.rx{118  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:11px;119  box-shadow:var(--shadow);120}121.rx .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}122.rx .drug{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13.5px}123.rx .drug:last-child{border-bottom:none}124.rx .dn{font-weight:700}125.rx .du{color:var(--text-mute);font-size:12.5px}126.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:13px 14px}127.stat3 .b{background:var(--surface);border-radius:14px;padding:13px;text-align:center;box-shadow:var(--shadow)}128.stat3 .n{font-size:20px;font-weight:800;color:var(--brand-d)}129.stat3 .l{font-size:11.5px;color:var(--text-mute);margin-top:2px}130.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}131.kv:last-child{border-bottom:none}132.kv .k{color:var(--text-mute)}133.remind{134  display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--border);135  border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow);136}137.remind .tm{font-size:18px;font-weight:800;color:var(--brand-d);min-width:46px}138.remind .nm{font-weight:700;font-size:14px}139.remind .ds{font-size:12px;color:var(--text-mute)}140.switch{width:44px;height:25px;border-radius:999px;background:var(--brand);position:relative;flex:none}141.switch.off{background:#d1d5db}142.switch::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .15s}143.switch.off::after{left:22px}144.toast{145  position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);146  background:rgba(15,46,38,.92);color:#fff;padding:13px 22px;border-radius:12px;font-size:14px;147  z-index:99;opacity:0;pointer-events:none;transition:opacity .2s;max-width:80%;text-align:center;148}149.toast.show{opacity:1}150.tabbar{151  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;152  height:var(--tab);background:rgba(255,255,255,.97);backdrop-filter:blur(8px);153  display:flex;border-top:1px solid var(--border);z-index:30;154}155.tabbar a{156  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;157  font-size:11px;color:var(--text-mute);font-weight:600;158}159.tabbar a .ti{font-size:21px;line-height:1}160.tabbar a.on{color:var(--brand-d)}161.tabbar a.on .ti{transform:scale(1.12)}162.empty{text-align:center;color:var(--text-mute);padding:36px 0;font-size:13.5px}163.section-gap{padding-bottom:8px}164.sticky-bar{165  position:sticky;bottom:calc(var(--tab) + 8px);z-index:18;display:flex;gap:10px;margin:14px;166}167