微信小程序——前端——抵扣券、优惠券样式
2024-05-28 10:47:07
微信小程序——前端——抵扣券、优惠券样式
效果图：
实现思路：
左边+划线+右边==使用信息+分割线+使用限制
整体底色：
.wrapper {margin: 0 auto;width: 100%;display: flex;background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1));/*实现颜色渐变 */
}
/*几个伪类化成的圆弧的样式以及位置（置于顶部）*/
.content:before, .tip:before, .split-line:before{border-radius: 0 0 16rpx 16rpx;top: 0;
}
.content:after, .tip:after, .split-line:after{border-radius: 16rpx 16rpx 0 0;bottom: 0;
}
左边：
/*前半部分样式*/
.content {position: relative;flex: 1;padding: 20rpx;text-align: left;white-space: nowrap;display: flex;flex-direction: column;justify-content: space-around;
}
/*给前半部分加两个伪类，基本样式如下*/
.content:before, .content:after{content: '';position: absolute;width: 32rpx;height: 16rpx;background: #eee;left: -16rpx;z-index: 1;
}
.tip:before, .tip:after{content: '';position: absolute;width: 32rpx;height: 16rpx;background:#eee;right: -16rpx;z-index: 1;
}
分割线：
/*中间竖直虚线样式*/
.split-line {position: relative;flex: 0 0 0;margin: 0 10rpx 0 6rpx;border-left: 4rpx dashed #eee;
}
/*给虚线加两个伪类，基本样式如下*/
.split-line:before, .split-line:after {content: '';position: absolute;width: 32rpx;height: 16rpx;background: #eee;left: -18rpx;z-index: 1;
}
右边：
/*后半部分样式*/
.tip {position: relative;padding: 50rpx 30rpx;flex: 0 0 200rpx;text-align: center;
}
补充其他功能：
tabs切换+点击分享+静态数据
最终代码，为了省时，直接拿去复用
wxml:
<view class="container coupons"><view class="coupons-header"><block wx:for="{{tabs}}" wx:key="id"><view class="tabs-item {{currentTabsIndex==index?'selected':''}}" bindtap="onTabsItemTap" data-index="{{index}}">{{item}}</view></block><view class="tips-box tips-bag"><text class="tips-title" style="color:#fff;">1</text></view></view><view class="coupons-body"><view class="TabsClassContent" hidden="{{ currentTabsIndex!=0 }}"><block wx:for="{{ [0, 1] }}" wx:key="id"><view class="app"><view class="wrapper"><view class="content"><view class="coupon-top"><text>¥50.00</text></view><view class="coupon-middle">店名：八中撒码头</view><view class="coupon-bottom">有效期：2019.12.23-2020.01.23</view></view><view class="split-line"></view><view class="tip"><view class="conditions">满500元使用</view><button class="useNow" size="mini" bindtap="">立即使用</button></view><label><view class="share-button"><image style="width:50rpx;height:50rpx;" src="../../images/icon/buttonShare.png"></image><button open-type="share" data-id="{{item.id}}" class="shareButton"></button></view></label> </view></view> </block></view><view class="TabsClassContent" hidden="{{ currentTabsIndex!=1 }}"></view><view class="TabsClassContent" hidden="{{ currentTabsIndex!=2 }}"><view class="app"><view class="wrapper useless"><image class="overTime" src="../../images/icon/overTime.png"></image><view class="content"><view class="coupon-top"><text>¥50.00</text></view><view class="coupon-middle">店名：八中撒码头</view><view class="coupon-bottom">有效期：2019.12.23-2020.01.23</view></view><view class="split-line"></view><view class="tip"><view class="conditions">满500元使用</view><button class="useNow" size="mini" bindtap="">已作废</button></view></view></view> </view> </view>
</view>css:
.coupons-header{display: flex;line-height: 80rpx;
}.coupon-top text{font-size: 50rpx;color: #fff;
}.coupon-middle{color: #fff;
}.coupon-bottom{color: #000;font-size: 24rpx;
}.tips-bag{right: 30rpx;
}.share-button{position: relative;right: 10rpx;top: 10rpx;
}.shareButton{font-size: 24rpx;background-color: #ff7440;color: #fff;width: 100rpx;height: 100rpx;display: none;
}/* 优惠券 */
/* 优惠券样式 */
.app {padding: 10rpx; background: #eee;margin-bottom: 5rpx;
}.wrapper {margin: 0 auto;width: 100%;display: flex;background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1));/*实现颜色渐变 */
}/*前半部分样式*/
.content {position: relative;flex: 1;padding: 20rpx;text-align: left;white-space: nowrap;display: flex;flex-direction: column;justify-content: space-around;
}/*后半部分样式*/
.tip {position: relative;padding: 50rpx 30rpx;flex: 0 0 200rpx;text-align: center;
}/*中间竖直虚线样式*/
.split-line {position: relative;flex: 0 0 0;margin: 0 10rpx 0 6rpx;border-left: 4rpx dashed #eee;
}/*给虚线加两个伪类，基本样式如下*/
.split-line:before, .split-line:after {content: '';position: absolute;width: 32rpx;height: 16rpx;background: #eee;left: -18rpx;z-index: 1;
}/*给前半部分加两个伪类，基本样式如下*/
.content:before, .content:after{content: '';position: absolute;width: 32rpx;height: 16rpx;background: #eee;left: -16rpx;z-index: 1;
}.tip:before, .tip:after{content: '';position: absolute;width: 32rpx;height: 16rpx;background:#eee;right: -16rpx;z-index: 1;
}/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/
.content:before, .tip:before, .split-line:before{border-radius: 0 0 16rpx 16rpx;top: 0;
}.content:after, .tip:after, .split-line:after{border-radius: 16rpx 16rpx 0 0;bottom: 0;
}.money {font-size: 50rpx;color: #eee;
}.money text {font-size: 50rpx;padding-right: 20rpx;
}.title {color: #eee;font-size: 30rpx;display: flex;width: 100rpx;
}.conditions {color: #eee;font-size: 30rpx;padding:15rpx;
}.useNow {color: rgba(254,50,103,1);font-size: 30rpx;border-radius: 50rpx;border-style: none;
}.useless{background: #C0C0C0;
}.overTime{position: absolute;right: 30rpx;top: 100rpx;width: 100rpx;height: 100rpx;
}/* 数量指示点 */
.tips-box{position: absolute;right: 80rpx;top: 15rpx;width: 50rpx;height: 50rpx;border-radius: 50%;background-color: red;
}.tips-title{position: relative;left: 17rpx;bottom: 17rpx;
}
und: #C0C0C0;
}
.overTime{
position: absolute;
right: 30rpx;
top: 100rpx;
width: 100rpx;
height: 100rpx;
}
/* 数量指示点 */
.tips-box{
position: absolute;
right: 80rpx;
top: 15rpx;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: red;
}
.tips-title{
position: relative;
left: 17rpx;
bottom: 17rpx;
}
微信小程序——前端——抵扣券、优惠券样式相关推荐
- 0基础跟着黑马程序员学微信小程序前端开发Day01
学习目录 一.项目的基本组成结构 二.小程序页面的组成部分 三.创建小程序页面 四.小程序的一些组件 1.常用视图容器类组件 2.常用基础内容组件 3.button 按钮的基本使用 4.image 组 ...
- mysql的数据现实在小程序_使用phpstudy将本地mysql数据显示在微信小程序前端
使用phpstudy将本地mysql数据显示在微信小程序前端 第一步:新建小程序 在pages文件里新建一个phptest文件夹,如果你不知道操作,建议先学小程序的基础知识 第二步:写phptest. ...
- 微信小程序前端RSA加解密
开门见山地说,希望各位前端不要搜到这篇文章,因为我总感觉在小程序端去做RSA的加解密总有种脱了裤子放屁多此一举的感觉.但是需求来的时候总是说不准的,接下来我就给大家推荐一种在小程序端比较方便,操作不 ...
- (已更新）运势运程小程序v1.2.0 功能模块+微信小程序+前端+后端+新增每日星座卡片
运势运程算命小程序 v1.2.0 完整版+微信小程序+前端+后端 运势运程算命小程序开源源码最新更新日志: 新增测算栏目支付成功模版消息提醒,增加留存率.新增每日星座卡片.单向历,请求缓存解决请求慢问 ...
- 运势运程算命小程序v1.2.0 功能模块+微信小程序+前端+后端+新增每日星座卡片
运势运程算命小程序开源源码最新更新日志: 新增测算栏目支付成功模版消息提醒,增加留存率.新增每日星座卡片.单向历,请求缓存解决请求慢问题.修复测算出生日期开始时间,从 1979 更改为 1918 运势 ...
- 最新超火毒鸡汤词汇类的微信小程序前端源码
源码介绍: 一款鸡汤类词汇的小程序源码,缺点是没有后台,只有一个前端. 修改说明: app.json文件底部修改小程序APPID index/index.json文件修改小程序名称 接口地址为:htt ...
- 微信小程序框架——微信小程序前端开发工具
微信小程序框架 框架 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java ...
- 微信小程序前端设计,以北京动物园为例
1问题描述 关于微信小程序的前端页面设计 2算法描述 首先打开微信开发者工具创建一个新的小程序项目,但是可以不选择任何模板,进入新建的小程序,因为是前端设计,就可能需要我们插入图片之类的,所以先在项目 ...
- 微信小程序之Js修改元素样式
微信小程序和普通的前端开发有很多不同. 后者修改样式js可以操作DOM,即 document.getElementById(id).style.property=new style 但是微信的js是没 ...
最新文章
- 贝叶斯网络之父Judea Pearl推荐：迈向可解释的知识驱动系统
- 关于使用DataGrid的ButtonColumn，动态添加DataGrid列，实现不定列n个文件的下载功能...
- 温故知新：Docker基础知识知多少？
- Android View相关知识点
- hub设备_ORICO|DIY玩家需要一款高性能的HUB，犹如王者需要一把利器一样
- 去年出货的工业机器人，超过1/3都跑来了中国
- [转]javascript 程序1
- Android之SwipeRefreshLayout下拉刷新组件
- 【强档推荐】动漫初音未来Ⅱ主题
- C语言——简单图形打印学习
- 不一样的课程表，不一样的Excle--用Excle进行设计(12):网状结构
- 环路补偿-一阶、二阶、运放补偿讲解及计算
- 普洱市企业登记“区块链云签名”试点工作启动， 用户操作仅需5分钟！
- 奥利给！！字体/颜色对话框这么豪横的解释，赶紧PICK一下吧！！
- 数据分析---2.数据分析----爬取NBA中国官方网站的球员数据，并分析
- 【SpringBoot高级篇】springboot实现上传docdocx文件格式转html在线预览v2.0
- LeetCode第280周赛回顾
- Thinkpad使用傲游浏览器的时候，无法滚动页面怎么办？
- 史上最全的基于ffmpeg+sdl网络摄像头编解码播放资料（包含交叉编译过程，附带完整源码）
- 什么是BEPI认证？