minnan-website/src/components/Footer.vue

<template>
  <footer class="main-footer">
    <div>
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <div class="logo">
            <img src="@/assets/images/LogoIcon.png" />
            <h2>闽南文化生态保护区 (厦门市)</h2>
          </div>
        </div>
        <div class="col-sm-12 col-md-6">
          <div class="d-block links text-md-end">
            <NuxtLink to="/inheritor/submit">申报入口</NuxtLink>
            <span>友情链接：</span>
            <a href="#">厦门市文化馆</a>
            <a href="#">厦门市图书馆</a>
            <a href="#">厦门市博物馆</a>
          </div>
        </div>
      </div>
      <div class="row mt-3 mt-md-0">
        <div class="links">
          <a href="#">
            <img src="@/assets/images/footer/GonganLogo.png" />
            闽公网安备 44040202000131号
          </a>
          <a href="#">闽ICP备09020130号</a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">


</script>

<style lang="scss">
@use '@/assets/scss/colors.scss' as *;

.main-footer {
  background-color: $primary-color;
  color: #fff;

  > div {
    padding: 60px 55px;
    background-image: url("@/assets/images/footer/FooterPrinting.png");
    background-position: bottom 0 right 11px;
    background-repeat: no-repeat;
    background-size: 533px;
  }

  .logo {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-family: nzgrRuyinZouZhangKai;
    margin-bottom: 48px;

    h2 {
      margin: 0;
    }
    img {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
  }
  .links {
    display: flex;
    align-items: center;
  }

  span {
    font-size: 0.9rem;
    margin-right: 40px;
  }

  a {
    text-decoration: none;
    color: #F9EDD3;
    font-size: 0.9rem;
    margin-right: 40px;

    &:hover {
      color: #fff;
    }

    img {
      margin-right: 10px;
    }
  }
}


@media (max-width: 768px) {
  .main-footer {
    > div {
      padding: 40px 30px;
      background-size: 333px;
    }
    a {
      margin-right: 10px;
    }
  }
}
@media (max-width: 425px) {
 .main-footer {
    > div {
      padding: 20px 20px;
      background-size: 233px;
    }
    span {
      display: block;
      text-align: left;
      margin-bottom: 5px;
    }
    a {
      margin-right: 5px;
    }
  } 

}
</style>