sxc-frontend/web/src/components/SsFooter.vue

<script setup lang="ts">
import {computed ,onMounted, defineEmits} from "vue";
import {useGlobalStore} from '@/stores/global'
import {isEmpty} from "@/utils/common.ts";

const global = useGlobalStore()
const emit = defineEmits(['loaded'])

const security = computed(() => {
  const numbers = global.basic.securityRecord.match(/\d+(\.\d+)?/g) || [];
  return numbers[0] || '';
});

onMounted(() => {
  emit('loaded', 'footer')
})
</script>

<template>
  <div class="footer is-pc">
    <div class="footer-container">
      <el-tooltip v-if="!isEmpty(global.basic.competentUnit)" :content="'主管单位：'+global.basic.competentUnit" placement="top">
        <div class="footer-item ellipsis">主管单位：{{ global.basic.competentUnit }}</div>
      </el-tooltip>
      <el-tooltip v-if="!isEmpty(global.basic.organizer)" :content="'承办单位：'+global.basic.organizer" placement="top">
        <div class="footer-item ellipsis">承办单位：{{ global.basic.organizer }}</div>
      </el-tooltip>
      <el-tooltip v-if="!isEmpty(global.basic.icpRecord)" :content="global.basic.icpRecord" placement="top">
        <a class="footer-item ellipsis" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
          {{ global.basic.icpRecord }}
        </a>
      </el-tooltip>
      <el-tooltip v-if="!isEmpty(global.basic.websiteIdentifier)" :content="global.basic.websiteIdentifier" placement="top">
        <div class="footer-item ellipsis">网站标识码：{{ global.basic.websiteIdentifier }}</div>
      </el-tooltip>
      <el-tooltip v-if="!isEmpty(global.basic.securityRecord)" :content="global.basic.securityRecord" placement="top">
        <a class="footer-item ellipsis" target="_blank" rel="noreferrer" :href="'https://beian.mps.gov.cn/#/query/webSearch?code='+security">
          <el-image class="footer-item-icon" fit="contain" src="/images/beian.png"/>
          {{ global.basic.securityRecord }}
        </a>
      </el-tooltip>
      <el-tooltip v-if="!isEmpty(global.basic.officeHours)" :content="'办公时间：'+global.basic.officeHours" placement="top">
        <div class="footer-item ellipsis">办公时间：{{ global.basic.officeHours }}</div>
      </el-tooltip>
      <el-tooltip v-if="!isEmpty(global.basic.officeAddress)" :content="'办公地址：'+global.basic.officeAddress" placement="top">
        <div class="footer-item ellipsis">办公地址：{{ global.basic.officeAddress }}</div>
      </el-tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss">
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 100;

  .footer-container {
    margin: 0 auto;
    padding: 0 1rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7E8AA2;
    font-size: 0.8rem;

    .footer-item {
      margin: 0 0.8rem;
      text-decoration: none;
      color: inherit;
      outline: none;
      overflow: hidden;
      display: block;

      .footer-item-icon {
        width: 0.75rem;
        height: 0.75rem;
        margin-right: 0.13rem;
      }
    }
  }
}

/* 1080x1920 中等尺寸设备 */
@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
  .footer {
    padding: 1.25rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.6);

    .footer-container {
      font-size: 1rem;
      flex-wrap: wrap;
      gap: 0.5rem;

      .footer-item {
        margin: 0.25rem 1rem;

        .footer-item-icon {
          width: 1rem;
          height: 1rem;
          margin-right: 0.25rem;
        }
      }
    }
  }
}
</style>