deepChartVueApp/pages/home/home.vue

<template>
	<view class="main">
		<!-- 顶部状态栏占位 -->
		<view class="top" :style="{height:iSMT+'px'}"></view>
		
		<!-- 头部导航 -->
		<view class="header">
			<view class="headphone-icon">
				<image src="https://d31zlh4on95l9h.cloudfront.net/images/bef2edba6cc0c85671fde07cfab5270d.png" class="header-icon-image"></image>
			</view>
			<view class="title">DeepChart</view>
			<view class="notification-icon">
				<image src="https://d31zlh4on95l9h.cloudfront.net/images/2554c84b91712d2a6cb6b00380e63bac.png" class="header-icon-image"></image>
			</view>
		</view>
		
		<!-- 内容区域 - 使用滚动视图 -->
		<scroll-view scroll-y class="content-container">
			<!-- 1. 今日市场概览 -->
			<market-overview></market-overview>
			
			<!-- 间隔 -->
			<view class="section-gap"></view>
			
			<!-- 新增欢迎部分 -->
			<view class="section welcome-section">
				<!-- 轮播图 -->
				<swiper class="welcome-swiper" circular autoplay interval="3000" duration="500" indicator-dots indicator-active-color="#4080ff">
					<swiper-item v-for="(item, index) in 5" :key="index">
						<image class="swiper-image" src="https://d31zlh4on95l9h.cloudfront.net/images/e4272cc034fa2a3d1ca588ef84e51ab0.png" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 2. DeepMate -->
			<view class="section deepmate-section">
				<DeepMate />
			</view>
			
			<!-- 3. 深度探索 -->
			<view class="section deep-exploration">
				<!-- 上部分：标题和查看更多按钮 -->
				<view class="section-header-container">
					<view class="section-header">
						<view class="header-left">
							<text class="section-title">深度探索</text>
						</view>
						<view class="header-right">
							<text class="more-btn">查看更多</text>
						</view>
					</view>
				</view>
				
				<!-- 下部分：四个图标 -->
				<view class="exploration-container">
					<view class="exploration-content">
						<view class="exploration-item">
							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/199472b0ee90a1c897f7c87b85accd84.png" mode="aspectFit" lazy-load="true"></image>
							<text class="exploration-text">主力追踪</text>
						</view>
						<view class="exploration-item">
							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/c25ca5e176efc961dabfa5d0d1b486b0.png" mode="aspectFit" lazy-load="true"></image>
							<text class="exploration-text">主力资达</text>
						</view>
						<view class="exploration-item">
							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/c064d7066dc8129a7df7b052762f82cf.png" mode="aspectFit" lazy-load="true"></image>
							<text class="exploration-text">主力解码</text>
						</view>
						<view class="exploration-item">
							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/9d69cceee9c515911477078af6f68d88.png" mode="aspectFit" lazy-load="true"></image>
							<text class="exploration-text">主力资金流</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 4. 我的自选 -->
			<view class="section my-selection">
				<!-- 上部分：标题和查看更多按钮 -->
				<view class="section-header-container">
					<view class="section-header">
						<text class="section-title">我的自选</text>
						<text class="more-btn">添加自选股</text>
					</view>
				</view>
				
				<!-- 下部分：股票列表 -->
				<view class="stock-container">
					<view class="stock-list">
						<view class="stock-item" v-for="(item, index) in myStocks" :key="item.code">
							<view class="stock-info">
								<view class="name-container">
									<text class="stock-name">{{item.name}}</text>
									<text class="stock-code-label">{{item.code}}</text>
								</view>
								<view class="price-container">
									<text class="stock-price">{{item.price}}</text>
									<text class="stock-change" :class="{'stock-up': item.change > 0, 'stock-down': item.change < 0}">{{item.change > 0 ? '+' : ''}}{{item.change}}%</text>
								</view>
							</view>
							<view class="stock-chart">
								<image :src="item.chartImg" mode="aspectFit" class="chart-image"></image>
							</view>
						</view>
					</view>
					
					<!-- 机构动向简报数据 -->
					<view class="institutional-reports">
						<view class="section-title-container">
							<text class="section-title-text">机构动向简报</text>
						</view>
						<view class="text-gap"></view>
						<view class="report-item" v-for="(report, index) in institutionalReports" :key="index">
							<view class="report-stock">{{report.stock}}</view>
							<view class="report-status">{{report.status}}</view>
						</view>
						<view class="view-more">
							<text>查看更多 >></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 5. 今日市场看点 -->
			<view class="section-header highlights-title-container">
				<text class="section-title">今日市场核心看点</text>
			</view>
			<view class="highlights-image-container">
				<image src="https://d31zlh4on95l9h.cloudfront.net/images/8d5365af968402a18cedb120c09460b0.png" mode="aspectFit" class="highlights-image"></image>
			</view>
			
			<!-- 底部空间 - 为底部导航腾出空间 -->
			<view class="bottom-space"></view>
		</scroll-view>
		
		<!-- 底部导航 -->
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script>
import footerBar from '../../components/footerBar.vue'
import MarketOverview from '../../components/MarketOverview.vue'
import DeepMate from '../../components/DeepMate.vue'

export default {
	components: {
		footerBar,
		MarketOverview,
		DeepMate
	},
	data() {
		return {
			type: 'home',
			iSMT: 0,
			
			// 深度探索数据
			explorationItems: [
				{ title: '主力追踪', icon: '/static/c1.png' },
				{ title: '主力资金', icon: '/static/c2.png' },
				{ title: '主力解码', icon: '/static/c3.png' },
				{ title: '主力资金流', icon: '/static/c4.png' }
			],
			
			// 我的自选股票数据
			myStocks: [
				{ name: '特斯拉', code: 'TSLA', price: '482.00', change: 2.80, chartImg: '/static/c5.png' },
				{ name: '英伟达', code: 'NVDA', price: '189.800', change: -2.92, chartImg: '/static/c6.png' },
				{ name: '苹果', code: 'AAPL', price: '256.430', change: 2.60, chartImg: '/static/c7.png' }
			],
			
			// 机构动向简报数据
			institutionalReports: [
				{ stock: '特斯拉', status: '当前市场多头资金占比，且多头资金持续流入。' },
				{ stock: '英伟达', status: '当前市场多头资金占比，且多头资金持续流入。' },
				{ stock: '苹果', status: '当前市场多头资金占比，且多头资金持续流入。' }
			],
			
			// 防抖定时器
			debounceTimer: null
		}
	},

	// Vue 2生命周期方法
	mounted() {
		// 状态栏高度
		this.iSMT = uni.getSystemInfoSync().statusBarHeight;
		
		// 预加载图片资源
		this.myStocks.forEach(stock => {
			// 使用uni.getImageInfo替代Image对象
			uni.getImageInfo({
				src: stock.chartImg,
				success: function(res) {
					// 图片加载成功
					console.log('图片预加载成功:', stock.name)
				},
				fail: function(err) {
					console.log('图片预加载失败:', err)
				}
			})
		})
	},
	
	methods: {
		// 防抖函数
		debounce(fn, delay = 300) {
			if (this.debounceTimer) clearTimeout(this.debounceTimer)
			this.debounceTimer = setTimeout(() => {
				fn()
				this.debounceTimer = null
			}, delay)
		}
	}
}
</script>

<style scoped>
.main {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #ffffff;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background-color: #ffffff;
}

.title {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	flex: 1;
}

.headphone-icon, .notification-icon {
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-icon-image {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.content-container {
	flex: 1;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.section {
	margin-bottom: 15px;
	/* background-color: #f5f5f5; */
	background-color: #ffffff;
	border-radius: 8px;
	padding: 15px;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 10px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #000000;
}
.section-title-text{
	font-size: 14px;

}

.text-gap{
	height: 10px;
}

.more-btn {
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	background-color: #000000;
	padding: 4px 8px;
	border-radius: 4px;
}

/* 市场概览样式 */
.market-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background-color: #ffffff;
	margin-bottom: 10px;
}

.market-content {
	background-color: #f5f5f5;
	border-radius: 8px;
	padding: 15px;
	margin: 0 15px;
}

.market-image {
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
}

.overview-image {
	width: 100%;
	border-radius: 8px;
}

.market-data {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 间隔样式 */
.section-gap {
	height: 20px;
}

.market-item {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
}

.down {
	color: #ff4d4f;
}

.up {
	color: #52c41a;
}

/* DeepMate样式 */
.deepmate-container {
	background-color: #ffe6e6;
	border-radius: 10px;
	padding: 15px;
	margin: 0 15px;
}

.deepmate-header {
	margin-bottom: 10px;
}

.title-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.title-left {
	width: 50%;
}

.title-right {
	width: 50%;
	display: flex;
	justify-content: flex-end;
}

.deepmate-title {
	font-size: 18px;
	font-weight: bold;
	color: #ff4d4f;
}

.deepmate-icon {
	width: 60px;
	height: 60px;
	margin-left: 0;
}

.deepmate-subtitle {
	font-size: 12px;
	color: #666;
	margin-left: 5px;
}

.deepmate-hotspots {
	margin: 10px 0;
}

.hotspot-item {
	background-color: #f5f5f5;
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 8px;
}

.hotspot-item text {
	font-size: 14px;
	color: #333;
}

.deepmate-action {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	border-radius: 20px;
	padding: 10px;
	margin-top: 10px;
}

/* 欢迎部分样式 */
.welcome-section {
	margin-bottom: 15px;
	padding: 0;
}

.welcome-swiper {
	width: 100%;
	height: 150px;
	border-radius: 0;
	overflow: hidden;
}

.deepmate-section {
	padding: 0;
}

.swiper-image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: contain;
}

/* 深度探索样式 */
.deep-exploration {
	margin-top: 15px;
	padding: 0; /* 移除内边距，让子容器自己控制 */
}

.section-header-container {
	margin-bottom: 10px;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background-color: #ffffff;
}

.header-left {
	display: flex;
	align-items: center;
}

.header-right {
	display: flex;
	align-items: center;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.more-btn {
	font-size: 12px;
	color: #ffffff;
}

.exploration-container {
	border-radius: 8px;
	overflow: hidden;
}

.exploration-content {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	background-color: #f5f5f5;
	border-radius: 8px;
}

.exploration-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 22%;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 10px 0;
}

.exploration-icon {
	width: 50px;
	height: 50px;
	margin-bottom: 8px;
}

.exploration-text {
	font-size: 12px;
	color: #333;
}

.icon-text {
	font-size: 12px;
}

/* 我的自选样式 */
.my-selection {
	padding: 0; /* 移除内边距，让子容器自己控制 */
}

.stock-container {
	border-radius: 8px;
	overflow: hidden;
	background-color: #f5f5f5;
	padding: 15px;
	box-sizing: border-box;
}

.stock-list {
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #f8f8f8;
	border-radius: 8px;
	padding: 15px;
	gap: 10px; /* 添加卡片之间的间距 */
}

.stock-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 3px;
	background-color: #ffffff;
	border-radius: 8px;
	width: 30%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	will-change: transform;
	transform: translateZ(0);
}

.stock-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 5px;
}

.stock-chart {
	display: flex;
	align-items: center;
	justify-content: center;
}

.name-container {
	display: flex;
	align-items: center;
	gap: 5px;
}

.stock-name {
	font-size: 12px;
	font-weight: bold;
	color: #333;
}

.stock-code-label {
	font-size: 12px;
	color: #666;
	background-color: #f5f5f5;
	padding: 0 4px;
	border-radius: 3px;
}

.stock-price {
	font-size: 12px;
	color: #666;
}

.price-container {
	display: flex;
	align-items: center;
	gap: 5px;
}

.stock-change {
	font-size: 12px;
}

.stock-up {
	color: #4cd964;
}

.stock-down {
	color: #ff3b30;
}

.chart-image {
	width: 100px;
	height: 40px;
}



/* 市场看点样式 */
.highlights-title-container {
	background-color: #ffffff;
	margin-bottom: 10px;
}

.highlights-image-container {
	background-color: #f5f5f5;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 15px;
}

.highlights-image {
	width: 100%;
	height: 150px;
	border-radius: 4px;
}

/* 机构动向简报样式 */
.institutional-reports {
	margin-top: 15px;
	background-color: #f8f8f8;
	border-radius: 8px;
	padding: 10px;
}

.section-title-container {
	position: relative;
	padding-left: 10px;
	margin-bottom: 5px;
}

.section-title-container:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background-color: #ff4d4f;
	border-radius: 2px;
}

.report-item {
	background-color: #ffffff;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 8px;
}

.report-stock {
	font-size: 14px;
	font-weight: bold;
	color: #e74c3c;
	margin-bottom: 5px;
}

.report-status {
	font-size: 12px;
	color: #333;
}

.view-more {
	text-align: center;
	color: #1890ff;
	font-size: 12px;
	padding: 5px;
}

/* 底部空间 */
.bottom-space {
	height: 60px;
}

/* 底部导航 */
.static-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
}
</style>