deepChartVueApp/pages/home/deepExploration.vue

<template>
	<view class="main">
		<!-- 顶部状态栏占位 -->
		<view class="top" :style="{height:iSMT+'px'}"></view>
		<!-- 标题图标部分 -->
		<deepExploration_header></deepExploration_header>
		<view class="search">
			<input v-model="stockName" class="searchInput" type="text" placeholder="请输入股票名称、股票代码"
				placeholder-style="color: #A6A6A6; font-size: 22rpx;" />
			<image @click="searchStock" class="seachIcon" src="/static/deepExploration-images/search.png"
				mode="aspectFill"></image>
		</view>

		<!-- 四大功能模块 -->
		<view class="select">
			<view class="selectItem" @click="toMain('主力追踪')">
				<image class="img" src="/static/deepExploration-images/icon3.png" mode="aspectFill"></image>
				<view class="txt">主力追踪</view>
			</view>
			<view class="selectItem" @click="toMain('主力雷达')">
				<image class="img" src="/static/deepExploration-images/icon2.png" mode="aspectFill"></image>
				<view class="txt">主力雷达</view>
			</view>
			<view class="selectItem" @click="toMain('主力解码')">
				<image class="img" src="/static/deepExploration-images/icon1.png" mode="aspectFill"></image>
				<view class="txt">主力解码</view>
			</view>
			<view class="selectItem" @click="toMain('主力资金流')">
				<image class="img" src="/static/deepExploration-images/icon4.png" mode="aspectFill"></image>
				<view class="txt">主力资金流</view>
			</view>
		</view>

		<!-- 灰色间隔 -->
		<view class="gap"></view>
		<!-- 选股策略 -->
		<view class="stockSelection">
			<view class="stockSelection_top">
				<view class="txt">
					<text>选股策略</text>
				</view>
				<view class="viewAll" @click='viewAll'>
					<text>查看全部</text>
				</view>
			</view>

			<view class="stockSelection_content">
				<view class="selectionItem">
					<view class="header">
						<view class="left">
							<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
							<text>抄底卖顶</text>
						</view>
						<view class="right">
							<image src="/static/deepExploration-images/Americle.png" mode="aspectFill"></image>
							<text>美股</text>
						</view>

					</view>
					<view class="content">
						<view class="contentTitle">
							<view class="contentTitle_name">股票名称</view>
							<view class="contentTitle_close">最新收盘价</view>
							<view class="contentTitle_price">选股价格</view>
						</view>
						<view class="contentItem">
							<view class="row" v-for="(item,index) in stockData" :key="index">
								<view class="nameItem">{{item.name}}</view>
								<view class="closeItem">{{item.close}}</view>
								<view class="priceItem">{{item.select}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="stockSelection_content">
				<view class="selectionItem">
					<view class="header">
						<view class="left">
							<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
							<text>抄底卖顶</text>
						</view>
						<view class="right">
							<image src="/static/deepExploration-images/Americle.png" mode="aspectFill"></image>
							<text>美股</text>
						</view>
					</view>
					<view class="content">
						<view class="contentTitle">
							<view class="contentTitle_name">股票名称</view>
							<view class="contentTitle_close">最新收盘价</view>
							<view class="contentTitle_price">选股价格</view>
						</view>
						<view class="contentItem">
							<view class="row" v-for="(item,index) in stockData" :key="index">
								<view class="nameItem">{{item.name}}</view>
								<view class="closeItem">{{item.close}}</view>
								<view class="priceItem">{{item.select}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import footerBar from '../../components/footerBar.vue'

const type = ref('deepExploration')
const iSMT = ref(0)

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

<style scoped>
.static-footer {
	position: fixed;
	bottom: 0;
}
</style>