.com-teacher{ display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; height:100px; background:#505050; border-bottom:10px; border-bottom:1px solid #434343; .header{ width:30%; display: flex; justify-content: center; align-items: center; height:100%; .img{ width:60px; height:60px; border-radius: 50%; } } .intro{ width:50%; color:#FFF; display: flex; flex-direction: column; .name{ font-size:14px; font-weight: bold; height:30px; line-height: 30px; margin-top:15px; } .time{ color:#CCC; } .tags{ display: flex; flex-direction: row; margin-top:5px; font-size:12px; color:#CCC; // .tag{ // border:1px solid $teacher-main-color; // color:$teacher-main-color; // margin-right:5px; // border-radius: 3px; // padding:0px 3px; // font-size:12px; // } } } .btns{ width:30%; height:100%; display:flex; justify-content: center; align-items: center; .btn{ padding:0px; margin:0px; height:30px; width:80%; font-size:12px; line-height: 30px; border-radius:10px; } .disabled{ background:#CCC; } .active{ background:$teacher-main-color; color:#FFF; } } }