优惠券样式

<template>
    <div class="container">
        <div class="list">
      <ul>
        <li class="coupon" v-for="item in VipInfo.CouponList" :key="item.Id">
          <div class="coupon-left">
            <span>{{item.group_dec}}</span>
          </div>
          <div class="coupon-right">
            <span>{{item.ticket_no}}</span>
          </div>
        </li>
      </ul>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      VipInfo: {}
    }
  },
  mounted() {
    this.VipInfo = JSON.parse(window.sessionStorage.getItem('VipInfo'))
    console.log('优惠券[0]', this.VipInfo.CouponList[0])
  },
  methods: {
  }
}
</script>

<style scoped>
    .container {
        width: 100%;
        height: 100vh;
    background-color: #99CCFF;
    }
  ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
  }
  .list ul {
    padding: .5rem 0;
  }
    .list ul li.coupon {
    width: 80vw;
    height: 1.6rem;
    margin-bottom: .4rem;
    position: relative;
    left: 10vw;
    border-radius:.1rem;
    overflow:hidden;
  }
  .coupon-left{
    position: absolute;
    width: 30%;
    height:100%;
    float:left;
    background-color: #FFFFFF;
    color: #1A7DD0;
  }
  .coupon-left::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    height:50%;
    background:radial-gradient(circle at right top, #99CCFF .2rem, transparent .2rem, transparent .2rem);
  }
  .coupon-left::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right:0;
    height:50%;
    background:radial-gradient(circle at right bottom, #99CCFF .2rem, transparent .2rem, transparent .2rem)
  }
  .coupon-right{
    width: 50%;
    right:0;
    width:70%;
    height:100%;
    position: absolute;
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #3d3393 100%);
    color: #FFFFFF;
  }
  .coupon-right::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    height:50%;
    background:radial-gradient(circle at left top, #99CCFF .2rem, transparent .2rem, transparent .2rem)
  }
  .coupon-right::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right:0;
    height:50%;
    background:radial-gradient(circle at left bottom, #99CCFF .2rem, transparent .2rem, transparent .2rem)
  }
  .coupon-left span, .coupon-right span {
    display: block;
    line-height: 1.6rem;
    text-align: center;
    font-size: .4rem;
    font-weight: 700;
  }
</style>