fuse-code/src/below.vue

<template>
  <div class="below-layout">
    <div class="content">
      <img :src="a" alt="" />
      <p>无法打开页面，请升级或更换浏览器后重新打开</p>
      <span>建议使用以下浏览器</span>
      <div class="list">
        <div v-for="item in items">
          <img :src="item.icon" />
          <!-- <img :src="b" /> -->
          <p @click="useClickHandler(item.link)">{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const a = "images/err.png";
const b = "images/download.png";

// 识别国产操作系统逻辑（示例覆盖常见标识，可根据需要补充）
function isDomesticOS() {
  const userAgent = navigator.userAgent.toLowerCase();
  const platform = navigator.platform.toLowerCase();
  console.log(userAgent, platform, "浏览器标识");
  // 统信 UOS、银河麒麟、深度 Deepin、中标麒麟等标识
  return (
    /uos|kylin|deepin|neokylin/.test(userAgent) ||
    /linux/.test(platform) ||
    /国产|中国/.test(userAgent)
  );
}

// 国产浏览器
const items = isDomesticOS()
  ? [
      {
        name: "Chromiun",
        icon: "./images/browser_Chromium.png",
        link: "./images/browser_Chromium.png",
      },
      {
        name: "奇安信可信浏览器",
        icon: "./images/browser_Qianxin.png",
        link: "./images/browser_Qianxin.png",
      },
      {
        name: "360安全浏览器",
        icon: "./images/browser_360.png",
        link: "./images/browser_360.png",
      },
      {
        name: "火狐",
        icon: "./images/browser_Firefox.png",
        link: "./images/browser_Firefox.png",
      },
    ]
  : [
      {
        name: "Firefox",
        icon: "images/ff.png",
        link: "http://www.firefox.com.cn/",
      },
      {
        name: "Microsoft Edge",
        icon: "images/eg.png",
        link: "https://www.microsoft.com/en-us/edge",
      },
      // {
      //   icon: "images/safar.png",
      //   link: "https://www.apple.com/safari/",
      // },
      {
        name: "Chrome",
        icon: "images/chrome.png",
        link: "https://www.google.com/chrome/",
      },
    ];

const useClickHandler = (link: string) => {
  return;
  console.log(link);
  window.open(link);
};
</script>

<style lang="scss" scoped>
.below-layout {
  position: fixed;
  inset: 0;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    color: #999;
    text-align: center;

    > img {
      width: 200px;
    }

    p {
      font-size: 16px;
      margin: 20px 0;
    }

    span {
      font-size: 14px;
    }
  }
}

.list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  p {
    color: #999;
    width: 100%;
    text-align: center;
  }

  > div {
    margin: 0 20px;

    > img {
      width: 70px !important;
    }
  }
}
</style>