SOURCE

new Vue({
  el:'#app',
  data:{
    coupon:[
      {
            money: 30,
            title: '百度20元优惠券',
            remark: '有效期至2018-02',
            merchat: '百度',
      }
    ]
  }
})

<div id ="app">
  <ul class="container">
    <li class="item" v-for="(item,index) of coupon" :key="index">
        <div class="money">￥{{item.money}}</div>
        <div class ="content">
          <div class="title">{{item.title}}</div>
          <div class="remark">{{item.remark}}</div>
          <div class="merchat">{{item.merchat}}</div>
        </div>
    </li>
  </ul>
</div>

#app{
  width:500px;
  height:500px;
  border:red solid 1px;
  padding:0;
  background:white;
  padding:10px;
}

.container {
  width: 100%;
  text-align: left;
  padding: 0px;
  .item {
    width: 100%;
    height: 90px;
    list-style-type: none;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.10);
    .money {
      width: 30%;
      height: 100%;
      float: left;
      text-align: center;
      background:radial-gradient(5px at top right,    #fff 5px,#e9c97f 5px, transparent),
				         radial-gradient(5px at bottom right, #fff 5px,#e9c97f 5px);
      
      font-family: DINPro-Bold;
      font-size: 40px;
      color: #ffffff;
      letter-spacing: 0;
      line-height: 90px;
      
    }
    .content {
      width: 70%;
      height: 100%;
      float: left;
      position:relative;      
      background:radial-gradient(5px at top left,    #fff 4px,rgb(239,239,239) 5px, transparent ),
				         radial-gradient(5px at bottom left, #fff 4px,rgb(239,239,239) 5px, transparent );
      
      .title{
        font-family:PingFangSC-Regular;
        color:#B5914F;
        font-size:14px;
        line-height:20px;
        margin:10px 0px 0px 10px;
        
      }
      .remark{
        font-family:PingFangSC-Regular;
        color:#999999;
        font-size:14px;
        line-height:17px;
        padding-top:10px;
        margin:0px 0px 0px 10px;
        
      }
      .merchat{
        height:28px;
        background: #E9C97F;
        border-radius:14px 0px 0px 0px;
        text-align:left;
        padding-left:14px;
        width:85px;
        position:absolute;
        right:0px;
        bottom:0px;
      }
    }
  }
}