bhd-components 0.10.32 → 0.10.34

package/esm/bhdDatePicker/index.module.less

@@ -1,1007 +1,1007 @@
-@import "../theme/variable.less";
-// 包裹组件样式
-.bhdDatePicker {
-  width: 100%;
-
-  :global {
-    .bhd-picker {
-      // table 模式下显示样式
-      &.table-date-picker {
-        * {
-          background: transparent;
-          border: none;
-        }
-        position: relative;
-        top: 0;
-        left: 0;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-        padding: 0;
-        // margin-left: -78px;
-        cursor: pointer;
-        .bhd-picker-input {
-          &:nth-child(1) {
-            width: 78px;
-            opacity: 0;
-            & > input {
-              cursor: pointer;
-              &::placeholder {
-                display: none !important;
-                opacity: 0;
-              }
-            }
-          }
-          &:nth-child(3) {
-            display: none;
-          }
-        }
-        .bhd-picker-range-separator {
-          display: none;
-        }
-        .bhd-picker-active-bar {
-          display: none;
-        }
-        .bhd-picker-suffix {
-          color: @color-text-Tr;
-        }
-        .bhd-picker-clear {
-          display: none;
-        }
-      }
-    }
-  }
-}
-// 弹出日历样式
-.bhdDatePickerPopup {
-  // 单选、范围、日程安排
-  &.singlePicker,
-  &.rangePicker,
-  &.extraPicker {
-    :global {
-      // 时间
-      .bhd-picker-time-panel {
-        .bhd-picker-time-panel-column {
-          margin: 0;
-
-          & > li.bhd-picker-time-panel-cell {
-            margin: 0;
-            .bhd-picker-time-panel-cell-inner {
-              width: 56px;
-              height: 32px;
-              line-height: 32px;
-              padding: 0;
-              text-align: center;
-              border-radius: 0;
-            }
-          }
-          &:hover {
-            &::-webkit-scrollbar {
-              width: 0;
-            }
-          }
-          &:not(:first-child) {
-            border: none;
-          }
-        }
-      }
-
-      // 时间与天相邻
-      .bhd-picker-date-panel + .bhd-picker-time-panel {
-        padding: 0;
-        gap: 0;
-        .bhd-picker-header {
-          height: 48px;
-          .bhd-picker-header-view {
-            line-height: 48px !important;
-          }
-        }
-      }
-
-      // 天、周
-      .bhd-picker-date-panel,
-      .bhd-picker-week-panel {
-        width: 272px;
-        & .bhd-picker-content {
-          width: 224px;
-          margin: 0 auto;
-          & th {
-            width: 32px;
-            height: 32px;
-          }
-        }
-
-        & .bhd-picker-cell {
-          padding: 0;
-          padding-top: 8px;
-
-          &::before {
-            top: calc(50% + 4px);
-            height: 32px;
-          }
-
-          & .bhd-picker-cell-inner {
-            width: 32px;
-            height: 32px;
-            line-height: 32px;
-          }
-        }
-
-        & .bhd-picker-body {
-          position: relative;
-
-          // 设置标题背景色
-          &::before {
-            content: "";
-            width: 100%;
-            height: 32px;
-            border-radius: 4px;
-            position: absolute;
-            top: 0;
-            left: 0;
-            background-color: @color-background-filltertiary-Tr;
-          }
-        }
-      }
-
-      //周
-      .bhd-picker-week-panel {
-        .bhd-picker-week-panel-row:hover {
-          color: @color-background-primary-base !important;
-          & td {
-            &:before {
-              background-color: @color-background-primary-weak !important;
-            }
-
-            .bhd-picker-cell-inner {
-              color: @color-background-primary-base !important;
-            }
-          }
-        }
-      }
-
-      // 月
-      .bhd-picker-month-panel {
-        width: 272px;
-        & .bhd-picker-body {
-          width: 240px;
-        }
-        & .bhd-picker-content {
-          height: 200px;
-          width: 240px;
-
-          & tbody {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 24px;
-
-            & tr {
-              display: flex;
-              gap: 24px;
-            }
-          }
-        }
-
-        & .bhd-picker-cell {
-          padding: 0;
-          &::before {
-            height: 32px;
-            width: 64px;
-          }
-
-          & .bhd-picker-cell-inner {
-            width: 64px;
-            height: 32px;
-            line-height: 32px;
-            padding: 0;
-          }
-        }
-      }
-
-      //季度
-      .bhd-picker-quarter-panel {
-        & .bhd-picker-content {
-          height: 32px;
-        }
-        & .bhd-picker-cell {
-          padding: 0;
-          &::before {
-            height: 32px;
-          }
-
-          & .bhd-picker-cell-inner {
-            height: 32px;
-            line-height: 32px;
-            padding: 0;
-          }
-        }
-      }
-
-      // 年
-      .bhd-picker-year-panel {
-        width: 272px;
-        & .bhd-picker-body {
-          width: 240px;
-        }
-        & .bhd-picker-content {
-          height: 200px;
-          width: 240px;
-
-          & tbody {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 24px;
-
-            & tr {
-              display: flex;
-              gap: 24px;
-            }
-          }
-        }
-
-        & .bhd-picker-cell {
-          padding: 0;
-          &::before {
-            height: 32px;
-            width: 64px;
-          }
-
-          & .bhd-picker-cell-inner {
-            width: 64px;
-            height: 32px;
-            line-height: 32px;
-            padding: 0;
-          }
-        }
-      }
-
-
-      // 多面板
-      .bhd-picker-panels {
-        & .bhd-picker-panel {
-          border: none;
-        }
-      }
-
-      // 设置底部区域
-      .bhd-picker-footer {
-        padding: 12px 16px;
-        align-items: flex-start;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        gap: 10px;
-        align-self: stretch;
-        border-top: 1px solid @color-background-fillsecondary-Tr !important;
-        line-height: 30px !important;
-        align-items: center;
-
-        & .bhd-picker-footer-extra {
-          padding: 0;
-          line-height: 30px;
-          width: 100%;
-          display: flex;
-          flex-direction: column-reverse;
-          gap: 8px;
-
-          &:not(:last-child) {
-            border-bottom: none;
-          }
-        }
-
-        & .bhd-picker-ranges {
-          padding: 0;
-          line-height: 30px;
-          height: 30px;
-          gap: 10px;
-          align-items: center;
-          justify-content: flex-end;
-          width: 100%;
-          & > li {
-            line-height: 30px;
-            height: 30px;
-            margin: 0;
-            &.bhd-picker-ok {
-              font-size: 0;
-            }
-          }
-
-          & .bhd-picker-now {
-            color: @color-background-primary-base;
-            .bhd-picker-now-btn {
-              color: @color-background-primary-base;
-            }
-          }
-          // & +.bhddatepicker-picker-footer-extra-extend{
-
-          // }
-        }
-
-        .bhd-picker-ranges + .bhddatepicker-picker-footer-extra-extend{
-          padding-bottom: 8px;
-          &::after {
-            content: "";
-            width: calc(100% + 100px);
-            height: 0px;
-            border-bottom: 1px solid @color-background-fillsecondary-Tr;
-            position: absolute;
-            left: -50px;
-            bottom: 0;
-          }
-        }
-
-        // 自己扩展
-        & .bhddatepicker-picker-footer-extra-extend {
-          position: relative;
-          
-        }
-
-        // 今天按钮
-        .bhd-picker-today-btn {
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 14px;
-          color: @color-background-primary-base !important;
-        }
-
-        .bhd-picker-now-btn {
-          color: @color-background-primary-base;
-        }
-
-        .bhd-picker-presets {
-          min-width: unset;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 14px;
-          color: @color-background-primary-base;
-          display: flex;
-          gap: 10px;
-          flex-direction: row-reverse;
-          justify-content: flex-start;
-          align-items: center;
-
-          .bhd-picker-preset-btn {
-            color: @color-background-primary-base;
-            height: 16px;
-            line-height: 16px;
-          }
-        }
-
-        .bhd-picker-ok {
-          & .bhd-btn-primary {
-            height: 30px;
-            padding: 0 16px;
-            line-height: 30px;
-            border: none;
-            box-shadow: none;
-
-            &:disabled,
-            &.disabled {
-              background: @color-background-fillsecondary-Tr;
-              color: @color-text-tertiary-Tr;
-              cursor: no-drop;
-              border: none;
-              box-shadow: none;
-            }
-          }
-        }
-
-        // 隐藏默认的当前
-        // & > a {
-        //   // display: none;
-        // }
-        // & > .bhd-picker-ranges {
-        //   display: none;
-        // }
-
-        & > a.bhd-picker-today-btn {
-          position: absolute;
-          right: 91px;
-          bottom: 20px;
-        }
-      }
-
-      // 默认颜色
-      .bhd-picker-cell-in-view {
-        color: @color-text-Secondary-Tr;
-      }
-
-      //禁用后的今天
-      .bhd-picker-cell-disabled.bhd-picker-cell-today
-        .bhd-picker-cell-inner::before {
-        border-color: @color-background-primary-base !important;
-      }
-      // 禁用
-      .bhd-picker-cell-disabled {
-        color: @color-text-quaternary-Tr !important;
-      }
-    }
-
-    // 显示时间选择面板时
-    &.showTime {
-      :global {
-        .bhd-picker-footer {
-          justify-content: flex-end;
-          .bhd-picker-footer-extra {
-            width: auto;
-          }
-          .bhd-picker-ranges {
-            width: auto;
-          }
-        }
-      }
-      &.showExtraFooter {
-        :global {
-          .bhd-picker-footer {
-            justify-content: flex-start;
-            flex-direction: column;
-            .bhd-picker-footer-extra {
-              width: 100% !important;
-            }
-            .bhd-picker-ranges {
-              width: 100% !important;
-              &.showPresets {
-                position: absolute;
-                width: auto !important;
-                bottom: 12px;
-                right: 100px;
-                &.showNow {
-                  right: 128px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    //不显示确认按钮时，今天按钮的位置
-    &.noNeedConfirm {
-      :global {
-        .bhd-picker-footer {
-          & > a.bhd-picker-today-btn {
-            right: 17px;
-          }
-        }
-      }
-    }
-  }
-
-  // 单选
-  &.singlePicker {
-    :global {
-      .bhd-picker-date-panel,
-      .bhd-picker-week-panel {
-        width: 272px;
-        & .bhd-picker-content {
-          width: 224px;
-          margin: 0 auto;
-          & th {
-            width: 32px;
-            height: 32px;
-          }
-        }
-
-        & .bhd-picker-cell {
-          padding: 0;
-          padding-top: 8px;
-
-          &::before {
-            top: calc(50% + 4px);
-            height: 32px;
-          }
-
-          & .bhd-picker-cell-inner {
-            width: 32px;
-            height: 32px;
-            line-height: 32px;
-          }
-        }
-
-        .bhd-picker-header-super-prev-btn,
-        .bhd-picker-header-super-next-btn {
-          display: none !important;
-        }
-      }
-
-      .bhd-picker-week-panel {
-        width: 304px;
-      }
-
-      .bhd-picker-month-panel {
-        width: 272px;
-        & .bhd-picker-body {
-          width: 240px;
-        }
-        & .bhd-picker-content {
-          height: 200px;
-          width: 240px;
-        }
-
-        & .bhd-picker-cell {
-          padding: 0;
-          &::before {
-            height: 32px;
-            width: 64px;
-          }
-
-          & .bhd-picker-cell-inner {
-            width: 64px;
-            height: 32px;
-            line-height: 32px;
-            padding: 0;
-          }
-        }
-      }
-
-      .bhd-picker-year-panel {
-        width: 272px;
-        & .bhd-picker-body {
-          width: 240px;
-        }
-        & .bhd-picker-content {
-          height: 200px;
-          width: 240px;
-        }
-
-        & .bhd-picker-cell {
-          padding: 0;
-          &::before {
-            height: 32px;
-            width: 64px;
-          }
-
-          & .bhd-picker-cell-inner {
-            width: 64px;
-            height: 32px;
-            line-height: 32px;
-            padding: 0;
-          }
-        }
-      }
-
-      // // 设置 当天的位置
-      // .bhd-picker-date-panel + .bhd-picker-footer {
-      //   justify-content: center !important;
-      // }
-    }
-  }
-
-  //范围选择
-  &.rangePicker {
-    :global {
-      .bhd-picker-date-panel {
-        .bhd-picker-header-super-prev-btn,
-        .bhd-picker-header-super-next-btn {
-          display: none !important;
-        }
-        .bhd-picker-header-prev-btn,
-        .bhd-picker-header-next-btn {
-          visibility: visible !important;
-        }
-      }
-      //范围选择公共
-      .bhd-picker-cell-in-view.bhd-picker-cell-in-range.bhd-picker-cell-range-hover-end
-        .bhd-picker-cell-inner::after {
-        left: 0;
-      }
-      .bhd-picker-cell-in-view.bhd-picker-cell-in-range.bhd-picker-cell-range-hover-start
-        .bhd-picker-cell-inner::after {
-        right: 0;
-      }
-      .bhd-picker-cell.bhd-picker-cell-in-view.bhd-picker-cell-in-range {
-        .bhd-picker-cell-inner::after {
-          right: 0 !important;
-        }
-      }
-
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-start::before {
-        left: 0;
-      }
-
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:not(
-          .bhd-picker-cell-in-range
-        ):not(.bhd-picker-cell-range-start):not(
-          .bhd-picker-cell-range-end
-        )::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end:not(
-          .bhd-picker-cell-in-range
-        ):not(.bhd-picker-cell-range-start):not(
-          .bhd-picker-cell-range-end
-        )::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start-single::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-end-near-hover::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-start-near-hover::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-end-single::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:not(
-          .bhd-picker-cell-in-range
-        )::after {
-        height: 32px;
-        border: none;
-        background: @color-background-primary-weak;
-      }
-      .bhd-picker-year-panel .bhd-picker-cell::before,
-      .bhd-picker-year-panel .bhd-picker-cell::before {
-        left: 0;
-        border-radius: 4px;
-      }
-
-      // 日期
-      .bhd-picker-date-panel {
-        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:not(
-            .bhd-picker-cell-in-range
-          ):not(.bhd-picker-cell-range-start):not(
-            .bhd-picker-cell-range-end
-          )::after,
-        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end:not(
-            .bhd-picker-cell-in-range
-          ):not(.bhd-picker-cell-range-start):not(
-            .bhd-picker-cell-range-end
-          )::after,
-        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start-single::after,
-        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-end-near-hover::after,
-        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-start-near-hover::after,
-        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-end-single::after,
-        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:not(
-            .bhd-picker-cell-in-range
-          )::after {
-          top: calc(50% + 4px);
-          width: 32px;
-        }
-      }
-
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:last-child::after,
-      tr
-        > .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:last-child::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-end.bhd-picker-cell-range-hover-edge-end.bhd-picker-cell-range-hover-edge-end-near-range::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-edge-end:not(
-          .bhd-picker-cell-range-hover-edge-end-near-range
-        )::after,
-      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end::after {
-        right: 0;
-        border: none;
-      }
-
-      .bhd-picker-cell-range-hover-start::after,
-      .bhd-picker-cell-range-hover-end::after,
-      .bhd-picker-cell-range-hover::after {
-        left: 0;
-      }
-
-      .bhd-picker-cell:hover:not(.bhd-picker-cell-in-view)
-        .bhd-picker-cell-inner,
-      .bhd-picker-cell:hover:not(.bhd-picker-cell-selected):not(
-          .bhd-picker-cell-range-start
-        ):not(.bhd-picker-cell-range-end):not(
-          .bhd-picker-cell-range-hover-start
-        ):not(.bhd-picker-cell-range-hover-end)
-        .bhd-picker-cell-inner {
-        background: @color-background-primary-weak !important;
-        color: @color-background-primary-base;
-      }
-    }
-  }
-
-  // 日程安排
-  &.extraPicker {
-    :global {
-      .extraText {
-        color: @color-background-elevated;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 12px;
-
-        &.selectable {
-          color: #5991ef;
-        }
-        &.noselectable {
-          color: @color-text-error;
-        }
-        &.selected {
-          color: #23d9c3;
-        }
-      }
-      .bhd-picker-date-panel {
-        width: 416px;
-        padding: 16px 24px 16px 24px;
-        & .bhd-picker-content {
-          width: 336px;
-          margin: 0 auto;
-          & th {
-            width: 48px;
-            height: 48px;
-          }
-        }
-
-        & .bhd-picker-cell {
-          padding: 0;
-          padding-top: 8px;
-
-          &::before {
-            top: calc(50% + 4px);
-            height: 48px;
-          }
-
-          & .bhd-picker-cell-inner {
-            width: 48px;
-            height: 48px;
-            line-height: 24px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-          }
-        }
-
-        .bhd-picker-header-super-prev-btn,
-        .bhd-picker-header-super-next-btn {
-          display: none !important;
-        }
-      }
-
-      .bhd-picker-cell-selected {
-        color: @color-background-elevated !important;
-        .extraText {
-          &.selectable {
-            color: @color-background-elevated !important;
-          }
-          &.noselectable {
-            color: @color-background-elevated !important;
-          }
-          &.selected {
-            color: @color-background-elevated !important;
-          }
-        }
-
-        & .bhd-picker-cell-inner {
-          background-color: @color-background-primary-base;
-        }
-      }
-      .bhd-picker-cell-today {
-        color: @color-background-primary-base !important;
-        .extraText {
-          &.selectable {
-            color: @color-background-primary-base;
-          }
-          &.noselectable {
-            color: @color-background-primary-base;
-          }
-          &.selected {
-            color: @color-background-primary-base;
-          }
-        }
-      }
-      .bhd-picker-cell-disabled::before {
-        background: transparent;
-        color: @color-text-quaternary-Tr;
-      }
-      .bhd-picker-date-panel {
-        // 设置标题背景色高度
-        .bhd-picker-body {
-          &::before {
-            height: 48px !important;
-          }
-        }
-      }
-    }
-
-    // 查看
-    &.readonly {
-      :global {
-        // 隐藏头部点击按钮
-        .bhd-picker-header-view > button {
-          // pointer-events: none;
-        }
-        // 隐藏底部
-        .bhd-picker-footer {
-          display: none !important;
-          .bhd-picker-ranges {
-            display: none !important;
-          }
-          .bhddatepicker-picker-footer-extra-extend {
-            padding-bottom: 0;
-            &::after {
-              display: none;
-            }
-          }
-        }
-
-        // 头部位置变更
-        .bhd-picker-header {
-          position: relative;
-          .bhd-picker-header-prev-btn,
-          .bhd-picker-header-super-prev-btn {
-            position: absolute;
-            right: 40px;
-            border: none !important;
-          }
-          .bhd-picker-header-view {
-            position: absolute;
-            left: 0;
-          }
-          .bhd-picker-header-next-btn,
-          .bhd-picker-header-super-next-btn {
-            position: absolute;
-            right: 0;
-            border: none !important;
-          }
-        }
-        
-        .bhd-picker-date-panel{
-          .bhd-picker-cell-in-view {
-            pointer-events: none;
-          }
-        }
-        .bhd-picker-cell-in-view {
-          // pointer-events: none;
-          color: @color-text-Secondary-Tr;
-        }
-      }
-
-      &.showExtraFooter {
-        :global {
-          .bhd-picker-footer {
-            display: flex !important;
-          }
-        }
-      }
-    }
-  }
-
-  // 公共的
-  :global {
-    // 重置样式
-    * {
-      padding: 0;
-      margin: 0;
-      box-sizing: border-box;
-    }
-
-    // 重置table样式
-    table {
-      display: table !important;
-      width: 100%;
-      table-layout: fixed;
-      margin-bottom: 0 !important;
-      border-collapse: separate;
-      thead {
-        background-color: transparent !important;
-        tr {
-          background-color: transparent !important;
-          border: none !important;
-
-          th {
-            border: none !important;
-          }
-        }
-      }
-
-      th {
-        background-color: transparent !important;
-      }
-      tbody {
-        tr {
-          background-color: transparent;
-          border: none !important;
-          td {
-            border: none !important;
-          }
-        }
-      }
-    }
-
-    // 面板样式
-    .bhd-picker-panel-container {
-      box-shadow: none !important;
-      border: 1px solid @color-border-Tr;
-    }
-
-    // 年的面板：禁止点击十年的按钮
-    .bhd-picker-year-panel {
-      & .bhd-picker-decade-btn {
-        cursor: not-allowed !important;
-        pointer-events: none;
-      }
-    }
-
-    // 内容面板
-    .bhd-picker-decade-panel,
-    .bhd-picker-year-panel,
-    .bhd-picker-quarter-panel,
-    .bhd-picker-month-panel,
-    .bhd-picker-week-panel,
-    .bhd-picker-date-panel,
-    .bhd-picker-time-panel {
-      padding: 16px;
-      gap: 16px;
-      & .bhd-picker-body {
-        padding: 0 !important;
-      }
-
-      // 设置头部圆角
-      & .bhd-picker-content th {
-        &:first-child {
-          border-top-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-        }
-
-        &:last-child {
-          border-top-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-        }
-      }
-    }
-
-    // 头部
-    .bhd-picker-header {
-      padding: 0 !important;
-      border-bottom: none !important;
-      height: 32px;
-      line-height: 32px;
-
-      & button {
-        line-height: 32px !important;
-        color: @color-text-Secondary-Tr !important;
-      }
-    }
-    // 头部文字
-    .bhd-picker-header-view {
-      text-align: center;
-      color: @color-text-Tr;
-      font-size: 16px;
-      font-weight: 500 !important;
-      line-height: 32px !important;
-      & button {
-        line-height: 32px !important;
-        color: @color-text-Tr !important;
-        &:hover {
-          color: @color-background-primary-base !important;
-        }
-      }
-    }
-
-    // >>按钮图标
-    .bhd-picker-header-super-prev-btn,
-    .bhd-picker-header-super-next-btn,
-    .bhd-picker-header-prev-btn,
-    .bhd-picker-header-next-btn {
-      border: 1px solid @color-border-Tr !important;
-      color: @color-text-Secondary-Tr !important;
-      border-radius: 4px;
-      padding: 7px !important;
-      height: 32px;
-      width: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    //当天
-    .bhd-picker-cell-today {
-      color: @color-background-primary-base !important;
-      &:hover {
-        .bhd-picker-cell-inner {
-          background-color: @color-background-primary-weak !important;
-        }
-      }
-    }
-    //悬浮
-    .bhd-picker-cell-inner {
-      &:hover {
-        background-color: @color-background-primary-weak !important;
-        color: @color-background-primary-base !important;
-      }
-    }
-    //选中
-    .bhd-picker-cell-selected {
-      &:hover {
-        .bhd-picker-cell-inner {
-          background-color: @color-background-primary-hover !important;
-          color: @color-background-elevated !important;
-        }
-      }
-    }
-  }
-}
+@import "../theme/variable.less";
+// 包裹组件样式
+.bhdDatePicker {
+  width: 100%;
+
+  :global {
+    .bhd-picker {
+      // table 模式下显示样式
+      &.table-date-picker {
+        * {
+          background: transparent;
+          border: none;
+        }
+        position: relative;
+        top: 0;
+        left: 0;
+        border: none;
+        box-shadow: none;
+        background: transparent;
+        padding: 0;
+        // margin-left: -78px;
+        cursor: pointer;
+        .bhd-picker-input {
+          &:nth-child(1) {
+            width: 78px;
+            opacity: 0;
+            & > input {
+              cursor: pointer;
+              &::placeholder {
+                display: none !important;
+                opacity: 0;
+              }
+            }
+          }
+          &:nth-child(3) {
+            display: none;
+          }
+        }
+        .bhd-picker-range-separator {
+          display: none;
+        }
+        .bhd-picker-active-bar {
+          display: none;
+        }
+        .bhd-picker-suffix {
+          color: @color-text-Tr;
+        }
+        .bhd-picker-clear {
+          display: none;
+        }
+      }
+    }
+  }
+}
+// 弹出日历样式
+.bhdDatePickerPopup {
+  // 单选、范围、日程安排
+  &.singlePicker,
+  &.rangePicker,
+  &.extraPicker {
+    :global {
+      // 时间
+      .bhd-picker-time-panel {
+        .bhd-picker-time-panel-column {
+          margin: 0;
+
+          & > li.bhd-picker-time-panel-cell {
+            margin: 0;
+            .bhd-picker-time-panel-cell-inner {
+              width: 56px;
+              height: 32px;
+              line-height: 32px;
+              padding: 0;
+              text-align: center;
+              border-radius: 0;
+            }
+          }
+          &:hover {
+            &::-webkit-scrollbar {
+              width: 0;
+            }
+          }
+          &:not(:first-child) {
+            border: none;
+          }
+        }
+      }
+
+      // 时间与天相邻
+      .bhd-picker-date-panel + .bhd-picker-time-panel {
+        padding: 0;
+        gap: 0;
+        .bhd-picker-header {
+          height: 48px;
+          .bhd-picker-header-view {
+            line-height: 48px !important;
+          }
+        }
+      }
+
+      // 天、周
+      .bhd-picker-date-panel,
+      .bhd-picker-week-panel {
+        width: 272px;
+        & .bhd-picker-content {
+          width: 224px;
+          margin: 0 auto;
+          & th {
+            width: 32px;
+            height: 32px;
+          }
+        }
+
+        & .bhd-picker-cell {
+          padding: 0;
+          padding-top: 8px;
+
+          &::before {
+            top: calc(50% + 4px);
+            height: 32px;
+          }
+
+          & .bhd-picker-cell-inner {
+            width: 32px;
+            height: 32px;
+            line-height: 32px;
+          }
+        }
+
+        & .bhd-picker-body {
+          position: relative;
+
+          // 设置标题背景色
+          &::before {
+            content: "";
+            width: 100%;
+            height: 32px;
+            border-radius: 4px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background-color: @color-background-filltertiary-Tr;
+          }
+        }
+      }
+
+      //周
+      .bhd-picker-week-panel {
+        .bhd-picker-week-panel-row:hover {
+          color: @color-background-primary-base !important;
+          & td {
+            &:before {
+              background-color: @color-background-primary-weak !important;
+            }
+
+            .bhd-picker-cell-inner {
+              color: @color-background-primary-base !important;
+            }
+          }
+        }
+      }
+
+      // 月
+      .bhd-picker-month-panel {
+        width: 272px;
+        & .bhd-picker-body {
+          width: 240px;
+        }
+        & .bhd-picker-content {
+          height: 200px;
+          width: 240px;
+
+          & tbody {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 24px;
+
+            & tr {
+              display: flex;
+              gap: 24px;
+            }
+          }
+        }
+
+        & .bhd-picker-cell {
+          padding: 0;
+          &::before {
+            height: 32px;
+            width: 64px;
+          }
+
+          & .bhd-picker-cell-inner {
+            width: 64px;
+            height: 32px;
+            line-height: 32px;
+            padding: 0;
+          }
+        }
+      }
+
+      //季度
+      .bhd-picker-quarter-panel {
+        & .bhd-picker-content {
+          height: 32px;
+        }
+        & .bhd-picker-cell {
+          padding: 0;
+          &::before {
+            height: 32px;
+          }
+
+          & .bhd-picker-cell-inner {
+            height: 32px;
+            line-height: 32px;
+            padding: 0;
+          }
+        }
+      }
+
+      // 年
+      .bhd-picker-year-panel {
+        width: 272px;
+        & .bhd-picker-body {
+          width: 240px;
+        }
+        & .bhd-picker-content {
+          height: 200px;
+          width: 240px;
+
+          & tbody {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 24px;
+
+            & tr {
+              display: flex;
+              gap: 24px;
+            }
+          }
+        }
+
+        & .bhd-picker-cell {
+          padding: 0;
+          &::before {
+            height: 32px;
+            width: 64px;
+          }
+
+          & .bhd-picker-cell-inner {
+            width: 64px;
+            height: 32px;
+            line-height: 32px;
+            padding: 0;
+          }
+        }
+      }
+
+
+      // 多面板
+      .bhd-picker-panels {
+        & .bhd-picker-panel {
+          border: none;
+        }
+      }
+
+      // 设置底部区域
+      .bhd-picker-footer {
+        padding: 12px 16px;
+        align-items: flex-start;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        gap: 10px;
+        align-self: stretch;
+        border-top: 1px solid @color-background-fillsecondary-Tr !important;
+        line-height: 30px !important;
+        align-items: center;
+
+        & .bhd-picker-footer-extra {
+          padding: 0;
+          line-height: 30px;
+          width: 100%;
+          display: flex;
+          flex-direction: column-reverse;
+          gap: 8px;
+
+          &:not(:last-child) {
+            border-bottom: none;
+          }
+        }
+
+        & .bhd-picker-ranges {
+          padding: 0;
+          line-height: 30px;
+          height: 30px;
+          gap: 10px;
+          align-items: center;
+          justify-content: flex-end;
+          width: 100%;
+          & > li {
+            line-height: 30px;
+            height: 30px;
+            margin: 0;
+            &.bhd-picker-ok {
+              font-size: 0;
+            }
+          }
+
+          & .bhd-picker-now {
+            color: @color-background-primary-base;
+            .bhd-picker-now-btn {
+              color: @color-background-primary-base;
+            }
+          }
+          // & +.bhddatepicker-picker-footer-extra-extend{
+
+          // }
+        }
+
+        .bhd-picker-ranges + .bhddatepicker-picker-footer-extra-extend{
+          padding-bottom: 8px;
+          &::after {
+            content: "";
+            width: calc(100% + 100px);
+            height: 0px;
+            border-bottom: 1px solid @color-background-fillsecondary-Tr;
+            position: absolute;
+            left: -50px;
+            bottom: 0;
+          }
+        }
+
+        // 自己扩展
+        & .bhddatepicker-picker-footer-extra-extend {
+          position: relative;
+          
+        }
+
+        // 今天按钮
+        .bhd-picker-today-btn {
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 14px;
+          color: @color-background-primary-base !important;
+        }
+
+        .bhd-picker-now-btn {
+          color: @color-background-primary-base;
+        }
+
+        .bhd-picker-presets {
+          min-width: unset;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 14px;
+          color: @color-background-primary-base;
+          display: flex;
+          gap: 10px;
+          flex-direction: row-reverse;
+          justify-content: flex-start;
+          align-items: center;
+
+          .bhd-picker-preset-btn {
+            color: @color-background-primary-base;
+            height: 16px;
+            line-height: 16px;
+          }
+        }
+
+        .bhd-picker-ok {
+          & .bhd-btn-primary {
+            height: 30px;
+            padding: 0 16px;
+            line-height: 30px;
+            border: none;
+            box-shadow: none;
+
+            &:disabled,
+            &.disabled {
+              background: @color-background-fillsecondary-Tr;
+              color: @color-text-tertiary-Tr;
+              cursor: no-drop;
+              border: none;
+              box-shadow: none;
+            }
+          }
+        }
+
+        // 隐藏默认的当前
+        // & > a {
+        //   // display: none;
+        // }
+        // & > .bhd-picker-ranges {
+        //   display: none;
+        // }
+
+        & > a.bhd-picker-today-btn {
+          position: absolute;
+          right: 91px;
+          bottom: 20px;
+        }
+      }
+
+      // 默认颜色
+      .bhd-picker-cell-in-view {
+        color: @color-text-Secondary-Tr;
+      }
+
+      //禁用后的今天
+      .bhd-picker-cell-disabled.bhd-picker-cell-today
+        .bhd-picker-cell-inner::before {
+        border-color: @color-background-primary-base !important;
+      }
+      // 禁用
+      .bhd-picker-cell-disabled {
+        color: @color-text-quaternary-Tr !important;
+      }
+    }
+
+    // 显示时间选择面板时
+    &.showTime {
+      :global {
+        .bhd-picker-footer {
+          justify-content: flex-end;
+          .bhd-picker-footer-extra {
+            width: auto;
+          }
+          .bhd-picker-ranges {
+            width: auto;
+          }
+        }
+      }
+      &.showExtraFooter {
+        :global {
+          .bhd-picker-footer {
+            justify-content: flex-start;
+            flex-direction: column;
+            .bhd-picker-footer-extra {
+              width: 100% !important;
+            }
+            .bhd-picker-ranges {
+              width: 100% !important;
+              &.showPresets {
+                position: absolute;
+                width: auto !important;
+                bottom: 12px;
+                right: 100px;
+                &.showNow {
+                  right: 128px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    //不显示确认按钮时，今天按钮的位置
+    &.noNeedConfirm {
+      :global {
+        .bhd-picker-footer {
+          & > a.bhd-picker-today-btn {
+            right: 17px;
+          }
+        }
+      }
+    }
+  }
+
+  // 单选
+  &.singlePicker {
+    :global {
+      .bhd-picker-date-panel,
+      .bhd-picker-week-panel {
+        width: 272px;
+        & .bhd-picker-content {
+          width: 224px;
+          margin: 0 auto;
+          & th {
+            width: 32px;
+            height: 32px;
+          }
+        }
+
+        & .bhd-picker-cell {
+          padding: 0;
+          padding-top: 8px;
+
+          &::before {
+            top: calc(50% + 4px);
+            height: 32px;
+          }
+
+          & .bhd-picker-cell-inner {
+            width: 32px;
+            height: 32px;
+            line-height: 32px;
+          }
+        }
+
+        .bhd-picker-header-super-prev-btn,
+        .bhd-picker-header-super-next-btn {
+          display: none !important;
+        }
+      }
+
+      .bhd-picker-week-panel {
+        width: 304px;
+      }
+
+      .bhd-picker-month-panel {
+        width: 272px;
+        & .bhd-picker-body {
+          width: 240px;
+        }
+        & .bhd-picker-content {
+          height: 200px;
+          width: 240px;
+        }
+
+        & .bhd-picker-cell {
+          padding: 0;
+          &::before {
+            height: 32px;
+            width: 64px;
+          }
+
+          & .bhd-picker-cell-inner {
+            width: 64px;
+            height: 32px;
+            line-height: 32px;
+            padding: 0;
+          }
+        }
+      }
+
+      .bhd-picker-year-panel {
+        width: 272px;
+        & .bhd-picker-body {
+          width: 240px;
+        }
+        & .bhd-picker-content {
+          height: 200px;
+          width: 240px;
+        }
+
+        & .bhd-picker-cell {
+          padding: 0;
+          &::before {
+            height: 32px;
+            width: 64px;
+          }
+
+          & .bhd-picker-cell-inner {
+            width: 64px;
+            height: 32px;
+            line-height: 32px;
+            padding: 0;
+          }
+        }
+      }
+
+      // // 设置 当天的位置
+      // .bhd-picker-date-panel + .bhd-picker-footer {
+      //   justify-content: center !important;
+      // }
+    }
+  }
+
+  //范围选择
+  &.rangePicker {
+    :global {
+      .bhd-picker-date-panel {
+        .bhd-picker-header-super-prev-btn,
+        .bhd-picker-header-super-next-btn {
+          display: none !important;
+        }
+        .bhd-picker-header-prev-btn,
+        .bhd-picker-header-next-btn {
+          visibility: visible !important;
+        }
+      }
+      //范围选择公共
+      .bhd-picker-cell-in-view.bhd-picker-cell-in-range.bhd-picker-cell-range-hover-end
+        .bhd-picker-cell-inner::after {
+        left: 0;
+      }
+      .bhd-picker-cell-in-view.bhd-picker-cell-in-range.bhd-picker-cell-range-hover-start
+        .bhd-picker-cell-inner::after {
+        right: 0;
+      }
+      .bhd-picker-cell.bhd-picker-cell-in-view.bhd-picker-cell-in-range {
+        .bhd-picker-cell-inner::after {
+          right: 0 !important;
+        }
+      }
+
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-start::before {
+        left: 0;
+      }
+
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:not(
+          .bhd-picker-cell-in-range
+        ):not(.bhd-picker-cell-range-start):not(
+          .bhd-picker-cell-range-end
+        )::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end:not(
+          .bhd-picker-cell-in-range
+        ):not(.bhd-picker-cell-range-start):not(
+          .bhd-picker-cell-range-end
+        )::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start-single::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-end-near-hover::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-start-near-hover::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-end-single::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:not(
+          .bhd-picker-cell-in-range
+        )::after {
+        height: 32px;
+        border: none;
+        background: @color-background-primary-weak;
+      }
+      .bhd-picker-year-panel .bhd-picker-cell::before,
+      .bhd-picker-year-panel .bhd-picker-cell::before {
+        left: 0;
+        border-radius: 4px;
+      }
+
+      // 日期
+      .bhd-picker-date-panel {
+        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:not(
+            .bhd-picker-cell-in-range
+          ):not(.bhd-picker-cell-range-start):not(
+            .bhd-picker-cell-range-end
+          )::after,
+        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end:not(
+            .bhd-picker-cell-in-range
+          ):not(.bhd-picker-cell-range-start):not(
+            .bhd-picker-cell-range-end
+          )::after,
+        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start-single::after,
+        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-end-near-hover::after,
+        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-start-near-hover::after,
+        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-end-single::after,
+        .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:not(
+            .bhd-picker-cell-in-range
+          )::after {
+          top: calc(50% + 4px);
+          width: 32px;
+        }
+      }
+
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:last-child::after,
+      tr
+        > .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:last-child::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-end.bhd-picker-cell-range-hover-edge-end.bhd-picker-cell-range-hover-edge-end-near-range::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-edge-end:not(
+          .bhd-picker-cell-range-hover-edge-end-near-range
+        )::after,
+      .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end::after {
+        right: 0;
+        border: none;
+      }
+
+      .bhd-picker-cell-range-hover-start::after,
+      .bhd-picker-cell-range-hover-end::after,
+      .bhd-picker-cell-range-hover::after {
+        left: 0;
+      }
+
+      .bhd-picker-cell:hover:not(.bhd-picker-cell-in-view)
+        .bhd-picker-cell-inner,
+      .bhd-picker-cell:hover:not(.bhd-picker-cell-selected):not(
+          .bhd-picker-cell-range-start
+        ):not(.bhd-picker-cell-range-end):not(
+          .bhd-picker-cell-range-hover-start
+        ):not(.bhd-picker-cell-range-hover-end)
+        .bhd-picker-cell-inner {
+        background: @color-background-primary-weak !important;
+        color: @color-background-primary-base;
+      }
+    }
+  }
+
+  // 日程安排
+  &.extraPicker {
+    :global {
+      .extraText {
+        color: @color-background-elevated;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 12px;
+
+        &.selectable {
+          color: #5991ef;
+        }
+        &.noselectable {
+          color: @color-text-error;
+        }
+        &.selected {
+          color: #23d9c3;
+        }
+      }
+      .bhd-picker-date-panel {
+        width: 416px;
+        padding: 16px 24px 16px 24px;
+        & .bhd-picker-content {
+          width: 336px;
+          margin: 0 auto;
+          & th {
+            width: 48px;
+            height: 48px;
+          }
+        }
+
+        & .bhd-picker-cell {
+          padding: 0;
+          padding-top: 8px;
+
+          &::before {
+            top: calc(50% + 4px);
+            height: 48px;
+          }
+
+          & .bhd-picker-cell-inner {
+            width: 48px;
+            height: 48px;
+            line-height: 24px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+
+        .bhd-picker-header-super-prev-btn,
+        .bhd-picker-header-super-next-btn {
+          display: none !important;
+        }
+      }
+
+      .bhd-picker-cell-selected {
+        color: @color-background-elevated !important;
+        .extraText {
+          &.selectable {
+            color: @color-background-elevated !important;
+          }
+          &.noselectable {
+            color: @color-background-elevated !important;
+          }
+          &.selected {
+            color: @color-background-elevated !important;
+          }
+        }
+
+        & .bhd-picker-cell-inner {
+          background-color: @color-background-primary-base;
+        }
+      }
+      .bhd-picker-cell-today {
+        color: @color-background-primary-base !important;
+        .extraText {
+          &.selectable {
+            color: @color-background-primary-base;
+          }
+          &.noselectable {
+            color: @color-background-primary-base;
+          }
+          &.selected {
+            color: @color-background-primary-base;
+          }
+        }
+      }
+      .bhd-picker-cell-disabled::before {
+        background: transparent;
+        color: @color-text-quaternary-Tr;
+      }
+      .bhd-picker-date-panel {
+        // 设置标题背景色高度
+        .bhd-picker-body {
+          &::before {
+            height: 48px !important;
+          }
+        }
+      }
+    }
+
+    // 查看
+    &.readonly {
+      :global {
+        // 隐藏头部点击按钮
+        .bhd-picker-header-view > button {
+          // pointer-events: none;
+        }
+        // 隐藏底部
+        .bhd-picker-footer {
+          display: none !important;
+          .bhd-picker-ranges {
+            display: none !important;
+          }
+          .bhddatepicker-picker-footer-extra-extend {
+            padding-bottom: 0;
+            &::after {
+              display: none;
+            }
+          }
+        }
+
+        // 头部位置变更
+        .bhd-picker-header {
+          position: relative;
+          .bhd-picker-header-prev-btn,
+          .bhd-picker-header-super-prev-btn {
+            position: absolute;
+            right: 40px;
+            border: none !important;
+          }
+          .bhd-picker-header-view {
+            position: absolute;
+            left: 0;
+          }
+          .bhd-picker-header-next-btn,
+          .bhd-picker-header-super-next-btn {
+            position: absolute;
+            right: 0;
+            border: none !important;
+          }
+        }
+        
+        .bhd-picker-date-panel{
+          .bhd-picker-cell-in-view {
+            pointer-events: none;
+          }
+        }
+        .bhd-picker-cell-in-view {
+          // pointer-events: none;
+          color: @color-text-Secondary-Tr;
+        }
+      }
+
+      &.showExtraFooter {
+        :global {
+          .bhd-picker-footer {
+            display: flex !important;
+          }
+        }
+      }
+    }
+  }
+
+  // 公共的
+  :global {
+    // 重置样式
+    * {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    // 重置table样式
+    table {
+      display: table !important;
+      width: 100%;
+      table-layout: fixed;
+      margin-bottom: 0 !important;
+      border-collapse: separate;
+      thead {
+        background-color: transparent !important;
+        tr {
+          background-color: transparent !important;
+          border: none !important;
+
+          th {
+            border: none !important;
+          }
+        }
+      }
+
+      th {
+        background-color: transparent !important;
+      }
+      tbody {
+        tr {
+          background-color: transparent;
+          border: none !important;
+          td {
+            border: none !important;
+          }
+        }
+      }
+    }
+
+    // 面板样式
+    .bhd-picker-panel-container {
+      box-shadow: none !important;
+      border: 1px solid @color-border-Tr;
+    }
+
+    // 年的面板：禁止点击十年的按钮
+    .bhd-picker-year-panel {
+      & .bhd-picker-decade-btn {
+        cursor: not-allowed !important;
+        pointer-events: none;
+      }
+    }
+
+    // 内容面板
+    .bhd-picker-decade-panel,
+    .bhd-picker-year-panel,
+    .bhd-picker-quarter-panel,
+    .bhd-picker-month-panel,
+    .bhd-picker-week-panel,
+    .bhd-picker-date-panel,
+    .bhd-picker-time-panel {
+      padding: 16px;
+      gap: 16px;
+      & .bhd-picker-body {
+        padding: 0 !important;
+      }
+
+      // 设置头部圆角
+      & .bhd-picker-content th {
+        &:first-child {
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+
+        &:last-child {
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+      }
+    }
+
+    // 头部
+    .bhd-picker-header {
+      padding: 0 !important;
+      border-bottom: none !important;
+      height: 32px;
+      line-height: 32px;
+
+      & button {
+        line-height: 32px !important;
+        color: @color-text-Secondary-Tr !important;
+      }
+    }
+    // 头部文字
+    .bhd-picker-header-view {
+      text-align: center;
+      color: @color-text-Tr;
+      font-size: 16px;
+      font-weight: 500 !important;
+      line-height: 32px !important;
+      & button {
+        line-height: 32px !important;
+        color: @color-text-Tr !important;
+        &:hover {
+          color: @color-background-primary-base !important;
+        }
+      }
+    }
+
+    // >>按钮图标
+    .bhd-picker-header-super-prev-btn,
+    .bhd-picker-header-super-next-btn,
+    .bhd-picker-header-prev-btn,
+    .bhd-picker-header-next-btn {
+      border: 1px solid @color-border-Tr !important;
+      color: @color-text-Secondary-Tr !important;
+      border-radius: 4px;
+      padding: 7px !important;
+      height: 32px;
+      width: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    //当天
+    .bhd-picker-cell-today {
+      color: @color-background-primary-base !important;
+      &:hover {
+        .bhd-picker-cell-inner {
+          background-color: @color-background-primary-weak !important;
+        }
+      }
+    }
+    //悬浮
+    .bhd-picker-cell-inner {
+      &:hover {
+        background-color: @color-background-primary-weak !important;
+        color: @color-background-primary-base !important;
+      }
+    }
+    //选中
+    .bhd-picker-cell-selected {
+      &:hover {
+        .bhd-picker-cell-inner {
+          background-color: @color-background-primary-hover !important;
+          color: @color-background-elevated !important;
+        }
+      }
+    }
+  }
+}