You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
729 lines
15 KiB
729 lines
15 KiB
<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" @click="goToDeepExploration">查看更多</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" @click="goToMarketSituation">添加自选股</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">
|
|
<view><text>查看更多 >></text></view>
|
|
<view><text class="disclaimer-text">免责声明：以上数据由AI生成，不作为最终投资建议，决策需独立！</text></view>
|
|
</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: {
|
|
goToDeepExploration() {
|
|
// 跳转到深度探索页面
|
|
uni.navigateTo({
|
|
url: '/pages/home/deepExploration'
|
|
});
|
|
},
|
|
goToMarketSituation() {
|
|
// 跳转到行情页面
|
|
uni.navigateTo({
|
|
url: '/pages/home/marketSituation'
|
|
});
|
|
},
|
|
// 防抖函数
|
|
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;
|
|
}
|
|
|
|
/* 免责声明样式 */
|
|
.disclaimer-text {
|
|
font-size: 8px;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 底部导航 */
|
|
.static-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|