diff --git a/src/assets/scss/form.scss b/src/assets/scss/form.scss index e99ec0c6c..752000a8a 100644 --- a/src/assets/scss/form.scss +++ b/src/assets/scss/form.scss @@ -161,7 +161,7 @@ $mainColor: #66b1ff; padding: 0; width: 100%; } - .group {border: 1px dashed #ddd;margin: 2px 2px 10px 2px;padding: 5px;position: relative;min-height: 50px; + .group {border: 1px dashed #ddd;margin: 2px 0px 10px 0px;padding: 5px;position: relative;min-height: 50px; &.active {border: 3px solid $mainColor;position: relative; > .drag-control {display: block} > .tooltip {display: block;} @@ -194,6 +194,49 @@ $mainColor: #66b1ff; .group {width: 23%} } } +.detail-form {min-height: calc(100vh - 170px); + > div {height: 100%} + > .drag {min-height: calc(100vh - 170px) !important;} + .ghost { + background: #F56C6C; + border: 2px solid #F56C6C; + outline-width: 0; + height: 3px; + box-sizing: border-box; + font-size: 0; + content: ''; + overflow: hidden; + padding: 0; + width: 100%; + } + .group {border: 0px dashed #ddd;margin: 2px 0px 10px 0px;padding: 5px;position: relative;min-height: 50px; + + + > div {margin-bottom: 0} + + + } + .group-inputSlot {border-color: #eebe77;display: inline-block; + &:hover, &.active {border-color: #eebe77 !important;} + } + .tooltip {display: none;position: absolute;font-size: 12px;top: 0;right: 0;z-index: 5} + .drag-control {display: none; + .item-control {position: absolute;right: 0;bottom: 0;z-index: 2; display: flex;align-items: center;height: 24px;background: $mainColor; + i {width: 24px;height: 24px;color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer} + } + .drag-move {position: absolute;left: 0;top: 0;z-index: 2;width: 24px;height: 24px;background: $mainColor;color: #fff;text-align: center;line-height: 24px;cursor: move} + } + .drag {height: 100%;border: 0px dashed #ddd;min-height: 40px;margin: 0 2px;padding: 5px;align-content: flex-start;} + &.form-row-2 { + .group {width: 48%} + } + &.form-row-3 { + .group {width: 32%} + } + &.form-row-4 { + .group {width: 23%} + } +} /*表格设计*/ .design-table { .main-body {border-left: 0} diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue index 1908029bc..2fbe1471a 100644 --- a/src/components/DesignForm/public/form/form.vue +++ b/src/components/DesignForm/public/form/form.vue @@ -4,6 +4,8 @@ @ 备注: 自定义表单通用模块 -->