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

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

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

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

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

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

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

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

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