.drag-builder{width:100%;height:100%;position:relative;box-sizing:border-box;overflow:hidden}.drag-builder>.element-panel{width:260px;position:absolute;border:1px solid #bdbdbd;height:calc(100% - 4px);margin-top:2px;margin-bottom:2px;box-sizing:border-box;background-color:#fff}.drag-builder>.element-panel *,.drag-builder>.element-panel :after,.drag-builder>.element-panel :before{box-sizing:unset}.drag-builder>.element-panel .search{margin:0 auto;width:200px;margin-top:10px;position:relative;border:1px solid #bdbdbd;border-radius:2px}.drag-builder>.element-panel .search:hover{border:1px solid #40a9ff;box-shadow:0 0 0 2px rgba(24,144,255,.2)}.drag-builder>.element-panel .search>input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:170px;height:25px;border:0;outline:0;text-decoration:none;padding-left:5px;padding-right:24px}.drag-builder>.element-panel .search>i{width:20px;height:20px;position:absolute;line-height:20px;text-align:center;right:2px;top:3px;cursor:pointer;font-size:12px;color:#b1b1b1}.drag-builder>.element-panel .search>i:hover{color:#858585}.drag-builder>.element-panel .search>i:active{color:#646464}.drag-builder>.element-panel ._-{margin:10px 0;border-top:1px dashed #bdbdbd;max-height:1px}.drag-builder>.element-panel ._-:after{content:attr(name);font-size:12px;color:#bdbdbd;background-color:#fff;position:relative;top:-12px;left:10px}.drag-builder>.element-panel .item{border:1px dashed #f6f7ff;background-color:#f6f7ff;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:105px;padding:8px 5px;margin:2px;font-size:12px}.drag-builder>.element-panel .item:hover{border:1px dashed #666}.drag-builder>.element-panel .moving:after{content:"";position:absolute;top:0;left:0;right:0;height:100%}.drag-builder>.container-panel{margin-left:264px;margin-top:2px;margin-right:2px;margin-bottom:2px;height:calc(100% - 4px);max-width:100%;border:1px solid #bdbdbd;background-color:#fff;box-sizing:border-box;position:relative;overflow:hidden}.drag-builder>.container-panel>.inner{height:100%;width:100%;min-width:100%;min-height:100%;position:relative}.drag-builder>.container-panel>.inner #ruler_1{padding-left:20px;box-sizing:border-box;background-color:#fff;z-index:10;top:-20px;width:100%;position:absolute}.drag-builder>.container-panel>.inner #ruler_2{padding-top:20px;box-sizing:border-box;background-color:#fff;left:0;top:-20px;height:100%;position:absolute}.drag-builder>.container-panel>.inner>.view{width:calc(100% - 20px);height:calc(100% - 20px);margin-top:20px;margin-left:20px;box-sizing:border-box;border:1px solid red;background-color:#fff}.drag-builder>.container-panel>.inner>.view .marsk{position:relative}.drag-builder>.container-panel>.inner>.view .marsk *{z-index:0}.drag-builder>.container-panel>.inner>.view .marsk:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:10}.drag-builder>.container-panel>.inner>.view .drag{width:100%;height:100%;box-sizing:border-box}.drag-builder>.container-panel>.inner>.view .drag .box{margin:4px;z-index:10;box-sizing:border-box;border:1px dashed #dadada}.drag-builder>.container-panel>.inner>.view .drag .box:hover{border:1px dashed #7d7a7a}.drag-builder>.container-panel>.inner>.view .drag .active{border:1px dashed #40a9ff;box-shadow:0 0 0 2px rgba(24,144,255,.2)}.drag-builder>.container-panel>.inner>.view .drag .active:hover{border:1px dashed #40a9ff}.drag-builder>.container-panel>.inner>.view .drag>.placeholder{background-color:#40a9ff;box-shadow:unset;position:relative;min-height:3px;min-width:200px;padding:0;font-size:0;margin:4px;border:0 solid}.drag-builder>.container-panel>.inner>.view .drag>.placeholder>*{display:none}.drag-builder>.container-panel>.inner>.view .drag>.placeholder:hover{border:0}.drag-builder>.container-panel>.empty:before{content:"请拖入组件";width:200px;font-size:20px;display:block;position:absolute;padding-left:20px;top:calc(50% - 30px);left:calc(50% - 120px);color:#d4d4d4;text-align:center;padding:20px;border:1px dashed #d4d4d4}.drag-builder>.container-panel>.contextmenu{box-sizing:unset;position:absolute;top:20px;left:50px;font-size:12px;border:1px dashed #dadada;outline:5px solid #f6f7ff;background-color:#f6f7ff;padding:2px;min-width:60px;z-index:1000}.drag-builder>.container-panel>.contextmenu>li{list-style:none;z-index:100;padding:2px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drag-builder>.container-panel>.contextmenu>li:hover{background-color:#e2e3ec}.drag-builder>.container-panel>.contextmenu>li:active{background-color:#c9cad3}.drag-builder>.container-panel>.contextmenu>li>i{width:13px;height:13px;margin-top:4px;margin-right:4px;position:absolute;display:inline-block}.drag-builder>.container-panel>.contextmenu>li>div{margin-left:16px}.drag-builder>.container-panel>.contextmenu>li>ul{display:none}.drag-builder>.container-panel>.contextmenu>li:hover ul{display:unset;box-sizing:unset;position:absolute;font-size:12px;border:1px dashed #dadada;outline:5px solid #f6f7ff;background-color:#f6f7ff;padding:2px;min-width:50px;list-style:none;z-index:1000}.drag-builder>.container-panel>.contextmenu>li:hover ul>li{list-style:none;z-index:100;padding:2px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drag-builder>.container-panel>.contextmenu>li:hover ul>li:hover{background-color:#e2e3ec}.drag-builder>.container-panel>.contextmenu>li:hover ul>li:active{background-color:#c9cad3}.drag-builder>.container-panel>.contextmenu>li:hover ul>li>i{width:13px;height:13px;margin-top:4px;margin-right:4px;position:absolute;display:inline-block}.drag-builder>.container-panel>.contextmenu>li:hover ul>li>div{margin-left:16px;width:auto!important}.drag-builder>.setup-panel{width:100%;height:100%;background-color:rgba(89,91,94,.582);position:relative;top:-100%;z-index:1000}.drag-builder>.setup-panel>.inner{color:#4c4b4b;background-color:#fff;width:320px;border:1px solid #bdbdbd;height:100%;float:right;box-sizing:border-box}.drag-builder>.setup-panel>.inner>div:first-child{text-align:center;font-size:14px;margin:4px 0}.drag-builder>.setup-panel>.inner>div:nth-child(2){text-align:center;font-size:10px;font-family:Courier New,Courier,monospace;color:#a0a0a0;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid #e8e8e8}.drag-builder>.setup-panel>.inner .label{margin-top:10px;padding-top:5px;padding-bottom:2px;border:1px dashed #bdbdbd;box-sizing:border-box;position:relative}.drag-builder>.setup-panel>.inner .label:before{color:#bdbdbd;background-color:#fff;content:attr(label);position:absolute;top:-10px;right:10px;font-size:12px}.drag-builder>.setup-panel>.inner .field>span{font-size:12px;color:#4c4b4b}.drag-builder>.setup-panel>.inner .field .switch{text-align:center;height:25px;line-height:25px;border:1px solid #bdbdbd}.drag-builder>.setup-panel>.inner .field .switch>:first-child{width:50%;height:23px;box-sizing:border-box}.drag-builder>.setup-panel>.inner .field .switch>:first-child:after{content:attr(text);text-align:center;position:relative;display:block;left:0;height:23px;z-index:1;background-color:#fff;border-right:1px solid #bdbdbd;cursor:pointer}.drag-builder>.setup-panel>.inner .field .switch>:nth-child(2){width:50%;height:23px}.drag-builder>.setup-panel>.inner .field .switch>:nth-child(2):after{content:attr(text);text-align:center;position:relative;display:inline-block;display:block;left:0;height:23px;z-index:1;background-color:#fff;cursor:pointer}.drag-builder>.setup-panel>.inner .field .switch input{width:unset;cursor:pointer}.drag-builder>.setup-panel>.inner .field .switch>:checked:after{background-color:#d8d8d8}.drag-builder>.setup-panel>.inner .field .textbox{border:1px solid #bdbdbd;cursor:text}.drag-builder>.setup-panel>.inner .field .textbox>div,.drag-builder>.setup-panel>.inner .field .textbox input{display:inline-block;width:auto}.drag-builder>.setup-panel>.inner .field .textbox>div{border:1px dashed #bdbdbd;margin:1px;float:left;padding:0 2px}.drag-builder>.setup-panel>.inner .field .textbox>div>i{color:#bdbdbd;cursor:pointer}.drag-builder>.setup-panel>.inner .field .textbox>input{border:0;display:block;margin-bottom:1px}.drag-builder>.setup-panel>.inner .field .grid-item button:first-child{width:200px;font-size:12px;color:grey;background-color:#fff;border:1px dashed #bdbdbd;border-radius:0;margin:2px}.drag-builder>.setup-panel>.inner .field .grid-item button:first-child:hover{background-color:#f1f1f1;cursor:pointer}.drag-builder>.setup-panel>.inner .field .grid-item button:first-child:active{background-color:#ddd}.drag-builder>.setup-panel>.inner .field .grid-item>div{text-align:center;margin-bottom:2px}.drag-builder>.setup-panel>.inner .field .grid-item>div>input{width:140px;font-size:12px;box-sizing:border-box;outline:0;border:1px solid #bdbdbd;height:25px;padding:0 5px;border-radius:0;margin-right:4px}.drag-builder>.setup-panel>.inner .field .grid-item>div>button{width:56px;font-size:12px;color:grey;box-sizing:border-box;outline:0;border:1px solid #bdbdbd;height:25px;border-radius:0}.drag-builder>.setup-panel>.inner .field .grid-item>div>button:hover{background-color:#f1f1f1;cursor:pointer}.drag-builder>.setup-panel>.inner .field .grid-item>div>button:active{background-color:#ddd}.drag-builder>.setup-panel>.inner .field div[id^=color-picker-]{width:100%;height:25px;position:relative;border:1px solid #bdbdbd}.drag-builder>.setup-panel>.inner .field button,.drag-builder>.setup-panel>.inner .field input,.drag-builder>.setup-panel>.inner .field optgroup,.drag-builder>.setup-panel>.inner .field select,.drag-builder>.setup-panel>.inner .field textarea{font-size:12px;width:100%;box-sizing:border-box;outline:0;border:1px solid #bdbdbd;height:25px;padding:0 5px;border-radius:0}.drag-builder>.setup-panel>.inner .field .disabled{position:relative}.drag-builder>.setup-panel>.inner .field .disabled:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;background-color:hsla(0,0%,86.7%,.21176470588235294);z-index:10}.drag-builder>.setup-panel>.inner .collapse>.collapse-wrapper>.title{padding:4px;cursor:pointer;font-size:14px;border-bottom:1px solid #e8e8e8;background-color:#fff;position:relative}.drag-builder>.setup-panel>.inner .collapse>.collapse-wrapper>.title>div{padding-right:20px;color:#4c4b4b}.drag-builder>.setup-panel>.inner .collapse>.collapse-wrapper>.title>i{position:absolute;top:4px;right:0;margin:4px;width:16px;text-align:center;color:#e8e8e8}.drag-builder>.setup-panel>.inner .collapse>.collapse-wrapper>.content{border-bottom:1px solid #e8e8e8;padding:5px 5px}.drag-builder>.setup-panel>.inner .collapse>.collapse-wrapper>.fade-enter-active{transition:all .3s ease-out;overflow:hidden}.drag-builder>.setup-panel>.inner .collapse>.collapse-wrapper>.fade-enter-from,.drag-builder>.setup-panel>.inner .collapse>.collapse-wrapper>.fade-leave-to{transform:translateY(20px);overflow:hidden;opacity:0}.drag-builder>.setup-panel>.fade-enter-active{transition:all .3s ease-out}.drag-builder>.setup-panel>.fade-enter-from,.drag-builder>.setup-panel>.fade-leave-to{transform:translateX(20px);opacity:0}.grid[data-v-c0daa03e]{padding:2px}.grid>.empty[data-v-c0daa03e]{border:1px dashed #dadada}.table-box[data-v-b649c532]{overflow:hidden;padding:2px;min-height:82px}.table-box table:not([border]) tr td[data-v-b649c532]:not([style*=border-style]),.table-box table:not([border]) tr th[data-v-b649c532]:not([style*=border-style]),.table-box table[border="0"][data-v-b649c532],.table-box table[border="0"] tr td[data-v-b649c532]:not([style*=border-style]),.table-box table[border="0"] tr th[data-v-b649c532]:not([style*=border-style]),.table-box table[data-v-b649c532]:not([border]){border:1px dashed #dadada}.table-box table[data-v-b649c532]{width:100%;height:100%;min-height:82px}.table-box table tr td[data-v-b649c532]:not([style*=padding]),.table-box table tr th[data-v-b649c532]:not([style*=padding]){padding:4px}.table-box table tr td[data-v-b649c532],.table-box table tr th[data-v-b649c532]{position:relative}.table-box table tr td>input[data-v-b649c532],.table-box table tr th>input[data-v-b649c532]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;border:1px solid;outline:0;border-radius:0;min-height:26px;background-color:#fff}.table-box table tr td[selected][data-v-b649c532],.table-box table tr th[selected][data-v-b649c532]{position:relative}.table-box table tr td[selected][data-v-b649c532]:after,.table-box table tr th[selected][data-v-b649c532]:after{content:"";position:absolute;background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);top:0;bottom:-1px;left:-1px;right:-1px}