refactor(components): 优化消息组件样式和动画
- 修正了 live/index.js 中的样式对象- 优化了 x-message 组件的样式计算逻辑 - 改进了 tangPopup 组件的动画效果,使过渡更快且不完全消失
This commit is contained in:
parent
a791248752
commit
7e4fbc84ad
@ -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
|
||||
|
@ -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>
|
@ -42,7 +42,7 @@ export const liveStore = createGlobalState(() => {
|
||||
},
|
||||
style: {
|
||||
width: '151px',
|
||||
bottom: '230px'
|
||||
bottom: '230px',
|
||||
},
|
||||
}, 500000)
|
||||
}else if (data.data?.tip?.tipType === 'othersBid'){
|
||||
|
Loading…
Reference in New Issue
Block a user