|
|
|
|
@charset "UTF-8";
|
|
|
|
|
// 左侧栏
|
|
|
|
|
$mainColor: #66b1ff;
|
|
|
|
|
.design-container {margin: 10px !important;display: flex; background-color: #FFFFFF;}
|
|
|
|
|
.components-list {width: 250px;padding: 8px 0;overflow-y: auto;height: calc(100vh - 40px);position: relative;overflow-x: hidden;
|
|
|
|
|
.title {padding: 8px 12px;position: relative;
|
|
|
|
|
.template {position: absolute;right: 12px;top: 0;padding: 8px;cursor: pointer}
|
|
|
|
|
}
|
|
|
|
|
ul { position: relative;overflow: hidden;padding: 0 10px 10px;margin: 0;
|
|
|
|
|
li {font-size: 13px;display: flex;width: 48%;line-height: 28px;position: relative;float: left;left: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 0 1% 5px;color: #333;padding: 0 10px;border: 1px solid transparent;background: #f4f6fc;user-select: none;align-items: center;
|
|
|
|
|
i {margin-right: 5px}
|
|
|
|
|
&:hover {
|
|
|
|
|
color: $mainColor;border: 1px dashed $mainColor;cursor: move;
|
|
|
|
|
}
|
|
|
|
|
&.title {padding: 0 10px}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content {margin-left: 12px}
|
|
|
|
|
}
|
|
|
|
|
.use-template {position: absolute;left: -100%;top: 0;width: 100%;bottom: 0;background: #fff;opacity: 0;
|
|
|
|
|
&.active {animation: templateAni .5s forwards;}
|
|
|
|
|
.close {position: absolute;right: 5px;top: 5px;font-size: 14px;cursor: pointer}
|
|
|
|
|
.list {padding: 30px 10px;overflow-y: auto;
|
|
|
|
|
.item {box-shadow: 0 0 4px rgba(0, 21, 41, 0.1);padding: 10px;text-align: center;transition: all .5s;cursor: pointer;margin-bottom: 10px;
|
|
|
|
|
img {display: block;width: 100%;margin: 0 auto 10px}
|
|
|
|
|
&:hover {box-shadow: 0 0 4px rgba(0, 21, 41, 0.25);}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.no-date {text-align: center;padding-top: 20px;color: #999}
|
|
|
|
|
}
|
|
|
|
|
@keyframes templateAni {
|
|
|
|
|
100% {opacity: 1;left: 0}
|
|
|
|
|
}
|
|
|
|
|
// 框架
|
|
|
|
|
.main-body {flex: 2; border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;margin: 0;overflow: hidden;
|
|
|
|
|
.empty-tips {text-align: center;width: 100%;font-size: 20px;color: #ccc;position: absolute;left: 0;top: 100px;
|
|
|
|
|
}
|
|
|
|
|
.main-form { background: #fff;border: 1px dashed #999;margin: 10px;height: calc(100vh - 105px);overflow-y: auto;overflow-x: hidden;position: relative}
|
|
|
|
|
}
|
|
|
|
|
// 中间按钮工具
|
|
|
|
|
.main-tools {line-height: 26px;border-bottom: 2px solid #e4e7ed;margin-right: 10px;padding: 8px 0;display: flex;align-items: center;justify-content: flex-end;
|
|
|
|
|
button {color: $mainColor;
|
|
|
|
|
i {padding-right: 5px}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.add-form {padding: 0px;box-sizing: border-box;
|
|
|
|
|
// 格珊
|
|
|
|
|
.form-row {
|
|
|
|
|
.form-col {
|
|
|
|
|
&.active-col {border: 3px solid $mainColor;position: relative;
|
|
|
|
|
> .drag-control {display: block;}
|
|
|
|
|
> .tooltip {display: block;}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title {border-bottom: 1px solid #ddd;font-weight: 700;font-size: 14px;height: 30px;padding: 0 5px;margin-bottom: 22px}
|
|
|
|
|
.form-tabs {
|
|
|
|
|
.drag {min-height: 80px;}
|
|
|
|
|
}
|
|
|
|
|
.group-card {
|
|
|
|
|
.el-collapse {border: 0}
|
|
|
|
|
.el-collapse-item__header {font-weight: 700;border-bottom: 1px solid #ddd;margin-bottom: 20px}
|
|
|
|
|
.el-collapse-item__wrap {border: 0}
|
|
|
|
|
}
|
|
|
|
|
.group-inputSlot {display: none}
|
|
|
|
|
.form-table {margin-bottom: 22px;
|
|
|
|
|
.drag {border: 0;display: flex;overflow-x: auto;white-space: nowrap;padding: 0;flex-wrap: nowrap;
|
|
|
|
|
> div {min-width: 150px;width: auto}
|
|
|
|
|
}
|
|
|
|
|
.el-form-item {display: block}
|
|
|
|
|
}
|
|
|
|
|
.table-btn {padding-top: 10px}
|
|
|
|
|
.el-collapse-item__content {padding-bottom: 5px }
|
|
|
|
|
.form-table-add {
|
|
|
|
|
.el-form-item__label {display: none}
|
|
|
|
|
.el-form-item {margin: 0}
|
|
|
|
|
.el-table .cell {overflow: inherit;
|
|
|
|
|
.el-form-item__error {padding-top: 0}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.gray {color: #999}
|
|
|
|
|
> .drag {border: 0 !important;}
|
|
|
|
|
.group-flex {
|
|
|
|
|
.flex-group {display: flex;justify-content: space-between;
|
|
|
|
|
button {margin-left: 10px}
|
|
|
|
|
}
|
|
|
|
|
.flex-item {flex: 2;}
|
|
|
|
|
}
|
|
|
|
|
.group-txt {margin-bottom: 18px}
|
|
|
|
|
.div-layout {
|
|
|
|
|
/*&.inline {
|
|
|
|
|
.drag {display: inline-flex}
|
|
|
|
|
.group {width: auto;margin-right: 10px}
|
|
|
|
|
}*/
|
|
|
|
|
&.right {
|
|
|
|
|
.drag {text-align: right;justify-content: flex-end}
|
|
|
|
|
}
|
|
|
|
|
&.center {
|
|
|
|
|
.drag {text-align: center;justify-content: center}
|
|
|
|
|
}
|
|
|
|
|
&.left {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 设置默认下input和select一样宽
|
|
|
|
|
.el-select {width: 100%;}
|
|
|
|
|
.el-select {
|
|
|
|
|
.el-input__wrapper .el-input__suffix {position: absolute;right: 10px}
|
|
|
|
|
}
|
|
|
|
|
.group {width: 100%}
|
|
|
|
|
.drag {display: flex;flex-wrap: wrap}
|
|
|
|
|
&.form-row-2 {
|
|
|
|
|
.group {width: 50%}
|
|
|
|
|
}
|
|
|
|
|
&.form-row-3 {
|
|
|
|
|
.group {width: 33%}
|
|
|
|
|
}
|
|
|
|
|
&.form-row-4 {
|
|
|
|
|
.group {width: 25%}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.sidebar-tools {width: 300px;right: 0;top: 0;overflow-y: auto;box-sizing: border-box;padding-bottom: 10px;bottom: 0; height: calc(100vh - 40px);
|
|
|
|
|
.form {
|
|
|
|
|
.el-form-item {margin-bottom: 10px;}
|
|
|
|
|
}
|
|
|
|
|
.h3 {font-size: 14px;margin-bottom: 10px;display: flex;align-items: center;
|
|
|
|
|
h3 {font-size: 14px}
|
|
|
|
|
}
|
|
|
|
|
.el-tabs__nav-wrap {padding: 0 10px}
|
|
|
|
|
.el-tabs__content {padding: 0 10px}
|
|
|
|
|
.icon-del {cursor: pointer}
|
|
|
|
|
.option-radio {
|
|
|
|
|
> label {margin-right: 8px}
|
|
|
|
|
}
|
|
|
|
|
.event-btn {
|
|
|
|
|
button {margin: 0 12px 5px 0}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#editJson, #editJsonCopy {width: 100%;height: calc(100vh - 65px)}
|
|
|
|
|
#editJsonCopy {height: calc(100vh - 350px)}
|
|
|
|
|
.ace-dialog {background: #1e1e1e;
|
|
|
|
|
.el-drawer__body {padding: 0}
|
|
|
|
|
.el-drawer__header {margin: 0;color: #e9e9e9;font-size: 12px;padding: 3px 10px}
|
|
|
|
|
.dialog-footer {text-align: center;padding-top: 5px;}
|
|
|
|
|
}
|
|
|
|
|
.export-dialog {
|
|
|
|
|
.el-dialog__body {padding: 0 20px}
|
|
|
|
|
}
|
|
|
|
|
.design-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: 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;}
|
|
|
|
|
}
|
|
|
|
|
&:hover {border-color: $mainColor;background: #ecf5ff}
|
|
|
|
|
> div {margin-bottom: 0}
|
|
|
|
|
&:after{content: '';position: absolute;left: 0;top:0;right: 0;bottom: 0;opacity: 0;z-index: 1;display: block;}
|
|
|
|
|
&.group-grid,&.group-tabs,&.group-card,&.group-flex,&.group-div,&.group-table{
|
|
|
|
|
&:after{display: none}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.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: 1px 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%}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.detail-form {
|
|
|
|
|
> 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}
|
|
|
|
|
.header {position: relative;
|
|
|
|
|
.field {position: absolute;left: 10px;top: 7px;display: flex;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.components-list {
|
|
|
|
|
.content {padding: 0 12px;
|
|
|
|
|
> div {display: flex;flex-wrap: wrap;justify-content: flex-start;
|
|
|
|
|
label {margin: 0 10px 8px 0 !important;}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.main-table {padding: 10px 20px;
|
|
|
|
|
.add-form {min-height: auto;display: flex;
|
|
|
|
|
> .drag {height: auto;min-height: auto !important;}
|
|
|
|
|
}
|
|
|
|
|
.el-divider {margin: 8px 0 0}
|
|
|
|
|
.table-tip {color: #999;padding: 30px 0;line-height: 22px}
|
|
|
|
|
.search-box {position: relative;
|
|
|
|
|
&:after {content: '';width: 100%;height: 100%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: 2;cursor: pointer;}
|
|
|
|
|
.group {width: auto;margin-right: 10px}
|
|
|
|
|
}
|
|
|
|
|
.control-btn {padding: 10px 0;
|
|
|
|
|
margin-bottom: 10px;display: flex;justify-content: space-between;align-items: center
|
|
|
|
|
}
|
|
|
|
|
.tip {border: 1px dotted #ddd;padding: 3px 5px;border-radius: 5px;color: #999;text-align: center;cursor: pointer}
|
|
|
|
|
.el-table__header {
|
|
|
|
|
th {
|
|
|
|
|
.cell {position: relative;}
|
|
|
|
|
.icon-close {display: none;font-size: 12px;margin-left: 12px;cursor: pointer;position: absolute;}
|
|
|
|
|
&:hover {
|
|
|
|
|
.icon-close {display: inline-block}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.table-tag {
|
|
|
|
|
.el-form-item__content {display: flex;
|
|
|
|
|
> div {flex: 2;margin-right: 5px;}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.table-field-list {
|
|
|
|
|
h3 {font-size: 14px}
|
|
|
|
|
.item {margin-bottom: 20px}
|
|
|
|
|
.list {display: flex;justify-content: flex-start;flex-wrap: wrap;
|
|
|
|
|
label {width: 25%;margin: 0}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.table-list-comm {display: flex;justify-content: space-between;
|
|
|
|
|
.tree-sidebar {width: 180px;border-right: 1px solid #ddd;padding-right: 10px;margin-right: 10px;flex-shrink: 0;
|
|
|
|
|
.el-input {margin-bottom: 10px}
|
|
|
|
|
}
|
|
|
|
|
.table-list {display: block;width: 100%}
|
|
|
|
|
.table-main {margin-bottom: 20px;
|
|
|
|
|
&.hide-vertical-scroll { // 固定了横向滚动条时，禁用表格固定头部的滚动
|
|
|
|
|
.el-scrollbar__wrap {overflow: hidden;}
|
|
|
|
|
.is-vertical {display: none !important;}
|
|
|
|
|
}
|
|
|
|
|
.table-operate-btn {display: flex;align-items: center}
|
|
|
|
|
}
|
|
|
|
|
.table-search {position: relative;
|
|
|
|
|
form {display: flex;flex-wrap: wrap;padding-bottom: 0;border-bottom: 1px solid #dcdfe6;margin-bottom: 10px;}
|
|
|
|
|
.drag {display: flex;flex-wrap: wrap;
|
|
|
|
|
> div {margin-right: 10px}
|
|
|
|
|
}
|
|
|
|
|
.group {width: auto}
|
|
|
|
|
.search-icon {margin-left: 10px;height: 30px;cursor: pointer;position: absolute;right: 0;top: 0}
|
|
|
|
|
.autoHeight-enter-active,
|
|
|
|
|
.autoHeight-leave-active {
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
transition: all .6s;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.autoHeight-enter-from,
|
|
|
|
|
.autoHeight-leave-to {
|
|
|
|
|
max-height: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.control-btn {margin-bottom: 10px;display: flex;justify-content: space-between;align-items: center}
|
|
|
|
|
}
|
|
|
|
|
/*图片文件上传*/
|
|
|
|
|
.upload-style {
|
|
|
|
|
.limit {
|
|
|
|
|
.el-upload {display: none}
|
|
|
|
|
// 超出limit时不显示上传按钮
|
|
|
|
|
}
|
|
|
|
|
.el-upload-list__item-preview {display: none !important;}
|
|
|
|
|
// 不显示点击放大按钮
|
|
|
|
|
.el-upload--picture {
|
|
|
|
|
.icon-plus {font-size: 28px;display: flex;align-items: center;justify-content: center;color: #8c939d;width: 148px;height: 148px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;overflow: hidden;background: #fbfdff}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/*分页*/
|
|
|
|
|
.table-page {padding-top: 10px;display: flex;justify-content: flex-end}
|
|
|
|
|
//.el-scrollbar__wrap{overflow: hidden!important;}
|
|
|
|
|
//.el-scrollbar__bar.is-vertical{display: none}
|
|
|
|
|
|
