/* ============================================================================
股东下钻层（holder-drill.css）
----------------------------------------------------------------------------
覆盖范围
1. 页面内「股东名可点」的链接态（.hd-link，用在 .sd-table 里）
2. 「全市场股东榜」入口块（.hd-entry）
3. 股东下钻模态（.hd-mask / .hd-modal 及其内部）
4. 个股详情全宽浮层（.hd-dm / .hd-dw）与 index 详情抽屉的加宽（§9，2026-09-13 新增）
职责边界
· 只提供上面四块，不触碰各页既有结构（不改 .sd-table；.sd-panel 仅在 §9 里
对 index 的 #sdPanel 抽屉加宽，因为那是详情唯一的宿主）
· 命名全部加 .hd- 前缀，避免与 style.css / bull.css / ding.css 撞车
· 令牌优先取 vi.css 的 --vi-*（三页都加载），逐项给 fallback，
因此本层不依赖 stockpage.css（后者只有 index.html 引入）
为什么是独立一层而不是并进 vi.css
vi.css 是字号层（只调字号/字重/行高），把布局与组件塞进去会破坏分层；
本文件是可整块删除的回滚单元：删掉三个 html 里的引用即恢复原状。
加载位置
在各页自身样式表与 vi.css 之后加载。
============================================================================ */
:root {
--hd-line: #e5e7eb;
--hd-line-2: #d1d5db;
--hd-sunken: #f8f9fb;
--hd-t1: #1f2937;
--hd-t2: #6b7280;
--hd-t3: #9ca3af;
--hd-brand: #2563eb;
--hd-up: #dc2626; /* 中国股市口径：增持/上涨为红 */
--hd-down: #16a34a; /* 减持/下跌为绿 */
--hd-em: #b45309; /* 东财来源标识色，与 westock 视觉区分 */
--hd-r: 6px;
--hd-ease: .16s ease;
--hd-surface: #ffffff; /* 浮层底色 */
--hd-veil: rgba(15, 23, 42, 0.42); /* 浮层遮罩 */
}
/* ==========================================================================
§1 页面内：股东名链接态
========================================================================== */
.hd-link {
color: inherit;
cursor: pointer;
border-bottom: 1px dashed transparent;
transition: color var(--hd-ease), border-color var(--hd-ease);
}
.hd-link:hover {
color: var(--hd-brand);
border-bottom-color: var(--hd-brand);
}
.hd-link::after {
content: '›';
margin-left: 3px;
color: var(--hd-t3);
font-weight: 700;
}
/* --------------------------------------------------------------------------
§1b 窄栏下「点不中」的修复（2026-09-13 实测）
--------------------------------------------------------------------------
现象
ding.html 的个股详情面板挂在 407px 宽的左栏里，而「股本股东」是 6 列表格。
中文可在任意字间断行，浏览器于是把「股东名称」列压到 39px（约 3 字宽），
长名称被排成 **逐字竖排**（如 1400px 高的名字柱）。
为什么会导致「点击没有反应」
名称是 inline 的 ，换行后：
· getBoundingClientRect() 返回的是**所有行盒的并集**（高而窄）
· 而真实命中测试用的是**逐行盒**
两者在行间空白与并集右部空白处不一致 —— 点击穿透到 | ，
holder-drill.js 的 closest('[data-hd-name]') 返回 null，于是什么也不发生。
注意 elementFromPoint() 与真实事件在此处结论相反，不能拿它当判据。
实测（真鼠标坐标点击，非 el.click()）
修复前：22 个股东名有 13 个点不中（59%）
修复后：22/22 全中
对策
名称列不逐字断行（单行 inline 的包围盒是实心矩形，命中可靠），
代价是要横向滚动 —— 宁可横滚，也不要「不可读 + 一半点击区域失效」。
-------------------------------------------------------------------------- */
.hd-link { white-space: nowrap; }
/* 含股东名的面板需要一个横向滚动边界，否则 nowrap 会把表格顶出页面。
ding/bull 的 Tab 块是普通块级容器（带 data-panel），加 overflow 无副作用；
:has() 版本额外覆盖 index.html 的 .sd-panel 抽屉。 */
.sd-panel[data-panel] { overflow: auto; }
.sd-panel:has(.hd-link) { overflow: auto; }
/* --------------------------------------------------------------------------
§1c 窄栏下「短列逐字竖排」的收口（2026-09-13 实测）
--------------------------------------------------------------------------
现象
§1b 只修了「股东名称」列。表格继续按 auto table layout 分配宽度，
于是**其余可换行列被压到 1 字宽**：
ding.html 个股详情在 ~407px 左栏，「前十大流通股东」是 7 列表，
「性质」列实测 29px，「H股托管」竖排成 4 行
→ 整行高 96px（正常约 30px），一屏只能看 10 行中的 3 行。
全表实测 20 个单元格处于竖排态。
对策
本 Tab 内所有单元格不换行。表格宽度 641 → ~690px，横向滚动增量很小
（此前名称列 nowrap 已使表格横滚），换来行高 96 → ~30px。
作用域为什么是 .hd-sh 而不是 .sd-panel:has(.hd-link)
三页实测：ding/bull 下 :has() 恰好只命中 1 个 .sd-panel（精确）；
但 index.html 的 #sdPanel 是**整抽屉容器**，同时装着「财务指标」Tab 的表，
.sd-panel:has(.hd-link) .sd-table 会连带把它也设成 nowrap
—— 那是本轮未被要求改动的 Tab，属于非预期副作用。
故由三个渲染函数显式在内容外打一层 .hd-sh，作用域由 markup 保证。
-------------------------------------------------------------------------- */
.hd-sh .sd-table th,
.hd-sh .sd-table td {
white-space: nowrap;
}
/* 表头单独再保一层：部分页面（bull.css / ding.css）的 .sd-table th 未设 nowrap，
7 列表里「变动股数 / 变动幅度 / 性质」三个表头会折成两行、把表头撑高。 */
.hd-sh .sd-table thead th {
white-space: nowrap;
}
/* ==========================================================================
§2 页面内：全市场榜入口块
========================================================================== */
.hd-entry {
margin: 18px 0 6px;
padding: 12px 14px;
border: 1px solid var(--hd-line);
border-left: 3px solid var(--hd-em);
border-radius: var(--hd-r);
background: var(--hd-sunken);
}
.hd-entry-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.hd-entry-title {
font-size: 14px;
font-weight: 600;
color: var(--hd-t1);
}
.hd-entry-note {
font-size: 12px;
line-height: 1.5;
color: var(--hd-t2);
margin-bottom: 10px;
}
.hd-entry-btns {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 来源标注：东财通道一律带此徽标，防止与 westock 口径混读 */
.hd-src {
display: inline-block;
padding: 0 6px;
border-radius: 3px;
font-size: 11px;
line-height: 16px;
font-weight: 500;
color: #fff;
background: var(--hd-em);
vertical-align: 1px;
}
.hd-src.hd-src-west {
background: var(--hd-t3);
}
/* ==========================================================================
§3 按钮
========================================================================== */
.hd-btn {
appearance: none;
border: 1px solid var(--hd-line-2);
background: #fff;
color: var(--hd-t1);
font-size: 13px;
line-height: 1;
padding: 8px 12px;
border-radius: var(--hd-r);
cursor: pointer;
transition: all var(--hd-ease);
white-space: nowrap;
}
.hd-btn:hover {
border-color: var(--hd-brand);
color: var(--hd-brand);
}
.hd-btn.hd-btn-up:hover {
border-color: var(--hd-up);
color: var(--hd-up);
}
.hd-btn.hd-btn-down:hover {
border-color: var(--hd-down);
color: var(--hd-down);
}
.hd-btn.hd-on {
border-color: var(--hd-brand);
background: var(--hd-brand);
color: #fff;
}
/* ==========================================================================
§4 模态骨架
========================================================================== */
.hd-mask {
position: fixed;
inset: 0;
z-index: 9000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(17, 24, 39, .45);
}
.hd-mask.hd-show { display: flex; }
.hd-modal {
width: min(920px, 100%);
max-height: min(78vh, 760px);
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
overflow: hidden;
}
.hd-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--hd-line);
}
.hd-title {
font-size: 16px;
font-weight: 600;
color: var(--hd-t1);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hd-sub {
font-size: 12px;
color: var(--hd-t3);
white-space: nowrap;
}
.hd-head-spacer { flex: 1 1 auto; }
.hd-close {
appearance: none;
border: 0;
background: transparent;
font-size: 20px;
line-height: 1;
padding: 4px 8px;
border-radius: var(--hd-r);
color: var(--hd-t2);
cursor: pointer;
}
.hd-close:hover { background: var(--hd-sunken); color: var(--hd-t1); }
.hd-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 16px 18px 18px;
-webkit-overflow-scrolling: touch;
}
/* ==========================================================================
§5 KPI 与说明
========================================================================== */
.hd-kpis {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.hd-kpi {
flex: 1 1 118px;
min-width: 118px;
padding: 8px 10px;
border: 1px solid var(--hd-line);
border-radius: var(--hd-r);
background: var(--hd-sunken);
}
.hd-kpi-k {
font-size: 11px;
color: var(--hd-t2);
}
.hd-kpi-v {
font-size: 16px;
font-weight: 700;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.hd-kpi-s {
font-size: 11px;
color: var(--hd-t3);
margin-top: 2px;
}
.hd-note {
font-size: 12px;
line-height: 1.55;
color: var(--hd-t2);
background: var(--hd-sunken);
border-left: 3px solid var(--hd-line-2);
border-radius: var(--hd-r);
padding: 8px 10px;
margin-bottom: 14px;
}
.hd-note.hd-note-em { border-left-color: var(--hd-em); }
/* ==========================================================================
§6 Tab 与工具栏
========================================================================== */
.hd-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.hd-bar-spacer { flex: 1 1 auto; }
.hd-tabs {
display: inline-flex;
padding: 3px;
gap: 2px;
border-radius: 8px;
background: #f1f3f7;
}
.hd-tab {
font-size: 13px;
line-height: 1;
padding: 7px 12px;
border-radius: 6px;
color: var(--hd-t2);
cursor: pointer;
white-space: nowrap;
transition: all var(--hd-ease);
}
.hd-tab:hover { color: var(--hd-t1); }
.hd-tab.hd-on {
background: #fff;
color: var(--hd-t1);
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.hd-check {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--hd-t2);
cursor: pointer;
user-select: none;
}
.hd-check input { margin: 0; cursor: pointer; }
/* ==========================================================================
§7 表格
========================================================================== */
.hd-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.hd-table th {
position: sticky;
top: 0;
z-index: 1;
text-align: left;
font-size: 12px;
font-weight: 500;
color: var(--hd-t2);
background: #fff;
border-bottom: 1px solid var(--hd-line);
padding: 8px 8px;
white-space: nowrap;
}
.hd-table td {
padding: 8px 8px;
border-bottom: 1px solid #f1f3f7;
color: var(--hd-t1);
vertical-align: middle;
}
.hd-table tbody tr:hover { background: #fafbfc; }
.hd-table .hd-num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.hd-table .hd-stock {
color: var(--hd-brand);
cursor: pointer;
font-weight: 500;
}
.hd-table .hd-stock:hover { text-decoration: underline; }
.hd-table .hd-tag {
display: inline-block;
margin-left: 4px;
padding: 0 5px;
border-radius: 3px;
font-size: 11px;
line-height: 15px;
color: var(--hd-t3);
background: #f1f3f7;
}
.hd-up { color: var(--hd-up); }
.hd-down { color: var(--hd-down); }
.hd-flat { color: var(--hd-t3); }
.hd-noise { opacity: .55; }
/* ==========================================================================
§8 状态与翻页
========================================================================== */
.hd-state {
padding: 34px 12px;
text-align: center;
font-size: 13px;
color: var(--hd-t2);
}
.hd-state .hd-state-big {
font-size: 15px;
font-weight: 600;
color: var(--hd-t1);
margin-bottom: 6px;
}
.hd-state .hd-state-acts { margin-top: 14px; }
.hd-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 14px;
font-size: 12px;
color: var(--hd-t2);
}
.hd-pager .hd-btn { padding: 6px 10px; }
/* 搜索输入 */
.hd-input {
flex: 1 1 240px;
min-width: 200px;
height: 34px;
padding: 0 10px;
font-size: 13px;
color: var(--hd-t1);
border: 1px solid var(--hd-line-2);
border-radius: var(--hd-r);
outline: none;
box-sizing: border-box;
}
.hd-input:focus { border-color: var(--hd-brand); }
.hd-sugs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.hd-sug {
font-size: 12px;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid var(--hd-line);
background: #fff;
color: var(--hd-t2);
cursor: pointer;
}
.hd-sug:hover { border-color: var(--hd-brand); color: var(--hd-brand); }
@media (max-width: 640px) {
.hd-mask { padding: 0; align-items: flex-end; }
.hd-modal { max-height: 88vh; border-radius: 14px 14px 0 0; }
}
/* ==========================================================================
§9 个股详情全宽浮层（2026-09-13）
--------------------------------------------------------------------------
问题
ding.html 的 #stockDetailPanel 挂在 440px 的 .ding-left 里（带 16px padding，
内容宽实测 407px），而「股本股东」Tab 是 7 列宽表：§1c 让短列不再换行之后，
min-content 约 690px —— 想看全「持股数 / 占比 / 变动」就必须往右拖。
同页的批量筛选面板反倒有 380px 固定抽屉，说明详情是选错了容器。
做法（零改动页面脚本，搬运见 holder-drill.js §2b）
建一个近全宽居中浮层，把 #stockDetailPanel **节点整体搬进来**，
左栏顶部（评分卡正下方）留一张入口卡。于是 ding.js 里 panel.innerHTML / panel.querySelectorAll
全部照旧可用，绑在子节点上的 tab 监听器也随节点一起搬走，不需要重绑。
· index：它的 #sdPanel 本来就是 position:fixed 的右侧抽屉，不必新建浮层，
只需在这里加宽（见本文件末尾的 @media），7 列股东表就装得下了。
· bull：左栏 928px，7 列表明测不横滚，不动。
为什么不做「渲染完自动弹出」
详情面板是 ding 分析完**自动**出现的，不是用户点出来的。若自动全屏弹出，
每解剖一只票都会盖住刚算出来的十维度与逻辑链 —— 喧宾夺主。
故默认只留入口卡，用户点了才开；关闭只隐藏、不销毁内容，再点即回。
========================================================================== */
/* —— 入口卡：ding 左栏顶部（评分卡正下方），渲染出内容后由 JS 显形 —— */
.hd-dd-entry {
display: none; /* 面板渲染出内容后由 JS 显形 */
width: 100%;
box-sizing: border-box;
margin-top: 12px;
padding: 11px 14px;
text-align: left;
font: inherit;
cursor: pointer;
background: var(--hd-sunken);
border: 1px dashed var(--hd-line-2);
border-radius: var(--hd-r);
transition: border-color var(--hd-ease), background var(--hd-ease);
}
.hd-dd-entry:hover { border-color: var(--hd-brand); background: var(--hd-surface); }
.hd-dd-entry-t { display: block; font-size: 13px; font-weight: 600; color: var(--hd-t1); }
.hd-dd-entry-s { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--hd-t2); }
.hd-dd-entry-a { display: inline-block; margin-top: 7px; font-size: 12px; color: var(--hd-brand); }
/* —— 浮层骨架 —— */
.hd-dm {
position: fixed;
inset: 0;
z-index: 903; /* 高于下钻模态(901)与 index 抽屉 */
display: none;
background: var(--hd-veil);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.hd-dm.hd-dw-show { display: flex; align-items: center; justify-content: center; }
.hd-dw {
display: flex;
flex-direction: column;
width: min(1120px, 94vw);
height: min(88vh, 1040px);
background: var(--hd-surface);
border-radius: 10px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.hd-dw-head {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
padding: 12px 16px;
border-bottom: 1px solid var(--hd-line);
}
.hd-dw-title { font-size: 15px; font-weight: 600; color: var(--hd-t1); }
.hd-dw-sub { font-size: 12px; color: var(--hd-t2); }
.hd-dw-spacer { flex: 1 1 auto; }
.hd-dw-x {
padding: 0 4px;
background: none;
border: none;
font-size: 22px;
line-height: 1;
color: var(--hd-t2);
cursor: pointer;
}
.hd-dw-x:hover { color: var(--hd-t1); }
.hd-dw-body {
flex: 1 1 auto;
overflow: auto;
padding: 14px 18px 20px;
-webkit-overflow-scrolling: touch;
}
/* 搬进来的详情面板：去掉它在左栏里为「卡中卡」留的外边距 */
.hd-dw-body > #stockDetailPanel { margin-top: 0; }
@media (max-width: 640px) {
.hd-dw { width: 100vw; height: 100vh; border-radius: 0; }
/* 7 列股东表 min-content ≈ 690px，在 390px 下必然横向滚动。
「右边被切掉一半」看起来像坏了，所以在表前挂一行滑动提示。
挂在 .hd-sh 上而不是浮层 body 上：.hd-sh 是「股本股东」Tab 内容的包装，
该 Tab 隐藏时提示随之隐藏，其他 Tab 不受影响。
sticky left:0 是必需的 —— .hd-sh 的宽度会被表格撑到 690px，
不 sticky 的话提示框绝大部分落在视口外，等于没有提示。 */
.hd-sh::before {
content: '↔ 可左右滑动查看全部列（持股数 / 占比 / 变动）';
position: sticky;
left: 0;
display: block;
width: fit-content;
max-width: 100%;
margin: 0 0 8px;
padding: 6px 10px;
font-size: 12px;
line-height: 1.5;
color: var(--hd-t2);
background: var(--hd-sunken);
border: 1px dashed var(--hd-line-2);
border-radius: var(--hd-r);
}
}
/* --------------------------------------------------------------------------
index.html 的详情抽屉：460px → 与浮层同宽
--------------------------------------------------------------------------
style.css 给 .sd-panel 定的是 width:460px / max-width:90vw，7 列股东表
（min-content ≈ 690px）在里面必然要横向拖。这里用 #id 提高优先级压过去。
刻意只作用在 ≥769px：style.css 的 @media(max-width:768px) 里有
.sd-panel{width:100vw;right:-100vw} 的全屏行为，加宽规则若不加断点，
media query 不增权重、会在手机上把它压成 94vw 露出底下的页面。
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
#sdPanel.sd-panel {
width: min(1120px, 94vw);
max-width: 94vw;
}
}
|