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

chenyao

2026-06-04 d07a0fa2f8de9d05bbfef404039a73c6af168569

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

 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;
    }


 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue

@@ -92,7 +92,7 @@
                                />
                            </template>
                        </el-table-column>
                        <el-table-column prop="patrolTaskType" min-width="100">
                        <el-table-column prop="patrolTaskType" min-width="120">
                            <template #header>
                                <span class="required-star">*</span>
                                巡查任务类型
@@ -105,6 +105,7 @@
                                    :options="workOrderTypeXT"
                                    :props="taskTypeCascaderProps"
                                    placeholder="请选择"
                                    collapse-tags
                                    @change="handlePatrolTaskTypeChange($index, $event)"
                                />
                            </template>

 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/index.vue

@@ -11,7 +11,7 @@
            </el-form-item>

            <el-form-item label="任务类型" prop="patrolTaskType">
                <el-cascader class="gd-select gray" popper-class="gd-select-popper" v-model="searchParams.patrolTaskType"
                <el-cascader class="gd-cascader gray" popper-class="gd-cascader-popper" v-model="searchParams.patrolTaskType"
                    :options="workOrderTypeXT" :props="taskTypeFilterCascaderProps" placeholder="请选择" clearable
                    @change="handleSearch" />
            </el-form-item>

 applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue

@@ -100,7 +100,7 @@
                                    v-model="formData.workOrderType"
                                    :options="workOrderTypeXT"
                                    :props="taskTypeCascaderProps"
                                    placeholder="请选择"
                                    collapse-tags
                                    clearable
                                />
                            </el-form-item>

 applications/task-work-order/src/views/orderView/orderManage/orderManage/index.vue

@@ -11,7 +11,7 @@
            </el-form-item>

            <el-form-item label="工单类型" prop="workOrderType">
                <el-cascader class="gd-select gray" popper-class="gd-select-popper" v-model="searchParams.workOrderType"
                <el-cascader class="gd-cascader gray" popper-class="gd-cascader-popper" v-model="searchParams.workOrderType"
                    :options="workOrderTypeXT" :props="taskTypeFilterCascaderProps" placeholder="请选择" clearable
                    @change="handleSearch" />
            </el-form-item>