当前位置: 首页 > news >正文

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站打响声量?

元梦之星是腾讯天美工作室群研发的超开星乐园派对手游&#xff0c;于2023年1月17日通过审批。该游戏风格可爱软萌&#xff0c;带有社交属性&#xff0c;又是一款开黑聚会的手游&#xff0c;备受年轻人关注。 飞瓜数据&#xff08;B站版&#xff09;显示&#xff0c;元梦之星在…...

Python---循环---while循环

Python中的循环 包括 while循环与for循环&#xff0c;本文以while循环为主。 Python中所有的知识点&#xff0c;都是为了解决某个问题诞生的&#xff0c;就好比中文的汉字&#xff0c;每个汉字都是为了解决某种意思表达而诞生的。 1、什么是循环 现实生活中&#xff0c;也有…...

面试知识点--基础篇

文章目录 前言一、排序1. 冒泡排序2. 选择排序3. 插入排序4. 快速单边循环排序5. 快速双边循环排序6. 二分查找 二、集合1.List2.Map 前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、排序 1. 冒泡排序 冒泡排序就是把小的元素往前调或者把大…...

FIFO设计16*8,verilog,源码和视频

名称&#xff1a;FIFO设计16*8&#xff0c;数据显示在数码管 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 使用verilog语言设计一个16*8的FIFO&#xff0c;深度16&#xff0c;宽度为8。可对FIFO进行写和读&#xff0c;并将FIFO读出的数据显示到…...

#力扣:2769. 找出最大的可达成数字@FDDLC

2769. 找出最大的可达成数字 - 力扣&#xff08;LeetCode&#xff09; 一、Java class Solution {public int theMaximumAchievableX(int num, int t) {return num 2*t;} }...

Juniper防火墙SSG-140 session 过高问题

1.SSG-140性能参数 2.问题截图 3.解决方法 &#xff08;1&#xff09;通过telnet 或 consol的方法登录到防火墙&#xff1b; &#xff08;2&#xff09;使用get session 查看总的session会话数&#xff0c;如果大于300 一般属于不正常情况 &#xff08;3&#xff09;使用get…...

Spring Boot 3.2四个新特点提升运行性能

随着 Spring Framework 6.1 和 Spring Boot 3.2 普遍可用性的临近&#xff0c;我们想分享一下 Spring 团队为让开发人员优化其应用程序的运行时效率而做出的几项努力的概述。 我们将介绍以下技术和用例&#xff1a; Spring MVC 将使用 基于JDK 21 虚拟线程 Web 堆栈使用 Spri…...

一阶系统阶跃响应实现规划方波目标值

一阶系统单位阶跃响应 一阶系统传递函数&#xff0c;实质是一阶惯性环节&#xff0c;T为一阶系统时间常数。 输入信号为单位阶跃函数&#xff0c;数学表达式 单位阶跃函数拉氏变换 输出一阶系统单位阶跃响应 拉普拉斯反变换 使用前向差分法对一阶系统离散化 将z变换写成差分方…...

项目经理如何去拆分复杂项目?

代码的横向分层&#xff0c;维度是根据复杂度来的&#xff0c;可保证代码便于开发和维护 1、因为强类型的原因&#xff0c;把变动大的分到数据库来解决&#xff0c;这是一种后端分离。 2、因为发布难的原因&#xff0c;所以用稳定的引擎来解决问题&#xff0c;然后用数据库配置…...

python二次开发Solidworks:修改实体尺寸

立方体原始尺寸&#xff1a;100mm100mm100mm 修改后尺寸&#xff1a;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个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会生成…...

sqlserver系统存储过程添加用户学习

sqlserver有一个系统存储过程sp_adduser&#xff1b;从名字看是添加用户的&#xff1b;操作一下&#xff0c; 从错误提示看还需要先添加一个登录名&#xff0c;再执行一个系统过程sp_addlogin看一下&#xff0c; 执行完之后看一下&#xff0c;安全性-登录名下面有了rabbit&…...

Monocle 3 | 太牛了!单细胞必学R包!~(一)(预处理与降维聚类)

1写在前面 忙碌的一周结束了&#xff0c;终于迎来周末了。&#x1fae0; 这周的手术真的是做到崩溃&#xff0c;2天的手术都过点了。&#x1fae0; 真的希望有时间静下来思考一下。&#x1fae0; 最近的教程可能会陆续写一下Monocle 3&#xff0c;炙手可热啊&#xff0c;欢迎大…...

基于VCO的OTA稳定性分析的零交叉时差模型研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

大数据Hadoop之——部署hadoop+hive+Mysql环境(window11)

一、安装JDK8 【温馨提示】对应后面安装的hadoop和hive版本&#xff0c;这里使用jdk8&#xff0c;这里不要用其他jdk了&#xff0c;可能会出现一些其他问题。 1&#xff09;JDK下载地址 Java Downloads | Oracle 按正常下载是需要先登录的&#xff0c;这里提供一个不用登录下载…...

app爬虫中的Airtest元素存在或等待

app爬虫中的Airtest元素存在或等待 一. poco等待 等待无错误 等待元素10秒。如果它没有出现&#xff0c;则不会引发任何错误。 poco(xxx).wait(timeout10)您还可以在.wait()之后执行一些操作&#xff0c;如click或long_click poco(xxx).wait(timeout10).click() poco(xxx).…...

Flink学习之旅:(三)Flink源算子(数据源)

1.Flink数据源 Flink可以从各种数据源获取数据&#xff0c;然后构建DataStream 进行处理转换。source就是整个数据处理程序的输入端。 数据集合数据文件Socket数据kafka数据自定义Source 2.案例 2.1.从集合中获取数据 创建 FlinkSource_List 类&#xff0c;再创建个 Student 类…...

SQL INSERT INTO 语句(在表中插入)

SQL INSERT INTO 语句 INSERT INTO 语句用于向表中插入新的数据行。 SQL INSERT INTO 语法 INSERT INTO 语句可以用两种形式编写。  第一个表单没有指定要插入数据的列的名称&#xff0c;只提供要插入的值&#xff0c;即可添加一行新的数据&#xff1a; INSERT INTO table_n…...

2023年最佳项目管理软件排行榜揭晓!

根据网络数据调查结果显示&#xff0c;今年有77%的组织将效率列为优先事项&#xff0c;而82%的领导人确认投资于新的项目管理和工作管理方案以提高效能。然而随着对价值的重新关注&#xff0c;选择适合的工程项目管理软件变得比以往任何时候都更加重要。好消息是通过对39个主要…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...