colmo-h5/src/pages/Test.vue

<template>
  <div class="index-box">
    <img :src="bgImage" class="bg-image" />
    <!-- 透明返回按钮 -->
    <div style=" position: absolute;width: 55px;height: 52px;" @click="$router.go(-1)"></div>
    <!-- 透明返回按钮 -->
    <div class="body-swiper">
      <div class="slider-wrapper">
        <!-- 左滑动 -->
        <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 :list="list"></index-image>
        </div>
        <!-- swiper -->

        <!-- 右滑动 -->
        <div class="body-swiper-right">
          <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/3右滑.png" />
        </div>
      </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 {
  props: {
    typePages: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      images: {
        yushi: {
          bgImage: require('../../public/yushi-image/1.jpg'),
          list: [
            require('../../public/yushi-image/2.png'),
            require('../../public/yushi-image/3.png'),
            require('../../public/yushi-image/4.png')
          ]
        },
        yimao: {
          bgImage: require('../../public/yimao-image/1.jpg'),
          list: [
            require('../../public/yimao-image/2.png'),
            require('../../public/yimao-image/3.png'),
            require('../../public/yimao-image/4.png')
          ]
        },
        keting: {
          bgImage: require('../../public/keting-image/1.jpg'),
          list: [
            require('../../public/keting-image/2.png'),
            require('../../public/keting-image/3.png'),
            require('../../public/keting-image/4.png'),
            require('../../public/keting-image/5.png')
          ]
        },
        yangtai: {
          bgImage: require('../../public/yangtai-image/1.jpg'),
          list: [
            require('../../public/yangtai-image/2.png'),
            require('../../public/yangtai-image/3.png'),
            require('../../public/yangtai-image/4.png'),
            require('../../public/yangtai-image/5.png')
          ]
        }
      },
      songList: {},
      swiperList: []
    }
  },
  computed: {
    bgImage() {
      if (!this.$route.params.types) return ''
      return this.images[this.$route.params.types].bgImage
    },
    list() {
      if (!this.$route.params.types) return []
      return this.images[this.$route.params.types].list
    }
  },
  components: {
    IndexImage: () => import('./IndexImage.vue')
  }
}
</script>

<style lang="scss" scoped>
.index-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  .bg-image {
    width: 100%;
    height: 100vh;
    position: absolute;
  }
  .body-swiper {
    position: absolute;
    width: 100vw;
    top: 47.5vh;
    display: flex;

    .slider-wrapper {
      width: 100%;
      position: relative;
    }

    &-left {
      left: 1vw;
    }

    &-right {
      right: 1vw;
    }

    &-left,
    &-right {
      position: absolute;
      display: flex;
      align-items: center;
      margin: 0 auto;
      z-index: 10;
      top: -2vh;
      height: 100%;
      width: 6vw;
    }
    &-middle {
      width: 100%;
    }
  }
  .button-img {
    position: absolute;
    width: 45vw;
    left: 27.5vw;
    top: 39vh;
  }
}
</style>