微信小程序仿京东优惠券

效果图如下所示


仿京东微信小程序视频请加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;
}

有什么问题欢迎评论留言，我会及时回复你的