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">

          <!-- <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路由:

 

效果

测试输入一个不存在的地址,效果如下:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64672.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

threejs——无人机概念切割效果

主要技术采用着色器的切割渲染,和之前写的风车可视化的文章不同,这次的切割效果是在着色器的基础上实现的,并新增了很多可调节的变量,兄弟们,走曲儿~ 线上演示地址,点击体验 源码下载地址,点击下载 正文 从图中大概可以看出以下信息,一个由线组成的无人机模型,一个由…

双指针---和为s的两个数字

这里写自定义目录标题 题目链接问题分析代码解决执行用时 题目链接 购物车内的商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 问题分析 暴⼒解法&#xff0c;会超时 &#xff08;两层…

整合 Knife4j 于 Spring Cloud 网关:实现跨服务的 API 文档统一展示

&#x1f3af;导读&#xff1a;本文档概述了构建和配置基于JDK 17、Spring Boot 3.0.7及Spring Cloud 2022.0.3的微服务系统&#xff0c;特别聚焦于集成Knife4j以增强API文档管理和接口测试功能。文中详细介绍了如何在Spring Boot应用中添加Knife4j依赖、配置Swagger UI路径和A…

如何从0构建一个flask项目,直接上实操!!!

项目结构 首先&#xff0c;创建一个项目目录&#xff0c;结构如下&#xff1a; flask_app/ │ ├── app.py # Flask 应用代码 ├── static/ # 存放静态文件&#xff08;如CSS、JS、图片等&#xff09; │ └── style.css # 示例…

Ubuntu下C语言操作kafka示例

目录 安装kafka&#xff1a; 安装librdkafka consumer Producer 测试运行 安装kafka&#xff1a; Ubuntu下Kafka安装及使用_ubuntu安装kafka-CSDN博客 安装librdkafka github地址&#xff1a;GitHub - confluentinc/librdkafka: The Apache Kafka C/C library $ apt in…

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书 一、下载影刀&#xff1a; https://www.winrobot360.com/share/activity?inviteUserUuid595634970300317698 二、加入应用市场 https://www.yingdao.com/share/accede/?inviteKeyb2d3f22a-fd6c-4a…

WatchAlert - 开源多数据源告警引擎

概述 在现代 IT 环境中&#xff0c;监控和告警是确保系统稳定性和可靠性的关键环节。然而&#xff0c;随着业务规模的扩大和数据源的多样化&#xff0c;传统的单一数据源告警系统已经无法满足复杂的需求。为了解决这一问题&#xff0c;我开发了一个开源的多数据源告警引擎——…

单片机:实现HC-SR04超声波测距(附带源码)

使用单片机实现 HC-SR04 超声波测距模块 的功能&#xff0c;通常用于测量物体与超声波传感器之间的距离。HC-SR04 模块通过发射超声波信号并测量其返回时间来计算距离。单片机&#xff08;如 STM32、51 系列、Arduino 等&#xff09;可用来控制该模块的工作&#xff0c;并处理返…

Python langchain ReAct 使用范例

0. 介绍 ReAct: Reasoning Acting &#xff0c;ReAct Prompt 由 few-shot task-solving trajectories 组成&#xff0c;包括人工编写的文本推理过程和动作&#xff0c;以及对动作的环境观察。 1. 范例 langchain version 0.3.7 $ pip show langchain Name: langchain Ver…

selenium工作原理

原文链接&#xff1a;https://blog.csdn.net/weixin_67603503/article/details/143226557 启动浏览器和绑定端口 当你创建一个 WebDriver 实例&#xff08;如 webdriver.Chrome()&#xff09;时&#xff0c;Selenium 会启动一个新的浏览器实例&#xff0c;并为其分配一个特定的…

PDFMathTranslate 一个基于AI优秀的PDF论文翻译工具

PDFMathTranslate 是一个设想中的工具&#xff0c;旨在翻译PDF文档中的数学内容。以下是这个工具的主要特点和使用方法&#xff1a; 链接&#xff1a;https://www.modelscope.cn/studios/AI-ModelScope/PDFMathTranslate 功能特点 数学公式识别&#xff1a;利用先进的OCR&…

ChatGPT生成接口测试用例(二)

5.1.4 自动生成测试数据 测试数据的生成通常是接口测试的一个烦琐任务。ChatGPT可以帮助测试团队生成测试数据&#xff0c;包括各种输入和它们的组合。测试人员可以描述他们需要的数据类型和范围&#xff0c;ChatGPT可以生成符合要求的测试数据&#xff0c;从而减轻测试人员的负…

项目管理工具Maven(一)

Maven的概念 什么是Maven 翻译为“专家”&#xff0c;“内行”Maven是跨平台的项目管理工具。主要服务于基于Java平台的项目构建&#xff0c;依赖管理和项目信息管理。什么是理想的项目构建&#xff1f; 高度自动化&#xff0c;跨平台&#xff0c;可重用的组件&#xff0c;标准…

ElasticSearch 自动补全

1、前言 当用户在搜索框输入字符时&#xff0c;我们应该提示出与该字符有关的搜索项&#xff0c;根据用户输入的字母&#xff0c;提示完整词条的功能&#xff0c;就是自动补全。 2、安装拼音分词器 Github地址&#xff1a;https://github.com/infinilabs/analysis-pinyin 插件…

UML 建模实验

文章目录 实验一 用例图一、安装并熟悉软件EnterpriseArchitect16二、用例图建模 实验二 类图、包图、对象图类图第一题第二题 包图对象图第一题第二题 实验三 顺序图、通信图顺序图银行系统学生指纹考勤系统饮料自动销售系统“买到饮料”“饮料已售完”“无法找零”完整版 通信…

Linux环境下 搭建ELk项目 -单机版练习

前言 ELK 项目是一个由三个开源工具组成的日志处理和分析解决方案&#xff0c;ELK 是 Elasticsearch、Logstash 和 Kibana 的首字母缩写。这个项目的目标是帮助用户采集、存储、搜索和可视化大量的日志和事件数据&#xff0c;尤其是在分布式系统中。下面是每个组件的概述&…

day14-16系统服务管理和ntp和防火墙

一、自有服务概述 服务是一些特定的进程&#xff0c;自有服务就是系统开机后就自动运行的一些进程&#xff0c;一旦客户发出请求&#xff0c;这些进程就自动为他们提供服务&#xff0c;windows系统中&#xff0c;把这些自动运行的进程&#xff0c;称为"服务" window…

js进阶语法详解

文章目录 js进阶语法详解一、引言二、闭包与作用域1、闭包1.1、示例代码 2、作用域2.1、示例代码 三、this关键字与函数调用1、this的指向1.1、示例代码 2、apply和call方法2.1、示例代码 四、异步编程1、Promise1.1、示例代码 五、JS的面向对象封装1、封装的概念1.1、构造函数…

Qt WORD/PDF(一)使用 QtPdfium库实现 PDF 预览

文章目录 一、简介二、下载 QtPdfium三、加载 QtPdfium 动态库四、Demo 使用 关于QT Widget 其它文章请点击这里: QT Widget 国际站点 GitHub: https://github.com/chenchuhan 国内站点 Gitee : https://gitee.com/chuck_chee 姊妹篇: Qt WORD/PDF&#x…

.Net WebAPI(一)

文章目录 项目地址一、WebAPI基础1. 项目初始化1.1 创建简单的API1.1.1 get请求1.1.2 post请求1.1.3 put请求1.1.4 Delete请求 1.2 webapi的流程 2.Controllers2.1 创建一个shirts的Controller 3. Routing3.1 使用和创建MapControllers3.2 使用Routing的模板语言 4. Mould Bind…