当前位置: 首页 > news >正文

wo-gradient-card是一款采用uniapp实现的透明辉光动画卡片

采用uniapp-vue3实现,透明辉光动画卡片,卡片内容包含标签、标题、副标题、图片
支持H5、微信小程序(其他小程序未测试过,可自行尝试)
可用于参考学习

可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=16729

  • 使用示例
    请添加图片描述
<template><view><wo-gradient-card v-model:options="state.options"></wo-gradient-card></view>
</template><script setup lang="ts">import { reactive } from 'vue';const state = reactive({options: [{tag: '最新',tagStyle: {bgColor: 'rgba(43, 164, 113, 0.1)',color: 'rgb(43, 164, 113)'},title: '最新卡片',subtitle: '2024/01/22 - 2025/01/22',img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',bgColor: 'radial-gradient(50% 50% at 50% 50%,rgba(8, 188, 47, 0.1) 0,rgba(242,78,30,0) 100%)'},{tag: '最火',tagStyle: {bgColor: 'rgba(239, 47, 47, 0.1)',color: 'rgb(239, 47, 47)'},title: '最热门卡片',subtitle: '2024/01/22 - 2025/01/22',img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',bgColor: 'radial-gradient(50% 50% at 50% 50%,rgba(242,78,30,.1) 0,rgba(242,78,30,0) 100%)'},{tag: '',tagStyle: {bgColor: '',color: ''},title: '普通卡片',subtitle: '2024/01/22 - 2025/01/22',img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',bgColor: 'radial-gradient(50% 50% at 50% 50%,rgba(57,112,227,.1) 0,rgba(57,112,227,0) 100%)'},{tag: '',tagStyle: {bgColor: '',color: ''},title: '无图卡片',subtitle: '2024/01/22 - 2025/01/22',img: '',bgColor: 'radial-gradient(50% 50% at 50% 50%,rgba(57,112,227,.1) 0,rgba(57,112,227,0) 100%)'}]})
</script><style scoped>
</style>

相关文章:

wo-gradient-card是一款采用uniapp实现的透明辉光动画卡片

采用uniapp-vue3实现&#xff0c;透明辉光动画卡片&#xff0c;卡片内容包含标签、标题、副标题、图片 支持H5、微信小程序&#xff08;其他小程序未测试过&#xff0c;可自行尝试&#xff09; 可用于参考学习 可到插件市场下载尝试&#xff1a; https://ext.dcloud.net.cn/plu…...

Spark: a little summary

转眼写spark一年半了&#xff0c;从之前写机器学习组件、做olap到后面做图计算&#xff0c;一直都是用的spark&#xff0c;惭愧的是没太看过里面的源码。这篇文章的目的是总结一下Spark里面比较重要的point&#xff0c;重点部分会稍微看一下源代码&#xff0c;因为spark是跟cli…...

018—pandas 生成笛卡尔积排列组合合并多列字符串数据

思路&#xff1a; 本需求需要将给定的几列数据&#xff0c;生成一个排列组合形式的数据列&#xff0c;利用到 Pandas 多层索引生成的笛卡尔积的方法。 二、使用步骤 1.引入库 代码如下&#xff08;示例&#xff09;&#xff1a; import pandas as pd2.读入数据 代码如下&…...

【算法与数据结构】链表、哈希表、栈和队列、二叉树(笔记二)

文章目录 四、链表理论五、哈希表理论五、栈和队列理论5.1 单调栈 六、二叉树理论6.1 树的定义6.2 二叉树的存储方式6.3 二叉树的遍历方式6.4 高度和深度 最近博主学习了算法与数据结构的一些视频&#xff0c;在这个文章做一些笔记和心得&#xff0c;本篇文章就写了一些基础算法…...

bugku3

前女友 md5 进去又是讴歌乱进的东西 源代码 看到code.txt,访问一下 <?php if(isset($_GET[v1]) && isset($_GET[v2]) && isset($_GET[v3])){$v1 $_GET[v1];$v2 $_GET[v2];$v3 $_GET[v3];if($v1 ! $v2 && md5($v1) md5($v2)){if(!strcmp($v3,…...

相机的白平衡

相机的白平衡是指相机根据拍摄环境的光源色温&#xff0c;调整图像中白色看起来应该是白色的功能。白平衡的设置对于确保图像中的颜色准确性非常重要&#xff0c;因为不同光源的色温会使白色看起来有不同的色调。 通常&#xff0c;相机提供了一些预设的白平衡模式&#xff0c;…...

刷题日记-Day2- Leedcode-977. 有序数组的平方,209. 长度最小的子数组,59. 螺旋矩阵 II-Python实现

刷题日记Day2 977 有序数组的平方209. 长度最小的子数组59. 螺旋矩阵 II 977 有序数组的平方 链接&#xff1a;https://leetcode.cn/problems/squares-of-a-sorted-array/description/ 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组…...

Linux命令-chcon命令(修改对象(文件)的安全上下文)

说明 chcon命令 是修改对象&#xff08;文件&#xff09;的安全上下文&#xff0c;比如&#xff1a;用户、角色、类型、安全级别。也就是将每个文件的安全环境变更至指定环境。使用 --reference 选项时&#xff0c;把指定文件的安全环境设置为与参考文件相同。chcon命令位于 /…...

【漏洞复现】大华DSS视频管理系统信息泄露漏洞

Nx01 产品简介 大华DSS数字监控系统是一个在通用安防视频监控系统基础上设计开发的系统&#xff0c;除了具有普通安防视频监控系统的实时监视、云台操作、录像回放、报警处理、设备治理等功能外&#xff0c;更注重用户使用的便利性。 Nx02 漏洞描述 大华DSS视频管理系统存在信…...

websocket了解下

websocket请求长啥样 GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ Sec-WebSocket-Version: 13 啥是websocket websocket是http的一种&#xff0c;服务器可以主动向客户端推送信息&#xff0c;…...

docker install private registry 【docker 安装 registry 仅证书认证】

预备条件&#xff1a; 安装docker 我们设定镜像仓库域名为registry01.dev.com 配置/etc/hosts 192.168.23.51 registry01.dev.com安装 registry #!/bin/bashreg_ip$1 reg_n$2 reg_port$3if [ $# -eq 0 ]; thenecho "Usage: $0 [reg_ip] [registry_name]"echo &q…...

JavaWeb——004Maven SpringBootWeb入门

一、Maven 1、什么是maven&#xff1f; 2、Maven的作用是什么&#xff1f;&#xff08;3种&#xff09; 1.1、方便的依赖管理 依赖管理&#xff1a;有了Maven&#xff0c;我们就不用再手动导入Jar包了&#xff0c;我们只需要在配置文件当中&#xff0c;简单描述一下项目所需要…...

数据结构与算法-常用排序算法

一、常用排序说明 当涉及排序算法时&#xff0c;理解每个算法的工作原理、时间复杂度和空间复杂度是至关重要的。下面对常用排序算法进行详细说明&#xff1a; 1、冒泡排序&#xff08;Bubble Sort&#xff09;&#xff1a; 工作原理&#xff1a;比较相邻的元素并交换&am…...

链表之“无头单向非循环链表”

目录 ​编辑 1.顺序表的问题及思考 2.链表 2.1链表的概念及结构 2.2无头单向非循环链表的实现 1.创建结构体 2.单链表打印 3.动态申请一个节点 3.单链表尾插 4.单链表头插 5.单链表尾删 6.单链表头删 7.单链表查找 8.单链表在pos位置之前插入x 9.单链表删除pos位…...

一休哥助手网页版如何使用

一休哥助手网页版可以使用GPT4提问了&#xff0c;具体操作流程如下&#xff1a; 1.登录网页版一休哥助手&#xff08;首次打开页面时&#xff0c;初始化久一点&#xff0c;请耐心等一下&#xff09; https://www.fudai.fun 2.登录后就可以使用GPT4了 3.你还可以自定义系统角色…...

个人博客系统测试

文章目录 一、项目介绍二、测试1. 功能测试2. 自动化测试&#xff08;1&#xff09;添加相关依赖&#xff08;2&#xff09;新建包并在报下创建测试类&#xff08;3&#xff09;亮点及难点 一、项目介绍 个人博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来…...

智慧应急的未来:物联网技术引领智慧应急发展新趋势

一、引言 随着社会的快速发展&#xff0c;各类突发事件频繁发生&#xff0c;对社会的安全稳定构成了严重威胁。传统的应急管理模式已难以满足现代社会对安全保障的需求&#xff0c;急需探索新型的应急管理手段。在这个背景下&#xff0c;智慧应急应运而生&#xff0c;以其高效…...

字符串摘要(C语言)

题目描述 给定一个字符串的摘要算法&#xff0c;请输出给定字符串的摘要值。 去除字符串中非字母的符号。如果出现连续字符&#xff08;不区分大小写&#xff09;&#xff0c;则输出&#xff1a;该字符&#xff08;小写&#xff09; 连续出现的次数。如果是非连续的字符&…...

Linux进一步研究权限-----------ACL使用

一、使用情况 1.1、场景: 某个大公司&#xff0c;在一个部门&#xff0c;有一个经理和手下有两个员工&#xff0c;在操控一个Linux项目,项目又分为三期做&#xff0c;然而一期比较重要&#xff0c;经理带着员工做完了&#xff0c;公司就觉得技术难点已经做完攻克了&#xff0…...

剪辑视频调色软件有哪些 剪辑视频软件哪个最好 剪辑视频怎么学 剪辑视频的方法和步骤 会声会影2024 会声会影视频制作教程

看了很多调色教程&#xff0c;背了一堆调色参数&#xff0c;可最终还是调不出理想的效果。别再怀疑自己了&#xff0c;不是你的剪辑技术不行&#xff0c;而是剪辑软件没选对。只要掌握了最基本的调色原理&#xff0c;一款适合自己的视频剪辑软件是很容易出片的。 有关剪辑视频…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...