<template>
  <div class="nofinish-block" >
    <img class="bg" :src="previewImg2.preview1" alt="">
    <img class="bg" :src="previewImg2.preview2" alt="">
    <img class="bg" :src="previewImg2.preview3" alt="">
    <img class="bg" :src="previewImg2.preview4" alt="">
    <div class="pic pic1" @click="ImagePreviewF(0)"></div>
    <div class="pic pic2" @click="ImagePreviewF(1)"></div>
    <div class="pic pic3" @click="ImagePreviewF(2)"></div>
    <div class="pic pic4" @click="ImagePreviewF(3)"></div>
    <div class="pic pic5" @click="ImagePreviewF(4)"></div>
    <div class="pic pic6" @click="ImagePreviewF(5)"></div>
    <div class="pic pic7" @click="ImagePreviewF(6)"></div>
    <div class="pic pic8" @click="ImagePreviewF(7)"></div>
    <!-- <img class="pic pic1" :src="previewImg2.previewpic1" alt=""> -->
    <div class="btn" ref="btn" @click="toLink">
      <img :src="previewImg2.previewBtn" alt="">
    </div>
  </div>
</template>

<script>
  import { previewImg } from "../../util/imgUrl";
  import { ImagePreview } from 'vant';
  export default {
    name: "nofinishdia",
    mounted(){
      this.$sa.track('ViewPreview',{
      });
      // this.previewImg2 = previewImg
      // console.log(this.previewImg2)
      // this.ImagePreviewF()
      },
    data(){
      return{
        previewImg2:previewImg
      }
    },
    methods:{
      toLink(){
        this.$sa.quick('trackHeatMap',this.$refs.btn)
        window.location.href="https://appanqlfkth3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjowLCJyZXNvdXJjZV9pZCI6IiIsInByb2R1Y3RfaWQiOiJwXzViNGEyNDFjOTQ4NGVfZzg3ZVhOMUgiLCJhcHBfaWQiOiJhcHBhTlFMZmt0SDM3MTcifQ"
      },
      ImagePreviewF(index){
        ImagePreview({
        images: [
          this.previewImg2.previewpic1,
          this.previewImg2.previewpic2,
          this.previewImg2.previewpic3,
          this.previewImg2.previewpic6,
          this.previewImg2.previewpic5,
          this.previewImg2.previewpic7,
          this.previewImg2.previewpic8,
          this.previewImg2.previewpic9
          ],
          lazyLoad:true,
          startPosition:index
        });
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .nofinish-block{
    position: relative;
    .bg{width: 100%;vertical-align:top;}
    .pic{position: absolute;left: 30*@toVw;width:315 *@toVw ;}
    .pic1{top: 505 *@toVw;height:115 *@toVw ;}
    .pic2{top: 845 *@toVw;height:200 *@toVw ;}
    .pic3{top: 1295 *@toVw;height:200 *@toVw ;}
    .pic4{top: 1765 *@toVw;height:200 *@toVw ;}
    .pic5{top: 2335 *@toVw;height:200 *@toVw ;}
    .pic6{top: 2945 *@toVw;height:180 *@toVw ;}
    .pic7{top: 3325 *@toVw;height:160 *@toVw ;}
    .pic8{top: 3695 *@toVw;height:160 *@toVw ;}
    .btn{position: absolute;bottom: 48 *@toVw;text-align: center;left: 47 *@toVw;
    font-size: 12px;width: 284*@toVw;height:50 *@toVw;box-sizing: border-box;
    img{width: 100%;}
    }
  }
</style>