<template>
  <div class="footer">
    <div class="link">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>网站声明</li>
        <li>网站地图</li>
      </ul>
    </div>
    <div class="copyright">
      <div class="red">
        <img src="@/assets/logo/red.png" alt="">
      </div>
      <p>
        <a>主办：青海省粮食局</a>
        <a>承办：青海省粮食局办公室</a>
        <a>网站标识识别码：63002020200</a>
      </p>
      <p><a>ICP备案号：青ICP备0900002032</a>
        <a>地址：青海省西宁市解放路2号</a>
        <a class="ba">青公网安备6320202020202020号</a>
      </p>
      <div class="jubao">
        <img src="@/assets/logo/jiucuo.png" alt="">
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { } from 'vue';
</script>
<style scoped lang="less">
.footer {
  margin-top: 100px;
  padding: 20px 0;
  background-color: #7898c0;
  border-top: 2px solid #37e;

  .link {
    ul {
      width: 380px;
      margin: 0 auto;
      overflow: hidden;

      li {
        color: #fff;
        float: left;
        padding: 0 10px;
        border-right: 1px solid #303133;
      }

      li:last-child {
        border-right: none;
      }
    }
  }

  .copyright {
    width: 1200px;
    height: 86px;
    position: relative;
    margin: 20px auto 0 auto;

    .red {
      top: 50%;
      left: 0;
      width: 80px;
      height: 80px;
      margin-top: -40px;
      position: absolute;
    }

    .jubao {
      top: 50%;
      right: 0;
      width: 110px;
      height: 55px;
      margin-top: -22px;
      position: absolute;
    }

    p {
      line-height: 30px;
      font-size: 14px;
      text-align: center;

      a {
        color: #fff;
        margin-right: 10px;
      }

      .ba::before {
        width: 30px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
        content: url(@/assets/logo/balogo.png);
      }
    }
  }
}
</style>