wenbao-website/src/components/Footer.vue

<template>
  <!-- 底部 -->
  <footer>
    <div class="container">
      <div class="row d-flex flex-row justify-content-center">
        <div class="col col-12">
          <slot />
        </div>
      </div>
      <div class="row d-flex flex-row justify-content-center">
        <div class="col col-sm-12 col-md-6 col-lg-6">

          <div class="footer-select">
            <select name="related-links-superior" id="related-links-superior" @change="handleLinkChange">
              <option value="">上级主管部门</option>
              <option value="http://www.ncha.gov.cn/index.html">国家文物局</option>
              <option value="https://wlt.fujian.gov.cn/">福建省文化和旅游厅</option>
              <option value="http://wlj.xm.gov.cn/">厦门市文化和旅游局</option>
            </select>
            <select name="related-links-municipal" id="related-links-municipal" @change="handleLinkChange">
              <option value="">市政府部门网站</option>
              <option value="https://www.xm.gov.cn/">厦门市人民政府</option>
            </select>
            <select name="related-links-units" id="related-links-units" @change="handleLinkChange">
              <option value="">局属单位</option>
              <option value="https://www.ihchina.cn/">中国非物质文化遗产网</option>
              <option value="https://www.xmlib.net/">厦门市图书馆</option>
              <option value="https://www.xmwhg.com.cn/">厦门市文化馆</option>
              <option value="http://xmmuseum.com/">厦门市博物馆</option>
            </select>
          </div>
          
          <div class="footer-links">
            <template v-for="link in footerInfo.links" :key="link.url">
              <template v-if="link.url.startsWith('http')">
                <a :href="link.url" class="footer-link">
                  {{ link.name }}
                </a>
              </template>
              <template v-else>
                <router-link :to="link.url" class="footer-link">
                  {{ link.name }}
                </router-link>
              </template>
            </template>
          </div>
          
          <div class="footer-info">
            <p>闽公网安备35020302036685号 | <a href="https://beian.miit.gov.cn/">闽ICP备2025115303号-1</a> | 
              <span id="_ideConac"><a href="https://bszs.conac.cn/sitename?method=show&amp;id=43C18E2A812B1ABAE06310291AACF961" target="_blank"><img id="imgConac" vspace="0" hspace="0" border="0" src="https://dcs.conac.cn/image/blue_error.png" data-bd-imgshare-binded="1"></a></span>
            </p>
            <p>联系地址: {{ footerInfo.address }}</p>
            <p>联系电话: {{ footerInfo.contactPhone }} | 工作电话: {{ footerInfo.workPhone }}</p>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 底部信息
const footerInfo = ref({
  contactPhone: "0592-5024292",
  workPhone: "0592-5045291",
  address: "厦门市思明区体育路95号 邮编:361012",
  links: [
    { name: "关于我们", url: "/about/" },
    { name: "联系我们", url: "/about/" },
    { name: "使用帮助", url: "/channel/57/" },
    { name: "网站地图", url: "/sitemap" }
  ]
});

// 相关网站链接选择框事件处理
function handleLinkChange(event: Event) {
  const selectElement = event.target as HTMLSelectElement;
  const selectedValue = selectElement.value;
  if (selectedValue) {
    window.location.href = selectedValue;
  }
}

</script>

<style scoped lang="scss">  
.footer-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  select {
    width: 33%;;
  }
}
.media-matrix {
  width: 100%;
  height: 100%;
  max-width: 250px;
  object-fit: cover;
}
</style>