hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-24 23:06:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

修复透明卡片问题

Browse Source
This commit is contained in:
xuncha
2026-02-25 17:59:42 +08:00
parent a51fa5e4a2
commit 9585a02959
2 changed files with 58 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/ChatPage.scss
View File

@@ -1041,7 +1041,7 @@
// 链接卡片消息样式
.link-message {
width: 280px;
background: var(--card-bg);
background: var(--card-inner-bg);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
@@ -1167,15 +1167,24 @@
// 适配发送出去的消息中的链接卡片
.message-bubble.sent .link-message {
background: var(--card-bg);
border: 1px solid var(--border-color);
background: var(--sent-card-bg);
border: 1px solid rgba(255, 255, 255, 0.15);
&:hover {
background: var(--primary-hover);
border-color: rgba(255, 255, 255, 0.25);
}
.link-title {
color: var(--text-primary);
color: white;
}
.link-desc {
color: var(--text-secondary);
color: rgba(255, 255, 255, 0.8);
}
.appmsg-url-line {
color: rgba(255, 255, 255, 0.6);
}
}
@@ -1258,7 +1267,7 @@
// 视频号卡片
.channel-video-card {
width: 200px;
background: var(--card-bg);
background: var(--card-inner-bg);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-color);
@@ -1403,7 +1412,7 @@
// 位置消息卡片
.location-message {
width: 240px;
background: var(--card-bg);
background: var(--card-inner-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
@@ -1847,6 +1856,20 @@
}
}
// 卡片类消息：气泡变透明，让卡片自己做视觉容器
.message-bubble .bubble-content:has(.link-message),
.message-bubble .bubble-content:has(.card-message),
.message-bubble .bubble-content:has(.chat-record-message),
.message-bubble .bubble-content:has(.official-message),
.message-bubble .bubble-content:has(.channel-video-card),
.message-bubble .bubble-content:has(.location-message) {
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.emoji-image {
max-width: 120px;
max-height: 120px;
@@ -2823,7 +2846,7 @@
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--card-bg);
background: var(--card-inner-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
min-width: 200px;
@@ -2859,7 +2882,7 @@
// 聊天记录消息 (合并转发)
.chat-record-message {
background: var(--card-bg) !important;
background: var(--card-inner-bg) !important;
border: 1px solid var(--border-color) !important;
transition: opacity 0.2s ease;
cursor: pointer;
@@ -3108,7 +3131,7 @@
.chat-record-message,
.miniapp-message,
.appmsg-rich-card {
background: rgba(255, 255, 255, 0.25);
background: var(--sent-card-bg);
.card-name,
.miniapp-title,
@@ -3619,7 +3642,7 @@
align-items: center;
gap: 12px;
padding: 12px;
background: var(--card-bg);
background: var(--card-inner-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
@@ -3674,7 +3697,7 @@
// 聊天记录消息外观
.chat-record-message {
background: var(--card-bg) !important;
background: var(--card-inner-bg) !important;
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
@@ -3713,7 +3736,7 @@
.official-message {
display: flex;
flex-direction: column;
background: var(--card-bg);
background: var(--card-inner-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;