微信小程序——前端——抵扣券、优惠券样式

微信小程序——前端——抵扣券、优惠券样式

效果图：

实现思路：

左边+划线+右边==使用信息+分割线+使用限制

整体底色：

.wrapper {
  margin: 0 auto;
  width: 100%;
  display: flex;
  background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1));
  /*实现颜色渐变 */
}
/*几个伪类化成的圆弧的样式以及位置（置于顶部）*/
.content:before, .tip:before, .split-line:before{
  border-radius: 0 0 16rpx 16rpx;
  top: 0;
}
.content:after, .tip:after, .split-line:after{
  border-radius: 16rpx 16rpx 0 0;
  bottom: 0;
}

左边：

/*前半部分样式*/
.content {
  position: relative;
  flex: 1;
  padding: 20rpx;
  text-align: left;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/*给前半部分加两个伪类，基本样式如下*/
.content:before, .content:after{
  content: '';
  position: absolute;
  width: 32rpx;
  height: 16rpx;
  background: #eee;
  left: -16rpx;
  z-index: 1;
}
.tip:before, .tip:after{
  content: '';
  position: absolute;
  width: 32rpx;
  height: 16rpx;
  background:#eee;
  right: -16rpx;
  z-index: 1;
}

分割线：

/*中间竖直虚线样式*/
.split-line {
  position: relative;
  flex: 0 0 0;
  margin: 0 10rpx 0 6rpx;
  border-left: 4rpx dashed #eee;   
}
/*给虚线加两个伪类，基本样式如下*/
.split-line:before, .split-line:after {
  content: '';
  position: absolute;
  width: 32rpx;
  height: 16rpx;
  background: #eee;
  left: -18rpx;
  z-index: 1;
}

右边：

/*后半部分样式*/
.tip {
  position