<template>
  <div class="p-con">
    <div class="hd">
      <img src="@/assets/images/logo.png" alt="logo">
      <div class="txt">在线学习系统</div>
      <!-- <s-language></s-language> -->
    </div>
    <div class="bd">
      <div class="top50 container">
        <el-row>
          <el-col :xs="2" :sm="7" :md="3" :lg="3" :xl="3"><div style="height: 1px;"></div></el-col>
          <el-col class="hidden-xs-only hidden-sm-only" :md="10" :lg="10" :xl="10">
            <img src="@/assets/images/login-left-bg.png" alt="左侧-sofia logo">
          </el-col>
          <el-col :xs="20" :sm="10" :md="6" :lg="6" :xl="6">
            <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>
                  <!-- <div class="router-link-class" @click="dialogMsg">{{$t('Login.forgetPassword')}}</div> -->
                </span>
              </div>
            </normal-login>
          </el-col>
          <el-col :xs="2" :sm="7" :md="5" :lg="5" :xl="5"><div style="height: 1px;"></div></el-col>
        </el-row>
      </div>
    </div>
    <div class="ft">
      <div class="num">学习平台服务电话：010-62793299</div>
      <div class="time">服务时间：9:00-18:00</div>
      <div class="txt">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司 京ICP证150431号 京公网安备 11010802023681号</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>
.p-con { position: relative; width: 100%; height: 100%; background: #981838; color: #535353; text-align: center; }
/* 头部 */
.p-con .hd { position: absolute; top: 0; left: 0; right: 0; background: #ffffff; }
.p-con .hd img { display: block; margin: 0 auto; padding: 0.3rem 0 0.1rem 0; }
.p-con .hd .txt { margin: 0 auto; padding: 0 0 0.2rem 0; letter-spacing: 0.05rem; font-size: 0.32rem; font-weight: 700; }
/* 底部 */
.p-con .ft { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.4rem 0 0.1rem 0; background: #e5e5e5; }
.p-con .ft .num { font-size: 0.14rem; line-height: 1.5; }
.p-con .ft .time { font-size: 0.14rem; line-height: 1.5; }
.p-con .ft .txt { padding: 0.1rem; color: #898989; font-size: 0.12rem; line-height: 1.5; }
/* 中间部分 */
.p-con .bd { position: relative; padding: 1.45rem 0 1.3rem 0; margin: 0 auto; height: 100%; min-height: 6rem; box-sizing: border-box; }
.p-con .bd .router-link-class { color: #ffffff; text-decoration: none; }

/* normal 登录 */
.p-con .bd .top50 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.p-con .bd .top50 img { display: block; margin: 0 auto; }
.p-con .bd .top50 .login-btn { margin-top: 0.1rem; background: #ffffff; border-color: #ffffff; color: #000; width: 100%; }
.p-con .bd .top50 .text { margin-top: -16px; color: #e5e5e5; font-size: 16px; line-height: 1.5; overflow: hidden; }
.p-con .bd .top50 .text .code-login { float: left; cursor: pointer; }
.p-con .bd .top50 .text .forget-pwd { float: right; cursor: pointer; }

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) { .container { position: relative; margin: 0 auto; width: 100%; } }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) { .container { position: relative; margin: 0 auto; width: 576px; } }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) { .container { position: relative; margin: 0 auto; width: 768px; } }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) { .container { position: relative; margin: 0 auto; width: 992px; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .container { position: relative; margin: 0 auto; width: 1200px; } }
</style>
