Browse Source
Merge branch 'milestone-20251031-简版功能开发' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into wangyi/feature-20251022162725-启动页登录注册
wangyi/feature-20251022162725-启动页登录注册
Merge branch 'milestone-20251031-简版功能开发' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into wangyi/feature-20251022162725-启动页登录注册
wangyi/feature-20251022162725-启动页登录注册
Ethereal
1 month ago
19 changed files with 1307 additions and 25 deletions
-
198components/DeepMate.vue
-
385components/MarketOverview.vue
-
50components/footerBar.vue
-
697pages/home/home.vue
-
BINstatic/footBar-image/c1.png
-
BINstatic/footBar-image/c2.png
-
BINstatic/footBar-image/c4.png
-
BINstatic/footBar-image/c5.png
-
BINstatic/footBar-image/deepExploration-selected.png
-
BINstatic/footBar-image/deepExploration.png
-
BINstatic/footBar-image/deepmate-selected.png
-
BINstatic/footBar-image/deepmate.png
-
BINstatic/footBar-image/home-selected.png
-
BINstatic/footBar-image/home.png
-
BINstatic/footBar-image/logo.png
-
BINstatic/footBar-image/marketSituation-selected.png
-
BINstatic/footBar-image/marketSituation.png
-
BINstatic/footBar-image/member-selected.png
-
BINstatic/footBar-image/member.png
@ -0,0 +1,198 @@ |
|||
<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> |
|||
<text class="deepmate-subtitle">您的市场最佳顾问~</text> |
|||
</view> |
|||
<view class="title-right"> |
|||
<image class="deepmate-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/7faa683450cc071bcc746fea8191ff6b.png" mode="aspectFit"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="deepmate-content"> |
|||
<view class="deepmate-hotspots"> |
|||
<view class="deepmate-question"> |
|||
<text class="question-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 class="hotspot-item"> |
|||
<text>财经新闻解读</text> |
|||
</view> |
|||
</view> |
|||
<view class="deepmate-action"> |
|||
<input class="stock-input" type="text" placeholder="请输入股票代码/名称，获取AI洞察" /> |
|||
<view class="send-button-container"> |
|||
<image class="send-button" src="https://d31zlh4on95l9h.cloudfront.net/images/3da018821a5c82b06a1d6ddc81b960ac.png" mode="aspectFit"></image> |
|||
</view> |
|||
</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%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.title-right { |
|||
width: 50%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.deepmate-title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #ff4d4f; |
|||
display: block; |
|||
} |
|||
|
|||
.deepmate-icon { |
|||
width: 50px; |
|||
height: 50px; |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.deepmate-subtitle { |
|||
font-size: 12px; |
|||
color: #666; |
|||
display: block; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.deepmate-hotspots { |
|||
margin: 10px 0; |
|||
background-color: #ffffff; |
|||
border-radius: 10px; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.deepmate-question { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 10px; |
|||
padding-left: 10px; |
|||
position: relative; |
|||
} |
|||
|
|||
.deepmate-question:before { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
width: 4px; |
|||
background-color: #ff4d4f; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.question-text { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
|
|||
.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: #ff4d4f; |
|||
padding: 8px 15px; |
|||
border-radius: 25px; |
|||
margin-top: 10px; |
|||
border: none; |
|||
} |
|||
|
|||
.stock-input { |
|||
flex: 1; |
|||
height: 36px; |
|||
font-size: 14px; |
|||
color: #ffffff; |
|||
padding: 0 10px; |
|||
border: none; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.stock-input::placeholder { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.send-button-container { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 36px; |
|||
height: 36px; |
|||
background-color: #ffffff; |
|||
border-radius: 50%; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.send-button { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,385 @@ |
|||
<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; |
|||
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> |
|||
|
Before Width: 100 | Height: 100 | Size: 401 B |
|
Before Width: 100 | Height: 100 | Size: 470 B |
|
Before Width: 100 | Height: 100 | Size: 476 B |
|
Before Width: 100 | Height: 100 | Size: 472 B |
|
After Width: 36 | Height: 36 | Size: 1.9 KiB |
|
After Width: 36 | Height: 36 | Size: 2.8 KiB |
|
After Width: 98 | Height: 98 | Size: 12 KiB |
|
After Width: 98 | Height: 98 | Size: 11 KiB |
|
After Width: 40 | Height: 35 | Size: 1.3 KiB |
|
After Width: 40 | Height: 35 | Size: 1.9 KiB |
|
Before Width: 72 | Height: 72 | Size: 3.9 KiB |
|
After Width: 36 | Height: 31 | Size: 1.0 KiB |
|
After Width: 36 | Height: 31 | Size: 1.6 KiB |
|
After Width: 36 | Height: 36 | Size: 1.4 KiB |
|
After Width: 36 | Height: 36 | Size: 2.1 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue