<template>
  <div class="wrapper">
      <div class="bg-box">
        <img style="width:100%;height:100%" src="@/assets/BG.png" alt="">
      </div>
      <ticket></ticket>

      <div class="nav">
          <img src="@/assets/gongxi.png" alt="">
      </div>
      <div v-if="num==1">
        <div class="zhan-box">
            <img class="zhanshi" src="@/assets/panzi.png" alt="">
            <div class="new-box">
                <img class="new" src="@/assets/SSR.png" alt="">
            </div>
            <div class="new-box1">
                <img class="new" src="@/assets/SR.png" alt="">
            </div>
            <div class="new-box2">
                <img class="new" src="@/assets/N.png" alt="">
            </div>
            <div class="new-box2">
                <img class="new" src="@/assets/R.png" alt="">
            </div>
        </div>
        <div class="goods-name">物品名称</div>
      </div>
      <div class="zhan-box1">
          <div v-for="i in 5" class="all" :key="i">
            <img class="zhanshi" src="@/assets/xiaopanzi.png" alt="">
            <div class="goods-name1">物品名称</div>    
          </div>
          

      </div>

      <div class="btn-box">
          <div class="left-box" @click="goOpen(1)">
              <img src="@/assets/left-btn.png" alt="">
              <span>再开<br />1个礼盒</span>
          </div>
          <div class="right-box" @click="goOpen(5)">
              <img src="@/assets/right-btn.png" alt="">
              <span>再开<br />5个礼盒</span>
          </div>
      </div>
      <div class="long-box">
          <img src="@/assets/long-btn.png" alt="">
          <span>我的礼券</span>
      </div>
      <van-popup v-model="newShow" class="new-pop">
        <div class="content">
            换装教程
            <div class="new-img">
                <img src="" alt="">
            </div>
        </div>
        <div class="new-clone"><img src="@/assets/new-clone.png" alt="" @click="newClone()"></div>
      </van-popup>
      
  </div>
</template>

<script>
import overlay from '@/components/Overlay.vue'
import ticket from '@/components/ticket.vue'
export default {
   components: {
       overlay,
       ticket
   },
   props: {},
   data() {
       return {
           show:false,
           newShow:false,
           saveLogoStatus:{},
       };
   },
   watch: {
   },
   computed: {},
   methods: {
       goOpen(num){
           this.$router.push({
                path:'/giftBox',
                // query: {id:'1'}
            })
       },
       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       },
       newPop(){
           this.newShow = true
       },
       newClone(){
           this.newShow = false
       }
   },
   created() {},
   mounted() {
        this.saveLogoStatus = window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')) : {}

   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    height: 100%;
    position: relative;
    .bg-box{
        position: absolute;
    }
    .nav{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 169px;
        img{
            display: block;
            margin: 0 auto;
            width: 627px;
            left: 0;
        }
    }
    .zhan-box{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 276px;
        .zhanshi{
            width: 540px;
            display: block;
            margin: 0 auto;
        }
        .new-box{
            right: 124px;
            position: absolute;
            z-index: 1;
            bottom: 17px;
            .new{
                width: 249px;
            }
        }
        .new-box1{
            z-index: 2;
            right: 165px;
            position: absolute;
            bottom: 17px;
            .new{
                width: 167px;
            }
        }
        .new-box2{
            right: 206px;
            position: absolute;
            z-index: 3;
            bottom: 17px;
            .new{
                width: 85px;
            }
        }
        
    }
    .zhan-box1{
        position: absolute;
        z-index: 1;
        top: 340px;
        // padding: 0 93px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .all:first-child{
            margin-left: 0;
        }
        .all{
            margin-left: 12px;
        }
        .zhanshi{
            width: 180px;
            display: block;
        }
        .goods-name1{
            font-size: 24px;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            padding-top: 10px;
        }
    }
    .goods-name{
        position: absolute;
        top: 830px;
        z-index: 1;
        font-size: 36px;
        font-weight: 500;
        color: #FFFFFF;
        width: 100%;
        text-align: center;
    }
    .btn-box{
        position: absolute;
        display: flex;
        justify-content: space-between;
        padding: 0 60px;
        top: 923px;
        .left-box{
            width: 300px;
            padding-right: 20px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 22px;
                font-size: 36px;
                font-weight: 800;
                color: #FFFFFF;
            }
        }
        .right-box{
            width: 300px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 22px;
                font-size: 36px;
                font-weight: 800;
                color: #000000;
            }
        }
    }
    .long-box{
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        width: 100%;
        top: 1114px;
        img{
            width: 460px;
            display: block;
            margin: 0 auto;
        }
        span{
            position: absolute;
            display: block;
            margin: 23px auto;
            text-align: center;
            font-size: 36px;
            font-weight: 800;
            color: #FFFFFF;
        }
    }
    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 50px;
            padding-bottom: 39px;
            width: 640px;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            font-weight: 800;
            color: #000000;
            .new-img{
                height: 660px;
                overflow: auto;
                margin: 39px auto;
                img{
                    width: 552px;
                    height: 660px;
                    background: #BFBFBF;
                }
            }
        }
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
        }
    }
}
</style>