111 lines
2.8 KiB
Vue
111 lines
2.8 KiB
Vue
<template>
|
||
<van-overlay :show="isShow" z-index="999">
|
||
<div class="warp">
|
||
<div class="content_warp app-popup-surface">
|
||
<div class="title"></div>
|
||
<div class="content app-popup-body">
|
||
<h2>APP线路检测失败</h2>
|
||
<h3>解决方案:</h3>
|
||
<p>1.请检测您的网络是否正常，手机是否开了VPN或10分钟后再尝试访问。</p>
|
||
<p>
|
||
2.前往官网地址
|
||
<span @click="download2">HUANGGUOMJ.NET</span>
|
||
下载最新版。
|
||
</p>
|
||
<p>
|
||
官方备用：
|
||
<span @click="download">HUANGGUOMJ.NET</span>
|
||
</p>
|
||
<p>3.前往Telegram官方交流群</p>
|
||
<div class="footer-box">
|
||
<div class="btn app-popup-primary" @click="toPotato">前往群聊</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-overlay>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
import { compatibleAppStoreJump } from '@/utils/index';
|
||
const isShow = ref(true);
|
||
const download = () => {
|
||
compatibleAppStoreJump('https://huangguomj.net');
|
||
};
|
||
const download1 = () => {
|
||
compatibleAppStoreJump('https://lolii.fm');
|
||
};
|
||
const download2 = () => {
|
||
compatibleAppStoreJump('https://huangguomj.net');
|
||
};
|
||
const toPotato = () => {
|
||
compatibleAppStoreJump('https://t.me/hougong9527');
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.warp {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.content_warp {
|
||
width: 311px;
|
||
background: url('@/assets/images/png/systemPromptBg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
border-radius: 12px;
|
||
padding: 30px 0 10px;
|
||
.title {
|
||
height: 24px;
|
||
width: 96.6px;
|
||
background: url('@/assets/images/png/systemPromptTitle.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
}
|
||
.content {
|
||
margin: 0 auto;
|
||
font-size: 14px;
|
||
border-radius: 20px;
|
||
padding: 18px 22px 27px;
|
||
color: #fff;
|
||
line-height: 24px;
|
||
font-weight: 400;
|
||
font-family: 'PingFang SC';
|
||
h2 {
|
||
color: #f52c56;
|
||
line-height: 20px;
|
||
}
|
||
h3 {
|
||
margin: 12px 0;
|
||
line-height: 20px;
|
||
}
|
||
p {
|
||
span {
|
||
color: #3476ff;
|
||
}
|
||
}
|
||
.footer-box {
|
||
display: flex;
|
||
align-items: center;
|
||
.btn {
|
||
font-family: 'PingFang SC';
|
||
height: 42px;
|
||
width: 230px;
|
||
background: #f68804;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
line-height: 42px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
margin: 19px auto 0;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|