deepChartVueApp/pages/marketSituation/marketOverview.vue

<template>
	<view class="main">
		<!-- 可滚动内容区域 -->
		<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
			<view class="content">
				<button @click="goToChartExample">图表</button>
				<view class="map">
					<image src="/static/marketSituation-image/map.png" mode="widthFix"></image>
				</view>
				<view class="global_index">
					<view class="global_index_title">
						{{ $t('marketSituation.globalIndex') }}
					</view>
					<view class="global_index_more" @click="goToGlobalIndex">
						<text>{{ $t('marketSituation.globalIndexMore') }}</text>
						<image src="/static/marketSituation-image/more.png" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 卡片网格 -->
				<view class="cards_grid">
					<view v-for="(card, index) in cardData" :key="index" class="card_item">
						<IndexCard :flagIcon="card.flagIcon" :indexName="card.indexName"
							:currentPrice="card.currentPrice" :changeAmount="card.changeAmount"
							:changePercent="card.changePercent" :isRising="card.isRising" />
					</view>
				</view>
				<view class="warn">
					<image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
					<view class="warn_text_container">
						<text :class="warnTextClass">{{ $t('marketSituation.warn') }}</text>
					</view>
				</view>
				<!-- 底部安全区域，防止被导航栏遮挡 -->
				<view class="bottom_safe_area"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, computed } from 'vue'
import util from '../../common/util.js'
import IndexCard from '../../components/IndexCard.vue'

const iSMT = ref(0)
const searchValue = ref('')
const contentHeight = ref(0)
const headerHeight = ref(0) // 动态计算的header高度
const isWarnTextOverflow = ref(false) // warn文字是否溢出

const pageIndex = ref(0)
const scrollToView = ref('')

// 跳转图表示例页面
const goToChartExample = () => {
	uni.navigateTo({
		url: '/pages/marketSituation/chartExample'
	})
}

// 计算属性：精准计算content区域的top值
const contentTopPosition = computed(() => {
	const statusBarHeight = iSMT.value || 0
	const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140
	return statusBarHeight + currentHeaderHeight
})

// warn文字的class计算属性
const warnTextClass = computed(() => {
	return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text'
})

// 弹窗相关数据
const showCountryModal = ref(false)
const selectedCountry = ref('概况')
const countryList = ref([
	'概况', '新加坡', '马来西亚', '印度尼西亚', '美国', '中国香港',
	'泰国', '中国', '加拿大', '越南', '外汇', '贵金属'
])

// 卡片数据
const cardData = ref([
	{
		flagIcon: '🇺🇸',
		indexName: '道琼斯',
		currentPrice: '45757.90',
		changeAmount: '-125.22',
		changePercent: '-0.27%',
		isRising: false
	},
	{
		flagIcon: '🇺🇸',
		indexName: '纳斯达克',
		currentPrice: '22333.96',
		changeAmount: '+125.22',
		changePercent: '+0.47%',
		isRising: true
	},
	{
		flagIcon: '🇺🇸',
		indexName: '标普500',
		currentPrice: '6606.08',
		changeAmount: '+125.22',
		changePercent: '+0.27%',
		isRising: true
	},
	{
		flagIcon: '🇨🇳',
		indexName: '上证指数',
		currentPrice: '3333.96',
		changeAmount: '+125.22',
		changePercent: '+0.27%',
		isRising: true
	},
	{
		flagIcon: '🇨🇳',
		indexName: '科创50',
		currentPrice: '757.90',
		changeAmount: '-25.22',
		changePercent: '-0.27%',
		isRising: false
	},
	{
		flagIcon: '🇭🇰',
		indexName: '恒生指数',
		currentPrice: '19757.90',
		changeAmount: '-125.22',
		changePercent: '-0.63%',
		isRising: false
	},
	{
		flagIcon: '🇸🇬',
		indexName: '道琼斯',
		currentPrice: '3757.90',
		changeAmount: '+85.22',
		changePercent: '+2.31%',
		isRising: true
	},
	{
		flagIcon: '🇲🇾',
		indexName: '纳斯达克',
		currentPrice: '1657.90',
		changeAmount: '-15.22',
		changePercent: '-0.91%',
		isRising: false
	},
	{
		flagIcon: '🇹🇭',
		indexName: '标普500',
		currentPrice: '1457.90',
		changeAmount: '+35.22',
		changePercent: '+2.48%',
		isRising: true
	}
])

// 搜索输入事件
const onSearchInput = (e) => {
	searchValue.value = e.detail.value
}

// 搜索确认事件
const onSearchConfirm = (e) => {
	console.log('搜索内容:', e.detail.value)
	// 这里可以添加搜索逻辑
	performSearch(e.detail.value)
}

// 搜索图标点击事件
const onSearchClick = () => {
	if (searchValue.value.trim()) {
		performSearch(searchValue.value)
	}
}

// 执行搜索
const performSearch = (keyword) => {
	if (!keyword.trim()) {
		uni.showToast({
			title: '请输入搜索内容',
			icon: 'none'
		})
		return
	}

	uni.showToast({
		title: `搜索: ${keyword}`,
		icon: 'none'
	})
	// 这里添加实际的搜索逻辑
}

// 检测warn文字是否溢出
const checkWarnTextOverflow = () => {
	nextTick(() => {
		setTimeout(() => {
			const query = uni.createSelectorQuery()

			// 同时查询容器和文字元素
			query.select('.warn_text_container').boundingClientRect()
			query.select('.warn_text').boundingClientRect()
			query.exec((res) => {
				const containerRect = res[0]
				const textRect = res[1]

				if (!containerRect || !textRect) {
					return
				}

				// 判断文字是否超出容器（留一些余量）
				const isOverflow = textRect.width > (containerRect.width - 10)

				isWarnTextOverflow.value = isOverflow
			})
		}, 500)
	})
}

// 跳转到全球指数页面
const goToGlobalIndex = () => {
	uni.navigateTo({
		url: '/pages/marketSituation/globalIndex'
	})
}

onMounted(() => {
	// 状态栏高度
	iSMT.value = uni.getSystemInfoSync().statusBarHeight;

	// 确保DOM渲染完成后再查询高度
	nextTick(() => {
		// 动态计算header实际高度
		uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
			if (rect) {
				headerHeight.value = rect.height
				console.log('Header实际高度:', headerHeight.value, 'px')
			}
		}).exec()

		// 检测warn文字是否溢出
		checkWarnTextOverflow()
	})
})

// 监听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>

<style scoped>
/* 状态栏占位 */
.top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	background-color: #ffffff;
}

/* 固定头部样式 */
.header_fixed {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: #ffffff;
	padding: 20rpx 0 0 0;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 可滚动内容区域 */
.content_scroll {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 100rpx;
	/* 底部导航栏高度 */
	overflow-y: auto;
}

.header_content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	padding: 0 20rpx;
	margin-bottom: 10rpx;
}

.header_input_wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 20rpx 0 0;
	height: 70rpx;
	border-radius: 35rpx;
	background-color: #ffffff;
	border: 1rpx solid #e9ecef;
	padding: 0 80rpx 0 30rpx;
	font-size: 28rpx;
	color: #5c5c5c;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.search_icon {
	width: 40rpx;
	height: 40rpx;
	opacity: 0.6;
}

.header_input {
	margin-left: 10rpx;
}

.header_icons {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.header_icon {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header_icon image {
	width: 40rpx;
	height: 40rpx;
}

/* Tab 栏样式 */
.channel_li {
	display: flex;
	align-items: center;
	height: 80rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
}

.channel_wrap {
	width: calc(100% - 60rpx);
	height: 100%;
	overflow: hidden;
	flex-shrink: 0;
}

.channel_innerWrap {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 20rpx;
	white-space: nowrap;
}

.channel_item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60rpx;
	padding: 0 20rpx;
	border-radius: 30rpx;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.channel_item:active {
	transform: scale(0.98);
}

.channel_item.active {
	color: #333;
	font-weight: bold;
}

.channel_text {
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
	transition: color 0.3s ease;
	white-space: nowrap;
}

.channel_item.active .channel_text {
	color: #333333;
	font-weight: 400;
	z-index: 2;
}

.active_indicator {
	position: absolute;
	left: 50%;
	top: 60%;
	transform: translateX(-45%);
	width: calc(100% - 20rpx);
	min-width: 40rpx;
	max-width: 120rpx;
	height: 8rpx;
	background-image: url('/static/marketSituation-image/bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	animation: slideIn 0.1s ease;
	border-radius: 8rpx;
	z-index: 1;
}

@keyframes slideIn {
	from {
		width: 0;
		opacity: 0;
	}

	to {
		width: 40rpx;
		opacity: 1;
	}
}

.scroll_indicator {
	border-left: 1rpx solid #b6b6b6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60rpx;
	height: 30rpx;
	background-color: #ffffff;
	flex-shrink: 0;
}

.scroll_indicator image {
	width: 20rpx;
	height: 20rpx;
	opacity: 0.5;
}

.content {
	margin-top: 20rpx;
	background-color: white;
}

.map {
	width: calc(100% - 60rpx);
	margin: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F3F3F3;
	border-radius: 30rpx;
	border: 1rpx solid #E0E0E0;
	padding: 30rpx 20rpx;
	box-sizing: border-box;
	/* 设置最小高度保护，但允许内容撑开 */
	min-height: 200rpx;
}

.map image {
	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 {
	position: fixed;
	bottom: 0;
}

/* 弹窗样式 */
.modal_overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;
}

.modal_content {
	width: 100%;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	max-height: 80vh;
	overflow: hidden;
}

.modal_header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal_title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
}

.modal_close {
	position: absolute;
	right: 40rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	color: #999;
}

.modal_body {
	padding: 40rpx;
}

.country_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20rpx;
}

.country_item {
	padding: 24rpx 30rpx;
	border-radius: 12rpx;
	background-color: #f8f8f8;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.country_item.selected {
	background-color: #ff4444;
	color: #fff;
}

.country_text {
	font-size: 28rpx;
	color: #333;
}

.country_item.selected .country_text {
	color: #fff;
}

.global_index {
	margin: 30rpx 20rpx 0 20rpx;
	display: flex;
	justify-content: space-between;
}

.global_index_title {
	margin-left: 20rpx;
	font-size: 40rpx;
	font-weight: 100;
	color: #333333;
	align-items: center;
}

.global_index_more {
	display: flex;
	gap: 10rpx;
	font-size: 28rpx;
	color: #333333;
	align-items: center;
}

.global_index_more image {
	width: 40rpx;
	height: 40rpx;
	align-items: center;
}

/* 卡片网格样式 */
.cards_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 30rpx 20rpx;
	gap: 20rpx;
}

.card_item {
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	/* 防止内容溢出 */
}

/* 响应式布局 - 小屏幕时改为两列 */
@media (max-width: 600rpx) {
	.cards_grid {
		grid-template-columns: repeat(2, 1fr);
		padding: 30rpx 20rpx;
	}
}

/* 超小屏幕时改为单列 */
@media (max-width: 400rpx) {
	.cards_grid {
		grid-template-columns: 1fr;
		padding: 30rpx 20rpx;
	}
}

.warn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10rpx;
	font-size: 28rpx;
	color: #666666;
	padding: 20rpx;
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.warn image {
	width: 40rpx;
	height: 40rpx;
	flex-shrink: 0;
	/* 防止图片被压缩 */
	position: relative;
	z-index: 2;
	/* 确保图片在最上层 */
}

.warn_text_container {
	flex: 1;
	overflow: hidden;
	position: relative;
	min-width: 0;
	/* 允许容器收缩 */
}

.warn_text {
	display: block;
	white-space: nowrap;
	will-change: transform;
	/* 优化动画性能 */
}

/* 文字滚动动画 */
@keyframes scrollText {
	0% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(0);
	}

	80% {
		transform: translateX(-85%);
	}

	100% {
		transform: translateX(-85%);
	}
}

/* 当文字超长时启用滚动动画 */
.warn_text.scroll-active {
	animation: scrollText 12s linear infinite;
	animation-delay: 2s;
	/* 延迟2秒开始滚动，让用户先看到开头 */
}

/* 底部安全区域 */
.bottom_safe_area {
	height: 40rpx;
	background-color: transparent;
}

/* 主容器样式调整 */
.main {
	position: relative;
	height: 100vh;
	overflow: hidden;
	background-color: white;
}
</style>