fanfpy/AssetManager.UniApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化持仓卡片布局：参考长桥，信息右对齐，层次更清晰

Browse Source
This commit is contained in:
claw_bot 2026-03-10 09:41:40 +00:00
parent 10c0de69a2
commit dad59388ca
1 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
pages/detail/detail.vue
View File

@ -77,28 +77,25 @@
<view class="stock-icon" :class="index % 2 === 0 ? 'bg-blue-100 text-blue' : 'bg-orange-100 text-orange'"> <view class="stock-icon" :class="index % 2 === 0 ? 'bg-blue-100 text-blue' : 'bg-orange-100 text-orange'">
<text class="icon-char">{{ item.stockName?.charAt(0) || item.stockCode?.charAt(0) || 'S' }}</text> <text class="icon-char">{{ item.stockName?.charAt(0) || item.stockCode?.charAt(0) || 'S' }}</text>
</view> </view>
<view class="flex-col"> <view class="flex-col flex-1">
<!-- 第一行：股票名 + 持仓市值 -->
<view class="flex-row justify-between items-center">
<text class="stock-name">{{ item.stockName || item.stockCode }}</text> <text class="stock-name">{{ item.stockName || item.stockCode }}</text>
<text class="stock-code">{{ item.stockCode }} · {{ item.amount }}份</text>
</view>
</view>
<view class="flex-col align-right">
<text class="market-val">{{ getCurrencySymbol(portfolioData.currency) }}{{ (item.totalValue || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</text> <text class="market-val">{{ getCurrencySymbol(portfolioData.currency) }}{{ (item.totalValue || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</text>
</view>
<!-- 第二行：代码+数量 + 现价 -->
<view class="flex-row justify-between items-center mt-1">
<text class="stock-code">{{ item.stockCode }} · {{ item.amount }}份</text>
<text class="price-text">{{ getCurrencySymbol(portfolioData.currency) }}{{ (item.currentPrice || 0).toLocaleString('zh-CN', { minimumFractionDigits: 3, maximumFractionDigits: 3 }) }}</text>
</view>
<!-- 第三行：占比 + 成本价 -->
<view class="flex-row justify-between items-center mt-1">
<text class="weight-tag">比例 {{ (item.ratio || 0).toFixed(1) }}%</text> <text class="weight-tag">比例 {{ (item.ratio || 0).toFixed(1) }}%</text>
<text class="cost-text">{{ getCurrencySymbol(portfolioData.currency) }}{{ (item.averagePrice || 0).toLocaleString('zh-CN', { minimumFractionDigits: 3, maximumFractionDigits: 3 }) }}</text>
</view> </view>
</view> <!-- 第四行：（空） + 持仓盈亏 -->
<view class="flex-row justify-between items-center mt-1">
<view class="divider"></view> <text></text>
<view class="pos-bottom">
<view class="pnl-item">
<text class="pnl-label">成本价</text>
<text class="pnl-val">
{{ getCurrencySymbol(portfolioData.currency) }}{{ (item.averagePrice || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
</text>
</view>
<view class="pnl-item align-right">
<text class="pnl-label">持仓盈亏</text>
<text class="pnl-val" :class="(item.profit || 0) >= 0 ? 'text-red' : 'text-green'"> <text class="pnl-val" :class="(item.profit || 0) >= 0 ? 'text-red' : 'text-green'">
{{ (item.profit || 0) >= 0 ? '+' : '' }}{{ getCurrencySymbol(portfolioData.currency) }}{{ (item.profit || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }} {{ (item.profit || 0) >= 0 ? '+' : '' }}{{ getCurrencySymbol(portfolioData.currency) }}{{ (item.profit || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
<text class="pnl-rate"> ({{ (item.profitRate || 0) >= 0 ? '+' : '' }}{{ (item.profitRate || 0).toFixed(2) }}%)</text> <text class="pnl-rate"> ({{ (item.profitRate || 0) >= 0 ? '+' : '' }}{{ (item.profitRate || 0).toFixed(2) }}%)</text>
@ -108,6 +105,8 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</view>
<view class="section-container"> <view class="section-container">
<view class="section-header"> <view class="section-header">
@ -567,6 +566,8 @@ const deletePortfolio = async () => {
.gap-2 { gap: 16rpx; } .gap-2 { gap: 16rpx; }
.align-right { align-items: flex-end; } .align-right { align-items: flex-end; }
.pb-0 { padding-bottom: 0 !important; } .pb-0 { padding-bottom: 0 !important; }
.mt-1 { margin-top: 8rpx; }
.flex-1 { flex: 1; }
/* 颜色工具 */ /* 颜色工具 */
.text-red { color: #EF4444; } .text-red { color: #EF4444; }
@ -671,12 +672,12 @@ const deletePortfolio = async () => {
.icon-char { font-size: 32rpx; font-weight: 800; } .icon-char { font-size: 32rpx; font-weight: 800; }
.stock-name { font-size: 30rpx; font-weight: 700; color: #1F2937; } .stock-name { font-size: 30rpx; font-weight: 700; color: #1F2937; }
.stock-code { font-size: 24rpx; color: #9CA3AF; margin-top: 4rpx; } .stock-code { font-size: 24rpx; color: #9CA3AF; margin-top: 4rpx; }
.market-val { font-size: 32rpx; font-weight: 700; color: #1F2937; } .market-val { font-size: 30rpx; font-weight: 700; color: #1F2937; }
.weight-tag { font-size: 22rpx; color: #6B7280; background-color: #F3F4F6; padding: 2rpx 12rpx; border-radius: 8rpx; margin-top: 8rpx; } .price-text { font-size: 26rpx; color: #1F2937; }
.divider { height: 1rpx; background-color: #F3F4F6; margin: 24rpx 0; } .cost-text { font-size: 24rpx; color: #6B7280; }
.pos-bottom { display: flex; justify-content: space-between; } .weight-tag { font-size: 22rpx; color: #6B7280; background-color: #F3F4F6; padding: 2rpx 8rpx; border-radius: 6rpx; }
.pnl-label { font-size: 22rpx; color: #9CA3AF; margin-bottom: 4rpx; } .pnl-val { font-size: 26rpx; font-weight: 700; }
.pnl-val { font-size: 28rpx; font-weight: 700; } .pnl-rate { font-size: 22rpx; opacity: 0.9; }
/* 交易明细 */ /* 交易明细 */
.timeline-box { padding: 0 16rpx; } .timeline-box { padding: 0 16rpx; }