.python__des { width: 100vw; height: 100vh; padding-bottom: 60px; overflow: auto; background: #fff; .share-ranking{ border-color: #fff; } .des__start { position: relative; width: 100%; height: 258px; background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/banner.png") center center no-repeat; background-size: contain; } .python__define { position: relative; padding-top: 28px; .define__title { font-size: 22px; line-height: 22px; font-weight: 600; color: #4B41FF; text-align: center; text-align-last: center; margin: 0 auto 40px; } .number_one { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-bottom: 30px; } // 公共 .trophy { width: 75px; height: 75px; margin-bottom: 12px; } .item__title { font-size: 16px; line-height: 16px; font-weight: 600; color: rgba(82, 92, 101, 1); margin-bottom: 12px; } .item__subtitle { font-size: 12px; font-weight: 400; color: rgba(82, 92, 101, 0.8); text-align: center; text-align-last: center; margin-bottom: 16px; } .left__decorate { position: absolute; left: 0; top: -50px; width: 60px; height: 216px; } .right__decorate { position: absolute; right: 0; top: 156px; width: 44px; height: 180px; } } .bottom__btn_group { width: 100%; height: 56px; display: flex; justify-content: space-between; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; padding: 0 14px; background: #fff; .online__label { font-size: 18px; font-weight: 600; color: #525C65; } .online__button { width: 160px; height: 37px; border-style: none; border-radius: 19px; font-size: 15px; font-weight: 600; color: #fff; background-color: rgba(82,92,101,.6); outline: none; } .course__price { width: 100px; font-size: 24px; font-weight: 600; color: rgba(255, 33, 33, 1); position: relative; } .discount { width: 54px; height: 22px; background: rgba(248, 60, 46, 1); border-radius: 2px; display: flex; justify-content: center; align-items: center; font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 1); position: absolute; left: 46px; top: -18px; .triangle { width: 0; height: 0; border-left: 5px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #FB3A22; position: absolute; bottom: -5px; left: 8px; } } .btn__group { display: flex; justify-content: center; align-items: center; .try__study { width: 100px; height: 38px; border: 1px solid rgba(0, 153, 255, 1); border-radius: 19px; box-sizing: border-box; font-size: 16px; font-weight: 600; color: rgba(0, 153, 255, 1); display: flex; justify-content: center; align-items: center; } .sign__now { width: 110px; height: 38px; background: rgba(0, 153, 255, 1); border-radius: 19px; box-sizing: border-box; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 1); display: flex; justify-content: center; align-items: center; margin-left: 12px; } } } .toapp { position: fixed; 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: 9; } }