.page-course{ background:#000; background-repeat: no-repeat; width:100vw; min-height: 100vh; display:flex; flex-direction: column; padding-bottom:50px; .section0{ display: flex; margin-left: 10px; margin-right: 10px; .image{ width:100%; height:340px; overflow: hidden; border-radius: 7px; .img{ width:100%; height:100%; } } } .section1{ margin-left:10px; margin-right: 10px; display: flex; flex-direction:column; margin-top:10px; height:60px; .title{ height:30px; width:100%; display: flex; flex-direction:row; color:#FFF; .text{ width:50%; .name{ color:$teacher_main_color; font-size:14px; font-weight: bold; height:30px; line-height: 30px; } .tags{ display:flex; flex-direction: row; .tag{ border:1px solid $teacher_main_color; color:$teacher_main_color; font-size:12px; border-radius: 5px; padding:2px 5px; margin-right:10px; } } } .sign{ color:#FFF; width:50%; display: flex; flex-direction: row; justify-content: flex-end; >view{ .img{ margin-right: 10px; .icon{ width:14px; height:14px; } } } } } } .section2{ margin-top:10px; } .section3{ margin-top:10px; } .section4{ margin-top:10px; } .section5{ margin-top:10px; .cate{ display:flex; flex-direction: row; margin-left: 10px; border-radius: 5px; margin-right: 10px; height:30px; background:#1a1a1a; .name{ width:33%; height:100%; color:#FFF; display:flex; justify-content: center; align-items: center; font-size:12px; } } .intro{ background:#1a1a1a; border-radius: 10px; margin-top:10px; margin-left:10px; margin-right: 10px; .title{ height:30px; line-height: 30px; border-bottom: 1px solid #333; margin:10px; color:$teacher-main-color; font-size:14px; font-weight: bold; } .text{ font-size:12px; color:#CCC; padding:10px; } } } .footer{ position: fixed; bottom:0px; left:0px; width:100%; height:50px; background:#FFF; display:flex; flex-direction: row; border-top:1px solid #000; .left{ width:50%; height:100%; .price{ display:flex; flex-direction: row; width:100%; height:100%; justify-content: flex-start; align-items: center; padding-left:20px; color:#eb5c20; .sign{ margin-top:5px; font-size:12px; } .text{ font-size:24px; } } } .right{ width:50%; display:flex; flex-direction: row; height:100%; justify-content: flex-start; align-items: center; .share{ display:flex; width:50%; background:#000; color:#FFF; height:100%; justify-content: center; align-items: center; font-size:12px; } .yy{ background:#eb5c20; height:100%; width:50%; justify-content: center; align-items: center; font-size:12px; display:flex; color:#FFF; } } } .yy-form{ width:100%; background:#FFF; padding:10px; background:#000; height:500px; .yy-title{ width:100%; height:30px; line-height:30px; .txt{ font-size:12px; color:#FFF; margin-left:15px; } } .yy-list{ height:95%; overflow: hidden; overflow-y: auto; } } }