feat:feat:更新组件el-cascader 样式

chenyao

2026-06-04 d07a0fa2f8de9d05bbfef404039a73c6af168569

 applications/task-work-order/src/styles/common/cockpit.scss

@@ -55,12 +55,13 @@
  color: #ffffff;
}

.gd-select,.gd-input,.gd-input-text,.gd-date-picker{
.gd-select,.gd-input,.gd-input-text,.gd-date-picker,.gd-cascader{
  .is-disabled{
    opacity: 0.6;
  }
}
.gd-select {
.gd-select,
.gd-cascader {
  --bg: #{$form-bg};
  --tips: #{$form-tips};

@@ -69,14 +70,16 @@
    --tips: #{$form-tips-gray};
  }

  .el-select__wrapper {
  .el-select__wrapper,
  .el-input__wrapper {
    padding: 0 8px;
    background: var(--bg);
    box-shadow: none !important;
    border: none;
    min-height: 36px; // 确保最小高度一致


    .el-select__suffix {
    .el-select__suffix,
    .el-input__suffix {
      .el-icon {
        color: $search-item-icon-color;
      }
@@ -91,6 +94,16 @@
    &.el-select__selected-item {
      color: #383874;
    }
  }

  .el-input__inner {
    height: 100%; // 让内部 input 撑满
    line-height: 36px;
    &::placeholder {
      color: var(--tips);
    }

    color: #383874;
  }
}

@@ -866,8 +879,10 @@
    line-height: 36px;
  }

  .gd-select {
    .el-select__wrapper {
  .gd-select,
  .gd-cascader {
    .el-select__wrapper,
    .el-input__wrapper {
      width: 200px;
      height: 36px;
    }
@@ -985,12 +1000,14 @@
            color: $search-item-symbol-txt;

            &.hover {
              background-color: rgba(0, 120, 233, 0.63) !important;
              // background-color: rgba(0, 120, 233, 0.63) !important;
              color: #383874;
            }

            &.selected {
              color: #8ac3fd !important;
            &.selected,
            &.is-selected {
              // color: #8ac3fd !important;
              color: #383874;
              font-weight: 700;
            }
          }
@@ -999,14 +1016,55 @@
    }

    .el-select-dropdown__empty {
      background: $form-bg;
      background: $search-item-symbol-bg;
      border-radius: 0px 0px 8px 8px;
    }
  }

  .el-popper__arrow::before {
    background: $form-bg !important;
    border: 1px solid #F2F3F5 !important;
    background: $search-item-symbol-bg !important;
    border: 1px solid $search-item-symbol-bg !important;
  }
}

.gd-cascader-popper {
  border: none;
  background: $search-item-symbol-bg !important;

  .el-cascader-panel {
    background: transparent !important;
  }

  .el-cascader-menu {
    background: transparent !important;
    border-right: 1px solid #DDE2ED !important;
    color: $search-item-symbol-txt;

    &:last-child {
      border-right: none !important;
    }

    .el-cascader-node {
      color: $search-item-symbol-txt;

      &.is-selectable.in-active-path,
      &.in-active-path,
      &:hover {
        // background-color: rgba(0, 120, 233, 0.63) !important;
        color: #383874;
      }

      &.is-active {
        color: #383874;
        // color: #8ac3fd !important;
        font-weight: 700;
      }
    }
  }

  .el-popper__arrow::before {
    background: $search-item-symbol-bg !important;
    border: 1px solid $search-item-symbol-bg !important;
  }
}

@@ -1223,8 +1281,10 @@
}

.gd-dialog-form {
  .gd-select {
    .el-select__wrapper {
  .gd-select,
  .gd-cascader {
    .el-select__wrapper,
    .el-input__wrapper {
      height: 36px;
    }
  }
@@ -1239,11 +1299,15 @@
    height: 36px;
  }
  .el-input,
  .el-input-number {
  .el-input-number,
  .el-cascader,
  .el-select {
    min-width: 200px;
    flex: 1;
    width: 100%; // 确保占满容器

    .el-input__wrapper {
    .el-input__wrapper,
    .el-select__wrapper {
      padding: 0 8px;
    }