效果图如下所示
仿京东微信小程序视频请加QQ:1010753897
下载地址:https://download.csdn.net/download/qq_43764578/12314561
.wxml
<view class="blockgr">
<view class="xvxian"></view>
<view class="coupon-curin">
</view>
<view class="coupon-guci">
</view>
</view>
.wxss
page{
background-color: #f7f7f7;
}
view{
box-sizing: border-box;
}
.blockgr{
background:#51C8CC;
width: 94%;
margin: 0 3%;
position: relative;
border-radius: 20rpx;
float: left;
margin-bottom: 30rpx;
padding-top: 12rpx;
box-shadow: 1px -1px 1px 1px rgba(224,224,224,0.6), -1px 1px 1px 1px rgba(224,224,224,0.6);
}
.xvxian{
width: 94%;
margin:0 3%;
height: 1px;
border-bottom: 1px dashed #ccc;
position: absolute;
top: calc((100% - 1px) / 2);
left: 0;
}
.blockgr:before{
border-top-right-radius: 60px;
background: white;
position: absolute;
left: -15rpx;
top: calc((100% - 10px) / 2);
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 9;
border-right:1px solid #ccc;
}
.blockgr:after{
border-bottom-left-radius: 60px;
background: white;
position: absolute;
right: -15rpx;
top: calc((100% - 10px) / 2);
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 9;
border-left:1px solid #ccc;
}
.coupon-curin{
width: 100%;
background-color: #fff;
height:42%;
border-radius: 10rpx 10rpx 0 0;
padding: 3%;
}
.coupon-guci{
width: 100%;
background-color: #fff;
height: 58%;
border-radius: 0 0 20rpx 20rpx;
padding: 3% 2%;
font-size: 22rpx;
overflow: hidden;
color: #aaa;
float: left;
}
有什么问题欢迎评论留言,我会及时回复你的