wechat/src/pages/user/mainPage/indexPage/page.scss

.mainPage{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background: #fff;
  .banner{
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: .15rem auto 0;
    >div{
      margin: 0 .15rem;
      position: relative;
      overflow: hidden;
      >div{
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: .1rem;
        height: 0;
        padding-bottom: 55%;
        background: #eee;
        >div{
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          overflow: hidden;
          border-radius: .1rem;
        >div{
            width: 100%;
            height: 100%;
            border-radius: .1rem;
          }
        }
      }
    }
  }
  .subNav{
    margin: .3rem auto 0;
    ul{
      width: 100%;
      li{
        text-align: center;
        font-size: 0;
        img{
          display: inline-block;
          height: .25rem;
        }
        span{
          width: 100%;
          display: inline-block;
          text-align: center;
          font-size: .14rem;
          line-height: .22rem;
        }
      }
    }
  }
  .areaHeader{
    margin: .35rem auto 0;
    align-items: center;
    >h1{
      line-height: .28rem;
      margin-left: .15rem;
      font-size: .17rem;
    }
    >a{
      font-size: .12rem;
      color: #f83c00;
      margin-right: .15rem;
    }
  }
  .areaContent{
    margin: .2rem auto 0;
    .find{
      >div{
        width: 100%;
        position: relative;
        .swiper-container{
          width: 100%;
          position: relative;
          .swiper-slide{
            width: 1.14rem;
            height: .9rem;
            background: #eee;
            position: relative;
            overflow: hidden;
            border-radius: .1rem;
            margin-right: .15rem;
            &:first-child{
              margin-left: .15rem;
            }
            img{
              display: inline-block;
              position: relative;
              z-index: 1;
            }
            span{
              display: inline-block;
              position: absolute;
              z-index: 2;
              width: 100%;
              left: 0;
              bottom: .1rem;
              color: #fff;
              font-size: .11rem;
              i{
                font-size: .12rem;
                color: #fff;
                margin-left: .1rem;
              }
            }
          }
        }
      }
    }
    .course{
      >div{
        width: 100%;
        position: relative;
        .swiper-container{
          width: 100%;
          position: relative;
          .swiper-slide{
            width: 1.3rem;
            position: relative;
            overflow: visible;
            margin-right: .25rem;
            &:first-child{
              margin-left: .15rem;
            }
            .img{
              width: 100%;
              padding-bottom: 1.66rem;
              background: #eee;
              border-radius: .1rem;
              position: relative;
              overflow: hidden;
              img{
                z-index: 1;
              }
              span{
                width: 100%;
                left: 0;
                top: 0;
                font-size: .13rem;
                top: .1rem;
                text-indent: .1rem;
                display: inline-block;
                z-index: 2;
                position: absolute;
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .price{
              position: relative;
              overflow: visible;
              text-align: right;
              height: 0;
              span{
                display: inline-block;
                position: relative;
                z-index: 2;
                line-height: .24rem;
                color: #fff;
                padding: 0 .1rem;
                background: #ec1d24;
                border-radius: .24rem;
                font-size: .11rem;
                transform: translate(.1rem, -.35rem);
                -webkit-transform: translate(.1rem, -.35rem);
                box-shadow: 0 0 .1rem .01rem rgba(236, 29, 36, .15);
              }
              +span{
                line-height: .18rem;
                font-size: .1rem;
                margin: .1rem auto 0;
                +span{
                  line-height: .2rem;
                  font-size: .13rem;
                  display: block;
                }
              }
            }
            >span{
              width: 100%;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
  .newsList{
    >div{
      margin: 0 .15rem .2rem;
      >div{
        width: 100%;
        position: relative;
        overflow: hidden;
        ul{
          li{
            margin: .2rem auto 0;
            align-items: center;
            &:first-child{
              margin: 0 auto;
            }
            .img{
              width: 1.25rem;
              height: .8rem;
              border-radius: .1rem;
              background: #eee;
              position: relative;
              overflow: hidden;
            }
            >div{
              margin-left: .15rem;
              span{
                width: 100%;
                display: block;
                line-height: .24rem;
                &:first-child{
                  font-size: .14rem;
                  font-weight: bold;
                }
                &:nth-child(2){
                  font-size: .12rem;
                  color: #9d9d9d;
                }
              }
            }
          }
        }
      }
    }
  }
}