提交 c3591095 authored 作者: 王鹏飞's avatar 王鹏飞

feat: 增加401页面

上级 6d45f157
const routes = [
{
path: '/401',
component: () => import('./views/401.vue')
},
{
name: 'browser',
path: '/browser',
component: () => import('./views/browser.vue')
}
]
export { routes }
差异被折叠。
<template>
<div class="container">
<div class="box">
<h1 class="tips">你的浏览器版本较低,请升级你的浏览器。</h1>
<div class="list">
<ul>
<li v-for="item in browserList" :key="item.name">
<a :href="item.href" target="_blank">
<img :src="item.logoUrl" />
<p class="t1">{{ item.name }}</p>
<p class="t2">{{ item.company }}</p>
</a>
</li>
</ul>
</div>
</div>
<p class="ua">{{ UA }}</p>
</div>
</template>
<script>
export default {
data() {
const UA = window.navigator.userAgent
const isIe = window.ActiveXObject || 'ActiveXObject' in window
return {
UA,
isIe,
browserList: [
{
name: 'Chrome',
company: 'Google',
href: 'https://www.google.cn/chrome',
logoUrl: 'https://webapp-pub.ezijing.com/website/base/images/chrome.png'
},
{
name: 'Edge',
company: 'Microsoft',
href: 'https://www.microsoft.com/edge',
logoUrl: 'https://webapp-pub.ezijing.com/website/base/images/edge.png'
},
{
name: 'Firefox',
company: 'Mozilla Foundation',
href: 'https://download.mozilla.org',
logoUrl: 'https://webapp-pub.ezijing.com/website/base/images/firefox.png'
}
]
}
},
beforeMount() {
!this.isIe && this.$router.replace('/')
}
}
</script>
<style lang="scss" scoped>
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
width: 700px;
background-color: #f4f5f7;
border-radius: 10px;
}
.tips {
margin: 30px;
font-size: 24px;
color: #172b4d;
text-align: center;
}
ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
li {
flex: 1;
padding: 40px;
text-align: center;
}
img {
width: 100px;
}
p {
margin: 0;
text-align: center;
}
.t1 {
color: #e25600;
}
.t2 {
color: #aaa;
text-decoration: none;
}
a {
text-decoration: none;
}
}
.ua {
font-size: 12px;
margin: 20px;
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论