zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改引导页、活动列表自适应样式

Browse Source
This commit is contained in:
zhouyanli
2026-05-18 17:48:43 +08:00
parent 8ee170f78b
commit aa5453c0be
6 changed files with 285 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
property-uniapp-project/pages/navigation/navigation.vue
View File

@@ -1,54 +1,57 @@
<template>
<view class="guide-page">
<view class="status_bar"></view>
<view class="status-bar"></view>
<!-- 引导内容滑动容器 -->
<swiper
class="guide-swiper"
:current="currentStep"
<swiper
class="guide-swiper"
:current="currentStep"
@change="handleSwiperChange"
:disable-scroll="false"
:indicator-dots="false"
:mode="mode"
:mode="mode"
>
<!-- 便捷服务 -->
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide1.png" style="width: 100%;height: 100%;"></image>
</view>
<view style="height: 200rpx;width: 100%;"></view>
<view class="guide-title">便捷服务</view>
<view class="guide-subtitle">报修、缴费、预约</view>
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide1.png" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">便捷服务</view>
<view class="guide-subtitle">报修、缴费、预约</view>
</view>
</view>
</swiper-item>
<!-- 高效管理 -->
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide2.png" style="width: 100%;height: 100%;"></image>
</view>
<view style="height: 200rpx;width: 100%;"></view>
<view class="guide-title">高效管理</view>
<view class="guide-subtitle">自动化流程和智能设备</view>
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide2.png" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">高效管理</view>
<view class="guide-subtitle">自动化流程和智能设备</view>
</view>
</view>
</swiper-item>
<!--安全保障 -->
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide3.png" style="width: 100%;height: 100%;"></image>
</view>
<view style="height: 200rpx;width: 100%;"></view>
<view class="guide-title">安全保障</view>
<view class="guide-subtitle">智能巡检和智慧访客</view>
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide3.png" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">安全保障</view>
<view class="guide-subtitle">智能巡检和智慧访客</view>
</view>
</view>
</swiper-item>
</swiper>
<!-- 进度点 -->
<view class="progress-dots">
<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>
@@ -56,8 +59,8 @@
<!-- 操作按钮 -->
<view class="guide-btn-wrap">
<button
class="guide-btn"
<button
class="guide-btn"
:class="{ primary: currentStep === 2 }"
@click="handleBtnClick"
>
@@ -91,9 +94,9 @@ const handleBtnClick = () => {
// 1. 记录引导已完成
uni.setStorageSync('hasShowGuide', true);
// 2. 跳转首页
uni.navigateTo({
url:"/pageSubPack/loginSub/pwd-login"
})
uni.navigateTo({
url: "/pageSubPack/loginSub/pwd-login"
})
// uni.switchTab({
// url: '/pages/index/index'
// });
@@ -106,40 +109,61 @@ const handleBtnClick = () => {
.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: 148px;
width: 100%;
}
/* 滑动容器 */
/* 状态栏 - 自适应设备状态栏高度 */
.status-bar {
height: var(--status-bar-height);
width: 100%;
flex-shrink: 0;
}
/* 滑动容器 */
.guide-swiper {
flex: 1;
width: 100%;
}
/* 单个引导项 */
/* 单个引导项 - 全屏自适应 */
.guide-item {
width: 360px;
height: 480px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 60rpx;
box-sizing: border-box;
}
/* 图片区域 - 自适应 */
.guide-img {
width: 80%;
max-width: 600rpx;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
}
.img-content {
width: 100%;
height: 50%;
margin-bottom: 80rpx;
height: 100%;
max-height: 50vh;
}
/* 文字区域 */
.guide-text {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40rpx;
}
/* 引导标题 */
@@ -161,7 +185,8 @@ const handleBtnClick = () => {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 60rpx;
margin-bottom: 40rpx;
flex-shrink: 0;
}
/* 单个进度点 */
@@ -171,6 +196,7 @@ const handleBtnClick = () => {
border-radius: 8rpx;
background-color: #ddd;
margin: 0 8rpx;
transition: all 0.3s ease;
}
/* 激活的进度点 */
@@ -182,6 +208,9 @@ const handleBtnClick = () => {
/* 按钮容器 */
.guide-btn-wrap {
width: 80%;
max-width: 600rpx;
margin-bottom: 80rpx;
flex-shrink: 0;
}
/* 引导按钮 */
@@ -216,4 +245,4 @@ const handleBtnClick = () => {
color: #fff;
border: none;
}
</style>
</style>