页面内容顶格显示修复

LiangZhiYUMao/pages/astrology/constellation.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="constellation-page">
+		 <view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FFFFFF'}"></view>
 		<!-- 自定义导航栏 -->
 		<view class="custom-nav">
 			<view class="nav-left" @click="goBack">
@@ -194,6 +195,7 @@ import constellationUtil from '@/utils/constellation.js'
 export default {
 	data() {
 		return {
+			statusBarHeight: 0,
 			// 生日相关
 			birthday: uni.getStorageSync("userInfo").birthDate,
 			birthdayDisplay: '请选择生日',
@@ -233,6 +235,10 @@ export default {
 
 	onLoad() {
 		this.initData()
+		 // 获取状态栏高度
+		  const systemInfo = uni.getSystemInfoSync()
+		  this.statusBarHeight = systemInfo.statusBarHeight
+		
 	},
 
 	methods: {
@@ -464,6 +470,7 @@ export default {
 	min-height: 100vh;
 	background: linear-gradient(180deg, #FFF9F9 0%, #FFFFFF 50%);
 	padding-bottom: 40rpx;
+	 // padding-top: v-bind(statusBarHeight + 'px'); 
 }
 
 /* 自定义导航栏 */
@@ -473,7 +480,10 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	height: 88rpx;
+	// height: auto;
 	padding: 0 30rpx;
+	// padding: v-bind(statusBarHeight + 'px') 30rpx 30rpx; 
+	 // padding: 0 30rpx 20rpx;
 	background-color: #FFFFFF;
 	border-bottom: 1rpx solid #F0F0F0;
 

LiangZhiYUMao/pages/astrology/index.vue

@@ -1,7 +1,10 @@
 <template>
-	<view class="astrology-page">
-		<!-- 自定义顶部导航栏 -->
-		<view class="custom-nav">
+	<view class="astrology-page" :style="{ paddingTop: `calc(${statusBarHeight}px + 88rpx)` }">
+		<!-- 新增：状态栏+导航栏背景块 -->
+		<view class="top-bar-bg" :style="{ height: `calc(${statusBarHeight}px + 88rpx)` }"></view>
+		
+		<!-- 自定义顶部导航栏（仅保留内容，背景由top-bar-bg提供） -->
+		<view class="custom-nav" :style="{ top: `${statusBarHeight}px` }">
 			<view class="nav-left" @click="goBack">
 				<text class="back-icon">←</text>
 			</view>
@@ -130,6 +133,8 @@ import api from '@/utils/api.js'
 export default {
 	data() {
 		return {
+			// 新增：状态栏高度
+			statusBarHeight: 0,
 			// 今日日期
 			todayDate: '',
 			
@@ -171,6 +176,12 @@ export default {
 	},
 
 	onLoad() {
+		// 新增：获取状态栏高度
+		uni.getSystemInfo({
+			success: (res) => {
+				this.statusBarHeight = res.statusBarHeight
+			}
+		})
 		this.initData()
 	},
 	
@@ -296,16 +307,31 @@ export default {
 	padding-bottom: 40rpx;
 }
 
+// 新增：状态栏+导航栏背景块
+.top-bar-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #FFFFFF; // 和原导航栏背景一致
+	border-bottom: 1rpx solid #F0F0F0; // 保留原导航栏的下边框
+	z-index: 998; // 背景层
+}
+
 /* 自定义导航栏 */
 .custom-nav {
-	position: relative;
+	position: fixed; // 修改为fixed定位
+	left: 0;
+	right: 0;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	height: 88rpx;
 	padding: 0 30rpx;
-	background-color: #FFFFFF;
-	border-bottom: 1rpx solid #F0F0F0;
+	// 移除原有背景和边框，由top-bar-bg提供
+	// background-color: #FFFFFF;
+	// border-bottom: 1rpx solid #F0F0F0;
+	z-index: 999; // 内容层，在背景上方
 
 	.nav-left {
 		width: 80rpx;
@@ -847,5 +873,4 @@ export default {
 .bottom-placeholder {
 	height: 40rpx;
 }
-</style>
-
+</style>

LiangZhiYUMao/pages/astrology/mbti.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="mbti-page">
+		<view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FFFFFF'}"></view>
 		<!-- 自定义顶部导航栏 -->
 		<view class="custom-nav">
 			<view class="nav-left" @click="goBack">
@@ -201,6 +202,7 @@ import { MBTI_QUESTIONS, MBTI_TYPES, calculateMBTI } from '@/utils/mbti.js'
 export default {
 	data() {
 		return {
+			statusBarHeight: 0, 
 			currentStep: 'intro', // intro, testing, result
 			currentQuestion: 1,
 			totalQuestions: 0,
@@ -223,6 +225,8 @@ export default {
 
 	onLoad() {
 		this.initData()
+		const systemInfo = uni.getSystemInfoSync()
+		this.statusBarHeight = systemInfo.statusBarHeight
 	},
 
 	methods: {

LiangZhiYUMao/pages/astrology/zodiac.vue

@@ -1,7 +1,8 @@
 <template>
-	<view class="zodiac-page">
+	<view class="zodiac-page" :style="{ paddingTop: `calc(${statusBarHeight}px + 88rpx)` }">
+		<view class="top-bar-bg" :style="{ height: `calc(${statusBarHeight}px + 88rpx)` }"></view>
 		<!-- 自定义导航栏 -->
-		<view class="custom-nav">
+		<view class="custom-nav" :style="{ top: `${statusBarHeight}px` }">
 			<view class="nav-left" @click="goBack">
 				<text class="back-icon">←</text>
 			</view>
@@ -143,6 +144,7 @@ import zodiacEnhanced from '@/utils/zodiac-enhanced.js'
 export default {
 	data() {
 		return {
+			statusBarHeight: 0,
 			// 生肖配对相关数据
 			myZodiac: uni.getStorageSync("userInfo").animal,
 			targetZodiac: '',
@@ -184,6 +186,12 @@ export default {
 	},
 
 	onLoad() {
+		// 获取状态栏高度（仅样式适配，无业务影响）
+			uni.getSystemInfo({
+				success: (res) => {
+					this.statusBarHeight = res.statusBarHeight
+				}
+			})
 		this.initData()
 	},
 
@@ -343,23 +351,50 @@ export default {
 	padding-bottom: 40rpx;
 }
 
+// 状态栏+导航栏统一背景块
+.top-bar-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #FFFFFF; // 与原导航栏背景一致
+	border-bottom: 1rpx solid #F0F0F0; // 保留原导航栏下边框
+	z-index: 998; // 背景层，低于导航栏内容
+}
+
 /* 自定义导航栏 */
 .custom-nav {
-	position: relative;
+	position: fixed;
+	left: 0;          // 必加：导航栏靠左对齐
+	right: 0;         // 必加：导航栏靠右对齐（占满全屏宽度）
+	top: 0;           // 补充：强制置顶，避免位置偏移
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	height: 88rpx;
 	padding: 0 30rpx;
-	background-color: #FFFFFF;
-	border-bottom: 1rpx solid #F0F0F0;
+	z-index: 9999;    // 提高层级，确保不被任何元素遮挡
+	background: #fff; // 临时加背景色，方便你确认导航栏位置（后续可保留）
 
 	.nav-left {
 		width: 80rpx;
+		height: 88rpx;          // 让点击区域占满导航栏高度
+		display: flex;
+		align-items: center;    // 垂直居中
+		justify-content: center;// 水平居中
+		// 加点击反馈，确认可点击
+		&:active {
+			background-color: #f5f5f5;
+		}
 
 		.back-icon {
 			font-size: 40rpx;
-			color: #333333;
+			// color: #E91E63; 
+			// 已删除 background-color: #FFF0F5;
+			padding: 10rpx 15rpx;
+			border-radius: 8rpx;
+			// 强制显示，避免字体问题导致不显示
+			display: inline-block;
 		}
 	}
 

LiangZhiYUMao/pages/blacklist/index.vue

@@ -1,13 +1,13 @@
 <template>
 	<view class="blacklist-page">
 		<!-- 顶部导航栏 -->
-		<view class="header">
+		<!-- <view class="header">
 			<view class="back-btn" @click="goBack">
 				<text class="back-icon">←</text>
 			</view>
 			<text class="header-title">黑名单</text>
 			<view class="placeholder"></view>
-		</view>
+		</view> -->
 
 		<scroll-view scroll-y class="content">
 		<!-- 说明提示 -->

LiangZhiYUMao/pages/courses/list.vue

@@ -1,7 +1,8 @@
 <template>
-	<view class="courses-page">
+	<view class="courses-page" :style="{ paddingTop: `calc(${statusBarHeight}px + 90rpx)` }">
+		<view class="status-bar-bg" :style="{ height: `calc(${statusBarHeight}px + 90rpx)` }"></view>
 		<!-- 自定义导航栏 -->
-		<view class="custom-navbar">
+		<view class="custom-navbar" :style="{ top: `${statusBarHeight}px` }">
 			<view class="navbar-left" @click="goBack">
 				<text class="back-icon">←</text>
 			</view>
@@ -73,6 +74,7 @@
 				DEFAULT_IMAGES,
 				activeTab: 'all', // 当前选中的标签页
 				activeSort: 'recommend', // 当前排序方式
+				statusBarHeight: 0, // 新增：状态栏高度（px）
 				// 模拟数据，当API返回为空时使用
 				mockCourses: [
 					{
@@ -116,7 +118,13 @@
 		},
 
 		onLoad() {
-		
+			// 获取系统信息（含状态栏高度）
+			  uni.getSystemInfo({
+				success: (res) => {
+				  this.statusBarHeight = res.statusBarHeight // 单位：px
+				}
+			  })
+		  
 			this.loadCourseList()
 		},
 
@@ -275,13 +283,23 @@
 	.courses-page {
 		min-height: 100vh;
 		background-color: #FFF9F9;
-		padding-top: 90rpx;
+		// padding-top: 90rpx;
 	}
+	
+	/* 状态栏背景样式 - 和导航栏背景完全一致 */
+		.status-bar-bg {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
+			z-index: 998; /* 低于导航栏的999，确保导航栏在上方 */
+		}
 
 	/* 自定义导航栏 */
 	.custom-navbar {
 		position: fixed;
-		top: 0;
+		// top: 0;
 		left: 0;
 		right: 0;
 		height: 90rpx;
@@ -289,7 +307,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0 20rpx;
-		background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
+		// background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
 		z-index: 999;
 
 		.navbar-left,

LiangZhiYUMao/pages/matchmakers/list.vue

@@ -1,5 +1,7 @@
 <template>
 	<view class="matchmaker-list-page">
+		<view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FFFFFF'}"></view>
+
 		<!-- 顶部导航栏 -->
 		<view class="nav-bar">
 			<view class="nav-left" @click="goBack">
@@ -123,6 +125,7 @@ import { DEFAULT_IMAGES } from '@/config/index.js'
 export default {
 	data() {
 		return {
+			statusBarHeight: 0,
 			// 筛选条件
 			filterType: null, // 默认显示全部红娘
 			
@@ -151,6 +154,9 @@ export default {
 		
 		// 加载红娘列表
 		this.loadMatchmakerList()
+		// 新增：获取状态栏高度
+		const systemInfo = uni.getSystemInfoSync()
+		this.statusBarHeight = systemInfo.statusBarHeight
 	},
 
 	methods: {