birdpaper-ui/es/timePicker/src/style/timePicker.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

.bp-time-picker {
  position: relative;
}

.bp-trigger-wrapper {
  .bp-time-picker-panel {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.bp-time-picker-panel {
  width: fit-content;
  border-radius: 6px;
  .no-select;

  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 时间选择
.bp-time-table {
  width: fit-content;
  border-radius: 6px;
  border: 1px solid @gary-4;
  background-color: @gary-1;

  &-body {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
  }

  &-time-col {
    width: 60px;
    height: 200px;
    padding: 4px 0;
    overflow-y: hidden !important;

    &:hover {
      overflow-y: auto !important;
    }

    &:not(:first-child) {
      border-left: 1px dashed @gary-4;
    }
  }

  .time-col-scroller-list {
    margin-bottom: 164px;
  }

  &-col-cell {
    padding-left: 24px;
    line-height: 28px;
    background-color: @gary-1;
    transition: 0.2s ease;
    cursor: pointer;

    &-inner {
      display: flex;
      font-size: 12px;
      font-weight: 500;
      color: @gary-9;
      transform: scale(1);
      transition: 0.2s ease;
    }

    &:hover {
      background-color: @gary-2;
      transition: 0.2s ease;

      .bp-time-table-col-cell-inner {
        color: @gary-11;
        transform: scale(1.05);
        font-weight: 600;
        transition: 0.2s ease;
      }
    }
  }

  .active {
    background-color: @gary-3;
    transition: 0.2s ease;

    .bp-time-table-col-cell-inner {
      color: @gary-11;
      transform: scale(1.05);
      font-weight: 600;
      transition: 0.2s ease;
    }
  }

  &-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 12px;
    border-top: 1px dashed @gary-4;
  }
}