vue:实现顶部消息横向滚动通知
前言
系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动。
效果如下:

代码
使用
<template><div class="notic-bar"><img :src="notic" class="notice-img" /><div class="notice-bar-container"><div class="notice-bar__wrap"><divv-for="(item, index) in list":key="index"class="notice-bar__wrap_text">{{ item }}</div></div></div></div>
</template><script setup lang="ts">
import notic from "../../public/notic.png";
const list = ["开发不易,感谢理解","","感谢您的理解","","您的支持是我继续完善的动力",
];
</script><style lang="scss" scoped>
.notic-bar {display: flex;background: #67c23a;margin: 5px;border-radius: 5px;padding: 2px 5px;
}
.notice-bar-container {display: flex;width: calc(100% - 30px);height: 20px;overflow: hidden;margin-left: 5px;
}
.notice-img {width: 20px;height: 20px;
}
.notice-bar__wrap {margin-left: 10px;display: flex;animation: move 20s linear infinite;line-height: 20px;color: #f5f6f7;.notice-bar__wrap_text {width: max-content;min-width: 100px;}
}
@keyframes move {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}
}
</style>
相关文章:
vue:实现顶部消息横向滚动通知
前言 系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动。 效果如下: 代码 使用 <template><div class"notic-bar"><img :src"notic" class"notice-img" /><div class"noti…...
[笔记] wsl 禁用配置 win系统环境变量+代理
wsl 配置禁用 win系统环境变量 进入 wsl 的 /etc/wsl.conf 目录,增加以下配置: [interop] enabledfalse appendWindowsPathfalse然后退出wsl,并且执行关闭正在运行的 wsl,执行命令 wsl --shutdown 最后重新进入wsl 即可。 参考…...
Mysql标量子查询
目录 子查询标量子查询数据准备 子查询 SQL语句中嵌套select语句,称为嵌套查询,又称子查询。 SELECT * FROM t1 WHERE column1 ( SELECT column1 FROM t2 ... );子查询外部的语句可以是insert / update / delete / select 的任何一个&…...
深入了解Java虚拟机(JVM)
Java虚拟机(JVM)是Java程序运行的核心组件,它负责解释执行Java字节码,并在各种平台上执行。JVM的设计使得Java具有跨平台性,开发人员只需编写一次代码,就可以在任何支持Java的系统上运行。我们刚开始学习Ja…...
Image Fusion via Vision-Language Model【文献阅读】
阅读目录 文献阅读AbstractIntroduction3. Method3.1. Problem Overview3.2. Fusion via Vision-Language Model 4. Vision-Language Fusion Datasets5. Experiment5.1Infrared and Visible Image Fusion 6. Conclusion个人总结 文献阅读 原文下载:https://arxiv.or…...
探索Manticore Search:开源全文搜索引擎的强大功能
在当今信息爆炸的时代,数据的快速检索变得至关重要。无论是在电子商务网站、新闻门户还是企业内部文档,高效的搜索引擎都是确保用户满意度和工作效率的关键因素之一。而在搜索引擎领域,Manticore Search 作为一款开源的全文搜索引擎ÿ…...
AI 笔记助手,你的思路整理助手
大家好,今天给大家介绍一款非常实用的 AI 笔记助手——AI Note。这款助手就像是一个贴心的小助手,能帮助我们整理笔记,提高学习和工作效率。 🤖 AI Note 可以智能总结笔记内容,准确标记重点,让我们更快地获…...
EchoServer回显服务器简单测试
目录 工具介绍 工具使用 测试结果 工具介绍 github的一个开源项目,是一个测压工具 EZLippi/WebBench: Webbench是Radim Kolar在1997年写的一个在linux下使用的非常简单的网站压测工具。它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的…...
车灯修复UV胶的优缺点有哪些?
车灯修复UV胶的优点如下: 优点: 快速固化:通过紫外光照射,UV胶可以在5-15秒内迅速固化,提高了修复效率。高度透明:固化后透光率高,几乎与原始车灯材料无法区分,修复后车灯外观更加…...
探讨倒排索引Elasticsearch面试与实战:从理论到实践
在当前大数据时代,Elasticsearch(以下简称为ES)作为一种强大的搜索和分析引擎,受到了越来越多企业的青睐。因此,对于工程师来说,掌握ES的面试准备和实战经验成为了必备技能之一。本文将从ES的面试准备和实际…...
网安入门18-XSS(靶场实战)
HTML实体化编码 为了避免 XSS 攻击,会将<>编码为<与>,这些就是 HTML 实体编码。 编码前编码后不可分的空格 < (小于符号)< > (大于符号)> & (与符号)&″ (双引号)"’ (单引号)'© (版权符…...
爬虫的一些小技巧总结
一、在爬虫中,爬取的数据类型如下 1.document:返回的是一个HTML文档 2.png:无损的图片,jpg:压缩后的图片,wbep:有损压缩,比png差,比jpg好 3.avgxml图像编码字符串 4.script:脚本文件,依据一定格式编写的可执行的文…...
LeetCode---386周赛
题目列表 3046. 分割数组 3047. 求交集区域内的最大正方形面积 3048. 标记所有下标的最早秒数 I 3049. 标记所有下标的最早秒数 II 一、分割数组 这题简单的思维题,要想将数组分为两个数组,且分出的两个数组中数字不会重复,很显然一个数…...
React之数据绑定以及表单处理
一、表单元素 像<input>、<textarea>、<option>这样的表单元素不同于其他元素,因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易 交互属性,用户对一下元素交互时通过onChange回调函数来监听…...
Siamrpn++论文中文翻译(详细!)
SiamRPN: Evolution of Siamese Visual Tracking with Very Deep Networks SiamRPN:具有非常深度网络的Siamese视觉跟踪的进化 【siamrpn论文地址】 https://arxiv.org/abs/1812.11703 摘要 基于Siamese网络的跟踪器将跟踪表示为目标模板和搜索区域之间的卷积特征…...
第一篇【传奇开心果系列】Python的自动化办公库技术点案例示例:深度解读Pandas库
传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、主要特点和功能介绍二、Series 示例代码三、DataFrame示例代码四、数据导入/导出示例代码五、数据清洗示例代码六、数据选择和过滤示例代码七、数据合并和连接示例代码八、数据分组和聚…...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的停车位检测系统(Python+PySide6界面+训练代码)
摘要:开发停车位检测系统对于优化停车资源管理和提升用户体验至关重要。本篇博客详细介绍了如何利用深度学习构建一个停车位检测系统,并提供了完整的实现代码。该系统基于强大的YOLOv8算法,并结合了YOLOv7、YOLOv6、YOLOv5的性能对比…...
状态模式(State Pattern)
定义 状态模式(State Pattern)是一种行为设计模式,它允许对象在其内部状态改变时改变其行为。这意味着,当对象的状态发生变化时,它的行为也会发生变化。状态模式特别适用于行为依赖于其状态的对象,而且当这…...
js之版本号排序
版本号排序 给定一个由版本号组成的数组,按照版本号由小到大排序 假如版本号如下 : ["0.1.1", "2.3.3", "0.302.1", "4.2", "4.3.5", "4.3.4.5"];原理很简单,通过自定义sort排…...
考取ORACLE数据库OCP的必要性 Oracle数据库
OCP证书是什么? OCP,全称Oracle Certified Professional,是Oracle公司的Oracle数据库DBA(Database Administrator,数据库管理员)认证课程。这是Oracle公司针对数据库管理领域设立的一项认证课程,旨在评估和…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
