.shop-recom { &-swiper-container { position: relative; width: 100%; height: 407px; .top { float: left; height: 174px; width: 100%; } .bottom { float: left; height: 183px; width: 50%; background: #f5f7f6; &.left { border-right: 1px solid #e0e0e0; } img { width: 138px; height: 100%; margin: 0 auto; } } .fav-container { position: absolute; top: 12px; left: 15px; span { font-size: 18px; color: #fff; } } .shop-fav { display: inline-block; height: 21px; width: 24px; background: resolve("channel/faved.png"); background-size: 100% 100%; vertical-align: middle; margin-right: 8px; } .shop-notfav { display: inline-block; height: 21px; width: 24px; background: resolve("channel/notfav.png"); background-size: 100% 100%; vertical-align: middle; margin-right: 8px; } .faved-num { position: absolute; top: 12px; right: 12px; color: #fff; font-size: 18px; } } .swiper-wrapper { white-space: nowrap; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; } .recom-shop { position: relative; display: inline-block; height: 354px; width: 358px; margin: 26px 26px 0; border-radius: 5px; vertical-align: top; transition: all 0.3s; .shop-top { position: absolute; top: 0; left: 0; height: 45px; width: 358px; background: resolve("channel/shop-top.png"); background-size: 100% 100%; } } .recom-active { transform: scale(1.15); transform-origin: 50% 0 0; margin-top: 0; } }