vue-drag-formdesign-ntt
Version:
vue-drag-formdesign
1 lines • 13.7 kB
CSS
#app,body{height:100%;width:100%;position:absolute}body{overflow:hidden;margin:0;color:rgba(0,0,0,.65);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-variant:tabular-nums;line-height:1.5;background-color:#fff;font-feature-settings:"tnum"}.form-design .form-label .is-required:before{content:"*";color:#f56c6c;margin-right:4px}.form-design .el-table thead th{background:#a9c8ea;color:#303133;font-size:13px}.form-design .el-aside{overflow:hidden;padding:10px}.form-design .el-main{padding:10px}.form-design .el-card__header{text-align:center}.form-design .el-card__body{overflow:auto;height:90%;padding:5px}.form-design .components-list{padding:8px 0;width:100%;height:100%}.form-design .components-list .widget-cate{padding:8px 12px;font-size:13px}.form-design .components-list ul{position:relative;overflow:hidden;padding:0 10px 10px;margin:0}.form-design .components-list .form-edit-widget-label{font-size:12px;display:block;width:45%;line-height:26px;position:relative;float:left;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:1%;color:#333;border:1px solid #f4f6fc;text-align:center}.form-design .components-list .form-edit-widget-label:hover{color:#409eff;border:1px dashed #409eff}.form-design .components-list .form-edit-widget-label>a{display:block;cursor:move;background:#f4f6fc;border:1px solid #f4f6fc}.form-design .components-list .form-edit-widget-label>a .icon{margin-right:6px;margin-left:8px;font-size:14px;display:inline-block;vertical-align:middle}.form-design .components-list .form-edit-widget-label>a span{display:inline-block;vertical-align:middle}.form-design .form-panel{height:600px;background:#eee;position:relative}.form-design .form-panel.no-toolbars-top{height:calc(100% - 50px)}.form-design .form-panel>.hint-text{position:absolute;left:0;top:45%;width:100%;text-align:center;font-size:20px;color:#aaa;z-index:16}.form-design .form-panel .a-form-box{height:100%}.form-design .form-panel .draggable-box{height:100%;overflow:auto}.form-design .form-panel .draggable-box .list-main{min-height:100%;padding:5px;position:relative;background:#fafafa}.form-design .form-panel .draggable-box .list-main .moving{min-height:35px;box-sizing:border-box;overflow:hidden;padding:0;position:relative}.form-design .form-panel .draggable-box .list-main .moving:before{content:"";height:5px;width:100%;background:#409eff;position:absolute;top:0;right:0}.form-design .form-panel .draggable-box .list-main .drag-move-box{position:relative;box-sizing:border-box;padding:8px;overflow:hidden;transition:all .3s;min-height:36px}.form-design .form-panel .draggable-box .list-main .drag-move-box:hover{background:fade(#409eff,20%)}.form-design .form-panel .draggable-box .list-main .drag-move-box:before{content:"";height:5px;width:100%;background:#409eff;position:absolute;top:0;right:-100%;transition:all .3s}.form-design .form-panel .draggable-box .list-main .drag-move-box.active{background:fade(#409eff,20%);outline-offset:0}.form-design .form-panel .draggable-box .list-main .drag-move-box.active:before{right:0}.form-design .form-panel .draggable-box .list-main .drag-move-box .form-item-box{position:relative;box-sizing:border-box;word-wrap:break-word}.form-design .form-panel .draggable-box .list-main .drag-move-box .form-item-box:before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;z-index:888}.form-design .form-panel .draggable-box .list-main .drag-move-box .form-item-box .ant-form-item{margin:0;padding-bottom:6px}.form-design .form-panel .draggable-box .list-main .drag-move-box .show-key-box{position:absolute;bottom:2px;right:5px;font-size:14px;z-index:999;color:#409eff}.form-design .form-panel .draggable-box .list-main .drag-move-box>.copy,.form-design .form-panel .draggable-box .list-main .drag-move-box>.delete{position:absolute;top:0;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;z-index:989;transition:all .3s}.form-design .form-panel .draggable-box .list-main .drag-move-box>.copy.unactivated,.form-design .form-panel .draggable-box .list-main .drag-move-box>.delete.unactivated{opacity:0;pointer-events:none}.form-design .form-panel .draggable-box .list-main .drag-move-box>.copy.active,.form-design .form-panel .draggable-box .list-main .drag-move-box>.delete.active{opacity:1}.form-design .form-panel .draggable-box .list-main .drag-move-box>.copy{border-radius:0 0 0 8px;right:30px;background:#409eff}.form-design .form-panel .draggable-box .list-main .drag-move-box>.delete{right:0;background:#409eff}.form-design .right-menu{width:190px;background:#fff;border:1px solid #ccc;position:fixed;transition:all 0s;box-shadow:3px 3px 5px #999;padding:8px 0;z-index:999}.form-design .right-menu ul{padding:0;margin:0;list-style:none}.form-design .right-menu ul li{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 15px;height:30px;line-height:30px;font-size:14px}.form-design .right-menu ul li:hover{background:#eee}.form-design .properties-centent{height:100%;overflow:hidden;background:#fff}.form-design .properties-centent .head-title{height:48px;line-height:48px;padding:0 24px;font-size:16px;border-bottom:1px solid #ccc;color:rgba(0,0,0,.85)}.form-design .properties-centent .properties-body{overflow:auto;height:calc(100% - 48px);padding:8px 16px}.form-design .properties-centent .properties-body .el-form{height:calc(100% + 20px)}.form-design .properties-centent .properties-body .el-form .el-form-item{margin-bottom:0;padding:5px 0}.form-design .properties-centent .properties-body .el-form .el-form-item *,.form-design .properties-centent .properties-body .el-form .el-form-item .el-checkbox,.form-design .properties-centent .properties-body .el-form .el-form-item .el-checkbox .el-checkbox__label,.form-design .properties-centent .properties-body .el-form .el-form-item .el-form-item__label,.form-design .properties-centent .properties-body .el-form .el-form-item .el-radio__label,.form-design .properties-centent .properties-body .el-form .el-form-item .el-switch__label{font-size:13px}.batch-box>.batch-label{font-size:16px;font-weight:500;padding:10px 10px}.batch-box .draggable-box{min-height:60px;width:100%;border:1px dashed #ccc;background:#fff}.batch-box .draggable-box .list-main{min-height:60px;position:relative;border:1px dashed #ccc;overflow-x:auto;overflow-y:auto;white-space:nowrap}.batch-box .draggable-box .list-main .moving{width:175px;min-height:94px;display:inline-block}.batch-box .draggable-box .list-main>div{min-width:185px;display:inline-block;vertical-align:top}.batch-box .draggable-box .list-main>div .ant-form-item>.ant-form-item-control-wrapper,.batch-box .draggable-box .list-main>div .ant-form-item>.ant-form-item-label{text-align:left;display:block}.batch-box .draggable-box .list-main>div .ant-col{width:100%}.batch-box,.grid-box,.table-box{padding:5px;background:fade(#9867f7,12%);width:100%;transition:all .3s;overflow:hidden;min-height:30px}.batch-box,.batch-box .form-item-box,.grid-box,.grid-box .form-item-box,.table-box,.table-box .form-item-box{position:relative;box-sizing:border-box}.batch-box .form-item-box .ant-form-item,.grid-box .form-item-box .ant-form-item,.table-box .form-item-box .ant-form-item{margin:0;padding-bottom:15px}.batch-box .grid-row,.batch-box .table-layout,.grid-box .grid-row,.grid-box .table-layout,.table-box .grid-row,.table-box .table-layout{background:fade(#9867f7,12%)}.batch-box .grid-row .grid-col .draggable-box,.batch-box .grid-row .table-td .draggable-box,.batch-box .table-layout .grid-col .draggable-box,.batch-box .table-layout .table-td .draggable-box,.grid-box .grid-row .grid-col .draggable-box,.grid-box .grid-row .table-td .draggable-box,.grid-box .table-layout .grid-col .draggable-box,.grid-box .table-layout .table-td .draggable-box,.table-box .grid-row .grid-col .draggable-box,.table-box .grid-row .table-td .draggable-box,.table-box .table-layout .grid-col .draggable-box,.table-box .table-layout .table-td .draggable-box{min-height:60px;min-width:50px;border:1px dashed #ccc;background:#fff}.batch-box .grid-row .grid-col .draggable-box .list-main,.batch-box .grid-row .table-td .draggable-box .list-main,.batch-box .table-layout .grid-col .draggable-box .list-main,.batch-box .table-layout .table-td .draggable-box .list-main,.grid-box .grid-row .grid-col .draggable-box .list-main,.grid-box .grid-row .table-td .draggable-box .list-main,.grid-box .table-layout .grid-col .draggable-box .list-main,.grid-box .table-layout .table-td .draggable-box .list-main,.table-box .grid-row .grid-col .draggable-box .list-main,.table-box .grid-row .table-td .draggable-box .list-main,.table-box .table-layout .grid-col .draggable-box .list-main,.table-box .table-layout .table-td .draggable-box .list-main{min-height:60px;position:relative;border:1px dashed #ccc}.batch-box:before,.grid-box:before,.table-box:before{content:"";height:5px;width:100%;background:transparent;position:absolute;top:0;right:-100%;transition:all .3s}.batch-box.active,.grid-box.active,.table-box.active{background:fade(#9867f7,24%);outline-offset:0}.batch-box.active:before,.grid-box.active:before,.table-box.active:before{background:#9867f7;right:0}.batch-box>.copy,.batch-box>.delete,.grid-box>.copy,.grid-box>.delete,.table-box>.copy,.table-box>.delete{position:absolute;top:0;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;z-index:989;transition:all .3s}.batch-box>.copy.unactivated,.batch-box>.delete.unactivated,.grid-box>.copy.unactivated,.grid-box>.delete.unactivated,.table-box>.copy.unactivated,.table-box>.delete.unactivated{opacity:0;pointer-events:none}.batch-box>.copy.active,.batch-box>.delete.active,.grid-box>.copy.active,.grid-box>.delete.active,.table-box>.copy.active,.table-box>.delete.active{opacity:1}.batch-box>.copy,.grid-box>.copy,.table-box>.copy{border-radius:0 0 0 8px;right:30px;background:#9867f7}.batch-box>.delete,.grid-box>.delete,.table-box>.delete{right:0;background:#9867f7}.el-dialog__header{padding:10px 20px 10px;background:#a9c8ea}.el-dialog__header .el-dialog__title{line-height:20px;font-size:16px}.el-dialog__header button{top:10px}.form-table{width:100%;box-sizing:border-box}.form-table,.form-table tr{transition:all .3s;border-collapse:collapse}.form-table tr .el-form-item{margin-bottom:0}.form-table tr td{box-sizing:border-box;transition:all .3s;padding:12px 12px;border-collapse:collapse;display:table-cell;vertical-align:inherit}.form-table tr td .el-form-item{margin-bottom:0}.form-table.bordered tr td{border:1px solid #e8e8e8}.form-table.bright tr:hover>td{background:#e6f7ff}.form-table.small tr td{padding:8px 8px}.form-table .el-row .el-form-item{margin:0}.form-item{height:100%}.upload-div{float:left}.upload-div .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.upload-div .avatar-uploader .el-upload:hover{border-color:#409eff}.upload-div .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.upload-div .avatar{display:block}.upload-div .avatar,.upload-div .vertical{width:128px;height:128px;-o-object-fit:cover;object-fit:cover}.upload-div .vertical{margin-left:5px;margin-top:20px}.base-item .slider-box{display:flex}.base-item .slider-box>.slider{flex:1;margin-right:16px}.base-item .slider-box>.number{width:70px}.base-item .el-input-number-diaplay{vertical-align:middle;display:inline-flex;position:relative}.base-item .el-input-number-diaplay .el-input-number__append{float:left;border-top-right-radius:0;border-bottom-right-radius:0;background-color:#f5f7fa;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #dcdfe6;border-radius:4px;white-space:nowrap;border-left:0;border-right:0}.base-item .el-input-number-diaplay .el-input-number__append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.base-item .el-input-number-diaplay .el-input-number-group__append{border-left:0;text-align:center;display:inline-table}.dynamic-delete-button[data-v-53e3fb2e]{cursor:pointer;position:relative;top:4px;font-size:24px;color:#999;transition:all .3s}.dynamic-delete-button[data-v-53e3fb2e]:hover{color:#e89}.dynamic-delete-button[disabled][data-v-53e3fb2e]{cursor:not-allowed;opacity:.5}.slider-box[data-v-30b12b8b]{display:flex}.slider-box>.slider[data-v-30b12b8b]{flex:1;margin-right:16px}.slider-box>.number[data-v-30b12b8b]{width:70px}.form-contains{height:100%}.option-change-container{width:calc(100% - 8px)}.option-change-container .el-tree-node__content,.option-change-container .el-tree-node__content .custom-tree-node{height:35px}.option-change-container .option-change-box{height:38px;padding-bottom:6px}.option-change-container .option-change-box .option-delete-box{margin-top:3px;background:#ffe9e9;color:#f22;width:32px;height:32px;line-height:32px;text-align:center;border-radius:50%;overflow:hidden;transition:all .3s}.option-change-container .option-change-box .option-delete-box:hover{background:#f22;color:#fff}.change-col-box>div[data-v-89aac4b4]{padding:5px;display:flex}.change-col-box>div>label[data-v-89aac4b4]{text-align:right;padding-right:8px;display:block;font-size:16px;width:45px}.form-render-preview{height:600px}.form-render-preview .el-tab-pane{height:500px;overflow:auto}.design-preview .item-main{height:calc(100vh - 140px);padding:0 20px 0 20px;overflow:auto}.form-design,.form-properties{height:100%;width:100%}.height-all{height:100%}