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

package/src/components/xform/styles/h5-runtime.scss

@@ -0,0 +1,520 @@
+// xform / 移动端 H5 裸类名基线。由 Core 入口加载一次，不包在 .xform-h5 下。
+// 运行时覆盖仍在 h5.scss（.xform-h5 更高特异度）。从历史 style.scss 顶层迁入。
+@import "~@base/styles/variables.scss";
+
+.h5-wrap {
+  .tipsOldVal {
+    .el-popover__reference {
+      display: inline-block;
+      > i {
+        position: static;
+        left: inherit;
+      }
+    }
+  }
+}
+
+/*h5*/
+.h5-layout {
+  position: relative;
+  .pages-box {
+    height: 46px;
+    padding: 0 4px;
+    .vxe-pager--right-wrapper {
+      display: none;
+    }
+    .vxe-pager--num-btn {
+      background: none !important;
+      outline: none;
+      box-shadow: none !important;
+    }
+  }
+}
+.h5-header {
+  background: #fff;
+  max-height: 45px;
+  min-height: 6px;
+  line-height: 45px;
+  font-size: 16px;
+  text-align: center;
+}
+.h5-detail-wrap {
+  padding-bottom: 68px;
+  .h5-item {
+    background: #fff;
+    border-radius: 12px;
+    padding-bottom: 12px;
+    margin: 12px 8px 0;
+    .h5-title {
+      line-height: 45px;
+      border-bottom: solid 1px#f5f4f9;
+      padding: 0 12px;
+      position: relative;
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 15px;
+        height: 14px;
+        width: 4px;
+        background: $baseColor;
+        border-radius: 6px;
+      }
+      .btns {
+        position: absolute;
+        right: 12px;
+        top: 0;
+        .field-wrapper {
+          display: inline-block !important;
+          margin-left: 10px;
+          .button-sty {
+            width: 68px;
+            height: 29px;
+            min-width: inherit;
+          }
+        }
+      }
+    }
+    .h5-form-box {
+      padding: 12px;
+      /* 原 .form-widget-list.m2 两列规则已删：form-widget-list 的 class 写死在
+         transition-group 上，customClass 落在 .grid-cell / el-form-item 上，
+         该选择器永远命中不了。两列布局改由字段选项 h5Span=half 打出的
+         .field-wrapper.h5-half 接管，见 components/xform/styles/h5.scss 块 C。 */
+      .upload-list {
+        margin: 0 0 10px;
+      }
+      .el-upload-list__item {
+        width: 102px;
+        padding: 0;
+        overflow: visible;
+        .el-upload-list__item-thumbnail {
+          margin-left: 0;
+        }
+        .el-upload-list__item-name {
+          width: 100%;
+          height: 38px;
+          margin-bottom: 22px;
+        }
+        .el-upload-list__item-status-label,
+        .el-icon-tagEdit {
+          display: none;
+        }
+        .el-icon-close {
+          background: #bb0707;
+          color: #fff;
+          width: 20px;
+          height: 20px;
+          top: -3px;
+          right: -8px;
+          border-radius: 50%;
+          position: absolute;
+          display: block;
+          opacity: 1;
+          z-index: 99;
+          text-align: center;
+          line-height: 19px;
+        }
+      }
+      .el-input {
+        .el-input__suffix .el-input__icon,
+        .el-input__prefix .el-input__icon {
+          line-height: 36px !important;
+          margin-top: 0;
+        }
+      }
+      .upload-box {
+        border-top: none;
+        margin-top: -10px;
+      }
+    }
+    .el-form-item__label {
+      margin-top: 0;
+      margin-bottom: 0;
+      text-align: left !important;
+      line-height: 38px;
+      &:after {
+        display: none;
+      }
+    }
+    .el-input .el-input__inner {
+      height: 38px !important;
+      line-height: 38px !important;
+      border-radius: 8px;
+    }
+    .el-textarea .el-textarea__inner {
+      border-radius: 8px;
+    }
+    .el-checkbox-group,
+    .el-radio-group {
+      padding: 6px 0;
+    }
+    .h5-header {
+      height: auto;
+    }
+    .h5-list-box {
+      padding: 0;
+      .item {
+        background: #f7f7f7;
+      }
+    }
+    .h5-search-box {
+      display: none;
+    }
+    .h5-form-box {
+      padding-bottom: 0;
+    }
+  }
+
+  .el-tabs.tab-box {
+    .el-tabs__header {
+      background: #fff;
+      line-height: 40px;
+    }
+    .el-tabs__content {
+      padding: 0;
+    }
+  }
+}
+.h5-fixed-top-btns {
+  background-color: #fff;
+  height: 50px !important;
+  padding: 8px 4px;
+  border-bottom: solid 1px $border-color-lighter;
+  .grid-cell {
+    height: 100%;
+    padding: 0;
+  }
+  .button-sty {
+    width: 100%;
+    height: 34px;
+    font-size: 0.825rem;
+  }
+  .form-widget-list,
+  .el-form {
+    display: flex;
+    .field-wrapper {
+      flex: 1;
+      margin: 0 8px;
+    }
+  }
+  .el-form > div {
+    width: 100%;
+    .sub-form-table-column {
+      flex: 1;
+    }
+  }
+}
+.h5-fixed-bottom-btns {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  height: 56px !important;
+  padding: 8px 4px;
+  .grid-cell {
+    height: 100%;
+    padding: 0;
+  }
+  .button-sty {
+    width: 100%;
+    height: 40px;
+    font-size: 0.825rem;
+  }
+  .form-widget-list,
+  .el-form {
+    display: flex;
+    .field-wrapper {
+      flex: 1;
+      margin: 0 8px;
+    }
+  }
+  .el-form > div {
+    width: 100%;
+    .sub-form-table-column {
+      flex: 1;
+    }
+  }
+}
+.h5-search-box {
+  background: #fff;
+  position: relative;
+  height: 45px !important;
+  border-bottom: solid 1px $border-color-lighter;
+  padding: 0 70px 0 12px;
+  .txt {
+    height: 38px;
+    border: none;
+    background: #f7f7f7;
+    border-radius: 38px !important;
+    position: relative;
+    width: 100% !important;
+    .el-input__inner {
+      height: 38px !important;
+      width: 100%;
+      border: none;
+      background: none;
+      line-height: 38px;
+      padding-left: 39px;
+    }
+    .el-input__suffix {
+      position: absolute;
+      left: 12px;
+      width: 20px;
+      right: inherit;
+      transform: inherit !important;
+      top: 7px;
+    }
+    .el-input-group__append {
+      border: none;
+      background: none;
+      .btn {
+        border: none;
+        background: $baseColor;
+        width: 53px;
+        position: absolute;
+        right: 26px;
+        top: 14px;
+        padding: 0;
+        height: 30px;
+        border-radius: 30px;
+        outline: none;
+        color: #fff;
+      }
+    }
+  }
+  .icon-screen {
+    position: absolute;
+    right: 12px;
+    top: 0;
+    line-height: 38px;
+    font-size: $fontSizeBase;
+    i {
+      margin-right: 5px;
+    }
+  }
+}
+.h5-list-box {
+  padding: 12px;
+
+  .item {
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    padding-bottom: 6px;
+    position: relative;
+    border: solid 1px $border-color-lighter;
+    .t1 {
+      position: relative;
+      padding: 6px 16px 4px 12px;
+      overflow: hidden;
+      display: flex;
+      line-height: 38px;
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 18px;
+        height: 14px;
+        width: 4px;
+        background: $baseColor;
+        border-radius: 7px;
+      }
+      > b {
+        font-size: 14px;
+        vertical-align: middle;
+      }
+      > span {
+        vertical-align: middle;
+        flex: 1;
+      }
+      .status {
+        color: #fff;
+        background: $baseColor;
+        min-width: 68px;
+        height: $control-height;
+        border-radius: 0 0 0 15px;
+        padding-left: 22px;
+        line-height: 28px;
+        font-size: $fontSizeBase;
+        margin-top: 5px;
+        &:before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 12px;
+          width: 4px;
+          height: 4px;
+          margin-top: -2px;
+          background: #fff;
+          border-radius: 5px;
+          margin-top: -2px;
+          background: #fff;
+        }
+      }
+      + .t2 {
+        margin-top: 0;
+      }
+    }
+    .t2 {
+      font-size: $fontSizeBase;
+      color: $text-color-muted;
+      overflow: hidden;
+      padding-bottom: 8px;
+      margin-top: 10px;
+      > dl {
+        width: 100%;
+        display: inline-block;
+        padding: 3px 14px;
+        margin-bottom: 0;
+        line-height: 24px;
+        &.m2 {
+          width: 50%;
+        }
+        > div {
+          display: flex;
+        }
+        dt {
+          display: inline-block;
+          font-weight: 400;
+          width: 74px;
+          padding-right: 4px;
+          word-break: break-all;
+        }
+        dd {
+          display: inline-block;
+          flex: 1;
+        }
+        .field-wrapper {
+          display: inline-block;
+          width: calc(100vw - 159px);
+        }
+      }
+    }
+    .btns {
+      border-top: solid 1px $border-color-lighter;
+      padding: 9px 12px 4px;
+      text-align: right;
+      position: relative;
+      .field-wrapper {
+        display: inline-block !important;
+      }
+      .button-sty {
+        border: solid 1px $baseColor;
+        padding: 0 4px;
+        min-width: 64px;
+        line-height: 28px;
+        margin: 0 0 0 8px;
+        display: inline-block;
+        font-size: $fontSizeBase;
+        height: 30px;
+        color: $baseColor;
+      }
+      .checkbox_fl {
+        line-height: 30px;
+        position: absolute;
+        left: 20px;
+        top: 9px;
+        .el-checkbox__inner:after {
+          left: 0;
+        }
+      }
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .del-btn {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      background: #bf1414;
+      color: #fff;
+      width: 26px;
+      height: 26px;
+      text-align: center;
+      line-height: 28px;
+      border-radius: 50%;
+      cursor: pointer;
+      z-index: 6;
+    }
+    &.checked {
+      border: solid 1px $baseColor;
+      &:before {
+        content: "\e6da";
+        position: absolute;
+        left: -1px;
+        bottom: -1px;
+        font-family: element-icons !important;
+        background-color: $baseColor;
+        color: #fff;
+        width: 32px;
+        height: 24px;
+        line-height: 34px;
+        clip-path: polygon(0 100%, 100% 100%, 0 0);
+        font-size: $fontSizeBase;
+        padding-left: 3px;
+        border-radius: 0 0 0 10px;
+      }
+    }
+  }
+}
+
+.h5-tab-nav {
+  background: #fff;
+  height: 45px !important;
+  white-space: nowrap;
+  line-height: 45px;
+  .item {
+    display: inline-block;
+    text-align: center;
+    padding: 0 26px;
+    b {
+      position: relative;
+      font-weight: 400;
+      display: inline-block;
+      &:before {
+        content: "";
+        left: 0;
+        right: 0;
+        bottom: 4px;
+        height: 3px;
+        background-color: $baseColor;
+        display: none;
+        position: absolute;
+        box-shadow: 0 3px 5px transparentize($baseColor, 0.7);
+        border-radius: 10px;
+      }
+    }
+    &.on {
+      color: $baseColor;
+      b:before {
+        display: block;
+      }
+    }
+  }
+}
+.h5-oper-btns {
+  background: #fff;
+  padding: 0 12px 8px;
+  margin-bottom: 6px;
+  .tit {
+    display: inline-block;
+    padding: 3px 10px;
+    margin-left: -12px;
+    margin-bottom: 7px;
+    margin-top: 7px;
+  }
+  .el-form {
+    .sub-form-table-column {
+      display: inline-block !important;
+      margin-left: 8px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+  .form-widget-list .field-wrapper {
+    padding: 5px 5px 0;
+  }
+}