<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>
![](https://img2018.cnblogs.com/i-beta/1483409/201912/1483409-20191217105625487-660676182.png)