[表单设计]卡片阴影预览

hc_zhufu
Zhufu 2024-05-31 14:23:39 +08:00
parent f5e75f44de
commit 751b4614df
1 changed files with 14 additions and 2 deletions

View File

@ -44,9 +44,9 @@
</Row>
</template>
<template v-else-if="['Card'].includes(schema.component)">
<a-row class="grid-row" style="width:100%">
<a-row class="grid-row" style="width:100%;padding:10px;">
<a-col class="grid-col" :span="schema.colProps.span">
<a-card :title="schema.label">
<a-card :title="schema.label" :class="schema.shadow === 'always'? 'card-always': schema.shadow === 'hover'? 'card-hover': ''">
<a-row class="grid-row">
<a-col
class="grid-col"
@ -172,4 +172,16 @@
.v-form-render-item {
overflow: hidden;
}
.card-always{
border-color: transparent;
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
}
.card-hover{
transition: box-shadow 0.2s, border-color 0.2s;
}
.card-hover:hover{
border-color: transparent;
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
}
</style>