濮阳市网站建设公司,鞍山市城乡建设局网站,医院网站建设报价表,义乌做网站zisou8采用uniapp-vue3实现#xff0c;透明辉光动画卡片#xff0c;卡片内容包含标签、标题、副标题、图片 支持H5、微信小程序#xff08;其他小程序未测试过#xff0c;可自行尝试#xff09; 可用于参考学习 可到插件市场下载尝试#xff1a; https://ext.dcloud.net.cn/plu… 采用uniapp-vue3实现透明辉光动画卡片卡片内容包含标签、标题、副标题、图片 支持H5、微信小程序其他小程序未测试过可自行尝试 可用于参考学习 可到插件市场下载尝试 https://ext.dcloud.net.cn/plugin?id16729
使用示例
templateviewwo-gradient-card v-model:optionsstate.options/wo-gradient-card/view
/templatescript setup langtsimport { 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%)}]})
/scriptstyle scoped
/style
