@import "../theme.less";
@import "./var.less";

//页面框架
.page{
  position:relative;
  min-width:@c-page-main-width;
  min-height:600px;
  width:100%;
  height:100%;
  font-size:@c-font-size-base;
  color:@c-font-base-color;
  //page-header
  &-header{
    position: absolute;
    top: 0;
    left:0;
    z-index:1;
    width:100%;
    height: @c-page-header-height;
    padding:0 @c-page-header-padding-h;
    color:@c-page-header-color;
    background:@c-page-header-bg;

    .main-header{
      width:@c-page-header-width;
      height:@c-page-header-height;
      margin:0 auto;

      .header-title{
        float:left;
        width:@c-page-header-title-width;
        height: @c-page-header-height;
        line-height:@c-page-header-height;
        text-align:left;
      }

      .header-extra{
        margin-left:@c-page-header-title-width;
        height:@c-page-header-height;
        line-height:@c-page-header-height;
        text-align:right;
      }

      > section > *{
          display:inline-block;
          vertical-align:middle;
          line-height:1;
      }
      
    }

    img{
      height:52px;
      vertical-align: middle;
      cursor: pointer;
    }

    span{
      margin-left: 24px;
      line-height: @c-page-header-height;
    }
  }
  //page-main
  &-main{
    position: absolute;
    top:@c-page-header-height;
    right:0;
    left:0;
    bottom:@c-page-footer-height;
    .fullheight(@c-page-footer-display);
    overflow:auto;

    .main-warpper{
      height:100%;
      width: 100%;
      position: relative;
      background:@c-body-bg;
      background-size:cover;
    }

  }
  //page-footer
  &-footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:@c-page-footer-height;
    padding:@c-page-footer-padding;
    background:@c-page-footer-bg;
    text-align:center;
    .showfooter(@c-page-footer-display);

    .footer-main{
      color:@c-page-footer-color;
      width:@c-page-footer-width;
      margin:0 auto;
    }
  }

}

//登录面板
.login-panel{
  position: absolute;
  top:12%;
  left:50%;
  margin-left:@c-page-main-width/2 - @c-login-panel-width;
  width: @c-login-panel-width;
  height:@c-login-panel-height;
  border-radius:@c-login-panel-radius;
  box-shadow:@c-login-panel-shadow;
  background:@c-login-panel-bg;
  overflow: hidden;
  
  &-handler{ 
    position: absolute;
    top:0;
    right:0;
    display:@c-login-panel-handler-display;                                
    width:@c-login-panel-handler-size;
    height:@c-login-panel-handler-size; 
    line-height:1;
    text-align:right;
    box-sizing:border-box;
    padding:8px;
    font-size:@c-login-panel-handler-size/1.6;
    color:@primary-color;    
    cursor:pointer;
  }
  &-handler:after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:@c-login-panel-handler-size;
    height:@c-login-panel-handler-size;
    background:url(../../../share/login-handler-mask.png);
    background-size:100% 100%;
  }

  &-title{                                 
    margin:36px 0 24px -30px;
    font-size: @c-font-size-large;
    font-weight:400;
    color:#000;
  }

  a{                                      
    float: right;
    font-size:@c-font-size-small;
  }

  .static-form{                             
    position: relative;
    float: left;
    width:@c-login-panel-width;
    height: @c-login-panel-height;
    padding:0 60px;
  }
  
  .quick-form{
    .static-form;

    .qrcode-img{                          
      width:@c-login-qrcode-size;
      height:@c-login-qrcode-size;
      background:#f5f5f5;
      box-sizing:content-box;
      border:1px solid @border-split-color;
      margin:44px auto 0;
    }

    p{
      padding-top:32px;
      text-align: center;
    }
  }

  &-swiper{
    position: absolute;
    width: 420px;
    height: @c-login-panel-height;
  }
}

//show-footer
.showfooter(@c-page-footer-display) when(@c-page-footer-display = none){
  display:none;
}
.fullheight(@c-page-footer-display) when(@c-page-footer-display = none){
 bottom:0;
}



