.page-yy-form{ width:100vw; height:100vh; min-height:100vh; overflow: hidden; background:#000; display:flex; flex-direction: column; .date-list{ display:flex; width:100%; height:60px; // border:1px solid red; padding-top:10px; background:#e2e2e2; padding-bottom:5px; .date-item{ display: flex; height:100%; width:15%; flex-direction: column; justify-content: center; align-items: center; font-size:12px; .week{ display:flex; height:40%; justify-content: center; align-items: center; font-size:14px; .text{ } } .day{ display:flex; height:60%; justify-content: center; align-items: center; font-size:14px; margin-top:10px; } } .active{ .week{ .text{ display:flex; color:#FFf; width:25px; height:25px; background:#b21c1c; border-radius: 50%; justify-content: center; align-items: center; } } } } .time-list{ width:100%; height:90%; background:#f0f0f0; padding-bottom:80px; overflow: hidden; overflow-y: scroll; .times{ height:100%; width:100%; .item{ display: flex; flex-direction: row; height:35px!important; border-bottom: 1px solid #f4f4f4; justify-content: flex-start; background:#FFF; align-items: center; .time{ display:flex; width:15%; height:100%; justify-content: center; align-items: center; .text{ color:#a2a2a2; } } .status{ display:flex; height:100%; width:85%; justify-content: flex-start; align-items: center; .text{ font-size:12px; width:100%; height:100%; display:flex; justify-content:center; align-items: center; } } } .disabled{ background:#f1f1f1; .time{ .text{ color:#b3b3b3; } } .status{ .text{ color:#b3b3b3; } } } .Full{ background:#ff5500; .time{ .text{ color:#FFF; } } .status{ .text{ color:#FFF; } } } .active{ background:#ffffff; .time{ .text{ color:#333; } } .status{ .text{ color:#333; } } } .selected{ background:#ffaa00; .time{ .text{ color:#FFF; } } .status{ .text{ color:#FFF; } } } } } .footer{ position: absolute; bottom:0px; height:50px; display:flex; width:100%; background:#eeeeee; flex-direction: row; border-top:1px solid #dcdcdc; justify-content: center; align-items: center; .btn{ background:#eb5c20; height:30px; width:80%; justify-content: center; align-items: center; font-size:12px; display:flex; color:#FFF; border-radius: 10px; } } .package{ width:100%; min-height: 200px; background:#FFF; overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px; .title{ font-size:14px; font-weight: bold; width:100%; height:30px; line-height: 30px; text-align:center; } .list{ width:100%; background:#FFF; padding:10px; .item{ width:180px; height:200px; border:1px solid red; display:flex; flex-direction: column; justify-content: flex-start; align-items: center; .img{ width:100%; display:flex; flex-direction: column; justify-content: center; align-items: center; border:1px solid red; .icon{ width:150px; height:150px; border:1px solid red; } } } } } }