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个主要…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中，压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言，提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
python可视化：俄乌战争时间线关键节点与深层原因
俄乌战争时间线可视化分析：关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一，自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具，系统分析这场战争的时间线、关键节点及其背后的深层原因，全面…...
华为云Flexus+DeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手
华为云FlexusDeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手 一、构建知识库问答助手引言二、构建知识库问答助手环境2.1 基于FlexusX实例的Dify平台2.2 基于MaaS的模型API商用服务 三、构建知识库问答助手实战3.1 配置Dify环境3.2 创建知识库问答助手3.3 使用知…...
统计按位或能得到最大值的子集数目
我们先来看题目描述： 给你一个整数数组 nums ，请你找出 nums 子集 按位或 可能得到的 最大值 ，并返回按位或能得到最大值的 不同非空子集的数目 。 如果数组 a 可以由数组 b 删除一些元素（或不删除）得到，…...