<template>
<div class="login-page">
  <div class="login-box">
    <div class="login-mian">
      <div class="login-modules">
        <forget-login class="content-s-self">
          <div class="go-back" slot="go-back">
            <template v-if="query.rd">
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/index?rd=' + query.rd }">返回登录</router-link>
            </template>
            <template v-else>
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-normal' }">返回登录</router-link>
            </template>
          </div>
        </forget-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">
      <forget-login class="content-s-self">
        <div class="go-back" slot="go-back">
          <template v-if="query.rd">
            <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/index?rd=' + query.rd }">返回登录</router-link>
          </template>
          <template v-else>
            <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-normal' }">返回登录</router-link>
          </template>
        </div>
      </forget-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 {}
  },
  metaInfo () {
    return {
      title: this.$t('Login.title'),
      meta: []
    }
  },
  mounted () {},
  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:10%;
    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: 3%;
    }
  }
  .mlogin-modules{
    width: 75%;
    margin: 0 auto;
  }
}
.login-box{
  width: 100%;
  height: 100%;
  background: url('../../assets/images/login-bg.png');
  background-size:100% 100%;
  .login-modules{
    width: 100%;
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
/* normal 登录 */
.login-modules a{ cursor: pointer; color:#186AA9;text-decoration:none;}
.mlogin-modules a{ cursor: pointer; color:#186AA9;text-decoration:none;}
@media screen and (max-width: 480px){
  .login-box{display: none;}
  .content-s{
    top: auto;
    margin-top: 8%;
  }
}
@media screen and (min-width: 1000px){
  .mobile-login{display: none;}
}
</style>
