<template>
<div class="login-page">
  <div class="login-box">
    <div class="login-mian">
      <div class="left">
        <img src="../../assets/images/login-tit1.png" alt="" class="txt1">
        <img src="../../assets/images/login-tit2.png" alt="" class="txt2">
        <img src="../../assets/images/login-tit3.png" alt="" class="txt3">
      </div>
      <div class="login-modules">
        <normal-login>
          <div class="text" slot="text">
            <span class="code-login">
              <template v-if="query.rd">
                <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/code?rd=' + query.rd }">{{$t('Login.codeLogin')}}</router-link>
              </template>
              <template v-else>
                <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-code' }">{{$t('Login.codeLogin')}}</router-link>
              </template>
            </span>
            <span class="forget-pwd">
              <template v-if="query.rd">
                <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/forget?rd=' + query.rd }">{{$t('Login.forgetPassword')}}</router-link>
              </template>
              <template v-else>
                <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-forget' }">{{$t('Login.forgetPassword')}}</router-link>
              </template>
            </span>
          </div>
        </normal-login>
      </div>
    </div>
  </div>
  <div class="mobile-login">
    <div class="title-box">
      <img src="../../assets/images/mlogin-tit1.png" alt="" class="tit1">
      <img src="../../assets/images/mlogin-tit2.png" alt="" class="tit2">
    </div>
    <div class="logo-box">
      <img src="../../assets/images/mlogin-logo1.png" alt="" class="tit1">
      <img src="../../assets/images/mlogin-logo2.png" alt="" class="tit2">
    </div>
    <div class="text-box">
      <img src="../../assets/images/login-tit1.png" alt="" class="tit1">
      <img src="../../assets/images/login-tit2.png" alt="" class="tit2">
      <img src="../../assets/images/login-tit3.png" alt="" class="tit3">
    </div>
    <div class="mlogin-modules">
      <normal-login>
        <div class="text" slot="text">
          <span class="code-login">
            <template v-if="query.rd">
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/code?rd=' + query.rd }">{{$t('Login.codeLogin')}}</router-link>
            </template>
            <template v-else>
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-code' }">{{$t('Login.codeLogin')}}</router-link>
            </template>
          </span>
          <span class="forget-pwd">
            <template v-if="query.rd">
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/forget?rd=' + query.rd }">{{$t('Login.forgetPassword')}}</router-link>
            </template>
            <template v-else>
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-forget' }">{{$t('Login.forgetPassword')}}</router-link>
            </template>
          </span>
        </div>
      </normal-login>
    </div>
  </div>
</div>
</template>
<script>
import sLanguage from '@/components/languageSwitch/index.vue'

export default {
  components: { sLanguage },
  props: {
    params: { type: Object, required: false, default () { return {} } },
    query: { type: Object, required: false, default () { return {} } }
  },
  data () {
    return {
      loginUrl: {
        url: ''
      }
    }
  },
  metaInfo () {
    return {
      title: this.$t('Login.title'),
      meta: []
    }
  },
  mounted () {
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.loginUrl.url = '/mobile/list'
    } else {
      this.loginUrl.url = '/app/tips/learning-tips'
    }
  },
  methods: {
    dialogMsg () {
      this.$message({
        type: 'success',
        message: this.$t('Login.findPwdStr')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login-page{
  width: 100%;
  height: 100%;
}
.mobile-login{
  width: 100%;
  height: 100%;
  background: url('../../assets/images/mlogin-bg.png');
  background-size:100% 100%;
  .title-box{
    padding-top: 10px;
    .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/images/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;
    }
  }
}
/* 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>
