vue设置每次加载页面时展示一个双开门效果
一、首先创建一个双开门的蒙层组件
<!-- DoorOverlay.vue -->
<template><div v-if="isVisible" class="door-overlay"><div class="door left-door"></div><div class="door right-door"></div></div></template><script>export default {data() {return {isVisible: false};},methods: {show() {this.isVisible = true;},hide() {this.isVisible = false;}}};</script><style scoped>.door-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;/* background-color: rgba(0, 0, 0, 0.5); */z-index: 9999;overflow: hidden;}.door {width: 50%;height: 100%;background-color: #4891DA;transition: transform 0.5s;}.left-door {transform: translateX(0);}.right-door {transform: translateX(0);}.door-overlay.hide .left-door {transform: translateX(-100%);}.door-overlay.hide .right-door {transform: translateX(100%);}</style>
二、在router的index.js文件中引用
import Vue from 'vue'
import VueRouter from 'vue-router'import DoorOverlay from '@/components/DoorOverlay'Vue.use(VueRouter)const router = new VueRouter({mode: 'hash',routes:[ {path: '/',// 默认打开后就是这个主页component: () => import('@/components/Home/Home'),}]}) // 创建 DoorOverlay 实例
const doorOverlay = new Vue(DoorOverlay).$mount();
document.body.appendChild(doorOverlay.$el);// 全局前置守卫
router.beforeEach((to, from, next) => {doorOverlay.show();setTimeout(() => {next();}, 100); // 设置动画持续时间
});// 全局后置守卫
router.afterEach(() => {setTimeout(() => {doorOverlay.$el.classList.add('hide');setTimeout(() => {doorOverlay.hide();doorOverlay.$el.classList.remove('hide');}, 500); // 设置动画持续时间}, 100); // 设置动画持续时间
});export default router;
三、在App.vue文件中使用蒙层组件
<template><div id="app"><Header></Header><!-- 路由挂载 --><router-view></router-view><Footer></Footer></div>
</template><script>
import Header from '@/components/Header/Header'
import Footer from '@/components/Footer/Footer'
import DoorOverlay from './components/DoorOverlay'export default {name: 'App',components: {Header,Footer,DoorOverlay}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
a{text-decoration: none;color: #000000;
}
li{list-style: none;
}
*{margin: 0;padding: 0;
}
@media screen and (max-width:768px) {/* #app {padding-top:200px;} */
}
</style>
四、效果展示

相关文章:
vue设置每次加载页面时展示一个双开门效果
一、首先创建一个双开门的蒙层组件 <!-- DoorOverlay.vue --> <template><div v-if"isVisible" class"door-overlay"><div class"door left-door"></div><div class"door right-door"></div&…...
简单的docker学习 第8章 docker常用服务安装
第8章 常用服务安装 本章主要学习最常用的,也是安装起来稍有些麻烦的 MySQL 与 Redis 两种服务器的Docker 安装。至于其它服务器的 Docker 安装,大家可自行查找资料。只要 MySQL 与 Redis这两类服务器学会了安装,其它服务器的安装基本也不会…...
01、MySQL-DDL(数据定义语言)
目录 1、查询 2、创建 3、修改 4、删除 1、查询 1、查询所有数据库 show databases; 2、查询当前数据库 select database(); 3、查询当前数据库中所有的表(需要先进入这个数据库) use d1; show tables; 4、查询表结构 desc users; 5、查询指定表的建…...
RT-Thread 操作系统 之 线程间同步 IO设备模型
RT-Thread 操作系统 之 线程间同步 IO设备模型 一、线程间同步1.1、信号量1.1.1、信号量结构体1.1.2、信号量的使用和管理1.1.3、信号量同步例程 1.2、互斥量1.2.1、互斥量的使用和管理 1.3、事件集1.3.1、事件集使用和管理方法1.3.2、事件集三个线程同步实例 二、IO设备模型2.…...
力扣leetcode移动0(C++)
给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums [0] 输出: […...
阿里云部署open-webui实现openai代理服务
一、 环境准备 1. 阿里云服务器,ubuntu22系统 2. 外网服务器,linux系统 3. openai API Key 二、实际操作记录(阿里云服务器端) 1. 根据官方文档安装open-webui服务端: 🚀 Getting Started | Open WebUI 1. 如果服务器配置比较低,…...
你的工作环境,选对劳保鞋了吗?守护安全,从脚下开始!
在众多的工作场所中,我们穿梭于不同的工作环境,从繁忙的工厂车间到复杂的建筑工地,再到需要精细操作的实验室……每一步都承载着对安全的期许和对效率的追求。但你是否意识到,脚下那双不起眼的劳保鞋,其实是守护你安全…...
【Linux】编译器gcc/g++ 、程序翻译过程、动静态库
目录 1.gcc/g Linux编译器1.1. gcc与g的安装1.2. gcc与g用法1.2.1.gcc用法1.2.2. g用法 1.3. 程序翻译的过程1.3.1. 前提知识:1.3.2. 预处理(语言种类不变)条件编译用途: 1.3.3. 编译(生成汇编语言)1.3.4. …...
通义灵码-阿里云推出的AI智能编码助手
通义灵码体验地址 标题通义灵码是什么? 通义灵码是由阿里巴巴推出的基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云…...
构建智能生态,视频监控/安防监控EasyCVR视频汇聚流媒体技术在智能分析领域的应用
随着5G、AI、物联网(IoT)、云计算等技术的快速发展,万物互联的时代已经到来,全新的行业生态AIoT正在引领一场深刻的变革。在这场变革中,EasyCVR视频流媒体技术以其强大的视频处理、汇聚与融合能力,在智能分…...
LeetCode Hard|【460. LFU 缓存】
力扣题目链接 LFU全称是最不经常使用算法(Least Frequently Used),LFU算法的基本思想和所有的缓存算法一样,一定时期内被访问次数最少的页,在将来被访问到的几率也是最小的。 相较于 LRU 算法,LFU 更加注重…...
积极参与全球能源科技前沿对话,海博思创推动绿色低碳发展
在能源转型与绿色低碳发展的全球浪潮中,国内领先的储能解决方案供应商海博思创以卓越的技术实力和前瞻性的战略眼光,站在了行业变革的前沿。公司不仅在国内外多个重要展会上大放异彩,更通过一系列技术创新与深度合作,为全球能源行…...
[工具]-ffmpeg-笔记
朋友有一个需求,将视频文件转化为音频文件、音频文件获取音频转化为文本文件。 思路:通过ffmpeg转化视频为音频,通过百度ai提供的voice_t_text接口提取语音文本,但是需要将音频分割成1分钟内的pcm编码 ,采样率16000的…...
Android Fragment:详解,结合真实开发场景Navigation
目录 1)Fragment是什么 2)Fragment的应用场景 3)为什么使用Fragment? 4)Fragment如何使用 5)Fragment的生命周期 6)Android开发,建议是多个activity,还是activity结合fragment&…...
JavaWeb中的Servlet
本笔记基于【尚硅谷全新JavaWeb教程,企业主流javaweb技术栈】https://www.bilibili.com/video/BV1UN411x7xe?vd_sourcea91dafe0f846ad7bd19625e392cf76d8总结 Servlet Servlet简介 动态资源和静态资源 静态资源 无需在程序运行时通过代码运行生成的资源,在程序运…...
SpringBoot AOP 简单的权限校验
本篇文章的主要内容是通过AOP切面编程实现简单的权限校验。 书接上回登录与注册功能 我们的用户表里面不是有role(权限)这个字段吗 在JWT令牌的生成中,我们加入了role字段。 那么接下来,我们就可以通过这个字段来实现权限校验。 我这里就很简单&#x…...
Java生成Word->PDF->图片:基于poi-tl 进行word模板渲染
文章目录 引言I Java生成Word、PDF、图片文档获取标签渲染数据生成文档案例II 工具类封装2.1 word 渲染和word 转 pfd2.2 pdf转成一张图片III poi-tl(word模板渲染) 标签简介文本标签{{var}}图片标签表格标签引用标签IV poi-tl提供了类 Configure 来配置常用的设置标签类型前后…...
JVM内存模型笔记
1. 运行时数据区概述 JVM内存布局规定了Java运行过程中的内存申请、分配和管理策略。运行时数据区分为线程私有和线程共享两种。 2. 线程私有内存 程序计数器:存储当前线程执行的字节码指令地址。虚拟机栈:保存方法调用的局部变量和部分结果。本地方法…...
每日一练 - eSight 网管远程告警通知方式
01 真题题目 eSight 网管支持的远程告警通知方式包括:(多选) A.邮件 B.语音 C.短信 D.微信 02 真题答案 AC 03 答案解析 eSight 网管系统支持多种远程告警通知方式,包括邮件和短信。 这些通知方式可以帮助网络管理员及时了解网络设备的状态和告警信息࿰…...
[matlab] 鲸鱼优化算法优化KNN分类器的特征选择
目录 引言 智能优化算法概述 智能优化算法在KNN特征选择中的应用 应用步骤 UCI数据集 鲸鱼优化算法 一、算法背景与原理 二、算法组成与步骤 三、算法特点与优势 四、应用与挑战 代码实现 鲸鱼优化算法 主程序 打印结果 引言 智能优化算法在优化KNN(…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
算法笔记2
1.字符串拼接最好用StringBuilder,不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
