211 lines
4.4 KiB
Vue
211 lines
4.4 KiB
Vue
<template>
|
||
<view class="guide-page">
|
||
<view class="status_bar"></view>
|
||
<!-- 引导内容滑动容器 -->
|
||
<swiper
|
||
class="guide-swiper"
|
||
:current="currentStep"
|
||
@change="handleSwiperChange"
|
||
:disable-scroll="false"
|
||
:indicator-dots="false"
|
||
:mode="mode"
|
||
>
|
||
<!-- 便捷服务 -->
|
||
<swiper-item>
|
||
<view class="guide-item">
|
||
<image class="guide-img" src="/static/引导1.png" ></image>
|
||
<view style="height: 200rpx;width: 100%;"></view>
|
||
<view class="guide-title">便捷服务</view>
|
||
<view class="guide-subtitle">报修、缴费、预约</view>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
<!-- 高效管理 -->
|
||
<swiper-item>
|
||
<view class="guide-item">
|
||
<image class="guide-img" src="/static/引导2.png" ></image>
|
||
<view class="guide-title">高效管理</view>
|
||
<view class="guide-subtitle">自动化流程和智能设备</view>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
<!--安全保障 -->
|
||
<swiper-item>
|
||
<view class="guide-item">
|
||
<image class="guide-img" src="/static/引导3.png"></image>
|
||
<view class="guide-title">安全保障</view>
|
||
<view class="guide-subtitle">智能巡检和智慧访客</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 进度点 -->
|
||
<view class="progress-dots">
|
||
<view class="dot" :class="{ active: currentStep === 0 }"></view>
|
||
<view class="dot" :class="{ active: currentStep === 1 }"></view>
|
||
<view class="dot" :class="{ active: currentStep === 2 }"></view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="guide-btn-wrap">
|
||
<button
|
||
class="guide-btn"
|
||
:class="{ primary: currentStep === 2 }"
|
||
@click="handleBtnClick"
|
||
>
|
||
{{ currentStep === 2 ? '立即体验' : '下一步' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
|
||
// ========== 响应式数据 ==========
|
||
// 当前引导步骤（0/1/2）
|
||
const currentStep = ref(0);
|
||
const mode = ref("default")
|
||
|
||
// ========== 方法 ==========
|
||
// 滑动swiper切换步骤
|
||
const handleSwiperChange = (e) => {
|
||
currentStep.value = e.detail.current;
|
||
};
|
||
|
||
// 点击按钮操作
|
||
const handleBtnClick = () => {
|
||
// 前两步：点击下一步切换
|
||
if (currentStep.value < 2) {
|
||
currentStep.value++;
|
||
} else {
|
||
// 立即体验，跳转首页
|
||
// 1. 记录引导已完成
|
||
uni.setStorageSync('hasShowGuide', true);
|
||
// 2. 跳转首页
|
||
uni.navigateTo({
|
||
url:"/pages/loginSub/pwd-login"
|
||
})
|
||
// uni.switchTab({
|
||
// url: '/pages/index/index'
|
||
// });
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.guide-page {
|
||
width: 100%;
|
||
height: 100vh;
|
||
/* background-color: #f8f9ff; */
|
||
background: linear-gradient(to bottom, #E2F0FF, #F6FAFF);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 120rpx 40rpx 80rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.status_bar {
|
||
height: 115px;
|
||
width: 100%;
|
||
}
|
||
/* 滑动容器 */
|
||
.guide-swiper {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 单个引导项 */
|
||
.guide-item {
|
||
width: 360px;
|
||
height: 360px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
.guide-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
|
||
/* 引导标题 */
|
||
.guide-title {
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
/* 引导副标题 */
|
||
.guide-subtitle {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 进度点容器 */
|
||
.progress-dots {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
/* 单个进度点 */
|
||
.dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 8rpx;
|
||
background-color: #ddd;
|
||
margin: 0 8rpx;
|
||
}
|
||
|
||
/* 激活的进度点 */
|
||
.dot.active {
|
||
background-color: #007aff;
|
||
width: 40rpx;
|
||
}
|
||
|
||
/* 按钮容器 */
|
||
.guide-btn-wrap {
|
||
width: 80%;
|
||
}
|
||
|
||
/* 引导按钮 */
|
||
.guide-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
padding: 0;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 默认按钮样式（下一步） */
|
||
.guide-btn:not(.primary) {
|
||
background-color: #fff;
|
||
color: #007aff;
|
||
border: 2rpx solid #007aff;
|
||
}
|
||
|
||
/* 主按钮样式（立即体验） */
|
||
.guide-btn.primary {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
|
||
/* 按钮禁用态（可选） */
|
||
.guide-btn:disabled {
|
||
background-color: #ccc;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
</style> |