mirror of
https://gitee.com/bootx/dax-pay-h5
synced 2026-08-09 22:45:58 +08:00
refactor(h5): 优化两端 404 页面, PC 端改用插画风格对齐商业版
- PC NotFound:去掉 logo + 文字 404 + 原生按钮,改用 404 插画 + 文案 + 主题色按钮,scoped px + 媒体查询;插画以 import 方式引入 - 移动端 404:文案 p→h1 语义化,间距对齐商业版
This commit is contained in:
@@ -10,12 +10,12 @@ function goHome() {
|
||||
<template>
|
||||
<div class="page-container flex flex-col justify-center">
|
||||
<div class="text-center">
|
||||
<img src="~@/shared/assets/icons/exception/404.svg" alt="">
|
||||
<img src="~@/shared/assets/icons/exception/404.svg" alt="404">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="m-4 text-base">
|
||||
<h1 class="m-4 text-base">
|
||||
抱歉,你访问的页面不存在
|
||||
</p>
|
||||
</h1>
|
||||
<van-button type="primary" @click="goHome">
|
||||
回到首页
|
||||
</van-button>
|
||||
@@ -24,7 +24,7 @@ function goHome() {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-container {
|
||||
.page-container {
|
||||
height: 100%;
|
||||
|
||||
.text-center {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import notFoundImg from '@/shared/assets/icons/exception/404.svg'
|
||||
|
||||
defineOptions({ name: 'PcNotFound' })
|
||||
|
||||
const router = useRouter()
|
||||
@@ -10,13 +12,10 @@ function goHome() {
|
||||
|
||||
<template>
|
||||
<div class="pc-notfound">
|
||||
<img class="pc-notfound__logo" src="/logo.svg" alt="DaxPay">
|
||||
<p class="pc-notfound__code">
|
||||
404
|
||||
</p>
|
||||
<p class="pc-notfound__text">
|
||||
<img class="pc-notfound__img" :src="notFoundImg" alt="404">
|
||||
<h1 class="pc-notfound__text">
|
||||
抱歉,你访问的页面不存在
|
||||
</p>
|
||||
</h1>
|
||||
<button class="pc-notfound__btn" type="button" @click="goHome">
|
||||
返回首页
|
||||
</button>
|
||||
@@ -34,27 +33,21 @@ function goHome() {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.pc-notfound__logo {
|
||||
width: 160px;
|
||||
.pc-notfound__img {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pc-notfound__code {
|
||||
margin: 24px 0 8px;
|
||||
font-size: 56px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.pc-notfound__text {
|
||||
margin: 0 0 32px;
|
||||
margin: 24px 0 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.pc-notfound__btn {
|
||||
padding: 10px 28px;
|
||||
padding: 10px 32px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
background: #5d9dfe;
|
||||
@@ -69,12 +62,8 @@ function goHome() {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pc-notfound__logo {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.pc-notfound__code {
|
||||
font-size: 44px;
|
||||
.pc-notfound__img {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user