refactor(components): 优化消息组件样式和动画

- 修正了 live/index.js 中的样式对象- 优化了 x-message 组件的样式计算逻辑
- 改进了 tangPopup 组件的动画效果,使过渡更快且不完全消失
This commit is contained in:
xingyy 2025-02-08 16:34:03 +08:00
parent a791248752
commit 7e4fbc84ad
3 changed files with 18 additions and 12 deletions

View File

@ -1,5 +1,4 @@
<script setup>
import error from '../images/error.png'
import success from '../images/success.png'
import warning from '../images/warning.png'
@ -34,7 +33,7 @@ const props = defineProps({
type: Boolean,
default: true
},
customStyle: {
style: {
type: Object,
default: () => ({})
}
@ -62,18 +61,24 @@ const typeConfig = {
bgColor: '#FFF7EC',
}
}
// 使 props.style
const finalStyle = computed(() => {
return {
borderColor: props.style?.borderColor || typeConfig[props.type].borderColor,
backgroundColor: props.style?.backgroundColor || typeConfig[props.type].bgColor,
width: props.style?.width || '343px',
height: props.style?.height || 'auto',
minHeight: '46px',
...props.style
}
})
</script>
<template>
<div
:class="`box-border flex items-center border rounded-[4px] px-[15px] shadow-sm py-8px ${!message?'justify-center':''}`"
:style="{
borderColor: typeConfig[type].borderColor,
backgroundColor: typeConfig[type].bgColor,
width: customStyle.width || '343px',
height: customStyle.height || 'auto',
minHeight: '46px'
}"
:style="finalStyle"
>
<div v-if="showIcon" class="mr-[12px]">
<img

View File

@ -37,6 +37,7 @@ const close = () => emit('update:show', false);
const openShow=(item)=>{
showDetailInfo.value=item
showDetail.value=true
}
const loadMore = async () => {
pageRef.value.page++
@ -113,11 +114,11 @@ const loadMore = async () => {
text-overflow: ellipsis;
}
.blink {
animation: fade 1s linear infinite;
animation: fade 1s linear infinite; /* 改为0.4秒使用linear让过渡更快 */
}
@keyframes fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
50% { opacity: 0.4; } /* 改为0.3,这样不会完全消失 */
}
</style>

View File

@ -42,7 +42,7 @@ export const liveStore = createGlobalState(() => {
},
style: {
width: '151px',
bottom: '230px'
bottom: '230px',
},
}, 500000)
}else if (data.data?.tip?.tipType === 'othersBid'){