|
@ -125,6 +125,7 @@ onMounted(() => { |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
flex-shrink: 0; /* 防止GIF区域被压缩 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.gif-area img { |
|
|
.gif-area img { |
|
@ -139,11 +140,20 @@ onMounted(() => { |
|
|
transition: all 0.3s; |
|
|
transition: all 0.3s; |
|
|
/* 添加过渡效果 */ |
|
|
/* 添加过渡效果 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.message-area { |
|
|
|
|
|
margin-top: 2%; |
|
|
|
|
|
flex: 1; /* 消息区域占据剩余空间 */ |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
gap: 15px; |
|
|
|
|
|
} |
|
|
.marquee-container { |
|
|
.marquee-container { |
|
|
/* position: absolute; */ |
|
|
/* position: absolute; */ |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
|
|
|
/* ga */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.marquee-row { |
|
|
.marquee-row { |
|
@ -187,12 +197,6 @@ onMounted(() => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.message-area { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
overflow: auto; |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.message-bubble { |
|
|
.message-bubble { |
|
|
max-width: 70%; |
|
|
max-width: 70%; |
|
|
margin: 10px 20px; |
|
|
margin: 10px 20px; |
|
@ -214,13 +218,4 @@ onMounted(() => { |
|
|
margin-right: auto; |
|
|
margin-right: auto; |
|
|
border-bottom-left-radius: 5px; |
|
|
border-bottom-left-radius: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.message-area { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
gap: 15px; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
</style> |