/* 诊股台 · PC 终端 形态参照同花顺/通达信：定高分栏、多窗格同屏、信息密度优先。 刻意避开的：圆角卡片、大留白、投影、每块一个大标题 —— 那是 web app 的语言，不是交易终端的。 这里的规矩：1px 细线分栏、12px 基准字号、行高 1.45、表头压深、数字右对齐等宽。*/ :root{ /* ── 字号阶梯（2026-09-11 重做）───────────────────────── 🔴 改之前：body 基准 12px，用得最多的是 11px，还有 9~10.5px 的。 而中文界面的**最小可读字号就是 12px** —— 等于全站正文都压在可读线上， 辅助信息更是在线以下。用户原话「我一个年轻人都要眯着眼向前看」。 依据（优设 / 知乎 / 即时设计的中文排版规范，交叉过三处）： 正文 14~16px（数据密集型界面也是这个区间，不是降到 11px 的理由） 注释 12~13px · 标题与大数字 16~20px Bold · 行高 1.5 倍 · 字号取偶数 clamp 让它随屏幕走：1440 屏取下限，1920 中间，2560 封顶。 原来不管多大的屏都是同一套 12px —— 这就是「自适应太差」的实处。 */ --fs-note: clamp(13px, 0.70vw, 14px); /* 注释 / 状态栏 / 来源徽章 */ --fs-base: clamp(15px, 0.83vw, 16px); /* 正文 / 列表 / 表格 */ --fs-title: clamp(15px, 0.85vw, 17px); /* 面板标题（靠字重区分） */ /* 🔴 这两个变量定义了却【零处引用】，等于字号层级只有 3 档在跑（13/15/17）—— 用户最想看的两样东西（现价、诊断结论）跟表格、列表一个字号， "哪都一样重要" = 哪都不重要。2026-09-11 接上。 🔴 下限必须保持 15px 不动：实测 1280×800 下诊断区内容已经溢出 155px（475 装进 320）， 再提下限就是把小屏用户往滚动条里推。只提上限，让大屏拿到层级，小屏原样。 */ --fs-lead: clamp(15px, 0.92vw, 18px); /* 诊断正文 —— 你真正在读的那段 */ --fs-num: clamp(17px, 1.00vw, 20px); /* 关键数字：买点 / 止损 / 目标 */ --fs-hero: clamp(24px, 1.45vw, 30px); /* 现价（对齐同花顺/东财的 30px 档） */ --lh: 1.5; /* 🔴 配色去「AI 味」（2026-09-11）： 原来 --bg:#0B0E13 / --text:#C8D0DA 都是**蓝黑、蓝灰**（蓝分量最高）， 那是科技产品的调子，不是行情软件的。国内看盘软件（同花顺 / 东财 / 通达信） 一律是**中性近黑底 + 高饱和红绿**——盘面上只有涨跌两种颜色该抢眼， 底色带任何色相都会跟红绿抢注意力。 改成几乎无色相的深灰，红绿提饱和度。 */ --bg:#0C0C0E; /* 窗口底 —— 近黑，色相中性 */ --panel:#131316; /* 面板 */ --head:#191A1D; /* 面板标题条 */ --hover:#212126; --line:#2A2A2F; /* 分栏线 */ --line-2:#1D1D21; /* 表格内细线 */ /* 🔴 三级灰重排（2026-09-11，按 WCAG 实测）： 原来 --text-3 是 #5C5C64，在面板底上对比度只有 **2.8** —— 连「大字」的 3.0 都不到，而它正好用在指标格名称、状态栏、所有标签这些最需要看清的地方。 重排成 13.5 / 7.5 / 4.8 三档，每档都过 4.5 的正文标准，层级也拉得开。 */ --text:#DCDCE0; --text-2:#A4A4A8; --text-3:#8A8A8E; --up:#FF3B30; --up-bg:rgba(255,59,48,.12); /* A股红涨 —— 提饱和 */ --dn:#14C82C; --dn-bg:rgba(20,200,44,.13); /* 绿跌 —— 色相对齐东财 #009900 的正绿(H120)，暗底把亮度提到 43%。 原来 #00C853 是 H145 偏青，那是科技产品的绿 */ --gold:#E8B339; --gold-bg:rgba(232,179,57,.10); --calc:#4A9EFF; --calc-bg:rgba(74,158,255,.12); --warn:#FF9F2E; --mono:"JetBrains Mono","IBM Plex Mono",Consolas,"SF Mono",Menlo,monospace; --zh:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,sans-serif; } :root[data-theme="light"]{ /* 浅色板同理去蓝调：中性灰白底 + 高饱和红绿 */ --bg:#EFEFF1; --panel:#FFFFFF; --head:#F5F5F6; --hover:#F1F1F3; --line:#D8D8DB; --line-2:#EAEAEC; /* 同样按 WCAG 校过：原 --text-3 #8E8E96 在白底上只有 3.25，不达标 */ --text:#1F1F22; --text-2:#5D5D63; --text-3:#737379; --up:#E02020; --up-bg:rgba(224,32,32,.08); --dn:#049F19; --dn-bg:rgba(4,159,25,.09); --gold:#A87816; --gold-bg:rgba(168,120,22,.09); --calc:#1B6FD4; --calc-bg:rgba(27,111,212,.09); } *{box-sizing:border-box; margin:0; padding:0} html,body{height:100%; overflow:hidden} body{ background:var(--bg); color:var(--text); font-family:var(--zh); font-size:var(--fs-base); line-height:var(--lh); -webkit-font-smoothing:antialiased; user-select:none; } .m{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} .up{color:var(--up)} .dn{color:var(--dn)} .fl{color:var(--text-2)} .ar{text-align:right} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} /* 🔴 滚动条必须真的看得见：原来 thumb 是 #2A323E，在深色面板上几乎融进背景， 而且 border 写死 var(--panel) —— 在 #aside（底色是 --line）上还会露出一圈色差。 2026-09-11 用户截图问「默认情况就是溢出的？」：其实是右栏在滚、底边把一行字切成两半， 而他完全看不出这里能滚。border 改透明 + background-clip，滚动条在任何底色上都干净。 */ ::-webkit-scrollbar-thumb{background:#4A4A54; border:2px solid transparent; background-clip:padding-box; border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:#61616C; background-clip:padding-box} /* ═══ 骨架：定高，绝不整页滚动 ═══ */ #app{ height:100vh; display:grid; /* 顶栏 34px → 52px：行情区改成同花顺那种两行布局（股名/代码 + 现价/涨跌）， 34px 装不下，现价直接被裁掉一半。52px 是「两行 + 上下留白」的最小高度。 */ grid-template-rows:52px 1fr 22px; /* 列宽走变量，拖拽条直接改它 —— 专业软件的版面是可调的 */ /* 🔴 字号从 12px 提到 15px 之后，列宽必须跟着走，否则股名直接截成「贝瑞…」。 右栏从 352 → 460：诊股产品用户真正在读的是诊断意见那 160 字， 352px 宽度下它要折 10 行；K 线是辅助，占 62% 版面是本末倒置。 */ grid-template-columns:var(--wL,248px) 4px 1fr 4px var(--wR,460px); grid-template-areas:"bar bar bar bar bar" "side gl main gr aside" "st st st st st"; gap:0; background:var(--line); } #side,#main,#aside{border-left:1px solid var(--line)} /* 🔴 2026-09-12：开容器查询，让左栏里的行按【左栏自己的宽度】排版， 而不是按屏幕宽度 —— 左栏宽度是固定的（默认 248px，用户还能拖）， 屏幕变大它并不会变宽，原来用 @media(max-width:1366) 判断等于判错了对象： 1366 以下 4 列给股名 108px，1367 以上塞进第 5 列「60分前」只剩 72px， **屏幕越大股名越窄**（实测「宇树科技-W」在 1440/1680/1920/2560 全被截）。 */ #side{container-type:inline-size; container-name:sidecol} #side{border-left:none} #bar,#st{border-bottom:1px solid var(--line)} #st{border-bottom:none; border-top:1px solid var(--line)} /* 拖拽条：平时几乎看不见，hover 才亮 —— 不抢视觉 */ .gut{background:var(--bg); cursor:col-resize; position:relative; z-index:5} .gut#gutL{grid-area:gl} .gut#gutR{grid-area:gr} /* 横向分隔条：数据区默认 272px 只放得下 8 行，12 个数据源维度有 4 行要滚才看得到。 专业软件的做法是让用户自己拖高，而不是把内容塞进固定格子。 */ .guth{background:var(--bg); cursor:row-resize; position:relative; z-index:5} .guth:hover,.guth.on{background:var(--gold)} body.resizing-v,body.resizing-v *{cursor:row-resize!important; user-select:none} .gut:hover,.gut.on{background:var(--gold)} body.resizing{cursor:col-resize; user-select:none} body.resizing *{cursor:col-resize!important} /* ═══ 工具条 ═══ */ #bar{ grid-area:bar; background:var(--head); display:flex; align-items:center; padding:0 10px; overflow:hidden; } /* 品牌区：专业终端的惯例是品牌克制、功能显眼 —— 品牌名用中文字体 （等宽字体排中文是灾难），模块名降一级并用细竖线隔开， 左侧一条红竖条当品牌标记，比整个名字染红克制得多。 */ #bar .logo{display:flex; align-items:baseline; gap:7px; margin-right:14px; white-space:nowrap; font-family:var(--zh); padding-left:9px; position:relative} #bar .logo::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:13px; background:var(--up); border-radius:1px} #bar .logo b{font-size:var(--fs-base); font-weight:600; letter-spacing:1.6px; color:var(--text)} #bar .logo i{font-style:normal; font-size:var(--fs-note); letter-spacing:1px; color:var(--text-3); padding-left:7px; border-left:1px solid var(--line-2)} /* 交易时段：A股一天分五段，每段该做的事完全不同。 盘前看能不能低开企稳、盘中盯买点、盘后复盘明天。 */ .sess{display:flex; align-items:center; gap:5px; margin-right:12px; font-size:var(--fs-note); color:var(--text-2); white-space:nowrap} .sess i{font-style:normal; width:6px; height:6px; border-radius:50%; background:var(--text-3)} .sess.live i{background:var(--up); box-shadow:0 0 0 2px var(--up-bg)} .sess.pre i,.sess.call i{background:var(--gold); box-shadow:0 0 0 2px var(--gold-bg)} .sess.post i{background:var(--calc)} .sess b{font-weight:500; color:var(--text)} .sess s{text-decoration:none; color:var(--text-3); font-family:var(--mono); font-size:var(--fs-note)} #bar input{ width:132px; height:22px; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:0 8px; font-family:var(--mono); font-size:var(--fs-base); outline:none; border-radius:1px; } #bar input.opt{width:78px} #bar input.qty{width:68px} #bar input:focus{border-color:var(--gold)} #bar input.opt:not(:placeholder-shown){border-color:var(--gold); color:var(--gold)} #bar input::placeholder{font-family:var(--zh); color:var(--text-3); font-size:var(--fs-note)} .tb{ height:22px; padding:0 10px; background:var(--panel); border:1px solid var(--line); color:var(--text-2); font-size:var(--fs-base); font-family:var(--zh); cursor:pointer; border-radius:1px; margin-left:5px; white-space:nowrap; } .tb:hover{background:var(--hover); color:var(--text)} .tb.go{background:var(--up-bg); border-color:rgba(255,77,79,.4); color:var(--up); font-weight:600} .tb:disabled{opacity:.4; cursor:default} #bar .sp{flex:1} /* 当前标的压在顶条上 —— 专业软件的惯例 */ /* 顶栏行情区：左边身份（股名/代码 + 现价/涨跌两行），右边指标网格。 对标同花顺的头部信息区 —— 标签小灰字、数值大一号，两者成组，组间留白。 原来 8 个信息平铺一行，眼睛要在一长串里找，那是业余感的来源。 */ /* 🔴 2026-09-12：开容器查询，按【顶栏实际剩下多少宽度】决定显示几个指标格。 原来只有 @media(max-width:1366) 一道，判的是屏幕宽度 —— 而顶栏能用多少， 取决于左边那排输入控件占了多少，跟屏幕宽度不是一回事。 实测 1440×900 下「换手」被 overflow:hidden 硬切成「换」和「0.」 （右边缘 1405.8 超出裁剪线 1372.6 共 33px），而 #tick 的 scrollWidth==clientWidth==657，靠 scrollWidth>clientWidth 根本查不出来。 宁可整格不显示，也不要半格 —— 半个数字比没有更容易看错。 */ #tick{display:flex; align-items:center; gap:20px; margin-left:18px; white-space:nowrap; overflow:hidden; min-width:0} /* ⚠️ 2026-09-12 踩过的坑：这里试过 `container-type:inline-size` 想按顶栏 实际宽度分级隐藏指标格 —— **#tick 宽度当场塌成 0**（它是 flex 子项， size containment 之后宽度不再由内容决定），五个尺寸全部崩掉。 容器查询只能用在宽度由外部确定的元素上（比如左栏 #side 是 grid 轨道， 宽度来自 --wL，就没事）。这里改用媒体查询分级，见下方 1500/1366 两道。 */ /* 🔴 身份组保持【单行】：股名 代码 现价 涨跌 横着排。 同花顺敢把它拆成两行，是因为它的头部有 80px 高；我们这条是工具条兼行情条， 只有 52px —— 拆两行会把股名挤出可视区（实测切掉一半）。 分组感靠的是「组内紧、组间松」，不一定要换行。 */ /* 🔴🔴 2026-09-12：身份组整组 flex:none，空间不够时它自己被 #tick 的 overflow:hidden 从右边切掉 —— 实测 1000×825 下现价「477.12」右边缘超出 裁剪线 10.8px（屏幕上是 477.1 + 半个 2），而涨跌幅「-4.30%」超出 80px **完全看不见**。用户会照着一个缺了末位的价格做判断。 组内要分优先级：股名/代码可以省略号，现价和涨跌幅一个像素都不许切。 */ #tick .idg{display:flex; align-items:baseline; gap:9px; min-width:0; flex:1 1 auto} #tick .nmline{display:flex; align-items:baseline; gap:7px; min-width:0; overflow:hidden} #tick .nmline>*{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* 价格行永不收缩、永不裁切 —— 它是这条栏上唯一不能出错的东西 */ #tick .pxline{display:flex; align-items:baseline; gap:8px; flex:none} #tick .grid{display:flex; align-items:center; gap:18px; min-width:0; overflow:hidden} #tick .kvp{display:flex; flex-direction:column; gap:0; line-height:1.25; align-items:flex-start} #tick .kvp i{font-style:normal; font-size:var(--fs-note); color:var(--text-3)} #tick .kvp b{font-size:var(--fs-base); font-weight:600; color:var(--text)} #tick .kvp b.up{color:var(--up)} #tick .kvp b.dn{color:var(--dn)} /* 🔴 结论那个色块原来字号小一档（note）+ 上下 padding 1px， 于是整组比兄弟矮 1px —— 值错开 1px，连带上面的标签也跟着错 1px。 同一排里只要有一个元素字号不同，整排就不齐。 字号跟兄弟一致，靠底色和左右 padding 区分即可；上下 padding 归零， 高度交给 line-height，保证行高跟纯文字的兄弟完全相同。 */ #tick .kvp b.adv{padding:0 7px; border-radius:2px; font-size:var(--fs-base); line-height:inherit; display:inline-block} #tick .nm{font-size:var(--fs-base); font-weight:600; color:var(--text)} #tick .cd{font-family:var(--mono); font-size:var(--fs-note); color:var(--text-3)} #tick /* 工具条高 52px，hero(26~32px) 加上下留白正好卡边；用 num 档(17~20px) 在这条里已经足够醒目，而且跟指标组的两行高度配得上。 */ /* 现价是进来第一眼要找的数字 —— 同花顺 30px、东财 30px， 我们原来 17~20px 跟旁边的指标数值一个大小，等于没有视觉锚点。 line-height 压到 1 是必须的：顶栏只有 52px，不压会把这一行顶出去。 */ /* 🔴 line-height 不能写 1：等宽数字的字形高度比字号本身大（实测 24px 字要 27px 盒）， 写 1 会被祖先的 overflow:hidden 裁掉 3px —— 肉眼未必看得出，但换个字体/换个数字就露馅。 1.15 是实测刚好装下字形、又不把 52px 的顶栏顶破的值。 */ .px{font-family:var(--mono); font-size:var(--fs-hero); font-weight:700; letter-spacing:-.8px; line-height:1.15} #tick .ch{font-family:var(--mono); font-size:var(--fs-num); font-weight:600} #tick .adv{padding:1px 7px; font-size:var(--fs-base); font-weight:600; border-radius:1px} /* ═══ 面板通用 ═══ */ .pane{background:var(--panel); display:flex; flex-direction:column; min-height:0; min-width:0} .ph{ height:24px; flex:none; background:var(--head); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 9px; font-size:var(--fs-base); color:var(--text-2); white-space:nowrap; } .ph .t{font-weight:600; color:var(--text)} .ph .sp{flex:1} .ph .x{font-family:var(--mono); font-size:var(--fs-note); color:var(--text-3)} .pb{flex:1; overflow:auto; min-height:0} /* ═══ 左：列表 ═══ */ #side{grid-area:side} /* 🔴 这一行原来是 flex + 各列 flex:none（宽度跟内容走），后果是【整行跟着时间文字跳】： 2026-09-11 实测，同一个列表里时间从「1时」变成「34分」多一个字符， 代码列的左边缘就在 95 / 98 / 103 三个位置之间跳，股名列跟着缩 8px —— 用户一眼就看出第一行"没对齐"。 这跟指标格当初的「跳格」是同一个病，那边已经用定死列宽解决，这里当时没顺手扫到。 改成 grid 定死每列宽度：内容再怎么变，列位置一个像素都不动。 列宽依据：代码 6 位等宽字 48px，时间最长「34分前」46px，评分两位 24px，删除 16px。 */ .lrow{ /* 🔴 2026-09-12：原来是 `1fr 48px 46px 24px 16px` —— 名字列拿"剩余空间"， 而左栏宽度是固定的（默认 248px），媒体查询却按【屏幕宽度】决定显示几列： 1366 以下 4 列（隐藏"60分前"）给名字 108px，1367 以上 5 列只剩 **72px** —— 屏幕越大名字列越窄。实测「宇树科技-W」在 1440/1680/1920/2560 全部被截 （四字名 72px 零余量，五字必截）。 改成：名字列保底 88px（五字中文 + 省略号的下限），时间列可被压缩让位。 这样不动任何布局结构，只把优先级说清楚 —— 名字比"3时前"重要。 */ display:grid; grid-template-columns:minmax(88px,1fr) 48px minmax(0,46px) 24px 16px; align-items:center; gap:6px; padding:4px 9px; cursor:pointer; border-bottom:1px solid var(--line-2); font-size:var(--fs-base); } .lrow:hover{background:var(--hover)} .lrow.on{background:var(--gold-bg); box-shadow:inset 2px 0 0 var(--gold)} /* 股名占弹性那一列，长名字省略号，绝不把后面的列推走 */ .lrow .n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .lrow .c{font-family:var(--mono); font-size:var(--fs-note); color:var(--text-3)} .lrow .s{font-family:var(--mono); font-size:var(--fs-base); text-align:right} /* ═══ 中：图 + 数据 ═══ */ /* 🔴 数据区默认从 272 提到 340：用户明确说「主要还是下面的信息更重要」。 1080 高的屏上 K 线仍有 660px 左右，够看 90 根日 K； 而数据区多出的 68px 正好是两行指标格，少滚一屏。 minmax(150px, 1fr) 给 K 线保底 —— 数据区拖到最高时它也不会被压没。 */ /* 🔴 2026-09-12：min-height:0 + overflow:hidden 是防撑破的第二道 —— grid 项默认 min-height:auto，内容（150 + 3 + --hD）比行高大时会把整行撑开， 于是 --hD 一大，状态栏被顶出视口、右栏跟着变高。 第一道是把拖动上限改成按视口算（见 app.js 的 hiOf），这一道兜底。 */ #main{grid-area:main; display:grid; grid-template-rows:minmax(150px,1fr) 3px var(--hD,340px); background:var(--line); min-width:0; min-height:0; overflow:hidden} #chart{background:var(--panel); display:flex; flex-direction:column; min-height:0} /* font-size 不影响 canvas 绘制内容，放这里是给 app.js 当【字号载体】： 绘图代码读 getComputedStyle(cv).fontSize 拿到浏览器算完 clamp 的真实像素， K线上的价格标签就跟全站字号走同一个源，不再是写死的 10px。 */ #cv{flex:1; width:100%; display:block; min-height:0; font-size:var(--fs-note)} /* 🔴 min-width:0 不能少：grid/flex 子项的 min-width 默认是 auto（由内容决定）， 内容一宽就把整个中间栏撑破 —— 2026-09-12 实测 1280 宽下 #main 横向溢出 88px， 而它 overflow 是 visible，于是中间栏的内容直接盖到右栏上面， 截图里就是「弱于 98%」压在「关键价位」标题上。 父级 #main 早就写了 min-width:0，唯独这一层漏了，整条链就断在这里。 */ #data{background:var(--panel); display:flex; flex-direction:column; min-height:0; min-width:0} /* 🔴 9 个页签在 1280 宽下会被压到每个只剩十几像素，文字竖排成「大\n盘」「技术指\n标」 —— 2026-09-11 截图实测。而裁剪关卡抓不到它：文字是换行了，不是被切掉。 三处一起管才治得住： ① flex 默认允许收缩，必须 flex:none 让每个页签保持自己的自然宽度； ② white-space:nowrap 断掉竖排的可能； ③ 总宽超了就整条横向滚动（专业行情软件的做法），而不是把每个页签压扁。 页签高度同时从 25px 提到 28px：字号提档后 25px 装 16px 的字太局促。 */ .tabs{height:28px; flex:none; background:var(--head); border-bottom:1px solid var(--line); /* 🔴 2026-09-12：原来带 `scrollbar-width:none`，页签条装不下时没有任何提示 —— 实测 1000/1280/1440 三个尺寸下「数据源」整格在屏外（被切 157/175/99px）， 而用户看不到滚动条，根本不知道后面还有页签。 位置是 relative + 下面那条 ::after 渐变做"右边还有"的视觉提示。 */ display:flex; overflow-x:auto; overflow-y:hidden; position:relative} /* 装不下时右端淡出，跟右栏底部那条渐变同一个套路：不占布局、不挡点击， 只说明"这里还没到头"。装得下时右端本来就是页签，渐变落在背景上看不出来。 */ .tabs::after{content:""; position:sticky; right:0; flex:none; width:20px; margin-left:-20px; align-self:stretch; pointer-events:none; z-index:2; background:linear-gradient(to right, transparent, var(--head))} .tabs::-webkit-scrollbar{display:none} .tab{ flex:none; white-space:nowrap; padding:0 13px; height:100%; display:flex; align-items:center; cursor:pointer; font-size:var(--fs-base); color:var(--text-2); border-right:1px solid var(--line); } .tab:hover{background:var(--hover); color:var(--text)} .tab.on{background:var(--panel); color:var(--gold); font-weight:600; box-shadow:inset 0 -2px 0 var(--gold)} .tabbody{flex:1; overflow:auto; min-height:0} /* ═══ 表 ═══ */ table{width:100%; border-collapse:collapse; font-size:var(--fs-base)} thead th{ position:sticky; top:0; z-index:1; background:var(--head); color:var(--text-3); font-weight:500; font-size:var(--fs-note); text-align:left; padding:4px 9px; border-bottom:1px solid var(--line); white-space:nowrap; } tbody td{padding:4px 9px; border-bottom:1px solid var(--line-2); color:var(--text-2); white-space:nowrap} tbody tr:hover{background:var(--hover)} /* 🔴 2026-09-13：同行页和分析依据页有些行点进去有内容（app.js 给它们加了 .clk 并绑了 onclick），但 .clk 在这份 CSS 里一个字都没有 —— 鼠标是箭头不是小手， 而上面那条 hover 又给【所有】行都变了色，用户根本分不出哪行能点。 */ tbody tr.clk{cursor:pointer} tbody tr.clk:hover{background:var(--hover); box-shadow:inset 2px 0 0 var(--calc)} tbody td.v{color:var(--text)} td.mono,th.mono{font-family:var(--mono); font-variant-numeric:tabular-nums} /* 键值网格 —— 比表格更密，指标面板用。 🔴 整行必须 nowrap：不加的话窄格子里中文会逐字竖排成一列 （"绿柱放大·零轴下" 排成 8 行），真机截图才看得出来。 */ /* 🔴 指标格原来是固定 228px 一格 + 三处 text-overflow:ellipsis， 于是「RSI 中性 42.36 43.33 44.xx」被截成「RSI 中..」、 布林上下轨截成「272.29 / 21…」—— 算出来的数给了却不让人看见。 改法不是把格子调宽（换个指标又爆），是让它【塞不下就换行】： 结论和数值都不许截断，格子高度自己长。 */ .kvg{display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); align-items:start} /* 🔴 「对不齐、跳格」的根因：flex 排版下每格内容长短不一， 结论的起始位置就跟着飘 —— MACD 的结论在第 60px，KDJ 的在第 52px。 改成固定三列网格：名 46px、结论、来源，所有格子的列位置一模一样； 数值整段放到第二行（跨列），既不截断也不把第一行挤歪。 */ /* 🔴 名称列原来写死 46px —— 字号提上去之后「20日成本」这种要 53px，直接被截。 试过 max-content 自适应，但那样每格按【自己】最长的名字算宽， 相邻格子差 1px 就又是「跳格」（实测筹码页出现 69 / 70 两个值）。 这一列的对齐比自适应重要：定死 58px，装得下 4 个中文还有余量。 */ /* 🔴 这里曾经「注释说的跟代码做的相反」：注释写着"塞不下就换行、结论永不截断"， 而下一行就写着 white-space:nowrap + overflow:hidden —— nowrap 沿继承链压住了 .v 的 overflow-wrap:anywhere（anywhere 只在允许换行时才生效）， 于是 MACD 的「绿柱放大·零轴下方」被硬裁成「…零轴下」，"算"徽章也被挤掉半个。 换行由每个子元素自己声明：名称一行，结论和数值都允许折行，格子高度自己长。 */ .kvg .i{display:grid; grid-template-columns:58px 1fr auto; grid-template-areas:"k v s" ". x x"; align-items:center; column-gap:7px; row-gap:2px; padding:5px 10px; min-height:27px; border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2); min-width:0} .kvg .i .k{grid-area:k; color:var(--text-3); font-size:var(--fs-note); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* 结论（超卖 / 绿柱缩短·零轴下方 / 空头排列）是这一格的答案，永不截断 */ .kvg .i .v{grid-area:v; color:var(--text); font-size:var(--fs-base); min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.35} /* 附加数值：右对齐；一行塞不下在空格处折行，而不是被切成「272.29 / 21…」 */ .kvg .i .x{color:var(--text-3); font-size:var(--fs-note); font-family:var(--mono); white-space:normal; overflow-wrap:anywhere; line-height:1.35; font-variant-numeric:tabular-nums} .kvg .i .src{grid-area:s; justify-self:end} .kvg .i .src:empty{display:none} .src{font-family:var(--mono); font-size:var(--fs-note); padding:0 4px; border-radius:1px; flex:none; line-height:1.6} .s-c{background:var(--calc-bg); color:var(--calc)} .s-l{background:var(--gold-bg); color:var(--gold)} .s-e{background:rgba(120,130,143,.14); color:var(--text-2)} /* ═══ 右：诊断 ═══ */ /* 🔴 右栏三块（诊断意见 / 关键价位 / 情景推演）加起来超过视口高度时， 最后一块会被直接裁掉 —— 用户看到情景推演的第三行只有上半截， 而且没有任何滚动条提示下面还有东西。 修法两层：① 每块自己能滚（内容多就在块内滚，不影响别的块） ② 整栏兜底能滚（块太多时整栏滚） .sec 不许被挤扁（flex-shrink:0），否则 flex 会把「关键价位」压成一条缝。 */ #aside{grid-area:aside; display:flex; flex-direction:column; background:var(--line); gap:1px; min-width:0; overflow-y:auto; position:relative} /* 🔴 底部渐变：右栏装不下时，最后一行字会被容器底边硬切成两半（1280×800 实测 切在「支撑压力」上），看起来像渲染坏了。渐变让它自然淡出，同时就是 「下面还有内容」的信号 —— 专业行情软件的通用做法。 sticky + 负 margin：不占布局高度，只浮在内容之上；pointer-events:none 不挡点击。 */ #aside::after{content:""; position:sticky; bottom:0; left:0; right:0; height:22px; margin-top:-22px; flex:none; pointer-events:none; z-index:3; background:linear-gradient(to bottom, transparent, var(--panel))} .sec{background:var(--panel); display:flex; flex-direction:column; min-height:0; flex-shrink:0} /* 🔴 诊断意见是这个产品的核心，不能跟下面两块平分空间。 实测填成本后三块变成 288/275/279 几乎均分，核心反而只拿到 1/3。 给它保底 340px（约 8 行正文 + 时段条），其余两块按内容排，超了整栏滚。*/ /* 🔴 flex-shrink 必须是 0：写 1 1 auto 时右栏会把这一块压回 340px， 内容 471px 撑不开 —— 光给 .pb 设 overflow:visible 完全没用（实测溢出还是 155px）。 1 0 auto = 大屏仍占满剩余空间，小屏内容多长就多高，交给右栏整体滚。 */ .sec.grow{flex:1 0 auto; min-height:340px} .sec .pb{padding:9px 11px; overflow-y:auto; min-height:0} /* 🔴 诊断意见这一块不许内部滚 —— 那会造出【双层滚动】： 1280×800 实测右栏能给它 316px、正文实际要 471px，于是它自己起一个滚动条， 而右栏本身也在滚。用户要在一个小框里滚完结论，再滚外面那层看价位， 这是小屏上最难用的形态，也等于把核心结论关进了一个抽屉。 改成：内容有多长它就多高，超出的部分由右栏整体滚动承接 —— 只剩一层滚动条， 往下滚一次就是「结论 → 价位 → 推演」的自然顺序。 大屏（1920 以上实测零溢出）本来就装得下，这条对它没有任何影响。 */ .sec.grow .pb{overflow-y:visible} .diag{font-size:var(--fs-lead); line-height:1.8; color:var(--text); user-select:text} /* 操作提示：左侧一根实心竖条 + 金色字，不用 ▸ 这类装饰符号。 行情软件里强调靠位置和颜色，往文字前面粘符号是「AI 生成」的典型特征。 */ .diag .a{display:block; color:var(--gold); margin-top:7px; font-size:var(--fs-base); padding-left:10px; position:relative; line-height:1.7} .diag .a::before{content:""; position:absolute; left:0; top:.45em; bottom:.35em; width:3px; background:var(--gold); border-radius:1px} .meta{margin-top:9px; padding-top:7px; border-top:1px solid var(--line-2); font-family:var(--mono); font-size:var(--fs-note); color:var(--text-3); display:flex; gap:9px; flex-wrap:wrap} /* 空仓/持仓两句并列。没填成本时两句都在但都压暗，填了成本 就把对应那句提亮 —— 用户始终看得到另一半，不用猜自己该看哪句。 */ /* 🔴 这两句原来是两个灰底块，堆在正文下面像 AI 聊天里的提示卡 —— 而且各占一块底色，视觉上跟正文割裂。改成一行一条的标签式： 左边一个短标签（空仓 / 持仓），右边跟着那句话，没有底色块。 当前适用的那条用金色标签点亮，另一条压暗但仍看得见。 */ .stance{margin-top:6px; display:flex; gap:8px; align-items:baseline; min-width:0; font-size:var(--fs-base); color:var(--text-3); line-height:1.65} .stance b{flex:none; min-width:3.2em; padding:1px 6px; border-radius:2px; background:var(--line-2); color:var(--text-3); font-size:var(--fs-note); font-weight:500; text-align:center; letter-spacing:.5px} .stance.on{color:var(--text-2)} .stance.on b{background:var(--gold-bg); color:var(--gold)} /* 价位轴 */ /* 🔴 高度必须跟着字号算，不能写死。 原来是 height:30px，而一个 .pin 里装着「竖线 12px + 2px 间距 + 数字行 + 标签行」—— 字号提档后实测 54px，多出来的 24px 直接压到下面的「理想买点」那一行上， 截图里就是「止损」和「理想买点」糊成一团。 这跟 K 线价格轴宽度写死是同一个病：字号是变量，依赖它的尺寸也必须是算出来的。 */ .axis{position:relative; height:calc(16px + var(--fs-note) * 3); margin:16px 6px 8px} .axis .ln{position:absolute; left:0; right:0; top:14px; height:1px; background:linear-gradient(90deg,var(--dn),var(--line) 45%,var(--line) 55%,var(--up))} /* 🔴 线和文字必须分开： 原来整个 .pin（线+文字）一起被避让算法平移，于是【线也跟着骗人】—— 2026-09-12 实测茅台：现价真实在轴的 69%，被推到 85% 画出来， 用户看到的那根金线根本不是现价所在的位置。这比两个数字糊在一起严重得多。 现在： 线绝对定位钉死在真实价位，永不移动；只有 .lab 文字允许左右让开。 */ /* .pin 只剩那根线，.lab 是独立的文字 —— 两者都直接挂在 .axis 上定位。 （.lab 不能塞在 .pin 里：.pin 里的子元素全是绝对定位，它自身宽度是 0， 文字再用百分比偏移就永远等于 0，让开等于没让。） */ .pin{position:absolute; top:0; width:0} .pin i{position:absolute; left:-.5px; top:0; display:block; width:1px; height:12px; background:var(--text-3)} /* 🔴 text-decoration 必须显式关掉：第一版用 当容器，价位数字和「止损」 两个字全带上了下划线，而关卡只查位置不查装饰线 —— 又是看图才发现的。 */ .axis .lab{text-decoration:none; position:absolute; top:14px; transform:translateX(-50%); text-align:center; white-space:nowrap} /* 🔴 下沉距离必须大于第一层标签的实际高度（数字行 + 名字行 ≈ 39px + top14 = 53）。 原来写 48，两层在 y 方向还压着 5px —— 关卡报「重叠 15×5px」，那个 5 就是它。 */ .axis .lab.t2{top:56px} /* 顶到轴边界时，JS 量出超了多少就往回推多少（见 app.js paintPrice 末尾）—— 线还在原处，只是文字往里收最小的距离，绝不出界也不无谓远离自己那根线。 */ .lab b{font-family:var(--mono); font-size:var(--fs-note); display:block; color:var(--text-2); font-weight:500} /* 没有数字的标记（买点 / 现价）用一个隐形的数字占位， 好让四个名字「止损 买点 现价 目标」落在同一条基线上 —— 用 margin 估高度 会差几个像素，而这一排只要差 1px 眼睛就看得出来。 */ .lab b.ph{visibility:hidden} .lab s{display:block; font-size:var(--fs-note); color:var(--text-3); text-decoration:none} /* 现价只留一根贯穿全轴的金线 —— 数字在顶栏（30px 大字），这里不重复写 */ .pin.now i{top:-16px; height:30px; background:var(--gold); width:1.5px; left:-.75px} .pin.sl i{background:var(--dn)} .lab.sl b{color:var(--dn)} .pin.tp i{background:var(--up)} .lab.tp b{color:var(--up)} /* 买点不带数字（数字在下面的行里），只画一个实心小标记占位 */ .pin.buy i{width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.75; top:3px; left:-2.5px} /* 分层时线要跟着下探到第二层，否则标签悬在下面、看不出它对应哪根线 */ .pin.t2 i{top:0; height:54px} .pin.buy.t2 i{top:3px; height:5px} /* 圆点豁免：不跟着拉成长竖线 */ .block{background:var(--up-bg); border:1px solid rgba(255,77,79,.3); padding:8px 10px; font-size:var(--fs-base); line-height:1.7} .block .h{color:var(--up); font-weight:600; margin-bottom:4px} .block .b{color:var(--text-2)} .ln2{display:flex; align-items:baseline; gap:8px; padding:4px 0; border-bottom:1px solid var(--line-2); font-size:var(--fs-base)} .ln2:last-child{border-bottom:none} .ln2 .k{color:var(--text-3); width:58px; flex:none; font-size:var(--fs-note)} .ln2 .v{color:var(--text); flex:1; min-width:0} .inp{display:flex; gap:6px; align-items:center; margin-bottom:7px} .inp label{color:var(--text-3); font-size:var(--fs-note)} .inp input{width:74px; height:20px; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:0 6px; font-family:var(--mono); font-size:var(--fs-base); outline:none; border-radius:1px} .inp input:focus{border-color:var(--gold)} .prog{height:2px; background:var(--line); overflow:hidden; flex:none} .prog i{display:block; height:100%; background:var(--gold); transition:width .5s} /* ═══ 状态栏 ═══ */ #st{ grid-area:st; background:var(--head); display:flex; align-items:center; padding:0 10px; font-size:var(--fs-note); color:var(--text-3); overflow:hidden; } #st .u{padding:0 9px; border-right:1px solid var(--line); height:13px; display:flex; align-items:center; white-space:nowrap} #st .u:first-child{padding-left:0} #st .u b{font-family:var(--mono); color:var(--text-2); font-weight:500; margin-left:4px} #st .sp{flex:1; border:none} .dot{width:5px; height:5px; border-radius:50%; display:inline-block; margin-right:5px; flex:none} .dot.ok{background:var(--dn)} .dot.no{background:var(--up)} .dot.wt{background:var(--gold)} /* 会自愈的状态（基准少刷一次）用橙，别跟真故障的红同色 —— 同色会训练人无视告警 */ .dot.warn{background:var(--warn)} .empty{padding:20px 14px; text-align:center; color:var(--text-3); font-size:var(--fs-base); line-height:1.9} .empty b{display:block; color:var(--text-2); font-size:var(--fs-base); margin-bottom:5px} .sp-s{display:inline-block; width:9px; height:9px; border:1.5px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:s .8s linear infinite; vertical-align:-1px} @keyframes s{to{transform:rotate(360deg)}} @media (max-width:1366px){ #app{grid-template-columns:var(--wL,232px) 4px 1fr 4px var(--wR,392px)} /* 🔴 顶栏在 1280 宽下装不下全部指标格：实测「量能」「获利」整个跑到屏幕外 （x 右边缘 1299 > 视口 1280）被 #tick 的 overflow:hidden 裁掉， 屏幕上看到的是半个数字。按优先级主动砍掉次要的，保住 评分 / 结论 / 均线 这三个决策必看的，剩下的在「技术指标」页里都有。 */ #tick .kvp.p2, #tick .kvp.p3{display:none} /* 小屏优先保住股名和评分，「几分钟前」这种次要信息先让位。 🔴 grid 下隐藏一个格子不会自动收掉那一列，模板必须同步从 5 列改成 4 列， 否则评分和删除会整体左移一格。 */ #sideList .lrow .ago{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:none} #sideList .lrow{grid-template-columns:1fr 48px 24px 16px} } @media (max-width:1100px){ #app{grid-template-columns:1fr 4px var(--wR,330px); grid-template-areas:"bar bar bar" "main gr aside" "st st st"} #side,#gutL{display:none} } @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}} /* 情景推演表在 250px 宽的面板里，第三列（结果）内容最长 —— 「回本需涨 +11.20% · 破 320.00 止损」。不固定列宽它会把 表撑出面板，右边的「保住 84% 本金」直接被切掉看不见。 */ #scBody table{table-layout:fixed; width:100%} #scBody th:nth-child(1),#scBody td:nth-child(1){width:38%} #scBody th:nth-child(2),#scBody td:nth-child(2){width:22%} #scBody td:nth-child(3){white-space:normal; line-height:1.5; word-break:break-word} /* 诊断意见顶部的时段条：告诉客户「现在这个钟点，这只票该干什么」。 诊断意见是 4 分钟前生成的，时段条是此刻算的 —— 两者互补。 */ .sessbar{display:flex; align-items:flex-start; gap:9px; padding:7px 9px; margin-bottom:9px; background:var(--bg); border-left:2px solid var(--line); font-size:var(--fs-base); line-height:1.55} .sessbar .t{display:flex; align-items:center; gap:5px; color:var(--text-2); font-weight:500; flex:none; white-space:nowrap} .sessbar .t i{width:6px; height:6px; border-radius:50%; background:var(--text-3)} .sessbar .b{color:var(--text-2); min-width:0} .sessbar.live{border-left-color:var(--up)} .sessbar.live .t i{background:var(--up); box-shadow:0 0 0 2px var(--up-bg)} .sessbar.live .t{color:var(--up)} .sessbar.pre .t i,.sessbar.call .t i{background:var(--gold); box-shadow:0 0 0 2px var(--gold-bg)} .sessbar.pre{border-left-color:var(--gold)} .sessbar.call{border-left-color:var(--gold)} .sessbar.pre .t,.sessbar.call .t{color:var(--gold)} .sessbar.post{border-left-color:var(--calc)} .sessbar.post .t i{background:var(--calc)} .sessbar.post .t{color:var(--calc)} /* 实时 / 历史 的区分标记 —— 用户分不清哪块是刚算的、哪块是几十小时前的 */ .fresh{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-note); color:var(--dn); font-family:var(--zh)} .fresh::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--dn)} /* 最近诊断行：加「多久前」和删除。不是今天的整行压暗 —— 一眼看出哪些是旧判断，不用点进去才发现是上上个交易日的。 */ #sideList .lrow .ago{font-family:var(--mono); font-size:var(--fs-note); color:var(--text-3); text-align:right; white-space:nowrap} /* 🔴 同「弱化绝不能用 opacity」：原来这里 opacity:.62， 把代码列的对比度从 4.78 砍到 2.82、评分砍到 3.59 —— 旧记录等于看不清。 旧记录要的是「一眼分得出是旧的」，不是「看不清」： 换成降一档颜色，并且靠右上角那个已经变黄的时间来标识，层次一样清楚。 */ #sideList .lrow.old .n{color:var(--text-2)} #sideList .lrow.old .c{color:var(--text-3)} #sideList .lrow.old .s{color:var(--text-2)} #sideList .lrow.old .ago{color:var(--warn)} /* del 的 opacity:0 是「hover 才出现」的交互，不是文字弱化 —— 关卡要能区分 */ #sideList .lrow .del{text-align:center; color:var(--text-3); font-size:var(--fs-base); line-height:1; opacity:0; transition:opacity .12s; cursor:pointer} #sideList .lrow:hover .del{opacity:.75} #sideList .lrow .del:hover{opacity:1; color:var(--up)} /* 附加数值 + 来源徽章绑成一组，一起换行 */ /* 附加数值独占第二行、右对齐、完整显示 */ .kvg .i .x{grid-area:x; justify-self:end; text-align:right} /* 成本口径提示：诊断正文按生成时的成本写，情景推演按输入框实时算 —— 两者不一致时必须明说，不能让页面上并存两套互相矛盾的数字。 样式跟 .fallback 同级：这是注脚不是警报，别做成红色弹窗吓人。 */ .costbar{margin:0 0 9px; padding:6px 9px; background:var(--gold-bg); border-left:2px solid var(--gold); font-size:var(--fs-note); line-height:1.6; color:var(--text-2)} .costbar b{color:var(--gold); font-family:var(--mono); font-weight:600} /* 模型价位不合格时的注脚 —— 异常是注脚不是主角， 用户要的是「现在能照着看的价位」，不是一个红色报错框。 */ .fallback{margin-top:9px; padding:6px 9px; background:var(--bg); border-left:2px solid var(--line); font-size:var(--fs-note); line-height:1.6; color:var(--text-3)} .fallback b{display:block; color:var(--text-2); font-weight:500; margin-bottom:2px} /* ── 大盘点评 ───────────────────────────── */ .mkthead{display:flex; align-items:center; gap:6px; padding:7px 10px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:2} .mkthead .sp{flex:1} .mkthead .x{font-size:var(--fs-note); color:var(--text-3); margin-right:8px; font-family:var(--mono)} .mtab{height:22px; padding:0 11px; background:transparent; border:1px solid var(--line); color:var(--text-2); font-size:var(--fs-base); font-family:var(--zh); cursor:pointer; border-radius:1px} .mtab:hover{border-color:var(--text-3); color:var(--text)} .mtab.on{background:var(--gold-bg); border-color:var(--gold); color:var(--gold); font-weight:500} .mktbody{padding:12px 16px 20px; max-width:940px; font-size:var(--fs-base); line-height:1.75; color:var(--text-2)} .mktbody h2{font-size:var(--fs-title); color:var(--text); margin:16px 0 7px; font-weight:600} .mktbody h3{font-size:var(--fs-base); color:var(--text); margin:13px 0 5px; font-weight:600} .mktbody h4{font-size:var(--fs-base); color:var(--text-2); margin:10px 0 4px; font-weight:600} .mktbody h2:first-child,.mktbody h3:first-child{margin-top:2px} .mktbody p{margin:0 0 6px} .mktbody li{margin:0 0 4px 16px; list-style:disc} .mktbody b{color:var(--text); font-weight:600} .mktbody hr{border:0; border-top:1px solid var(--line-2); margin:14px 0} .mktbody blockquote{margin:8px 0; padding:6px 10px; background:var(--bg); border-left:2px solid var(--gold); color:var(--text-3)} /* 大盘 tab 原来无条件染金色，结果没选中它时也黄着，跟「当前选中」的信号撞车。 选中态由 .tab.on 负责，这里只在【未选中】时给一点点区分（它不是个股维度）。*/ #tabs .tab.mkt:not(.on){color:var(--text-2)} /* 诊断进行中的进度块 —— 放在用户正看着的面板里，不是页面最底下 */ .jobbar{padding:8px 10px; margin-bottom:9px; background:var(--gold-bg); border:1px solid rgba(232,179,57,.3); border-radius:2px} .jobbar .h{display:flex; align-items:center; gap:6px; font-size:var(--fs-base); color:var(--gold)} .jobbar .h b{font-weight:600} .jobbar .h .t{margin-left:auto; font-size:var(--fs-note); color:var(--text-3); font-family:var(--mono)} .jobbar .pg{height:3px; background:var(--line); margin-top:6px; overflow:hidden; border-radius:2px} .jobbar .pg i{display:block; height:100%; background:var(--gold); transition:width .4s} .jobbar .st{margin-top:5px; font-size:var(--fs-note); color:var(--text-3)} /* 🔴 2026-09-13 删掉 .stalebar 两套样式（13 行）。 它服务的是「过期了点一下重新诊断」那个按钮，而按钮早改成跨交易日自动重诊、 staleBar 恒为空串、#reDiag 从此不存在 —— 两套样式谁都渲染不出来， 而且它俩 padding / button 高度还互相覆盖。app.js 里对应的事件绑定同批删。 */ /* 数据源明细：长文本换行显示，不再硬截 26 字 */ #tabbody td.wrap{white-space:normal; max-width:260px; line-height:1.5} /* ── 情景推演折叠态 ──────────────────────────────────── 收起时标题行直接给结论（当前盈亏 / 回本需涨），不展开也知道处境。*/ .scGist{margin-left:auto; font-size:var(--fs-base); color:var(--text-2); white-space:nowrap} .scGist b{font-family:var(--mono)} .tb.scTog{margin-left:8px; flex:none} .sec .inp{display:flex; align-items:center; gap:6px; flex-wrap:wrap} /* ── 数据面五维评分 ───────────────────────────── 对标同花顺诊股的五维打分，但多给一件它没给的东西：每一维的逐条依据。 条形图用三档色（强/中/弱），短板那一行整行提亮 —— 用户扫一眼就知道 「这只票差在哪」，而不是只看到一个总分。 */ .scwrap{padding:10px 12px} .schead{display:flex; align-items:baseline; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:4px} .schead .t{font-size:var(--fs-title); font-weight:600; color:var(--text)} .schead .x{font-size:var(--fs-note); color:var(--text-3)} .schead .x b{font-family:var(--mono); font-size:var(--fs-num); font-weight:700; color:var(--text); margin:0 2px} .scrow{padding:9px 0; border-bottom:1px solid var(--line-2)} .scrow:last-of-type{border-bottom:0} .scrow.worst{background:var(--gold-bg); margin:0 -12px; padding-left:12px; padding-right:12px; box-shadow:inset 2px 0 0 var(--gold)} .scrow .h{display:grid; grid-template-columns:64px 1fr 40px 36px 86px; align-items:center; gap:9px} /* 全市场位置：比分数本身更有信息量（「20 分」不如「弱于 98%」直观）， 但它是佐证不是主角，用小字灰色，右对齐跟分数列成一条线。 */ .scrow .rk{font-size:var(--fs-note); color:var(--text-3); text-align:right; white-space:nowrap} /* 窄屏先让位给依据本身：「弱于 98%」是佐证，「均线空头排列 −18」才是内容。 1366 以下把分位挪到依据那一行的开头，省出一整列宽度。 */ @media (max-width:1366px){ .scrow .h{grid-template-columns:60px 1fr 38px 34px} .scrow .rk{display:none} .scrow .why::before{content:attr(data-rk); color:var(--text-3); margin-right:4px} } .scrow .n{font-size:var(--fs-base); color:var(--text); white-space:nowrap} .scrow .v{font-family:var(--mono); font-size:var(--fs-num); font-weight:700; text-align:right; font-variant-numeric:tabular-nums} .scrow .v.na{color:var(--text-3); font-weight:400} .scrow .lv{font-size:var(--fs-note); color:var(--text-3); text-align:right; white-space:nowrap} .sbar{display:block; height:7px; background:var(--line-2); border-radius:4px; overflow:hidden} .sbar i{display:block; height:100%; background:var(--text-3); transition:width .3s} /* 🔴 必须跟右边的数字用同一套色：第一版我把条形图写成「绿=强」（照搬了 西方红绿灯的直觉），而数字那边用的是 A 股口径（红=强）， 于是同一行里「技术面 20」是红条配绿字、「基本面 78」是绿条配红字 —— 两个视觉编码互相打架，用户第一眼根本不知道该信哪个。 A 股用户的条件反射是红=好、绿=差，条和数字一律按这个来。 */ .sbar.g i{background:var(--up)} /* 强 = 红（A股红涨） */ .sbar.m i{background:var(--gold)} /* 中性 = 金 */ .sbar.b i{background:var(--dn)} /* 弱 = 绿（A股绿跌） */ .scrow .why{display:flex; flex-wrap:wrap; gap:5px 12px; margin:6px 0 0 73px} .scrow .why span{font-size:var(--fs-note); color:var(--text-2); line-height:1.5} .scnote{margin-top:10px; padding-top:8px; border-top:1px solid var(--line-2); font-size:var(--fs-note); color:var(--text-3); line-height:1.6} /* ── 同行对比 ─────────────────────────────── */ .peerhead{display:flex; align-items:baseline; gap:9px; padding:9px 11px 7px; border-bottom:1px solid var(--line)} .peerhead .t{font-size:var(--fs-title); font-weight:600; color:var(--text)} .peerhead .x{font-size:var(--fs-note); color:var(--text-3)} /* 行业排名条：这只票在整个行业里第几，一眼看出强弱 */ .peerrank{display:flex; flex-wrap:wrap; gap:7px 16px; padding:9px 11px; border-bottom:1px solid var(--line-2)} .pk{display:flex; align-items:baseline; gap:5px} .pk i{font-style:normal; font-size:var(--fs-note); color:var(--text-3)} .pk b{font-family:var(--mono); font-size:var(--fs-base); font-weight:600; color:var(--text)} .pk s{text-decoration:none; font-size:var(--fs-note); color:var(--text-3)} /* 本股整行高亮 —— 表里十几只票，得让人一眼找到自己看的那只 */ tr.me{background:var(--gold-bg)} tr.me td{border-top:1px solid var(--gold); border-bottom:1px solid var(--gold)} .mytag{margin-left:5px; padding:0 4px; background:var(--gold); color:var(--bg); font-size:var(--fs-note); border-radius:2px; font-weight:600} /* ── 交叉发现 ─────────────────────────────── */ .crwrap{padding:10px 12px} .crhead{display:flex; align-items:baseline; gap:9px; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:2px} .crhead .t{font-size:var(--fs-title); font-weight:600; color:var(--text)} .crhead .x{font-size:var(--fs-note); color:var(--text-3)} /* 一条发现 = 一个结论 + 它用到了哪些数据源。左边色条区分风险/利好/提示， 跟诊断意见里那三条建议用同一套视觉语言（左侧色条），不另造轮子。 */ .cr{padding:9px 0 9px 10px; border-bottom:1px solid var(--line-2); position:relative} .cr:last-of-type{border-bottom:0} .cr::before{content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px} .cr.w::before{background:var(--up)} .cr.g::before{background:var(--dn)} .cr.i::before{background:var(--gold)} .cr .h{display:flex; align-items:baseline; gap:7px; margin-bottom:3px} .cr .h b{font-size:var(--fs-base); font-weight:600; color:var(--text)} .cr .tg{font-size:var(--fs-note); padding:1px 5px; border-radius:2px; flex:none} .cr.w .tg{background:var(--up-bg); color:var(--up)} .cr.g .tg{background:var(--dn-bg); color:var(--dn)} .cr.i .tg{background:var(--gold-bg); color:var(--gold)} .cr .src2{font-size:var(--fs-note); color:var(--text-3); font-family:var(--mono); flex:none} .cr .b{font-size:var(--fs-base); line-height:1.7; color:var(--text-2)} /* ── 诊断意见：结论先行 ───────────────────────── 3 秒看到结论 → 10 秒看完操作 → 想深究再展开推理。 调研同花顺：它首屏只放 100 字摘要，但那段是模板拼的废话； 我们这 23 字是真有信息量的，值得放在最显眼的位置。 */ .verdict{padding:10px 11px 11px; border-left:3px solid var(--text-3); margin-bottom:10px; background:var(--bg)} .verdict.sell{border-left-color:var(--dn); background:var(--dn-bg)} .verdict.buy{border-left-color:var(--up); background:var(--up-bg)} .verdict.hold{border-left-color:var(--gold); background:var(--gold-bg)} .verdict .sg{font-size:var(--fs-note); font-weight:600; padding:1px 6px; border-radius:2px; background:var(--panel); margin-right:6px} .verdict.sell .sg{color:var(--dn)} .verdict.buy .sg{color:var(--up)} .verdict.hold .sg{color:var(--gold)} .verdict .ts{font-size:var(--fs-note); color:var(--text-3)} .verdict b{display:block; margin-top:6px; font-size:var(--fs-lead); font-weight:600; line-height:1.5; color:var(--text)} /* 操作条：编号 + 一句话，每条都能直接照着做 */ .acts{margin-bottom:10px} /* 🔴 必须显式关掉 ::before：上面 .diag .a::before 那条画左侧色条的规则 会匹配到这里的 .acts .a（同名 class 泄漏），3px 的色条压在编号数字上， 截图里「1/2/3」被一根橙条盖住看不清。同名 class 在不同容器里复用时， 继承过来的伪元素必须显式清掉，不能指望选择器不撞。 */ .acts .a{display:flex; gap:8px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line-2); position:static} .acts .a::before{content:none; display:none} .acts .a:last-child{border-bottom:0} .acts .a i{font-style:normal; font-family:var(--mono); font-size:var(--fs-note); color:var(--gold); font-weight:700; flex:none; width:13px} .acts .a span{font-size:var(--fs-base); line-height:1.6; color:var(--text)} /* 🔴 这段分析【不能折叠】。 我一度为了「结论先行」把它收起来，用户当场指出：说人话的分析才是这个产品的门面。 对比同花顺诊股的原文——「该公司的经营状况良好，但存在风险，建议投资者注意风险控制」 ——那是正确的废话；我们这段是「主力在跑散户在接，户数增加27%，机构调研完却不买」， 有具体数字、有因果、能让人自己判断认不认同。把它藏起来等于把优势藏起来。 顺序按「结论 → 为什么 → 怎么做」：扫一眼看结论，读一段看理由，看三条知道动作。 */ .reason{font-size:var(--fs-base); line-height:1.85; color:var(--text); padding:2px 0 11px; border-bottom:1px solid var(--line-2); margin-bottom:9px} /* 🔴 弱化【绝不能用 opacity】：.stance.alt 原来写 opacity:.5， 把本来 4.78 的对比度直接砍到 2.10 —— 用户的原话是「看都看不到」。 opacity 是等比例削弱前景和背景的差，属于对比度杀手。 要弱化就换一档明确定义过、量过对比度的颜色（--text-3 = 4.78）， 层次照样拉得开，而且任何背景上都还读得清。 */ .stance.alt{color:var(--text-3)} /* 🔴 这行是「另一种情形该怎么办」的原话，不能截断。 原来写 nowrap+ellipsis，1280px 下「空仓别急，等站稳1274或跌到1240附近再考虑」 被裁掉后半句 —— 用户看到的是半条建议，比不显示更糟。装不下就换行。 */ .stance.alt span{color:var(--text-3); flex:1; min-width:0; white-space:normal; overflow-wrap:anywhere} .stance.alt b{opacity:1} /* ── 历次诊断时间线 ───────────────────────── 放在诊断意见的时间戳那一行下面，默认收起。 给的是事实不是战绩：那天说了什么、之后价格怎么走，让人自己判断。 */ .meta .hisT{margin-left:auto; color:var(--text-3); cursor:pointer; border-bottom:1px dashed var(--line)} .meta .hisT:hover{color:var(--text-2)} .histl{margin-top:8px; border-top:1px solid var(--line-2); padding-top:7px} .histl .hh{display:flex; align-items:baseline; gap:8px; font-size:var(--fs-note); color:var(--text-2); margin-bottom:5px} .histl .hh .x{margin-left:auto; color:var(--text-3)} .hrow{display:grid; grid-template-columns:42px 1fr 56px; align-items:center; gap:6px; padding:3px 0; font-size:var(--fs-note); border-bottom:1px solid var(--line-2)} .hrow:last-of-type{border-bottom:none} .hrow .d{color:var(--text-3); font-family:var(--mono)} .hrow .a{color:var(--text-2)} /* 历次诊断行里的综合评分：跟顶栏同一个五维精算分（不是模型的情绪分）。 不新开一列，塞在「建议」那一格前面 —— 定宽右对齐才不会因为位数不同而参差。 */ .hrow .hs{display:inline-block; min-width:20px; text-align:right; margin-right:5px; font-family:var(--mono); font-weight:600; color:var(--text-2)} .hrow .hd{font-style:normal; font-family:var(--mono); font-size:var(--fs-note); margin-right:5px} .hrow .hd.up{color:var(--up)} .hrow .hd.dn{color:var(--dn)} .hrow .a.dn{color:var(--dn)} .hrow .a.up{color:var(--up)} /* 结论翻面（上次看多这次看空，或反过来）—— 不抢建议本身的颜色，只做个轻标注。 字号继承父级（JS/CSS 里都不许写死字号，见字号单一真值源关卡）。 */ .hrow .hfl{font-style:normal; margin-left:5px; padding:0 4px; border-radius:3px; color:var(--gold); border:1px solid var(--gold); opacity:.75; white-space:nowrap} .hrow .c{font-family:var(--mono); text-align:right; font-weight:500} /* 当时说看空后来真跌了（或说看多后来真涨了）左边点一下，只是标记不打分 */ .hrow.hit .d::before{content:'·'; color:var(--gold); margin-right:2px} .histl .hn{margin-top:6px; font-size:var(--fs-note); color:var(--text-3); line-height:1.6} /* ── 出厂质检拦下时的警示条 ───────────────── 放在诊断正文【上面】。原来只在页面最底部状态栏写一行小灰字「出厂质检 已拦下」， 而被判定为「等于让你追高」的那个价位，照样加粗排在正文第一行。 */ .qcbar{border:1px solid var(--up); background:var(--up-bg); padding:8px 10px; margin-bottom:10px} .qcbar b{display:block; color:var(--up); font-size:var(--fs-base); font-weight:600; margin-bottom:4px} .qcbar .i{color:var(--text); font-size:var(--fs-base); line-height:1.7} .qcbar .i::before{content:'·'; color:var(--up); margin-right:5px} .qcbar .n{margin-top:5px; color:var(--text-3); font-size:var(--fs-note); line-height:1.65} /* 状态栏里的数据新鲜度标记：过期红、慢一点黄。 「已补 N 天」是本地仓落后时临时补拉的天数 —— 补没补过以前界面上完全看不出来。 */ .fx-bad{color:var(--up)} .fx-warn{color:var(--warn)} .fx-n{margin-left:6px; font-size:var(--fs-note)} /* ── 仓位打法：买多少 / 怎么买 / 怎么防 ───────── 上面的「行动」说的是价位，这三条说的是仓位和节奏，正文里没有。 */ .plan{margin-top:9px; border-top:1px solid var(--line-2); padding-top:8px} .plan .p{display:flex; gap:8px; align-items:baseline; padding:4px 0; font-size:var(--fs-base); line-height:1.7} .plan .p i{flex:none; width:44px; color:var(--text-3); font-size:var(--fs-note); font-style:normal} .plan .p span{color:var(--text); flex:1; min-width:0} /* 交叉结论的数据日期标注（2026-09-12 加）—— 只加一行小字，不动既有布局。 */ .cr .crasof { margin-top: 6px; font-size: 11px; color: var(--text-3); line-height: 1.5; } .cr .crasof .crold { color: var(--warn, #d08700); } /* 左栏评分：存库没有、用实时精算补上的那个分，加一点虚线下划线区分来源 （hover 有文字说明）。不改颜色不改字号，只是一个"这个数来源不同"的提示。 */ .lrow .s.live { border-bottom: 1px dotted currentColor; } /* （2026-09-12 记：曾有报告说状态栏「数据日期」两项文字粘连成「2026-09-112 个源已过期」， 核实是误报 —— 那是读 innerText 的结果，真实渲染有 .fx-n 的 6px 间距、颜色也不同 （日期白字 / 过期提示红字），截图确认过。这里不需要额外样式。） */ /* 🔴🔴 2026-09-12：canvas 必须被 CSS 锁死显示尺寸，否则在 Retina 上会自我放大直到崩溃。 机制：drawChart 里 `cv.width = clientWidth * dpr`（dpr=2）设的是【绘制缓冲区】尺寸， 而 canvas 元素若没有 CSS 尺寸，它的显示尺寸就等于这个属性值 —— 于是 显示宽变成 2 倍 → 下次读 clientWidth 读到 2 倍 → 属性变 4 倍 → 每次重绘翻一倍， 几次之后画布撑爆整页、渲染失败变成一张破图。 用户实证：点一次左栏历史记录，K 线就放大一次，直到崩。 （这是潜在已久的坑，被今天新增的几次重绘调用触发得更快。） 锁死 width/height 为 100% 后，clientWidth 永远由容器决定，跟属性无关。 */ #cv { display: block; } /* 显示尺寸由 drawChart 写 style 控制，见 app.js 的说明 */ /* 版本更新提示条（2026-09-12 加）—— 页面资源变了但用户还开着旧版时出现。固定在顶部中间，点一下刷新。 */ #verTip{position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:99; background:var(--gold-bg,#3a2f0b); color:var(--gold,#e6b422); cursor:pointer; padding:6px 14px; border-radius:6px; font-size:13px; border:1px solid var(--gold,#e6b422); box-shadow:0 2px 12px rgba(0,0,0,.5)} #verTip b{margin-left:4px; text-decoration:underline} /* 🔴 左栏窄于 300px 时收掉「60分前」那一列，把空间让给股名。 判据是【容器宽度】不是屏幕宽度：用户把左栏拖宽到 300px 以上， 时间列自动回来。这样两种信息都不丢，只是按空间排优先级。 */ @container sidecol (max-width: 299px){ #sideList .lrow{grid-template-columns:minmax(88px,1fr) 48px 24px 16px} #sideList .lrow .ago{display:none} } /* 🔴 2026-09-12 顶栏指标格分级让位。判据是屏幕宽度（容器查询会让 #tick 塌成 0， 见上方注释），阈值按实测顶栏可用宽度反推： 1440×900 顶栏只剩 657px → 「换手」右边缘超出裁剪线 3px，被切成「换」「0.」 1000×825 顶栏只剩 217px → 「结论」超 11px、「均线」超 89px 半个数字比没有更容易看错，所以宁可整格不显示。 被砍掉的在「技术指标」页里都有，一个信息都不丢。 */ @media (max-width:1500px){ #tick .kvp.p3{display:none} /* 换手 —— 最次要，先让 */ } @media (max-width:1100px){ #tick .kvp.p1{display:none} /* 均线 —— 顶栏只剩 217px 时也留不住 */ #tick .grid{gap:12px} /* 格间距收紧 */ #tick{gap:10px; margin-left:8px} /* 组间距和左边距一起收 */ /* 「结论」是这条栏上仅次于价格的信息，不砍它 —— 收紧徽章内边距把它挤回可视区。 实测 1000×825 下顶栏只剩 225px，装「评分+结论」正好差三十来个像素。 */ /* 🔴 收紧之后「结论」仍超出 23px —— 顶栏在 1000×825 下只剩 227px， 装完股名/代码/现价/涨跌/评分就没地方了。按同一条原则处理： **半个词比没有更容易看错**，所以整格不显示，不显示半个「观望」。 结论在右栏诊断意见的第一句就有，信息不丢。 */ /* 顶栏在 1000×825 下只剩 227px，而股名+代码+现价+涨跌本身就要 220px —— 指标格一个都留不住（评分留着也超 4px，切掉边框一样难看）。 全砍，只保这四样：它们是这条栏的本职。 评分在左栏「最近诊断」每一行都有，结论在右栏第一句就有。 */ #tick .grid{display:none} #tick .kvp b.adv{padding:0 4px} #tick .kvp i{font-size:10px} #tick .idg{gap:6px} #tick .pxline{gap:5px} } /* 行业今日走势（同行页）—— 跟 .peerrank 同一套视觉，只是多一条结论 */ .peertrend{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:7px 11px; border-bottom:1px solid var(--line-2); font-size:var(--fs-base)} .peertrend .u{display:inline-flex; align-items:baseline; gap:5px} .peertrend .u i{font-style:normal; color:var(--text-3); font-size:var(--fs-note)} .peertrend .u b{font-weight:600; font-variant-numeric:tabular-nums} .peertrend .u b.up{color:var(--up)} .peertrend .u b.dn{color:var(--dn)} .peertrend .u s{text-decoration:none; color:var(--text-3); font-size:var(--fs-note)} .peertrend .v{margin-left:auto} .peertrend .v b.up{color:var(--up)} .peertrend .v b.dn{color:var(--dn)} /* 键盘快捷键说明（按 ? 弹出，再按 ? 或点一下关掉）—— 不常驻，不占版面 */ #keyTip{position:fixed; right:18px; bottom:34px; z-index:60; cursor:pointer; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:10px 13px; box-shadow:0 6px 22px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:4px; font-size:var(--fs-note); color:var(--text-2)} #keyTip b{color:var(--text); font-size:var(--fs-base); margin-bottom:3px} /* 页面内提示（替代 alert）—— 不阻塞、3 秒自动消失、点一下也能关 */ #toast{position:fixed; left:50%; bottom:46px; transform:translateX(-50%); z-index:70; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:4px; padding:9px 15px; cursor:pointer; max-width:min(520px,86vw); box-shadow:0 6px 22px rgba(0,0,0,.35); color:var(--text); font-size:var(--fs-base)} #toast.err{border-left-color:var(--dn)} /* ═══ 打印 / 存 PDF（Cmd+P）════════════════════════════════════════════ 🔴 2026-09-13 加。交付给客户的是一份【诊断书】，用户会想存下来或打印出来 —— 而这一页是三栏 + 固定顶栏 + 固定状态栏的工作台布局，直接打印会把 输入框、页签条、拖动手柄、左栏列表一起印上去，正文被挤成一条。 这一段只在打印时生效，屏幕上的显示【一个像素都不变】。 规则： · 只留诊断意见 / 关键价位 / 情景推演 + 当前打开的那个数据页签 · 去掉所有交互件（输入框、按钮、拖动手柄、滚动条、页签条） · 深色背景一律转白底黑字（否则打印机会糊掉一整页油墨） · 表格不许跨页断行 */ @media print { @page { margin: 12mm 10mm; } html, body, #app { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; } #app { display: block !important; grid-template-columns: none !important; } /* 交互件一律不印 */ #bar, #st, #side, #gutL, #gutR, .tabs, #theme, #refresh, #go, #code, #barCost, #barQty, .sp-s, .gut { display: none !important; } /* 三个主区改成顺序排下来，各自完整展开 */ #main, #aside { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; overflow: visible !important; border: 0 !important; background: #fff !important; } #aside { margin-top: 6mm; } .pane, .sec, .pb, #tabbody, #diagBody, #priceBody, #scBody { height: auto !important; max-height: none !important; overflow: visible !important; background: #fff !important; } /* 深色配色转白底 —— 打印机不该喷一整页底色 */ .scrow, .lrow, table, thead, tbody, tr, td, th, .peertrend, .kvg, .i, .empty { background: #fff !important; color: #000 !important; box-shadow: none !important; } .up { color: #b4231f !important; } /* A 股红涨 */ .dn { color: #0a7a3f !important; } /* 绿跌 */ .warn { color: #8a5a00 !important; } a { color: #000 !important; text-decoration: none !important; } /* 不许把一张表 / 一条结论从中间劈开 */ table, .scrow, .sec { break-inside: avoid; page-break-inside: avoid; } .ph { break-after: avoid; page-break-after: avoid; } /* 图表按当前宽度铺满，别溢出纸张 */ canvas, svg, img { max-width: 100% !important; height: auto !important; } } /* ST / *ST 风险徽章（2026-09-13）—— A 股最高风险标记，顶栏一眼可见 */ .strisk{margin-left:6px; padding:1px 5px; border-radius:3px; font-size:var(--fs-note); line-height:1.5; white-space:nowrap; cursor:help; background:var(--gold-bg); color:var(--gold); border:1px solid transparent} .strisk.sev{background:var(--up-bg); color:var(--up); border-color:currentColor; font-weight:600} /* 🔴 2026-09-13：顶栏「最后成交 MM/DD」——只在最新交易日没有成交时出现（停牌 / 长期无成交）。不用红色：它不是风险等级，是一条事实说明，跟 ST 那两个徽章 （真·风险警示）在视觉上必须分得开，否则用户会以为又多了一种风险标记。 */ .nmline .nodeal{ margin-left:6px; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:600; line-height:1.6; white-space:nowrap; color:var(--label-2); background:var(--fill-2); border:1px solid var(--sep); cursor:help; }