关于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">
<!-- <img src="https://i.hd-r.cn/1a0d90a6c1e8b0184c7299dda713effd.png" /> -->
<!-- 原来图片缺失，这里替换为公益广告（20241220） -->
<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>
<!-- 以下方案尝试过无效：
<template>
<div ref="adContainer" style="background-color: aqua;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
setup() {
const adContainer = ref();
onMounted(() => {
const script = document.createElement('script')
script.maincolor = "#F00"
script.jumptime = "-1"
script.jumptarget = "/"
script.tips = "404"
script.error = ""
script.charset = "utf-8"
script.src = 'https://cdn.dnpw.org/404/v1.min.js'
script.onload = () => {
// 假设脚本加载后会调用某个函数来生成广告
//window.generateAd(adContainer.value);
alert('test')
};
adContainer.value.appendChild(script);
});
return { adContainer };
},
};
</script>
-->
配置好404路由：
效果
测试输入一个不存在的地址，效果如下：
