| | |
| | | const hourRef = ref<HTMLElement | null>(null); |
| | | const minuteRef = ref<HTMLElement | null>(null); |
| | | |
| | | const ITEM_REM = 0.4; |
| | | const ITEM_REM = 0.26; |
| | | const itemHeight = remToPx(ITEM_REM); |
| | | |
| | | const selectedIndexHour = ref(2); |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | height: 2rem; // 5 * 0.4rem 每个item高度0.4rem |
| | | height: 1.3rem; // 5 * 0.4rem 每个item高度0.4rem |
| | | overflow: hidden; |
| | | |
| | | .picker-column { |
| | | height: 2rem; |
| | | width: 0.9rem; |
| | | height: 1.3rem; |
| | | width: 0.7rem; |
| | | overflow-y: scroll; |
| | | scroll-snap-type: y mandatory; |
| | | -webkit-overflow-scrolling: touch; |
| | |
| | | } |
| | | |
| | | .picker-item { |
| | | height: 0.4rem; |
| | | line-height: 0.4rem; |
| | | height: 0.26rem; |
| | | line-height: 0.26rem; |
| | | text-align: center; |
| | | font-size: 0.24rem; |
| | | font-size: 0.2rem; |
| | | scroll-snap-align: center; |
| | | user-select: none; |
| | | cursor: pointer; |
| | | transition: color 0.3s ease, font-size 0.3s ease; |
| | | |
| | | &.active { |
| | | font-size: 0.5rem; |
| | | font-size: 0.28rem; |
| | | font-weight: 700; |
| | | color: #111; |
| | | &.hours { |
| | |
| | | } |
| | | } |
| | | &.medium { |
| | | font-size: 0.3rem; |
| | | font-size: 0.22rem; |
| | | color: #666; |
| | | &.hours { |
| | | text-align: left; |
| | | padding-left: 0.2rem; |
| | | padding-left: 0.16rem; |
| | | } |
| | | &.minutes { |
| | | text-align: right; |
| | | padding-right: 0.2rem; |
| | | padding-right: 0.16rem; |
| | | } |
| | | } |
| | | &.small { |
| | | font-size: 0.24rem; |
| | | font-size: 0.18rem; |
| | | color: #aaa; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .colon { |
| | | font-size: 0.5rem; |
| | | font-size: 0.28rem; |
| | | font-weight: 600; |
| | | color: #444; |
| | | user-select: none; |