<template>
  <div v-if="isWeChat" class="wechat-overlay">
    <div class="wechat-content">
      <p class="wechat-message">
        点击右上角的<van-icon class="ml-2" name="weapp-nav" /><br />然后点击在浏览器中打开
      </p>
      <img src="@/assets/images/llqdk.jpg" alt="In WeChat" class="wechat-image" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义一个响应式变量，表示是否在微信环境
const isWeChat = ref(false);

// 检查是否为微信环境
const checkIfWeChat = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  isWeChat.value = /micromessenger/.test(userAgent);
};

// 在组件挂载后检查环境
onMounted(() => {
  checkIfWeChat();
});
</script>

<style scoped>
/* 遮罩层样式 */
.wechat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* 遮罩中的内容 */
.wechat-content {
  text-align: center;
  color: white;
  font-size: 16px;
}

/* 图片样式 */
.wechat-image {
  /* position: absolute;
  bottom: 0;
  left: 0; */
  margin-top: 20px;
  width: 100%;
}

/* 提示信息的样式 */
.wechat-message {
  font-size: 24px;
}

/* 图标样式 */
.icon-more-vert {
  font-size: 20px;
  margin-left: 5px;
}
</style>