hjb_pc/components/layoutFooter.vue

<script setup lang="ts">
//底部信息
import {ref} from "vue";
import {useAppStore} from "~/stores/app";

const props = defineProps({
  //列表数据
  pcHomeCon: {
    type: Object,
    default: null,
  },
})
const { pcHomeCon } = toRefs(props)

const { getFooterIsIntersecting } = useAppStore()
const targetElement = ref(null);
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 元素进入可视区域
        getFooterIsIntersecting(true)
      } else {
        getFooterIsIntersecting(false)
        // 元素离开可视区域
      }
    });
  });
  if (targetElement.value) {
    observer.observe(targetElement.value);
  }
});
</script>
<!--页面底部-->
<template>
  <div v-if="pcHomeCon" class="layoutFooter" ref="targetElement">
    <!-- <div
      v-if="pcHomeCon.philosophyList && pcHomeCon.philosophyList.length"
      class="w-100% h-90px bg-#FFFFFF"
      style="border-top: 1px solid #f5f5f5;"
    >
      <div class="wrapper_1200 h-90px flex-between-center">
        <div v-for="item in pcHomeCon.philosophyList" :key="item.id">
          <div class="flex-y-center">
            <img :src="item.imageUrl" class="w-40px h-40px b-rd-50% mr-14px" />
            <div class="text-16px text-#333 font-500">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 底部黑色模块 -->
    <div class="footer">
      <div class="main">
        <ul>
          <li>关于我们</li>
          <li>服务声明</li>
          <li>交易规则</li>
          <li>商务合作</li>
        </ul>
        <ul>
          <li>关于我们</li>
          <li>服务声明</li>
          <li>交易规则</li>
          <li>商务合作</li>
        </ul>
        <ul>
          <li>关于我们</li>
          <li>服务声明</li>
          <li>交易规则</li>
          <li>商务合作</li>
        </ul>
        <ul>
          <li>关于我们</li>
          <li>服务声明</li>
          <li>交易规则</li>
          <li>商务合作</li>
        </ul>
      </div>
      <div class="icp">
        <ul>
          <li>网站备案号： 蜀ICP备14026041号-1</li>
          <li>商标注册号：第13818907号 网络文化经营许可证：1565-227号</li>
          <li>营业执照号： 510104000248150</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.footer{
  position: relative;
  width: 100%;
  height: 1.875rem;
  background: url('../assets/images/Group9848.png') no-repeat;
  .main{
    margin: 0 auto;
    width: 6.25rem;
    padding-top: .2604rem;
    display: flex;
    justify-content: space-around;
    ul{
      li{
        font-size: .0729rem;
        list-style: none;
        color: #A8AAB0;
        padding: .0521rem 0;

      }
    }
    ul li:nth-child(1){
      color: #fff;
    }
  }
  .icp{
    position: absolute;
    bottom: .1563rem;
    width: 6.25rem;
    left: 50%;
    transform: translateX(-50%);
    ul{
      display: flex;
      justify-content: space-around;
      li{
        list-style: none;
        font-size: .0625rem;
        color: #A8AAB0;
      }
    }
  }
}
</style>