新增示例demo

This commit is contained in:
啊俊
2021-07-15 23:51:18 +08:00
parent 8fd663e0e5
commit a6aa6d4d6d
18 changed files with 428 additions and 34 deletions

View File

@@ -0,0 +1,43 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="text-center">
<img src="~@/assets/images/exception/403.svg" alt=""/>
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉你无权访问该页面</h1>
<n-button type="info" @click="goHome">回到首页</n-button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
setup() {
const router = useRouter()
return {
goHome(){
router.push('/')
}
}
}
})
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.text-center{
h1{ color: #666;padding: 20px 0}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>

View File

@@ -1,31 +1,40 @@
<template>
<div class="flex flex-col align-center justify-center page-container">
<div class="flex flex-col justify-center page-container">
<div class="text-center">
<h1 class="text-base text-gray-500">哎哟喂您好像走丢了...</h1>
<router-link to="/" class="n-btn n-btn-primary">回到首页</router-link>
<img src="~@/assets/images/exception/404.svg" alt=""/>
</div>
<div class="text-center">
<img src="~@/assets/images/Error.svg" alt=""/>
<h1 class="text-base text-gray-500">抱歉你访问的页面不存在</h1>
<n-button type="info" @click="goHome">回到首页</n-button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { routes } from '@/router'
import { useRouter } from 'vue-router'
export default defineComponent({
name: '404'
setup() {
const router = useRouter()
return {
goHome(){
router.push('/')
}
}
}
})
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
height: 100vh;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.text-center{
h1{ color: #666;padding: 20px 0}
}
img {
width: 350px;
margin: 0 auto;

View File

@@ -0,0 +1,43 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="text-center">
<img src="~@/assets/images/exception/500.svg" alt=""/>
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉服务器出错了</h1>
<n-button type="info" @click="goHome">回到首页</n-button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
setup() {
const router = useRouter()
return {
goHome(){
router.push('/')
}
}
}
})
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
background-color: white;
border-radius: 4px;
padding: 50px 0;
.text-center{
h1{ color: #666;padding: 20px 0}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>