.fresh-swiper { position: relative; overflow: hidden; ul { li { float: left; width: 100%; a, img { display: block; width: 100%; height: 100%; } } } .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; .pagination-inner { display: inline-block; padding: 0 8px 4px; background: rgba(0, 0, 0, 0.2); border-radius: 50px; line-height: 1.2; span { display: inline-block; width: 14px; height: 14px; background: #fff; opacity: 0.5; margin: 0 9px; border-radius: 50%; } span.swiper-active-switch { opacity: 1; } } } } .fresh-list-swiper { overflow: hidden; padding-bottom: 15px; background-color: #fff; height: 470px; ul { box-sizing: border-box; } li { float: left; width: 240px; margin: 20px 10px 0; border: none; &:first-child { margin-left: 20px; } &:last-child { margin-right: 20px; } .img-box { width: 100%; height: 320px; overflow: hidden; text-align: center; position: relative; img { width: 100%; height: 320px; vertical-align: middle; border: none; outline: none; } } .fresh-info { .fresh-name a { display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; color: #444; line-height: 48px; font-size: 22px; } .cur-price { color: #d62927; font-size: 22px; } .old-price { margin: 0 0 0 10px; color: #b0b0b0; text-decoration: line-through; font-size: 22px; } .fresh-icon { background: #d62927; width: 100px; height: 33px; display: block; margin: 8px auto 0; color: #fff; text-align: center; border-radius: 40px; line-height: 33px; } } } } .fresh-list { position: relative; padding: 15px 0 0 15px; }