feat: 灰色输入框

罗广辉

2026-01-23 8c777b3d5eacd4481f2db6624e858dad38b4e153

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

@@ -1,6 +1,93 @@
//变量
$gd-placeholder: #86909C;
$form-bg: #F2F3F5;
$form-tips: #86909C;
$form-bg-gray: #DDE2ED;
$form-tips-gray: #A1A3D4;


.gd-input {
  --el-input-bg-color: #{$form-bg};
  --el-input-placeholder-color: #{$form-tips};

  &.gray {
    --el-input-bg-color: #{$form-bg-gray};
    --el-input-placeholder-color: #{$form-tips-gray};
  }

  .el-input__wrapper, .el-textarea__inner {
    box-shadow: none !important;
    border: none;
  }

  &.is-disabled {
    .el-input__wrapper {
      background: $form-bg;
    }
  }
}

.gd-select, {
  --bg: #{$form-bg};
  --tips: #{$form-tips};

  &.gray {
    --bg: #{$form-bg-gray};
    --tips: #{$form-tips-gray};
  }

  .el-select__wrapper {
    padding: 0 8px;
    background: var(--bg);
    box-shadow: none !important;
    border: none;
  }

  .el-select__placeholder {
    &.is-transparent {
      color: var(--tips) !important;
    }

    &.el-select__selected-item {
      color: #383874;
    }
  }
}

.gd-date-picker {
  --bg: #{$form-bg};
  --tips: #{$form-tips};

  &.gray {
    --bg: #{$form-bg-gray};
    --tips: #{$form-tips-gray};
  }

  box-shadow: none !important;
  background: var(--bg);
  border: none;
  border-radius: 5px;
  box-sizing: border-box !important;

  .el-input__wrapper {
    box-shadow: none !important;
    background-color: transparent !important;

    &.is-focus {
      box-shadow: none !important;
    }
  }

  .el-range-input {
    &::placeholder {
      color: var(--tips);
    }
  }

  .el-range-separator {
    color: #ffffff;
  }
}


.gd-table {
  height: 0;
@@ -75,68 +162,6 @@

  .fixed-column {
    background-color: #1A1A2A !important;
  }
}

.gd-input {
  .el-input__wrapper, .el-textarea__inner {
    padding: 0 8px !important;
    background: $form-bg;
    box-shadow: none !important;
    border: none;
  }

  .el-input__inner, .el-textarea__inner {
    &::placeholder {
      color: $gd-placeholder;
    }
  }


  &.is-disabled {
    .el-input__wrapper {
      background: #DDE2ED;
    }
  }
}

.gd-select {
  .el-select__input {
    color: #8ac3fd !important;
  }

  .el-select__wrapper {
    padding: 0 8px;
    background: $form-bg;
    box-shadow: none !important;
    border: none;
    width: 100%;
  }

  .el-select__placeholder {
    &.is-transparent {
      color: $gd-placeholder !important;
    }

    &.el-select__selected-item {
      color: #383874;
    }
  }

  .el-select {
    --el-select-border-color-hover: rgb(0, 162, 255) !important;
  }

  .el-input {
    --el-border-color: rgb(0, 162, 255);
  }

  .el-select .el-input__wrapper {
    background-color: #DDE2ED !important;
  }

  .el-input__wrapper {
    --el-input-text-color: #DDE2ED !important;
  }
}

@@ -218,34 +243,6 @@
  }
}

.gd-date-picker {
  box-shadow: none !important;
  background: $form-bg;
  border: none;
  border-radius: 5px;
  box-sizing: border-box !important;

  .el-input__wrapper {
    box-shadow: none !important;
    background-color: transparent !important;

    &.is-focus {
      box-shadow: none !important;
    }
  }

  .el-range-input {
    color: #fff;

    &::placeholder {
      color: $gd-placeholder;
    }
  }

  .el-range-separator {
    color: #ffffff;
  }
}

.gd-date-picker-popper {
  background: #DDE2ED !important;
@@ -454,10 +451,10 @@
  }
}

.el-overlay-dialog{
.el-overlay-dialog {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  align-items: center; /* 垂直居中 */
}

.gd-dialog {
@@ -489,6 +486,7 @@
  .el-dialog__body {
    overflow: auto;
    min-height: 5vh;

    .detail-title {
      margin-bottom: 10px;
      font-family: Source Han Sans CN, Source Han Sans CN;
@@ -510,6 +508,7 @@
        margin-bottom: 0;

        .label {
          display: inline-block;
          width: 88px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
@@ -618,7 +617,7 @@
        text-transform: none;
      }

      background: #F2F3F5;
      background: $form-bg;
      border: none;
      box-shadow: none;
    }
@@ -709,9 +708,6 @@
      .el-input__wrapper {
      }
    }
  }

  .gd-date-picker {
  }

  .gd-date-picker-popper {
@@ -829,7 +825,7 @@

.gd-select-popper {
  border: none;
  background: #F2F3F5 !important;
  background: $form-bg !important;

  .el-select-dropdown {
    .el-scrollbar {
@@ -853,13 +849,13 @@
    }

    .el-select-dropdown__empty {
      background: #F2F3F5;
      background: $form-bg;
      border-radius: 0px 0px 8px 8px;
    }
  }

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