ff-ui-plus 2.0.7

package/packages/theme-chalk/src/module-form.scss

@@ -0,0 +1,335 @@
+.t_module_form {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  height: 100%;
+  text-align: left;
+  background-color: var(--el-bg-color-page);
+  overflow: auto;
+
+  .scroll_wrap {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .el-page-header {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: var(--el-text-color-primary);
+      font-size: 14px;
+      font-variant: tabular-nums;
+      line-height: 1.5;
+      list-style: none;
+      -webkit-font-feature-settings: "tnum";
+      font-feature-settings: "tnum";
+      position: relative;
+      padding: 16px 24px;
+      background-color: var(--el-bg-color);
+
+      .el-page-header__breadcrumb {
+        margin: 0;
+      }
+
+      .el-page-header__left {
+        color: var(--el-text-color-primary);
+        align-items: center;
+        margin: 0;
+        width: 100%;
+
+        .el-icon-back {
+          font-weight: bold;
+        }
+
+        .el-page-header__title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+      }
+
+      .el-page-header__content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex: 60%;
+
+        .sub_title {
+          flex: 30%;
+        }
+
+        .extra {
+          flex: 70%;
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+
+    .noContent {
+      .el-page-header__left {
+        .el-divider {
+          display: none;
+        }
+      }
+    }
+
+    // 是否显示返回箭头
+    .isShowBack {
+      .el-page-header__left {
+        .el-page-header__icon {
+          display: none;
+        }
+      }
+    }
+
+    .t_detail {
+      .el-collapse {
+        border: none;
+
+        .el-collapse-item {
+          background-color: var(--el-bg-color);
+          margin-top: 10px;
+          border: none;
+
+          .el-collapse-item__header {
+            border-bottom: 1px solid var(--el-border-color);
+            position: relative;
+            padding-left: 35px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .t_btn {
+              margin-right: 15px;
+            }
+
+            .el-collapse-item__arrow {
+              color: inherit;
+              font-style: normal;
+              line-height: 0;
+              text-align: center;
+              text-transform: none;
+              vertical-align: -0.125em;
+              text-rendering: optimizeLegibility;
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              position: absolute;
+              top: 17px;
+              left: 14px;
+              display: inline-block;
+              font-size: 14px;
+            }
+          }
+
+          .el-collapse-item__wrap {
+            padding: 16px;
+            border: none;
+
+            .el-collapse-item__content {
+              padding-bottom: 0;
+            }
+          }
+        }
+
+        // Title文字加粗
+        .title_bold {
+          .collapse-item_title {
+            font-weight: bold;
+          }
+        }
+
+        // 隐藏手风琴title
+        .noTitle {
+          margin-top: 0;
+
+          > div {
+            &:first-child {
+              display: none;
+            }
+          }
+        }
+
+        // 禁用时取消收缩功能及隐藏icon
+        .disabledStyle {
+          .el-collapse-item__header {
+            color: var(--el-collapse-header-text-color);
+            cursor: default;
+            padding-left: 20px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .el-collapse-item__arrow {
+              display: none;
+            }
+
+            .t_btn {
+              margin-right: 15px;
+            }
+          }
+        }
+      }
+    }
+
+    .t_form {
+      .el-collapse {
+        border: none;
+
+        .el-collapse-item {
+          background-color: var(--el-bg-color);
+          margin-top: 10px;
+          border: none;
+
+          .el-collapse-item__header {
+            border-bottom: 1px solid var(--el-border-color);
+            position: relative;
+            padding-left: 35px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .t_btn {
+              margin-right: 15px;
+            }
+
+            .el-collapse-item__arrow {
+              color: inherit;
+              font-style: normal;
+              line-height: 0;
+              text-align: center;
+              text-transform: none;
+              vertical-align: -0.125em;
+              text-rendering: optimizeLegibility;
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              position: absolute;
+              top: 17px;
+              left: 14px;
+              display: inline-block;
+              font-size: 14px;
+            }
+          }
+
+          .el-collapse-item__wrap {
+            padding: 16px;
+            border: none;
+
+            .el-collapse-item__content {
+              padding-bottom: 0;
+            }
+          }
+        }
+
+        // Title文字加粗
+        .title_bold {
+          .collapse-item_title {
+            font-weight: bold;
+          }
+        }
+
+        // 隐藏手风琴title
+        .noTitle {
+          > div {
+            &:first-child {
+              display: none;
+            }
+          }
+        }
+
+        // 禁用时取消收缩功能及隐藏icon
+        .disabledStyle {
+          .el-collapse-item__header {
+            color: var(--el-collapse-header-text-color);
+            cursor: default;
+            padding-left: 20px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .el-collapse-item__arrow {
+              display: none;
+            }
+
+            .t_btn {
+              margin-right: 15px;
+            }
+          }
+        }
+      }
+    }
+
+    .t_form {
+      .el-collapse-borderless {
+        background-color: var(--el-bg-color);
+
+        .noTitle {
+          .el-collapse-header {
+            display: none;
+          }
+        }
+
+        .el-collapse-item {
+          background-color: var(--el-bg-color);
+          margin-top: 10px;
+          border: none;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .el-collapse-header {
+            border-bottom: 1px solid var(--el-border-color);
+          }
+
+          .el-collapse-content-box {
+            padding: 16px;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      padding: 0;
+      margin: 0;
+
+      .el-tabs {
+        .el-tabs__header {
+          margin: 0;
+          padding: 0 10px;
+          background-color: var(--el-bg-color);
+        }
+
+        .el-tabs__nav-wrap {
+          &::after {
+            height: 1px;
+          }
+        }
+      }
+    }
+  }
+
+  .handle_wrap {
+    position: fixed;
+    z-index: 4;
+    right: 0;
+    bottom: 0px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: var(--el-bg-color);
+    border-top: 1px solid var(--el-border-color);
+    text-align: right;
+    width: 100%;
+
+    .el-button:last-child {
+      margin-right: 15px;
+    }
+  }
+}

package/packages/theme-chalk/src/query-condition.scss

@@ -0,0 +1,132 @@
+.t-query-condition.el-form {
+  position: relative;
+  display: grid;
+  gap: 2px 8px;
+  margin-bottom: -7px;
+  text-align: left;
+
+  .el-select,
+  .el-date-editor,
+  .ant-calendar-picker {
+    width: 100%;
+  }
+
+  .flex_end {
+    grid-area: submit_btn;
+    margin-top: 2px;
+
+    .el-form-item__content {
+      display: flex;
+      // justify-content: flex-end;
+      align-items: center;
+      overflow: visible !important;
+    }
+  }
+
+  .btn {
+    .el-form-item__content {
+      display: flex;
+      // justify-content: flex-end;
+    }
+
+    .more_dropdown_icon {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+
+  .btn_flex_end {
+
+
+    .el-form-item__content {
+      justify-content: flex-end;
+    }
+  }
+
+  .btn_label_position_top {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .el-form-item {
+    // display: flex;
+    margin-bottom: 10px;
+
+    .el-form-item__label {
+      flex-shrink: 0;
+      min-width: 60px;
+      padding-left: 8px;
+    }
+
+    .el-form-item__content {
+      flex-grow: 1;
+      // overflow: hidden;
+      margin-left: 0 !important;
+    }
+  }
+
+  .render_label {
+    .el-form-item__label {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &::before {
+        margin-top: 1px;
+      }
+    }
+  }
+
+  .render_label_position_top,
+  .render_label_position_left {
+    .el-form-item__label {
+      justify-content: flex-start;
+    }
+  }
+
+  .btn_check {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn_reset {
+    position: relative;
+    top: -1px;
+    margin-left: 8px;
+  }
+}
+
+.t_query_condition_more.el-popover {
+  padding: 15px;
+
+  .inside_box {
+    display: flex;
+    flex-direction: column;
+
+    .inside_box_title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .inside_box_main {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(100px, 50%));
+
+      .el-checkbox {
+        display: flex;
+        align-items: center;
+
+        .el-checkbox__label {
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          min-width: 90px;
+        }
+      }
+    }
+  }
+}

package/packages/theme-chalk/src/select-icon.scss

@@ -0,0 +1,61 @@
+.t_select_icon {
+  width: 100%;
+
+  .el-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--el-text-color-regular);
+
+    .el-icon {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .t_select_icon_dialog {
+    .el-dialog__body {
+      padding: 25px 20px 20px;
+
+      .el-input {
+        margin-bottom: 10px;
+      }
+
+      .icon-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 115px);
+        justify-content: space-evenly;
+        max-height: 60vh;
+
+        .icon-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 42px;
+          padding: 20px 30px;
+          cursor: pointer;
+          transition: all 0.2s;
+
+          svg {
+            width: 30px;
+            height: 30px;
+          }
+
+          &:hover {
+            transform: scale(1.3);
+          }
+
+          &.icon-active {
+            color: var(--el-color-primary);
+          }
+
+          span {
+            margin-top: 5px;
+            line-height: 20px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}

package/packages/theme-chalk/src/select-table.scss

@@ -0,0 +1,71 @@
+.t-select-table {
+  // 单选样式
+  .radioStyle {
+    .el-radio {
+      .el-radio__label {
+        display: none;
+      }
+      &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+        box-shadow: none;
+      }
+    }
+    .el-table__row {
+      cursor: pointer;
+    }
+  }
+  // 键盘事件开启选择高亮
+  .keyUpStyle {
+    .el-table__body {
+      tbody {
+        .current-row {
+          color: var(--el-color-primary) !important;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  // 键盘事件开启选中行样式
+  .selected_row_style {
+    color: var(--el-color-primary);
+    cursor: pointer;
+  }
+  // 选中行样式
+  .highlightCurrentRow {
+    .current-row {
+      color: var(--el-color-primary);
+      cursor: pointer;
+    }
+  }
+  .t-table-select__table {
+    padding: 10px;
+
+    .el-table__body,
+    .el-table__header {
+      margin: 0;
+    }
+    // 条件查询组件样式
+    .table_query_condition {
+      width: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding: 10px;
+    }
+    .header_wrap {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .t-table-select__page {
+    padding-top: 5px;
+    padding-right: 10px;
+    .el-pagination {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: calc(2% - 20px);
+      background-color: var(--el-table-tr-bg-color);
+    }
+  }
+}

package/packages/theme-chalk/src/select.scss

@@ -0,0 +1,7 @@
+.t_select {
+  .el-select-dropdown {
+    .all_checkbox {
+      margin-left: 20px;
+    }
+  }
+}

package/packages/theme-chalk/src/step-wizard.scss

@@ -0,0 +1,51 @@
+.t_step-wizard {
+  position: relative;
+
+  .el-steps--simple {
+    .el-step__head {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .content-step-main {
+    .step-last {
+      .icon-success {
+        color: var(--el-color-primary);
+        font-size: 95px;
+        margin-top: 40px;
+      }
+
+      .success-margin {
+        color: var(--el-color-primary);
+        margin-bottom: 70px;
+      }
+    }
+
+    .step_btn {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      background: var(--el-bg-color);
+    }
+  }
+
+  .flex-box {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .flex-ver {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+}