.banner { width: 100%; height: 320rpx; } .banner swiper { width: 100%; height: 320rpx; } .banner-item { width: 100%; height: 320rpx; position: relative; } .banner-item .banner-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .banner-item .banner-content { position: relative; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; display: flex; align-items: flex-end; } .banner-item .banner-content .title { width: 100%; height: 50rpx; background: rgba(0,0,0, 0.4); box-sizing: border-box; padding: 0 20rpx; display: flex; align-items: center; justify-content: space-between; } .banner-item .banner-content .title .title-text { width: 75%; height: 50rpx; color: #fff; font-size: 26rpx; line-height: 50rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 自定义轮播指示点样式 */ .indication { height: 50rpx; display:flex; position: absolute; bottom: -2rpx; right: 20rpx; flex-direction:row; align-items:center; justify-content:center; } /* 未选中指示点样式 */ .spot{ width: 15rpx; height: 15rpx; border-radius: 50%; margin-right: 10rpx; background-color: #c6c6c8; } /*选中指示样式 */ .spot.active{ width: 15rpx; height: 15rpx; border-radius: 50%; background-color: #fff; }