74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
|
||
import { useLoginStore } from '@/stores/login'
|
||
|
||
const router = useRouter()
|
||
const loginStore = useLoginStore()
|
||
|
||
async function handleLogout() {
|
||
try {
|
||
await loginStore.logout()
|
||
} catch {
|
||
loginStore.clearSession()
|
||
}
|
||
await router.replace({ name: 'login' })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<main class="forbidden-page">
|
||
<section class="forbidden-card">
|
||
<span class="forbidden-code">403</span>
|
||
<h1>当前账号没有可访问的功能</h1>
|
||
<p>请联系系统管理员分配相应权限，或退出后更换账号。</p>
|
||
<button type="button" @click="handleLogout">退出登录</button>
|
||
</section>
|
||
</main>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.forbidden-page {
|
||
display: grid;
|
||
min-height: 100vh;
|
||
padding: 24px;
|
||
background: var(--bg);
|
||
place-items: center;
|
||
}
|
||
|
||
.forbidden-card {
|
||
max-width: 460px;
|
||
padding: 36px;
|
||
text-align: center;
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
box-shadow: var(--sh-login);
|
||
}
|
||
|
||
.forbidden-code {
|
||
color: var(--brand);
|
||
font-size: 36px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
h1 {
|
||
color: var(--ink);
|
||
font-size: 20px;
|
||
}
|
||
|
||
p {
|
||
color: var(--mut);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
button {
|
||
margin-top: 12px;
|
||
padding: 9px 24px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
background: var(--brand);
|
||
border-radius: 7px;
|
||
}
|
||
</style>
|