_trend-topics.css 1.92 KB
.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;
        }

        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;
                }
            }
        }
    }
}