<template lang="html">
  <div class="effectVue">

    <div class="wrap" v-for="(n, i) in 6" :key="i" :class="[ `style${i + 1}`, isActive ? 'active' : '' ]" v-if="homeData.page === i + 1">
      <img class="a" :src="`static/img/${i + 1}/a.png`" alt="">
      <img class="b" :src="`static/img/${i + 1}/b.png`" alt="">
      <div class="back" @click="back()">
        <img class="backFalse" src="static/img/back_false.png" alt="">
        <img class="backTrue" src="static/img/back_true.png" alt="">
        <span>返回</span>
      </div>
      <div class="title">
        {{ pageTitle[homeData.page - 1] }}
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    homeData: {},
    pageTitle: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      isActive: false
    }
  },
  mounted () {
    setTimeout(() => {
      this.isActive = true
    }, 500)
  },
  methods: {
    back () {
      this.$set(this.homeData, 'page', 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.effectVue{
  .wrap{
    position: absolute;
    transform: scale(.8);
    &>img{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &.active{
      .a{
        transition: all 1s ease;
        opacity: .1;
      }
      .b{
        transition: all 1s ease 1s;
        transform: translate(-50%, -50%) scale(1.4);
        margin-top: 0px!important;
        margin-left: 0px!important;
      }
    }
    &.style1{
      .a{
        margin-top: 9px;
        margin-left: -1px;
      }
      .b{
        width: 193px;
        height: 223px;
        margin-top: 0px;
        margin-left: -1px;
      }
    }
    &.style2{
      .a{
        margin-top: -201px;
        margin-left: -1px;
      }
      .b{
        width: 45px;
        height: 289px;
        margin-top: 0px;
        margin-left: -1px;
      }
    }
    &.style3{
      .a{}
      .b{
        width: 289px;
        height: 289px;
        margin-top: 0px;
        margin-left: 0px;
      }
    }
    &.style4{
      .a{}
      .b{
        margin-top: -202px;
        margin-left: 0px;
      }
    }
    &.style5{
      .a{}
      .b{
        width: 289px;
        height: 289px;
        margin-top: 0px;
        margin-left: 0px;
      }
    }
    &.style6{
      .a{
        width: 301px;
        height: 301px;
        margin-top: 0px;
        margin-left: 0px;
      }
      .b{
        width: 209px;
        height: 209px;
        margin-top: 0px;
        margin-left: 0px;
      }
    }
    .back{
      position: absolute;
      color: #797C9D;
      height: 26px;
      line-height: 26px;
      font-size: 22px;
      white-space: nowrap;
      left: -120px;
      top: -227px;
      cursor: pointer;
      img{
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -2px;
      }
      .backFalse{}
      .backTrue{
        display: none;
      }
      &:hover{
        color: #3ECDFD;
        .backFalse{
          display: none;
        }
        .backTrue{
          display: inline-block;
        }
      }
    }
    .title{
      position: absolute;
      top: 220px;
      white-space: nowrap;
      transform: translateX(-50%);
      font-size: 30px;
      color: #3ECDFD;
    }
  }
}
</style>
