/* ============================================================ * 登录页改版 v2（2026-10-20） * 全部规则限定在 #login-view 作用域内，不影响后台既有样式。 * 依赖 app.css 的 CSS 变量与 .btn/.form-group 基础样式。 * ============================================================ */ /* ============================================================ * K9539（2026-10-30）：产品橱窗整体下架 —— qizhi808.cn 只讲平台，不列硬件型号。 * 本文件个别历史注释仍提到 showcase / 产品卡 / 「展开全部产品」， * 那是 K9363–K9535 期间的设计沿革记录，对应规则与 DOM 均已删除、不再生效。 * ============================================================ */ #login-view{background:#fff;align-items:stretch;justify-content:flex-start;} #login-view.active{display:flex;} #login-view,#login-view *,#login-view *::before,#login-view *::after{box-sizing:border-box;} #login-view .brand-mark{width:42px;height:42px;flex:0 0 42px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.12);padding:3px;} #login-view .intro{position:relative;flex:1 1 auto;min-width:0;overflow-y:auto;overflow-x:hidden; background:linear-gradient(160deg,#071528 0%,#0d2647 52%,#163a68 100%); scrollbar-width:thin;} #login-view .intro::-webkit-scrollbar{width:6px;} #login-view .intro::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px;} #login-view .intro::before{content:"";position:absolute;top:-260px;right:-200px;width:820px;height:820px;pointer-events:none; background:radial-gradient(circle,rgba(59,130,246,.2),rgba(59,130,246,0) 62%);} #login-view .intro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055; background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(110% 70% at 15% 0%,#000 25%,transparent 72%); -webkit-mask-image:radial-gradient(110% 70% at 15% 0%,#000 25%,transparent 72%);} #login-view .intro-inner{position:relative;z-index:1;padding:clamp(24px,4vh,42px) clamp(24px,3.6vw,56px) 0;} #login-view .brand{display:flex;align-items:center;gap:11px;} #login-view .brand-mark{width:42px;height:42px;border-radius:12px;flex:0 0 42px; background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center; box-shadow:0 8px 22px rgba(29,78,216,.5),inset 0 1px 0 rgba(255,255,255,.35);} #login-view .brand-mark svg{width:23px;height:23px;stroke:#fff;} #login-view .brand-text .name{color:#fff;font-size:15.5px;font-weight:600;letter-spacing:.4px;} #login-view .brand-text .org{color:rgba(255,255,255,.58);font-size:11.5px;margin-top:2px;letter-spacing:.3px;} #login-view .featline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;} #login-view .featline .lb{position:static;inset:auto;z-index:auto;display:inline;padding:0;font-size:11.5px;color:rgba(255,255,255,.42);letter-spacing:.4px;margin-right:2px;} #login-view .featline .it{font-size:11.5px;color:rgba(255,255,255,.66);position:relative;padding-left:11px;} #login-view .featline .it::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:4px;height:4px;border-radius:50%;background:rgba(147,197,253,.7);} /* K9347：固定 4 列（首屏 8 款永远 4+4），不再随视口漂成 5/7 列导致断行； 超宽屏用 max-width 封顶，避免单卡被拉到 300px+ 显得空旷 */ /* K9347：lightbox 已下线（卡片改为跳转独立详情页），原 .lb* 样式随之移除 */ #login-view .panel-icp{position:absolute;left:28px;right:28px;bottom:18px;text-align:center; font-size:11.5px;color:var(--gray-400);line-height:1.7;padding-top:14px;border-top:1px solid var(--gray-100); display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6px;} #login-view .panel-icp a{color:var(--gray-400);text-decoration:none;} #login-view .panel-icp a:hover{color:var(--primary);text-decoration:underline;} #login-view .panel-icp .dot{opacity:.5;} #login-view .panel{flex:0 0 clamp(420px,34vw,520px);background:#fdfefe;display:flex;flex-direction:column; align-items:center;justify-content:center;padding:34px 26px;position:relative; box-shadow:-22px 0 56px rgba(8,26,51,.16);} #login-view .login-card{width:100%;max-width:376px;} #login-view .card-head{margin-bottom:18px;} #login-view .card-head h1,#login-view .card-head h2{font-size:23px;color:var(--gray-900);font-weight:650;letter-spacing:.3px;} #login-view .card-head .subtitle{color:var(--gray-500);font-size:13px;margin-top:6px;line-height:1.6;} #login-view .login-tabs{display:flex;gap:26px;margin-bottom:20px;border-bottom:1px solid var(--gray-200);} #login-view .login-tab{flex:0 0 auto;padding:0 2px 11px;border:0;border-bottom:2px solid transparent;background:transparent; color:var(--gray-500);font-size:13.5px;cursor:pointer;transition:color .15s,border-color .15s;margin-bottom:-1px;} #login-view .login-tab:hover{color:var(--gray-800);} #login-view .login-tab.on{background:transparent;border-bottom-color:var(--primary);color:var(--primary);font-weight:600;} #login-view .form-group{margin-bottom:16px;} #login-view .form-group label{display:block;font-size:12.5px;color:var(--gray-700);margin-bottom:7px;font-weight:500;letter-spacing:.2px;} /* K9538：边框 1px #cbd5e1 对白底仅 1.48:1（WCAG 2.1 非文本 UI 需 ≥3:1），改为 #8493a5 = 3.13:1； focus 态的主色边框 + 3px 光环不动，视觉只用一档深灰换「能不能一眼看到输入区」 */ #login-view .form-group input{width:100%;height:44px;padding:0 13px;border:1px solid #8493a5;border-radius:9px;outline:none; font-size:13.5px;transition:border .15s,box-shadow .15s;background:#fff;color:var(--gray-900);} #login-view .form-group input::placeholder{color:var(--gray-400);} #login-view .form-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12);} #login-view .pw-row{position:relative;} #login-view .pw-row input{padding-right:42px;} #login-view .pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0; background:transparent;border-radius:7px;display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--gray-400);} #login-view .pw-eye:hover{color:var(--primary);background:var(--primary-light);} #login-view .pw-eye svg{width:16px;height:16px;stroke:currentColor;} #login-view .btn-login{width:100%;padding:11px;margin-top:4px;border:0;border-radius:8px;background:var(--primary); color:#fff;font-size:14px;font-weight:600;letter-spacing:2px;cursor:pointer; transition:background .15s,transform .05s;box-shadow:0 8px 18px rgba(37,99,235,.24);} #login-view .btn-login:hover{background:var(--primary-dark);} #login-view .btn-login:active{transform:translateY(1px);} #login-view #login-btn,#login-view #sms-login-btn{width:100%;height:46px;margin-top:6px;border:0;border-radius:9px; background:var(--primary);color:#fff;font-size:15px;font-weight:600;letter-spacing:.6px;cursor:pointer; box-shadow:0 8px 20px rgba(37,99,235,.26);transition:background .15s,box-shadow .15s,transform .05s;} #login-view #login-btn:hover,#login-view #sms-login-btn:hover{background:var(--primary-dark);box-shadow:0 10px 24px rgba(37,99,235,.32);} #login-view #login-btn:active,#login-view #sms-login-btn:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(37,99,235,.24);} /* K9538：原 --gray-400(#94a3b8) 对白底 2.56:1，12px 小字低于 AA 的 4.5:1； 「账号由平台管理员开通，遗忘密码请联系管理员重置」正是登录失败时最该看清的一句 */ #login-view .login-tip{margin-top:16px;font-size:12px;color:var(--gray-500);text-align:center;line-height:1.75;} /* K9582（2026-11-01）：登录口同意行。此前登录页 0 处 /privacy/ 链接（P0）。 样式走类不放内联，因短横屏（≤500 高）必须按断点收紧。 */ #login-view .login-agree{margin-top:12px;font-size:12px;color:var(--gray-500);text-align:center;line-height:1.7;} #login-view .login-agree a{color:var(--gray-500);text-decoration:underline;text-underline-offset:2px;} #login-view .login-agree a:hover{color:var(--primary);} #login-view .login-tip code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;background:var(--gray-100);padding:1px 5px;border-radius:4px;color:var(--gray-500);} #login-view .m-foot-band{display:none;} /* K9539：原 .m-showcase，现只承接手机端页脚 */ @media (max-width:1020px){#login-view.active{position:static;display:block;overflow-x:hidden;background:#fff;}#login-view.active{position:static;display:block;overflow-x:hidden;background:#fff;}#login-view .intro{overflow:hidden;border-radius:0 0 20px 20px;} #login-view .intro-inner{padding:24px 18px 0;} #login-view .featline{display:none;} #login-view .panel-icp{display:none;} #login-view .panel{flex:none;width:100%;max-width:none;min-width:0;padding:24px 18px 8px; box-shadow:none;justify-content:flex-start;} #login-view .login-card{max-width:420px;margin:0 auto;} #login-view .card-head{margin-bottom:16px;} #login-view .card-head h1,#login-view .card-head h2{font-size:19px;} #login-view .m-foot-band{display:block;background:#fff;padding:4px 0 6px;} #login-view .m-more{margin:2px auto 14px;background:#fff;border:1px solid var(--gray-200);color:var(--gray-600); font-size:12px;} #login-view .m-more:hover{background:var(--gray-50);border-color:var(--gray-300);color:var(--gray-800);} #login-view .m-foot{padding:6px 18px calc(18px + env(safe-area-inset-bottom,0px)); text-align:center;font-size:12px;color:var(--gray-400); border-top:1px solid var(--gray-100);margin-top:2px;} } /* ===== 与既有登录逻辑对齐（login-sms.js 使用 active 类） ===== */ #login-view .login-tab.active{background:transparent;border-color:transparent;border-bottom-color:var(--primary);color:var(--primary);font-weight:600;} /* 登录卡改为纯面板（app.css 的卡片阴影/padding 在此处不需要） */ #login-view .login-card{width:100%;max-width:376px;background:transparent;box-shadow:none;padding:0;} /* ===== 与既有登录逻辑对齐（login-sms.js 使用 active 类） ===== */ #login-view .login-tab.active{background:transparent;border-color:transparent;border-bottom-color:var(--primary);color:var(--primary);font-weight:600;} /* 登录卡改为纯面板（app.css 的卡片阴影/padding 在此处不需要） */ #login-view .login-card{width:100%;max-width:376px;background:transparent;box-shadow:none;padding:0;} /* ============================================================ * K9363（2026-10-21）登录页多分辨率逐档适配 * 全部规则限定 #login-view 作用域；≤1020 移动端一条不碰（逐像素零回归）。 * 现存两段：A 整页滚动 / B 侧栏 sticky / E 矮屏纵向预算 * （原 C 列数分档、D 大屏填充、F 规格字可读三项随 K9539 产品橱窗下架一并移除） * ============================================================ */ @media (min-width:1021px){ /* A 整页滚动：原 app.css:49 position:fixed inset:0 + .intro{overflow-y:auto} 把滚动藏在左栏内部，左栏内容被视口自裁。改为文档级滚动，左栏不再自裁。 */ #login-view{position:static;inset:auto;min-height:100vh;height:auto;align-items:flex-start;} /* min-height:100vh：align-items:flex-start 后 .intro 不再被拉伸， 不加这条时 >1024 的屏左栏深色背景会在内容结束后断开（实测 1366 差 34px、1920 差 159px） */ #login-view .intro{overflow:visible;min-height:100vh;} /* B 登录栏 sticky：内容滚动时登录框不离场，替代原先靠左栏内部滚动维持的对齐 */ #login-view .panel{position:sticky;top:0;height:100vh;align-self:flex-start;justify-content:center;} /* F 规格字可读：9.5px 在桌面属不可读字号（K9363 根因 ③），提到 11px */ } /* C 列数分档：1021–1279 由 4 列改 3 列 原 4 列在该段把卡压到 124–161px（实测 1024=124、1100=142、1180=161），型号成竖条； 3 列后 1024=178 / 1100=202 / 1180=227，均 ≥176 且型号不截断。 阈值取 1280：1280 宽下 4 列卡宽恰好 180（≥180 达标），故 1280 起不回退 3 列。 */ @media (min-width:1021px) and (max-width:1279px){ #login-view .intro-inner{padding-left:clamp(18px,2.4vw,56px);padding-right:clamp(18px,2.4vw,56px);} } /* D 大屏填充：≥1600 取消 .grid 的 1000px 封顶（原 1920 右侧 344px 死区）， 保持 4 列即保住 K9347 的「首屏 4+4」，只把卡片等比撑开；图高同步加到 108 免拉扁。 */ /* E 矮屏纵向预算：≥1280 且高 ≤830（1366×768 是最常见笔记本屏） 压缩纵向留白，保证左栏内容在首屏内收口。只动 padding/margin/字号，不隐藏任何内容。 */ @media (min-width:1280px) and (max-height:880px){ #login-view .intro-inner{padding-top:18px;} #login-view .featline{margin-top:7px;} /* 6/0/无线 → 12/14/有线：矮屏档原来把分段线整段关掉，叙事段和产品段又粘成一条； 用图区 76→66 换回这条边界（净 0，按钮位置不变）。 */ /* 76 而非 82：1280x720 档「展开按钮」底须 ≤760，留 10px 以上安全边界 */ } /* ============================================================ * 登录页两侧留白（2026-10-22） * 目标：≥1481 视口时内容块不再左右贴边，改为居中 + 两侧留白； * ≤1480 一条不碰 —— K9363 六档适配的标定值（1440/1366/1280/ * 1100/1024 与移动端）全部原样保留，零回归。 * 做法：留白落在 #login-view 自身的 padding 上，不动 .intro/.panel * 的高度与 sticky 逻辑，因此 K9363 的整页滚动/矮屏预算不受影响。 * 数值：内容封顶 1560px，最小边距 48px（1600 屏 = 48px，1920 屏 = 180px， * 2560 屏 = 500px）；产品卡在 1920 屏由 314px 收敛到 224px， * 高于门禁下限 175px，四列与「首屏 4+4」不变。 * ============================================================ */ @media (min-width:1481px){ #login-view{ background:#e8eef7; padding-left:max(48px,calc((100% - 1560px)/2)); padding-right:max(48px,calc((100% - 1560px)/2)); } #login-view .intro{border-radius:20px 0 0 20px;overflow:clip;} #login-view .panel{border-radius:0 20px 20px 0;} } /* ============================================================ * 门面质感补丁（2026-10-24）—— K9321（2026-11-03）起 .intro-foot 整体删除： * 落款三件（公司名/平台介绍/qizhi808.cn）与页脚 ICP 行及右上「返回首页」重复， * DOM 已删，此处 6 条基础规则与两条 display:none 断点随之移除（历史沿革见 git）。 * 同期保留：产品图区高度 104→100，消除 1440x900 的 6px 纵向溢出（对象已随 K9539 下架）。 * ============================================================ */ /* ============================================================ * 三段割裂治理（2026-10-24，Owner 反馈「三个模块比较割裂」） * 病根不是间距太小，而是「形态太多」+「间距处处相同」： * 改前 4 种形态（胶囊词条 / 竖线优势 / 圆点清单 / 白卡）挤在 12-20px 等间距里， * 读者看不到分组边界，只看到一长条堆叠 ⇒ 观感即「拼接」。 * 治法两条： * ① 形态收敛：能力词条去掉胶囊底与描边，与 pillars 共用「图标 + 文字」一种语言； * ② 分组放大：叙事段内部 24-28px，叙事段与产品段之间 34-44px + 细分隔线， * 让「我是谁」与「我拿什么干」成为两段，而不是四段并列。 * 中矮屏（≤999 高）单独收一档：1440x900 / 1600x900 上大留白会把整页撑出滚动条。 * （K9321 2026-11-03 二轮：caps 已删 DOM，本档规则随之清空移除。） * ============================================================ */ /* ============================================================ * 第三轮（2026-10-24，Owner 三条反馈） * ① 「这一块讲的太生硬」：病根是整段都是规格腔——箭头「→」、斜杠「/」、 * 纯名词列阵。箭头和斜杠是图注语法，放在文案位就是生硬。改法： * · 主段落改成场景话（车在哪/跑得怎么样/出了什么事） * · 四个能力词条加口语前引，读成一句话的延续 * · 三个交付优势改成完整短句，去掉箭头与斜杠 * ② 「这一块缺少了介绍」：产品区原来是标题→筛选→卡片，没说这些设备是什么、 * 为什么分四类、不懂怎么选。补 .showcase-intro 一段（选型口径 + 算力/功耗区间 + 兜底） * ③ 「这一块又太孤立」：右栏原来只有一张窄表单悬在白底中间，与左栏毫无关系。 * 补 .panel-top（与左栏同一枚标识、同一条基线）+ 接缝发丝线 + 顶部呼应光晕， * 让两栏成为「同一张门面的两半」，而不是两个页面。 * （K9321 2026-11-03 二轮：caps/caps-lb 已删 DOM，对应规则移除，本段其余沿革见 git。） * ============================================================ */ /* 右栏页头：padding-top 与左栏 .intro-inner 同为 clamp(24px,4vh,42px)，两栏标识对齐同一基线 */ #login-view .panel-top{position:absolute;top:0;left:0;right:0;z-index:2; display:flex;align-items:center;gap:9px; padding:clamp(24px,4vh,42px) clamp(20px,2.2vw,28px) 14px; border-bottom:1px solid var(--gray-100);} #login-view .panel-mark{width:26px;height:26px;flex:0 0 26px;border-radius:8px;object-fit:contain;padding:2px; background:linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow:0 5px 12px rgba(29,78,216,.3),inset 0 1px 0 rgba(255,255,255,.35);} #login-view .panel-name{color:var(--gray-700);font-size:13px;font-weight:600;letter-spacing:.4px;} /* 顶部光晕与左栏同一光源方向（右下打光），让两块表面像一张纸而不是两张 */ #login-view .panel::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(130% 55% at 100% 0,rgba(59,130,246,.085),rgba(59,130,246,0) 62%);} /* 接缝发丝线：比阴影更「连」，暗示这里是同一张面板的分区线 */ #login-view .panel::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;pointer-events:none; background:linear-gradient(180deg,rgba(37,99,235,.03),rgba(37,99,235,.17) 28%, rgba(37,99,235,.17) 72%,rgba(37,99,235,.03));} @media (max-width:1020px){ #login-view .panel-top{display:none;} } #login-view .foot-hint{color:rgba(255,255,255,.44);font-size:11.5px;letter-spacing:.2px;line-height:1.5;} /* ============================================================ * 纵向预算回收：产品区介绍段要 ~44px，1440x900 只剩 4px、1280x720 只剩 12px， * 必须等量从别处让出，否则「展开全部产品」被顶出首屏（K9366 红线）。 * 让出顺序：先压段间留白，再压图区高度，最后才动内边距。 * （K9321 2026-11-03 二轮：lead/caps 已删 DOM，两档规则随之清空移除。） * ============================================================ */ /* ============================================================ * 右栏底座（2026-10-24）：治「登录区太孤立」 * 改前：纯白 #fdfefe 上一张无边框表单悬空居中，与左栏深蓝毫无关系。 * 改后：底座浅蓝灰（深蓝的极淡延续）+ 白色卡片承接表单 + 顶部同源页头， * 三件东西叠出「同一张门面的入口区」，而不是一页独立表单。 * 卡片内边距 26/28 后表单净宽 316–376px，登录控件仍 ≥ 44px 高，未触碰 K9363 判据。 * ============================================================ */ @media (min-width:1021px){ #login-view .panel{background:linear-gradient(180deg,#f8fbff 0%,#e9f1f9 100%);} /* 卡宽 428 = 表单 376 + 左右内边距，保持改版前的输入框宽度不被卡片吃掉 */ #login-view .login-card{max-width:428px;background:#fff;border:1px solid rgba(15,40,80,.07);border-radius:16px; padding:28px 26px 24px; box-shadow:0 18px 44px rgba(12,32,66,.07),0 2px 6px rgba(12,32,66,.04);} #login-view .login-card .login-tip{margin-top:14px;} } /* ============================================================ * K9532（2026-10-30）浅色专业风 v3 * 只做「表层覆盖」，不改上文的栅格与断点：上文每条 #login-view .x * 与本段同特异性、本段在后 ⇒ 本段生效，窄屏断点里的深色值一并被覆盖。 * 数值纪律：本页出现的每个数字都必须能指到出处； * 未取到规格的型号（NV-P200/P300）只写接口与形态，不写算力。 * ============================================================ */ #login-view{ --k-bg:#f7f9fc; --k-surface:#ffffff; --k-line:#e3e8ef; --k-line-strong:#d3dbe6; --k-ink:#0e1726; --k-ink2:#47566b; --k-ink3:#7c8899; --k-brand:#2563eb; --k-brand-soft:#eff4ff; --k-brand-line:#d5e2ff; } /* ---------- 左栏：深蓝渐变 -> 冷白渐变 + 极淡网格 ---------- */ #login-view .intro{ background: radial-gradient(120% 80% at 100% 0%,rgba(37,99,235,.07) 0%,rgba(37,99,235,0) 58%), linear-gradient(180deg,#fbfcfe 0%,#f2f6fb 100%); } #login-view .intro::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16);} #login-view .intro::before{ background:radial-gradient(circle,rgba(37,99,235,.10),rgba(37,99,235,0) 62%); } #login-view .intro::after{ opacity:1; background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(110% 65% at 20% 0%,#000 20%,transparent 68%); -webkit-mask-image:radial-gradient(110% 65% at 20% 0%,#000 20%,transparent 68%); } /* ---------- 品牌与标题（K9321 2026-11-03 二轮：eyebrow/lead/caps 已删 DOM，规则随之移除） ---------- */ #login-view .brand-text .name{color:var(--k-ink);font-weight:650;letter-spacing:.2px;} #login-view .brand-text .org{color:var(--k-ink3);letter-spacing:.2px;} /* ---------- 特性行（保留兼容） ---------- */ #login-view .featline .lb{color:var(--k-ink3);} #login-view .featline .it{color:var(--k-ink2);} #login-view .featline .it::before{background:var(--k-brand-line);} /* ---------- 筛选器 ---------- */ /* ---------- 展开按钮与落款 ---------- */ #login-view .foot-hint{color:var(--k-ink3);} /* ---------- 右栏：与左栏同底，改 1px 竖线分隔 ---------- */ #login-view .panel{ background:#fbfcfe; border-left:1px solid var(--k-line); box-shadow:-18px 0 44px rgba(14,23,38,.05); } /* ≥1021 时登录卡自带白底+描边（上文断点规则），右栏退成浅灰承托，避免白卡浮在纯白上看不出边界 */ @media (min-width:1021px){ #login-view .login-card{background:var(--k-surface);} } /* ---------- 窄屏：卡片化收边 ---------- */ @media (max-width:1020px){ #login-view .intro{border-radius:0 0 18px 18px;} #login-view .panel{border-left:0;box-shadow:none;background:var(--k-surface);} } /* ============================================================ * K9535（2026-10-30，K9539 后修订；K9321 2026-11-03 两轮修订） * K9532 v3 那段写在文件末尾且不带断点，同特异性下把矮屏档的 margin 全盖掉 * —— 涉及对象（headline/pillars/lead/caps）的 DOM 已全部删除，本档规则清空。 * K9539 下架后，原「横向出血」一节随对象消失作废。 * ============================================================ */ /* ============================================================ * K9539 纵向重心（K9321 2026-11-03 二轮修订）： * 左栏现仅余 brand 行，内容远不足一屏。改为顶部对齐—— * 原 justify-content:safe center 会把唯一的 brand 行悬在屏幕竖直中央， * 门厅该是「门牌在门口」，不是「牌子挂在屋子正中」。 * 右栏 .panel 仍垂直居中，登录卡视线位置不变。 * ============================================================ */ @media (min-width:1021px){ #login-view .intro{display:flex;flex-direction:column;} #login-view .intro-inner{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;} } /* ============================================================ * K9586（2026-11-01）移动端字号与横屏可达性 * 1) iOS Safari 对 font-size < 16px 的输入框聚焦时会把整页放大（视口 scale > 1）， * 原文 13.5px 必触发。抬到 16px 只影响触屏窄屏，桌面 13.5px 的密度不动。 * 横屏手机宽度可到 844（不落入 480 档），因此横屏档同样抬字号。 * 2) 横屏 844x390 实测登录按钮 bottom 在 677px，需滚 287px 才见；该档隐藏营销区， * 只留右栏登录卡（卡面默认方案，替代方案「压缩而非隐藏」待产品口径）。 * 3) .eyebrow 的 width:fit-content 随 K9321 二轮删 DOM 一并作废。 * 本段全部带断点、置于文件末尾：同特异性只覆盖上述档位，不抹平前文的断点预算。 * ============================================================ */ @media (max-width:480px){ #login-view .form-group input{font-size:16px;} } @media (orientation:landscape) and (max-height:500px){ #login-view .intro{display:none;} #login-view .form-group input{font-size:16px;} #login-view .panel{padding-top:8px;justify-content:flex-start;} /* 390 高度下整卡需再收 23px 才完整落屏：只压纵向间距，44px 触控高度与字号一律不动 */ #login-view .card-head{margin-bottom:4px;} #login-view .login-tabs{margin-bottom:6px;} #login-view .form-group{margin-bottom:6px;} /* K9582：同意行在 390 高横屏下要 19px，从上面三处白空里腾出来， 否则会把 K9586 刚收进首屏的登录卡推回需滚状态。 */ #login-view .login-tip{margin-top:10px;} #login-view .login-agree{margin-top:4px;font-size:11px;line-height:1.35;} } /* ============================================================ * K9602（2026-11-02）：点击区与 320 断点可达性 * 手法只有两种，避免连锁反应： * ① 命中区放大用 ::after 伪元素外扩 —— 视觉与行高零位移，不推走下方内容； * ② 320 纵向腾挪只在 ≤340px 生效，且不动信息层级（一行文案都不删，只让四宫格卖点图让位）。 * 本段追加在文件末尾，故每条规则都带 #login-view 前缀与必要断点； * 禁止出现无断点的大范围覆盖 —— 那会抹平 K9363 / K9582 已经算好的断点预算。 * ============================================================ */ /* ① 同意行「《隐私政策》」：链接本身 72x14，撑到 92x44。 做法是 inline-block + padding 再用**等量负 margin 抵回**，行盒仍按原高度排， 所以下方内容零位移；不用 ::after 是因为伪元素外扩量不到真实热区（验收要量 rect）。 */ #login-view .login-agree a{display:inline-block;padding:15px 10px;margin:-15px -10px;} /* ② 两处页脚链接：48x14 → 48x44；左右只外扩 6，避免与相邻「·」抢点击 */ #login-view .panel-icp a, #login-view .m-foot a{display:inline-block;padding:15px 6px;margin:-15px -6px;} /* ③ 模式切换 tab：33 → 44（原 padding:0 2px 11px；上下各补，下划线视觉保留） */ #login-view .login-tab{padding-top:8px;padding-bottom:14px;} /* ④ 320 / ≤340：登录按钮进首屏。横向溢出必须仍为 0，故只动纵向； （caps/lead 随 K9321 二轮删 DOM 移除，此档只余纵向腾挪） */ @media (max-width:340px){ #login-view .intro-inner{padding-top:12px;} #login-view .brand-text .org{margin-top:0;} #login-view .panel{padding-top:14px;} } /* ⑤ 移动端小字提到 ≥12px（11/11.5px 只留给备案号那一行） */ @media (max-width:1020px){ #login-view .brand-text .org{font-size:12px;} #login-view .login-tip code{font-size:12px;} } /* ⑤b 矮屏（横屏 ≤500 高）同意行被压到 11px，一并提到 12px —— 11px 只留给备案号 */ @media (max-width:1020px) and (max-height:500px){ #login-view .login-agree{font-size:12px;} } /* ⑤b 矮屏（横屏 ≤500 高）同意行被压到 11px，一并提到 12px —— 11px 只留给备案号 */ @media (max-width:1020px) and (max-height:500px){ #login-view .login-agree{font-size:12px;} } /* ============================================================ * 返回首页入口（2026-11-03，K9321 公安备案复核） * 病根：全站唯一的「回产品页」入口是 .intro-foot 的「平台介绍」，而它被 * @media (min-width:1021px) and (max-height:1049px) 与 (max-width:1020px) 双双 * display:none —— 1440x900 笔记本与全部手机上都看不到，等于没有。 * 补法：桌面挂在右栏 .panel-top（absolute 内，不占纵向预算，K9366 红线不受影响）， * 窄屏挂在左栏 .brand 行（flex 行内 margin-left:auto，零增高）。 * ============================================================ */ #login-view .panel-back{margin-left:auto;display:inline-flex;align-items:center;gap:3px; color:var(--k-ink2);font-size:12.5px;line-height:1;text-decoration:none; padding:5px 7px 5px 4px;border-radius:7px;transition:color .15s,background .15s;} #login-view .panel-back:hover{color:var(--k-brand);background:var(--k-brand-soft);text-decoration:none;} #login-view .panel-back svg{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} #login-view .brand-back{display:none;margin-left:auto;flex:0 0 auto;align-self:flex-start; align-items:center;gap:2px;color:var(--k-ink2);font-size:12px;line-height:1;text-decoration:none; padding:6px 8px 6px 5px;border-radius:7px;border:1px solid var(--k-line); background:var(--k-surface);} #login-view .brand-back svg{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} @media (max-width:1020px){ /* 窄屏 .panel-top 整行 display:none，返回入口改挂 brand 行 */ #login-view .brand-back{display:inline-flex;} } /* ============================================================ * K9321（2026-11-03）左栏瘦身（Owner 采定 leon 16:49 A 档） * 删除 DOM：h1.headline、lead 第二行（7 组 33 项）、.pillars 三卡、.intro-foot 落款。 * 三支柱文案与产品页 index.html 逐句重复；落款与页脚 ICP 行/「返回首页」重复； * 营销大标题与 10-29 裁决（.cn 不承接推广属性）有张力。 * 保留：brand 行 + 标准标签 + 一行定位 + 四块能力标签（登录页独有动线信息）。 * 本段只删规则、不新增覆盖；保留的 lead/caps 各断点 margin 预算原样不动。 * ============================================================ */ /* ============================================================ * K9321（2026-11-03）左栏二次瘦身（Owner 采定） * 删除 DOM：.eyebrow 标准标签、.lead 一行定位、.caps 四块能力标签。 * 三块均为写给未购客户的营销位，登录页读者是已注册用户； * 公安备案复审的登录页可见面随之收窄。 * 左栏现仅余 brand 行（logo + 名称 + 一行定位小字 + 返回首页）， * 桌面端纵向对齐由 safe center 改 flex-start（门牌在门口）。 * 本段只删规则与改一处对齐，保留元素的断点预算原样不动。 * ============================================================ */