修改输入框样式问题，首页布局问题
This commit is contained in:
zhouyanli
@@ -5,142 +5,148 @@
|
||||
|
||||
<!-- 页面内容区 -->
|
||||
<view class="page-content">
|
||||
<!-- 状态栏占位 -->
|
||||
<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/imgs/adress.png"
|
||||
style="height: 100%; width: 100%"
|
||||
></image>
|
||||
</view>
|
||||
<view class="community-selector">
|
||||
<text class="community-name">{{ currentCommunity }}</text>
|
||||
<view class="community-icon">
|
||||
<!-- 粘性顶部区域（状态栏 + 导航栏 + 小区选择） -->
|
||||
<view class="sticky-header">
|
||||
<!-- 状态栏占位 -->
|
||||
<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/imgs/三角形.png"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/adress.png"
|
||||
style="height: 100%; width: 100%"
|
||||
></image>
|
||||
</view>
|
||||
<view class="community-selector">
|
||||
<text class="community-name">{{ currentCommunity }}</text>
|
||||
<view class="community-icon">
|
||||
<image
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/三角形.png"
|
||||
style="height: 100%; width: 100%"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- banner -->
|
||||
<view class="bannarClass">
|
||||
<uni-swiper-dot
|
||||
class="uni-swiper-dot-box"
|
||||
@clickItem="clickItem"
|
||||
:info="bannerList"
|
||||
:current="current"
|
||||
mode="round"
|
||||
>
|
||||
<swiper class="swiper-box" :current="current" @change="onSwiperChange" autoplay>
|
||||
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
||||
<view class="swiper-item">
|
||||
<image :src="item.url" style="width: 100%; height: 100%"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
</view>
|
||||
<!-- 可滚动内容区 -->
|
||||
<view class="scroll-content">
|
||||
<!-- banner -->
|
||||
<view class="bannarClass">
|
||||
<uni-swiper-dot
|
||||
class="uni-swiper-dot-box"
|
||||
@clickItem="clickItem"
|
||||
:info="bannerList"
|
||||
:current="current"
|
||||
mode="round"
|
||||
>
|
||||
<swiper class="swiper-box" :current="current" @change="onSwiperChange" autoplay>
|
||||
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
||||
<view class="swiper-item">
|
||||
<image :src="item.url" style="width: 100%; height: 100%"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
</view>
|
||||
|
||||
<!-- 巡检 -->
|
||||
<view class="inspectionClass">
|
||||
<!-- 消息通知栏 -->
|
||||
<view class="noticeClass">
|
||||
<view class="notice-left">
|
||||
<image
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/notice.png"
|
||||
class="notice-icon"
|
||||
></image>
|
||||
<view class="notice-line"></view>
|
||||
<!-- 巡检 -->
|
||||
<view class="inspectionClass">
|
||||
<!-- 消息通知栏 -->
|
||||
<view class="noticeClass">
|
||||
<view class="notice-left">
|
||||
<image
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/notice.png"
|
||||
class="notice-icon"
|
||||
></image>
|
||||
<view class="notice-line"></view>
|
||||
</view>
|
||||
<view class="notice-right" @click="getNoticeMore">
|
||||
<uni-notice-bar
|
||||
:text="noticeText"
|
||||
type="line"
|
||||
:showIcon="false"
|
||||
show-get-more
|
||||
scrollable
|
||||
color="#fff"
|
||||
background-color="transparent"
|
||||
moreColor="#fff"
|
||||
no-border
|
||||
>
|
||||
</uni-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-right" @click="getNoticeMore">
|
||||
<uni-notice-bar
|
||||
:text="noticeText"
|
||||
type="line"
|
||||
:showIcon="false"
|
||||
show-get-more
|
||||
scrollable
|
||||
color="#fff"
|
||||
background-color="transparent"
|
||||
moreColor="#fff"
|
||||
no-border
|
||||
>
|
||||
</uni-notice-bar>
|
||||
|
||||
<!-- 巡检数据统计区 -->
|
||||
<view class="statistics-wrap">
|
||||
<view class="statistics-item" @click="goToInspectionRecord">
|
||||
<text class="num">{{ allCount }}</text>
|
||||
<text class="label">全部巡检</text>
|
||||
</view>
|
||||
<view class="statistics-item" @click="goToDaysInspection">
|
||||
<text class="num">{{ pendingCount }}</text>
|
||||
<text class="label">待巡检</text>
|
||||
</view>
|
||||
<view class="statistics-item">
|
||||
<text class="num">{{ InspectedCount }}</text>
|
||||
<text class="label">已巡检</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 巡检数据统计区 -->
|
||||
<view class="statistics-wrap">
|
||||
<view class="statistics-item" @click="goToInspectionRecord">
|
||||
<text class="num">{{ allCount }}</text>
|
||||
<text class="label">全部巡检</text>
|
||||
<!-- 网格布局功能 -->
|
||||
<view class="function-container">
|
||||
<!-- 第一行功能：故障上报、一键开门、工单大厅、我的工单 -->
|
||||
<view class="function-row">
|
||||
<view class="function-item" @click="goToReport">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/fault-report.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">故障上报</text>
|
||||
</view>
|
||||
<view class="function-item" @click="goToOneOpenDoor">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/open.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">一键开门</text>
|
||||
</view>
|
||||
<view class="function-item" @tap="goToTicketHall">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/work-order.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">工单大厅</text>
|
||||
</view>
|
||||
<view class="function-item" @tap="goToMyTicket">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/my-work.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">我的工单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="statistics-item" @click="goToDaysInspection">
|
||||
<text class="num">{{ pendingCount }}</text>
|
||||
<text class="label">待巡检</text>
|
||||
</view>
|
||||
<view class="statistics-item">
|
||||
<text class="num">{{ InspectedCount }}</text>
|
||||
<text class="label">已巡检</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 网格布局功能 -->
|
||||
<view class="function-container">
|
||||
<!-- 第一行功能：故障上报、一键开门、工单大厅、我的工单 -->
|
||||
<view class="function-row">
|
||||
<view class="function-item" @click="goToReport">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/fault-report.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">故障上报</text>
|
||||
</view>
|
||||
<view class="function-item" @click="goToOneOpenDoor">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/open.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">一键开门</text>
|
||||
</view>
|
||||
<view class="function-item" @tap="goToTicketHall">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/work-order.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">工单大厅</text>
|
||||
</view>
|
||||
<view class="function-item" @tap="goToMyTicket">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/my-work.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">我的工单</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第二行 -->
|
||||
<view class="function-row" style="margin-top: 2px">
|
||||
<view class="function-item" @tap="goToComplaint">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/complaint.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">投诉处理</text>
|
||||
<!-- 第二行 -->
|
||||
<view class="function-row" style="margin-top: 2px">
|
||||
<view class="function-item" @tap="goToComplaint">
|
||||
<image
|
||||
class="item-icon"
|
||||
src="https://wuyeadmin.bugtc.com/images/imgs/complaint.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="item-text">投诉处理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -150,7 +156,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { onLoad, onUnload ,onShow} from '@dcloudio/uni-app'
|
||||
import {
|
||||
getCurrentVillage,
|
||||
getTodayInspection,
|
||||
@@ -297,13 +303,16 @@ const slelctHomeData = data => {
|
||||
getNoticeData()
|
||||
getInspectionData()
|
||||
}
|
||||
onShow(()=>{
|
||||
getbannarData()
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
uni.$on('confirm', slelctHomeData)
|
||||
// 优先调用接口获取当前小区，失败时再读缓存
|
||||
currentVillageData()
|
||||
getInspectionData()
|
||||
getbannarData()
|
||||
// getbannarData()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
@@ -326,13 +335,13 @@ const onSwiperChange = e => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 顶部渐变背景 */
|
||||
/* 顶部渐变背景 - 增加高度确保覆盖粘性头部区域 */
|
||||
.bg-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 400rpx;
|
||||
height: 600rpx;
|
||||
background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb);
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -344,6 +353,19 @@ const onSwiperChange = e => {
|
||||
padding: 0 40rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 粘性头部区域 - 滚动时固定在顶部 */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
/* 与顶部渐变背景一致，保证滚动时视觉效果连贯 */
|
||||
background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb);
|
||||
margin: 0 -40rpx; /* 抵消父容器内边距，使背景完全延伸 */
|
||||
padding: 0 40rpx;
|
||||
/* 可选：添加轻微阴影增强层次感 */
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -407,6 +429,12 @@ const onSwiperChange = e => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 可滚动内容区域 */
|
||||
.scroll-content {
|
||||
/* 确保内部元素正常布局 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bannarClass {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user