feat(签署文书): 统一签署态文书样式并精简演示种子为单份麻精同意书
This commit is contained in:
yelan
@@ -0,0 +1,229 @@
|
||||
/**
|
||||
* 文书渲染的通用样式（全局）。
|
||||
*
|
||||
* 为什么放全局而不是各组件 scoped：同一份「签署态文书」会在三个地方出现——
|
||||
* 文书库的签署预览、签署工作台的文书区、编辑器里的占位符胶囊。
|
||||
* 三处各写一份 :deep() 覆盖，改一次配色要改三处，且必然漂移。
|
||||
*
|
||||
* 类名口径与原型 V10.2 对齐：
|
||||
* - `.docfld` = 填写项（占位符）。空值是虚线胶囊，填充后加 `.filled` 去掉边框与底色；
|
||||
* - `.docopt` = 一组选项里的单项，用 ☑ / ☐ 文本而不是 input；
|
||||
* - `.sign-doc-header` = 系统页眉（患者信息由 HIS 带出，不进签署证据）。
|
||||
*
|
||||
* 约定：`.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;
|
||||
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-blank）也会被一并去掉底色与边框，
|
||||
否则空值看起来和填好的值一样重 */
|
||||
.docfld.filled {
|
||||
padding: 1px 2px;
|
||||
font-weight: 400;
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 空值占位：一条下划线。原型是 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;
|
||||
}
|
||||
|
||||
/* 未填写的必填项：下划线转橙，让签署页一眼看出还有哪几处要填。
|
||||
原型没有这一档（它的空值只有一条淡线），是为签署页可用性补的——
|
||||
填充后胶囊边框被 .filled 去掉，否则未填项在文书上完全看不出差别 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ============ 选项：☑ / ☐ ============ */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ============ 系统页眉 ============ */
|
||||
|
||||
/* 患者姓名 / 性别 / 年龄 / 住院号·门诊号，取值全部来自 HIS。
|
||||
只读展示，不挂 data-sign-field —— 页眉不是"待填写项"，也不进签署证据。
|
||||
四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width） */
|
||||
.sign-doc-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 18px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1.5px solid #52646e;
|
||||
}
|
||||
|
||||
.sign-doc-header__item {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.sign-doc-header__label {
|
||||
flex-shrink: 0;
|
||||
color: #52646e;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.sign-doc-header__value {
|
||||
padding: 0 5px 1px;
|
||||
color: #1c2b33;
|
||||
font-size: 12.5px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #52646e;
|
||||
}
|
||||
Reference in New Issue
Block a user