宋杰
1 month ago
3 changed files with 1197 additions and 9 deletions
@ -0,0 +1,148 @@ |
|||||
|
<template> |
||||
|
<view class="deepmate"> |
||||
|
<view class="deepmate-container"> |
||||
|
<view class="deepmate-header"> |
||||
|
<view class="title-container"> |
||||
|
<view class="title-left"> |
||||
|
<text class="deepmate-title">DeepMate</text> |
||||
|
</view> |
||||
|
<view class="title-right"> |
||||
|
<image class="deepmate-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/7faa683450cc071bcc746fea8191ff6b.png" mode="aspectFit"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<text class="deepmate-subtitle">您的市场最佳顾问~</text> |
||||
|
</view> |
||||
|
<view class="deepmate-content"> |
||||
|
<view class="deepmate-question"> |
||||
|
<text>今日股票策略推荐是什么？</text> |
||||
|
</view> |
||||
|
<view class="deepmate-hotspots"> |
||||
|
<view class="hotspot-item"> |
||||
|
<text>热门股票分析</text> |
||||
|
</view> |
||||
|
<view class="hotspot-item"> |
||||
|
<text>行业趋势预测</text> |
||||
|
</view> |
||||
|
<view class="hotspot-item"> |
||||
|
<text>市场风险提示</text> |
||||
|
</view> |
||||
|
<view class="hotspot-item"> |
||||
|
<text>投资策略建议</text> |
||||
|
</view> |
||||
|
<view class="hotspot-item"> |
||||
|
<text>财经新闻解读</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="deepmate-action"> |
||||
|
<input class="stock-input" type="text" placeholder="请输入股票代码/名称，获取AI洞察" /> |
||||
|
<image class="send-button" src="https://d31zlh4on95l9h.cloudfront.net/images/3da018821a5c82b06a1d6ddc81b960ac.png" mode="aspectFit"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'DeepMate', |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
/* DeepMate样式 */ |
||||
|
.deepmate-container { |
||||
|
background-color: #ffe6e6; |
||||
|
border-radius: 10px; |
||||
|
padding: 15px 15px 15px 15px; |
||||
|
margin: 0; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.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: 30px; |
||||
|
height: 30px; |
||||
|
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: space-between; |
||||
|
align-items: center; |
||||
|
background-color: #ffffff; |
||||
|
padding: 8px 10px; |
||||
|
border-radius: 6px; |
||||
|
margin-top: 10px; |
||||
|
border: 1px solid #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.stock-input { |
||||
|
flex: 1; |
||||
|
height: 36px; |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
padding: 0 10px; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.send-button { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,384 @@ |
|||||
|
<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"> |
||||
|
<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(); |
||||
|
}, |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue