电子商务网站建设与管理的论文总结,企业网络营销策划方案设计,下载软件大全,简述网页的基本结构本文为常见的移动端uniapp优惠券#xff0c;共有6种优惠券样式#xff08;参考了常见的优惠券#xff09;#xff0c;文本内容仅为示例#xff0c;您可在此基础上调整为你想要的文本 预览效果 通过模拟数据#xff0c;实现点击使用优惠券让其变为灰色的效果#xff08;模… 本文为常见的移动端uniapp优惠券共有6种优惠券样式参考了常见的优惠券文本内容仅为示例您可在此基础上调整为你想要的文本 预览效果 通过模拟数据实现点击使用优惠券让其变为灰色的效果模拟已使用效果 我用的是uniapp来写的
源码直接到uniapp项目中直接运行就可以 templateview classcontentview classyhq1 :classitem.isUse ? use : v-for(item, index) in yhqList1 :keyindexclickclick(item)view classleft{{ item.price }}/viewview classrightview classtit{{ item.title }}/viewview classdescview classp{{ item.time }}/view/view/view/viewview classyhq2 :classitem.isUse ? use : v-for(item, index) in yhqList2 :keyindexclickclick(item)view classleft{{ item.price }}/viewview classrightview classtit{{ item.title }}/viewview classdescview classp{{ item.time }}/view/view/view/viewview classyhq3 :classitem.isUse ? use : v-for(item, index) in yhqList3 :keyindexclickclick(item)view classleft{{ item.price }}/viewview classrightview classtit{{ item.title }}/viewview classdescview classp{{ item.time }}/view/view/view/viewview classyhq4 :classitem.isUse ? use : v-for(item, index) in yhqList4 :keyindexclickclick(item)view classleft{{ item.price }}/viewview classrightview classtit{{ item.title }}/viewview classdescview classp{{ item.time }}/view/view/view/viewview classyhq5 :classitem.isUse ? use : v-for(item, index) in yhqList5 :keyindexclickclick(item)view classleft{{ item.price }}/viewview classrightview classtit{{ item.title }}/viewview classdescview classp{{ item.time }}/view/view/view/viewview classyhq6 :classitem.isUse ? use : v-for(item, index) in yhqList6 :keyindexclickclick(item)view classleft{{ item.price }}/viewview classrightview classtit{{ item.title }}/viewview classdescview classp{{ item.time }}/view/view/view/view/view
/templatescript
export default {data() {return {isUse: false, // 是否已使用yhqList1: [{isUse: false,title: 某某商品优惠券11,price: 100,time: 有效期至: 2025年10月1日},{isUse: false,title: 某某商品优惠券12,price: 100,time: 有效期至: 2025年10月1日},],yhqList2: [{isUse: false,title: 某某商品优惠券21,price: 100,time: 有效期至: 2025年10月1日},{isUse: false,title: 某某商品优惠券22,price: 100,time: 有效期至: 2025年10月1日},],yhqList3: [{isUse: false,title: 某某商品优惠券31,price: 100,time: 有效期至: 2025年10月1日},{isUse: false,title: 某某商品优惠券32,price: 100,time: 有效期至: 2025年10月1日},],yhqList4: [{isUse: false,title: 某某商品优惠券41,price: 100,time: 有效期至: 2025年10月1日},{isUse: false,title: 某某商品优惠券42,price: 100,time: 有效期至: 2025年10月1日},],yhqList5: [{isUse: false,title: 某某商品优惠券51,price: 100,time: 有效期至: 2025年10月1日},{isUse: false,title: 某某商品优惠券52,price: 100,time: 有效期至: 2025年10月1日},],yhqList6: [{isUse: false,title: 某某商品优惠券61,price: 100,time: 有效期至: 2025年10月1日},{isUse: false,title: 某某商品优惠券62,price: 100,time: 有效期至: 2025年10月1日},],}},methods: {click(item) {console.log(item);uni.showToast({title: 使用优惠券,icon: none})item.isUse true}}
}
/scriptstyle
.content {padding: 20rpx;
}.yhq1 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);-webkit-mask: radial-gradient(circle at 20px 20px, #ff0000 20px, blue 0);-webkit-mask-position: -20px -20px;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.use {filter: grayscale(1);/*
是CSS3中的一个滤镜功能用于将元素的内容如图像、文本或背景转换为灰度图像。grayscale() 函数接受一个介于0%到100%之间的参数该参数定义了图像从原始彩色转换为灰度的程度。
当参数为0% 时图像保持原有的彩色状态不进行任何灰度转换。
当参数为100% 时图像完全转换为灰度所有颜色信息都被去除。
在中间值如50%时图像会是部分彩色和部分灰度的混合。
这里的 1 相当于100%表示最大的灰度转换程度。
*/
}.left {width: 20%;font-size: 50rpx;font-weight: 700;color: #fff;
}.right .tit {font-size: 33rpx;color: #fff;font-weight: 600;
}.right .desc .p {font-size: 28rpx;color: #d8d8d8;margin-top: 10rpx;
}.yhq2 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);-webkit-mask: radial-gradient(circle at 20px, #0000 16px, blue 0);display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq3 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);-webkit-mask: radial-gradient(circle at 0, #0000 20px, blue 0),radial-gradient(circle at right, #0000 20px, blue 0);-webkit-mask-size: 51%;-webkit-mask-position: 0, 100%;-webkit-mask-repeat: no-repeat;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq3 .left {width: 35%;height: 100%;display: flex;align-items: center;border-right: 1px dashed #fff;
}.yhq3 .right {width: 55%;text-align: center;
}.yhq4 {width: 100%;height: 100px;margin-top: 15px;
background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);-webkit-mask: radial-gradient(circle at 10px, #0000 10px, blue 0);-webkit-mask-position: -10px;-webkit-mask-size: 100% 30px;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq5 {width: 100%;height: 100px;margin-top: 15px;
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, blue 0);-webkit-mask-position: -20px -20px;-webkit-mask-size: 50%;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq5 .left {width: 35%;height: 100%;display: flex;align-items: center;border-right: 1px dashed #fff;
}.yhq5 .right {width: 55%;text-align: center;
}.yhq6 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);-webkit-mask: radial-gradient(circle at left center, transparent 20px, blue 20px);display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}/style欢迎进群讨论前端内容 谢谢大家
