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-19 10:26:15 +08:00
parent aa5453c0be
commit b7d1037b35
5 changed files with 65 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
property-uniapp-project/pageSubPack/notice-list/noticeList.vue
View File

@@ -46,7 +46,6 @@
<view class="no-more" v-if="noMoreData && noticeList.length">没有更多通知了</view> <view class="no-more" v-if="noMoreData && noticeList.length">没有更多通知了</view>
<view class="empty" v-if="noticeList.length === 0 && !loading"> <view class="empty" v-if="noticeList.length === 0 && !loading">
暂无通知 暂无通知
<!-- <button class="refresh-btn" @click="loadNotices">刷新试试</button> -->
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@@ -207,6 +206,7 @@ page {
text-align: center; text-align: center;
padding: 20rpx; padding: 20rpx;
color: #999; color: #999;
font-size: 24rpx;
} }
.empty { .empty {
text-align: center; text-align: center;

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

@@ -166,8 +166,6 @@ onLoad(() =>{
height: var(--status-bar-height); height: var(--status-bar-height);
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
/* height: 32px;
width: 100%; */
} }
/* 顶部标题 */ /* 顶部标题 */
.top-bar { .top-bar {

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

@@ -230,8 +230,9 @@ onUnload(() =>{
padding: 0 40rpx; padding: 0 40rpx;
} }
.status_bar { .status_bar {
height: 32px; height: var(--status-bar-height);
width: 100%; width: 100%;
flex-shrink: 0;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.nav-bar { .nav-bar {

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

@@ -176,8 +176,10 @@ const addInvitation = () => {
padding: 0 40rpx; padding: 0 40rpx;
} }
.status_bar { .status_bar {
height: 32px; height: var(--status-bar-height);
/* height: 32px; */
width: 100%; width: 100%;
flex-shrink: 0;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.nav-bar { .nav-bar {
@@ -203,7 +205,7 @@ const addInvitation = () => {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

79
property-uniapp-project/pages/index/index.vue
View File

@@ -1,13 +1,14 @@
<template> <template>
<view class="content-class"> <view class="content-class">
<view class="nar-top"> <!-- 顶部渐变背景层（仅视觉，不参与文档流） -->
<view class="nar-top"></view>
<!-- 这里是状态栏占位 --> <!-- 这里是状态栏占位 -->
<view class="status_bar"></view> <view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
<!-- 导航栏 --> <!-- 导航栏 -->
<view class="nav-bar"> <view class="nav-bar">
<text class="nav-title">首页</text> <text class="nav-title">首页</text>
</view> </view>
<view class="tabbarClass"> <!-- 小区选择 -->
<view class="header-container" @click="navigateToPage"> <view class="header-container" @click="navigateToPage">
<!-- 左侧小区选择区域 --> <!-- 左侧小区选择区域 -->
<view class="location-area"> <view class="location-area">
@@ -28,20 +29,17 @@
</view> </view>
</view> </view>
</view>
</view>
<!-- banner --> <!-- banner -->
<view class="bannarClass"> <view class="bannarClass">
<up-swiper :list="bannerList" indicator indicatorMode="dot" ></up-swiper> <up-swiper :list="bannerList" indicator indicatorMode="dot" ></up-swiper>
</view> </view>
<view class="noticeClass" @click="getNoticeMore"> <view class="noticeClass" @click="getNoticeMore">
<image src="https://wuyeadmin.bugtc.com/images/home/notice.png" style="width: 38px;height: 38px;position: absolute;top: 12px;left: 17px;"></image>
<view class="col-line"></view>
<uni-notice-bar show-icon :text="noticeText" type="line" <uni-notice-bar show-icon :text="noticeText" type="line"
:showIcon="false" show-get-more scrollable color="#000" background-color="#fff" moreColor="#000"> show-get-more scrollable color="#000" background-color="#fff" moreColor="#000">
<template #noticebarIcon>
<image src="https://wuyeadmin.bugtc.com/images/home/notice.png" style="width: 38px;height: 38px;"></image>
</template>
</uni-notice-bar> </uni-notice-bar>
</view> </view>
<!-- 一键开门 --> <!-- 一键开门 -->
<view class="u-demo-block__content bg-card-open"> <view class="u-demo-block__content bg-card-open">
@@ -174,6 +172,7 @@ const scrollTop = ref(0)
const activityList = ref([]) // 活动列表数据 const activityList = ref([]) // 活动列表数据
const currentCommunity = ref('请认证小区') const currentCommunity = ref('请认证小区')
const currentVillageId = ref('') const currentVillageId = ref('')
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
const bannerList = ref([ const bannerList = ref([
// 'http://47.104.199.163:9090/images/home/banner.png', // 'http://47.104.199.163:9090/images/home/banner.png',
// "http://47.104.199.163:9090/images/propertyImgs/serviceImg2.png" // "http://47.104.199.163:9090/images/propertyImgs/serviceImg2.png"
@@ -251,7 +250,7 @@ const getNoticeData = async() =>{
noticeText.value = res.data.noticeTitle || '' noticeText.value = res.data.noticeTitle || ''
noticeId.value = res.data.noticeId || '' noticeId.value = res.data.noticeId || ''
}else{ }else{
noticeText.value = '' noticeText.value = '暂无公告'
noticeId.value = '' noticeId.value = ''
} }
@@ -263,13 +262,12 @@ const getNoticeData = async() =>{
}) })
} }
} catch (err) { } catch (err) {
// console.error('获取通知数据异常：', err)
uni.showToast({ uni.showToast({
title: err.msg || '网络异常', title: err.msg || '网络异常',
icon: 'error', icon: 'error',
duration: 1000 duration: 1000
}) })
noticeText.value = '' noticeText.value = '暂无公告'
noticeId.value = '' noticeId.value = ''
} }
} }
@@ -393,30 +391,37 @@ const moreClick = () =>{
<style lang="scss" scoped> <style lang="scss" scoped>
.content-class{ .content-class{
background-color: #f9f9f9; background-color: #f9f9f9;
padding-bottom: 100rpx; padding-bottom: 40rpx;
box-sizing: border-box; /* 保证padding不会撑大容器 */ box-sizing: border-box; /* 保证padding不会撑大容器 */
min-height: 100vh; min-height: 100vh;
overflow-y: auto; overflow-y: auto;
position: relative;
.nar-top{ .nar-top{
height: 400rpx; height: 400rpx;
width: 100%; width: 100%;
background: repeating-linear-gradient(to right, #EDF4FA , #C0E4FB); background: repeating-linear-gradient(to right, #EDF4FA , #C0E4FB);
position: absolute; position: absolute;
top: 0;
left: 0;
z-index: 0;
} }
.status_bar { .status_bar {
height: 46px;
width: 100%; width: 100%;
flex-shrink: 0;
position: relative;
z-index: 1;
} }
/* 导航栏 */ /* 导航栏 */
.nav-bar { .nav-bar {
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
text-align: center; text-align: center;
position: relative;
z-index: 1;
} }
.nav-title { .nav-title {
font-size: 14px; font-size: 32rpx;
font-weight: 400; font-weight: 500;
} }
.header-container{ .header-container{
display: flex; display: flex;
@@ -425,10 +430,8 @@ const moreClick = () =>{
padding: 4rpx 30rpx; padding: 4rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
// border-bottom: 1rpx solid #f0f0f0; // border-bottom: 1rpx solid #f0f0f0;
position:absolute; position: relative;
top: 85px; z-index: 10;
left: 0;
z-index: 9999;
} }
// 左侧区域 // 左侧区域
.location-area { .location-area {
@@ -461,9 +464,8 @@ const moreClick = () =>{
} }
.bannarClass{ .bannarClass{
position: relative; position: relative;
top: 112px;
left: 0;
padding: 20rpx 40rpx; padding: 20rpx 40rpx;
// margin-bottom: 20rpx;
height: 300rpx; height: 300rpx;
::v-deep .u-swiper{ ::v-deep .u-swiper{
height: 300rpx !important; height: 300rpx !important;
@@ -476,31 +478,25 @@ const moreClick = () =>{
} }
} }
.noticeClass{ .noticeClass{
position: relative; padding: 0rpx 36rpx;
top: 184rpx; margin-bottom: 20rpx;
left: 0;
padding: 20rpx 36rpx 40rpx;
} }
// 修改通知栏样式 // 修改通知栏样式
::v-deep .uni-noticebar__content-wrapper--scrollable{ ::v-deep .uni-noticebar__content-wrapper--scrollable{
left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.noticeClass.uni-noticebar{ ::v-deep .uni-noticebar{
padding: 10px 15px 10px 45px; padding: 4px 12px;
} }
.notice-bar::after { .notice-bar::after {
color: #3E8EFF; color: #3E8EFF;
} }
.bg-card-open{ .bg-card-open{
position: relative;
top: 110rpx;
left: 0;
padding: 20rpx; padding: 20rpx;
background-color: #fff; background-color: #fff;
border-radius: 8rpx; border-radius: 8rpx;
margin: 20px 18px; margin: 0 18px 20rpx;
} }
.openClass{ .openClass{
display: flex; display: flex;
@@ -528,13 +524,10 @@ const moreClick = () =>{
.adCardClass{ .adCardClass{
// width: 100%; // width: 100%;
height: 200rpx; height: 200rpx;
margin: 40rpx 30rpx; margin: 0 30rpx 20rpx;
background-color: #3E8EFF; background-color: #3E8EFF;
// margin-top: 30rpx; // margin-top: 30rpx;
border-radius: 28rpx; border-radius: 28rpx;
position: relative;
top:49px;
left: 0;
.titleLeft{ .titleLeft{
text-align: left; text-align: left;
line-height: 2; line-height: 2;
@@ -550,13 +543,9 @@ const moreClick = () =>{
} }
} }
.activity-card{ .activity-card{
position: relative;
top: 40px;
left: 0;
bottom: 20;
} }
.uni-card{ .uni-card{
margin: 18px !important; margin: 0 18px 20rpx !important;
} }
.eventListClass{ .eventListClass{
margin: 10rpx 0; margin: 10rpx 0;
@@ -580,7 +569,7 @@ const moreClick = () =>{
top: 0; top: 0;
left: 0; left: 0;
// padding: 6px 18px; // padding: 6px 18px;
padding: 0px 9px 10px 11px; padding: 0px 7px 10px 11px;
border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;