修改输入框样式问题,首页布局问题

This commit is contained in:
zhouyanli
2026-05-27 17:54:15 +08:00
parent 21cb4e7777
commit 53c4a37854
4 changed files with 160 additions and 129 deletions

View File

@@ -304,7 +304,7 @@ onReady(() => {
padding: 20rpx 0rpx; padding: 20rpx 0rpx;
margin-top: 10rpx; margin-top: 10rpx;
justify-content: flex-start; justify-content: flex-start;
gap: 20rpx; gap: 30rpx;
margin: 0rpx 40rpx; margin: 0rpx 40rpx;
} }

View File

@@ -192,7 +192,9 @@ const handleConfirm = () => {
flex: 1; flex: 1;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
height: 100%; /* height: 100%; */
display: flex;
align-items: center;
} }
/* 密码规则提示 */ /* 密码规则提示 */

View File

@@ -210,7 +210,8 @@ const handleConfirm = () => {
flex: 1; flex: 1;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
height: 100%; display: flex;
align-items: center;
} }
.verify-input { .verify-input {
padding-right: 20rpx; padding-right: 20rpx;

View File

@@ -5,6 +5,8 @@
<!-- 页面内容区 --> <!-- 页面内容区 -->
<view class="page-content"> <view class="page-content">
<!-- 粘性顶部区域(状态栏 + 导航栏 + 小区选择) -->
<view class="sticky-header">
<!-- 状态栏占位 --> <!-- 状态栏占位 -->
<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view> <view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
<!-- 导航栏 --> <!-- 导航栏 -->
@@ -31,7 +33,10 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 可滚动内容区 -->
<view class="scroll-content">
<!-- banner --> <!-- banner -->
<view class="bannarClass"> <view class="bannarClass">
<uni-swiper-dot <uni-swiper-dot
@@ -146,11 +151,12 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app' import { onLoad, onUnload ,onShow} from '@dcloudio/uni-app'
import { import {
getCurrentVillage, getCurrentVillage,
getTodayInspection, getTodayInspection,
@@ -297,13 +303,16 @@ const slelctHomeData = data => {
getNoticeData() getNoticeData()
getInspectionData() getInspectionData()
} }
onShow(()=>{
getbannarData()
})
onLoad(() => { onLoad(() => {
uni.$on('confirm', slelctHomeData) uni.$on('confirm', slelctHomeData)
// 优先调用接口获取当前小区,失败时再读缓存 // 优先调用接口获取当前小区,失败时再读缓存
currentVillageData() currentVillageData()
getInspectionData() getInspectionData()
getbannarData() // getbannarData()
}) })
onUnload(() => { onUnload(() => {
@@ -326,13 +335,13 @@ const onSwiperChange = e => {
position: relative; position: relative;
} }
/* 顶部渐变背景 */ /* 顶部渐变背景 - 增加高度确保覆盖粘性头部区域 */
.bg-gradient { .bg-gradient {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 400rpx; height: 600rpx;
background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb); background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb);
z-index: 0; z-index: 0;
} }
@@ -344,6 +353,19 @@ const onSwiperChange = e => {
padding: 0 40rpx 40rpx; 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 { .status_bar {
width: 100%; width: 100%;
} }
@@ -407,6 +429,12 @@ const onSwiperChange = e => {
} }
} }
/* 可滚动内容区域 */
.scroll-content {
/* 确保内部元素正常布局 */
width: 100%;
}
.bannarClass { .bannarClass {
padding: 20rpx 0; padding: 20rpx 0;
} }