new-hjb-pc/hjb_pc/components/layoutFooter.vue

<script setup lang="ts">
//底部信息
import { ref } from "vue";
import { useAppStore } from "~/stores/app";
import { linkNavigateTo } from '~/utils/util'
const props = defineProps({
  //列表数据
  pcHomeCon: {
    type: Object,
    default: null,
  },
})
const { pcHomeCon } = toRefs(props)

const { getFooterIsIntersecting } = useAppStore()
const targetElement = ref(null);
onMounted(() => {
  console.log(pcHomeCon, '1111');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 元素进入可视区域
        getFooterIsIntersecting(true)
      } else {
        getFooterIsIntersecting(false)
        // 元素离开可视区域
      }
    });
  });
  if (targetElement.value) {
    observer.observe(targetElement.value);
  }
});
const goToLinkUrl = async (url: any) => {
  // console.log('/activity/information_info?informationId=1');
  const res = url.split('?')
  const link = res[0]
  const id = res[1].split('=')[1]
  console.log(link, id, 'link id');

  await linkNavigateTo(link, { informationId: id })
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });


}
</script>
<!--页面底部-->
<template>
  <div v-if="pcHomeCon" class="layoutFooter" ref="targetElement">
    <!-- <div
      v-if="pcHomeCon.philosophyList && pcHomeCon.philosophyList.length"
      class="w-100% h-0.4688rem bg-#FFFFFF"
      style="border-top: .0052rem solid #f5f5f5;"
    >
      <div class="wrapper_1200 h-0.4688rem flex-between-center">
        <div v-for="item in pcHomeCon.philosophyList" :key="item.id">
          <div class="flex-y-center">
            <img :src="item.imageUrl" class="w-0.2083rem h-0.2083rem b-rd-50% mr-0.0729rem" />
            <div class="text-0.0833rem text-#333 font-500">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 底部黑色模块 -->
    <div class="footer">
      <div class="main">
        <ul v-for="(item, index) in pcHomeCon.quickEntryList" :key="index">
          <li>{{ item.name }}</li>
          <li v-for="(obj, i) in item.linkList" :key="i" @click="goToLinkUrl(obj.linkUrl)">{{ obj.name }}</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>
        <ul>
          <li>关于我们</li>
          <li>服务声明</li>
          <li>交易规则</li>
          <li>商务合作</li>
        </ul> -->
      </div>
      <div class="icp">
        <ul>
          <!-- pcHomeCon.filingNum -->
          <li>
           网站备案号：蜀ICP备2024057505号-1
          </li>
          <li>
            增值电信业务经营许可证:川B2-20240518
          </li>
          <li>营业执照号：91510108MA6AD02M0R</li>
          <li style="display: flex;justify-content: center;">
            <img src="/images/警察图标.png" alt="" style="height: 15.9936px;">&nbsp;<a href= "https://beian.mps.gov.cn/#/query/webSearch?code=51011402000665\" rel="noreferrer" target="_blank">川公网安备：51011402000665号</a>
          </li>
          <li>
            商标注册号：73575311
          </li>
          <li>
            商标注册号：73577347
          </li>
        </ul>
      </div>
      <div class="icp safety">
        <ul>
          <li>
            <a href="https://jbts.mct.gov.cn/?spm=pc_detail.27183998.0.0.5ae47dd6DskD0V" rel="noreferrer"
              target="_blank"><img src="/images/foots1.png" alt="">中国文化和旅游部</a>
          </li>
          <li>
            <a href="https://www.12377.cn/" rel="noreferrer" target="_blank">
              <img src="/images/foots3.png" alt="">中国互联网举报中心
            </a>
          </li>
          <li>
            <a href="https://www.shdf.gov.cn/shdf/channels/740.html" rel="noreferrer" target="_blank">
              <img src="/images/foots2.png" alt="">扫黄打非网举报中心
            </a>
          </li>
        </ul>
      </div>
      <div style="height: 39.9936px;"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.safety {
  ul {
    li {
      height: 20.0064px;

      a {
        display: flex;
        align-items: center;

        img {
          height: 15.9936px;
          margin-right: 2.9952px;
        }
      }
    }
  }
}

.footer {
  position: relative;
  width: 100%;
  // height: 420px;
  background: url('../assets/images/Group9848.png') no-repeat;
  background-size: cover;

  .main {
    margin: 0 auto;
    width: 1200px;
    // padding-top: 49.9968px;
    display: flex;
    justify-content: space-around;
    height: 0;

    ul {
      li {
        font-size: 13.9968px;
        list-style: none;
        color: #A8AAB0;
        padding: 10.0032px 0;
        cursor: pointer;

      }

      li:hover {
        color: #fff;
      }
    }

    ul li:nth-child(1) {
      color: #fff;
    }
  }

  .icp {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30.0096px;

    ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      li {
        margin: 4.992px 0;
        list-style: none;
        font-size: 12px;
        color: #A8AAB0;
      }
      a{
        color: #A8AAB0;
      }
    }
  }
}
</style>