feat: 状态标签支持多种颜色
- 绿色:运行中 - 黄色:已暂停 - 红色:已关闭/异常 - 灰色:其他状态
This commit is contained in:
parent
7f91e836b9
commit
238d969a36
@ -103,8 +103,8 @@
|
|||||||
<text class="card-tags">{{ holding.tags }}</text>
|
<text class="card-tags">{{ holding.tags }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-badge" :class="holding.statusType === 'green' ? 'bg-green-50' : 'bg-gray-100'">
|
<view class="status-badge" :class="getStatusBgClass(holding.statusType)">
|
||||||
<text class="status-text" :class="holding.statusType === 'green' ? 'text-green-600' : 'text-gray-500'">● {{ holding.status }}</text>
|
<text class="status-text" :class="getStatusTextClass(holding.statusType)">● {{ holding.status }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -147,6 +147,27 @@ const assetData = ref({
|
|||||||
// 持仓组合数据
|
// 持仓组合数据
|
||||||
const holdings = ref([]);
|
const holdings = ref([]);
|
||||||
|
|
||||||
|
// 状态标签样式
|
||||||
|
const getStatusBgClass = (statusType) => {
|
||||||
|
const classes = {
|
||||||
|
'green': 'bg-green-50',
|
||||||
|
'yellow': 'bg-yellow-50',
|
||||||
|
'red': 'bg-red-50',
|
||||||
|
'gray': 'bg-gray-100'
|
||||||
|
};
|
||||||
|
return classes[statusType] || 'bg-gray-100';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusTextClass = (statusType) => {
|
||||||
|
const classes = {
|
||||||
|
'green': 'text-green-600',
|
||||||
|
'yellow': 'text-yellow-600',
|
||||||
|
'red': 'text-red-600',
|
||||||
|
'gray': 'text-gray-500'
|
||||||
|
};
|
||||||
|
return classes[statusType] || 'text-gray-500';
|
||||||
|
};
|
||||||
|
|
||||||
// 防止重复请求的标志
|
// 防止重复请求的标志
|
||||||
let isFetching = false;
|
let isFetching = false;
|
||||||
|
|
||||||
@ -260,6 +281,14 @@ onShow(async () => {
|
|||||||
color: #059669;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-yellow-600 {
|
||||||
|
color: #D97706;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-red-600 {
|
||||||
|
color: #DC2626;
|
||||||
|
}
|
||||||
|
|
||||||
.text-red {
|
.text-red {
|
||||||
color: #EF4444;
|
color: #EF4444;
|
||||||
}
|
}
|
||||||
@ -563,6 +592,14 @@ onShow(async () => {
|
|||||||
background-color: #ECFDF5;
|
background-color: #ECFDF5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-yellow-50 {
|
||||||
|
background-color: #FFFBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-red-50 {
|
||||||
|
background-color: #FEF2F2;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-gray-100 {
|
.bg-gray-100 {
|
||||||
background-color: #F3F4F6;
|
background-color: #F3F4F6;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user