包裹浮层 DOM */ :root { --r-ink:#202124; --r-blue:#3478f6; --r-blue-dark:#2559c9; --r-yellow:#ffc928; --r-orange:#ff7a45; --r-red:#ff5547; --r-green:#35b978; --r-muted:#6f747a; --r-line:#eee9e1; --r-white:#fff; } /* 弹层自带盒模型重置：不依赖宿主页面的全局 reset（各页 reset 范围不同） */ .ruisi-ui, .ruisi-ui *, .ruisi-ui *::before, .ruisi-ui *::after { box-sizing: border-box; } .ruisi-ui a { color: var(--r-blue); text-decoration: none; } .ruisi-ui a:hover { text-decoration: underline; } .ruisi-ui button { font-family: inherit; cursor: pointer; } /* ---------------- 按钮 ---------------- */ .ruisi-ui .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; border:none;border-radius:14px;padding:12px 20px;font-size:15px;font-weight:600; cursor:pointer;font-family:inherit;transition:transform .12s,opacity .2s,box-shadow .2s; } .ruisi-ui .btn:active{transform:scale(.98)} .ruisi-ui .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none} .ruisi-ui .btn-primary{background:var(--r-blue);color:#fff;box-shadow:0 8px 20px rgba(52,120,246,.28)} .ruisi-ui .btn-primary:hover{background:var(--r-blue-dark)} .ruisi-ui .btn-ghost{background:#fff;color:var(--r-blue);border:1.5px solid var(--r-blue)} .ruisi-ui .btn-plain{background:transparent;color:var(--r-muted);border:none;font-size:13px;padding:6px 8px} .ruisi-ui .btn-block{width:100%} .ruisi-ui .btn-sm{padding:8px 14px;font-size:13.5px;border-radius:11px} /* ---------------- 浮层 ---------------- */ .ruisi-ui .overlay{ position:fixed;inset:0;z-index:60;background:rgba(24,28,36,.5); display:none;align-items:center;justify-content:center;padding:16px;overflow-y:auto; } .ruisi-ui .overlay.show{display:flex} .ruisi-ui .sheet{ width:min(100%,460px);background:#fff;border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.28);padding:26px 24px;margin:auto; animation:ruisi-pop .18s ease-out;max-height:calc(100vh - 32px); color:var(--r-ink);font-size:14px;line-height:1.7;text-align:left; /* 默认：整张卡片滚动。滚动条改为细样式——系统默认滚动条又宽又深，压在白色圆角卡片边缘非常突兀（历史上就是这个问题）。 */ overflow-y:auto;overscroll-behavior:contain; } /* 细滚动条：Firefox 认 scrollbar-width，Chromium/Safari 认 ::-webkit-scrollbar。浮层本体、浮层内容区、浮层内的长列表共用同一套样式—— 系统默认滚动条又宽又深，压在白色圆角卡片边缘上非常突兀。 */ .ruisi-ui .sheet, .ruisi-ui .sheet-body, .ruisi-ui .pick-list{scrollbar-width:thin;scrollbar-color:#d7dbe2 transparent} .ruisi-ui .sheet::-webkit-scrollbar, .ruisi-ui .sheet-body::-webkit-scrollbar, .ruisi-ui .pick-list::-webkit-scrollbar{width:6px} .ruisi-ui .sheet::-webkit-scrollbar-track, .ruisi-ui .sheet-body::-webkit-scrollbar-track, .ruisi-ui .pick-list::-webkit-scrollbar-track{background:transparent} .ruisi-ui .sheet::-webkit-scrollbar-thumb, .ruisi-ui .sheet-body::-webkit-scrollbar-thumb, .ruisi-ui .pick-list::-webkit-scrollbar-thumb{background:#d7dbe2;border-radius:99px} .ruisi-ui .sheet::-webkit-scrollbar-thumb:hover, .ruisi-ui .sheet-body::-webkit-scrollbar-thumb:hover, .ruisi-ui .pick-list::-webkit-scrollbar-thumb:hover{background:#c2c8d2} /* fit 模式：头部与底栏固定，只有内容区滚动。用于「开通课程」这类内容较高的浮层——目标是常见屏幕下完全不出现滚动条；万一内容偏高，也只滚动中间这一段，底部"确认开通"不会被顶出视野。 */ .ruisi-ui .sheet.fit{display:flex;flex-direction:column;overflow:hidden} .ruisi-ui .sheet.fit>.sheet-head{flex:0 0 auto} .ruisi-ui .sheet-body{ flex:1 1 auto;min-height:0;overflow-y:auto; margin:0 -6px;padding:0 6px; /* 给滚动条留出边距，避免压住卡片内容 */ overscroll-behavior:contain; } .ruisi-ui .sheet-foot{flex:0 0 auto;padding-top:10px} @keyframes ruisi-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}} .ruisi-ui .sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px} .ruisi-ui .sheet-head h3{font-size:18px} .ruisi-ui .sheet-head p{font-size:13px;color:var(--r-muted);margin-top:2px} .ruisi-ui .sheet-close{ background:#f2f3f5;border:none;width:30px;height:30px;border-radius:50%;cursor:pointer; color:#7a8089;font-size:16px;line-height:1;flex:0 0 auto;font-family:inherit; } .ruisi-ui .field{display:block;margin-bottom:14px} .ruisi-ui .field>span{display:block;font-size:13px;color:#5c636e;margin-bottom:6px;font-weight:500} .ruisi-ui .field input{ width:100%;border:1.5px solid var(--r-line);background:#fbfbfc;border-radius:12px; padding:12px 14px;font-size:15px;font-family:inherit;color:var(--r-ink);outline:none; transition:border-color .15s,background .15s; } .ruisi-ui .field input:focus{border-color:var(--r-blue);background:#fff} .ruisi-ui .row-2{display:flex;gap:10px} .ruisi-ui .row-2 input{flex:1;min-width:0} .ruisi-ui .captcha-box{ width:130px;flex:0 0 auto;height:48px;border-radius:12px;overflow:hidden;cursor:pointer; background:#FFF8E1;display:flex;align-items:center;justify-content:center; font-size:11.5px;color:#a08a4a;border:1.5px solid var(--r-line); } .ruisi-ui .captcha-box img{width:100%;height:100%;object-fit:cover} .ruisi-ui .btn-inline{ border:1.5px solid var(--r-blue);background:#fff;color:var(--r-blue);border-radius:12px; padding:0 14px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap; font-family:inherit;flex:0 0 auto; } .ruisi-ui .btn-inline[disabled]{opacity:.5;cursor:not-allowed} .ruisi-ui .err{color:var(--r-red);font-size:13px;min-height:20px;margin:2px 0 8px} .ruisi-ui .hint{font-size:12.5px;color:#9aa0aa;line-height:1.7} /* 服务条款 / 隐私政策勾选（合规必需：未勾选不得发送验证码或登录） */ .ruisi-ui .agree{ display:flex;align-items:flex-start;gap:7px;margin:2px 0 12px; font-size:12.5px;line-height:1.7;color:var(--r-muted);cursor:pointer;font-weight:400; } .ruisi-ui .agree input{width:15px;height:15px;margin:3px 0 0;flex:none;accent-color:var(--r-blue);cursor:pointer} .ruisi-ui .agree span{display:block} /* ---------------- 支付 ---------------- */ .ruisi-ui .pay-amount{text-align:center;padding:18px 0 6px} .ruisi-ui .pay-amount .amt{font-size:34px;font-weight:800;color:var(--r-red)} .ruisi-ui .pay-amount .amt small{font-size:16px} .ruisi-ui .pay-amount .oi{font-size:12.5px;color:#9aa0aa;margin-top:4px;word-break:break-all} .ruisi-ui .channels{display:grid;gap:10px;margin-top:16px} .ruisi-ui .channel{ display:flex;align-items:center;gap:12px;border:1.5px solid var(--r-line); border-radius:14px;padding:13px 15px;background:#fff;cursor:pointer; font-family:inherit;text-align:left;width:100%;transition:border-color .15s,background .15s; } .ruisi-ui .channel:hover{border-color:var(--r-blue);background:#f7faff} .ruisi-ui .channel .ci{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex:0 0 auto} .ruisi-ui .channel .ci.wx{background:#07c160} .ruisi-ui .channel .ci.ali{background:#1677ff} .ruisi-ui .channel .ct{flex:1;min-width:0} .ruisi-ui .channel .ct b{display:block;font-size:14.5px;font-weight:600} .ruisi-ui .channel .ct small{display:block;font-size:12px;color:var(--r-muted)} .ruisi-ui .qr-wrap{text-align:center;padding:14px 0 6px} .ruisi-ui .qr-box{ width:190px;height:190px;margin:0 auto;background:#fff;border:1px solid var(--r-line); border-radius:14px;padding:10px;display:flex;align-items:center;justify-content:center; } .ruisi-ui .qr-box img,.ruisi-ui .qr-box canvas{width:100%!important;height:100%!important} .ruisi-ui .qr-tip{font-size:13.5px;color:var(--r-muted);margin-top:12px} .ruisi-ui .notice{ background:#fff7e6;border:1px solid #f5dfae;color:#8a5a00; border-radius:12px;padding:11px 13px;font-size:12.8px;line-height:1.65;margin-top:14px; } .ruisi-ui .notice.plain{background:#f5f7fa;border-color:#e3e7ed;color:#5c636e} /* ---------------- 成功 / 权益 ---------------- */ .ruisi-ui .ok-hero{text-align:center;padding:6px 0 4px} .ruisi-ui .ok-icon{ width:62px;height:62px;border-radius:50%;background:#e6f7ee;color:var(--r-green); display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;margin:0 auto 12px; } .ruisi-ui .ok-hero h3{font-size:19px} .ruisi-ui .ok-hero p{font-size:13.5px;color:var(--r-muted);margin-top:5px} .ruisi-ui .kv{background:#fafbfc;border:1px solid var(--r-line);border-radius:14px;padding:13px 15px;margin:16px 0} .ruisi-ui .kv .row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0} .ruisi-ui .kv .row span{color:var(--r-muted);flex:0 0 auto} .ruisi-ui .kv .row b{font-weight:600;text-align:right;word-break:break-all} .ruisi-ui .pick-group{margin-bottom:16px} .ruisi-ui .pick-group>span{display:block;font-size:13px;color:#5c636e;font-weight:500;margin-bottom:8px} .ruisi-ui .pick-list{display:grid;gap:8px;max-height:230px;overflow-y:auto;padding-right:2px} .ruisi-ui .pick{ display:flex;align-items:center;gap:10px;border:1.5px solid var(--r-line);border-radius:12px; padding:11px 13px;cursor:pointer;background:#fff;font-family:inherit;text-align:left;width:100%; } .ruisi-ui .pick:hover{border-color:#c9d8f5} .ruisi-ui .pick.sel{border-color:var(--r-blue);background:#f4f8ff} .ruisi-ui .pick .pi{ width:34px;height:34px;border-radius:10px;background:#eef3ff;color:var(--r-blue); display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:0 0 auto; } .ruisi-ui .pick .pt{flex:1;min-width:0} .ruisi-ui .pick .pt b{display:block;font-size:14px;font-weight:600} .ruisi-ui .pick .pt small{display:block;font-size:12px;color:var(--r-muted)} .ruisi-ui .pick .pcheck{color:var(--r-blue);font-weight:700;font-size:15px;opacity:0} .ruisi-ui .pick.sel .pcheck{opacity:1} /* 课程/孩子选择的网格卡片（2 列）原来是一列大行、每行约 60px，6 门课就要 360px 高，逼得整张弹框只能滚动；换成紧凑网格后，全部选项能在不滚动的情况下放下。 */ .ruisi-ui .pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .ruisi-ui .pick-tile{ position:relative;display:block;width:100%;text-align:left;cursor:pointer; border:1.5px solid var(--r-line);border-radius:12px;background:#fff; padding:9px 11px;font-family:inherit;transition:border-color .15s,background .15s; } .ruisi-ui .pick-tile:hover{border-color:#c9d8f5} .ruisi-ui .pick-tile.sel{border-color:var(--r-blue);background:#f4f8ff} .ruisi-ui .pick-tile b{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:13.5px;font-weight:600;line-height:1.35; } .ruisi-ui .pick-tile small{ display:block;margin-top:2px;font-size:11.5px;color:var(--r-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ruisi-ui .pick-tile .pcheck{ position:absolute;right:7px;top:6px;font-size:13px;font-weight:700; color:var(--r-blue);opacity:0;transition:opacity .15s; } .ruisi-ui .pick-tile.sel .pcheck{opacity:1} @media (max-width:400px){ /* 超窄屏（小屏手机）单列，避免课程名被压成两行还看不清 */ .ruisi-ui .pick-grid{grid-template-columns:1fr} } .ruisi-ui .add-child{border:1.5px dashed #cfd6e0;border-radius:12px;padding:12px;margin-top:8px;background:#fbfcfd} /* 昵称与生日并排：新建孩子是弹框里最高的一块，并排后省下一整行高度 */ .ruisi-ui .add-child-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px} .ruisi-ui .add-child .field{margin-bottom:10px} @media (max-width:400px){ .ruisi-ui .add-child-grid{grid-template-columns:1fr} } .ruisi-ui .empty-mini{text-align:center;color:var(--r-muted);font-size:13px;padding:18px 0} .ruisi-ui .spinner{ width:34px;height:34px;border:3px solid #e8ecf2;border-top-color:var(--r-blue); border-radius:50%;animation:ruisi-spin .8s linear infinite;margin:26px auto; } @keyframes ruisi-spin{to{transform:rotate(360deg)}} /* ---------------- 轻提示 ---------------- */ .ruisi-ui .toast{ position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:90; background:rgba(32,33,36,.92);color:#fff;padding:11px 20px;border-radius:22px; font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s;max-width:88vw;text-align:center; } .ruisi-ui .toast.show{opacity:1} @media (max-width:640px){ .ruisi-ui .sheet{padding:22px 18px;border-radius:20px} } /* ---------------- 移动端底部导航（H5） ---------------- * 由 window.RP.injectMobileTabbar() 注入，index.html / member.html 调用。 * 这批类名不参与 .ruisi-ui 作用域（它挂在 body 上、与浮层并列）， * 但 .ruisi-tabbar* 是本站独有的命名，不会与任何页面自有样式冲突。 * 原定义在 assets/login.css（配合已下线的 assets/ruisi-auth.js，走 /app 体系）。 */ .ruisi-tabbar-page { padding-bottom: 92px; } .ruisi-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); border-top: 1px solid #edf0f2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; box-shadow: 0 -6px 24px rgba(3, 12, 20, .06); } .ruisi-tabbar a, .ruisi-tabbar button { display: grid; place-items: center; height: 44px; padding: 0; border: 0; background: transparent; color: #5d6b74; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; } .ruisi-tabbar a.on { color: #101c26; } /* 中间「开通会员」凸起 CTA：与公共层主按钮同色系 */ .ruisi-tabbar a.cta { height: 52px; margin: -18px 6px 0; border-radius: 99px; background: #101c26; color: #d8ff63; font-size: 13px; font-weight: 800; box-shadow: 0 10px 22px rgba(16, 28, 38, .28); } .ruisi-tabbar a.cta.on { background: #ff7a45; color: #fff; box-shadow: 0 10px 22px rgba(255, 122, 69, .4); }