HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

hc_zhufu
Zhufu 2024-05-31 14:23:39 +08:00
parent f5e75f44de
commit 751b4614df
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/demo/form-design/components/VFormCreate/components/FormRender.vue
View File

@ -44,9 +44,9 @@
</Row> </Row>
</template> </template>
<template v-else-if="['Card'].includes(schema.component)"> <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-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-row class="grid-row">
<a-col <a-col
class="grid-col" class="grid-col"
@ -172,4 +172,16 @@
.v-form-render-item { .v-form-render-item {
overflow: hidden; 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> </style>