xinkeaboard/xinkeaboard-web/pages/index.vue

<template>
  <div>
   <SldHomeTopSearch  />
     <NavCatHeader />
    <div class="bottom_line"></div>
    <Home></Home>
    <OpenScreen @closeScreen="closeScreen" v-if="show_open_screen && openScreenData.data.show_switch"
      :openScreenData="openScreenData.data"></OpenScreen>
  </div>
</template>

<script setup>
const show_open_screen = ref(false);
const openScreenData = reactive({ data: {} }); //开屏数据


const getBaseInfo = async () => {
  const { data: value } = await useFetch(
        apiUrl +
          "v3/system/front/setting/getSettings",
          {
            params: {
              names: "sys_seo_title,sys_seo_desc,sys_seo_keywords",
            },
          }
        );
        let res = value._rawValue;
        if (res.state == 200) {
          useHead({
            title: res.data[0],
            meta: [
              {
                name: "description",
                content: res.data[1],
              },
              {
                name: "keywords",
                content: res.data[2],
              },
            ],
          });
        }
}

getBaseInfo()


const getAdv = () => {
  get("v3/system/front/deco/firstAdv").then((res) => {
    if (res.state == 200) {
      openScreenData.data = JSON.parse(res.data.data.replace(/&quot;/g, '"'));
      show_open_screen.value = true
    }
  });
};

getAdv();

const closeScreen = () => {
  show_open_screen.value = false;
  document.body.style.overflow = "";
};

onMounted(() => {
  setTimeout(() => {
    sldStatEvent({
      behaviorType: "pv",
      pageUrl: defaultUrl,
      referrerPageUrl: apiUrl,
    });
  }, 3000);
});
</script>

<style lang="scss">

.bottom_line {
  width: 100%;
  height: 2px;
  background: $colorMain;
  margin-top: -2px;
}

.home_adv_con {
  overflow: hidden;
  height: 80px;
  position: relative;
  margin: 0 auto;
}

.home_adv {
  width: 1920px;
  height: 80px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -960px;
}

.adv1200 {
  width: 1200px;
  height: 80px;
  margin: 0 auto;
  position: relative;
}

.close1 {
  top: 10px;
  right: 10px;
  z-index: 2;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 22px;
  height: 22px;
  line-height: 22px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 17px;
  /*font-family: cursive;*/
}
</style>