diff --git a/clinical-web/src/views/management/documents/components/DocumentPropsDialog.vue b/clinical-web/src/views/management/documents/components/DocumentPropsDialog.vue index ceaa82e..12e6dbd 100644 --- a/clinical-web/src/views/management/documents/components/DocumentPropsDialog.vue +++ b/clinical-web/src/views/management/documents/components/DocumentPropsDialog.vue @@ -177,16 +177,19 @@ function submit() {
文档归属 *
- + + {{ option }} +

勾选科室设置可见范围,支持多科室与通用(全院)。勾选「通用(全院)」后各科室均可见。 @@ -382,31 +385,63 @@ function submit() { box-sizing: border-box; } +/* + * 文档归属:原型 V10.2 的 .cg-dept —— 卡片式复选框网格。 + * 容器是浅底带框的 3 列网格,每项一张白卡(原生 checkbox + 科室名), + * 「通用(全院)」独占一行并用浅蓝底区分(原型 grid-column:1/-1)。 + * 科室名过长时截断:原型同一处就是 nowrap + ellipsis。 + */ .ownership { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.ownership-chip { - padding: 4px 11px; - color: var(--mut); - font-size: 12px; - background: #f4f8fa; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 8px; + padding: 12px 14px; + background: #f7fafb; border: 1px solid var(--line); - border-radius: 14px; + border-radius: 10px; } -.ownership-chip:hover { - color: var(--brand); - border-color: var(--brand); +.ownership-option { + display: flex; + gap: 5px; + align-items: center; + min-width: 0; + padding: 8px 12px; + color: var(--ink); + font-size: 12.5px; + background: #fff; + border: 1px solid var(--line); + border-radius: 8px; + cursor: pointer; + transition: + border-color 0.15s, + box-shadow 0.15s; } -.ownership-chip.is-on { - color: var(--brand-d); - font-weight: 700; - background: var(--brand-l); +.ownership-option:hover { border-color: var(--brand); + box-shadow: 0 2px 8px rgb(15 60 80 / 8%); +} + +.ownership-option.is-general { + grid-column: 1 / -1; + background: #eef6f9; + border-color: #bcd9e4; +} + +/* 必须盖掉 .form-field input 的整宽与内边距,否则复选框会被拉成一个方块 */ +.ownership-option input[type='checkbox'] { + flex: none; + width: auto; + padding: 0; + margin: 0; + accent-color: var(--brand); +} + +.ownership-option > span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .field-tip {