Vue 404页面增加宝贝回家公益广告

关于404公益

https://www.dnpw.org/cn/pa-notfound.html

404公益项目主要以寻找走失的孩子为题材（官方demo: https://cdn.dnpw.org/404/v1/demo.html）

只需在网页中插入如下代码，即可加入404公益，为寻找走失的孩子出一份力：

<script src="//cdn.dnpw.org/404/v1.min.js" maincolor="#F00" jumptime="-1" jumptarget="/" tips="404" error="" charset="utf-8"></script>

各项参数说明

src：加载资源域名，递增可能有其他样式；

maincolor: 主题色调或高亮色，可配合您站点主色进行配置；

jumptime: 自动跳转时间，单位秒，-1为手动点击跳转；

jumptarget：自动跳转目标网址，默认 / 网站首页；

tips: 页面短提示，客户端语言为中文默认为“错误提示”，其他为“Oops!”；

error：页面长提示，客户端语言为中文默认为“该页面找不到或已被删除”，其他为“The page was not found”；

function diy(){}：你可以加入javascript代码函数，用于如修改页面元素等，会在页面加载完成后立即执行；

你可以新增CSS代码并利用!important特性，覆盖页面样式：
<style>
body {/*页面整体背景*/background-image: url(background-image-url.jpg) !important;font-family:"Simsun" !important;
}
</style>
你也可以在页面内新增JS函数diy()实现某种需要，会在页面加载完成后立即执行：
<script>
function diy(){document.querySelector(".XXX").style="background:unset";
}
</script>

404.vue页面（引入404gongyi.vue）:

<template>

<div class="error layout-padding">

<div class="layout-padding-auto layout-padding-view">

<div class="error-flex">

<div class="left">

<div class="left-item">

<div class="left-item-animation left-item-num">Oops!</div>

<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>

<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>

<div class="left-item-animation left-item-btn">

<el-button type="primary" size="default" round @click="onGoHome">{{ $t('message.notFound.foundBtn')

}}</el-button>

</div>

</div>

</div>

<div class="right">





<GongYi />

</div>

</div>

</div>

</div>

</template>

<script setup lang="ts" name="notFound">

import { useRouter } from 'vue-router'

import { defineAsyncComponent } from 'vue'

const GongYi = defineAsyncComponent(() => import('./404gongyi.vue'))

// 定义变量内容

const router = useRouter()

// 返回首页

const onGoHome = () => {

router.push('/')

}

</script>

<style scoped lang="scss">

.error {

height: 100%;

.error-flex {

margin: auto;

display: flex;

height: 100%;

width: 900px;

.left {

flex: 1;

height: 100%;

align-items: center;

display: flex;

.left-item {

.left-item-animation {

opacity: 0;

animation-name: error-num;

animation-duration: 0.5s;

animation-fill-mode: forwards;

}

.left-item-num {

color: var(--el-color-info);

font-size: 55px;

}

.left-item-title {

font-size: 20px;

color: var(--el-text-color-primary);

margin: 15px 0 5px 0;

animation-delay: 0.1s;

}

.left-item-msg {

color: var(--el-text-color-secondary);

font-size: 12px;

margin-bottom: 30px;

animation-delay: 0.2s;

}

.left-item-btn {

animation-delay: 0.2s;

}

}

}

.right {

flex: 1;

opacity: 0;

animation-name: error-img;

animation-duration: 2s;

animation-fill-mode: forwards;

img,

iframe {

width: 100%;

height: 100%;

}

}

}

}

</style>

404gongyi.vue

<template>

<iframe srcdoc = '

<script src="//cdn.dnpw.org/404/v1.min.js"

maincolor="#f00" jumptime="-1" jumptarget="/" tips="404" error="" charset="utf-8">

</script>

<script>

function diy(){

document.querySelector("div.container.toper").style.display = "none";

}

</script>

' frameborder="0" scrolling="no" style="zoom:80%">

</iframe>

</template>