.slide-image { width: 90%; height: 150px; margin:5%; } .indexSwiper{ width: 100%; height:370rpx; } .nav-blue{ height: 320rpx; background-image: var(--gradualBlue); } .coursel{ position: relative; width: 100%; margin-top:-280rpx; height:370rpx; } .dots{ position: absolute; left: 0; right: 0; bottom: 20rpx; display: flex; justify-content: center; } .dots .dot{ margin: 0 8rpx; width:15rpx; height:6rpx; background:rgba(255,255,255,1); opacity:0.5; border-radius:1rpx; transition: all .6s; } .dots .dot.active{ width:24rpx; height:6rpx; background:rgba(255,255,255,1); border-radius:1rpx; } swiper image { width: 100%; } .f-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 120rpx; padding: 6rpx 30rpx 8rpx; background: #fff; } .f-header image { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 80rpx; height: 80rpx; margin-right: 20rpx; } .f-header .tit-box { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .f-header .tit { font-size: 34rpx; line-height: 1.3; } .f-header .tit2 { font-size: 24rpx; color: #909399; } .f-header .icon-you { font-size: 34rpx; color: #909399; } .nav-item{ width: 670rpx; margin-left: 40rpx; text-align: center; margin-top: 40rpx; border-radius: 2%; height: 232rpx; }