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" />
          <p @click="useClickHandler(item.link)"><img :src="b" /> {{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const a = "images/err.png";
const b = "images/download.png";
const items = [
  {
    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) => {
  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;
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      width: 16px;
    }
  }
  > div {
    margin: 0 20px;
    > img {
      width: 70px !important;
    }
  }
}
</style>