<template>
  <div class="global-footer-wrapper">
    <div id="global-footer-body">
      <div id="global-footer-main">
        <div id="global-footer-logo">
          <img id="global-footer-logo-img" alt="err" src="@/assets/seec-logo--full.png">
          <div id="global-footer-logo-text">软件工程教育云平台 Software Engineering Education Cloud 2022.07.16</div>
        </div>
        <div style="width: 10%"></div>
        <div id="global-footer-about">
          <div>关于我们</div>
          <div id="global-footer-about-main">
            <a href="javascript:void(0)">
              <div>常见问题</div>
            </a>
            <a href="javascript:void(0)">
              <div>意见反馈</div>
            </a>
            <a href="javascript:void(0)">
              <div>联系我们</div>
            </a>
            <a href="javascript:void(0)">
              <div>法律条款</div>
            </a>
          </div>
        </div>
        <div id="global-footer-follow">
          <div>关注我们</div>
          <div id="global-footer-follow-main">
            <a href="https://zhuanlan.zhihu.com/c_1220396784981487616" target="_blank">
              <img alt="err" src="@/assets/icon-zhihu.jpg">
            </a>
            <a href="https://space.bilibili.com/507030405" target="_blank">
              <img alt="err" src="@/assets/icon-bilibili.jpg">
            </a>
          </div>
        </div>
        <div id="global-footer-collaborator">
          <div>合作机构</div>
          <div id="global-footer-collaborator-main">
            <a href="https://www.nju.edu.cn" target="_blank">
              <div>南京大学</div>
            </a>

            <a href="javascript:void(0)">
              <div>阿里巴巴</div>
            </a>
          </div>
        </div>
      </div>
      <div id="global-footer-bottom">
        <div>©2020 NJU SEECODER TEAM<br/>苏ICP备19073881号-1</div>
      </div>
    </div>
  </div>


</template>

<script>
export default {
  name: "GlobalFooter"
};
</script>

<style scoped>
/*Zhurui修改，footer固定在视口的最下方*/
.global-footer-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
}

#global-footer-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
  max-height: 200px;
  min-width: 1050px;
}

#global-footer-main {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

#global-footer-main a {
  text-decoration: none;
  outline: none;
  color: #666666;
}

#global-footer-logo {
  margin-left: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#global-footer-logo-img {
  width: 360px;
}

#global-footer-logo-text {
  margin-top: 10px;
  font-size: 14px;
}

#global-footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #666666;
  margin-top: 20px;
}

#global-footer-about-main {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 90px;
}

#global-footer-about-main a div {
  font-size: 14px;
}

#global-footer-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#global-footer-follow-main {
  width: 110px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#global-footer-follow-main img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

#global-footer-collaborator-main {
  margin: 10px 150px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 50px;
}

</style>
