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