.scroll { position: sticky; top: 0; display: flex; flex-wrap: nowrap; width: 100vw; height: 120rpx; background-color: #ffffff; z-index: 9; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8rpx; .item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; height: 100%; width: 172rpx; padding-top: 16rpx; text-align: center; box-sizing: border-box; .icon { width: 46rpx; height: 46rpx; .iconfont { font-size: 36rpx; color: #000; } } .num { width: 80%; height: 46rpx; font-size: 28rpx; font-family: PingFang SC-Bold, PingFang SC; font-weight: bold; color: #333333; } .label { height: 34rpx; font-size: 24rpx; font-family: PingFang SC-Regular, PingFang SC; color: #999999; margin-top: 8rpx; } } .active { border-bottom: 4rpx solid #3874F6; .label, .num, .icon { color: #3874F6 !important; } } } .slot-box { width: 100vw; min-height: 200rpx; } .line-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .buts-scroll { // position: sticky; top: 0; display: flex; flex-wrap: nowrap; width: 100vw; height: 70rpx; z-index: 9; padding: 0 30rpx; box-sizing: border-box; .buts-box { padding: 10rpx 5rpx; .but-item { background: #FFFFFF; border-radius: 8rpx; border: 1rpx solid #E0E0E0; box-sizing: border-box; line-height: 34rpx; font-family: PingFang SC, PingFang SC; font-size: 24rpx; color: #333333; padding: 8rpx 20rpx; } .active { background-color: #FAE5E5; border-color: #FAE5E5; color: #F56C6C; } } .buts-box:first-child { padding-left: 0; } .buts-box:last-child { padding-right: 0; } } .safety { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); height: 40rpx; }