chat-app/src/components/async-error/index.vue

90 lines
1.8 KiB
Vue
Raw Normal View History

<template>
<div class="chat-app-error-page">
<div class="error-container">
<div class="error-icon">
<i class="iconfont icon-wifi"></i>
</div>
<div class="error-message">
<span>您的网络好像波动了一下~</span>
</div>
<div class="reload-button" @click="handleReload">
<span>重新加载</span>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed, nextTick } from 'vue'
const handleReload = () => {
location.reload(true);
}
onMounted(() => {
if (typeof plus !== 'undefined') {
} else {
document.addEventListener('plusready', () => {
})
}
})
</script>
<style scoped lang="scss">
.chat-app-error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url('@/static/image/clockIn/z3280@3x.png');
background-size: cover;
background-position: bottom center;
.error-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
max-width: 80%;
width: 320px;
.error-icon {
font-size: 48px;
color: #ff6b6b;
margin-bottom: 16px;
}
.error-message {
font-size: 16px;
color: #333333;
margin-bottom: 24px;
text-align: center;
}
.reload-button {
padding: 12px 32px;
background: $theme-primary;
color: #ffffff;
border-radius: 24px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
opacity: 0.9;
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
}
}
}
</style>