<template>
    <div class="gift-box">
        <div class="gift-title">{{textContent.img_title}}</div>
        <div class="gift-img"><img :src="textContent.img" alt=""></div>
        <div class="gift-state">
            <div class="gift-state-title">{{textContent.desc_title}}</div>
            <div class="gift-state-text">{{textContent.desc}}</div>
        </div>
        <div class="clone-box" @click="clone()">
            <span>返回</span> 
        </div>
    </div>
</template>

<script>
export default {
   data() {
       return {
          textContent:{}
       };
   },
   watch: {
   },
   computed: {},
   methods: {
       coupon(){
            this.$api.postCouponAPI().then(res => {
                console.log(res)
                if(res.data.errno == 10000){
                   this.textContent = res.data.data
                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$toast.fail(res.data.errmsg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        clone(){
            this.$router.push(
                {path: '/more'},
            )
        },
   },
   created() {
   },
    mounted(){
        this.coupon()
    },
}
</script>
<style lang="scss">
.gift-box{
    display: block;
    background: url('../assets/BG.png');
    background-repeat: no-repeat;
    background-size:100% calc(100% + 55px);
    width: 100%;
    .clone-box{
        height: 72px;
        position: fixed;
        z-index: 9;
        bottom: 497px;
        right: 0;
        width: 131px;
        background-image: url("../assets/fanhui.png");
        background-size: 100% 100%;
        span{
            display: block;
            width: 131px;
            text-align: center;
            font-size: 32px;
            font-weight: 800;
            color: #000000;
            height: 72px;
            line-height: 72px;
        }
    }
    .gift-title{
        padding-top: 59px;
        padding-bottom: 40px;
        text-align: center;
        font-size: 40px;
        font-weight: 800;
        color: #FFFFFF;
        letter-spacing: 3px;
    }
    .gift-img{
        margin: 0 auto;
        width: 600px;
        img{
            width: 100%;
        }
    }
    .gift-state{
        margin: 0 auto;
        width: 599px;
        .gift-state-title{
            text-align: center;
            padding-top: 46px;
            font-size: 40px;
            font-weight: 800;
            color: #FFFFFF;
            letter-spacing: 3px;
        }
        .gift-state-text{
            text-align: left;
            padding-top: 36px;
            padding-bottom: 114px;
            font-size: 24px;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 36px;
            letter-spacing: 2px;
        }
    }
}

</style>