.detail-box { position: relative; .toapp { position: absolute; right: 0; top: 117px; width: 82px; height: 32px; text-align: center; line-height: 32px; background: linear-gradient(-90deg, $bg_active 0%, $bg_0078FF 100%); border-radius: 16px 0 0 16px; font-size: 12px; color: $white; z-index: 1; } .course-content { margin: 15px 12px 0 12px; padding-bottom: 10px; display: flex; justify-content: space-between; .cover { width: 42.2%; height: 108px; position: relative; img { border-radius: 3px; width: 100%; height: 100%; } .return_cash { position: absolute; top: 0; right: 0; width: 31px; height: 18px; background: url("./image/return.icon.png") no-repeat; background-size: 100% 100%; } } .info { width: 52.3%; position: relative; display: block; .title { font-size: 16px; color: $color_333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contact { font-size: 14px; color: $color_666; margin-top: 10px; } .des { position: absolute; bottom: 0; .course-price { .new { color: $red; font-size: 16px; } .old { color: $color_999; font-size: 12px; display: inline-block; margin-left: 15px; text-decoration: line-through; } } .isbuy { display: inline-block; width: 66px; height: 27px; background-color: $bg_ccc; color: $white; border-radius: 3px; font-size: 12px; text-align: center; line-height: 27px; } } } } .promise { padding: 15px 0; // height: 66px; border-top: 1px solid #e7eaf1; margin: 0 12px; display: flow-root; label { float: left; display: block; text-align: center; font-size: 12px; width: 54px; height: 18px; background-color: $bg_333; color: $white; border-radius: 6px 0 6px 0; } p { width: 75%; float: left; margin-left: 15px; font-size: 12px; color: $color_333; } } .group, .vip { margin: 10px 12px 0 12px; padding: 10px 12px; text-align: center; color: $white; font-size: 12px; border-radius: 6px 6px 0 0; } .group { background-color: $bg_82BBFB; } .vip { background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%); } .groupSuccessMbc { position: fixed; z-index: 999; background: rgba(0, 0, 0, 0.8); left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; .content { width: 300px; height: 190px; background-color: #fff; padding: 16px; .imgList { padding-top: 20px; .imgContainer { position: relative; width: 44px; height: 44px; border-radius: 50%; margin-right: 20px; .imgname { margin: 0; } .leaderFlag { position: absolute; background-color: #0099ff; border: 1px solid #fff; width: 30px; color: #fff; line-height: 18px; height: 18px; text-align: center; border-radius: 9px; top: -6px; span { font-size: 12px; transform: scale(0.9); } } } } .group-btn { height: 30px; line-height: 30px; font-size: 14px; } } .tipContent { width: 270px; height: 44px; line-height: 44px; text-align: center; border: 1px dashed rgba(255, 255, 255, 1); border-radius: 3px; color: #fff; font-size: 14px; position: absolute; top: 100px; } .tipArrow { position: absolute; right: 15px; top: 38px; .iconyindao:before { font-size: 44px; color: #FFF; } } } }