<template>
  <div class="p-con">
    <div class="hd">
      <img src="@/assets/images/logo.png" alt="logo">
      <div class="txt">清控紫荆课堂</div>
    </div>
    <div class="bd">
      <div class="top50 container">
        <forget-login class="content-s-self">
          <div class="go-back" slot="go-back">
            <template v-if="query.rd">
              <router-link class="router-link-class" style="color: #000;" 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" style="color: #000;" active-class="router-link-active-class" :to="{ name: 'login-normal' }">返回登录</router-link>
            </template>
          </div>
        </forget-login>
      </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; }
/* forget 登录 */
.content-s-self { top: 50%; transform: translate(-50%, -50%); }
.go-back { margin-top: 0.2rem; text-align: left; }

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

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

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

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

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