<template>
  <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>
</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-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 登录 */
.login-box .login-mian .login-modules .text .code-login a{ float: left; cursor: pointer; color:#186AA9;text-decoration:none;}
.login-box .login-mian .login-modules .text .forget-pwd a{ float: right; cursor: pointer; color:#186AA9;}
</style>
