.trend-topic-wrapper { background: #fff; } .trend-topic-content { position: relative; width: 100%; border-bottom: 1px solid #e0e0e0; .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; z-index: 0; .pagination-inner { display: inline-block; padding: 0 8px 4px; background: rgba(0, 0, 0, 0.2); border-radius: 50px; line-height: 1.2; } span { float: left; width: 16px; height: 16px; margin: 0 8px; background: #f0f0f0; border-radius: 50%; opacity: 1; } span.swiper-pagination-bullet-active { background: #b0b0b0; } } } .trend-topic-swiper { height: 534px; overflow: hidden; ul { position: relative; li { float: left; height: 534px; .img-box { margin: 0 auto; width: 580px; height: 360px; line-height: 360px; text-align: center; img { vertical-align: middle; width: 100%; height: 100%; } } .item-content { margin: 20px 30px 0; .title { line-height: 52px; font-size: 30px; color: #000; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .time { margin: 16px 0 0; line-height: 24px; color: #afafaf; font-size: 18px; } .time-icon { margin-right: 8px; font-size: 14px; } } } } }