client-app/pages/guide/guide.vue

<template>
    <view class="hc-guide-swiper-page">
        <swiper class="hc-guide-swiper" @change="swiperChange">
            <swiper-item>
                <view class="hc-guide-item" :class="cur === 0 ? 'animation' : ''" :cur="cur">
                    <view class="title-box">
                        <view class="title">实时填报</view>
                        <view class="text">现场检测、测量、日志快速完成</view>
                    </view>
                    <view class="img-box">
                        <HcImg class="img-bg" src="/static/guide/g-1-2.png" width="321" height="180"/>
                        <HcImg class="img-1" src="/static/guide/g-1-1.png" width="184" height="218"/>
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="hc-guide-item" :class="cur === 1 ? 'animation' : ''" :cur="cur">
                    <view class="title-box">
                        <view class="title">实时预警</view>
                        <view class="text">消息任务实时待办提醒</view>
                    </view>
                    <view class="img-box">
                        <HcImg class="img-bg" src="/static/guide/g-2-2.png" width="291" height="290"/>
                        <HcImg class="img-2" src="/static/guide/g-2-1.png" width="130" height="239"/>
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="hc-guide-item" :class="cur === 2 ? 'animation' : ''" :cur="cur">
                    <view class="title-box">
                        <view class="title">移动审批</view>
                        <view class="text">随时随地签批报表资料</view>
                    </view>
                    <view class="img-box">
                        <HcImg class="img-bg" src="/static/guide/g-3-2.png" width="263" height="223"/>
                        <HcImg class="img-3" src="/static/guide/g-3-1.png" width="155" height="234"/>
                    </view>
                    <view class="hc-btn-box">
                        <button class="hc-btn" type="primary" @click="toLoginLink">开启工程事业</button>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view class="hc-swiper-dot" v-show="cur >= 0">
            <view class="dots" :class="cur === 0 ? 'cur' : ''"/>
            <view class="dots" :class="cur === 1 ? 'cur' : ''"/>
            <view class="dots" :class="cur === 2 ? 'cur' : ''"/>
        </view>
    </view>
</template>

<script setup>
import {ref} from "vue";
import {onLoad} from '@dcloudio/uni-app'

const cur = ref(-1);

onLoad(() => {
    uni.setNavigationBarTitle({
        title: '引导页'
    })
    cur.value = 0;
})

// 滑动切换
const swiperChange = ({detail}) => {
    cur.value = detail.current;
}

//跳转到登录页
const toLoginLink = () => {
    uni.redirectTo({
        url: '/pages/login/login'
    });
}
</script>

<style lang="scss">
@import "@/style/guide/guide.scss";
</style>