chuan/WeChatDataAnalysis
1
0
Fork 0
mirror of https://github.com/LifeArchiveProject/WeChatDataAnalysis.git synced 2026-06-18 15:54:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chat-style): 恢复链接卡片与特殊消息的全局样式

Browse Source 
- 移除全局 chat.css 中误用的 :deep(...) 选择器，恢复样式命中
- 修复链接卡片、小程序卡片、公众号封面卡片和特殊消息尾巴样式
This commit is contained in:
2977094657
2026-03-16 12:34:39 +08:00
parent 16a7e410a1
commit 2447989c12
1 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/css/chat.css
+40 -40
View File
@@ -366,12 +366,12 @@
}
/* 统一特殊消息尾巴（红包 / 文件等） */
:deep(.wechat-special-card) {
.wechat-special-card {
position: relative;
overflow: visible;
}
:deep(.wechat-special-card)::after {
.wechat-special-card::after {
content: '';
position: absolute;
top: 12px;
@@ -383,7 +383,7 @@
border-radius: 2px;
}
:deep(.wechat-special-sent-side)::after {
.wechat-special-sent-side::after {
left: auto;
right: -4px;
}
@@ -754,7 +754,7 @@
}
/* 链接消息样式 - 微信风格 */
:deep(.wechat-link-card) {
.wechat-link-card {
width: 210px;
min-width: 210px;
max-width: 210px;
@@ -770,11 +770,11 @@
transition: background-color 0.15s ease;
}
:deep(.wechat-link-card:hover) {
.wechat-link-card:hover {
background: #f5f5f5;
}
:deep(.wechat-link-content) {
.wechat-link-content {
display: flex;
flex-direction: column;
gap: 8px;
@@ -783,14 +783,14 @@
flex: 1 1 auto;
}
:deep(.wechat-link-summary) {
.wechat-link-summary {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 42px;
}
:deep(.wechat-link-title) {
.wechat-link-title {
font-size: 14px;
color: #1a1a1a;
display: -webkit-box;
@@ -801,7 +801,7 @@
word-break: break-word;
}
:deep(.wechat-link-desc) {
.wechat-link-desc {
font-size: 12px;
color: #8c8c8c;
display: -webkit-box;
@@ -814,7 +814,7 @@
min-width: 0;
}
:deep(.wechat-link-thumb) {
.wechat-link-thumb {
width: 42px;
height: 42px;
flex: 0 0 auto;
@@ -824,19 +824,19 @@
align-self: flex-start;
}
:deep(.wechat-link-thumb-img) {
.wechat-link-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
:deep(.wechat-link-card--mini-program) {
.wechat-link-card--mini-program {
max-height: 270px;
height: 270px;
}
:deep(.wechat-link-mini-body) {
.wechat-link-mini-body {
display: flex;
flex-direction: column;
gap: 10px;
@@ -846,14 +846,14 @@
min-height: 0;
}
:deep(.wechat-link-mini-header) {
.wechat-link-mini-header {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
:deep(.wechat-link-mini-header-avatar) {
.wechat-link-mini-header-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
@@ -867,7 +867,7 @@
overflow: hidden;
}
:deep(.wechat-link-mini-header-avatar-img) {
.wechat-link-mini-header-avatar-img {
position: absolute;
inset: 0;
width: 100%;
@@ -876,7 +876,7 @@
display: block;
}
:deep(.wechat-link-mini-header-name) {
.wechat-link-mini-header-name {
font-size: 13px;
color: #7d7d7d;
overflow: hidden;
@@ -886,7 +886,7 @@
flex: 1 1 auto;
}
:deep(.wechat-link-mini-title) {
.wechat-link-mini-title {
font-size: 13px;
line-height: 1.45;
color: #1a1a1a;
@@ -897,7 +897,7 @@
word-break: break-word;
}
:deep(.wechat-link-mini-preview) {
.wechat-link-mini-preview {
width: 100%;
height: auto;
min-height: 0;
@@ -907,11 +907,11 @@
margin-top: auto;
}
:deep(.wechat-link-mini-preview--empty) {
.wechat-link-mini-preview--empty {
background: #f7f7f7;
}
:deep(.wechat-link-mini-preview-img) {
.wechat-link-mini-preview-img {
width: 100%;
height: 100%;
object-fit: contain;
@@ -919,7 +919,7 @@
display: block;
}
:deep(.wechat-link-mini-footer) {
.wechat-link-mini-footer {
height: 23px;
display: flex;
align-items: center;
@@ -930,7 +930,7 @@
flex-shrink: 0;
}
:deep(.wechat-link-mini-footer)::before {
.wechat-link-mini-footer::before {
content: '';
position: absolute;
top: 0;
@@ -940,19 +940,19 @@
background: #e8e8e8;
}
:deep(.wechat-link-mini-footer-icon) {
.wechat-link-mini-footer-icon {
width: 12px;
height: 12px;
object-fit: contain;
flex-shrink: 0;
}
:deep(.wechat-link-mini-footer-text) {
.wechat-link-mini-footer-text {
font-size: 10px;
color: #8c8c8c;
}
:deep(.wechat-link-from) {
.wechat-link-from {
height: 30px;
display: flex;
align-items: center;
@@ -962,7 +962,7 @@
flex-shrink: 0;
}
:deep(.wechat-link-from)::before {
.wechat-link-from::before {
content: '';
position: absolute;
top: 0;
@@ -972,7 +972,7 @@
background: #e8e8e8;
}
:deep(.wechat-link-from-avatar) {
.wechat-link-from-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
@@ -986,7 +986,7 @@
overflow: hidden;
}
:deep(.wechat-link-from-avatar-img) {
.wechat-link-from-avatar-img {
position: absolute;
inset: 0;
width: 100%;
@@ -995,7 +995,7 @@
display: block;
}
:deep(.wechat-link-from-name) {
.wechat-link-from-name {
font-size: 12px;
color: #b2b2b2;
overflow: hidden;
@@ -1004,7 +1004,7 @@
}
/* 链接封面卡片（170x230 图 + 60 底栏） */
:deep(.wechat-link-card-cover) {
.wechat-link-card-cover {
width: 137px;
min-width: 137px;
max-width: 137px;
@@ -1020,11 +1020,11 @@
transition: background-color 0.15s ease;
}
:deep(.wechat-link-card-cover:hover) {
.wechat-link-card-cover:hover {
background: #f5f5f5;
}
:deep(.wechat-link-cover-image-wrap) {
.wechat-link-cover-image-wrap {
width: 137px;
height: 180px;
position: relative;
@@ -1034,7 +1034,7 @@
flex-shrink: 0;
}
:deep(.wechat-link-cover-image) {
.wechat-link-cover-image {
width: 100%;
height: 100%;
object-fit: cover;
@@ -1043,11 +1043,11 @@
}
/* 仅公众号封面卡片去掉菱形尖角，其它消息保持原样 */
:deep(.wechat-link-card-cover.wechat-special-card)::after {
.wechat-link-card-cover.wechat-special-card::after {
content: none !important;
}
:deep(.wechat-link-cover-from) {
.wechat-link-cover-from {
height: 30px;
display: flex;
align-items: center;
@@ -1062,7 +1062,7 @@
flex-shrink: 0;
}
:deep(.wechat-link-cover-from-avatar) {
.wechat-link-cover-from-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
@@ -1076,7 +1076,7 @@
overflow: hidden;
}
:deep(.wechat-link-cover-from-avatar-img) {
.wechat-link-cover-from-avatar-img {
position: absolute;
inset: 0;
width: 100%;
@@ -1085,7 +1085,7 @@
display: block;
}
:deep(.wechat-link-cover-from-name) {
.wechat-link-cover-from-name {
font-size: 12px;
color: #f3f3f3;
overflow: hidden;
@@ -1093,7 +1093,7 @@
white-space: nowrap;
}
:deep(.wechat-link-cover-title) {
.wechat-link-cover-title {
height: 50px;
padding: 7px 10px 0;
box-sizing: border-box;