wangyifeng
ec17da2e2c
Some checks are pending
Check / lint (push) Waiting to run
Check / typecheck (push) Waiting to run
Check / build (build, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build, 18.x, windows-latest) (push) Waiting to run
Check / build (build:app, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:app, 18.x, windows-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Waiting to run
90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<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>
|