<template>
  <div>
    <footer class="footer">
      <div class="footer-inner">
        <div class="footer-link">
          <h4>
            <span>学校官网</span>
          </h4>
          <a href="https://www.marywood.edu/" target="_blank">玛丽伍德大学官网</a>
          <a href="https://www.marywood.edu/programs/featured/zijing-mba" target="_blank">紫荆玛丽伍德EMBA</a>
        </div>
        <div class="footer-link">
          <h4>
            <span>学校认证</span>
          </h4>
          <a href="http://jsj.moe.gov.cn/api/index/mdDesc" target="_blank">中国教育部承认院校</a>
          <a href="https://acbsp.org/members/?id=18776651&hhSearchTerms=%22marywood+and+university%22" target="_blank"
            >美国商学院认证委员会 ACBSP认证</a
          >
          <a href="https://www.msche.org/institution/0531/" target="_blank">美国中部各州院校协会 MSCHE认证</a>
        </div>
        <div class="footer-link">
          <h4>
            <span>排名查询</span>
          </h4>
          <a href="https://www.usnews.com/best-colleges/marywood-university-3296/overall-rankings" target="_blank"
            >2023 U.S. News美国北部最佳价值大学综合排名</a
          >
          <a
            href="https://www.marywood.edu/news/2019-Master-of-Business-Administration-Program-Top-Ranking"
            target="_blank"
            >2019年Study.com美国MBA项目排名前50</a
          >
        </div>
      </div>
      <div class="footer_logo">
        <img src="https://zws-imgs-pub.ezijing.com/pc/base/logo.svg" />
        <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/marywood_logo%402x%20(1).png" />
      </div>
    </footer>
    <div class="copyright">
      <p>
        Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司
      </p>
      <a href="https://tsm.miit.gov.cn/dxxzsp/" target="_blank">
        <p>京ICP证150431号</p>
      </a>
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" target="_blank">
        <img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />
        <p>安备 11010802023681号</p>
      </a>
      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
        <p>京ICP备15016866号-1</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppFooter'
}
</script>

<style lang="scss" scoped>
.footer {
  background-size: cover;
  background: #fff url('~@/assets/images/fotbk.png') no-repeat center center;
  padding: 80px 0;
  .footer-inner {
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .footer-link {
      display: flex;
      z-index: 7;
      flex-direction: column;
      h4 {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        margin-bottom: 14px;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          bottom: -4px;
          height: 3px;
          background: #ccccccff;
          width: 100%;
          max-width: 140px;
        }
        span {
          display: inline-block;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            bottom: -4px;
            height: 3px;
            background: rgba(26, 86, 50, 1);
            width: 100%;
          }
        }
      }
      a {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        padding: 20px 0px;
        &:hover {
          color: var(--main-color);
        }
      }
    }
  }
  .footer_logo {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 200px;
      margin: 0 80px;
    }
  }
}

.copyright {
  height: 40px;
  line-height: 40px;
  color: #fff;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    max-height: 100%;
  }
  a {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
}
</style>
