实现效果
上代码,我是用uni-app写的 大家可以自行参照修改
界面代码
<view class="quan" v-for="(item,i) in couponList" :key="i">
<view class="quanInfo">
<text class="couponMpoey">¥20 <text class="couponMpoeyInfo">满300减20</text></text>
<text class="couponName">店铺优惠劵</text>
<text class="couponTime">2019.8.1 00:00-2019.8.123:59</text>
</view>
<view class="receiveBtn">
<view class="receive">使用</view>
</view>
</view>
CSS代码
.quan{
margin: 22rpx 37rpx;
background-color: #FFF5F6;
border-radius: 10rpx;
display: flex;
font-family: PingFang SC;
}
.quanInfo{
background-image: radial-gradient(circle at right top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at right bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
border-right: 1px dashed #F64F51;
padding: 30rpx 50rpx;
width: 75%;
}
.couponMpoey{
font-size: 30rpx;
font-weight: 700;
color: #ff3600;
display: block;
}
.couponMpoeyInfo{
font-size: 26rpx;
padding-left: 10rpx;
}
.couponName{
font-size: 24rpx;
font-weight: 500;
color: #797979;
display: block;
}
.couponTime{
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #797979;
}
.receiveBtn{
background-image: radial-gradient(circle at left top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at left bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
display: flex;
align-items: center;
justify-content: center;
margin-left: -2rpx;
}
.receive{
border-radius: 23rpx;
background-color: #5FC484;
padding: 7rpx 31rpx;
text-align: center;
margin-left: 36rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
}