paper-shopkeeper-app/pages/start-page/index.vue

<template>
  <view class="">
    <view class="start-page">
      <view class="view-lineHight"><image class="topImage" src="../../static/imgs/start-page/bkTop.png" mode=""></image></view>
      <view class="page-jump" @click="jumpLogin"><text>跳过</text></view>
      <view class="page1">
        <swiper
          class="swiper"
          :current="current"
          @change="currentChange"
          @transition="transition"
          :style="{ height: '100vh' }"
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item v-for="(swiper, swiperIndex) in pageText" :key="swiperIndex">
            <view class="swiper-item uni-bg-red">
              <view class="page-top">
                <view class="page-text">
                  <text>{{ swiper.text }}</text>
                </view>
                <view class="page-title">
                  <text>{{ swiper.title }}</text>
                </view>
                <view class="page-subtitle">
                  <text>{{ swiper.subTitle }}</text>
                </view>
                <image class="" :src="swiper.image" mode=""></image>
              </view>
            </view>
          </swiper-item>
        </swiper>
        <view class="index-point">
          <view v-for="(items, index) in pageText" :key="index" :class="current === index ? 'indexs-check' : 'indexs-nocheck'"></view>
        </view>
        <view class="page-btn-class" v-if="current === pageText.length - 1"><button @click="jumpLogin" class="page-btn" type="default">立即开启</button></view>
      </view>

      <view class="view-lineHight"><image class="topImage bottom-image" src="../../static/imgs/start-page/bkBottom.png" mode=""></image></view>
    </view>
  </view>
</template>

<script>
import { go2 } from '@/utils/hook.js'
export default {
  data() {
    return {
      current: 0,
      mode: 'round',
      background: ['color1', 'color2', 'color3'],
      indicatorDots: false,
      autoplay: true,
      interval: 2500,
      duration: 500,
      pageText: [
        {
          text: '',
          title: '账期订单融资',
          subTitle: '给客户更便宜的价格，更大的销售额',
          image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/start-page-rz.png'
        },
        {
          text: '',
          title: '征信管理',
          subTitle: '具有客户更丰富多维的征信数据',
          image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/start-page-zx.png'
        },
        {
          text: '',
          title: '电子签约',
          subTitle: '避免交易过程可能的纠纷',
          image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/start-page-dzqy.png'
        },
        {
          text: '全新纸掌柜',
          title: '智能合同',
          subTitle: '实现合同同步的财务履约能力',
          image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/start-page-ht.png'
        }
      ]
    }
  },
  methods: {
    currentChange(item) {
      this.current = item.detail.current
    },
    transition(item) {
      if (this.current === this.pageText.length - 1) {
        this.autoplay = false
      }
    },
    jumpLogin() {
      uni.setStorageSync('hasLaunch', '1')
      go2('client')
    }
  }
}
</script>

<style lang="scss">
.start-page {
  .topImage {
    width: 100%;
    height: 72rpx;
  }
  .view-lineHight {
    line-height: 0rpx;
  }
  .bottom-image {
    position: absolute;
    bottom: 0rpx;
  }
  .page1 {
    background-color: #e7eeff;
    text-align: center;
  }
  .page-title {
    font-size: 100rpx;
    color: #2143af;
    text-align: center;
    font-weight: 600;
    margin: 32rpx 0rpx;
  }
  .page-text {
    font-size: 80rpx;
    color: #2143af;
    font-weight: 400;
  }
  .page-top {
    padding-top: 20%;
  }
  .page-subtitle {
    font-size: 32rpx;
    color: #333333;
    font-weight: 400;
    margin: 32rpx 0rpx;
  }
  .page-jump {
    position: absolute;
    padding: 12rpx;
    border: 2rpx solid #979797;
    border-radius: 38rpx;
    width: 122rpx;
    text-align: center;
    right: 54rpx;
    font-size: 24rpx;
    color: #333333;
    font-weight: 400;
    z-index: 9999;
  }
  .indexs-check {
    background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
    border-radius: 12rpx;
    width: 54rpx;
    height: 12rpx;
    margin-left: 10rpx;
  }
  .indexs-nocheck {
    width: 12rpx;
    height: 12rpx;
    background-color: #58c4fd;
    margin-left: 10rpx;
    border-radius: 10rpx;
  }
  .index-point {
    position: absolute;
    top: 70%;
    left: 40%;
    display: flex;
  }
  .page-btn {
    background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
    border-radius: 8rpx;
    font-size: 32rpx;
    color: #ffffff;
    font-weight: 500;
    width: 400rpx;
  }
  .page-btn-class {
    position: absolute;
    top: 73%;
    left: 0;
    right: 0;
  }
}
</style>