72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
|
<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>
|