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;}}
相关文章:
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 cl…...
元梦之星内测上线,如何在B站打响声量?
元梦之星是腾讯天美工作室群研发的超开星乐园派对手游,于2023年1月17日通过审批。该游戏风格可爱软萌,带有社交属性,又是一款开黑聚会的手游,备受年轻人关注。 飞瓜数据(B站版)显示,元梦之星在…...
Python---循环---while循环
Python中的循环 包括 while循环与for循环,本文以while循环为主。 Python中所有的知识点,都是为了解决某个问题诞生的,就好比中文的汉字,每个汉字都是为了解决某种意思表达而诞生的。 1、什么是循环 现实生活中,也有…...
面试知识点--基础篇
文章目录 前言一、排序1. 冒泡排序2. 选择排序3. 插入排序4. 快速单边循环排序5. 快速双边循环排序6. 二分查找 二、集合1.List2.Map 前言 提示:以下是本篇文章正文内容,下面案例可供参考 一、排序 1. 冒泡排序 冒泡排序就是把小的元素往前调或者把大…...
FIFO设计16*8,verilog,源码和视频
名称:FIFO设计16*8,数据显示在数码管 软件:Quartus 语言:Verilog 代码功能: 使用verilog语言设计一个16*8的FIFO,深度16,宽度为8。可对FIFO进行写和读,并将FIFO读出的数据显示到…...
#力扣:2769. 找出最大的可达成数字@FDDLC
2769. 找出最大的可达成数字 - 力扣(LeetCode) 一、Java class Solution {public int theMaximumAchievableX(int num, int t) {return num 2*t;} }...
Juniper防火墙SSG-140 session 过高问题
1.SSG-140性能参数 2.问题截图 3.解决方法 (1)通过telnet 或 consol的方法登录到防火墙; (2)使用get session 查看总的session会话数,如果大于300 一般属于不正常情况 (3)使用get…...
Spring Boot 3.2四个新特点提升运行性能
随着 Spring Framework 6.1 和 Spring Boot 3.2 普遍可用性的临近,我们想分享一下 Spring 团队为让开发人员优化其应用程序的运行时效率而做出的几项努力的概述。 我们将介绍以下技术和用例: Spring MVC 将使用 基于JDK 21 虚拟线程 Web 堆栈使用 Spri…...
一阶系统阶跃响应实现规划方波目标值
一阶系统单位阶跃响应 一阶系统传递函数,实质是一阶惯性环节,T为一阶系统时间常数。 输入信号为单位阶跃函数,数学表达式 单位阶跃函数拉氏变换 输出一阶系统单位阶跃响应 拉普拉斯反变换 使用前向差分法对一阶系统离散化 将z变换写成差分方…...
项目经理如何去拆分复杂项目?
代码的横向分层,维度是根据复杂度来的,可保证代码便于开发和维护 1、因为强类型的原因,把变动大的分到数据库来解决,这是一种后端分离。 2、因为发布难的原因,所以用稳定的引擎来解决问题,然后用数据库配置…...
python二次开发Solidworks:修改实体尺寸
立方体原始尺寸:100mm100mm100mm 修改后尺寸:10mm100mm100mm import win32com.client as win32 import pythoncomdef bin_width(width):myDimension Part.Parameter("D1草图1")myDimension.SystemValue width def bin_length(length):myDime…...
【C++】:类和对象(中)之类的默认成员函数——构造函数and析构函数
1.类的6个默认成员函数 如果一个类中什么成员都没有,简称为空类 空类中真的什么都没有吗?并不是,任何类在什么都不写时,编译器会自动生成以下6个默认成员函数 默认成员函数:用户没有显式实现,编译器会生成…...
sqlserver系统存储过程添加用户学习
sqlserver有一个系统存储过程sp_adduser;从名字看是添加用户的;操作一下, 从错误提示看还需要先添加一个登录名,再执行一个系统过程sp_addlogin看一下, 执行完之后看一下,安全性-登录名下面有了rabbit&…...
Monocle 3 | 太牛了!单细胞必学R包!~(一)(预处理与降维聚类)
1写在前面 忙碌的一周结束了,终于迎来周末了。🫠 这周的手术真的是做到崩溃,2天的手术都过点了。🫠 真的希望有时间静下来思考一下。🫠 最近的教程可能会陆续写一下Monocle 3,炙手可热啊,欢迎大…...
基于VCO的OTA稳定性分析的零交叉时差模型研究(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
大数据Hadoop之——部署hadoop+hive+Mysql环境(window11)
一、安装JDK8 【温馨提示】对应后面安装的hadoop和hive版本,这里使用jdk8,这里不要用其他jdk了,可能会出现一些其他问题。 1)JDK下载地址 Java Downloads | Oracle 按正常下载是需要先登录的,这里提供一个不用登录下载…...
app爬虫中的Airtest元素存在或等待
app爬虫中的Airtest元素存在或等待 一. poco等待 等待无错误 等待元素10秒。如果它没有出现,则不会引发任何错误。 poco(xxx).wait(timeout10)您还可以在.wait()之后执行一些操作,如click或long_click poco(xxx).wait(timeout10).click() poco(xxx).…...
Flink学习之旅:(三)Flink源算子(数据源)
1.Flink数据源 Flink可以从各种数据源获取数据,然后构建DataStream 进行处理转换。source就是整个数据处理程序的输入端。 数据集合数据文件Socket数据kafka数据自定义Source 2.案例 2.1.从集合中获取数据 创建 FlinkSource_List 类,再创建个 Student 类…...
SQL INSERT INTO 语句(在表中插入)
SQL INSERT INTO 语句 INSERT INTO 语句用于向表中插入新的数据行。 SQL INSERT INTO 语法 INSERT INTO 语句可以用两种形式编写。 第一个表单没有指定要插入数据的列的名称,只提供要插入的值,即可添加一行新的数据: INSERT INTO table_n…...
2023年最佳项目管理软件排行榜揭晓!
根据网络数据调查结果显示,今年有77%的组织将效率列为优先事项,而82%的领导人确认投资于新的项目管理和工作管理方案以提高效能。然而随着对价值的重新关注,选择适合的工程项目管理软件变得比以往任何时候都更加重要。好消息是通过对39个主要…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...
【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...
