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 useFetchRaw(
    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>