<template>
  <div class="web-footer">
    <ul class="content-wrap">
      <li>
        主办单位：{{ organization }}
      </li>
      <li>
        网站标识码：
        <img class="icon-icp" src="/images/icp.png" alt="icp"/>
        <nuxt-link to="https://beian.miit.gov.cn" target="_blank">{{ icp }}</nuxt-link>
      </li>
      <li>地址：{{ address }}</li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'WebFooter',
  setup () {
    return {
      organization: import.meta.env.VITE_SITE_ORGANIZATION,
      icp: import.meta.env.VITE_SITE_ICP,
      address: import.meta.env.VITE_SITE_ADDRESS,
    }
  }
}
</script>

<style scoped lang="scss">
.web-footer {
  height: 100%;
  background-color: var(--primary-color-dark);
  padding: 50px 0;
  color: var(--color-white);
  .content-wrap {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-white);
    background-color: transparent;
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--color-white);
      a {
        color: var(--color-white);
      }
      .icon-icp {
        margin-right: 5px;
      }
    }
  }
}
</style>
