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公司针对数据库管理领域设立的一项认证课程,旨在评估和…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
