.reserve-course-module { margin: 20px 15px 0 20px; padding-bottom: 5px; .course-list { ul { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; .course-item-box { width: 48%; padding: 4px; background-color: #fff; border-radius: 2px; margin-bottom: 15px; text-align: left; .top { width: 100%; height: 108px; position: relative; .course-img { width: 100%; height: 108px; } .square { background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/course-label-bg.png"); background-repeat: no-repeat; background-size: cover; width: 60px; height: 60px; position: absolute; left: 0; bottom: 0; .circular { height: 100%; width: 100%; color: #fff; padding-top: 15px; text-align: left; padding-left: 5px; span { font-size: 16px; margin-left: 3px; } } } } .count-price { text-align: left; color: #555; margin-top: 8px; line-height: 15px; span { color: #FF4000; i { font-size: 16px; font-style: normal; margin-left: 3px; } } } .btn { width: 100%; padding: 0 5px; margin-top: 8px; margin-bottom: 5px; button { width: 100%; height: 24px; border-radius: 2px; font-size: 12px; color: #fff; border: none; } .to-expand-buy1 { background: linear-gradient(-90deg, #7800FF 0%, #FF4BF0 100%); } .to-expand-buy2 { background: linear-gradient(-90deg, #FF8C1B 0%, #FF3B05 100%); } .to-study { background: linear-gradient(-90deg, #2ECEF0 0%, #2D56F0 100%); } } } } } .more-button { display: block; width: 100px; height: 27px; margin: 5px auto 15px; border: 1px solid #fff; border-radius: 14px; font-size: 13px; font-weight: 300; color: #fff; background-color: transparent; cursor: pointer; outline: none; } }