@charset "UTF-8";
// 左侧栏
$mainColor: #66b1ff;
.design-container {padding: 0 !important;display: flex;}
.components-list {width: 250px;padding: 8px 0;overflow-y: auto;height: calc(100vh - 180px);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: 14px;display: flex;width: 100%;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: #f0f2f5;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;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 - 200px);overflow-y: auto;overflow-x: hidden;position: relative}
}
// 中间按钮工具
.main-tools {line-height: 38px;border-bottom: 2px solid #e4e7ed;text-align: right;margin-right: 10px;
  button {color: $mainColor;
    i {padding-right: 5px}
  }
}
.add-form {padding: 5px;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;}
  }
}
.sidebar-tools {width: 300px;right: 0;top: 0;overflow-y: auto;box-sizing: border-box;padding-bottom: 10px;bottom: 0; height: calc(100vh - 140px);
  .form {
    .el-form-item {margin-bottom: 10px;}
  }
  h3 {font-size: 14px;font-weight: 700;margin-bottom: 10px}
  .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(50vh - 197px);
  > div {height: 100%}
  > .drag {min-height: calc(100vh - 197px)}
  .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.drag-move:hover{cursor: move;}
     .group.stopped {
       background-color: #DDD;
     }
  .group {position: relative;width: 100%;
    min-height: 50px;
    &.active {border: 3px solid $mainColor;position: relative;
      > .drag-control {display: block}
      > .tooltip {display: block;}
    }
    &.drag-move:hover {border-color: $mainColor;background: #ecf5ff}
  }
  .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 1px;padding: 1px;display: flex;flex-wrap: wrap;align-content: flex-start;}
}
/*表格设计*/
.design-table {
  .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: 0 20px;
    .add-form {min-height: auto;display: flex;
      > .drag {height: auto;min-height: auto !important;}
    }
  }
  .table-tag {
    .el-form-item__content {display: flex;
      > div {flex: 2;margin-right: 5px;}
    }
  }
}
.table-list-comm {display: flex;justify-content: space-between;
  .tree-sidebar {width: 180px;border-right: 1px solid #ddd;padding-right: 10px;margin-right: 10px}
  .table-list {flex: 2; width: 100%} /* 追加宽度 */
  .table-main {margin-bottom: 20px}
  .table-search {position: relative;
    form {display: flex;flex-wrap: wrap}
    .drag {display: flex;flex-wrap: wrap;
      > div {margin-right: 10px}
    }
    .search-icon {margin-left: 10px;height: 30px;cursor: pointer;position: absolute;right: 0;top: 0}
  }
  .control-btn {margin-bottom: 10px}
}
/*图片文件上传*/
.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}
