feat:兼容分辨率低不出现滚动条

chenyao

3 days ago a53ece5036c1fa61a63fe5f9e0cd3519210ab928

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

@@ -10,7 +10,8 @@
$search-item-symbol-bg: #fff;
$search-item-symbol-txt: #4E5969;

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

@@ -31,6 +32,8 @@
    &::placeholder {
      color: var(--tips);
    }

    color: #383874;
  }

  &.is-disabled {
@@ -52,7 +55,13 @@
  color: #ffffff;
}

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

@@ -61,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;
      }
@@ -83,6 +94,17 @@
    &.el-select__selected-item {
      color: #383874;
    }
  }

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

    color: #383874;
  }
}

@@ -122,6 +144,8 @@
    &::placeholder {
      color: var(--tips);
    }

    color: #383874;
  }

  .el-range-separator {
@@ -475,7 +499,7 @@
    .detail-container {
      display: flex;
      justify-content: space-between;
      height: 680px;
      max-height: 680px;

      .detail-left {
        margin-right: 20px;
@@ -518,7 +542,8 @@

        .label {
          display: inline-block;
          width: 88px;
          min-width: 88px;
          flex-shrink: 0;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
@@ -531,6 +556,8 @@

        .val {
          margin-left: 12px;
          flex: 1;
          overflow: hidden;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
@@ -540,13 +567,13 @@
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .el-upload {
      button {
        background: #4C34FF;
        border: none;
        .val-long {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
      }
    }
  }
@@ -659,7 +686,8 @@

  th.el-table__cell:not(.fixed-column),
  td.el-table__cell:not(.fixed-column) {
    background: transparent !important;
    // background: transparent !important;
    background: white !important;
  }

  .el-checkbox {
@@ -713,7 +741,7 @@
}

.gd-pagination-parent {
  padding-top: 30px;
  margin: 16px 0;
  display: flex;
  justify-content: flex-end;

@@ -802,7 +830,13 @@
    color: #4E5969;
  }

  .el-message-box__container {
    display: flex;
    justify-content: center;
  }

  .el-message-box__btns {
    padding-top: 10px;
    display: flex;
    justify-content: center;

@@ -831,7 +865,7 @@
}

.gd-search-form {
  padding-bottom: 20px;
  padding-bottom: 15px;
  display: flex;

  .el-form-item__label {
@@ -847,8 +881,10 @@
    line-height: 36px;
  }

  .gd-select {
    .el-select__wrapper {
  .gd-select,
  .gd-cascader {
    .el-select__wrapper,
    .el-input__wrapper {
      width: 200px;
      height: 36px;
    }
@@ -910,7 +946,7 @@
}

.gd-table-container {
  padding: 12px 20px 30px 20px;
  padding: 25px 20px 1px;
  height: 0;
  flex: 1;
  display: flex;
@@ -931,12 +967,24 @@
  padding-bottom: 20px;

  .el-button {
    min-width: 88px;
    padding: 4px 16px;
    color: #383874;
    border: none;
    height: 32px;
  }

  .el-button:first-child {
    color: #FFFFFF;
  }

  .el-button.is-disabled,
  .el-button.is-disabled:hover {
    background: #ECECF4;
    border: none;
  }

  .el-button:first-child.is-disabled,
  .el-button:first-child.is-disabled:hover {
    background: #4C34FF;
    border: none;
  }
@@ -954,12 +1002,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;
            }
          }
@@ -968,14 +1018,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;
  }
}

@@ -1021,18 +1112,6 @@
  }
}

.gd-tabs {
  .el-tabs__header {
    .el-tabs__item.is-active {
      color: #3247E5;
    }

    .el-tabs__active-bar {
      background: #3247E5;
    }
  }
}

.gd-dialog-table {
  background: transparent !important;

@@ -1048,14 +1127,14 @@

  th.el-table__cell {
    height: 40px;
    border-bottom: 1px solid #DBDFF1 !important;
    border-bottom: 1px solid #E5E6EB !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;
      color: #86909C;
      text-align: left;
      font-style: normal;
      text-transform: none;
@@ -1071,7 +1150,7 @@
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #383874;
      color: #4E5969;
      text-align: left;
      font-style: normal;
      text-transform: none;
@@ -1164,18 +1243,83 @@

.el-popper {
  .el-menu--popup-container {
    .el-menu--popup {
      min-width: auto !important;
    }

    .el-menu {
      .el-menu-item {
        margin: 0 12px !important;
        margin-top: 14px !important;
        padding: 0 12px !important;
        display: flex;
        justify-content: center;
        height: 36px;
        background: transparent !important;

        .el-icon-menu {
          display: none;
        }

        &:first-child {
          margin-top: 0 !important;
        }
      }

      .el-menu-item.is-active {
        &::before {
          display: none;
        }

        background: #4C34FF;
        background: #F6F6FC !important;
        border-radius: 8px 8px 8px 8px;

        span {
          color: #fff;
          color: #384CFF;
        }
      }
    }
  }
}
}

.gd-dialog-form {
  .gd-select,
  .gd-cascader {
    .el-select__wrapper,
    .el-input__wrapper {
      height: 36px;
    }
  }

  .gd-date-picker {
    height: 36px;
  }
  .gd-input {
    height: 36px;
  }
  .gd-upload-btn {
    height: 36px;
  }
  .el-input,
  .el-input-number,
  .el-cascader,
  .el-select {
    min-width: 200px;
    flex: 1;
    width: 100%; // 确保占满容器

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

    .el-input__inner {
      text-align: left;
      color: #383874;

      &::placeholder {
        text-align: left;
      }
    }
  }
}