吉安感知网项目-前端
张含笑
2026-01-23 cabb1279e9370edfebdef62f6eba272eeae8fe67
applications/task-work-order/src/styles/common/cockpit.scss
@@ -1,142 +1,95 @@
//变量
$gd-placeholder: #86909C;
$form-bg: #F2F3F5;
.gd-table {
  height: 0;
  flex: 1;
  background: transparent !important;
  .el-table--border .el-table__inner-wrapper:after,
  .el-table--border:after,
  .el-table--border:before,
  .el-table__inner-wrapper:before {
    height: 0;
  }
  tr {
    background: transparent !important;
  }
  th.el-table__cell {
    height: 40px;
    border-bottom: 1px solid #DBDFF1 !important;
    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #9292C1;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  td.el-table__cell {
    padding: 9px 0;
    height: 56px;
    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #383874;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  td.operation-btns .cell {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    /* 按钮间距(推荐) */
    white-space: nowrap;
    /* 双保险 */
    a {
      min-width: 28px;
      color: #0075FF;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  th.el-table__cell:not(.fixed-column),
  td.el-table__cell:not(.fixed-column) {
    background: transparent !important;
  }
  .fixed-column {
    background-color: #1A1A2A !important;
  }
}
$form-tips: #86909C;
//灰色变量
$form-bg-gray: #DDE2ED;
$form-tips-gray: #A1A3D4;
.gd-input {
  --bg: #{$form-bg};
  --tips: #{$form-tips};
  &.gray {
    --bg: #{$form-bg-gray};
    --tips: #{$form-tips-gray};
  }
  .el-input__wrapper, .el-textarea__inner {
    padding: 0 8px !important;
    background: $form-bg;
    box-shadow: none !important;
    background: var(--bg);
    border: none;
  }
  .el-input__inner, .el-textarea__inner {
    &::placeholder {
      color: $gd-placeholder;
      color: var(--tips);
    }
  }
  &.is-disabled {
    .el-input__wrapper {
      background: #DDE2ED;
      background: var(--bg);
    }
  }
}
.gd-select {
  .el-select__input {
    color: #8ac3fd !important;
.gd-select, {
  --bg: #{$form-bg};
  --tips: #{$form-tips};
  &.gray {
    --bg: #{$form-bg-gray};
    --tips: #{$form-tips-gray};
  }
  .el-select__wrapper {
    padding: 0 8px;
    background: $form-bg;
    background: var(--bg);
    box-shadow: none !important;
    border: none;
    width: 100%;
  }
  .el-select__placeholder {
    &.is-transparent {
      color: $gd-placeholder !important;
      color: var(--tips) !important;
    }
    &.el-select__selected-item {
      color: #383874;
    }
  }
}
  .el-select {
    --el-select-border-color-hover: rgb(0, 162, 255) !important;
.gd-date-picker {
  --bg: #{$form-bg};
  --tips: #{$form-tips};
  &.gray {
    --bg: #{$form-bg-gray};
    --tips: #{$form-tips-gray};
  }
  .el-input {
    --el-border-color: rgb(0, 162, 255);
  }
  .el-select .el-input__wrapper {
    background-color: #DDE2ED !important;
  }
  box-shadow: none !important;
  background: var(--bg);
  border: none;
  border-radius: 5px;
  box-sizing: border-box !important;
  .el-input__wrapper {
    --el-input-text-color: #DDE2ED !important;
    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;
  }
}
@@ -215,35 +168,6 @@
      background: #012a50 !important;
      border: 1px solid #012a50 !important;
    }
  }
}
.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;
  }
}
@@ -454,10 +378,10 @@
  }
}
.el-overlay-dialog{
.el-overlay-dialog {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  align-items: center; /* 垂直居中 */
}
.gd-dialog {
@@ -489,6 +413,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 +435,7 @@
        margin-bottom: 0;
        .label {
          display: inline-block;
          width: 88px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
@@ -554,6 +480,82 @@
    .save-btn {
      color: #FFFFFF;
    }
  }
}
.gd-table {
  height: 0;
  flex: 1;
  background: transparent !important;
  .el-table--border .el-table__inner-wrapper:after,
  .el-table--border:after,
  .el-table--border:before,
  .el-table__inner-wrapper:before {
    height: 0;
  }
  tr {
    background: transparent !important;
  }
  th.el-table__cell {
    height: 40px;
    border-bottom: 1px solid #DBDFF1 !important;
    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #9292C1;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  td.el-table__cell {
    padding: 9px 0;
    height: 56px;
    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #383874;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  td.operation-btns .cell {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    /* 按钮间距(推荐) */
    white-space: nowrap;
    /* 双保险 */
    a {
      min-width: 28px;
      color: #0075FF;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  th.el-table__cell:not(.fixed-column),
  td.el-table__cell:not(.fixed-column) {
    background: transparent !important;
  }
  .fixed-column {
    background-color: #1A1A2A !important;
  }
}
@@ -618,7 +620,7 @@
        text-transform: none;
      }
      background: #F2F3F5;
      background: $form-bg;
      border: none;
      box-shadow: none;
    }
@@ -701,47 +703,6 @@
  .gd-input {
    width: 200px;
    height: 36px;
    .el-input__wrapper {
    }
    &.is-disabled {
      .el-input__wrapper {
      }
    }
  }
  .gd-date-picker {
  }
  .gd-date-picker-popper {
    .el-picker-panel {
      .el-picker-panel__body-wrapper {
        .el-picker-panel__body {
          .el-date-picker__time-header {
            .el-date-picker__editor-wrap {
              .el-time-panel {
                // 将 time-picker-popper 的样式移到这里
                .el-time-panel__header {
                }
              }
            }
          }
        }
      }
    }
    .el-popper__arrow {
      &::before {
        background: #DDE2ED !important;
        border: 1px solid #DDE2ED !important;
        box-sizing: border-box;
      }
    }
  }
  .gd-search-actions {
@@ -829,7 +790,7 @@
.gd-select-popper {
  border: none;
  background: #F2F3F5 !important;
  background: $form-bg !important;
  .el-select-dropdown {
    .el-scrollbar {
@@ -853,16 +814,55 @@
    }
    .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;
  }
}
.gd-timeline {
  padding-left: 120px;
  .el-timeline-item {
    height: 120px;
    &:nth-last-child(1) {
      height: auto;
    }
    .el-timeline-item__tail {
      left: 15px;
      transform: translate(-15px);
      border-left-color: #4c34ff;
    }
    .el-timeline-item__node {
      width: 32px;
      height: 32px;
      background-color: #161b2c;
      transform: translate(-15px);
      &.el-timeline-item__node--success {
        background-color: #4c34ff;
      }
      .el-timeline-item__icon {
        font-size: 22px;
      }
    }
    .el-timeline-item__wrapper {
      top: 5px;
      font-size: 16px;
      .el-timeline-item__timestamp {
        margin-top: 20px;
      }
    }
  }
}