235 lines
7.6 KiB
CSS
235 lines
7.6 KiB
CSS
/**
|
||
* 文书渲染的通用样式（全局）。
|
||
*
|
||
* 为什么放全局而不是各组件 scoped：同一份「签署态文书」会在三个地方出现——
|
||
* 文书库的签署预览、签署工作台的文书区、编辑器里的占位符胶囊。
|
||
* 三处各写一份 :deep() 覆盖，改一次配色要改三处，且必然漂移。
|
||
*
|
||
* 类名口径与原型 V10.2 对齐：
|
||
* - `.docfld` = 填写项（占位符）。空值是虚线胶囊，渲染态加 `.filled` 后**保留一圈实线细框**
|
||
* （颜色按 kind 走：文本=品牌色、签名=橙、勾选=绿），只把底色转透明、字重转 normal。
|
||
* 即「有框 = 这一处是系统管理的填写位」，空/满都保留框——2026-09-27 按原型改回，
|
||
* 此前曾把框设成透明，那会让 HIS 带出的值与正文文字完全看不出区别；
|
||
* - `.docopt` = 一组选项里的单项，用 ☑ / ☐ 文本而不是 input。
|
||
*
|
||
* 约定：`.docfld` / `.docopt` 的配色只在原型基础上做**一处**改动——
|
||
* 原型的 `#8aa4b0` 下划线、`#c07f00` 签名橙、`#0f9d6c` 勾选绿都原样保留，
|
||
* 因为它们与项目主题变量（--brand / --warn / --ok）本来就是同一套色系。
|
||
*/
|
||
|
||
/* ============ 填写项：占位符胶囊 ============ */
|
||
|
||
.docfld {
|
||
display: inline-block;
|
||
padding: 1px 8px;
|
||
margin: 0 2px;
|
||
color: var(--brand-d);
|
||
font-weight: 600;
|
||
/* nowrap 是**编辑态胶囊**要的（原型 `.docfld` 原样）：胶囊里是一句标签，不该折行。
|
||
渲染态在下面 `.filled` 里放开 —— 见那段注释，这是表格被挤坏的那个 bug 的根因。 */
|
||
white-space: nowrap;
|
||
background: var(--brand-l);
|
||
border: 1px dashed var(--brand);
|
||
border-radius: 5px;
|
||
}
|
||
|
||
/* 签名位：它决定签名落位，是文书里最不能漏的一项，用橙色单独区分 */
|
||
.docfld.k-signature {
|
||
color: #9a5f00;
|
||
background: #fff7e8;
|
||
border-color: #c07f00;
|
||
}
|
||
|
||
/* 勾选 / 选择类：绿色；未填充时前面带一个 ☑ 提示这是可勾的 */
|
||
.docfld.k-checkbox,
|
||
.docfld.k-choice {
|
||
color: #0b7a4b;
|
||
background: #eafaf1;
|
||
border-color: #0f9d6c;
|
||
}
|
||
|
||
.docfld.k-checkbox:not(.filled)::before,
|
||
.docfld.k-choice:not(.filled)::before {
|
||
font-weight: 700;
|
||
content: '\2611 ';
|
||
}
|
||
|
||
/* 渲染态：底色与加粗去掉（值直接读作正文），但**保留那圈实线细框** ——
|
||
原型 `.docfld.filled` 只把 `border-style` 从 dashed 改成 solid，没有改 `border-color`，
|
||
所以框的颜色仍由 kind 决定（文本=--brand、签名=橙、勾选=绿）。
|
||
这圈框是文书上「这一处是系统管理的填写位」的唯一视觉标识：去掉它，
|
||
HIS 带出的值（如「患者姓名 陈志强」）与正文文字就完全分不出来（2026-09-27 已踩）。
|
||
空值同理保留框，框内是一条 `.docfld-blank` 下划线。
|
||
|
||
**`white-space: normal` 是必须的**（2026-09-27 修 bug）：编辑态那句 nowrap 会把
|
||
渲染态的**整块取值**也变成不可折行 —— 勾选/选择类里两个长选项（如「是（带离机构外使用、
|
||
按单次门诊处方量管理）」）于是把表格的 min-content 撑到 508px。
|
||
纸宽 820（版心 572）时刚好放得下，**窗口一窄纸被压到 708（版心 494）就溢出**：
|
||
表宽超出版心、「药品名称」那一列被压成 28px 宽的竖排（用户在窄窗口/高缩放下截的图）。
|
||
渲染态允许折行后 min-content 降到几十像素，纸再窄也放得下。 */
|
||
.docfld.filled {
|
||
padding: 1px 2px;
|
||
font-weight: 400;
|
||
cursor: default;
|
||
white-space: normal;
|
||
background: transparent;
|
||
border-style: solid;
|
||
}
|
||
|
||
/* 空值占位：一条下划线。原型是 inline style，这里落成类名，
|
||
免得渲染端拼 HTML 时再手写一段样式字符串（也就没法统一调整） */
|
||
.docfld-blank {
|
||
display: inline-block;
|
||
min-width: 90px;
|
||
border-bottom: 1px solid #8aa4b0;
|
||
}
|
||
|
||
/* 文本 / 日期填写项在签署页是可补录的，控件压成与 .docfld-blank 完全一致的外观：
|
||
空着是一条下划线、填好了是正文。原型这类项只读（值全来自 HIS），
|
||
本仓库还有必须现场手填的自定义文本项，所以保留输入能力但不上表单外观。 */
|
||
.docfld-input {
|
||
min-width: 90px;
|
||
padding: 0 2px;
|
||
color: inherit;
|
||
font: inherit;
|
||
font-weight: inherit;
|
||
text-align: center;
|
||
background: transparent;
|
||
border: 0;
|
||
border-bottom: 1px solid #8aa4b0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.docfld-input:focus {
|
||
background: #f4fafc;
|
||
border-bottom-color: var(--brand);
|
||
outline: none;
|
||
}
|
||
|
||
/* 未填写的必填项：下划线转橙，让签署页一眼看出还有哪几处要填。
|
||
原型没有这一档（它的空值只有一条淡线），是为签署页可用性补的——
|
||
渲染态所有填写项都带同一圈品牌色细框，光靠框分不出「这处还没填」 */
|
||
.docfld.sign-field--missing .docfld-blank,
|
||
.docfld.sign-field--missing .docfld-input {
|
||
border-bottom-color: #d9821f;
|
||
}
|
||
|
||
.docfld.sign-field--missing .docfld-input {
|
||
background: #fffdf7;
|
||
}
|
||
|
||
/* 签名图：原型固定 46px 高、垂直居中 */
|
||
.docfld-signature {
|
||
height: 46px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* 未采集签名的提示文字 */
|
||
.docfld-empty {
|
||
color: var(--mut);
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* 可点击采集签名的填写项：整块胶囊都是点击热区（子节点会冒泡到宿主），
|
||
hover / 聚焦给出明确反馈，否则操作人员不知道这里能点 */
|
||
.docfld.sign-field--actionable {
|
||
cursor: pointer;
|
||
background: #fffaf0;
|
||
border-color: #f0a21a;
|
||
}
|
||
|
||
.docfld.sign-field--actionable:hover {
|
||
background: #fff3d8;
|
||
border-color: #d98c05;
|
||
box-shadow: 0 0 0 2px rgb(240 162 26 / 20%);
|
||
}
|
||
|
||
.docfld.sign-field--actionable:focus-visible {
|
||
outline: 2px solid var(--brand);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
/* 取值命中高危值（如「否」）：底色转红，签署端会额外在页脚汇总 */
|
||
.docfld.sign-field--abnormal {
|
||
background: #fdf0f0;
|
||
border-color: #efb9bb;
|
||
}
|
||
|
||
/* 「📲 Pad 签署」定位到签名位时的高亮（原型 .sig-locate）：
|
||
虚线描边 + 三下脉冲，提示操作人「点这个签名框就能签」。
|
||
类名与时长在 utils/signing-document.ts（SIGN_FIELD_LOCATE_CLASS / _MS），别在这里另写。 */
|
||
.docfld.sign-field--locate {
|
||
outline: 2.5px dashed #2b7bd4;
|
||
outline-offset: 4px;
|
||
border-radius: 4px;
|
||
animation: sig-pulse 1.1s ease-in-out 3;
|
||
}
|
||
|
||
@keyframes sig-pulse {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgb(43 123 212 / 0%);
|
||
}
|
||
|
||
50% {
|
||
box-shadow: 0 0 0 8px rgb(43 123 212 / 22%);
|
||
}
|
||
}
|
||
|
||
/* ============ 选项：☑ / ☐ ============ */
|
||
|
||
.docopt {
|
||
display: inline-block;
|
||
padding: 1px 3px;
|
||
margin-right: 12px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.docopt.tick {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.docopt.tick:hover {
|
||
background: #f0f6f8;
|
||
}
|
||
|
||
.docopt.on {
|
||
color: #0b7a4b;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ============ 存量兼容：表格勾选列与行内方框 ============ */
|
||
|
||
.sign-doc-checkbox {
|
||
width: 15px;
|
||
height: 15px;
|
||
accent-color: var(--brand);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sign-doc-checkbox:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
/* 正文行内选项（□否 □是）：用 label 包住方框与选项文字，点文字也能选中 */
|
||
.sign-doc-option {
|
||
display: inline-flex;
|
||
gap: 3px;
|
||
align-items: center;
|
||
margin-right: 14px;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 存量「勾选表」：表头含「勾选」列 */
|
||
.sign-doc-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
/* 这里曾有「系统页眉」（患者姓名 / 性别 / 年龄 / 住院号·门诊号 的一行）。
|
||
2026-09-30 去掉：编辑器里没有这一条，编辑时看不到、签出来却多一行。
|
||
患者信息要出现在文书上，就在正文里插对应的 HIS 占位符。 */
|