study_wxapp/pages/index/index.wxss

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