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.
391 lines
9.4 KiB
391 lines
9.4 KiB
<template>
|
|
<view>
|
|
<!-- 第一行：白色背景，标题和按钮 -->
|
|
<view class="market-header">
|
|
<text class="section-title">今日市场概览</text>
|
|
<text class="more-btn" @click="showMarketSelector">{{ buttonText }}</text>
|
|
</view>
|
|
|
|
<!-- 第二行：灰色圆角背景，市场数据 -->
|
|
<view class="market-content">
|
|
<!-- 默认显示图片 -->
|
|
<view class="selected-market" v-if="!showForexMarket">
|
|
<image class="market-image" src="https://d31zlh4on95l9h.cloudfront.net/images/dee46373b5593d5f315d91675a38fb61.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<!-- 外汇市场样式 -->
|
|
<view class="selected-market" v-if="showForexMarket">
|
|
<view class="forex-market">
|
|
<!-- 上部分：三个汇率容器 -->
|
|
<view class="forex-rates">
|
|
<view class="forex-rate-item up">
|
|
<text class="forex-pair">美元/日元</text>
|
|
<text class="forex-value">151.13</text>
|
|
<text class="forex-change">+1.62%</text>
|
|
</view>
|
|
<view class="forex-rate-item down">
|
|
<text class="forex-pair">美元/韩元</text>
|
|
<text class="forex-value">1424.900</text>
|
|
<text class="forex-change">-2.92%</text>
|
|
</view>
|
|
<view class="forex-rate-item up">
|
|
<text class="forex-pair">美元/英镑</text>
|
|
<text class="forex-value">0.730</text>
|
|
<text class="forex-change">+2.92%</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 中部分：智能解读标题 -->
|
|
<view class="forex-analysis-title">
|
|
<text class="analysis-title">智能解读</text>
|
|
</view>
|
|
|
|
<!-- 下部分：智能解读内容 -->
|
|
<view class="forex-analysis-content">
|
|
<view class="analysis-icon-container">
|
|
<image class="analysis-brain-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/8f35e54c52412467101370aa70d8fdb2.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="analysis-items">
|
|
<view class="analysis-item">
|
|
<text class="analysis-dot orange"></text>
|
|
<text class="analysis-text">今日市场情报: 偏乐观</text>
|
|
</view>
|
|
<view class="analysis-item">
|
|
<text class="analysis-dot blue"></text>
|
|
<text class="analysis-text">市场风险评级: 需警惕潜在风险</text>
|
|
</view>
|
|
<view class="analysis-item" @click="goToMorningMarketAnalysis">
|
|
<text class="analysis-dot green"></text>
|
|
<text class="analysis-text">早盘解析: 今日高开, 芯片、稀土、公共</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 市场选择对话框 -->
|
|
<uni-popup ref="marketPopup" type="center" :mask-click="true" @change="popupChange">
|
|
<view class="market-dialog">
|
|
<view class="dialog-title">
|
|
<text>选择市场</text>
|
|
</view>
|
|
<view class="market-list">
|
|
<view class="market-option" v-for="(market, index) in marketOptions" :key="index" @click="selectMarket(market.id)">
|
|
<view class="market-flag">
|
|
<image :src="market.flag" mode="aspectFit" class="flag-image"></image>
|
|
</view>
|
|
<view class="market-name-container">
|
|
<text class="market-option-name">{{ market.name }}</text>
|
|
</view>
|
|
<view class="market-checkbox">
|
|
<radio :checked="selectedMarket === market.id" color="#4080ff" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dialog-buttons">
|
|
<button class="confirm-btn" @click="confirmMarketSelection">确认</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MarketOverview',
|
|
data() {
|
|
return {
|
|
selectedMarket: 'forex',
|
|
tempSelectedMarket: 'forex', // 临时选择，确认后才会应用
|
|
previousMarket: null,
|
|
buttonText: '切换市场',
|
|
showSelector: false,
|
|
showForexMarket: false, // 默认不显示外汇市场内容
|
|
marketOptions: [
|
|
{ id: 'forex', name: '外汇市场', flag: '/static/c2.png', value: '+1.62%', trend: 'up' }
|
|
],
|
|
marketData: {
|
|
'forex': {
|
|
name: '外汇市场',
|
|
value: '+1.62%',
|
|
trend: 'up',
|
|
indicators: [
|
|
{ name: '美元/日元', value: '151.13 +1.62%', trend: 'up' },
|
|
{ name: '美元/韩元', value: '1424.900 -2.92%', trend: 'down' },
|
|
{ name: '美元/英镑', value: '0.79 +2.92%', trend: 'up' }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
showMarketSelector() {
|
|
// 切换显示外汇市场内容
|
|
this.showForexMarket = !this.showForexMarket;
|
|
// 更新按钮文本
|
|
this.buttonText = this.showForexMarket ? '外汇市场' : '切换市场';
|
|
},
|
|
popupChange(e) {
|
|
// 对话框关闭时，如果没有确认，则恢复原来的选择
|
|
if (!e.show && this.tempSelectedMarket !== this.selectedMarket) {
|
|
this.tempSelectedMarket = this.selectedMarket;
|
|
}
|
|
},
|
|
selectMarket(marketId) {
|
|
// 临时选择市场，不立即应用
|
|
this.tempSelectedMarket = marketId;
|
|
},
|
|
confirmMarketSelection() {
|
|
// 确认选择，应用市场选择并关闭对话框
|
|
this.selectedMarket = this.tempSelectedMarket;
|
|
this.showSelector = false;
|
|
this.$refs.marketPopup.close();
|
|
},
|
|
goToMorningMarketAnalysis() {
|
|
// 跳转到早盘解析页面
|
|
uni.navigateTo({
|
|
url: '/pages/morningMarketAnalysis/morningMarketAnalysis'
|
|
});
|
|
},
|
|
getSelectedMarketName() {
|
|
if (!this.selectedMarket) return '';
|
|
return this.marketData[this.selectedMarket].name;
|
|
},
|
|
getSelectedMarketValue() {
|
|
if (!this.selectedMarket) return '';
|
|
return this.marketData[this.selectedMarket].value;
|
|
},
|
|
getSelectedMarketTrend() {
|
|
if (!this.selectedMarket) return '';
|
|
return this.marketData[this.selectedMarket].trend;
|
|
},
|
|
getSelectedMarketIndicators() {
|
|
if (!this.selectedMarket) return [];
|
|
return this.marketData[this.selectedMarket].indicators;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* 市场概览样式 */
|
|
.market-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.more-btn {
|
|
font-size: 14px;
|
|
color: #4080ff;
|
|
}
|
|
|
|
.market-content {
|
|
margin: 0 0 15px;
|
|
background-color: #f5f7fa;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 外汇市场样式 */
|
|
.forex-market {
|
|
padding: 15px;
|
|
}
|
|
|
|
.forex-rates {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.forex-rate-item {
|
|
width: 30%;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.forex-rate-item.up {
|
|
background-color: rgba(82, 196, 26, 0.1);
|
|
border: 1px solid #52c41a;
|
|
}
|
|
|
|
.forex-rate-item.down {
|
|
background-color: rgba(245, 34, 45, 0.1);
|
|
border: 1px solid #f5222d;
|
|
}
|
|
|
|
.forex-pair {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.forex-value {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.forex-change {
|
|
font-size: 12px;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.forex-rate-item.down .forex-change {
|
|
color: #f5222d;
|
|
}
|
|
|
|
.forex-analysis-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
border-left: 3px solid #f5222d;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
|
|
.analysis-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.forex-analysis-content {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.analysis-icon-container {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: center;
|
|
}
|
|
|
|
.analysis-brain-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.analysis-items {
|
|
flex: 1;
|
|
}
|
|
|
|
.analysis-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.analysis-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.analysis-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.analysis-dot.orange {
|
|
background-color: #fa8c16;
|
|
}
|
|
|
|
.analysis-dot.blue {
|
|
background-color: #1890ff;
|
|
}
|
|
|
|
.analysis-dot.green {
|
|
background-color: #52c41a;
|
|
}
|
|
|
|
.analysis-text {
|
|
font-size: 12px;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 市场选择对话框样式 */
|
|
.market-dialog {
|
|
width: 300px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dialog-title {
|
|
padding: 15px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.market-list {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.market-option {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.market-flag {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.flag-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.market-name-container {
|
|
flex: 1;
|
|
}
|
|
|
|
.market-option-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.dialog-buttons {
|
|
padding: 10px 15px 15px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.confirm-btn {
|
|
width: 80%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background-color: #4080ff;
|
|
color: #fff;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|