uniapp 小程序优惠劵样式

先看效果图

上代码

<view class="coupon"><view class="tickets" v-for="(item,index) in 10" :key="item"><view class="l-tickets"><view class="name">10元优惠劵</view><view class="effect">满120元可用</view><view class="end-date">	有效期至:2023-10-30</view></view><view class="r-tickets">立即使用</view></view>
</view>
.coupon {width: 100%;.tickets {display: flex;// padding: 20rpx;width: 100%;height: 220rpx;box-sizing: border-box;margin-bottom: 30rpx;}.l-tickets {width: 75%;height: 100%;position: relative;background: radial-gradient(circle at right top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,radial-gradient(circle at right bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;filter: drop-shadow(0px 8rpx 4rpx rgba(0, 0, 0, 0.05)) drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.05));padding: 20rpx;@include flex-sb;align-items: flex-start;flex-direction: column;.name{font-weight: bold;}.effect{font-size: 26rpx;color: #999;}.end-date{font-size: 24rpx;color: #999;}}.l-tickets::after {content: '';position: absolute;height: 100%;width: 8rpx;top: 0;left: -8rpx;background: radial-gradient(circle at left center, transparent 8rpx, #fff 0) left center / 8rpx 20rpx;}.r-tickets {flex: 1;background: #F3993A;position: relative;background: radial-gradient(circle at left top, transparent 16rpx, #F3993A 0) right top / 100% 50% no-repeat,radial-gradient(circle at left bottom, transparent 16rpx, #F3993A 0) right bottom / 100% 50% no-repeat;font-size: 36rpx;color: #fff;text-align: center;@include flex-center;font-weight: bold;border-top-right-radius: 10rpx;border-bottom-right-radius: 10rpx;}.r-tickets::after {content: '';width: 1rpx;background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;position: absolute;left: 0;top: 16rpx;bottom: 16rpx;}}

换一边

<view class="coupon"><view class="tickets" v-for="(item,index) in 10" :key="item"><view class="l-tickets"></view><view class="r-tickets"><view class="name">10元优惠劵</view><view class="effect">满120元可用</view><view class="end-date">有效期至:2023-10-30</view></view></view></view>
.coupon {width: 100%;.tickets {display: flex;// padding: 20rpx;width: 100%;height: 220rpx;box-sizing: border-box;margin-bottom: 30rpx;filter: drop-shadow(0px 8rpx 4rpx rgba(0, 0, 0, 0.05)) drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.05));}.l-tickets {flex: 1;background: #F3993A;position: relative;background: radial-gradient(circle at right top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,radial-gradient(circle at right bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;font-size: 36rpx;color: #fff;text-align: center;@include flex-center;font-weight: bold;border-top-right-radius: 10rpx;border-bottom-right-radius: 10rpx;}.l-tickets::after {content: '';position: absolute;height: 100%;width: 8rpx;top: 0;left: -8rpx;background: radial-gradient(circle at left center, transparent 8rpx, #fff 0) left center / 8rpx 20rpx;}.r-tickets {width: 75%;height: 100%;position: relative;background: radial-gradient(circle at left top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,radial-gradient(circle at left bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;padding: 20rpx;@include flex-sb;align-items: flex-start;flex-direction: column;border-top-right-radius: 20rpx;border-bottom-right-radius: 20rpx;.name{font-weight: bold;}.effect{font-size: 26rpx;color: #999;}.end-date{font-size: 24rpx;color: #999;}}.r-tickets::after {content: '';width: 2rpx;background: linear-gradient(to top, #ddd 0%, #ddd 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;position: absolute;left: 0;top: 16rpx;bottom: 16rpx;z-index: 999;}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/112790.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++ 常见类内的关键字

1. override override 是一个关键字&#xff0c;用于显式地标记派生类中重写&#xff08;覆盖&#xff09;基类虚函数的意图。 override 并不会影响程序的执行结果&#xff0c;仅仅是作用于编译阶段&#xff0c;用于检查子类是否真的重写父类函数 作用&#xff1a; 帮助发现错…

基于Java的图书商城管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

Hive用户中文使用手册系列(一)

Apache Hive 在标题为“Information Platforms and the Rise of the Data Scientist”的文章一文中&#xff0c;Jeff Hammerbacher把“信息平台”描述为“企业摄取(ingest)、处理(process)、生成(generate)信息的行为”与“帮助加速从经验数据中学习”的“中心”。 在Facebook…

Linux之I2C应用编程

I2C-Tools的交叉编译 tar xvf i2c-tools-4.2.tar.xz 首先解压下压缩包 cd i2c-tools-4.2 进入 i2c-tools-4.2目录 make USE_STATIC_LIB1 执行 make 将i2cset ,i2cget ,i2cdump,i2cdetect,i2ctransfer放到板子上 命令直接操作IIC设备 命令行直接操作iic向AP3216C传感器获取数据…

即时通讯或者推送消息的守护进程?开启几个进程?

进程根据状态可以分为三种进程&#xff0c;守护进程&#xff0c;僵尸进程&#xff0c;孤儿进程。今天我们着重来分析下守护进程。 1.daemon? &#xff08;1&#xff09;概念 守护进程 (daemon) 是一类在后台运行的特殊进程&#xff0c;用于执行特定的系统任务。很多守护进程…

初出茅庐的小李博客之Windows11运行Linux记录

安装教程 超简单&#xff0c;不安装虚拟机&#xff0c;Windows11运行Linuxhttps://zhuanlan.zhihu.com/p/393484912 注意事项 出现错误有可能是少了驱动 驱动下载地址 https://link.zhihu.com/?targethttps%3A//wslstorestorage.blob.core.windows.net/wslblob/wsl_updat…

Django和jQuery,实现Ajax表格数据分页展示

1.需求描述 当存在重新请求接口才能返回数据的功能时&#xff0c;若页面的内容很长&#xff0c;每次点击一个功能&#xff0c;页面又回到了顶部&#xff0c;对于用户的体验感不太友好&#xff0c;我们希望当用户点击这类的功能时&#xff0c;能直接加载到数据&#xff0c;请求…

牛客网---活动运营刷题笔记

## 第一次 1.以下哪个活动玩法&#xff0c;不是为了给APP带来新增用户&#xff1f; A打折促销 B用户认证 C裂变活动 D有奖下载 正确答案&#xff1a;B 官方解析&#xff1a;本题主要考查活动拉新的方式 打折促销&#xff0c;即通过降低商品价格&#xff0c;促进商品销售&#…

安防视频监控系统EasyCVR视频汇聚存储平台定制化开发:新增kafka配置

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台可拓展性强、…

【算法训练-回溯算法 零】回溯算法解题框架

抽象地说&#xff0c;解决一个回溯问题&#xff0c;实际上就是遍历一棵决策树的过程&#xff0c;树的每个叶子节点存放着一个合法答案。你把整棵树遍历一遍&#xff0c;把叶子节点上的答案都收集起来&#xff0c;就能得到所有的合法答案。站在回溯树的一个节点上&#xff0c;你…

QT学习笔记-QT访问各种关系数据库笔记汇总

QT学习笔记-QT访问各种关系数据库笔记汇总 1、QT访问Oracle数据库2、QT访问SQLServer数据库3、QT访问MySQL数据库4、QT访问PostgreSQL数据库5、QT访问Access数据库6、QT多线程中访问数据库的要点 在使用QT进行应用开发过程中&#xff0c;不可避免的会涉及到访问关系数据库&…

协同过滤推荐算法UserCF、ItemCF

目录 相似度计算基于用户的协同过滤&#xff08;UserCF&#xff09;算法评估基于物品的协同过滤&#xff08;ItemCF&#xff09;协同过滤算法的权重改进协同过滤算法的问题分析思考学习参考 相似度计算 杰卡德&#xff08;Jaccard&#xff09;相似系数 Jaccard 系数是衡量两个…

js库——Day.js、Big.js

Day.js 方便操作对时间解析 验证 对时间进行计算等操作。 官方文档&#xff1a;https://dayjs.fenxianglu.cn npm i -S dayjs 1. 给定时间戳或者时间格式&#xff0c;获取格式化后的日期 dayjs(new Date()).format(YYYY-MM-DD HH:mm:ss) 2. 获取固定开始和固定结束的时间da…

在win10上安装配置Hadoop的环境变量

一、背景 在windows10系统中运行seatunnel 二、安装部署 2.1. 下载 Hadoop包 从 Apache Hadoop 官网下载最新版本的 Hadoop&#xff0c;版本号保持与服务端的Hadoop版本一致。 https://hadoop.apache.org/releases.htmlIndex of /apache/hadoop/core/hadoop-3.2.3/ 2.2. 解…

Qt文件对话框的使用

本文介绍Qt文件对话框的使用。 Qt编程中通常会遇到对文件的操作&#xff0c;比如打开&#xff0c;保存等&#xff0c;这些操作通常是通过文件对话框来进行操作的&#xff0c;文件对话框通常具有固定的样式&#xff0c;通过它可以获取到文件名&#xff0c;进而通过文件名打开文…

IntelliJ IDEA 2020.2.1白票安装使用方法

先安装好idear Plugins 内手动添加第三方插件仓库地址&#xff1a;https://plugins.zhile.io 搜索&#xff1a;IDE Eval Reset插件进行安装 输入https://plugins.zhile.io 手动安装离线插件方法 安装包可以去笔者的CSDN资源库下载 安装mybaties插件

【leetcode报错】 leetcode格式问题解决:error: stray ‘\302’ in program [solution.c]

leetcode格式问题解决 一、情景再现二、报错原因三、解决方法四、修正结果 一、情景再现 二、报错原因 该错误是指 源程序中有非法字符&#xff0c;需要将非法字符去掉。 一般是由于coder 1.使用中文输入法 或者 2.从别的地方直接复制粘贴代码 造成的。 代码中出现了 中文空格&…

How to add a jar to a project in eclipse?

Project -> Properties -> Java Build Path -> Libraries -> Add External JARs

AI绘画使用Stable Diffusion(SDXL)绘制玉雕风格的龙

一、引言 灵感来源于在逛 LibLib 时&#xff0c;看到的 Lib 原创者「熊叁gaikan」发布的「翠玉白菜 sdxl&#xff5c;玉雕风格」 的 Lora 模型。简直太好看了&#xff0c;一下子就被吸引了&#xff01; 科普下「翠玉白菜」&#xff1a; 翠玉白菜是由翠玉所琢碾出白菜形状的清…

R语言:主成分分析PCA

文章目录 主成分分析处理步骤数据集code 主成分分析 主成分分析&#xff08;或称主分量分析&#xff0c;principal component analysis&#xff09;由皮尔逊&#xff08;Pearson,1901&#xff09;首先引入&#xff0c;后来被霍特林&#xff08;Hotelling,1933&#xff09;发展…