.top-select{ height:90rpx; background:rgba(255,255,255,1); box-shadow:0px 0px 16rpx 0px rgba(0,0,0,0.1); border-radius:0px 0px 31rpx 31rpx; padding: 0 30rpx; display: flex; margin-bottom: 10rpx; } .select-box{ padding: 0 30rpx; position: relative; font-size: 32rpx; display: flex; align-items: center; justify-content: center; } .select-box image{ position: absolute; top: 50%; width: 20rpx; height: 30rpx; display: none; transform: translate(0, -50%); } .select-box.active image{ display: block; } .select-l{ left: 0; } .select-r{ right: 0; } .venue-info{ padding: 0 30rpx; } .title{ font-size: 30rpx; color: #000; margin-bottom: 10rpx; } .content{ font-size: 28rpx; color: #949494; margin-bottom: 10rpx; } .date{ border-top: 3px solid #DEDEDE; border-bottom: 3px solid #DEDEDE; padding: 0 30rpx; } .date-container, .ground-container{ display: flex; flex-wrap: nowrap; overflow-x: auto; } .date-box, .ground-box{ flex-shrink: 0; padding: 15rpx 0; margin-right: 15rpx; font-size: 30rpx; color: #949494; } .date-box.active{ color: #9F1512; } .ground{ margin: 20rpx 0; padding: 0 30rpx 20rpx; border-bottom: 3px solid #DEDEDE; } .ground-box{ margin: 0; padding: 0 25rpx; position: relative; } .ground-box image{ width: 20rpx; height: 30rpx; position: absolute; top: 50%; transform: translate(0, -50%); display: none; } .left{ left: 0 } .right{ right: 0 } .ground-box.active{ color: #9F1512; } .ground-box.active image{ display: block; } .time{ padding: 0 30rpx; } .time-box{ display: inline-block; width: 32%; margin-right: 2%; background: rgba(159,21,18,.5); color: #fff; font-size: 28rpx; border-radius: 15rpx; margin-bottom: 15rpx; text-align: center; padding: 15rpx; box-sizing: border-box; } .time-box:nth-child(3n){ margin-right: 0 } .time-box.selected{ background: #9F1512; } .bottom{ position: fixed; bottom: 0; left: 0; right: 0; padding: 15rpx 30rpx; } .phone-code{ margin-bottom: 20rpx; } .row{ display: flex; justify-content: space-between; } .row-title{ width: 20%; font-size: 28rpx; color: #000; line-height: 55rpx; padding: 10rpx 0; } .row-input{ width: 78%; border-bottom: 1px solid #DEDEDE; display: flex; justify-content: space-between; padding: 10rpx 0; } .row-input input{ width: 100%; height: 55rpx; } .row-input input.code-input{ width: 70%; } .get-code{ width: 28%; font-size: 28rpx; background: #9F1512; color: #fff; display: flex; justify-content: center; align-items: center; } .pay-book{ display: flex; justify-content: space-between; } .pay, .book{ width: 70%; height: 60rpx; background: #9F1512; color: #fff; font-size: 28rpx; display: flex; justify-content: center; align-items: center; } .book{ width: 29%; } .order-info{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0,0.6); } .order-container{ position: absolute; bottom: 90rpx; left: 30rpx; right: 30rpx; background: #fff; border-radius: 10rpx; padding: 20rpx; } .order-title{ font-size: 30rpx; text-align: center; color: #9F1512; } .order{ margin-top: 20rpx; overflow-x: auto; white-space: nowrap; } .order-box{ border: 1px solid #9F1512; border-radius: 10rpx; text-align: center; display: inline-block; margin-right: 20rpx; font-size: 28rpx; width: 32%; } .top{ background: #9F1512; color: #fff; }