otb-module
Version:
otb-module是基于现有的element-ui库进行的二次封装,简化组件的各自用法,将所有基础组件归纳于一个表单中, 集成表单组件,另还有增删改查的CRUD组件、预览图片/PDF的preview组件、上传文件的upload组件、分页组件与导出组件等等。 引入组件后以数据驱动组件从而加载Dom,让开发变得更简单,让代码更易维护。
1 lines • 6.39 kB
CSS
[data-v-4fb88805] .el-form-item{display:flex;flex-direction:row}[data-v-4fb88805] .el-form-item .el-form-item__content{margin-left:5px}.form[data-v-3de05288]{border-left:1px solid #000;border-bottom:1px solid #000}.form .form-item-row[data-v-3de05288]{display:flex;align-items:center;border-top:1px solid #000;border-right:1px solid #000}.form .row-item+.row-item[data-v-3de05288]{border-left:1px solid #000}.form .row-item[data-v-3de05288]{display:-webkit-box;align-items:center}.form .row-item .row-item-label[data-v-3de05288]{border-right:1px solid #000;height:100%;display:flex;align-items:center;font-weight:700}.form .row-item .row-item-value[data-v-3de05288]{display:flex;align-items:center}.pagination-container[data-v-39247a56]{background:transparent;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-top:50px}.pagination-container.hidden[data-v-39247a56]{display:none}.LT[data-v-145b31fd],[data-v-145b31fd] .el-image img{-o-object-fit:cover;object-fit:cover;-o-object-position:left top;object-position:left top}[data-v-145b31fd] .el-image img{max-width:65vw}iframe[data-v-145b31fd]{border-width:0;background-color:#fff}.preview-dialog{background-color:transparent;box-shadow:none}.preview-dialog .el-dialog__headerbtn{top:35px;right:35px}.preview-dialog .el-dialog__headerbtn i{background-color:#606266;border-radius:50%;padding:10px;font-size:25px;color:#fff}.preview-dialog .el-dialog__headerbtn:hover i{color:#fff}.icons[data-v-1e1b69c0]{justify-content:space-evenly}.icons i[data-v-1e1b69c0]{font-size:16px;cursor:pointer;width:1em;height:1em}[data-v-1e1b69c0] .el-upload-list__item{line-height:normal}.hide-add-card[data-v-1e1b69c0] .el-upload--picture-card{display:none}[data-v-1e1b69c0] .el-progress-circle{width:85%;height:85%}[data-v-1e1b69c0] .el-upload-dragger{padding:0}.hover[data-v-1e1b69c0]{transition:.2s ease-in-out}.hover[data-v-1e1b69c0]:hover{background-color:#eee2e2;color:#337ecc;transition:.2s ease-in-out}[data-v-281d7922] .el-dialog{background-color:transparent;box-shadow:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center}[data-v-281d7922] .el-dialog__close{color:var(--color)}.planet[data-v-281d7922]{width:500px;height:500px;position:relative}.planet img[data-v-281d7922]{top:125px;left:125px;position:absolute}.planet .ball[data-v-281d7922]{width:250px;height:250px;border-radius:50%;animation:ball-281d7922 10s linear infinite}@keyframes ball-281d7922{0%{transform:rotate(0deg);box-shadow:0 0 500px 0 hsla(0,0%,100%,.8)}50%{transform:rotate(180deg);box-shadow:0 0 500px 0 hsla(0,0%,100%,.3)}to{transform:rotate(1turn);box-shadow:0 0 500px 0 hsla(0,0%,100%,.8)}}.planet .ring[data-v-281d7922]{width:450px;height:450px;animation:ring-281d7922 10s linear infinite}@keyframes ring-281d7922{0%{opacity:1;transform:scale(1) translate(-22.15%,-22%)}50%{opacity:.4;transform:scale(1.01) translate(-22.15%,-22%)}to{opacity:1;transform:scale(1) translate(-22.15%,-22%)}}.default[data-v-281d7922]{padding:30px 50px;border-radius:5px;box-shadow:0 2px 6px var(--bgc)}@keyframes rotate-c6438fee{to{transform:rotate(1turn)}}.flow-1[data-v-c6438fee]{z-index:0;position:relative;overflow:hidden}.flow-1[data-v-c6438fee]:before{content:"";position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:var(--bg-color);background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),linear-gradient(var(--bg-color),var(--bg-color),var(--lg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color));animation:rotate-c6438fee 3s linear infinite}.flow-1[data-v-c6438fee]:after{content:"";position:absolute;z-index:-1;left:3px;top:3px;bottom:3px;right:3px;background:#fff;border-radius:5px}.flow-2[data-v-c6438fee]{z-index:0;position:relative;overflow:hidden}.flow-2[data-v-c6438fee]:before{content:"";position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:var(--bg-color);background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(transparent,transparent),linear-gradient(var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--lg-color),var(--bg-color),var(--bg-color)),linear-gradient(transparent,transparent),linear-gradient(var(--bg-color),var(--bg-color),var(--lg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color));animation:rotate-c6438fee 3s linear infinite}.flow-2[data-v-c6438fee]:after{content:"";position:absolute;z-index:-1;left:3px;top:3px;bottom:3px;right:3px;background:#fff;border-radius:5px}.flow-3[data-v-c6438fee]{z-index:0;position:relative;overflow:hidden}.flow-3[data-v-c6438fee]:before{content:"";position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:var(--bg-color);background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),linear-gradient(var(--lg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color));animation:rotate-c6438fee 3s linear infinite}.flow-3[data-v-c6438fee]:after{content:"";position:absolute;z-index:-1;left:3px;top:3px;bottom:3px;right:3px;background:#fff;border-radius:5px}.flow-4[data-v-c6438fee]{z-index:0;position:relative;overflow:hidden}.flow-4[data-v-c6438fee]:before{content:"";position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:var(--bg-color);background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(transparent,transparent),linear-gradient(var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--lg-color)),linear-gradient(transparent,transparent),linear-gradient(var(--lg-color),var(--bg-color),var(--bg-color),var(--bg-color),var(--bg-color));animation:rotate-c6438fee 3s linear infinite}.flow-4[data-v-c6438fee]:after{content:"";position:absolute;z-index:-1;left:3px;top:3px;bottom:3px;right:3px;background:#fff;border-radius:5px}