<template>
  <div class="login-page">
    <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">
      <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>
  </div>
</template>

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

<style lang="scss" scoped>
::v-deep .el-button--primary {
  background: #006dbf;
  border: none;
}
.mobile-login {
  min-height: 100vh;
  background: url('../assets/mlogin-bg.png');
  background-size: 100% 100%;
  overflow: hidden;
  .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 {
  height: 100vh;
  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;
    }
  }
}

@media screen and (max-width: 480px) {
  .login-box {
    display: none;
  }
}
@media screen and (min-width: 1000px) {
  .mobile-login {
    display: none;
  }
}
</style>
