deepChartVueApp/pages/deepExploration/MainForceActions.vue

<template>
	<view class="main">
		<!-- 顶部状态栏占位 -->
		<view class="top" :style="{height:iSMT+'px'}"></view>
		<deepExploration_header></deepExploration_header>

		<view class="content">
			<view class="select">
				<image class="img" :src="navItems[currentIndex].icon" mode=""></image>
				<view v-for="(item, index) in navItems" :key="index" class="selectItem"
					:class="{ active: currentIndex === index }" @click="currentIndex = index">
					<button class="btn"></button>
				</view>
			</view>

			<view class="graphAndTxt">
				<view class="graph">
					<view class="graph_header">
						<view class="left">TESA</view>
						<view class="center">
							<image class="last" src="/static/deepExploration-images/last.png" mode="aspectFill"></image>
							<text>Taewlkj.sejssssssssf</text>
							<image class="next" src="/static/deepExploration-images/next.png" mode="aspectFill"></image>
						</view>
						<view class="right">2025/10/26</view>
					</view>
					<view class="graph_data">
						<text>435.900</text>
						<text>22.410</text>
						<text>5.120%</text>
					</view>
					<view class="graph_content"></view>
				</view>
				<view class="txt">
					<view class="txtHeader">
						<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
						<text>主力追踪</text>
					</view>
					<view class="txtContent"></view>
				</view>
			</view>
		</view>

		<!-- 底部切换栏 -->
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import deepExploration_header from '@/components/deepExploration_header.vue'
	import footerBar from '@/components/footerBar.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const type = ref('deepExploration')
	const iSMT = ref(0)
	const currentIndex = ref(0) // 新增：初始化选中索引，修复点击无效问题

	const navItems = ref([{
			name: '主力追踪',
			icon: '/static/deepExploration-images/1.png',
		},
		{
			name: '主力雷达',
			icon: '/static/deepExploration-images/2.png',
		},
		{
			name: '主力解码',
			icon: '/static/deepExploration-images/3.png',
		},
		{
			name: '主力资金流',
			icon: '/static/deepExploration-images/4.png',
		},
	]);

	onMounted(() => {
		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
	})
	onLoad((e) => {
		if (e.index) {
			currentIndex.value = e.index - 1
			console.log('模块：', currentIndex.value);
		}
	})
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.content {
			margin-top: 30rpx;
			padding-top: 30rpx;
			background-color: rgb(248, 248, 248);

			.select {
				position: relative;
				margin-bottom: -5rpx;

				.img {
					width: 750rpx;
					height: 198rpx;
				}

				.selectItem {
					.btn {
						position: absolute;
						width: 120rpx;
						height: 150rpx;
						background-color: transparent;

						&::after {
							border: none;
						}

					}

					&:nth-of-type(1) .btn {
						// 对应 index=0
						top: 30rpx;
						left: 60rpx;
					}

					&:nth-of-type(2) .btn {
						// 对应 index=1
						top: 30rpx; // 这里修改会影响 index=1 的按钮
						left: 230rpx;
					}

					&:nth-of-type(3) .btn {
						// 对应 index=2
						top: 30rpx;
						left: 400rpx;
					}

					&:nth-of-type(4) .btn {
						// 对应 index=3
						top: 30rpx;
						left: 570rpx;
					}
				}
			}

			.graphAndTxt {
				height: 300rpx;
				background-color: #fff;
				border-radius: 50rpx 50rpx 0 0;
				padding: 68.6rpx 36.5rpx 0 36.5rpx;

				.graph {
					border: 1rpx solid #e2e2e2;
					height: 600rpx;
					border-radius: 30rpx 30rpx 0 0;

					.graph_header {
						padding: 32rpx 20.5rpx 0 24rpx;
						display: flex;
						align-items: center;

						.left {
							color: #333333;
							font-family: "PingFang SC";
							font-size: 15px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}

						.center {
							margin-left: 105rpx;
							display: flex;
							align-items: center;

							text {
								width: 160rpx;
								height: 36rpx;
								padding-left: 10rpx;
								color: #000000;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-align: center;
								font-family: "PingFang SC";
								font-size: 18px;
								font-style: normal;
								font-weight: 500;
								line-height: 18px;
							}

							.last {
								width: 15rpx;
								height: 20rpx;
								margin-right: 30rpx;
							}

							.next {
								width: 15rpx;
								height: 20rpx;
								margin-left: 30rpx;
							}
						}

						.right {
							margin-left: 50rpx;
							color: #6a6a6a;
							font-family: "PingFang SC";
							font-size: 13px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}
					}

					.graph_data {
						display: flex;
						padding: 48rpx 24rpx;

						text {
							display: flex;
							color: #25ba5d;
							font-family: "PingFang SC";
							font-size: 17px;
							line-height: 17px;
						}

						text:nth-child(2) {
							margin-left: 120rpx;
						}

						text:nth-child(3) {
							margin-left: 150rpx;
						}
					}

					.graph_content {}

				}

				.txt {
					background-color: #F3F3F3;
					margin-top: 48rpx;
					border-radius: 30rpx;

					.txtHeader {
						padding: 30rpx 24rpx;

						image {
							width: 20rpx;
							height: 20rpx;
						}

						text {
							background-color: #FFFFFF;
							color: #000000;
							padding: 0 22rpx;
							border-radius: 22rpx;
							font-size: 28rpx;
							font-weight: 400;
							line-height: 37rpx;
						}
					}

					.txtContent {
						min-height: 200rpx;

					}
				}

			}

		}

		.static-footer {
			position: fixed;
			bottom: 0;
			width: 100%; // 补充宽度，避免布局异常
		}
	}
</style>