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

效果图：

实现思路：

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

整体底色：

.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: relative;
  padding:  50rpx 30rpx;
  flex: 0 0 200rpx;
  text-align: center;
}

补充其他功能：

tabs切换+点击分享+静态数据

最终代码，为了省时，直接拿去复用

wxml:

<view class="container coupons">
  <view class="coupons-header">
    <block wx:for="{{tabs}}" wx:key="id">
        <view class="tabs-item {{currentTabsIndex==index?'selected':''}}" bindtap="onTabsItemTap" data-index="{{index}}">
            {{item}}
        </view>
    </block>
    <view class="tips-box tips-bag">
      <text class="tips-title" style="color:#fff;">1</text>
    </view>
  </view>
  <view class="coupons-body">
    <view class="TabsClassContent" hidden="{{ currentTabsIndex!=0 }}">
      <block wx:for="{{ [0, 1] }}" wx:key="id">
        <view class="app">
          <view class="wrapper">
            <view class="content">
              <view class="coupon-top">
                <text>¥50.00</text>
              </view>
              <view class="coupon-middle">
                店名：八中撒码头
              </view>
              <view class="coupon-bottom">
                有效期：2019.12.23-2020.01.23
              </view>
            </view>
            <view class="split-line"></view>
            <view class="tip">
              <view class="conditions">
                满500元使用
              </view>
              <button class="useNow" size="mini" bindtap="">立即使用</button>
            </view>
            <label><view class="share-button">
              <image style="width:50rpx;height:50rpx;" src="../../images/icon/buttonShare.png"></image>
              <button open-type="share" data-id="{{item.id}}" class="shareButton"></button>
            </view></label>                           
          </view>
        </view>  
      </block>
    </view>
    <view class="TabsClassContent" hidden="{{ currentTabsIndex!=1 }}">
    </view>
    <view class="TabsClassContent" hidden="{{ currentTabsIndex!=2 }}">
      <view class="app">
        <view class="wrapper useless">
          <image class="overTime" src="../../images/icon/overTime.png"></image>
          <view class="content">
            <view class="coupon-top">
              <text>¥50.00</text>
            </view>
            <view class="coupon-middle">
              店名：八中撒码头
            </view>
            <view class="coupon-bottom">
              有效期：2019.12.23-2020.01.23
            </view>
          </view>
          <view class="split-line"></view>
          <view class="tip">
            <view class="conditions">
              满500元使用
            </view>
            <button class="useNow" size="mini" bindtap="">已作废</button>
          </view>
        </view>
      </view>  
    </view>        
  </view>
</view>

css:

.coupons-header{
  display: flex;
  line-height: 80rpx;
}

.coupon-top text{
  font-size: 50rpx;
  color: #fff;
}

.coupon-middle{
  color: #fff;
}

.coupon-bottom{
  color: #000;
  font-size: 24rpx;
}

.tips-bag{
  right: 30rpx;
}

.share-button{
  position: relative;
  right: 10rpx;
  top: 10rpx;
}

.shareButton{
  font-size: 24rpx;
  background-color: #ff7440;
  color: #fff;
  width: 100rpx;
  height: 100rpx;
  display: none;
}

/* 优惠券 */
/* 优惠券样式 */
.app {
  padding: 10rpx; 
  background: #eee;
  margin-bottom: 5rpx;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  display: flex;
  background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1));
  /*实现颜色渐变 */
}

/*前半部分样式*/
.content {
  position: relative;
  flex: 1;
  padding: 20rpx;
  text-align: left;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/*后半部分样式*/
.tip {
  position: relative;
  padding:  50rpx 30rpx;
  flex: 0 0 200rpx;
  text-align: center;
}

/*中间竖直虚线样式*/
.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;
}

/*给前半部分加两个伪类，基本样式如下*/
.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;
}

/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/
.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;
}

.money {
  font-size: 50rpx;
  color: #eee;
}

.money text {
  font-size: 50rpx;
  padding-right: 20rpx; 
}

.title {
  color: #eee;
  font-size: 30rpx;
  display: flex;
  width: 100rpx;
}

.conditions {
  color: #eee;
  font-size: 30rpx;
  padding:15rpx;
}

.useNow {
  color: rgba(254,50,103,1);
  font-size: 30rpx;
  border-radius: 50rpx;
  border-style: none;
}

.useless{
  background: #C0C0C0;
}

.overTime{
  position: absolute;
  right: 30rpx;
  top: 100rpx;
  width: 100rpx;
  height: 100rpx;
}

/* 数量指示点 */
.tips-box{
  position: absolute;
  right: 80rpx;
  top: 15rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: red;
}

.tips-title{
  position: relative;
  left: 17rpx;
  bottom: 17rpx;
}

und: #C0C0C0;
}

.overTime{
position: absolute;
right: 30rpx;
top: 100rpx;
width: 100rpx;
height: 100rpx;
}

/* 数量指示点 */
.tips-box{
position: absolute;
right: 80rpx;
top: 15rpx;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: red;
}

.tips-title{
position: relative;
left: 17rpx;
bottom: 17rpx;
}