Learning/AntSK
1
0
Fork 0
mirror of https://github.com/AIDotNet/AntSK.git synced 2026-02-17 14:06:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
修改了`.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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/AntSK/Pages/ChatPage/Chat.razor
View File

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

13
src/AntSK/Pages/ChatPage/Components/ChatView.razor
View File

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