.liveItem { margin: 10px 14px 0; width: auto !important; border-radius: 8px; padding: 10px; .liCover { width: 170px; height: 96px; background: #c6c7cb; border-radius: 8px; overflow: hidden; margin-right: 8px; vertical-align: middle; } .liTitle { padding-top: 4px; font-size: 14px; font-weight: 600; color: #333333; line-height: 20px; max-width: 150px; } .liUserInfo { padding-top: 4px; padding-bottom: 9px; font-size: 12px; color: #6a6a6a; line-height: 16px; } .liteachername { display: flex; align-items: center; margin-bottom: 6px; } .liteacherIcon { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; margin-right: 4px; } .liPrice { display: flex; align-items: center; justify-content: space-between; .price { color: #fa6400; font-size: 14px; margin-right: 10px; font-weight: 600; i { font-style: normal; font-size: 11px; } } .classNum { background: #fff1de; border-radius: 4px; font-size: 12px; color: #ff9300; line-height: 18px; padding: 1px 4px; } .num, .buyNum { font-size: 12px; color: #ff802c; line-height: 18px; } .buyNum { color: #999999; display: flex; align-items: center; line-height: 1; } } .subjectName { position: absolute; top: 8px; left: 8px; font-size: 12px; padding: 3px 5px; color: #ffffff; line-height: 1; border-radius: 1px; background: rgba(0, 0, 0, 0.29); } }