<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 class="code">
            <h1>扫码咨询</h1>
            <img src="../assets/code.png" />
          </div>
        </div>
        <div class="login-modules">
          <router-view></router-view>
          <div class="logo-all">
            <img src="../assets/logo1.png" alt="" class="logo1" />
            <img src="../assets/logo2.png" alt="" class="logo2" />
          </div>
        </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 class="mobile-code">
        <h1>扫码咨询</h1>
        <img src="../assets/code.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WmpLayout',
  head() {
    return {
      link: [{ vmid: 'icon', rel: 'icon', href: 'https://zws-imgs-pub.ezijing.com/static/build/learn-enterprise/favicon.png' }]
    }
  },
  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>
:deep(.el-button--primary) {
  background: #006dbf;
  border: none;
}
.code {
  width: 100px;
  position: absolute;
  bottom: -90%;
  left: 0;
  h1 {
    font-weight: normal;
    font-size: 24px;
    color: #2b6db9;
    text-align: center;
    margin-bottom: 10px;
  }
  img {
    width: 100%;
    display: block;
  }
}
.mobile-login {
  min-height: 100vh;
  background: url('../assets/mlogin-bg.png');
  background-size: 100% 100%;
  overflow: hidden;
  .mobile-code {
    width: 100px;
    margin: 0 auto;
    h1 {
      font-weight: normal;
      font-size: 20px;
      color: #2b6db9;
      text-align: center;
      margin-bottom: 10px;
    }
    img {
      width: 100%;
      display: block;
    }
  }
  .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;
      .logo-all {
        position: absolute;
        bottom: -150px;
        left: -155px;
        display: flex;
        align-items: center;
        img {
          width: 260px;
        }
        .logo2 {
          margin-left: 30px;
        }
      }
    }
  }
}

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