.swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide .item{ width: 10rem; height: 5.55rem; position: relative; } .swiper-slide .item img{ width: 10rem; height: 5.55rem; } .swiper-slide .item .carousel-caption{ position: absolute; background: rgba(0,0,0,0.6)!important; filter: alpha(opacity=60); left: 0!important; right: 0!important; padding: 0!important; bottom: 0; text-align: left; } .swiper-slide .item .carousel-caption p { font-size: 0.3rem; color: #fff; width: 8.5rem; height: 1rem; line-height: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 0.25rem; margin: 0; } .swiper-pagination-bullet{ background: #fff; opacity: 1; margin: 0 0.13rem !important; } .swiper-pagination-bullet-active{ background: #1aaee8; } .swiper-pagination{ text-align: right; } .marquee-container { height: 0.55rem; line-height: 0.55rem; background: #efefef; position: relative; } .marquee-container .marquee { position: absolute; top: 0; left: 0.69rem; width: 9.3rem; height: 0.55rem; overflow: hidden; } .marquee-container .marquee ul{ list-style: none; margin: 0; padding: 0; } .marquee-container .marquee ul li { float: left; padding: 0 0.34rem; height: 0.55rem; line-height: 0.55rem; } .marquee-container .marquee ul li a { font-size: 0.25rem; color: #777; display: block; } .marquee-container>span{ position: absolute; top: 0.18rem; left: 0.13rem; background: no-repeat center; background-size: cover; width: 0.27rem; height: 0.2rem; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin-bottom: 0.05rem; }