.itemWrap { padding: 12px 15px 15px; border-radius: 10px; background-color: #fff; margin: 0 13px 12px; .itemWrapTop { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f2f2f2; .itemWrapTopLeft { display: flex; flex-direction: row; align-items: center; .clockWrap { width: 18px; height: 18px; margin-right: 6px; img { width: 100%; height: 100%; } } .leftTimer { font-size: 14px; font-weight: 500; color: #333333; line-height: 20px; } } .itemWrapTopRight { font-size: 12px; color: #777; } } .itemWrapBottom { padding-top: 15px; .courseInfo { display: flex; flex-direction: row; align-items: center; padding-bottom: 15px; .headImgs { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; margin-right: 12px; } .infoMsg { .infoMsgMain { font-size: 16px; font-weight: 600; color: #333333; line-height: 22px; } .infoMsgSub { font-size: 12px; font-weight: 400; color: #777777; line-height: 17px; } } } .attInfo { display: flex; flex-direction: row; align-items: center; justify-content: space-between; .attInfoDot { text-align: left; padding: 12px; .attInfoDotTitle { width: 100%; display: flex; flex-direction: row; margin-bottom: 7px; align-items: center; img { width: 18px; height: 18px; margin-left: 60px; } } .signTime { height: 31px; line-height: 31px; font-size: 20px; font-weight: 600; color: #333333; line-height: 28px; } } } .passWrap, .goWrap { display: flex; flex-direction: row; align-items: center; border-radius: 10px; justify-content: space-between; text-align: center; .itemBottomMain { font-size: 30px; font-weight: bold; color: #333333; line-height: 35px; margin-bottom: 2px; } .itemBottomSub { font-size: 14px; font-weight: 400; color: #333333; line-height: 20px; } } .passWrap { background-color: #ddecff; } .goWrap { background-color: #ffe1e1; } } }