.bg0{ background-image: linear-gradient(to bottom right,#FEAC5E, #C779D0,#4BC0C8);/*#FEAC5E, #C779D0,#4BC0C8*/ } .bg1{ background-image: linear-gradient(to bottom right, #716da3, #ae5b84, #d76d77);/*#f8cdda, #1d2b64*/ } .bg2{ background-image: linear-gradient(to bottom right, #43cea2, #185a9d);/*#43cea2, #185a9d*/ } .bg3{ background-image: linear-gradient(to bottom right, #2c3e50, #3498db);/*#2c3e50, #3498db*/ } .bg4{ background-image: linear-gradient(to bottom right, #b92b27, #1565c0);/*#b92b27, #1565c0*/ } .bg5{ background-image: linear-gradient(to bottom right,#4f2f54,#505587, #755d97);/*#5fc3e4, #e55d87*/ } .bg6{ background-image: linear-gradient(to bottom right, #3a1c71, #d76d77, #ffaf7b);/*#3a1c71, #d76d77, #ffaf7b*/ } .operations{ position: absolute; top: 0; right: 0; height: 30px; width: 32px; text-align: center; } .course{ color: white; font-size:13px; border-radius: 5px; padding: 17px 2px 11px 8px; position: relative; overflow: hidden; } .sticky{ width: 36px; height: 18px; transform: rotate(-45deg); position: absolute; background: orange; top: -6px; left: -16px; border-bottom: #f0f0f0 3px solid; } .body{ display: flex; padding-right: 6px; align-items: center; } .avatar{ width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; margin: 0 16px 4px 8px; background: #eee; /*for out of network*/ } .course-info{ flex: auto; width: 10px; } .course-name{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 17px; font-weight: bold; } .school{ padding-right: 10px; } .info{ margin: 2px 0; } .detail-num{ margin-right: 12px; margin-left: 4px; }