|
|
@@ -13,6 +13,8 @@ const formItems = computed({
|
|
|
return formDesignerStore.formItems
|
|
|
},
|
|
|
set(val) {
|
|
|
+ console.log('val', val)
|
|
|
+
|
|
|
formDesignerStore.formItems = val
|
|
|
}
|
|
|
})
|
|
|
@@ -46,7 +48,7 @@ const handleDel = (item: BasicFormItem, index: number) => {
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="h-full bg-white overflow-x-hidden overflow-y-auto p-16px">
|
|
|
- <div class="ios-bg ml-15" style="height: " v-if="designerHeaderType.type == 0">
|
|
|
+ <div class="ios-bg ml-15" style="height:" v-if="designerHeaderType.type == 0">
|
|
|
<el-form v-bind="formProps" class="h-full overflow-auto pt-px">
|
|
|
<draggable
|
|
|
class="content-start"
|
|
|
@@ -65,11 +67,13 @@ const handleDel = (item: BasicFormItem, index: number) => {
|
|
|
:class="{ active: curFormItem.id === element.id }"
|
|
|
@click="handleClick(element)"
|
|
|
>
|
|
|
- <el-form-item :label="element.label" :rules="element.rules" :prop="element.name">
|
|
|
+ <el-form-item label-width="70px" :label="element.label" :rules="element.rules" :prop="element.name">
|
|
|
<form-comp :item="element" v-model="formData[element.name]"></form-comp>
|
|
|
</el-form-item>
|
|
|
<div class="form-handle" v-if="curFormItem.id === element.id">
|
|
|
- <el-icon color="#fff"><Rank /></el-icon>
|
|
|
+ <el-icon color="#fff">
|
|
|
+ <Rank />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
<div class="form-btns" v-if="curFormItem.id === element.id">
|
|
|
<el-button
|
|
|
@@ -117,7 +121,9 @@ const handleDel = (item: BasicFormItem, index: number) => {
|
|
|
<form-comp :item="element" v-model="formData[element.name]"></form-comp>
|
|
|
</el-form-item>
|
|
|
<div class="form-handle" v-if="curFormItem.id === element.id">
|
|
|
- <el-icon color="#fff"><Rank /></el-icon>
|
|
|
+ <el-icon color="#fff">
|
|
|
+ <Rank />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
<div class="form-btns" v-if="curFormItem.id === element.id">
|
|
|
<el-button
|
|
|
@@ -154,17 +160,20 @@ const handleDel = (item: BasicFormItem, index: number) => {
|
|
|
color: var(--el-color-primary);
|
|
|
outline: 1px dashed currentColor;
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
color: var(--el-color-primary);
|
|
|
outline: 1px solid currentColor;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.form-btns {
|
|
|
position: absolute;
|
|
|
right: 5px;
|
|
|
bottom: 5px;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
+
|
|
|
.form-handle {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
@@ -174,13 +183,17 @@ const handleDel = (item: BasicFormItem, index: number) => {
|
|
|
z-index: 10;
|
|
|
cursor: move;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-select) {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.ios-bg {
|
|
|
+ width: 311px;
|
|
|
height: 580px;
|
|
|
- background: url('@/assets/images/iosBg.png') no-repeat;
|
|
|
+ background: url('@/assets/images/phone-wrap.png') no-repeat;
|
|
|
background-size: contain;
|
|
|
- padding: 60px 92px 60px 35px;
|
|
|
+ padding: 60px 20px;
|
|
|
+ margin: auto;
|
|
|
}
|
|
|
</style>
|