<template>
  <footer class="main-footer">
    <div class="top">
      <div class="about">
        <p v-html="$t('foot.address')"></p>
        <p style="padding:10px 0;">{{ $t('foot.contact') }}</p>
        <p v-html="$t('foot.email')"></p>
      </div>
      <div class="relation">
        <p>{{ $t('foot.relationT1') }}</p>
        <div>
          <div class="relation_desc">{{ $t('foot.relationT2') }}</div>
          <div class="relation_desc2">{{ $t('foot.relationT3') }}</div>
        </div>
      </div>
      <div class="link">
        <template v-for="(item, index) in link">
          <a :href="item.href" :key="index" target="_blank">{{ item.title }}</a>
        </template>
      </div>
      <div class="friendlink" v-if="false">
        友情链接：
        <template v-for="(item, index) in link2">
          <a :href="item.href" :key="index" target="_blank">{{ item.title }}</a>
        </template>
      </div>
    </div>
    <div class="copyright">
      <p>Copyright @ 2017 Zijing Education. All rights reserved.</p>
      <p>京ICP证150431号 <img src="~/assets/images/icon_jinghui.png" height="12" />京公网安备 11010802023681号</p>
      <p>清控紫荆（北京）教育科技股份有限公司</p>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      link: [
        { title: this.$t('foot.link1'), href: 'http://jsj.moe.gov.cn/' },
        { title: this.$t('foot.link2'), href: 'https://www.pbcsf.tsinghua.edu.cn/' }
      ],
      link2: [
        { title: '中国人民银行', href: 'http://www.pbc.gov.cn/' },
        { title: '中国涉外监管网', href: 'http://jsj.moe.gov.cn/' },
        { title: '中国银行协会', href: 'https://www.china-cba.net/' },
        { title: '中国证券投资基金业协会', href: 'https://www.amac.org.cn/' }
      ]
    }
  }
}
</script>

<style lang="scss">
.main-footer {
  margin-top: 20px;
  .top {
    color: #fff;
    background-color: #aa1941;
    padding: 0.24rem 0.15rem;
  }
  .about {
    white-space: nowrap;
    font-size: 0.11rem;

    p {
      margin-top: 10px;
    }
  }
  .link {
    margin-top: 0.22rem;
    a {
      display: block;
      margin-top: 0.1rem;
      font-size: 0.14rem;
      margin-right: 0.2rem;
    }
  }
  .friendlink {
    margin-top: 0.22rem;
    a {
      font-size: 0.11rem;
      line-height: 0.18rem;
      margin-right: 0.1rem;
      white-space: nowrap;
    }
  }
  .copyright {
    padding: 0.15rem 0 0.24rem;
    p {
      font-size: 0.1rem;
      color: #999;
      text-align: center;
    }
    p + p {
      margin-top: 0.15rem;
    }
    img {
      margin: -4px 5px 0;
      vertical-align: middle;
    }
  }
  .relation {
    display: flex;
    font-size: 0.11rem;
    margin-top: 0.22rem;

    .relation_desc2 {
      margin-top: 0.1rem;
    }
  }
}
</style>
