微信小程序优惠券样式怎么写?
网友回复
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; }