lixin-web/webapp/less/page/login.less

vue and bootstrap

.login-page{
  @media (min-height:@screen-sm){
    height: 100%;
  }
}

.login-bg{
  .bar{
    &,& + .login-footer{
      display: none;
    }
  }
  background-attachment: fixed;
  @media (min-width:@screen-sm){
    //background-image: url(../../img/login_bg_preload.jpg);
    background-position: 50% 50%;
    background-repeat:no-repeat;
  }
  @media (min-width:@screen-md){
    background-size: cover;
  }
}

.login-footer{
  color: #fff;
  text-align:center;
  font-size: @font-size-medium;
  margin-top: 100px;
  padding-bottom: 40px;
}

.sign-form{
  @state-error:@brand-danger;
  background: #f1f2f4;
  margin:auto;
  padding-left: 40px;
  padding-right: 40px;
  text-align: center;

  h1{
    color: @brand-primary;
    margin-top: 0;
    display: inline-block;
    img{
      display: block;
      margin-left:auto;
      margin-right:auto;
    }
  }

  .sign-validation();
  @media (min-width:@screen-sm){
    width: 518px;
    border-radius: @border-radius-base;
    position: relative;
    padding-top: 20px;
    margin-top: 204px;
    &:before{
      content: '';
      background-image: url(../../img/login-hook.png);
      background-size:cover;
      width: 90px;
      height: 464px/2;
      position: absolute;
      left: 0px;
      right: 0;
      margin:auto;
      .translate(0,-226px);
    }
    &:after{
      content:'';
      position: absolute;
      margin:auto;
      background: fade(#f1f2f4,20);
      top: -20px;
      bottom: -20px;
      right: -20px;
      left: -20px;
      border-radius: @border-radius-base;
      box-shadow:1px 1px 3px fade(#000,5);
      pointer-events: none;
    }
    h1{
      padding-top: 30px;

    }
  }


}
@media (min-width:@screen-sm){
  .hook-hole{
    background: #0346a1;
    margin:auto;
    height: 7px;
    border-radius:7px;
    width: 135px;
    box-shadow:inset -1px -1px 1px fade(#fff,50),0 -1px 2px fade(#000,50);
  }
}

@media (max-width:@screen-xs-max){
  body{
    background: #f1f2f4;
  }
  .login-footer{
    color: @text-color;
    margin-top: 0px;
  }
  .sign-form{
    padding: 15px;
    padding-bottom: 20px!important;
  }
}