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

package/src/styles/page-shell.scss

@@ -0,0 +1,723 @@
+// Core 列表/详情页白底壳。仅由 styles/index.scss 引入一次。
+// 从历史 style.scss 迁入：body 内覆盖保留 body 前缀，顶层 #containt 保持原选择器。
+@import "./variables.scss";
+@import "./mixin.scss";
+
+body {
+  .grid-height {
+    //height: calc(100vh - 50.5px);
+    > div {
+      height: inherit;
+    }
+    .el-drawer__wrapper {
+      position: absolute;
+      .el-drawer__body {
+        padding: 0;
+        border-top: solid 1px $bg-color-disabled;
+        #containt {
+          margin: 0;
+          // .el-tab-pane{
+          //   .grid-height{height:calc(100vh - 224px)}
+          //   .detail-wrap .d-cont{height: calc(100vh - 256px);}
+          // }
+        }
+        .vxe-grid {
+          .vxe-grid--pager-wrapper {
+            min-height: 0;
+          }
+        }
+      }
+    }
+  }
+  #app {
+    #containt.designer-view {
+      background: none;
+      box-shadow: none;
+    }
+  }
+  #containt.list-drag {
+    overflow: hidden;
+    .tree-box {
+      white-space: nowrap;
+      width: 28%;
+      min-width: 28%;
+      .grid-height {
+        .vxe-grid .screen-box {
+          white-space: initial;
+        }
+      }
+    }
+    .main-right {
+      width: 72%;
+      margin-left: -9px;
+      padding-left: 9px;
+      height: 100%;
+    }
+  }
+  .dialog-style.list-dialog.full-height.home .el-dialog__body #containt {
+    padding: 10px 10px 0;
+    .detail-wrap .d-cont {
+      height: calc(100vh - 105px);
+    }
+  }
+}
+
+.app-main #containt {
+  margin: 0 10px;
+  position: relative;
+  z-index: 9;
+  border-radius: 0 0 2px 2px;
+  height: 100%;
+  .detail-wrap {
+    .d-header {
+      margin: -8px -12px 0;
+    }
+    .d-cont {
+      margin: 0 -12px;
+      width: calc(100% + 24px);
+    }
+  }
+}
+
+.app-main #containt.xform-page-dialog-host {
+  z-index: 0;
+  isolation: isolate;
+
+  > .xform-page-dialog-wrapper {
+    position: absolute !important;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    overflow: auto !important;
+
+    &.xform-page-dialog-wrapper--top {
+      align-items: flex-start;
+    }
+
+    > .el-dialog {
+      flex: none;
+      display: flex;
+      flex-direction: column;
+      max-width: calc(100% - 24px);
+      max-height: calc(100% - 24px);
+      margin-bottom: 0;
+
+      &.is-fullscreen {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      > .el-dialog__body {
+        min-height: 0;
+        overflow: auto;
+      }
+    }
+
+    // 业务表单原先用视口 vh 给 .cont 定高。挂进当前页面后，可用高度变小，
+    // 需要让标题、内容、底栏按弹框自身高度分配，只在内容区滚动。
+    &.xform-page-form-dialog-wrapper {
+      overflow: hidden !important;
+
+      > .el-dialog {
+        overflow: hidden;
+
+        > .el-dialog__header,
+        > .el-dialog__footer {
+          flex: 0 0 auto;
+        }
+
+        > .el-dialog__body {
+          display: flex;
+          flex: 0 1 auto;
+          flex-direction: column;
+          height: auto !important;
+          min-height: 0;
+          overflow: hidden;
+
+          > .cont {
+            flex: 0 1 auto;
+            // 与全局业务弹框的常用高度一致；bodyConfig 的行内高度仍可覆盖。
+            height: 70vh;
+            min-height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+          }
+
+          // 与全局业务弹框（发布环境基准）一致：内容四周不加额外留白，
+          // 间距只来自 .el-dialog__body 的 8px padding 和表单自身样式。
+          // 局部弹框挂在 .app-main 内，会额外命中 .app-main #containt 下
+          // .detail-wrap 的页面级负 margin（全局弹框挂在 body 下不命中），
+          // 这里一并归零，保证 dialogScope 两种模式的内边距一致。
+          > .cont.designer-view:not(.fd-list-host) {
+            box-sizing: border-box;
+            margin: 0;
+            border: 0;
+            padding: 0;
+
+            .detail-wrap .d-header,
+            .detail-wrap .d-cont {
+              margin: 0;
+              width: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 弹框挂进 #app 后，#containt.designer-view 的 background: none 会作用到弹框内容，
+  // 白底被去掉，露出页面底色。这里只把内容区白底加回来。
+  .el-dialog__body > #containt {
+    background-color: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+
+    &.designer-view {
+      background-color: #fff;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+    }
+  }
+}
+/* 外链页面(#/outLinkView、#/form_outLinkView 等)不走 layout，没有 .app-main 撑高度，
+   #containt 只能被内容撑开，列表/详情会塌陷显示不全，这里补上与 .app-main 一致的高度 */
+#app > #containt {
+  height: 100vh;
+  > #containt {
+    height: 100%;
+  }
+}
+#containt {
+  background-color: #fff;
+  border-radius: $control-radius;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); /*margin:10px;*/
+  overflow-x: hidden;
+  > .el-form {
+    padding: 8px 10px 0;
+    .title b {
+      margin-left: 0;
+    }
+  }
+  .h5-wrap {
+    .fix-bottom-btns .btn {
+      padding: 10px;
+    }
+  }
+  .detail-wrap {
+    position: relative;
+    overflow: inherit;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    > .el-form {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .el-form + div {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        min-height: 0;
+      }
+    }
+    .d-header {
+      border-bottom: solid 1px $borderColor;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 24px 0 14px;
+      font-size: 13px;
+      + div {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+      .fl {
+        .button-sty {
+          margin-left: 20px;
+          position: relative;
+          i {
+            color: #fff;
+            &.icon-add {
+              position: absolute;
+              left: -1px;
+              top: 3px;
+              background-color: #fff;
+              width: 8px;
+              height: 8px;
+            }
+          }
+        }
+        > i {
+          color: $baseColor;
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: 6px;
+          margin-bottom: 1px;
+          font-size: 14px;
+          font-size: 14px;
+        }
+        .el-tag {
+          margin-left: 12px;
+        }
+      }
+      .fr {
+        .button-sty {
+          display: inline-block;
+          vertical-align: middle;
+          margin-bottom: 2px;
+        }
+        .groupbutton {
+          margin-bottom: 3px;
+        }
+        .el-form + .el-button,
+        .field-wrapper + .field-wrapper {
+          margin-left: 10px;
+        }
+        .field-wrapper {
+          display: inline-block !important;
+        }
+      }
+    }
+    .d-cont {
+      overflow: auto;
+      padding-top: 14px;
+      padding: 10px 12px 0;
+      //height: inherit; 这样设置表单做的详情页会有问题
+      height:auto;
+      .d-item {
+        border: solid 1px $borderColor;
+        padding: 0 112px 14px 12px;
+        &:last-child {
+          margin-bottom: 10px;
+        }
+        .btn-close-open {
+          font-weight: 400;
+          font-size: $fontSizeBase;
+          margin: 5px 41px 0 -76px;
+          cursor: pointer;
+        }
+        .title {
+          .stat-txt {
+            float: right;
+            line-height: 28px;
+            span {
+              display: inline-block;
+              color: $red;
+              background-color: transparentize($red, 0.9);
+              border-radius: 8px;
+              line-height: 26px;
+              padding: 0 6px;
+            }
+          }
+        }
+        .title-form {
+          margin-top: 8px;
+          margin-left: 4px;
+          > span {
+            width: 230px;
+            display: inline-block;
+          }
+        }
+        .button-sty,
+        .el-input {
+          vertical-align: middle;
+          line-height: 26px;
+        }
+        &.product-info {
+          padding-right: 0;
+          margin-bottom: 0;
+          padding-bottom: 0;
+          .pi-item {
+            border-top: solid 1px $border-color-lighter;
+            padding: 7px 12px;
+            margin: 0 0 0 -12px;
+            padding-bottom: 3px;
+            // .tree-box{height: calc(100vh - 230px);}
+            // #labBtn{height: calc(100vh - 220px);}
+            .main-right {
+              padding: 0;
+              width: 86%;
+              .grid-height {
+                // height: calc(100vh - 230px);
+                // .vxe-grid-block{height: calc(100vh - 342px);}
+                .screen-btns .el-radio {
+                  line-height: 28px;
+                  height: $control-height;
+                }
+              }
+            }
+            .pro-annex .pa-cont {
+              border: none;
+              margin-top: 0;
+              .nav {
+                width: 100%;
+                border-right: none;
+              }
+            }
+          }
+        }
+        .style1 {
+          .d-item {
+            padding-right: 12px;
+            margin: 4px 0 12px;
+          }
+          > .d-item:last-child {
+            margin-bottom: 0;
+          }
+          .m-2 {
+            margin: 0 -4px;
+          }
+        }
+        .m-2 {
+          display: flex;
+          .d-item {
+            flex: 1;
+            margin: 6px 8px;
+            .grid-h {
+              margin-top: 5px;
+            }
+          }
+        }
+      }
+    }
+    &[visible-key="showBillEdit"] .d-cont {
+      height: 73vh;
+    }
+    .slide-nav {
+      top: 120px;
+      right: 28px;
+    }
+    //.tabCard-sty1 > .el-tabs__content .d-cont{height: calc(100vh - 154px) }
+    // &.style{
+    //    .d-header{height:auto;
+    //      .product-detail_xx{height:10vh}
+    //    }
+    //  }
+
+    .postscript-box {
+      padding-left: 26px;
+      > .item {
+        border-bottom: solid 1px $border-color-lighter;
+        overflow: hidden;
+        padding: 6px 0 18px;
+        font-size: $fontSizeBase;
+        .name {
+          float: left;
+          font-size: 13px;
+          color: $text-color-darker;
+          line-height: 21px;
+        }
+        .time {
+          color: #225076;
+          display: inline-block;
+          background: #22507614;
+          padding: 2px 6px;
+          border-radius: $control-radius;
+        }
+        .txt {
+          padding: 8px 0 12px;
+          color: $text-color-dark;
+        }
+        .attach-box {
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+  .detail-box {
+    border: solid 1px $border-color-lighter;
+    min-height: 268px;
+    margin: 16px 6px 0;
+    .t {
+      padding: 0 12px;
+      height: 25px;
+      line-height: 32px;
+      display: inline-block;
+      background: #fff;
+      margin-left: 7px;
+      float: left;
+      margin-top: -16px;
+      font-size: 14px;
+      position: relative;
+      color: $baseColor;
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 13px;
+        width: 5px;
+        height: 5px;
+        border-radius: 1px;
+        background-color: #cdcdcd;
+      }
+      &:after {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 13px;
+        width: 5px;
+        height: 5px;
+        border-radius: 1px;
+        background-color: #cdcdcd;
+      }
+    }
+    .grid-height {
+      padding: 12px 10px;
+      height: 100%;
+    }
+  }
+
+  .main-right {
+    width: 86%;
+    .breadcrumb-sty {
+      height: $control-height;
+      line-height: 27px;
+      margin-left: 24px;
+      vertical-align: middle;
+      .el-icon-map-location {
+        font-size: 15px;
+        vertical-align: middle;
+        margin-right: 4px;
+        color: $baseColor;
+        margin-top: 7px;
+        float: left;
+      }
+      > span {
+        vertical-align: middle;
+      }
+    }
+  }
+  .review-right .rq-editItem .upload-img {
+    margin-bottom: 0 !important;
+  }
+  .upload-img {
+    margin-bottom: 10px !important;
+    .upload-list {
+      margin-right: 10px;
+      width: 103px;
+      display: inline-block;
+      float: left;
+      position: relative;
+      margin-bottom: 9px;
+      a {
+        font-size: 0;
+        display: block;
+      }
+      a[target="view_window"] {
+        border: dashed 1px #c0ccda;
+        background-color: #fbfdff;
+        border-radius: $control-radius;
+        height: 103px;
+        width: 103px;
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        line-height: 0;
+        .img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+      .tit {
+        @include clamp(2);
+        width: 100%;
+        text-align: left;
+        height: 27px;
+        line-height: 14px;
+        word-break: break-all;
+      }
+      .del {
+        position: absolute;
+        color: $red;
+        right: -6px;
+        top: -6px;
+        font-size: 21px;
+        background: #fff;
+        border-radius: 50%;
+        line-height: 21px;
+      }
+    }
+    .el-upload {
+      .avatar-uploader {
+        float: left;
+        cursor: pointer;
+      }
+    }
+  }
+  .vxe-grid {
+    #uploadImage.upload-img {
+      margin-bottom: 0 !important;
+      min-height: inherit;
+      .upload-list {
+        width: 28px !important;
+        height: $control-height !important;
+        margin: 2px 8px 2px 0; //width为36的时候普通列表高度有问题
+        a {
+          line-height: 1;
+        }
+        .del {
+          right: -4px;
+          top: -2px;
+          font-size: 14px;
+        }
+      }
+      .avatar-uploader {
+        width: 29px !important;
+        height: 29px !important;
+        line-height: 28px !important;
+        font-size: 18px;
+        margin: 2px 0;
+        .avatar-uploader-icon {
+          font-size: inherit !important;
+        }
+      }
+    }
+    .upload-img1 {
+      #uploadImage {
+        white-space: nowrap;
+        > div {
+          float: none !important;
+        }
+      }
+      .avatar-uploader {
+        width: 66px;
+        height: 66px;
+        line-height: 66px;
+        margin-bottom: 0;
+      }
+      .el-upload-list .el-upload-list__item {
+        width: 180px;
+        height: 66px;
+        padding-left: 68px;
+        margin-bottom: 0;
+        margin-right: 6px;
+        .el-upload-list__item-name p:first-child {
+          margin-top: 2px;
+          white-space: nowrap;
+        }
+        .el-upload-list__item-thumbnail {
+          width: 60px;
+          height: 60px;
+          padding: 2px 4px;
+          margin-left: -60px;
+          p {
+            width: 58px;
+            height: 58px;
+          }
+        }
+      }
+    }
+  }
+
+  &.resize-ing {
+    cursor: e-resize !important;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+    .drag-item {
+      -webkit-transition: all 0s ease;
+      -o-transition: all 0s ease;
+      transition: all 0s ease;
+    }
+    &.transverse {
+      cursor: n-resize !important;
+    }
+  }
+
+  // .el-tab-pane .el-tab-pane{
+  //   .detail-wrap .d-cont{height: calc(100vh - 149px);}
+  //   .grid-height{height: calc(100vh - 117px);}
+  // }
+  //.el-tab-pane .el-tab-pane .el-tab-pane .grid-height{height: calc(100vh - 151px);}
+  .mce-container,
+  .mce-container *,
+  .mce-widget,
+  .mce-widget *,
+  .mce-reset {
+    font-size: $fontSizeBase;
+  }
+  .mce-panel {
+    border-color: $border-color-soft;
+    box-shadow: none;
+    width: calc(100% - 1px) !important;
+    .mce-btn button {
+      font-size: $fontSizeBase;
+    }
+    .mce-branding {
+      display: none;
+    }
+    .mce-top-part::before {
+      display: none;
+    }
+  }
+}
+
+.app-main #containt.detail-outBox {
+  height: calc(100vh - 42px);
+  .d-header {
+    margin: 0;
+  }
+  .d-cont {
+    margin: 0;
+    width: 100%;
+  }
+}
+
+.slide-nav {
+  position: fixed;
+  top: 68px;
+  right: 23px;
+  background: #fff;
+  color: $baseColor;
+  border-radius: 10px 0 0 10px;
+  border: solid 1px $baseColor;
+  border-right: none;
+  line-height: 30px;
+  padding: 0 14px;
+  z-index: 99;
+  font-size: $fontSizeBase;
+  &:before {
+    content: "";
+    font-family: element-icons !important;
+    font-size: 14px;
+    vertical-align: bottom;
+    margin-right: 2px;
+    vertical-align: middle;
+  }
+  &:hover {
+    background-color: transparentize($baseColor, 0.83);
+    border-right: none;
+    color: $baseColor;
+    p {
+      width: auto;
+    }
+  }
+  p {
+    display: inline-block;
+    white-space: nowrap;
+    width: 48px;
+    min-width: 48px;
+    vertical-align: middle;
+    margin: 0;
+    overflow: hidden;
+  }
+}
+.slide-wrap {
+  position: absolute;
+  margin-top: 10px;
+  right: -6px;
+  text-align: right;
+  z-index: 999;
+  overflow: auto;
+  max-height: calc(100vh - 163px);
+  .slide-nav {
+    position: static;
+    top: inherit;
+    right: inherit;
+    margin-bottom: 4px;
+    display: inline-block;
+  }
+}