调整聊天气泡尾部样式以优化外观

修改了`.chat-bubble.received::after`和`.chat-bubble.sent::after`伪元素的定位方式,将`bottom`替换为`top`,并调整了宽度从`16px`到`18px`。更新了`clip-path`属性以改进尾部形状,同时调整了`left`和`right`的偏移值以优化位置。
This commit is contained in:
zyxucp
2025-10-05 16:11:24 +08:00
parent 15fd59571f
commit f03649146f
2 changed files with 8 additions and 7 deletions

View File

@@ -37,7 +37,7 @@
<GridCol Span="10">
<Card Style="height: 75vh;overflow: auto;">
<TitleTemplate>
<Icon Type="search" /> 调试结果
<Icon Type="search" /> 知识溯源
</TitleTemplate>
<Extra>

View File

@@ -242,8 +242,9 @@
.chat-bubble.sent::after {
content: "";
position: absolute;
bottom: 16px;
width: 16px;
top: 16px;
bottom: auto;
width: 18px;
height: 18px;
transform: none;
border-radius: 0;
@@ -252,15 +253,15 @@
}
.chat-bubble.received::after {
left: -12px;
left: -14px;
background: var(--bubble-recv);
clip-path: polygon(100% 0, 0 50%, 100% 100%);
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.chat-bubble.sent::after {
right: -12px;
right: -14px;
background: var(--bubble-sent);
clip-path: polygon(0 0, 100% 50%, 0 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.message-meta {