动态计算遮挡和地图尺寸

pages/home/marketSituation.vue

@@ -39,10 +39,10 @@
 		</view>
 		
 		<!-- 可滚动内容区域 -->
-		<scroll-view class="content_scroll" scroll-y="true" :style="{ top: (iSMT + 136) + 'px' }">
+		<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
 			<view class="content">
 				<view class="map">
-					<image src="/static/marketSituation-image/map.png" mode="aspectFill"></image>
+					<image src="/static/marketSituation-image/map.png" mode="widthFix"></image>
 				</view>
 				<view class="global_index">
 					<view class="global_index_title">
@@ -99,7 +99,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, nextTick, computed } from 'vue'
 import footerBar from '../../components/footerBar.vue'
 import IndexCard from '../../components/IndexCard.vue'
 
@@ -107,6 +107,7 @@ const type = ref('marketSituation')
 const iSMT = ref(0)
 const searchValue = ref('')
 const contentHeight = ref(0)
+const headerHeight = ref(0) // 动态计算的header高度
 
 // Tab 栏相关数据
 const channelData = ref([
@@ -126,6 +127,13 @@ const channelData = ref([
 const pageIndex = ref(0)
 const scrollToView = ref('')
 
+// 计算属性：精准计算content区域的top值
+const contentTopPosition = computed(() => {
+	const statusBarHeight = iSMT.value || 0
+	const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140
+	return statusBarHeight + currentHeaderHeight
+})
+
 // 弹窗相关数据
 const showCountryModal = ref(false)
 const selectedCountry = ref('概况')
@@ -335,20 +343,35 @@ onMounted(() => {
 	// 状态栏高度
 	iSMT.value = uni.getSystemInfoSync().statusBarHeight;
 	
-	// 计算内容区域高度
-	const systemInfo = uni.getSystemInfoSync()
-	const windowHeight = systemInfo.windowHeight
-	const statusBarHeight = systemInfo.statusBarHeight || 0
-	const headerHeight = 160 // header大约高度，包括搜索栏和tab栏
-	const footerHeight = 100 // 底部导航栏高度
-	
-	contentHeight.value = windowHeight - statusBarHeight - headerHeight - footerHeight
-
 	// 初始化 tab 栏
 	if (channelData.value.length > 0) {
 		pageIndex.value = 0
 		scrollToView.value = 'nav' + channelData.value[0].id
 	}
+	
+	// 确保DOM渲染完成后再查询高度
+	nextTick(() => {
+		// 动态计算header实际高度
+		uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
+			if (rect) {
+				headerHeight.value = rect.height
+				console.log('Header实际高度:', headerHeight.value, 'px')
+			}
+		}).exec()
+	})
+})
+
+// 监听headerHeight变化，重新计算contentHeight
+watch(headerHeight, (newHeight) => {
+	if (newHeight > 0) {
+		const systemInfo = uni.getSystemInfoSync()
+		const windowHeight = systemInfo.windowHeight
+		const statusBarHeight = systemInfo.statusBarHeight || 0
+		const footerHeight = 100
+		
+		contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
+		console.log('重新计算contentHeight:', contentHeight.value)
+	}
 })
 </script>
 
@@ -551,9 +574,7 @@ onMounted(() => {
 }
 
 .map {
-	flex: 1;
 	width: calc(100% - 60rpx);
-	min-height: 450rpx;
 	margin: 0 30rpx;
 	display: flex;
 	align-items: center;
@@ -561,12 +582,40 @@ onMounted(() => {
 	background-color: #F3F3F3;
 	border-radius: 30rpx;
 	border: 1rpx solid #E0E0E0;
+	padding: 30rpx 20rpx;
+	box-sizing: border-box;
+	/* 设置最小高度保护，但允许内容撑开 */
+	min-height: 200rpx;
 }
 
 .map image {
-	width: 90%;
-	height: 400rpx;
-	object-fit: contain;
+	width: 100%;
+	height: auto;
+	max-width: 100%;
+	display: block;
+	/* widthFix模式下，高度会自动按比例调整 */
+	/* 设置最大高度避免图片过大 */
+	max-height: 60vh;
+	/* 添加平滑过渡效果 */
+	transition: all 0.3s ease;
+	max-height: 60vh;
+}
+
+/* 响应式优化 */
+@media screen and (max-width: 750rpx) {
+	.map {
+		margin: 0 20rpx;
+		width: calc(100% - 40rpx);
+		padding: 20rpx 15rpx;
+	}
+}
+
+@media screen and (max-width: 480rpx) {
+	.map {
+		margin: 0 15rpx;
+		width: calc(100% - 30rpx);
+		padding: 15rpx 10rpx;
+	}
 }
 
 .static-footer {