mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-14 10:12:26 +08:00
新增示例demo
This commit is contained in:
啊俊
43
src/views/exception/403.vue
Normal file
43
src/views/exception/403.vue
Normal 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>
|
||||
@@ -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;
|
||||
|
||||
43
src/views/exception/500.vue
Normal file
43
src/views/exception/500.vue
Normal 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>
|
||||
69
src/views/result/fail.vue
Normal file
69
src/views/result/fail.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<div class="result-box">
|
||||
<n-result status="error" title="操作失败" description="请核对并修改以下信息后，再重新提交。">
|
||||
<div class="result-box-extra">
|
||||
<p>您提交的内容有如下错误：</p>
|
||||
<p class="mt-3">
|
||||
<n-space align="center">
|
||||
<n-icon size="20" color="#f0a020">
|
||||
<InfoCircleOutlined />
|
||||
</n-icon>
|
||||
<span>认证照片不够清晰</span>
|
||||
<n-button type="info" text>立即修改</n-button>
|
||||
</n-space>
|
||||
</p>
|
||||
<p class="mt-3">
|
||||
<n-space>
|
||||
<n-icon size="20" color="#f0a020">
|
||||
<InfoCircleOutlined />
|
||||
</n-icon>
|
||||
<span>备注包含敏感字符，并且不能包含政治相关</span>
|
||||
<n-button type="info" text>立即修改</n-button>
|
||||
</n-space>
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-center mb-4">
|
||||
<n-space align="center">
|
||||
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||
<n-button>查看详情</n-button>
|
||||
<n-button>打印</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
</n-result>
|
||||
</div>
|
||||
</n-card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { InfoCircleOutlined } from '@vicons/antd'
|
||||
|
||||
export default defineComponent({
|
||||
components:{ InfoCircleOutlined },
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
return {
|
||||
goHome() {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.result-box {
|
||||
width: 72%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
&-extra {
|
||||
padding: 24px 40px;
|
||||
text-align: left;
|
||||
background: #f8f8f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
src/views/result/info.vue
Normal file
69
src/views/result/info.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<div class="result-box">
|
||||
<n-result status="info" title="提示" description="本次提交，将在24小时候内自动转入对方账户，如操作失误，请及时撤回">
|
||||
<div class="result-box-extra">
|
||||
<p>您提交的内容如下：</p>
|
||||
<p class="mt-3">
|
||||
<n-space align="center">
|
||||
<n-icon size="20" color="#18a058">
|
||||
<CheckCircleOutlined />
|
||||
</n-icon>
|
||||
<span>转入支付宝账户（189****5426）：￥1980元</span>
|
||||
<n-button type="info" text>立即撤回</n-button>
|
||||
</n-space>
|
||||
</p>
|
||||
<p class="mt-3">
|
||||
<n-space>
|
||||
<n-icon size="20" color="#18a058">
|
||||
<CheckCircleOutlined />
|
||||
</n-icon>
|
||||
<span>转入支付宝账户（187****5426）：￥2980元</span>
|
||||
<n-button type="info" text>立即撤回</n-button>
|
||||
</n-space>
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-center mb-4">
|
||||
<n-space align="center">
|
||||
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||
<n-button>查看详情</n-button>
|
||||
<n-button>全部撤回</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
</n-result>
|
||||
</div>
|
||||
</n-card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { CheckCircleOutlined } from '@vicons/antd'
|
||||
|
||||
export default defineComponent({
|
||||
components:{ CheckCircleOutlined },
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
return {
|
||||
goHome() {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.result-box {
|
||||
width: 72%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
&-extra {
|
||||
padding: 24px 40px;
|
||||
text-align: left;
|
||||
background: #f8f8f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
src/views/result/success.vue
Normal file
49
src/views/result/success.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<div class="result-box">
|
||||
<n-result status="success" title="操作成功" description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。">
|
||||
<div class="result-box-extra">
|
||||
<p>已提交申请，等待财务部门审核。</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-center mb-4">
|
||||
<n-space align="center">
|
||||
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||
<n-button>查看详情</n-button>
|
||||
<n-button>打印</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
</n-result>
|
||||
</div>
|
||||
</n-card>
|
||||
</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>
|
||||
.result-box {
|
||||
width: 72%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
&-extra {
|
||||
padding: 24px 40px;
|
||||
text-align: left;
|
||||
background: #f8f8f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user