en-shoubo-mobile/src/components/Layout/index.vue

<template>
  <div ref="layoutRef" class="layout" @scroll="scrollEvent">
    <!-- 顶部 -->
    <div class="layout-header" :style="{ background: $route.meta.navBgColor }">
      <img
        class="layout-header__menu"
        src="./images/mean.png"
        @click="sidebarVisible = true"
      />

      <img
        class="layout-header__logo"
        src="@/assets/images/logo.png"
        @click="$router.push({ name: 'Home' })"
      />

      <div class="layout-header__right">
        <img src="./images/zhong.png" @click="goToCNWeb" />
        <img src="./images/search.png" @click="searchVisible = true" />
      </div>
    </div>

    <div v-if="noticeVisible" class="notice">
      <VanNoticeBar
        mode="closeable"
        left-icon="volume-o"
        color="#ffffff"
        :delay="3"
        background="rgb(116, 18, 11)"
        text="Due to permanent exhibition refurbishment, our museum has been closed since October 7, 2023. We have also temporarily closed the reservation channel. The specific reopening time will be announced separately. We apologize for any inconvenience this may cause."
        @close="noticeVisible = false"
      />
    </div>

    <RouterView />

    <!-- 回到顶部 -->
    <div class="toTop" v-show="srocllShow" @click="toTop">
      <VanIcon name="back-top" />
    </div>

    <!-- 底部 -->
    <div class="layout-bottom">
      <img
        class="layout-bottom__logo"
        src="@/assets/images/logo.png"
        @click="$router.push({ name: 'Home' })"
      />

      <div class="layout-bottom__qrcode">
        <img src="./images/erwei1.png" alt="" />
        <img src="./images/erwei2.png" alt="" />
      </div>

      <p>
        Capital Museum. China 16 Fuxingmenwai Street, Xicheng District, Beijing
        100045, P.R.China.
      </p>

      <ul class="layout-bottom__link">
        <li>
          <RouterLink :to="{ name: 'Use' }">Terms of Use</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'Events' }">Events</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'Employment' }">Employment</RouterLink>
        </li>
      </ul>
    </div>
  </div>

  <Sidebar
    v-model:visible="sidebarVisible"
    @goToCNWeb="goToCNWeb"
    @openSearch="searchVisible = true"
  />
  <Search v-model:visible="searchVisible" @confirm="sidebarVisible = false" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { debounce } from "lodash-unified";
import Sidebar from "./components/Sidebar/index.vue";
import Search from "./components/Search/index.vue";

const layoutRef = ref();
const noticeVisible = ref(false);
const sidebarVisible = ref(false);
const searchVisible = ref(false);
const srocllShow = ref(false);

const toTop = () => {
  const dom = layoutRef.value;
  dom.scrollTo({ top: 0, behavior: "smooth" });
};

const scrollEvent = debounce(() => {
  const dom = layoutRef.value;
  if (dom.scrollTop > 400) srocllShow.value = true;
  else srocllShow.value = false;
}, 200);

const goToCNWeb = () => {
  window.open("https://www.capitalmuseum.org.cn/", "_blank");
};
</script>

<style lang="scss">
@import "./index.scss";
</style>