<template>
  <div class="index-box">
    <img :src="songList.bgImage" class="bg-image" />
    <!-- 透明返回按钮 -->
    <div style=" position: absolute;width: 55px;height: 52px;" @click="$router.go(-1)"></div>
    <!-- 透明返回按钮 -->
    <div class="body-swiper">
      <!-- 左滑动 -->
      <div class="body-swiper-left">
        <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/2左滑.png" />
      </div>

      <!-- swiper -->
      <div class="body-swiper-middle">
        <index-image :typeImage="swiperList"></index-image>
      </div>
      <!-- swiper -->

      <!-- 右滑动 -->
      <div class="body-swiper-right">
        <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/3右滑.png" />
      </div>
      <div class="button-img" @click="() => this.$router.push('/signup')">
        <img style="width:100%;" src="../assets/buttonImage/1即刻尊享.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songList: {},
      swiperList: {}
    }
  },
  props: {
    typePages: {
      type: Object
      // default: () => ({})
    }
  },
  components: {
    IndexImage: () => import('./IndexImage.vue')
  },
  mounted() {
    this.$nextTick(function () {
      console.log(this.$route.params.types)
      var list = decodeURIComponent(this.$route.params.types)
      this.songList = JSON.parse(list)
      this.swiperList = this.songList.swiper
    })
  }
}
</script>

<style lang="scss" scoped>
.index-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  // justify-content: center;
  .bg-image {
    width: 100%;
    position: absolute;
  }
  .body-swiper {
    position: absolute;
    width: 100%;
    top: 335px;
    height: 50vh;
    display: flex;
    &-left,
    &-right {
      display: flex;
      align-items: center;
      margin: 0 auto;
      height: 44vh;
      z-index: 2;
    }
    &-middle {
      width: 84%;
      overflow: hidden;
      position: relative;
      top: 20px;
    }
    .button-img {
      width: 40%;
      position: absolute;
      bottom: -5vh;
      left: 29vw;
    }
  }
}
</style>