.com-course-skill{ background:#1a1a1a; display:flex; flex-direction: row; margin-left:10px; margin-right: 10px; border-radius: 10px; margin-top:10px; height:80px; color:#FFF; .skill-number{ height:100%; width:30%; display: flex; flex-direction: column; height:100%; .skill-out{ background:$teacher-main-color; border-radius: 10px; color:#FFf; height:100%; .out-bg{ background-repeat: no-repeat; background-position:bottom left; height:80%; margin:10px; .txt{ margin-top:20px; font-size:24px; } .sign{ font-size:20px; } } } } .skill-item{ border:1px solid $teacher-main-color; margin-left:10px; width:70%; border-radius: 10px; display:flex; flex-direction: column; overflow:hidden; padding:10px; padding-top:5px; line-height: 26px; font-size:12px; .item{ height:25px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; .sign{ width:10%; display: flex; height:100%; justify-content:center; align-items: center; .circle{ width:10px; height:10px; border-radius: 50%; background:$teacher-main-color; } } .title{ display:flex; width:90%; height:100%; justify-content:flex-start; align-items: center; font-size:12px; } } } }