100 lines
1.7 KiB
Vue
100 lines
1.7 KiB
Vue
<template>
|
||
<div class="not-app-page">
|
||
<div class="error-container">
|
||
<div class="error-icon">⚠️</div>
|
||
<h2>连接错误</h2>
|
||
<p class="error-message">{{ errorMessage }}</p>
|
||
<div class="error-details">
|
||
<p>请确保您正在使用官方APP访问此页面</p>
|
||
</div>
|
||
<button class="retry-btn" @click="retry">重试</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
const errorMessage = ref('未能连接到APP')
|
||
|
||
onMounted(() => {
|
||
if (route.query.message) {
|
||
errorMessage.value = route.query.message
|
||
}
|
||
})
|
||
|
||
const retry = () => {
|
||
router.go(-1) // 返回上一页
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.not-app-page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f1f2f3;
|
||
padding: 20px;
|
||
}
|
||
|
||
.error-container {
|
||
background-color: white;
|
||
padding: 40px 20px;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
max-width: 400px;
|
||
width: 100%;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.error-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
h2 {
|
||
margin: 0 0 16px 0;
|
||
font-size: 24px;
|
||
color: #333;
|
||
}
|
||
|
||
.error-message {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.error-details {
|
||
background-color: #f9fafb;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.error-details p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.retry-btn {
|
||
background-color: #8B5CF6;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.retry-btn:hover {
|
||
background-color: #7C3AED;
|
||
}
|
||
</style>
|