<template>
  <div class="login-page" :style="setHeight">
    <div class="login-box">
      <div class="login-mian">
        <div class="left">
          <img src="../assets/login-tit1.png" alt="" class="txt1">
          <img src="../assets/login-tit2.png" alt="" class="txt2">
          <img v-if="imgUrl==='pc'" src="../assets/login-tit3-pc.png" alt="" class="txt3">
          <img v-if="imgUrl==='mobile'" src="../assets/login-tit3.png" alt="" class="txt3">
        </div>
        <div class="login-modules">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <div class="mobile-login" :style="setHeight">
      <div class="title-box">
        <img src="../assets/mlogin-tit1.png" alt="" class="tit1">
        <img src="../assets/mlogin-tit2.png" alt="" class="tit2">
      </div>
      <div class="logo-box">
        <img src="../assets/mlogin-logo1.png" alt="" class="tit1">
        <img src="../assets/mlogin-logo2.png" alt="" class="tit2">
      </div>
      <div class="text-box">
        <img src="../assets/login-tit1.png" alt="" class="tit1">
        <img src="../assets/login-tit2.png" alt="" class="tit2">
        <img src="../assets/login-tit3.png" alt="" class="tit3">
      </div>
      <div class="mlogin-modules">
        <router-view></router-view>
      </div>
      <!-- <div class="new-user" @click="go">我是新用户?</div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'WmpLayout',
  data() {
    return {
      imgUrl: 'pc',
      setHeight: 0
    }
  },
  created () {
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.imgUrl = 'mobile'
    } else {
      this.imgUrl = 'pc'
    }
    this.setHeight = `height: ${document.documentElement.clientHeight}px`
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-button--primary{
  background: #006dbf;
  border: none;
}
.login-page{
  width: 100%;
  height: 100%;
}
.mobile-login{
  width: 100%;
  height: 100%;
  background: url('../assets/mlogin-bg.png');
  background-size:100% 100%;
  .title-box{
    padding-top: 13px;
    .tit1{
      width: 40%;
    }
    .tit2{
      width: 40%;
      margin-top: 10px;
    }
    img{
      display: block;
      margin-left: 13%;
    }
  }
  .logo-box{
    width: 75%;
    margin: 0 auto;
    margin-top:15%;
    overflow: hidden;
    .tit2{
      float: right;
    }
    img{
      float: left;
      display: block;
      width: 45%;
    }
  }
  .text-box{
    padding-top: 5%;
    width: 75%;
    margin: 0 auto;
    img{
      display: block;
      width: 100%;
      margin-top: 5%;
    }
  }
  .mlogin-modules{
    width: 75%;
    margin: 10% auto;
  }
}
.login-box{
  width: 100%;
  height: 100%;
  background: url('../assets/login-bg.png');
  background-size:100% 100%;
  .login-mian{
    position: relative;
    width: 1100px;
    height: 100%;
    margin: 0 auto;
    .left{
      position: absolute;
      top: 50%;
      left: 0;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      img{
        display: block;
      }
      .txt1{
        width: 544px;
      }
      .txt2{
        width: 541px;
        margin: 30px 0;
      }
      .txt3{
        width: 542px;
      }
    }
    .login-modules{
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      right: 0;
      width: 400px;
    }
  }
}
.new-user{
  font-size: 16px;
  font-weight:bold;
  color:rgba(255,158,100,1);
  text-align: center;
  padding-top: 30px;
  text-decoration: underline;
}
/* normal 登录 */
.code-login a{ float: left; cursor: pointer; color:#186AA9;text-decoration:none;}
.forget-pwd a{ float: right; cursor: pointer; color:#186AA9;}
@media screen and (max-width: 480px){
  .login-box{display: none;}
}
@media screen and (min-width: 1000px){
  .mobile-login{display: none;}
}
</style>
