效果图
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;
}
