diff --git a/packages/theme/src/time-panel/index.less b/packages/theme/src/time-panel/index.less index 89d703ef9a..45663d660a 100644 --- a/packages/theme/src/time-panel/index.less +++ b/packages/theme/src/time-panel/index.less @@ -38,17 +38,12 @@ &__header-input { margin: var(--tv-TimePanel-header-margin); - - input { - height: 28px; - } } &__header-title { display: flex; justify-content: space-around; color: var(--tv-TimePanel-header-text-color); - margin-top: 8px; align-items: center; } @@ -56,6 +51,7 @@ font-size: 0; position: relative; overflow: hidden; + padding-bottom: var(--tv-TimePanel-content-padding-bottom); &:after, &:before { diff --git a/packages/theme/src/time-panel/vars.less b/packages/theme/src/time-panel/vars.less index 7d8dbe474c..e74010011a 100644 --- a/packages/theme/src/time-panel/vars.less +++ b/packages/theme/src/time-panel/vars.less @@ -18,7 +18,7 @@ // 面板外间距 --tv-TimePanel-margin: var(--tv-space-sm, 4px) 0; // 面板内间距 - --tv-TimePanel-padding: 0 var(--tv-space-xl, 16px); + --tv-TimePanel-padding: 0 14px; // 面板背景色 --tv-TimePanel-bg-color: var(--tv-color-bg-secondary, #ffffff); // 面板圆角 @@ -29,9 +29,11 @@ --tv-TimePanel-border-color-divider: var(--tv-color-border-divider, #f0f0f0); // 头部外间距 - --tv-TimePanel-header-margin: var(--tv-space-lg, 12px) 0; + --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 24px 2px; // 头部文本色 --tv-TimePanel-header-text-color: var(--tv-color-text-weaken, #808080); + // 内容区底部内间距 + --tv-TimePanel-content-padding-bottom: var(--tv-space-lg, 12px); // 按钮高度 --tv-TimePanel-btn-height: var(--tv-size-height-sm, 28px); diff --git a/packages/theme/src/time-spinner/index.less b/packages/theme/src/time-spinner/index.less index 3b1020be6c..21085ceb06 100644 --- a/packages/theme/src/time-spinner/index.less +++ b/packages/theme/src/time-spinner/index.less @@ -31,7 +31,7 @@ } .@{scrollbar-prefix-cls}__wrap:not(.@{scrollbar-prefix-cls}__wrap--hidden-default) { - padding-bottom: 12px; + padding-bottom: 15px; } &.is-arrow { @@ -43,10 +43,7 @@ .@{time-spinner-prefix-cls}__list { &::after, &::before { - content: ''; - display: block; - width: 100%; - height: 52px; + transform: translateY(-32px); } } @@ -56,6 +53,11 @@ } } + .@{time-spinner-prefix-cls}__list { + transform: translateY(-6px); + margin: var(--tv-TimeSpinner-list-margin); + } + &:last-child { .@{time-spinner-prefix-cls}__list { border-right: 0; @@ -64,7 +66,8 @@ } &__arrow { - padding: var(--tv-TimeSpinner-arrow-padding); + height: 30px; + line-height: 30px; position: absolute; left: 0; width: 100%; @@ -82,11 +85,11 @@ } &.@{css-prefix}icon-arrow-up { - top: 12px; + top: 10px; } &.@{css-prefix}icon-arrow-down { - bottom: 12px; + bottom: 10px; } &.@{input-prefix-cls} { @@ -110,7 +113,7 @@ content: ''; display: block; width: 100%; - height: 4px; + height: 80px; } } @@ -122,6 +125,7 @@ line-height: var(--tv-TimeSpinner-line-height); color: var(--tv-TimeSpinner-text-color); border-radius: var(--tv-TimeSpinner-item-border-radius); + width: 52px; &:hover:not(.disabled):not(.active) { background: var(--tv-TimeSpinner-item-bg-color-hover); diff --git a/packages/theme/src/time-spinner/vars.less b/packages/theme/src/time-spinner/vars.less index 3a1eeb939f..db42c8a520 100644 --- a/packages/theme/src/time-spinner/vars.less +++ b/packages/theme/src/time-spinner/vars.less @@ -29,8 +29,10 @@ // 图标尺寸 --tv-TimeSpinner-icon-size: var(--tv-icon-size, 16px); + // 列表外间距 + --tv-TimeSpinner-list-margin: 10px 0 30px 0; // 时间项外间距 - --tv-TimeSpinner-item-margin: var(--tv-space-lg, 12px) var(--tv-space-md, 8px) 0 var(--tv-space-md, 8px); + --tv-TimeSpinner-item-margin: var(--tv-space-lg, 12px) 10px 0 10px; // 时间项内间距 --tv-TimeSpinner-item-padding: 3.5px 0; // 时间项圆角 @@ -41,7 +43,4 @@ --tv-TimeSpinner-item-bg-color-active: var(--tv-color-bg-active-emphasize, #deecff); // 时间项背景色(禁用) --tv-TimeSpinner-item-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0); - - // 箭头内间距 - --tv-TimeSpinner-arrow-padding: calc((var(--tv-size-height-sm) - var(--tv-TimeSpinner-icon-size)) / 2) 0; }