先看效果图
上代码
html
<view class="coupon">
<view class="tickets" v-for="(item,index) in 10" :key="item">
<view class="l-tickets">
<view class="name">10元优惠劵</view>
<view class="effect">满120元可用</view>
<view class="end-date"> 有效期至：2023-10-30</view>
</view>
<view class="r-tickets">立即使用</view>
</view>
</view>
css
.coupon {
width: 100%;
.tickets {
display: flex;
// padding: 20rpx;
width: 100%;
height: 220rpx;
box-sizing: border-box;
margin-bottom: 30rpx;
}
.l-tickets {
width: 75%;
height: 100%;
position: relative;
background: radial-gradient(circle at right top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,
radial-gradient(circle at right bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;
filter: drop-shadow(0px 8rpx 4rpx rgba(0, 0, 0, 0.05)) drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.05));
padding: 20rpx;
@include flex-sb;
align-items: flex-start;
flex-direction: column;
.name{
font-weight: bold;
}
.effect{
font-size: 26rpx;
color: #999;
}
.end-date{
font-size: 24rpx;
color: #999;
}
}
.l-tickets::after {
content: '';
position: absolute;
height: 100%;
width: 8rpx;
top: 0;
left: -8rpx;
background: radial-gradient(circle at left center, transparent 8rpx, #fff 0) left center / 8rpx 20rpx;
}
.r-tickets {
flex: 1;
background: #F3993A;
position: relative;
background: radial-gradient(circle at left top, transparent 16rpx, #F3993A 0) right top / 100% 50% no-repeat,
radial-gradient(circle at left bottom, transparent 16rpx, #F3993A 0) right bottom / 100% 50% no-repeat;
font-size: 36rpx;
color: #fff;
text-align: center;
@include flex-center;
font-weight: bold;
border-top-right-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.r-tickets::after {
content: '';
width: 1rpx;
background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
position: absolute;
left: 0;
top: 16rpx;
bottom: 16rpx;
}
}换一边
html
<view class="coupon">
<view class="tickets" v-for="(item,index) in 10" :key="item">
<view class="l-tickets">
</view>
<view class="r-tickets">
<view class="name">
10元优惠劵
</view>
<view class="effect">
满120元可用
</view>
<view class="end-date">
有效期至：2023-10-30
</view>
</view>
</view>
</view>
css
.coupon {
width: 100%;
.tickets {
display: flex;
// padding: 20rpx;
width: 100%;
height: 220rpx;
box-sizing: border-box;
margin-bottom: 30rpx;
filter: drop-shadow(0px 8rpx 4rpx rgba(0, 0, 0, 0.05)) drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.05));
}
.l-tickets {
flex: 1;
background: #F3993A;
position: relative;
background: radial-gradient(circle at right top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,
radial-gradient(circle at right bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;
font-size: 36rpx;
color: #fff;
text-align: center;
@include flex-center;
font-weight: bold;
border-top-right-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.l-tickets::after {
content: '';
position: absolute;
height: 100%;
width: 8rpx;
top: 0;
left: -8rpx;
background: radial-gradient(circle at left center, transparent 8rpx, #fff 0) left center / 8rpx 20rpx;
}
.r-tickets {
width: 75%;
height: 100%;
position: relative;
background: radial-gradient(circle at left top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,
radial-gradient(circle at left bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;
padding: 20rpx;
@include flex-sb;
align-items: flex-start;
flex-direction: column;
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
.name{
font-weight: bold;
}
.effect{
font-size: 26rpx;
color: #999;
}
.end-date{
font-size: 24rpx;
color: #999;
}
}
.r-tickets::after {
content: '';
width: 2rpx;
background: linear-gradient(to top, #ddd 0%, #ddd 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
position: absolute;
left: 0;
top: 16rpx;
bottom: 16rpx;
z-index: 999;
}
}