refactor(live): 优化直播页面消息提示和界面显示

- 移除不必要的空行和逗号
- 统一消息提示的展示时间
- 为艺术品结束提示添加背景色和边框色
- 在竞价信息中添加货币符号
- 调整侧边按钮弹窗的动画效果
This commit is contained in:
xingyy 2025-02-08 17:40:54 +08:00
parent f1bd2b183f
commit e8a89b184e
3 changed files with 8 additions and 7 deletions

View File

@ -67,7 +67,7 @@ onUnmounted(() => {
<div class="flex-grow-1 text-start" :style="`color: ${item.statusCode==='head'?'#D03050':'#939393'}`" >{{ item.statusCode==='head'?'领先':'出局' }}</div> <div class="flex-grow-1 text-start" :style="`color: ${item.statusCode==='head'?'#D03050':'#939393'}`" >{{ item.statusCode==='head'?'领先':'出局' }}</div>
<div class="flex-grow-1 text-center">{{ item.auctionType==='local'?'现场竞价':'网络竞价' }}</div> <div class="flex-grow-1 text-center">{{ item.auctionType==='local'?'现场竞价':'网络竞价' }}</div>
<div class="flex-grow-1 text-center">{{ item.createdAt }}</div> <div class="flex-grow-1 text-center">{{ item.createdAt }}</div>
<div class="flex-grow-1 text-center">{{ item.baseMoney }}</div> <div class="flex-grow-1 text-center">{{item.baseCurrency}}{{ item.baseMoney }}</div>
<div class="flex-grow-1 text-center text-#2B53AC">{{ item.userId===userInfo.ID?'我':'' }}</div> <div class="flex-grow-1 text-center text-#2B53AC">{{ item.userId===userInfo.ID?'我':'' }}</div>
</div> </div>
</template> </template>

View File

@ -141,11 +141,11 @@ watch(()=>props.show,(newValue)=>{
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.blink { .blink {
animation: fade 1s linear infinite; /* 改为0.4秒使用linear让过渡更快 */ animation: fade 1s linear infinite;
} }
@keyframes fade { @keyframes fade {
0%, 100% { opacity: 1; } 0%, 100% { opacity: 1; }
50% { opacity: 0.4; } /* 改为0.3,这样不会完全消失 */ 50% { opacity: 0.5; }
} }
</style> </style>

View File

@ -31,7 +31,6 @@ export const liveStore = createGlobalState(() => {
ws.onMessage((data) => { ws.onMessage((data) => {
auctionData.value = data.data auctionData.value = data.data
if (data.data?.wsType === 'tip' ) { if (data.data?.wsType === 'tip' ) {
if (data.data?.tip?.tipType === 'falling'){ if (data.data?.tip?.tipType === 'falling'){
message.warning({ message.warning({
@ -44,7 +43,7 @@ export const liveStore = createGlobalState(() => {
width: '151px', width: '151px',
bottom: '230px', bottom: '230px',
}, },
}, 500000) })
}else if (data.data?.tip?.tipType === 'othersBid'){ }else if (data.data?.tip?.tipType === 'othersBid'){
message.error({ message.error({
title: { title: {
@ -62,7 +61,7 @@ export const liveStore = createGlobalState(() => {
width: '151px', width: '151px',
bottom: '230px' bottom: '230px'
}, },
}, 500000) })
}else if (data.data?.tip?.tipType === 'successBid'){ }else if (data.data?.tip?.tipType === 'successBid'){
message.success({ message.success({
title: { title: {
@ -80,13 +79,15 @@ export const liveStore = createGlobalState(() => {
width: '151px', width: '151px',
bottom: '230px' bottom: '230px'
}, },
}, 500000) })
}else if (data.data?.tip?.tipType === 'artworkOver'){ }else if (data.data?.tip?.tipType === 'artworkOver'){
message.success({ message.success({
title: { title: {
text: '本拍品已结束', text: '本拍品已结束',
color: '#575757', color: '#575757',
align: 'center', align: 'center',
backgroundColor: '#fff',
borderColor:'#fff'
}, },
icon:false, icon:false,
subTitle:{ subTitle:{