顶部高度

pages/index/game/gameList.vue

@@ -1,7 +1,7 @@
 <template>
-	<view class="page-container">
+	<view class="page-container" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
 		<!-- 搜索栏 -->
-		<view class="search-section" :class="{'fixed': isFixed}">
+		<view class="search-section" :class="{'fixed': isFixed}" :style="isFixed ? { paddingTop: (12 + statusBarHeight) + 'px' } : {}">
 			<view class="search-bar">
 				<u-icon name="search" color="#999999" size="32" class="search-icon"></u-icon>
 				<input type="text" placeholder="搜索职位" class="search-input" v-model="searchKeyword" @confirm="handleSearch" />
@@ -173,6 +173,7 @@
 		name: 'gameList',
 		data() {
 			return {
+				statusBarHeight: 0, // 状态栏高度
 				current: 0,
 				typeList: [],
 				currentSx: 0,
@@ -200,6 +201,10 @@
 			};
 		},
 		onLoad() {
+			// 获取状态栏高度
+			let systemInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = systemInfo.statusBarHeight || 0;
+			
 			this.getTypeList()
 			this.getLocation()
 			this.getJobSearchList()
@@ -381,7 +386,6 @@
 		background-size: cover;
 		background-position: center;
 		background-repeat: no-repeat;
-        padding-top: 80rpx;
 	}
 
 	.search-section {
@@ -894,7 +898,6 @@
 		background-position: top center;
 		background-repeat: no-repeat;
 		height: 19vh;
-        padding-top: 80rpx;
 	}
 	
 	.topbg-type.fixed {

pages/index/index.vue

@@ -92,9 +92,9 @@
 							</u-grid>
 						</view> -->
 					</view>
-					<view class="topbg-sticky">
-						<!-- 标题-搜索 -->
-						<view class="topbg-sticky-box">
+				<view class="topbg-sticky" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
+					<!-- 标题-搜索 -->
+					<view class="topbg-sticky-box">
 							<view class="topbg-sticky-title flex justify-between align-center">
 								<view class="topbg-sticky-title-left flex align-center">
 									<image src="../../static/images/index/xingIcon.svg" class="xing-icon" />
@@ -337,7 +337,7 @@
 
 				<!-- 筛选 -->
 				<u-sticky @fixed="isfixed" @unfixed="isunfixed" :radius='40' h5-nav-height="0" :enable="enable">
-					<view class="qySx flex justify-center" :class="isfixeds==true?'isfixed':'isfixeds'">
+					<view class="qySx flex justify-center" :class="isfixeds==true?'isfixed':'isfixeds'" :style="{ paddingTop: (12 + statusBarHeight) + 'px !important' }">
 						<view class="qySx-box">
 							<!-- 第一行：tabs -->
 							<view class="qySx-box-row flex justify-between align-center">
@@ -479,6 +479,7 @@
 		},
 		data() {
 			return {
+				statusBarHeight: 0, // 状态栏高度
 				enable: true, //开启吸顶
 				goback: false,
 				city: '',
@@ -639,6 +640,10 @@
 			}
 		},
 		onLoad(e) {
+			// 获取状态栏高度
+			let systemInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = systemInfo.statusBarHeight || 0;
+			
 			// #ifdef APP
 			this.getAudioPermision()
 			// #endif
@@ -1617,7 +1622,6 @@
 		position: sticky;
 		top: 0px;
 		// z-index: 999;
-		padding-top: 44px;
 		
 		/* 波浪效果 */
 		--c: rgba(255, 255, 255, 0.1);
@@ -2163,7 +2167,6 @@
 	.qySx {
 		position: fixed;
 		top: 0;
-		padding-top: 80rpx !important;
 		z-index: 999;
 		width: 100%;
 		background: linear-gradient(180.00deg, rgba(255, 102, 0, 1),rgba(255, 89, 89, 1) 83%);

pages/talentSearch/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="talent-search-page">
 		<!-- 搜索框 -->
-		<view class="search flex align-center justify-center">
+		<view class="search flex align-center justify-center" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
 			<view class="search-box">
 				<view class="dropdown-btn" @click="showDropdown">
 					<text class="dropdown-text">{{ positionOptions[selectedPosition] }}</text>
@@ -19,7 +19,7 @@
 		</view>
 		
 		<!-- 筛选栏 -->
-		<view class="topbg-sx-box flex justify-start align-center">
+		<view class="topbg-sx-box flex justify-start align-center" :style="{ top: searchBoxHeight }">
 			<view class="topbg-sx-box-r flex align-center">
 				<!-- 城市 -->
 				<view class="topbg-sx-box-r-i flex align-center" style="">
@@ -40,7 +40,7 @@
 		</view>
 		
 		<!-- 人才列表 -->
-		<view class="talent-list">
+		<view class="talent-list" :style="{ marginTop: talentListMarginTop }">
 			<view 
 				class="talent-card" 
 				v-for="(talent, index) in talentList" 
@@ -133,6 +133,7 @@
 export default {
 	data() {
 		return {
+			statusBarHeight: 0, // 状态栏高度
 			searchKeyword: '',
 			currentSx: 0,
 			sxTypeList: [
@@ -216,9 +217,28 @@ export default {
 					description: '负责Amazon英国、欧洲站、制定推广与销售计划,达成团队要求的销售业绩;做好数据的统计分析工作,收集、分析...',
 					workPeriod: ''
 				}
-			]
+	]
+}
+},
+	computed: {
+		// 计算搜索框的总高度（px）
+		searchBoxHeight() {
+			// 动态 paddingTop (12 + statusBarHeight) + 搜索框内容高度 + paddingBottom
+			// 搜索框内容约 52rpx ≈ 26px, paddingBottom 20rpx ≈ 10px
+			return (12 + this.statusBarHeight + 26 + 10) + 'px';
+		},
+		// 计算人才列表的 margin-top（包括搜索框 + 筛选栏）
+		talentListMarginTop() {
+			// 搜索框高度 + 筛选栏高度（紧凑布局）
+			// 筛选栏实际高度约 46px（按钮18px + 内边距16px + 外边距12px）
+			return (12 + this.statusBarHeight + 26 + 10 + 46) + 'px';
 		}
 	},
+	onLoad() {
+		// 获取状态栏高度
+		let systemInfo = uni.getSystemInfoSync();
+		this.statusBarHeight = systemInfo.statusBarHeight || 0;
+	},
 	methods: {
 		// 返回上一页
 		goBack() {
@@ -357,7 +377,8 @@ export default {
 	position: fixed;
 	top: 0;
 	width: 100%;
-	padding: 80rpx 20rpx 20rpx 20rpx;
+	padding: 0rpx 20rpx 20rpx 20rpx;
+	// padding-top 已改为动态计算，在模板中通过 :style 设置
 	background: linear-gradient(180.00deg, rgba(255, 102, 0, 1),rgba(255, 89, 89, 1) 83%);
 	z-index: 99;
 
@@ -490,7 +511,7 @@ export default {
 
 .topbg-sx-box {
 	position: fixed;
-	top: 160rpx;
+	// top: 160rpx; // 已改为动态计算，在模板中通过 :style 设置
 	left: 0;
 	right: 0;
 	width: 100%;
@@ -569,7 +590,7 @@ export default {
 }
 
 .talent-list {
-	margin-top: 280rpx;
+	// margin-top: 280rpx; // 已改为动态计算，在模板中通过 :style 设置
 	padding: 20rpx;
 }