/* 配色对齐 Finviz 深色主题（站主 2026-08-17：「他的色号更亮更清爽， 我希望我们所有的颜色都跟他一致」）。只对齐色值，代码/版式/品牌均为自建。 下面每个值都是**在 finviz.com 上实测的计算色**（不是肉眼估的，也不是 从截图取的 —— 截图会被压缩改色）：遍历 DOM 取 getComputedStyle， 按面积/字数统计出各角色的主色。原始归属记在注释里，将来要核对能对得上。 与我们原来那套墨蓝（--bg:#0f0f17）的差别就是站主说的两点：整体**更亮** （#0f0f17 → #1d2028），且色相从紫偏蓝灰，于是更**清爽**。 */ :root{ --bg:#1d2028; /* Finviz 斑马纹底：#22262f 叠 rgba(1,0,0,.15) 的实算值 */ --panel:#22262f; /* Finviz 全站主色（419 个容器都用它）*/ --panel2:#363a46; /* Finviz table.header —— 我们拿来做输入框底与悬停 */ --panel3:#4c5261; /* Finviz table.navbar */ --line:#353945; /* Finviz 细线（全站 78 处）*/ --line2:#4c5263; /* Finviz 强线 / 输入框边框（47 处）*/ /* 站主 2026-08-17：「他们的白色比我们的更白」。量下来他是对的，但差别不在 白的色号上 —— Finviz 的**表格数据也是 #f3f3f5**，和我们原来一样； 差在**用量**：他整页 17 万字里只有 535 个字用次级灰(只给表头)， 其余全是 #ffffff / #f3f3f5；我们首页有一多半的字是次级灰。 所以主文字提到纯白（= Finviz 导航与标题的色），导航链接也一并放白。 */ --fg:#ffffff; --muted:#c3c6d0; --faint:#868ea5; --link:#57aefb; /* Finviz 链接与股票代码 */ /* A股红涨绿跌：--up=涨=红，--down=跌=绿（与欧美相反，务必别做反）。 ⚠ 色值取自 Finviz，但**角色是反的**：他那边绿=涨、红=跌， 所以他的红(#fd8487)是特意调淡的「弱色」。搬到 A 股后落在「涨」上， 涨会比跌淡一档。站主 2026-08-17 要求色号一致，照办； 若日后觉得涨该更抢眼，只需把这两个值对调强弱，其余不用动。 */ --up:#fd8487; --down:#34c062; --accent:#2f91ef; /* Finviz 按钮蓝 */ /* ⚠ 这一支不是 Finviz 的色。他的暖色只有 #fc8955，而那个与「涨」的 珊瑚红 #fd8487 只差一个蓝通道（85 vs 135），12px 下读起来是同一个颜色 （站主 2026-08-17 指出「突破观察价的颜色和上涨的颜色太相近了」）。 Finviz 深色界面里**没有黄色**（翻遍首页与筛选器，唯一的黄来自第三方广告）， 所以这里自己取一支同亮度带的琥珀，与红/绿/蓝都拉得开。 */ --accent2:#fbbf24; /* PASS/FAIL 是语义色（通过/未过），与涨跌无关，保持绿=通过红=未过 */ --pass:#34c062; --fail:#fd8487; --unknown:#868ea5; --row:#22262f; --row-alt:#1d2028; --row-hover:#404553; /* Finviz dark 主题的行悬停实测值 */ --head:#363a46; /* Finviz 表头 */ --ink:#14161d; /* Finviz 最深一档（导航条）：顶栏、页脚、色块上的深字 */ /* ── K 线图专用色：**不跟 UI 调色板走** ─────────────────────────────── 站主 2026-08-17：「K线图的颜色不能改啊，改回去」。这两支是我方原来的 红涨绿跌，换 Finviz 配色时被顺手带走了 —— 那次换的是**文字**的色, 而 K 线是**填充的图形**：同一支珊瑚红当字很清爽，涂成实体阴线就成了 褪色的粉，一眼看不出强弱。所以图表色从此单开一套，UI 调色板再怎么动 都不碰它。均线色同理（MA_STYLE 在 app.js，一并复原）。 */ --k-up:#ef4d54; --k-down:#22b06a; } *{box-sizing:border-box} /* body 用 min-height 而非 height：height:100% + border-box 会把 body 钉死成一屏高， 其 padding-bottom 被关在盒内、对溢出内容无效 —— 页尾会被固定免责条压住。 */ /* iOS Safari 会对它认为「排版过窄/溢出」的块自动放大字号（text autosizing）， 实测能把提示框里的题材文字放大近一倍并撑破边框。全站关掉，字号一律听 CSS 的。 */ html{margin:0;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;min-height:100%} body{background:var(--bg);color:var(--fg); font:13px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif; -webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} /* 悬停不划线,全站一条(站主 2026-09-02:「什么都不划线,这种设计太难看了」)。 此前 a:hover 全站划线,十三处各自写一句 text-decoration:none 去压它,漏掉的整卡链接 (首页今日越线卡)一悬停满卡横线。根删了,那十三句也一起删了 —— 别再加回来。 */ /* 页面左右留白随视口走：18px（窄屏）→ 4vw → 封顶 64px。此前全站只有 18px， 桌面上内容贴着窗口两侧、看着像没排过版（站主 2026-08-16 指出「上下左右都靠边线太近」）。 顶栏与正文共用同一条 .wrap，品牌/账号位与正文左右边线始终对齐。 */ /* ── 全站页宽:三档,按「这一页是干什么的」分,不按页名分 ───────────────── 站主 2026-09-12:「目前的 djyyhub 网站页面的宽度有好多不同的规格呢,为什么会这样」 —— 因为从来没有一处定义过「一页该有多宽」,每加一页就在当时最顺手的文件里现写一遍。 实测 1819 宽的窗口上有五种:首页 1200 / 筛选器 1600 / 交易台满宽 / 运营台 900 / 训练台满宽, 边距四种:64 / 72 / 16 / 18。这里收成三档: 读的 --page-read 900 运营台、以后的说明页。一行太长就读不下去。 看的 --page-grid 1600 首页、筛选器、环境风向、个股详情。卡片网格太宽会散。 操作的 不封顶 交易台、训练台。宽度全给表格和 K 线。 边距同理两档:读/看用 --gutter(和顶栏同一个值,所以 1600 以内顶栏与正文天然对齐), 操作用 --gutter-app(小,因为那两页要宽度)。 ⚠ **--gutter 只给「不封顶」的盒子用**(顶栏、操作档)。封顶又居中的盒子(读的那一档) 不能拿它当左右内边距 —— 盒子从 900 就不再变宽,而 clamp 里的 4vw 会一直长到窗口 1800, 于是窗口越拉宽正文反而越窄(2026-09-12 实测:1819 时只剩 756,比改动前的 868 还少 112)。 那种盒子用一个小常数就够:居中之后两侧本来就有大片留白,内边距只在窗口窄到撑不下时才起作用。 ⚠ **同一份定义在 web/sitebar.js 里还有一处**(子页面不加载 styles.css)。改一边必须改另一边。 */ :root{--gutter:clamp(20px,4vw,72px);--gutter-app:18px;--page-read:900px;--page-grid:1600px} .wrap{max-width:var(--page-grid);margin:0 auto;padding:0 var(--gutter)} /* 正文上下也留出呼吸：顶部与顶栏之间、底部与固定免责条之间各留一段， 不让第一块内容顶着顶栏、最后一块压在免责条上。 */ main.wrap{padding-top:18px;padding-bottom:44px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace} /* 顶栏 */ header.top{background:var(--ink);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} /* 2026-09-07 站主:「顶部的这个条固定住」*/ /* ⚠ 顶栏**不跟正文共用宽度**,它贴着窗口走 —— 这是 2026-09-12 站主定的: 「顶栏我觉得要固定,否则每次换个页面就跳。我都点不到。」 实测 1819 宽的窗口:主站的「训练台」在 520~586,子页面(交易台/运营台/训练台, 顶栏由 sitebar.js 画)在 423~489,每个链接横向差 95px —— 从主站那个位置点过去 是空白,点回来会点到「收藏」。根子是两份实现:主站这条被 .wrap 的 max-width:1600 居中收口,sitebar 那条 2026-09-08 为了挡宿主样式泄漏写死了 max-width:none。 统一成**贴边**那一种:数值与 sitebar.js 逐条相同(高 50 / gap 16 / padding clamp(20,4vw,72)), 两边改一处必须改另一处。 代价说明白:这部分**取代**了上面那段 2026-08-16 的「顶栏与正文共用同一条 .wrap, 品牌/账号位与正文左右边线始终对齐」—— 窗口 ≤1600 时两者仍然对齐(max-width 没到, 两条 clamp 在 4vw 区间取同一个值);只有超过 1600、正文被居中收口之后, 顶栏才会比正文宽。那一档上顶栏是「窗口的边框」,正文是「居中的内容」。 */ .top .wrap{display:flex;align-items:center;gap:16px;height:50px; max-width:none;margin:0;padding:0 var(--gutter)} /* 站标(2026-09-07 站主:「/auth/admin 那个 logo 最好看,全站都改成这个」):纯文字,DJYY 白、趋势 链接蓝, 与 djyyauth pages.py 的 .brand 同一组数值(19px / 800 / -.3px / gap .28em),不再画那个折线图标。 */ .brand{display:inline-flex;align-items:center;text-decoration:none;flex:none;line-height:1.2} .brand b{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.3px;white-space:nowrap;display:inline-flex;gap:.28em} .brand b span{color:var(--link)} .grow{flex:1} .nav{display:flex;gap:2px;margin-left:10px;flex:none} /* 中文短标签禁止字符级断行（窄屏下「首页」被拆成两行的根因） */ .nav a{color:var(--fg);padding:6px 13px;font-size:13.5px;font-weight:600; border-bottom:2px solid transparent;white-space:nowrap;flex:none} .nav a:hover{color:var(--fg)} .nav a.on{color:#fff;border-bottom-color:var(--link)} /* 顶栏账号位：一个按钮 + 下拉菜单。平铺「用户名 管理 退出」在窄屏必溢出。 */ .acct{position:relative;flex:none;display:flex;align-items:center} .acctbtn{display:flex;align-items:center;gap:6px;background:transparent; border:1px solid var(--line2);border-radius:16px;color:var(--muted); padding:5px 11px 5px 9px;font-size:12.5px;cursor:pointer;max-width:11em} .acctbtn:hover{color:var(--fg);border-color:var(--faint)} .acctbtn .an{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acctmenu{position:absolute;right:0;top:calc(100% + 7px);z-index:60;min-width:172px; background:var(--panel);border:1px solid var(--line2);border-radius:9px; box-shadow:0 10px 28px rgba(0,0,0,.5);overflow:hidden;padding:4px} .acctmenu[hidden]{display:none} .am-who{padding:8px 11px 9px;font-size:13px;font-weight:700;color:var(--fg); border-bottom:1px solid var(--line);margin-bottom:4px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .am-who span{display:block;font-size:11.5px;font-weight:500;color:var(--faint);margin-top:2px} .acctmenu a,.acctmenu button{display:block;width:100%;text-align:left;background:transparent; border:0;color:var(--fg);font-size:13px;padding:9px 11px;border-radius:6px; cursor:pointer;white-space:nowrap;font-family:inherit} .acctmenu a:hover,.acctmenu button:hover{background:var(--panel2)} .acctmenu button#logout{color:var(--muted)} .acctmenu button#logout:hover{color:var(--up)} /* 使用期提醒条(会员系统 2026-08-19):顶栏下面一条,≤14 天出现、≤7 天加重;每天最多一次,可关。 不是 fixed:它是当天要读一眼的一句话,不该一直压着内容。 */ .expbar{background:#2b2612;border-bottom:1px solid #6b5a1c;color:var(--accent2);font-size:13px} .expbar.hot{background:#33201a;border-bottom-color:#7a3d33;color:#ffb3a8} /* 它是**全站壳**的一部分(黄条通栏铺满窗口),得跟顶栏同一条边线,不跟正文那条。 2026-09-12 顶栏改成 max-width:none 之后,这里若还继承 .wrap 的 1600 居中, >1600 的窗口上文字会比正上方的站标往里缩 (W−1600)/2 像素。 */ .expbar .wrap{display:flex;align-items:center;gap:12px;min-height:36px;padding-top:6px;padding-bottom:6px; max-width:none;margin:0;padding-left:var(--gutter);padding-right:var(--gutter)} .expbar span{flex:1;line-height:1.45} .expbar .x{flex:none;background:transparent;border:0;color:inherit;opacity:.75;font-size:18px;line-height:1; width:32px;height:32px;border-radius:6px;cursor:pointer;padding:0} .expbar .x:hover{opacity:1;background:rgba(255,255,255,.08)} .fam{font-size:12px;color:var(--muted)} .fam select{background:var(--panel2);color:var(--fg);border:1px solid var(--line2); border-radius:4px;padding:3px 6px;font-size:12px;margin-left:4px} .fam .soon{color:var(--faint);font-size:11px;margin-left:6px} .meta{color:var(--muted);font-size:12px} /* ── 首页「大盘环境」带 ────────────────────────────────────────────── 两栏 = 两个数据来源，**必须分开**：左栏全部出自沪深300 指数自身，右栏出自 全市场 5000+ 只 A 股的统计。原先八项混排，站主当场就问「这些都是沪深300 的吗， 那不能写全市场」——来源混在一起，标签写得再对也会被读错（2026-08-17）。 位置在搜索框与形态家族之间：大盘方向是看个股形态的前提，但它是背景信息， 密度和字号都压在形态卡片之下。 */ .mband{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; margin-bottom:26px} /* 两栏等高、指标贴底对齐：左栏多一条走势线，不这样右栏的指标会浮在上半截， 两边的行错开一大截（站主要的「整齐」不只是每栏内部整齐）。 */ .mband{align-items:stretch} .mband .bcol{padding:15px 20px 17px;min-width:0;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden} /* 2026-09-02 站主:「把右边这张卡放到左边这张卡的下面,沪深300热力图放在右边,和两张卡高度总和等高」 左栏两张卡叠放(行 1、行 2),右栏小热力图跨两行 —— 高度由网格给,图在里面 flex:1 撑满。 */ .mband .ixcard{grid-column:1;grid-row:1} .mband .brcard{grid-column:1;grid-row:2} .mband .heatcard{grid-column:2;grid-row:1/3;color:inherit;padding-bottom:15px} .mband .heatcard:hover{border-color:var(--line2)} .heat.mini{flex:1;height:auto;min-height:0;border-radius:8px} /* 常用指数条(东财实时):八格,手机四格两行 */ .idxhead{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);margin-bottom:8px} .idxhead em{font-style:normal;font-size:11px;color:var(--faint)} /* 站主 09-02:「把常用指数的方块做大一点,总宽度和下面的对齐」—— 撑满 .mband 同一宽度。 ⚠ 列数**必须等于指数个数**,写死 9 而实际只有 8 个(北证50 随「北交所不交易」一起清掉, 数据侧 gen_quotes.py 的 INDEXES 从 09-05 起就是 8 个),第 9 列恒空 —— 指数条的右边线比正下方那张热力图卡短一整格,正好是他当初点名要对齐的那条线。 2026-09-12 实测洞宽:1280 档 130px、1920 档 163px。 */ .idxstrip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-bottom:20px} .idxstrip .ic{display:flex;flex-direction:column;gap:4px;padding:13px 15px 12px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px} .idxstrip .ic i{font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .idxstrip .ic b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg);letter-spacing:-.2px} .idxstrip .ic em{font-style:normal;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)} .idxstrip .ic .up{color:var(--up)} .idxstrip .ic .down{color:var(--down)} .mband .bcol .bmetrics{margin-top:auto} @media (max-width:900px){ .mband{grid-template-columns:1fr;gap:16px} /* 与 famgrid 同一个断点、同一个缝 */ .mband .ixcard,.mband .brcard,.mband .heatcard{grid-column:1;grid-row:auto} .heat.mini{flex:none;height:280px} .idxstrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px} } @media (max-width:720px){ .mband .bcol{padding:13px 15px 15px} } /* 来源标题：谁算的、算了多少只，写在最前面 */ .mband .bch{margin:0 0 9px;font-size:12px;font-weight:700;color:var(--fg); display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .mband .bch em{font-style:normal;font-size:11px;font-weight:500;color:var(--faint)} .mband .bhd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .mband .bpx{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px} .mband .bchg{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} .mband .bpx{color:var(--fg)} .mband .bpx.up,.mband .bchg.up{color:var(--up)} .mband .bpx.down,.mband .bchg.down{color:var(--down)} .mband .bchg{color:var(--muted)} .mband .bchg.up{color:var(--up)} .mband .bchg.down{color:var(--down)} .mband .bsub{margin-left:auto;font-size:10.5px;color:var(--faint)} /* 走势线铺满栏宽（高度固定），不再是左边一小截 */ .mband .bspark{display:block;width:100%;height:36px;margin:5px 0 11px} /* 指标网格固定两列 —— auto-fit 会在 1200px 宽下排成 6+2 那种参差的样子（站主指出）。 两栏各两列，左右两组的行基线天然对齐。 */ .mband .bmetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 16px;min-width:0} .mband .bm{display:flex;flex-direction:column;gap:2px;min-width:0} .mband .bm i{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .mband .bm b{font-size:15px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums} /* 位置词跟在数值后面。原来写「14 分位」—— 统计术语，中文里不好懂（站主指出）， 改成「偏低 / 中等 / 偏高」这类大白话；精确的百分比留在悬停说明里。 */ .mband .bm b em,.mband .brh em{font-style:normal;font-size:11px;font-weight:600; color:var(--faint);margin-left:7px} .mband .bm b em.warn,.mband .brh em.warn{color:var(--accent2)} .mband .bm b em.hot,.mband .brh em.hot{color:var(--up)} /* 成分股那栏：一行标题+数值+位置词，下面紧跟一条近一年曲线。 站主 2026-08-17：「站上MA50 和 MA200 都做成迷你曲线，这样更直观」—— 曲线自己就说明了「现在是高还是低」，不需要任何术语。 */ .mband .brow{margin-bottom:12px;cursor:help} .mband .brow:last-of-type{margin-bottom:10px} .mband .brh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .mband .brh i{font-style:normal;font-size:11px;color:var(--muted); border-bottom:1px dotted var(--line2);padding-bottom:1px} .mband .brh b{font-size:17px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums; letter-spacing:-.3px} .mband .bspark.sm{height:26px;margin:3px 0 0} /* 广度曲线比指数线高一倍多：站主 2026-08-17「太平滑了，完全看不出什么」—— 71 个百分点的变化压在 20px 里，每个百分点 0.28px，日常波动直接消失。 56px 才装得下形状。 */ .mband .bspark.bw{height:56px;width:100%;margin:4px 0 0;display:block} @media (max-width:720px){.mband .bspark.bw{height:60px}} .mband .bmetrics.one{grid-template-columns:1fr} .mband .bm b .up{color:var(--up)} .mband .bm b .down{color:var(--down)} /* 分布日着色的档位由 app.js 的 ddTone 定：≤4 常态、5-6 琥珀、7+ 红 （M-31 按 A 股自己的分位重标定过，不是照搬美股那套 3-4/5+）。 颜色只说明落在刻度哪一档，页面上不写「警戒」这类判断词 —— 刻度说明在 hover 里。 */ .mband .bm.warn b{color:var(--accent2)} .mband .bm.bad b{color:var(--up)} .mband .bm[data-pop]{cursor:help} .mband .bm[data-pop] i{border-bottom:1px dotted var(--line2);padding-bottom:1px; display:inline-block;max-width:100%} /* ── 首页：全市场搜索 + 形态家族 ── */ /* 首页是一块居中的窄栏（1200px），不跟着 .wrap 铺到 1600： 两张家族卡片左右并排，各占一半；铺满整幅时每张卡 1400px 宽、 示意曲线被横向拉成一条扁线、三个数字隔半屏才见一个（站主：「太宽了，都变形了」）。 */ /* 首页原来在 1600 的框里又套了一层 1200,于是首页比筛选器窄一截,来回切内容会缩一下。 它和筛选器是同一档(看的),归到 --page-grid,这层多余的收口去掉。 */ .home{margin:22px 0 20px} .hsearch{position:relative;margin-bottom:36px} .hsearch .hlb{font-size:12px;color:var(--muted);font-weight:600;margin:0 0 9px 2px} .sbox{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:14px 18px;color:var(--muted)} .sbox:focus-within{border-color:var(--link);box-shadow:0 0 0 4px rgba(87,174,251,.1)} .sbox input{flex:1;background:transparent;border:0;outline:0;color:var(--fg);font-size:15px} .sbox input::placeholder{color:var(--faint)} .sugg{position:absolute;left:0;right:0;top:100%;margin-top:8px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;overflow:hidden;z-index:20;display:none;box-shadow:0 12px 30px rgba(0,0,0,.4)} .sugg.show{display:block} .srow{display:flex;align-items:center;gap:12px;padding:10px 15px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg)} .srow:last-child{border-bottom:0} .srow:hover{background:var(--panel2)} .srow .tk{color:var(--link);font-weight:700;font-family:ui-monospace,Menlo,monospace;min-width:90px} .srow .nm{font-weight:600} .srow .ind{color:var(--muted);font-size:12px} .srow .sb2{margin-left:auto;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:10px} .srow .sb2.cup{background:#7c51e733;color:#a98bff} .srow .sb2.plain{background:var(--panel3);color:var(--muted)} .famsec .kick{font-size:10.5px;letter-spacing:2px;color:var(--down);text-transform:uppercase;font-weight:700} .famsec .fhd{display:flex;align-items:center;gap:12px;margin:5px 0 18px} .famsec .fhd h2{margin:0;font-size:20px;font-weight:800;color:#fff} /* 新鲜度三态。绿=按时更新过；琥珀=过了该更新的点还没换包；灰=拿不到判据（不装作没事）。 ⚠ 这里的绿不是装饰：它由 health.json 的 stale_after 决定，引擎停了就会自己变琥珀。 */ .famsec .health{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px} .famsec .health i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)} .famsec .health.ok i{background:var(--down);box-shadow:0 0 0 3px rgba(52,192,98,.18)} .famsec .health.stale{color:var(--accent2);font-weight:600} .famsec .health.stale i{background:var(--accent2);box-shadow:0 0 0 3px rgba(251,191,36,.18)} .famsec .health.warn{color:var(--accent2)} .famsec .health.warn i{background:var(--accent2);box-shadow:0 0 0 3px rgba(251,191,36,.18)} /* 两张家族卡片并排；≤900px（平板竖屏/手机）退成一列。 卡片自身不设宽度，全靠栅格分配，将来加第三个家族只是多一格。 */ /* auto-fit 而不是写死两列：只剩一个家族在册时（某家族被下架、或池子空了）， 写死两列会让那张卡缩在左半边、右边空掉一大片（1440 下实测空 610px）。 auto-fit 在只有一张时让它铺满，两张时并排，将来第三个家族自动换行。 */ /* ⚠ 这里**不能用 auto-fit**。家族卡是固定的 4 张,auto-fit 会按窗口宽度自己决定列数, 一旦算成 3 列就是 3 + 1,右边空出两格(站主 2026-09-12 截图指出)。 2026-09-12 之前没暴露,是因为首页外面还套着一层 max-width:1200 —— 1200 宽下 (1200+20)/(420+20)=2.77 恰好落进 2 列。那天把首页归到「看的」那一档(1600)之后, 1536 的窗口算出 3 列,洞就出来了。**这是我那次改动带出来的,不是老账。** 固定 4 张卡就该固定列数:桌面 2 列(4 张 = 2×2),窄屏 1 列。 事件卡靠 grid-column:1/-1 横跨,固定列数下照样成立。 */ .famgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch} @media (max-width:900px){.famgrid{grid-template-columns:1fr;gap:16px}} .famcard2{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer; display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s} .famcard2:hover{border-color:var(--line2);box-shadow:0 8px 28px rgba(0,0,0,.28)} .famcard2 .fch{display:flex;align-items:center;gap:13px;padding:18px 22px 6px} .famcard2 .fno{font-family:ui-monospace,Menlo,monospace;color:var(--faint);font-size:13px;font-weight:700} .famcard2 .fch h3{margin:0;font-size:19px;font-weight:800;color:#fff} .famcard2 .run{margin-left:auto;font-size:11px;font-weight:700;color:var(--down);background:rgba(52,192,98,.14);border:1px solid rgba(52,192,98,.32);border-radius:12px;padding:3px 12px} .famcard2 .run.bad{color:var(--accent2);background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.34)} /* 示意曲线按 viewBox 等比缩放（宽度定高度），绝不 preserveAspectRatio="none" 拉伸—— 那正是曲线在宽屏上被拉扁的原因。封顶高度只在单列极宽（平板横放）时起作用。 */ .famcard2 .fplot{padding:2px 14px 0;flex:1;display:flex;align-items:flex-end} /* ⚠ max-height 一旦顶到,svg 不是收窄盒子,而是按 meet 把画面缩小居中 —— 盒子两边留白, 而底下那行刻度(.evax)是按盒子整宽排的,于是刻度和曲线对不上。 卡片最宽出现在「看的」那一档封顶时:1600 − 2×72 = 1456,两列减去 20 的缝 → 718, 图区 718 − 2×22(padding) = 674,自然高 674×170/600 = 191 —— 正好压线。 2026-09-12 站主把首页从 1200 放宽之后就够得着了(改前卡片恒 590、自然高 159,永远碰不到)。 抬到 210 留出余量:--page-grid 不变的话卡片再宽不过 718,这条就不会再被顶到。 */ .famcard2 .fplot svg{width:100%;height:auto;max-height:210px;display:block} .fstats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} /* 三格全部可点（各自带条件进筛选器），可点就必须**看得出**可点： 手型 + 悬停变底。此前只有 .hot 那格有反馈，另外两格绑了点击却像死的。 */ /* 三个格子是真 （Tab 可达、能中键在新标签打开），但要长得像格子不像链接： 去掉下划线、颜色不继承链接蓝，内部三行改回块级堆叠。 */ .fstats .fs{display:block;color:inherit;text-decoration:none; padding:15px 22px 16px;border-right:1px solid var(--line);min-width:0; cursor:pointer;transition:background .12s} .fstats .fs .l,.fstats .fs .n,.fstats .fs .sub{display:block} .fstats .fs:focus-visible{outline:2px solid var(--link);outline-offset:-2px} .fstats .fs:hover{background:var(--panel2)} .fstats .fs:hover .sub{color:var(--link)} .fstats .fs:last-child{border-right:0} .fstats .fs .l{font-size:12px;color:var(--muted)} .fstats .fs .n{font-size:30px;font-weight:800;color:#fff;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums} .fstats .fs .sub{font-size:11.5px;color:var(--faint);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 可点的统计格（点进筛选器看具体标的） */ .fstats .fs.a .n{color:var(--up)} .fstats .fs.c .n{color:var(--link)} /* 页脚一行：统计串 + 入口。卡片变窄（并排/手机）时统计串在自己的盒子里折行， 入口链接始终停在右侧同一行，不掉到下一行去孤零零地占一整行。 */ .ffoot{display:flex;align-items:center;gap:8px 16px;padding:13px 22px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} /* keep-all：只在空格/「·」处折行，不把「今日新成形」这种词从中间掰开 */ .ffoot .mono{flex:1 1 auto;min-width:0;line-height:1.55;word-break:keep-all} .ffoot .go{margin-left:auto;flex:none;color:var(--link);font-weight:700;white-space:nowrap;text-decoration:none} .ffoot .go:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:3px} @media (max-width:560px){ .famcard2 .fch{padding:15px 16px 4px} .famcard2 .fplot{padding:0 10px} .fstats .fs{padding:12px 14px 13px} .fstats .fs .n{font-size:25px} .fstats .fs .sub{white-space:normal;line-height:1.4;word-break:keep-all} .ffoot{padding:11px 16px} } /* 非候选轻量页提示 */ .quotenote{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:10px 14px;color:var(--muted);font-size:12.5px;margin:2px 0 14px;line-height:1.6} /* 首页仪表盘 */ .dash{display:flex;flex-direction:column;gap:14px;margin:14px 0} .dhead{display:flex;align-items:center;gap:8px;margin:2px 0} .dhead h3{margin:0;font-size:13px;font-weight:700;color:var(--fg)} .dhead .more{margin-left:auto;font-size:12px} .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media (max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}} .tile{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px} .tile .n{font-size:26px;font-weight:800;color:#fff;line-height:1.1} .tile .l{color:var(--muted);font-size:12px;margin-top:3px} .tile .n.up{color:var(--up)} .tile .n.down{color:var(--down)} .breadth{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px} .bar{display:flex;height:26px;border-radius:4px;overflow:hidden;margin-bottom:9px} .bar span{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink);font-weight:700;min-width:0} .blegend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)} .blegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle} .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media (max-width:900px){.cols4{grid-template-columns:repeat(2,1fr)}} .mini{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden} .mini h4{margin:0;padding:9px 12px;font-size:12px;font-weight:700;border-bottom:1px solid var(--line); display:flex;align-items:center;gap:6px} .mini h4 .d{width:8px;height:8px;border-radius:50%} .mini table{width:100%;border-collapse:collapse;font-size:12px} .mini td{padding:5px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .mini tr:last-child td{border-bottom:0} .mini tr:hover{background:var(--row-hover);cursor:pointer} .mini .tk{color:var(--link);font-weight:700} .mini .empty2{padding:16px 12px;color:var(--faint);font-size:12px;text-align:center} /* 等宽栅格：每格同宽、跨行对齐，避免 flex 按内容宽排出的歪斜 */ .heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px} .hcell{border-radius:4px;padding:8px 11px;color:#fff;min-width:0;overflow:hidden} .hcell .hi{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hcell .hn{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .famboard{display:flex;gap:10px;flex-wrap:wrap} .famcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 16px;min-width:150px} .famcard.active{border-color:var(--link)} .famcard .ft{font-weight:700;color:#fff} .famcard .fm{font-size:12px;color:var(--muted);margin-top:3px} .famcard.soon{border-style:dashed;color:var(--faint)} /* 一键筛选（预置屏，借鉴 MarketSmith） */ .presets{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:14px 0 0} .presets .plabel{color:var(--muted);font-size:12px;font-weight:700;margin-right:2px;white-space:nowrap;flex:none} .preset{border:1px solid var(--line2);background:var(--panel2);color:var(--fg); padding:5px 12px;border-radius:14px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap} .preset:hover{border-color:var(--link);color:#fff} .preset.on{background:var(--link);border-color:var(--link);color:var(--ink)} /* ══ 筛选器：左侧常驻面板 + 右侧结果（站主 2026-08-17 选的形态）══════════ 桌面左右分栏；窄屏由 IS_NARROW 走抽屉，**同一段 HTML**，不做两套。 */ .scrlayout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:20px;align-items:start; margin-top:14px} @media (max-width:1080px){.scrlayout{grid-template-columns:250px minmax(0,1fr);gap:14px}} /* 折叠：侧栏整列消失，表格吃掉全部宽度（站主：展开时列表太窄）。 切换只 toggle 这个类，不重绘列表 —— 滚动位置和排序都保持原样。 */ .scrlayout.collapsed{grid-template-columns:minmax(0,1fr);gap:0} .scrlayout.collapsed .scrside{display:none} .fptoggle{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--muted); border-radius:7px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer; margin-bottom:10px;text-align:center} .fptoggle:hover{color:var(--fg);border-color:var(--faint)} /* 展开按钮：只在折叠态出现，贴在结果区左上 */ .fpopen{display:none} .scrlayout.collapsed .fpopen{display:inline-flex;align-items:center;gap:7px; background:var(--panel2);border:1px solid var(--line2);color:var(--fg); border-radius:7px;padding:0 12px;font-size:12.5px;font-weight:600;cursor:pointer; /* 与旁边的切换条同高;行距由 .lthead 给,不用 margin-bottom —— 那会把按钮在行里顶上去 */ height:36px;box-sizing:border-box} .scrlayout.collapsed .lthead{margin-bottom:10px} .scrlayout.collapsed .fpopen:hover{border-color:var(--link);color:var(--link)} /* 折叠状态下条件数必须看得见 —— 藏起来的筛选最容易让人误判「这就是全部」 */ .fpopen i{font-style:normal;background:var(--link);color:var(--ink);border-radius:9px; min-width:17px;height:17px;padding:0 5px;font-size:10.5px;font-weight:800; display:inline-flex;align-items:center;justify-content:center} .fpopen i[hidden]{display:none} .fpopen .fpa{color:var(--muted)} /* --faint 在 --panel2 上只有 3.47,读不清 */ /* 侧栏比屏幕高时照常能滚(滚轮/触控板/键盘都行),但**不显示滚动条**。 站主 2026-08-17:「我确实不喜欢这个」—— 原先是特意做过样式的 8px 圆角条, 在一个本来就很干净的面板里,那道竖杠是全页最扎眼的东西。 代价说清楚:没有滚动条就少了「下面还有」的视觉提示。这里可接受 —— 面板底部总有一个被切掉一半的分组标题在暗示还有内容,而且分组是可折叠的。 */ .scrside{position:sticky;top:14px;max-height:calc(100vh - 90px);overflow-y:auto; overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none} .scrside::-webkit-scrollbar{width:0;height:0;display:none} .scrmain{min-width:0} /* 面板整体 */ .scrside .filters{margin:0;padding:0;background:transparent;border:0} /* 侧栏里这些内容行统一缩进 12px,与 .fgbody 同一个数 —— 让「我的方案 / 保存 / 搜索框 / 清空」和下面的筛选控件对齐在同一条竖线。 ⚠ 这两条是 .scrside 前缀的**更具体规则**,改基础的 .fsearch/.filter-foot 不起作用: 我第一次就改错了地方,量出来还是贴边 0px 才发现(2026-08-17)。 */ .scrside .fsearch{width:calc(100% - 24px);margin:0 12px 10px;box-sizing:border-box} /* 分组：常用组默认展开，其余点开。收起时若组内有生效条件，标一个数字 —— 不然条件藏在收起的组里，人会以为自己没设过（这正是「用不明白」的一种）。 */ .fgroups{display:flex;flex-direction:column;gap:6px} .fgrp{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden} .fgh{width:100%;display:flex;align-items:center;gap:8px;background:transparent;border:0; color:var(--fg);font:600 12.5px/1 inherit;padding:10px 12px;cursor:pointer;text-align:left} .fgh:hover{background:var(--panel2)} .fgn{flex:1} .fgb{font-style:normal;font-size:10.5px;font-weight:800;background:var(--link);color:var(--ink); border-radius:9px;min-width:17px;height:17px;padding:0 5px;display:inline-flex; align-items:center;justify-content:center} .fgx{color:var(--faint);font-size:14px;line-height:1;width:12px;text-align:center} .fgbody{display:none;padding:2px 12px 11px;flex-direction:column;gap:2px} .fgrp.open .fgbody{display:flex} .fgrp.open .fgh{border-bottom:1px solid var(--line)} /* 面板里的字段改成竖排：左侧只有 288px，标签和控件并排会把控件挤成一条缝 */ .scrside .fld,.drawer .fld{display:block;padding:5px 0} .scrside .fld label,.drawer .fld label{display:block;width:auto;text-align:left; margin-bottom:3px;font-size:11.5px} /* 「这一项在问什么」的入口。原来是标签底下一条点线 —— 站主 2026-08-17 逐项点名「没有解释」：说明其实一直都在（发布包的判据原文 + 手写 hint）， 只是没人看得出那里能点。换成一个看得见的 ⓘ，占位极小（页面上仍然 不长出说明段落，保持极简），但一眼知道可点，手机上也点得到。 */ .fld .fq{display:inline-flex;align-items:center;justify-content:center; width:13px;height:13px;margin-left:5px;vertical-align:1px; border:1px solid var(--line2);border-radius:50%; color:var(--faint);font-size:9px;font-style:normal;font-weight:700;line-height:1; cursor:help;user-select:none} .fld .fq:hover,.fld .fq:focus{border-color:var(--link);color:var(--link);outline:none} .scrside .fld select,.scrside .fld .numrange, .drawer .fld select,.drawer .fld .numrange{width:100%} /* 已选条件与计数 */ .scrside .chips2{padding:9px 0 0} .scrside .filter-foot{padding:9px 12px 0;border-top:1px solid var(--line);margin-top:9px} .scrside .filter-foot .meta{margin-left:8px} /* 我的方案：替代被砍掉的内置「一键筛选」 */ /* 面板内容行统一留 12px 左右内边距 —— 与 .fgbody 同一个数,让「我的方案 / 保存 / 搜索框 / 清空」和下面的筛选控件对齐在同一条竖线上。 (2026-08-17 站主:「保存这两个字直接粘在右边了」。实测当时它离面板右边 0px, 而同一面板里的筛选控件都是 13px。) .fgrp 那几条分组横杠仍然通栏 —— 它们是分隔行,内容在 .fgbody 里已经缩进过了。 */ .screenbar{margin-bottom:11px;padding:0 12px} .sbhd{display:flex;align-items:center;gap:8px;margin-bottom:7px} .sbt{font-size:11.5px;font-weight:700;color:var(--muted);flex:1} .sbsave{background:var(--panel2);border:1px solid var(--line2);color:var(--fg); border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer} .sbsave:hover{border-color:var(--link);color:var(--link)} .sblist{display:flex;flex-wrap:wrap;gap:6px} .sbi{display:inline-flex;align-items:center;gap:5px;background:var(--panel); border:1px solid var(--line2);border-radius:14px;padding:3px 4px 3px 11px; font-size:12px;cursor:pointer;max-width:100%} .sbi:hover{border-color:var(--link)} .sbi.on{background:var(--link);border-color:var(--link)} .sbi.on b,.sbi.on em{color:#fff} .sbi b{font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sbi em{font-style:normal;font-size:10.5px;color:var(--accent2)} .sbx{background:transparent;border:0;color:var(--faint);cursor:pointer;font-size:11px; padding:0 4px;line-height:1} .sbi.on .sbx{color:#ffffffaa} .sbx:hover{color:var(--fail)} .sbempty{font-size:11.5px;color:var(--faint);line-height:1.5} /* 当前条件下会筛出 0 条的选项：灰掉。它还在列表里（说明这个值存在）， 但点不了 —— 让人选一个必然空的条件只会白跑一趟。 */ .scrside select option:disabled,.drawer select option:disabled{color:var(--faint)} /* 筛选栅格（Finviz 风） */ .filters{background:var(--panel);border:1px solid var(--line);border-radius:6px;margin:10px 0 10px} .filter-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);padding:0 6px} .filter-tabs button{border:0;background:transparent;color:var(--muted);padding:8px 14px; cursor:pointer;font-size:12.5px;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px; white-space:nowrap;flex:none} .filter-tabs button.on{color:var(--link);border-bottom-color:var(--link)} .filter-tabs .grow{flex:1} .fsearch{align-self:center;background:var(--panel2);color:var(--fg);border:1px solid var(--line2); border-radius:4px;padding:4px 9px;font-size:12px;width:180px;margin:0 8px;outline:none} .fsearch:focus{border-color:var(--link)} .chips2{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px} .chips2:empty{display:none} .fchip{background:var(--panel2);border:1px solid var(--line2);border-radius:4px; padding:2px 8px;font-size:12px;color:var(--fg);cursor:pointer;white-space:nowrap} .fchip:hover{border-color:var(--down);color:var(--down)} .pager{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:12px 2px 6px;font-size:12px} .pager .prange{color:var(--muted)} .pg{min-width:28px;height:28px;padding:0 8px;border:1px solid var(--line2);background:var(--panel); color:var(--fg);border-radius:4px;cursor:pointer;font-size:12px} .pg:hover:not([disabled]):not(.on){border-color:var(--link)} .pg.on{background:var(--link);border-color:var(--link);color:var(--ink);font-weight:700} .pg[disabled]{opacity:.4;cursor:default} .pgap{padding:0 3px;color:var(--faint)} .filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 14px;padding:12px 14px} @media (max-width:900px){.filter-grid{grid-template-columns:repeat(2,1fr)}} .fld{display:flex;align-items:center;gap:8px;padding:3px 0} .fld label{color:var(--muted);font-size:12px;width:74px;text-align:right;flex:none;white-space:nowrap} .fld select,.fld input{flex:1;background:var(--panel2);color:var(--fg);border:1px solid var(--line2); border-radius:4px;padding:4px 7px;font-size:12px;outline:none;min-width:0} .fld select:focus,.fld input:focus{border-color:var(--link)} /* 自填数值筛选：价格/涨跌幅=区间(min~max)，RS/流动性=单端(≥) */ .fld .numrange{flex:1;display:flex;align-items:center;gap:6px;min-width:0} .fld .numin{flex:1;width:100%;background:var(--panel2);color:var(--fg);border:1px solid var(--line2); border-radius:4px;padding:4px 7px;font-size:12px;outline:none;min-width:0} .fld .numin:focus{border-color:var(--link)} .fld .numin.nummin{flex:none;width:88px} .fld .ndash{color:var(--faint);flex:none} /* 去掉数字输入的上下微调箭头，界面更干净 */ .fld .numin::-webkit-outer-spin-button,.fld .numin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .fld .numin[type=number]{-moz-appearance:textfield;appearance:textfield} /* 行业/题材:可搜索的多选清单(2026-09-02,换掉一百到三百多项的单选下拉)。 列表自己滚,不让它把整个筛选栏撑长 —— 手风琴一次只开一组,一组要装得下。 */ .fld .multi{display:flex;flex-direction:column;gap:5px;min-width:0} .fld .msearch{width:100%;background:var(--panel2);color:var(--fg);border:1px solid var(--line2); border-radius:4px;padding:4px 7px;font-size:12px;outline:none;min-width:0} .fld .msearch:focus{border-color:var(--link)} .fld .mlist{max-height:196px;overflow-y:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--line2);border-radius:4px;background:var(--panel2)} /* ⚠ 选择器要带 .scrside/.drawer:清单里的行**本身就是