feat(documents): 文档归属改为卡片式复选框网格并优化通用项样式
This commit is contained in:
@@ -177,16 +177,19 @@ function submit() {
|
||||
<div class="form-field span-2">
|
||||
<span>文档归属 <i>*</i></span>
|
||||
<div class="ownership">
|
||||
<button
|
||||
<label
|
||||
v-for="option in ownershipOptions"
|
||||
:key="option"
|
||||
type="button"
|
||||
class="ownership-chip"
|
||||
:class="{ 'is-on': form.ownership.includes(option) }"
|
||||
@click="toggleOwnership(option)"
|
||||
class="ownership-option"
|
||||
:class="{ 'is-general': option === GENERAL_OWNERSHIP }"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="form.ownership.includes(option)"
|
||||
@change="toggleOwnership(option)"
|
||||
/>
|
||||
<span>{{ option }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-tip">
|
||||
勾选科室设置可见范围,支持多科室与通用(全院)。勾选「通用(全院)」后各科室均可见。
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user