web_site2/app.vue

<template>
  <div id="layout-wrapper" class="layout-wrapper" :class="inverse">
    <Header></Header>
    <div class="main-container">
      <!-- <NuxtPage /> -->
      <router-view></router-view>
      <template v-if="language == ''">
        <div class="layout-link">
          <div class="email">
            <n-popover trigger="hover" placement="left-start">
              <template #trigger>
                <div class="email-icon link-icon">
                  <n-icon :component="IosCall" :size="30" color="#fff" />
                </div>
              </template>
              <div class="email-cnt link-content">
                <div class="email-title link-title">
                  {{ t('common.link.phone') }}
                </div>
                <div class="link-way">
                  <a href="tel:86-027-85566566">86-027-85307885</a>
                </div>
              </div>
            </n-popover>
          </div>
          <div class="telphone">
            <n-popover trigger="hover" placement="left-start">
              <template #trigger>
                <div class="email-icon link-icon">
                  <n-icon :component="IosPhonePortrait" :size="30" color="#fff" />
                </div>
              </template>
              <div class="link-content">
                <div class="link-title">{{ t('common.link.telphone') }}</div>
                <div class="link-way">
                  <a href="tel:17320528525">{{ t('common.link.servicer01') }} 17320528525</a>
                  <a href="tel:17320528335">{{ t('common.link.servicer02') }} 17320528335</a>
                </div>
              </div>
            </n-popover>
          </div>
          <div class="wx">
            <n-popover trigger="hover" placement="left-start">
              <template #trigger>
                <div class="email-icon link-icon">
                  <n-icon :component="IosChatbubbles" :size="30" color="#fff" />
                </div>
              </template>
              <div class="link-content">
                <div class="link-title">{{ t('common.wx.service') }}</div>
                <div class="link-way">
                  <img src="@/assets/images/wx-02.jpg" />
                </div>
              </div>
            </n-popover>
          </div>

        </div>
      </template>
    </div>
    <Footer v-if="showFooter"></Footer>

    <n-back-top :right="5" :bottom="150" color="#fff" icon-color="#fff" :theme-overrides="{ iconColor: '#fff' }" style="width: 45px; height: 45px; background-color: #18a058; color: #fff; border-radius: 100%" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, onUnmounted } from "vue";
import {
  IosMail,
  IosPhonePortrait,
  IosChatbubbles,
  IosCall,
} from "@vicons/ionicons4";
import { useRoute } from "vue-router";
import { useI18n } from "#imports";
import { useUserStore } from "@/store/user";
const { t } = useI18n();
const route = useRoute();
const inverse = ref<string>("");
const code = ref<string>("none"); // 二维码
const closeStatus = ref<string>("");
const scrollTop = ref<number>(0); // 滚动距离
const color = ref<string>("#fff"); // 导航栏字体颜色
const showFooter = ref<boolean>(true);
const userStore = useUserStore();
const language = ref("");
const nuxtApp = useNuxtApp();
onMounted(async () => {
  language.value = userStore.getLang;
  renderNavbar(route.path);
  window.addEventListener("scroll", onScroll);
  try {
    const script = document.createElement("script");
    script.src = "/wow.js";
    script.onload = () => {
      if (window.WOW) {
        new window.WOW().init();
        window.__WOW_INITIALIZED__ = true; // 设置标志防止重复初始化
      }
    };
    document.head.appendChild(script);
  } catch (error) {
    console.log(error);
  }
});

onUnmounted(() => {
  window.removeEventListener("scroll", onScroll);
});

watch(() => route.name, renderNavbar);

// 导航栏切换
function renderNavbar(routePath: any | null | undefined) {
  if (
    (routePath === "/" || "/market" === route.path) &&
    scrollTop.value === 0
  ) {
    inverse.value = "inverse";
    code.value = "none";
    color.value = "#fff";
  } else {
    inverse.value = "";
    code.value = "block";
    color.value = "#000";
  }
  showFooter.value = ["mineUpdatePwd", "payBack"].includes(routePath)
    ? false
    : true;
  ["reports", "newsCategories", "bulletinThinkTank"].includes(routePath)
    ? userStore.setSearchType(routePath)
    : userStore.setSearchType("");
}

// 滚动条事件
function onScroll() {
  scrollTop.value = document.documentElement.scrollTop;
  if (
    scrollTop.value === 0 &&
    (route.name === "index___zh" ||
      route.name === "index___en" ||
      "/market" === route.path)
  ) {
    inverse.value = "inverse";
    code.value = "none";
    color.value = "#fff";
  } else {
    inverse.value = "";
    if (closeStatus.value != "click") {
      code.value = "block";
    }
    color.value = "#000";
  }
}
</script>

<style lang="scss" scoped>
.main-container {
  margin-top: 140px;
  min-height: calc(100vh - 140px);
  //background-color: #edf0f5;
  .limit-width {
    width: 1220px;
    margin: 0 auto;
  }
}
.inverse :deep(.app-header) {
  background-color: transparent !important;
}
.main-container {
  margin-top: 0;
}

.layout-link {
  position: fixed;
  bottom: 200px;
  right: 5px;
  z-index: 3;
  display: v-bind("code");
  > div {
    padding-bottom: 5px;
    cursor: pointer;
  }
  .link-icon {
    width: 45px;
    height: 45px;
    border-radius: 5px;
    background-color: #18a058;
    .n-icon {
      line-height: 55px;
      width: 100%;
      text-align: center;
    }
  }
}

.link-content {
  padding: 8px;
  text-align: center;
  border: 1px solid #18a058;
  font-size: 16px;
  .link-title {
    border-bottom: 1px solid #18a058;
    padding-bottom: 4px;
    color: #18a058;
  }
  .link-way {
    font-weight: 600;
    padding-top: 4px;
    > img {
      width: 150px;
      height: 150px;
    }
    > a {
      display: block;
    }
  }
}
.v-binder-follower-content {
  top: 23px;
}
</style>
<style lang="scss">
#nav-item .txt,
.home-tel,
.lang-select,
.lang .n-icon,
.userInfo {
  color: v-bind("color");
}
.home-tel {
  .n-icon {
    border: 1px solid v-bind("color");
  }
}

#nav-item {
  &.router-link-active {
    &::after {
      background-color: v-bind("color");
    }
  }
  &:hover {
    &::after {
      background-color: v-bind("color");
    }
  }
}
</style>