187 lines
3.7 KiB
SCSS
187 lines
3.7 KiB
SCSS
/* 时间选择器弹出层样式 */
|
||
.time-picker-popup {
|
||
.common-popup-content {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.popup-handle {
|
||
width: 32px;
|
||
height: 4px;
|
||
background: #e0e0e0;
|
||
border-radius: 2px;
|
||
margin: 12px auto;
|
||
}
|
||
|
||
.picker-container {
|
||
padding: 26px 16px 0 16px;
|
||
background: #fff;
|
||
}
|
||
|
||
.picker-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.custom-picker {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 216px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* 确保只显示一个选项 */
|
||
perspective: 1000px;
|
||
/* 水平布局 */
|
||
flex-direction: row;
|
||
/* 确保列之间有适当间距 */
|
||
gap: 0;
|
||
}
|
||
|
||
/* 选中项指示器 */
|
||
.picker-indicator {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 48px;
|
||
background: rgba(22, 24, 35, 0.05);
|
||
transform: translateY(-50%);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
border-radius: 4px;
|
||
box-shadow: inset 0 0 0 1px rgba(22, 24, 35, 0.1);
|
||
/* 确保指示器完美覆盖选中项 */
|
||
margin: 0 20px;
|
||
width: calc(100% - 40px);
|
||
}
|
||
|
||
.picker-column {
|
||
flex: 1;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* 水平居中布局 */
|
||
min-width: 0;
|
||
/* 确保列之间有适当间距 */
|
||
padding: 0 8px;
|
||
|
||
&:first-child {
|
||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 确保滚动容器正确显示 */
|
||
&::before,
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 84px;
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
&::before {
|
||
top: 0;
|
||
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
|
||
}
|
||
|
||
&::after {
|
||
bottom: 0;
|
||
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
|
||
}
|
||
}
|
||
|
||
.picker-scroll {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
will-change: scroll-position;
|
||
-webkit-overflow-scrolling: touch;
|
||
/* 确保滚动行为 */
|
||
scroll-snap-type: y mandatory;
|
||
/* 优化滚动性能 */
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
.picker-padding {
|
||
height: 84px; /* (216 - 48) / 2 = 84px，用于居中对齐 */
|
||
/* 确保padding区域不可见 */
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.picker-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 48px;
|
||
width: 100%;
|
||
font-size: 16px;
|
||
color: #161823;
|
||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
position: relative;
|
||
will-change: transform, color;
|
||
/* 确保每个选项都能正确对齐 */
|
||
scroll-snap-align: center;
|
||
/* 水平居中 */
|
||
text-align: center;
|
||
|
||
&.picker-item-active {
|
||
color: #161823;
|
||
font-weight: 600;
|
||
transform: scale(1.02);
|
||
|
||
.picker-item-text {
|
||
color: #161823;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
&:not(.picker-item-active) {
|
||
color: rgba(22, 24, 35, 0.6);
|
||
|
||
.picker-item-text {
|
||
color: rgba(22, 24, 35, 0.6);
|
||
}
|
||
}
|
||
}
|
||
|
||
.picker-item-text {
|
||
font-size: 16px;
|
||
color: inherit;
|
||
text-align: center;
|
||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
user-select: none;
|
||
width: 100%;
|
||
line-height: 48px;
|
||
white-space: nowrap;
|
||
/* 确保文字完美居中 */
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
/* 强制居中对齐 */
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
/* 滚动条隐藏 */
|
||
.picker-scroll {
|
||
::-webkit-scrollbar {
|
||
width: 0;
|
||
background: transparent;
|
||
}
|
||
}
|
||
|
||
/* 移除重复的渐变遮罩代码，已在.picker-column中定义 */ |