cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

package/src/styles/layout-skins.scss

@@ -0,0 +1,840 @@
+// Core 页签与左侧树皮肤。仅由 styles/index.scss 引入一次。
+// 从历史 style.scss 的 body 块迁入，保留 body 前缀以维持特异度。
+@import "./variables.scss";
+@import "./mixin.scss";
+
+body {
+  .tab-box {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    > {
+      .el-tabs__header {
+        margin-bottom: 0;
+        .el-tabs__nav-wrap {
+          padding-left: 24px;
+          .el-tabs__nav-prev,
+          .el-tabs__nav-next {
+            line-height: 34px;
+          }
+          .el-tabs__nav-prev {
+            left: 3px;
+          }
+          .el-tabs__nav-next {
+            right: 3px;
+          }
+          .el-tabs__active-bar {
+            background-color: $baseColor;
+            height: 2px;
+          }
+          .el-tabs__item {
+            height: 34px;
+            line-height: 34px;
+            font-size: $fontSizeBase;
+            &:before {
+              content: "";
+              font-family: "element-icons" !important;
+              margin-right: 3px;
+            }
+            &.is-active,
+            &:hover {
+              color: $baseColor;
+            }
+          }
+          &::after {
+            background: #e9e9e9;
+            height: 1px;
+          }
+        }
+      }
+      .el-tabs__content {
+        padding: 8px 10px 0;
+        flex: 1;
+        > .el-tab-pane {
+          height: 100%;
+          > div {
+            height: inherit;
+            &.tree-box {
+              height: calc(100% + 7px);
+            }
+          }
+        }
+        .grid-height,
+        .main-right {
+          height: 100%;
+        }
+        .tree-box {
+          margin: -7px 0 0 -12px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .tree-list {
+            flex: 1;
+            overflow: auto;
+          } //滚动条不出现
+        }
+        .detail-list {
+          margin: -7px -10px 0;
+          box-shadow: none;
+          .detail-wrap .d-cont {
+            height: 100%;
+          }
+        }
+        .designer-view {
+          overflow-x: visible;
+          overflow: visible;
+          .grid-container {
+            outline: none;
+          }
+          .el-form.render-form {
+            height: 100%;
+          }
+          .tree-container {
+            height: inherit;
+          }
+          .el-drawer__wrapper .el-drawer__body {
+            #containt.cont {
+              height: 100%;
+              margin: 0 0 10px;
+              > div {
+                height: 100%;
+              }
+
+              &.nfootBtn {
+                height: 100%;
+                margin-bottom: 0;
+              }
+            }
+            .dialog-footer {
+              width: 100%;
+              display: block;
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+  }
+  .tab-box-vertical {
+    border-right: solid 2px $borderColor;
+    width: 172px;
+    height: 100%;
+    .list-scroll {
+      overflow: auto;
+      height: 100%;
+      padding: 12px 16px;
+    }
+    .item {
+      width: 138px;
+      padding: 8px 10px;
+      line-height: 20px;
+      font-size: $fontSizeBase;
+      background: rgba($baseColor, 0.07);
+      border-radius: 3px;
+      margin-bottom: 10px;
+      text-align: center;
+      color: $text-color-darker;
+      position: relative;
+      cursor: pointer;
+      border: solid 1px rgba($baseColor, 0.07);
+      &:before {
+        content: "";
+        position: absolute;
+        height: 12px;
+        width: 4px;
+        background: $baseColor;
+        left: 6px;
+        top: 50%;
+        margin-top: -6px;
+        border-radius: 4px;
+        box-shadow: 1px 0 5px rgb(34 80 118 / 46%);
+      }
+      &.on {
+        background: $baseColor;
+        color: #fff !important;
+        &:before {
+          background: #fff;
+        }
+      }
+      &:hover {
+        color: $baseColor;
+        border: solid 1px rgba($baseColor, 0.5);
+      }
+    }
+  }
+  //tree
+  .tree-form {
+    padding: 12px 14px 0;
+    .txt {
+      width: 100% !important;
+      .el-input__inner {
+        border-right: none;
+      }
+      .el-input-group__append {
+        background: #fff;
+        padding: 0 15px;
+        border-left: none;
+        margin-left: -2px;
+        text-align: center;
+        position: relative;
+        z-index: 2;
+        border-color: $border-color-soft;
+        font-size: 14px;
+        .el-button {
+          padding: 0;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .tree-btns {
+    display: flex;
+    margin: 8px 10px 0;
+    .btn {
+      padding: 0;
+      margin: 0 4px;
+      font-size: $fontSizeBase;
+      height: $control-height;
+      flex: 1;
+      border-radius: $control-radius;
+      outline: none;
+    }
+    //+ .tree-list{height:calc(100vh - 148px)}
+  }
+  .tree-list {
+    z-index: 99;
+    position: relative;
+    padding-top: 2px;
+    overflow: auto;
+    > .el-tree-node {
+      margin: 8px 10px 0;
+      border-radius: $control-radius;
+      padding: 2px 4px !important;
+      overflow: hidden;
+      .button-sty {
+        min-width: 75px;
+        height: 24px;
+        line-height: 22px;
+        background-color: #fff;
+        position: relative;
+        z-index: 2;
+      }
+      > .el-tree-node__content {
+        .el-tree-node__expand-icon {
+          margin-right: -2px;
+          &.is-leaf {
+            margin-left: -9px;
+          }
+        }
+        .el-tree-node__label {
+          padding-left: 0;
+          font-size: 13px;
+          cursor: pointer;
+          //&:before{content: "\e61d";font-family: "iconfont";font-weight:400;background: #F0F3FF;width: 20px;height: 20px;display: inline-block;line-height: 20px;text-align: center;border-radius:6px;margin-right: 8px;color: #6386FA;}
+          span {
+            vertical-align: middle;
+          }
+        }
+      }
+      > .el-tree-node__children {
+        position: relative;
+        &:before {
+          content: "";
+          border-left: dashed 1px #d9d9d9;
+          position: absolute;
+          top: 2px;
+          bottom: 14px;
+          left: 9px;
+        }
+        > .el-tree-node {
+          padding-left: 12px;
+        }
+        .el-tree-node {
+          padding-right: 0;
+        }
+      }
+    }
+    .el-tree-node__children .el-tree-node__content {
+      position: relative;
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        height: 1px;
+        width: 73%;
+        top: 50%;
+        border-top: dashed 1px #d9d9d9;
+        z-index: -1;
+      }
+    }
+    .el-tree-node__content:hover,
+    .el-tree-node__content:focus,
+    .el-tree-node:focus > .el-tree-node__content {
+      background: none;
+      color: $baseColor;
+    }
+    .el-tree-node {
+      padding: 0;
+      &.is-current > .el-tree-node__content {
+        .el-tree-node__label,
+        .custom-tree-node {
+          color: $baseColor;
+          font-weight: 600;
+        }
+      }
+    }
+    .el-tree-node__label {
+      @include ellipsis;
+      font-size: $fontSizeBase;
+      width: calc(100% - 23px);
+      display: inline-block;
+      padding-left: 4px;
+      background-color: #fff;
+      position: relative;
+      z-index: 99;
+    }
+    .el-tree-node__expand-icon.is-leaf + .el-tree-node__label {
+      padding-left: 2px;
+    }
+    .el-tree-node__content {
+      height: $control-height;
+      line-height: 28px;
+      overflow: hidden; /*display: block; 表单设计器加入复选框有问题 改成flex*/
+      display: flex;
+      > .el-tree-node__expand-icon {
+        color: $baseColor;
+        margin-left: -8px;
+        margin-right: -6px;
+        float: left;
+        background: #fff;
+        position: relative;
+        z-index: 99;
+        padding: 9px;
+        &.is-leaf {
+          color: transparent;
+          margin-left: -6px;
+          background: transparent;
+        }
+        &.expanded {
+          -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+        }
+      }
+      .el-tree-node__loading-icon {
+        position: absolute;
+        background: #fff;
+        margin-left: 7px;
+      }
+      > label.el-checkbox {
+        margin-left: 6px;
+        margin-right: 0;
+        margin-bottom: 2px;
+      }
+      .custom-tree-node {
+        background: #fff;
+        padding-left: 6px;
+        span {
+          font-size: $fontSizeBase;
+        }
+      }
+    }
+    .ico-wenjian {
+      background: url(~@base/core-resources/images/ico-wenjianjia.svg) no-repeat center;
+      width: 14px;
+      height: 14px;
+      display: inline-block;
+      background-size: 100%;
+      vertical-align: middle;
+      margin: 0 4px 1px 0;
+    }
+  }
+  .tree-box {
+    width: 14%;
+    min-width: 13%;
+    border-right: solid 1px #f0f0f0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .tree-userChange {
+      height: 40.5px;
+      font-size: 14px;
+      background: #f4f6fa;
+      margin: 9px 10px;
+      border-radius: 5px;
+      line-height: 40.5px;
+      margin-bottom: -2px;
+      .a-link {
+        margin: 0 5px 0 8px;
+        vertical-align: middle;
+      }
+      .a-link_btn {
+        float: right;
+        width: 26.5px;
+        background: #fff;
+        border: solid 1px transparentize($baseColor, 0.85);
+        text-align: center;
+        height: 26.5px;
+        line-height: 28px;
+        margin: 7px 8px 7px 0;
+        border-radius: 5px;
+        color: $baseColor;
+      }
+      > span {
+        @include ellipsis;
+        vertical-align: middle;
+        display: inline-block;
+        font-size: $fontSizeBase;
+        width: 103px;
+        padding-left: 10px;
+      }
+      //+ .tit + .tree-form + .tree-list{height: calc(100vh - 200px);}
+    }
+    .tit {
+      margin-top: 14px;
+      cursor: pointer;
+      padding-left: 14px;
+      font-weight: 600;
+      b {
+        font-size: 14px;
+        text-align: center;
+        display: inline-block;
+        font-weight: 400;
+        border-radius: 22px 22px 0 0;
+        vertical-align: middle;
+      }
+      &:before {
+        content: "";
+        font-family: "iconfont";
+        font-weight: 400;
+        background: #f0f3ff;
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        line-height: 20px;
+        text-align: center;
+        border-radius: 6px;
+        margin-right: 8px;
+        color: #6386fa;
+        font-size: $fontSizeBase;
+      }
+      i {
+        font-size: 14px;
+        text-align: center;
+        display: inline-block;
+        font-weight: 400;
+        border-radius: 22px 22px 0 0;
+        vertical-align: middle;
+      }
+    }
+    .el-tree__empty-block {
+      background: url(~@base/core-resources/images/nodata.png) no-repeat center top;
+      background-size: 102px;
+      width: 100%;
+      height: 208px;
+      position: absolute;
+      top: 50%;
+      margin-top: -104px;
+    }
+
+    &.tree-annex {
+      .tree-list {
+        padding-top: 8px;
+        flex: 1;
+        > .el-tree-node {
+          margin-top: 0;
+        }
+        .el-tree-node__expand-icon.is-leaf {
+          + .el-tree-node__label {
+            padding-left: 1px;
+          }
+          + .el-tree-node__loading-icon + .el-tree-node__label {
+            padding-left: 1px;
+          }
+        }
+        .el-tree-node__children.v-enter-active.v-enter-to {
+          display: none;
+        }
+      }
+      // .tree-btns + .tree-list{
+      //   height: calc(100vh - 153px);
+      // }
+      // .tree-userChange + .tit + .tree-form + .tree-btns + .tree-list{height: calc(100vh - 200px);}
+    }
+    + #labBtn {
+      height: calc(100% + 8px);
+    }
+  }
+  .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background-color: transparent;
+  }
+  .tree-type {
+    padding: 16px 14px;
+    .item {
+      position: relative;
+      heighht: 1.2;
+      padding: 16px 0 16px 18px;
+      font-size: 13px;
+      cursor: pointer;
+      border-radius: 7px;
+      margin-bottom: 13px;
+      color: #555;
+      i {
+        font-size: 16px;
+        margin-right: 6px;
+        vertical-align: text-top;
+      }
+      &.on {
+        color: $baseColor;
+        background: #f1f6fc;
+        &:after {
+          content: "";
+          position: absolute;
+          right: -14px;
+          top: 0;
+          bottom: 0;
+          width: 5px;
+          background: $baseColor;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+  .tree-checkbox {
+    .el-checkbox {
+      margin-bottom: 0;
+    }
+    .el-tree-node__content {
+      &:hover,
+      &:focus {
+        background-color: transparent;
+        color: $baseColor;
+      }
+      > label.el-checkbox {
+        margin-bottom: 0;
+        z-index: 3;
+      }
+      .el-tree-node__label {
+        font-size: $fontSizeBase;
+      }
+      .el-tree-node__expand-icon {
+        position: relative;
+        z-index: 2;
+        &.is-leaf {
+          background: none;
+        }
+      }
+      .custom-tree-node > span:nth-child(2) {
+        margin-left: 12px;
+      }
+    }
+    > .el-tree-node {
+      position: relative;
+      > .el-tree-node__children:before {
+        content: "";
+        border-left: dashed 1px #d9d9d9;
+        position: absolute;
+        top: 28px;
+        bottom: 12px;
+        left: 11px;
+      }
+    }
+    .el-tree-node__children .el-tree-node__content {
+      position: relative;
+      &:after {
+        content: "";
+        position: absolute;
+        left: 12px;
+        height: 1px;
+        width: 24px;
+        top: 50%;
+        border-top: dashed 1px #d9d9d9;
+        z-index: 1;
+        margin-top: -1px;
+      }
+    }
+    .el-tree-node__children {
+      white-space: normal;
+    }
+    &.t-check2 {
+      > .el-tree-node {
+        .el-tree-node__children {
+          margin-left: 24px;
+          font-size: 13px;
+          border: solid 1px $border-color-lighter;
+          margin: 6px 0 12px 24px;
+          &:before {
+            display: none;
+          }
+          .el-tree-node__content:after {
+            left: -11px;
+            width: 40px;
+            display: none;
+          }
+        }
+        .el-tree-node {
+          display: inline-block;
+          vertical-align: middle;
+          &:not(:first-child) .el-tree-node__content:after {
+            display: none;
+          }
+          .el-tree-node__content {
+            padding-left: 0 !important;
+          }
+          .el-tree-node__children .el-tree-node__content:after {
+            display: none;
+          }
+          .el-tree-node {
+            display: none;
+          }
+        }
+      }
+    }
+    &.t-check3 {
+      > .el-tree-node .el-tree-node {
+        .el-tree-node__children {
+          padding-left: 24px;
+          .el-tree-node__content:after {
+            left: -11px;
+            width: 40px;
+          }
+        }
+        .el-tree-node {
+          display: inline-block;
+          vertical-align: middle;
+          &:not(:first-child) .el-tree-node__content:after {
+            display: none;
+          }
+          .el-tree-node__content {
+            padding-left: 12px !important;
+          }
+          .el-tree-node__children .el-tree-node__content:after {
+            display: none;
+          }
+          .el-tree-node {
+            display: none;
+          }
+        }
+      }
+    }
+    &.t-check4 {
+      > .el-tree-node .el-tree-node .el-tree-node {
+        .el-tree-node__children {
+          padding-left: 24px;
+          .el-tree-node__content:after {
+            left: -11px;
+            width: 40px;
+          }
+        }
+        .el-tree-node {
+          display: inline-block;
+          vertical-align: middle;
+          &:not(:first-child) .el-tree-node__content:after {
+            display: none;
+          }
+          .el-tree-node__content {
+            padding-left: 12px !important;
+          }
+          .el-tree-node__children .el-tree-node__content:after {
+            display: none;
+          }
+          .el-tree-node {
+            display: none;
+          }
+        }
+      }
+      .el-tree-node__children .el-tree-node__content:after {
+        width: 44px;
+      }
+    }
+  }
+  .tree-box_style {
+    .el-tree-node__content {
+      height: 42px;
+      .el-tree-node__label {
+        font-size: $fontSizeBase;
+        &:before {
+          content: "\e644";
+          font-family: "iconfont";
+          margin-right: 10px;
+        }
+      }
+      &:hover,
+      .is-focusable {
+        background: #ecf3fe;
+        color: $baseColor;
+      }
+    }
+  }
+  .tab-boxCard > {
+    .el-tabs__header {
+      .el-tabs__nav-wrap {
+        padding-left: 24px;
+        .el-tabs__nav {
+          border: none;
+        }
+        .el-tabs__item {
+          height: 34px;
+          line-height: 36px;
+          background: #f0f0f0;
+          color: $text-color-gray;
+          margin-right: 8px;
+          border-left: none;
+          border-radius: 8px 8px 0 0 !important;
+          transition: none;
+          padding: 0 14px;
+          font-size: $fontSizeBase;
+          outline: none !important;
+          &.is-active {
+            background: $baseColor;
+            color: #fff;
+          }
+        }
+      }
+      .el-tabs__active-bar {
+        display: none;
+      }
+    }
+  }
+  .tabCard-sty1 {
+    > .el-tabs__header {
+      margin: 10px 0 0 0;
+      .el-tabs__nav-wrap::after {
+        background: #e9e9e9;
+        height: 1px;
+      }
+    }
+    > .el-tabs__content .d-cont {
+      padding: 0;
+      margin: 0;
+      height: calc(100vh - 154px);
+    }
+    > .el-tabs__active-bar {
+      display: none;
+    }
+  }
+  .tab-boxCard2 > {
+    .el-tabs__header {
+      margin: 7px 0 1px;
+      .el-tabs__nav-wrap {
+        padding-left: 0;
+        &:after {
+          display: none;
+        }
+        .el-tabs__nav {
+          border: none;
+          width: 100%;
+        }
+        .el-tabs__item {
+          height: $control-height;
+          line-height: 28px;
+          background: #f0f0f0;
+          color: $text-color-gray;
+          margin-right: 8px;
+          border-left: none;
+          border-radius: 0;
+          transition: none;
+          padding: 0 14px;
+          font-size: $fontSizeBase;
+          outline: none !important;
+          width: 50%;
+          text-align: center;
+          &.is-active {
+            background: $baseColor;
+            color: #fff;
+          }
+        }
+      }
+      .el-tabs__active-bar {
+        display: none;
+      }
+    }
+  }
+  .tab-boxCard3 > {
+    .el-tabs__header {
+      background: #f1f6fc;
+      padding: 4px;
+      border-radius: 4px;
+      .el-tabs__nav-wrap {
+        padding-left: 0;
+        &:after {
+          display: none;
+        }
+        .el-tabs__nav {
+          border: none;
+          width: 100%;
+          display: flex;
+        }
+        .el-tabs__item {
+          height: $control-height;
+          line-height: 28px;
+          border-left: none;
+          border-radius: 0;
+          transition: none;
+          padding: 0 14px;
+          font-size: $fontSizeBase;
+          outline: none !important;
+          flex: 1;
+          text-align: center;
+          &.is-active {
+            background: #fff;
+            color: $text-color-darker;
+            border-radius: 4px;
+          }
+        }
+      }
+      .el-tabs__active-bar {
+        display: none;
+      }
+    }
+  }
+  .tab-boxOnly {
+    height: 100%;
+    > .el-tabs__header {
+      border-bottom: none;
+      .el-tabs__nav {
+        border: none;
+        border-radius: 0;
+        .el-tabs__item {
+          line-height: 29px;
+          height: auto;
+          border: solid 1px $border-color-lighter;
+          min-width: 68px;
+          margin-top: 6px;
+          font-size: $fontSizeBase;
+          background: #fbfbfb;
+          &:first-child {
+            border-left: solid 1px inherit;
+            border-radius: 2px 0 0 2px;
+          }
+          &:last-child {
+            border-radius: 0 2px 2px 0;
+          }
+          &.is-active {
+            border-bottom: inherit;
+            background: $green;
+            color: #fff !important;
+            border: solid 1px $green;
+          }
+          &:hover {
+            color: $green;
+          }
+        }
+      }
+      .el-tabs__nav-wrap::after,
+      .el-tabs__active-bar {
+        display: none;
+      }
+    }
+    > .el-tabs__content {
+      height: inherit;
+      > .el-tab-pane {
+        height: inherit;
+        > div {
+          height: inherit;
+        }
+      }
+    }
+  }
+}