AIxiaocaishen/src/views/components/BackToHomeButton.vue

<template>
  <div class="backToHomeBtn" @click="backToHome">
    <img
      src="https://d31zlh4on95l9h.cloudfront.net/images/9cbc5b2eb2327bd04d015c19d8c3f1f9.png"
      alt="返回首页"
      class="backImg"
    />
    <div class="backContent">返回首页</div>
  </div>
</template>

<script setup>
import { computed } from "vue";

// 默认的返回首页逻辑
const backToHome = () => {
  const userAgent = navigator.userAgent;
  let isMobile =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      userAgent
    );
  if (isMobile) {
    console.log("用户是移动端");
    // 调用原生方法跳转到首页
    if (typeof uni !== "undefined") {
      uni.postMessage({
        data: {
          val: {
            name: "JWopenView",
            extra: {
              data: {
                type: 3,
              },
            },
          },
        },
      });
    }
  } else {
    console.log("用户是pc端");
    const env = import.meta.env.VITE_ENV;
    console.log("当前的环境为：", env);
    if (env == "development" || env == "test") {
      window.parent.location.href =
        "http://121.89.234.155:8807/hljw/homepage?menu=999999991";
    } else {
      window.parent.postMessage(
        {
          type: 'NAVIGATE_TO_HOMEPAGE',
          menu: '999999991'
        },
        '*'
      )
    }
  }
};
</script>

<style scoped>
.backToHomeBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 20;
}

.backToHomeBtn:hover {
  transform: scale(1.05);
}

.backImg {
  width: 60%;
  height: auto;
}

.backContent {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .backToHomeBtn {
    top: 0px;
    right: 0px;
  }
}
</style>