当前位置: 首页 > 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>

相关文章:

  • ELK入门(四)-logstash
  • petalinux_zynq7 驱动DAC以及ADC模块之六:qt显示adc波形
  • 十三、集合进阶——单列集合 及 数据结构
  • Java学习——ArrayList和LinkedList
  • 使用向量数据库pinecone构建应用01:相似语义检索 Semantic Search
  • 基于EasyCVR视频汇聚系统的公安网视频联网共享视频云平台建设思路分析(一)
  • 文件上传---->生僻字解析漏洞
  • MySQL高级特性篇(8)-数据库连接池的配置与优化
  • kafka生产者2
  • [SUCTF 2019]EasySQL1 题目分析与详解
  • 算法打卡day1|数组篇|Leetcode 704.二分查找、27.移除元素
  • OpenAI文生视频大模型Sora概述
  • C 标准库 - <float.h>
  • 【Ubuntu】通过网线连接两台电脑以实现局域网连接的方法
  • 【docker入门】1-
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • AHK 中 = 和 == 等比较运算符的用法
  • iOS仿今日头条、壁纸应用、筛选分类、三方微博、颜色填充等源码
  • JS字符串转数字方法总结
  • MyEclipse 8.0 GA 搭建 Struts2 + Spring2 + Hibernate3 (测试)
  • PaddlePaddle-GitHub的正确打开姿势
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • 阿里云前端周刊 - 第 26 期
  • 闭包,sync使用细节
  • 京东美团研发面经
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 设计模式走一遍---观察者模式
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​什么是bug?bug的源头在哪里?
  • (1)Android开发优化---------UI优化
  • (7)STL算法之交换赋值
  • (floyd+补集) poj 3275
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (论文阅读26/100)Weakly-supervised learning with convolutional neural networks
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • ****Linux下Mysql的安装和配置
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .CSS-hover 的解释
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!
  • .net 反编译_.net反编译的相关问题
  • @ 代码随想录算法训练营第8周(C语言)|Day57(动态规划)
  • @EnableAsync和@Async开始异步任务支持
  • @Responsebody与@RequestBody
  • @TableId注解详细介绍 mybaits 实体类主键注解
  • [ vulhub漏洞复现篇 ] JBOSS AS 4.x以下反序列化远程代码执行漏洞CVE-2017-7504
  • [2016.7.test1] T2 偷天换日 [codevs 1163 访问艺术馆(类似)]
  • [BZOJ 3680]吊打XXX(模拟退火)
  • [BZOJ 4598][Sdoi2016]模式字符串
  • [C#]winform制作仪表盘好用的表盘控件和使用方法
  • [C++]C++类基本语法
  • [CentOs7]图形界面
  • [Foreman]解决Unable to find internal system admin account
  • [Java、Android面试]_05_内存泄漏和内存溢出