yicangzongtai_app_240321/components/code-elf-guide/code-elf-guide.vue

<template>
  <view class="content">
    <swiper class="swiper" :autoplay="autoplay" :duration="duration">
      <swiper-item v-for="(item, index) in list" :key="item.id">
        <view class="swiper-item">
          <image :src="item.cover" mode="aspectFill"></image>
        </view>
        <view class="jump-over" @tap="launchFlag()">{{s}}s {{jumpover}}</view>
        <view class="experience" v-if="index == list.length - 1" @tap="launchFlag()">{{experience}}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      },
      s: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        background: ['color1', 'color2', 'color3'],
        autoplay: false,
        duration: 500,
        jumpover: '跳过',
        experience: '立即体验',
      }
    },
    methods: {
      launchFlag: function() {
        /**
         * 向本地存储中设置launchFlag的值，即启动标识；
         */
        uni.setStorage({
          key: 'launchFlag',
          data: true,
        });
        uni.reLaunch({
          url: '/pages/index/news'
        });

      }
    }

  }
</script>
<style>
  page,
  .content {
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    padding: 0;
  }

  .swiper {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
  }

  .swiper-item {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column-reverse
  }
  
  .swiper-item image {
    width: 100%;
    height: 100% !important;
  }

  .swiper-item-img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .swiper-item-img image {
    width: 100%;
  }

  .uniapp-img {
    height: 20%;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .uniapp-img image {
    width: 40%;
  }

  .jump-over,
  .experience {
    position: absolute;
    height: 60upx;
    line-height: 60upx;
    padding: 0 40upx;
    border-radius: 30upx;
    font-size: 32upx;
    color: #fff;
    border: 1px solid #fff;
    z-index: 999;
  }

  .jump-over {
    right: 45upx;
    top: 100upx;
  }

  .experience {
    right: 50%;
    margin-right: -105upx;
    bottom: 5%;
  }
</style>