效果圖
wxml：代碼
<view class="coupon-item">
? <view class="style-six" wx:for="{{box}}" wx:key="{{index}}">
? ? <view class="info-box">
? ? ? ? <view class="nick">{{item.couponName}}</view>
? ? ? ? <view class="coupon-money">
? ? ? ? ? ? <view class="lay of">￥<text>{{item.coupon}}</text></view>
? ? ? ? ? ? <view class="lay">
? ? ? ? ? ? ? ? <view class="tit"></view>
? ? ? ? ? ? ? ? <view class="demand">{{item.timeLimit}}</view>
? ? ? ? ? ? </view>
? ? ? ? </view>
? ? </view>
? ? <view href="javascript:;" class="get-btn" >
? ? ? ? <span? bindtap='listbin' data-id='{{item.id}}'> 立即使用 </span>
? ? </view>
? </view>
</view>
wxss:代碼
page{
? background: #f5f5f5;
}
.coupon-item{
? width:100%;
}
.style-six{
??width:auto;
??height:200rpx;
??position:relative;
??margin:20rpx 10rpx;
??display:-webkit-box;
??display:-webkit-flex;
??display:flex;
??align-items:center;
??justify-content:center;
? background-color: #F7DBCD;
? color: #E5004F;
}
.style-six .info-box{
??-webkit-box:1;
??-webkit-flex:1;
??flex:1;
??padding:0 3% 0 10%;
??position:relative;
}
.coupon-item .nick {
??padding:.66% 0;
??color:#E5004F;
? font-size:28rpx;
}
.coupon-item .coupon-money {
??width:100%;
??display:-webkit-box;
??display:-webkit-flex;
??display:flex;
??font-size:1.2rem;
??align-items:center;
}
.coupon-item .coupon-money .of{
? font-size: 32rpx;
}
.coupon-item .coupon-money text {
??font-size:56rpx;
}
.coupon-item .coupon-money .lay:last-child {
??flex:1;
??padding:0 3%;
? font-size:30rpx;
??line-height:1.22rem;
}
.coupon-item .coupon-money .lay .demand{
? margin-top:20rpx;
? color: #f0f0f0;
}
.style-six .get-btn{
??display:-webkit-box;
??display:-webkit-flex;
??display:flex;
??align-items:center;
??justify-content:center;
??height:200rpx;
??text-align:center;
??color:#fff;
??font-size:1.5rem;
??line-height:1.35;
? width: 28%;
? background-color: #fff;
??position:relative;
}
.style-six .get-btn span {
? border:1rpx solid #E5004F;
? padding: 8rpx 16rpx;
? border-radius:26rpx;
??color:#E5004F;
? font-size:28rpx;
}
.style-six:after {
??top:-.12rem;
}
/* 齒輪 */
.style-six:before {
??bottom:-.12rem;
??-webkit-transform:rotate(180deg);
}
.style-six:after,.style-six:before {
??content:"";
??height:.5rem;
??position:absolute;
??left:0;
??right:0;
??display:block;
??z-index:9;
??background-image:linear-gradient(-45deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-135deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#f5f5f5 75%),linear-gradient(-135deg,transparent 75%,#f5f5f5 75%);
??background-size:1rem 1rem;
??background-repeat:repeat-x,repeat-x;
}
.style-six:after {
??top:-.12rem;
}
.style-six:after,.style-six:before {
??content:"";
??height:.5rem;
??position:absolute;
??left:0;
??right:0;
??display:block;
??z-index:9;
??background-image:linear-gradient(-45deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-135deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#f5f5f5 75%),linear-gradient(-135deg,transparent 75%,#f5f5f5 75%);
??background-size:1rem 1rem;
??background-repeat:repeat-x,repeat-x;
}
