.timeBox { background-color: #fff; padding: 10px; .titleBox { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } } .bill-classify-box { background-color: #fff; border-radius: 24rpx 24rpx 0 0; padding: 32rpx 24rpx; .title-box { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32rpx; .title { font-size: 32rpx; font-weight: 500; color: var(--font-color); .text { color: #AAAAAA; font-size: 24rpx; font-weight: 400; } } .close-image { width: 28rpx; height: 28rpx; } } .bill-classify-content { display: flex; flex-wrap: wrap; max-height: 50vh; overflow: hidden; overflow-y: scroll; .bill-classify-item { width: 25%; display: flex; flex-direction: column; align-items: center; margin-bottom: 20rpx; margin-bottom: 36rpx; .bill-classify-item-text { font-size: 28rpx; color: #3D3D3D; width: 150rpx; height: 64rpx; line-height: 64rpx; text-align: center; border-radius: 12rpx; border: 2rpx solid #EDEDED; } .active-item { background-color: #1676FE; color: #fff; border: none; } } } .confirm-btn { width: 100%; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 36rpx; color: #fff; background-color: #1777FF; color: #FFFFFF; border-radius: 570rpx 570rpx 570rpx 570rpx; margin-top: 40rpx; } }