lixin-web/webapp/less/banner.less

vue and bootstrap

.index-banner{

  //background-image: url(../img/index_banner.jpg);
  background-size:cover;
  background-position: 50% 0;
  background-repeat:no-repeat;
  position: relative;
  margin-top:@bar-height;
  .transition(height .75s);
  > .container{
    padding-top: 6.5%;

  }

  @media (min-width: @screen-sm){

    height: 838px;

    > .container{
      position: relative;
      height: 100%;

    }
  }
  @media (min-height:900px){
    .mouse-icon{
      bottom: 60px;
    }
  }
}

.index-banner-text{
  position: absolute;
  width: 432px;
  height: 190px;
  margin:auto;
  left: 50%;
  top: 96px;
  .translateX(-432px/2);
}

.about-banner{
  height: 340px;
  background-position: 50% 0;
  color: #fff;
  text-align: center;
  padding-top: 115px;
}

@media (min-width: @screen-sm){
  .index-banner,.about-banner{
    margin-top:@banner-top;
  }
}