first

src/components/WechatOverlay.vue

@@ -0,0 +1,72 @@
+<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>