纯css写优惠券样式

<div class="coupon" :class="[showpop ? 'fadeup' : 'fadedown']"> <p class="tt">领取优惠券<a>×</a></p> <ul> <li> <div class="cone"> <div class="d2">商品券</div> <div class="d1"> <div> <span>10</span> <span></span> </div> <div> <p>无门槛</p> <p>仅限购买蔬菜肉禽丹使用</p> </div> </div> <div class="d3"> <p>【杭州一号店】有效期至2019-03-06</p> <button>立即领取</button> </div> </div> </li> <li> <div class="cone"> <div class="d2">商品券</div> <div class="d1"> <div> <span>10</span> <span></span> </div> <div> <p>无门槛</p> <p>仅限购买蔬菜肉禽丹使用</p> </div> </div> <div class="d3"> <p>【杭州一号店】有效期至2019-03-06</p> <button>立即领取</button> </div> </div> </li> </ul> </div> 
// 用到sass语言 .coupon { position:fixed; width:100%; transition:all 400ms ease; box-sizing:border-box; background:#F8F8F8; z-index:12; bottom: 0; p.tt { line-height: 80rpx; color: #333; font-size: 24rpx; text-align: center; padding: 0 30rpx; } a { font-size: 40rpx; color: #999999; float: right; line-height: 80rpx; } ul { padding: 0 30rpx; li { margin-bottom: 20rpx; .cone { width: 100%; div.d1 { padding: 30rpx 0; display: flex; background: linear-gradient(to top, #FFC875, #FABB5C); border-radius: 20rpx; div:nth-child(1) { width: 230rpx; border-right: 1rpx dashed #fff; color: #ffffff; text-align: center; line-height: 90rpx; span:nth-child(1) { font-size: 90rpx; font-weight: bold; margin-right: 10rpx; } span:nth-child(2) { font-size: 36rpx; } } div:nth-child(2) { padding: 0 0 0 40rpx; p { color: #fff; font-size: 26rpx; line-height: 45rpx; } p:nth-child(1) { margin-bottom: 20rpx; } } } div.d2 { font-size: 24rpx; padding: 0 15rpx; line-height: 40rpx; color: #FFAC30; background: linear-gradient(to top, #FFFDFD, #FFFFFF); right: 30rpx; position: absolute; margin-top: 20rpx; box-shadow:5px 2px 8px #FFAC30; } div.d2::before { // 这里写的是商品券的边角 content:""; position: absolute; right: 100%; width: 0; height: 0; border-top: 20rpx solid #FFFDFD; border-left: 15rpx solid transparent; border-bottom: 20rpx solid #FFFDFD; border-left: 15rpx solid transparent; } div.d3 { background: #fff; padding: 0 50rpx; p { color: #999999; font-size: 20rpx; line-height: 60rpx; } button { float: right; color: #55C47D; border: 1rpx solid #55C47D; line-height: 36rpx; border-radius: 18rpx; padding:0 20rpx; font-size: 20rpx; margin-top: -50rpx; } } div.d3::before, div.d3::after { // 这里及以下是圆弧展示 content:""; position: absolute; width: 40rpx; height: 40rpx; border-radius: 100%; background: #FFFDFD; } div.d3::before { left: 15rpx; margin-top: -20rpx; } div.d3::after { right: 15rpx; margin-top: -80rpx; } } } } 

效果预览,稍稍粗糙,还可以在再优化点,暂时这样记录一下在这里插入图片描述红圈圈的部分是要注意的,在style中加了注释

原文链接:https://blog.csdn.net/weixin_44731065/article/details/93031269?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316780357269572%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316780357269572&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-30-93031269-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片