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

81
property-uniapp-project/pageSubPack/activity-list/activityList.vue
View File

@@ -1,9 +1,9 @@
<template>
<view class="container">
<view class="status_bar"></view>
<view class="status-bar"></view>
<!-- 顶部标题栏 固定 -->
<view class="top-bar">
<uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false"
<uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false" :statusBar="false"
@clickLeft="narBack" />
</view>
@@ -11,9 +11,8 @@
<scroll-view class="scroll-container" scroll-y="true" @scrolltolower="loadMoreData"
:lower-threshold="100">
<!-- 顶部图片 -->
<view class="topImg">
<image src="http://47.104.199.163:9090/images/home/banner.png"
style="width: 100%;height:100%;"></image>
<view class="top-img">
<image class="banner-img" src="http://47.104.199.163:9090/images/home/banner.png" mode="aspectFill"></image>
</view>
<!-- 选项卡 -->
@@ -66,8 +65,7 @@
<up-row justify="space-between" customStyle="margin-bottom: 10px">
<up-col span="4">
<view class="info-image-left">
<image :src="activity.coverImage"
style="width: 100%;height: 100%;"></image>
<image :src="activity.coverImage" style="width: 100%;height: 100%;"></image>
</view>
</up-col>
<up-col span="8">
@@ -336,9 +334,12 @@ watch(() => myFilter.value, () => {
padding: 0;
}
.status_bar {
/* 状态栏 - 自适应设备状态栏高度 */
.status-bar {
/* height: var(--status-bar-height); */
height: 46px;
width: 100%;
flex-shrink: 0;
}
/* 顶部标题 固定 */
@@ -353,35 +354,42 @@ watch(() => myFilter.value, () => {
flex: 1;
width: 100%;
overflow-y: auto;
padding: 0 40rpx;
padding: 0 30rpx;
box-sizing: border-box;
}
.topImg {
/* 顶部图片 */
.top-img {
width: 100%;
height: 280rpx;
margin: 20rpx 0;
}
.banner-img {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
/* 顶部选项卡 */
.tabs-container {
display: flex;
top: 0;
z-index: 10;
margin-bottom: 20rpx
margin-bottom: 20rpx;
}
.tab-item {
flex: 1;
display: flex;
text-align: center;
padding: 20rpx 0;
padding: 20rpx 32rpx;
font-size: 32rpx;
color: #666;
position: relative;
}
.tab-item.active {
color: #007AFF;
color: #2F77FD;
font-weight: 500;
}
@@ -391,8 +399,9 @@ watch(() => myFilter.value, () => {
left: 50%;
transform: translateX(-50%);
width: 120rpx;
height: 6rpx;
background-color: #007AFF;
height: 8rpx;
background: linear-gradient(to bottom, #2F77FD, #CEDFFF);
/* background-color: #2F77FD; */
border-radius: 4rpx;
}
@@ -400,7 +409,7 @@ watch(() => myFilter.value, () => {
.filter-container {
background-color: #fff;
padding: 20rpx 0;
border-bottom: 1px solid #eee;
border-bottom: 1rpx solid #eee;
}
.filter-scroll {
@@ -410,7 +419,7 @@ watch(() => myFilter.value, () => {
.filter-buttons {
display: inline-flex;
padding: 0 30rpx;
padding: 0 10rpx;
}
.filter-btn {
@@ -421,7 +430,9 @@ watch(() => myFilter.value, () => {
color: #666;
background-color: #f8f8f8;
border-radius: 25rpx;
border: 1px solid #eee;
border: 1rpx solid #eee;
white-space: nowrap;
flex-shrink: 0;
}
.filter-btn.active {
@@ -441,9 +452,9 @@ watch(() => myFilter.value, () => {
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
/* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
position: relative;
border: 1px solid #e1e1e1;
border: 1rpx solid #e1e1e1;
}
/* 活动状态标签 */
@@ -471,6 +482,7 @@ watch(() => myFilter.value, () => {
font-size: 22rpx;
border-radius: 20rpx;
z-index: 1;
background-color: rgba(0, 122, 255, 0.08);
}
.signed-badge text {
@@ -479,9 +491,10 @@ watch(() => myFilter.value, () => {
/* 活动信息 */
.activity-info {
margin-top: 10rpx;
padding-top: 50rpx;
}
/* 活动信息 */
.info-image-left {
width: 170rpx;
height: 220rpx;
@@ -491,15 +504,19 @@ watch(() => myFilter.value, () => {
font-size: 30rpx;
font-weight: 500;
color: #222;
margin-bottom: 30rpx;
margin-bottom: 20rpx;
line-height: 1.4;
padding-right: 100rpx;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.activity-detail {
display: flex;
align-items: flex-start;
margin-bottom: 20rpx;
margin-bottom: 16rpx;
color: #999;
font-size: 24rpx;
line-height: 1.4;
@@ -520,6 +537,7 @@ watch(() => myFilter.value, () => {
flex: 1;
font-size: 20rpx;
}
.detail-text-address {
flex: 1;
font-size: 22rpx;
@@ -527,18 +545,19 @@ watch(() => myFilter.value, () => {
/* 操作按钮 */
.action-buttons {
margin-top: 30rpx;
margin-top: 20rpx;
display: flex;
justify-content: flex-end;
}
.action-btn {
padding: 0px 26rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 22rpx;
border-radius: 10rpx;
padding: 0 26rpx;
height: 56rpx;
line-height: 56rpx;
font-size: 24rpx;
border-radius: 28rpx;
margin: 0;
min-width: 140rpx;
}
.signup-btn {

14
property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue
View File

@@ -452,15 +452,17 @@ const showToastMessage = (message) => {
<style scoped>
/* 页面容器 */
.container {
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom left, #E2F0FF 0%, #ffffff 50%)
background: linear-gradient(to bottom left, #E2F0FF 0%, #ffffff 50%);
overflow: hidden;
}
/* 状态栏 */
.status_bar {
height: 46px;
width: 100%;
flex-shrink: 0;
}
/* 顶部导航栏 */
@@ -473,6 +475,7 @@ const showToastMessage = (message) => {
position: sticky;
top: 44px;
z-index: 100;
flex-shrink: 0;
}
.nav-left {
@@ -504,7 +507,6 @@ const showToastMessage = (message) => {
width: 100%;
box-sizing: border-box;
overflow-y: auto;
margin-bottom: 120rpx;
}
/* 选项卡 */
@@ -702,14 +704,10 @@ const showToastMessage = (message) => {
/* 底部操作栏 */
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 40rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
z-index: 100;
flex-shrink: 0;
}
.action-btn {

9
property-uniapp-project/pageSubPack/notice-list/oneClickOpen.vue
View File

@@ -106,7 +106,7 @@ const getAccessControl = async () =>{
doorList.value = []
uni.showToast({
title:err.msg || '查询失败',
icon:"error"
icon:"none"
})
}
@@ -144,7 +144,7 @@ const getAccessOpenData = async () =>{
}catch(err){
uni.showToast({
title: err.msg || '开门失败',
icon:"error"
icon:"none"
})
}
}
@@ -163,8 +163,11 @@ onLoad(() =>{
box-sizing: border-box;
}
.status_bar {
height: 32px;
height: var(--status-bar-height);
width: 100%;
flex-shrink: 0;
/* height: 32px;
width: 100%; */
}
/* 顶部标题 */
.top-bar {

2
property-uniapp-project/pageSubPack/online-repair/onlineRepair.vue
View File

@@ -258,7 +258,7 @@ onUnload(() =>{
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: 600;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

4
property-uniapp-project/pageSubPack/visitor/visitor-list.vue
View File

@@ -125,8 +125,8 @@ const fetchVisitorList = async () => {
visitorList.value = mapData(res.data || [])
// console.log('222222',visitorList.value)
} catch (e) {
console.error('获取访客列表失败:', e)
} catch (err) {
uni.showToast({title:err.msg,icon:'none'})
}
}

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

@@ -1,6 +1,6 @@
<template>
<view class="guide-page">
<view class="status_bar"></view>
<view class="status-bar"></view>
<!-- 引导内容滑动容器 -->
<swiper
class="guide-swiper"
@@ -14,36 +14,39 @@
<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>
<image src="https://wuyeadmin.bugtc.com/images/guide1.png" mode="aspectFit" class="img-content"></image>
</view>
<view style="height: 200rpx;width: 100%;"></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>
<image src="https://wuyeadmin.bugtc.com/images/guide2.png" mode="aspectFit" class="img-content"></image>
</view>
<view style="height: 200rpx;width: 100%;"></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>
<image src="https://wuyeadmin.bugtc.com/images/guide3.png" mode="aspectFit" class="img-content"></image>
</view>
<view style="height: 200rpx;width: 100%;"></view>
<view class="guide-text">
<view class="guide-title">安全保障</view>
<view class="guide-subtitle">智能巡检和智慧访客</view>
</view>
</view>
</swiper-item>
</swiper>
@@ -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;
/* 状态栏 - 自适应设备状态栏高度 */
.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;
}
/* 引导按钮 */