/* ================================================================ * 庄遇官网 · 演示页共享框架 * 用途：5 个端演示页共用。提供：页面外框(返回条) + 手机壳 + 状态栏 + * 顶部 NavBar + 底部 tabBar + 通用卡片/标签/按钮/Toast + 各端主题色 * 说明：纯静态演示，所有数据均为模拟数据，无后端依赖。 * 主题色依据：demo 页切换 * ================================================================ */ *{margin:0;padding:0;box-sizing:border-box} body{ font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; -webkit-font-smoothing:antialiased; background:var(--page-bg); min-height:100vh; display:flex; flex-direction:column; align-items:center; } /* ---------- 每端主题变量 ---------- */ body[data-end="customer"]{ --E-accent:#B0894E; --E-accent2:#C9A45C; --E-ink:#1A1A1A; --E-ink2:#4A4238; --E-paper:#F8F5EE; --E-paper2:#FBF9F4; --E-rule:#D9CDB8; --page-bg:#EFE7D6; } body[data-end="host"] { --E-accent:#C9A45C; --E-accent2:#E4C98F; --E-ink:#1A1A1A; --E-ink2:#4A4238; --E-paper:#F7F3EA; --E-paper2:#FCFAF5; --E-rule:#D9CDB8; --page-bg:#EAE2D2; } body[data-end="merchant"] { --E-accent:#B0894E; --E-accent2:#C9A45C; --E-ink:#1A1A1A; --E-ink2:#4A4238; --E-paper:#F4EFE4; --E-paper2:#FBFAF4; --E-rule:#D9CDB8; --page-bg:#E9E2D2; } body[data-end="partner"] { --E-accent:#7B2CBF; --E-accent2:#9C4DCC; --E-ink:#26142e; --E-ink2:#5b4370; --E-paper:#F6F2FA; --E-paper2:#FCFAFF; --E-rule:#DBCFE8; --page-bg:#E6DDF0; } body[data-end="city"] { --E-accent:#3F5B4B; --E-accent2:#6e8f7c; --E-ink:#16221c; --E-ink2:#42564b; --E-paper:#F3F5EF; --E-paper2:#FAFBF7; --E-rule:#C9D4C9; --page-bg:#E2E7DC; } /* ---------- 顶部返回条 ---------- */ .top-bar{ width:100%; max-width:420px; display:flex;align-items:center;justify-content:space-between; padding:14px 8px 6px; color:var(--E-ink2); font-size:13px; letter-spacing:1px; } .top-bar a{color:var(--E-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;transition:.3s} .top-bar a:hover{color:var(--E-accent)} .top-bar .end-tag{font-size:11px;padding:3px 10px;border:1px solid var(--E-rule);border-radius:20px;color:var(--E-ink2)} /* ---------- 手机壳 ---------- */ .phone{ width:320px; height:660px; background:#2b2823; border-radius:44px; padding:12px; box-shadow:0 40px 90px -30px rgba(30,26,20,.45), 0 0 0 1px rgba(0,0,0,.06); position:relative; margin-bottom:40px; } .phone .frame{ width:100%;height:100%; background:var(--E-paper); border-radius:33px; overflow:hidden; position:relative; display:flex;flex-direction:column; } /* 灵动岛 + 状态栏 */ .phone .island{ position:absolute;top:9px;left:50%;transform:translateX(-50%); width:92px;height:22px;background:#2b2823;border-radius:12px;z-index:20; } .phone .statusbar{ position:absolute;top:0;left:0;right:0;height:34px;z-index:19; display:flex;align-items:center;justify-content:space-between; padding:0 18px;font-size:11px;font-weight:600;color:var(--E-ink); } .phone .statusbar .sb-r{display:flex;align-items:center;gap:4px} .phone .statusbar i{display:inline-block;width:16px;height:10px;border:1px solid var(--E-ink);border-radius:2.5px;position:relative} .phone .statusbar i::before{content:"";position:absolute;top:1.5px;left:1.5px;bottom:1.5px;right:1.5px;background:var(--E-ink);border-radius:1px} .phone .statusbar svg{width:13px;height:13px;fill:var(--E-ink)} /* 内容滚动区 */ .phone .screen{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none} .phone .screen::-webkit-scrollbar{display:none} .phone .screen .page{padding-bottom:74px} /* home 指示条 */ .phone .homebar{ position:absolute;bottom:7px;left:50%;transform:translateX(-50%); width:110px;height:4px;border-radius:3px;background:#2b2823;opacity:.4;z-index:20; } /* ---------- 端内顶部导航 NavBar ---------- */ .navbar{ position:sticky;top:0;z-index:15; display:flex;align-items:center;justify-content:center; height:46px;padding:0 12px; background:var(--E-paper); border-bottom:1px solid var(--E-rule); } .navbar .nb-title{font-size:16px;font-weight:700;letter-spacing:2px;color:var(--E-ink)} .navbar .nb-left,.navbar .nb-right{position:absolute;top:0;bottom:0;display:flex;align-items:center} .navbar .nb-left{left:10px} .navbar .nb-right{right:10px;gap:8px} .navbar button{background:none;border:none;font-size:13px;color:var(--E-accent);cursor:pointer;padding:4px} .navbar .nav-ico{ width:27px;height:27px;border-radius:8px;background:rgba(176,137,78,.14); display:flex;align-items:center;justify-content:center;color:var(--E-accent);font-size:14px; } .navbar .nb-ghost{font-size:12px;padding:4px 10px;border:1px solid var(--E-rule);border-radius:14px;color:var(--E-ink2)} /* ---------- 卡片 / 外观通用 ---------- */ .card{background:var(--E-paper2);border-radius:16px;padding:14px;box-shadow:0 6px 18px -8px rgba(40,32,20,.16)} .chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:2px 8px;border-radius:20px;letter-spacing:.5px} .chip.warn{background:rgba(179,94,0,.12);color:#B35E00} .chip.ok{background:rgba(63,111,78,.12);color:#3F6F4E} .chip.busy{background:rgba(155,44,44,.1);color:#9B2C2C} .chip.gold{background:rgba(176,137,78,.14);color:#96703F} .chip.tag{background:var(--E-paper2);color:var(--E-ink2);border:1px solid var(--E-rule)} /* 圆形图标 */ .ico{ width:38px;height:38px;border-radius:12px;flex:none; display:flex;align-items:center;justify-content:center; font-size:17px;color:#fff; } .ico.sm{width:30px;height:30px;border-radius:9px;font-size:13px} /* 文字不换行截断 */ .ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* 主按钮 */ .btn-main{ display:flex;align-items:center;justify-content:center;gap:6px; width:100%;padding:12px;border:none;border-radius:14px;cursor:pointer; background:linear-gradient(135deg,var(--E-accent2),var(--E-accent)); color:#fff;font-size:15px;letter-spacing:2px;font-weight:600; transition:.3s;box-shadow:0 8px 20px -8px var(--E-accent); } .btn-main:active{transform:scale(.97)} /* 悬浮操作按钮 */ .fab{ position:absolute;right:14px;bottom:66px;z-index:12; width:48px;height:48px;border-radius:50%;border:none;cursor:pointer; background:linear-gradient(135deg,var(--E-accent2),var(--E-accent)); color:#fff;font-size:22px;box-shadow:0 10px 24px -8px var(--E-accent); } /* 底部 tabBar */ .tabbar{ position:absolute;left:0;right:0;bottom:0;z-index:15; display:flex;background:var(--E-paper2); border-top:1px solid var(--E-rule); padding:8px 0 calc(8px + env(safe-area-inset-bottom)); } .tabbar .t{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--E-ink3,#7A6F5F);cursor:pointer;padding:2px 0;transition:.2s} .tabbar .t .ti{width:21px;height:21px;display:flex;align-items:center;justify-content:center} .tabbar .t.active{color:var(--E-accent);font-weight:600} .tabbar .t.active .ti{transform:translateY(-1px)} .tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6} /* ---------- Toast ---------- */ .toast{ position:absolute;left:50%;top:44%;transform:translate(-50%,-50%); background:rgba(34,32,29,.86);color:#fff;font-size:13px;letter-spacing:1px; padding:12px 22px;border-radius:12px;z-index:40;opacity:0;pointer-events:none;transition:.3s; white-space:nowrap; } .toast.show{opacity:1} /* 半屏弹层 */ .sheet{ position:absolute;left:0;right:0;bottom:0;z-index:30; background:var(--E-paper2);border-radius:20px 20px 0 0; padding:18px 16px 20px;transform:translateY(105%);transition:.35s; box-shadow:0 -16px 40px -18px rgba(30,26,20,.4); } .sheet.open{transform:translateY(0)} .sheet .sh-title{font-weight:700;font-size:15px;letter-spacing:1px;text-align:center;margin-bottom:14px;color:var(--E-ink)} .sheet::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:34px;height:3.5px;border-radius:2px;background:var(--E-rule)} .mask{position:absolute;inset:0;z-index:29;background:rgba(30,26,20,.4);opacity:0;pointer-events:none;transition:.3s} .mask.show{opacity:1;pointer-events:auto} /* ---------- 分割线 ---------- */ .hr{border:none;border-top:1px solid var(--E-rule);margin:12px 0}