2025-09-27 17:41:14 +08:00
|
|
|
<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>
|
2026-01-21 14:02:56 +08:00
|
|
|
import { useEnv } from '@/composables/useEnv';
|
2025-09-27 17:41:14 +08:00
|
|
|
|
2026-01-21 14:02:56 +08:00
|
|
|
// 使用全局的微信环境检测，与 App.vue 保持一致ss
|
|
|
|
|
const { isWeChat } = useEnv();
|
|
|
|
|
</script>
|
2025-09-27 17:41:14 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
