hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 07:16: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;

22
src/styles/main.scss
View File

@@ -37,6 +37,8 @@
// 卡片背景
--card-bg: rgba(255, 255, 255, 0.7);
--card-inner-bg: #FAFAF7;
--sent-card-bg: var(--primary);
}
// ==================== 浅色主题 ====================
@@ -59,6 +61,8 @@
--bg-gradient: linear-gradient(135deg, #F0EEE9 0%, #E8E6E1 100%);
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
--card-bg: rgba(255, 255, 255, 0.7);
--card-inner-bg: #FAFAF7;
--sent-card-bg: var(--primary);
}
// 刚玉蓝主题
@@ -79,6 +83,8 @@
--bg-gradient: linear-gradient(135deg, #E8EEF0 0%, #D8E4E8 100%);
--primary-gradient: linear-gradient(135deg, #4A6670 0%, #5A7A86 100%);
--card-bg: rgba(255, 255, 255, 0.7);
--card-inner-bg: #F8FAFB;
--sent-card-bg: var(--primary);
}
// 冰猕猴桃汁绿主题
@@ -99,6 +105,8 @@
--bg-gradient: linear-gradient(135deg, #E8F0E4 0%, #D8E8D0 100%);
--primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #8AAA6C 100%);
--card-bg: rgba(255, 255, 255, 0.7);
--card-inner-bg: #F8FBF6;
--sent-card-bg: var(--primary);
}
// 辛辣红主题
@@ -119,6 +127,8 @@
--bg-gradient: linear-gradient(135deg, #F0E8E8 0%, #E8D8D8 100%);
--primary-gradient: linear-gradient(135deg, #8B4049 0%, #A05058 100%);
--card-bg: rgba(255, 255, 255, 0.7);
--card-inner-bg: #FAF8F8;
--sent-card-bg: var(--primary);
}
// 明水鸭色主题
@@ -139,6 +149,8 @@
--bg-gradient: linear-gradient(135deg, #E4F0F0 0%, #D4E8E8 100%);
--primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #6A9A9A 100%);
--card-bg: rgba(255, 255, 255, 0.7);
--card-inner-bg: #F6FBFB;
--sent-card-bg: var(--primary);
}
// ==================== 深色主题 ====================
@@ -160,6 +172,8 @@
--bg-gradient: linear-gradient(135deg, #1a1816 0%, #252220 100%);
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #C9A86C 100%);
--card-bg: rgba(40, 36, 32, 0.9);
--card-inner-bg: #27231F;
--sent-card-bg: var(--primary);
}
// 刚玉蓝 - 深色
@@ -179,6 +193,8 @@
--bg-gradient: linear-gradient(135deg, #141a1c 0%, #1e282c 100%);
--primary-gradient: linear-gradient(135deg, #4A6670 0%, #6A9AAA 100%);
--card-bg: rgba(30, 40, 44, 0.9);
--card-inner-bg: #1D272A;
--sent-card-bg: var(--primary);
}
// 冰猕猴桃汁绿 - 深色
@@ -198,6 +214,8 @@
--bg-gradient: linear-gradient(135deg, #161a14 0%, #222a1e 100%);
--primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #9ABA7C 100%);
--card-bg: rgba(34, 42, 30, 0.9);
--card-inner-bg: #21281D;
--sent-card-bg: var(--primary);
}
// 辛辣红 - 深色
@@ -217,6 +235,8 @@
--bg-gradient: linear-gradient(135deg, #1a1416 0%, #2a2022 100%);
--primary-gradient: linear-gradient(135deg, #8B4049 0%, #C06068 100%);
--card-bg: rgba(42, 32, 34, 0.9);
--card-inner-bg: #281F21;
--sent-card-bg: var(--primary);
}
// 明水鸭色 - 深色
@@ -236,6 +256,8 @@
--bg-gradient: linear-gradient(135deg, #121a1a 0%, #1c2a2a 100%);
--primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #7ABAAA 100%);
--card-bg: rgba(28, 42, 42, 0.9);
--card-inner-bg: #1B2828;
--sent-card-bg: var(--primary);
}
// 重置样式