.container{ view,text,image{ box-sizing: border-box; } scroll-view{ width: 100%; white-space: nowrap; height: 63px; background-color: #fff; position: relative; padding-top: 10rpx; // margin-top:10px; &::after{ background: #e5e5e5; content: ''; display:block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; transform:scaleY(0.5); } .flex-box{ display: inline-block; height: 60px; width: 25%; margin: 0 7rpx 0 7rpx; box-sizing: border-box; &.active{ .date-box{ border: none; .days{ font-weight: bold; color: #818181; } .date{ font-weight: bold; color: #818181; } } } .date-box{ border: none; display: flex; height: 50px; flex-direction: column; align-items: center; justify-content: space-around; font-size: 30upx; color: rgba(129, 129, 129, 1); .date{ font-weight: bold; color: #818181; font-size: 30upx; } } } } .time-box{ padding-top: 28upx; padding-left: 14upx; padding-right: 10upx; padding-bottom: 200upx; display: flex; flex-wrap: wrap; // margin-top:10px; background-color:#fff; .item{ width: 33%; padding: 9upx; &-box{ width: 100%; height: 154upx; padding:0 10upx; background: #fff; color: #333; border: 1px solid #EEEEEE; font-size: 28upx; border-radius: 10upx; display: flex; flex-direction: column; align-items: center; justify-content: center; &.disable{ background: #F1F3F6 !important; color: #999 !important; // border: 1px solid #EEEEEE; } &.active{ // background: #0094D7; font-weight: bold; } .all{ font-size: 22upx; padding-top: 5px; } } } } }