Skip to content

Commit 87b263e

Browse files
29770946572977094657
committed
fix(chat-style): 恢复链接卡片与特殊消息的全局样式
- 移除全局 chat.css 中误用的 :deep(...) 选择器，恢复样式命中 - 修复链接卡片、小程序卡片、公众号封面卡片和特殊消息尾巴样式
1 parent 5338763 commit 87b263e

1 file changed

Lines changed: 40 additions & 40 deletions

File tree

‎frontend/assets/css/chat.css‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -366,12 +366,12 @@
366366
}
367367

368368
/* 统一特殊消息尾巴（红包 / 文件等） */
369-
:deep(.wechat-special-card) {
369+
.wechat-special-card {
370370
position: relative;
371371
overflow: visible;
372372
}
373373

374-
:deep(.wechat-special-card)::after {
374+
.wechat-special-card::after {
375375
content: '';
376376
position: absolute;
377377
top: 12px;
@@ -383,7 +383,7 @@
383383
border-radius: 2px;
384384
}
385385

386-
:deep(.wechat-special-sent-side)::after {
386+
.wechat-special-sent-side::after {
387387
left: auto;
388388
right: -4px;
389389
}
@@ -754,7 +754,7 @@
754754
}
755755

756756
/* 链接消息样式 - 微信风格 */
757-
:deep(.wechat-link-card) {
757+
.wechat-link-card {
758758
width: 210px;
759759
min-width: 210px;
760760
max-width: 210px;
@@ -770,11 +770,11 @@
770770
transition: background-color 0.15s ease;
771771
}
772772

773-
:deep(.wechat-link-card:hover) {
773+
.wechat-link-card:hover {
774774
background: #f5f5f5;
775775
}
776776

777-
:deep(.wechat-link-content) {
777+
.wechat-link-content {
778778
display: flex;
779779
flex-direction: column;
780780
gap: 8px;
@@ -783,14 +783,14 @@
783783
flex: 1 1 auto;
784784
}
785785

786-
:deep(.wechat-link-summary) {
786+
.wechat-link-summary {
787787
display: flex;
788788
align-items: flex-start;
789789
gap: 10px;
790790
min-height: 42px;
791791
}
792792

793-
:deep(.wechat-link-title) {
793+
.wechat-link-title {
794794
font-size: 14px;
795795
color: #1a1a1a;
796796
display: -webkit-box;
@@ -801,7 +801,7 @@
801801
word-break: break-word;
802802
}
803803

804-
:deep(.wechat-link-desc) {
804+
.wechat-link-desc {
805805
font-size: 12px;
806806
color: #8c8c8c;
807807
display: -webkit-box;
@@ -814,7 +814,7 @@
814814
min-width: 0;
815815
}
816816

817-
:deep(.wechat-link-thumb) {
817+
.wechat-link-thumb {
818818
width: 42px;
819819
height: 42px;
820820
flex: 0 0 auto;
@@ -824,19 +824,19 @@
824824
align-self: flex-start;
825825
}
826826

827-
:deep(.wechat-link-thumb-img) {
827+
.wechat-link-thumb-img {
828828
width: 100%;
829829
height: 100%;
830830
object-fit: cover;
831831
display: block;
832832
}
833833

834-
:deep(.wechat-link-card--mini-program) {
834+
.wechat-link-card--mini-program {
835835
max-height: 270px;
836836
height: 270px;
837837
}
838838

839-
:deep(.wechat-link-mini-body) {
839+
.wechat-link-mini-body {
840840
display: flex;
841841
flex-direction: column;
842842
gap: 10px;
@@ -846,14 +846,14 @@
846846
min-height: 0;
847847
}
848848

849-
:deep(.wechat-link-mini-header) {
849+
.wechat-link-mini-header {
850850
display: flex;
851851
align-items: center;
852852
gap: 8px;
853853
min-width: 0;
854854
}
855855

856-
:deep(.wechat-link-mini-header-avatar) {
856+
.wechat-link-mini-header-avatar {
857857
width: 20px;
858858
height: 20px;
859859
border-radius: 50%;
@@ -867,7 +867,7 @@
867867
overflow: hidden;
868868
}
869869

870-
:deep(.wechat-link-mini-header-avatar-img) {
870+
.wechat-link-mini-header-avatar-img {
871871
position: absolute;
872872
inset: 0;
873873
width: 100%;
@@ -876,7 +876,7 @@
876876
display: block;
877877
}
878878

879-
:deep(.wechat-link-mini-header-name) {
879+
.wechat-link-mini-header-name {
880880
font-size: 13px;
881881
color: #7d7d7d;
882882
overflow: hidden;
@@ -886,7 +886,7 @@
886886
flex: 1 1 auto;
887887
}
888888

889-
:deep(.wechat-link-mini-title) {
889+
.wechat-link-mini-title {
890890
font-size: 13px;
891891
line-height: 1.45;
892892
color: #1a1a1a;
@@ -897,7 +897,7 @@
897897
word-break: break-word;
898898
}
899899

900-
:deep(.wechat-link-mini-preview) {
900+
.wechat-link-mini-preview {
901901
width: 100%;
902902
height: auto;
903903
min-height: 0;
@@ -907,19 +907,19 @@
907907
margin-top: auto;
908908
}
909909

910-
:deep(.wechat-link-mini-preview--empty) {
910+
.wechat-link-mini-preview--empty {
911911
background: #f7f7f7;
912912
}
913913

914-
:deep(.wechat-link-mini-preview-img) {
914+
.wechat-link-mini-preview-img {
915915
width: 100%;
916916
height: 100%;
917917
object-fit: contain;
918918
object-position: center;
919919
display: block;
920920
}
921921

922-
:deep(.wechat-link-mini-footer) {
922+
.wechat-link-mini-footer {
923923
height: 23px;
924924
display: flex;
925925
align-items: center;
@@ -930,7 +930,7 @@
930930
flex-shrink: 0;
931931
}
932932

933-
:deep(.wechat-link-mini-footer)::before {
933+
.wechat-link-mini-footer::before {
934934
content: '';
935935
position: absolute;
936936
top: 0;
@@ -940,19 +940,19 @@
940940
background: #e8e8e8;
941941
}
942942

943-
:deep(.wechat-link-mini-footer-icon) {
943+
.wechat-link-mini-footer-icon {
944944
width: 12px;
945945
height: 12px;
946946
object-fit: contain;
947947
flex-shrink: 0;
948948
}
949949

950-
:deep(.wechat-link-mini-footer-text) {
950+
.wechat-link-mini-footer-text {
951951
font-size: 10px;
952952
color: #8c8c8c;
953953
}
954954

955-
:deep(.wechat-link-from) {
955+
.wechat-link-from {
956956
height: 30px;
957957
display: flex;
958958
align-items: center;
@@ -962,7 +962,7 @@
962962
flex-shrink: 0;
963963
}
964964

965-
:deep(.wechat-link-from)::before {
965+
.wechat-link-from::before {
966966
content: '';
967967
position: absolute;
968968
top: 0;
@@ -972,7 +972,7 @@
972972
background: #e8e8e8;
973973
}
974974

975-
:deep(.wechat-link-from-avatar) {
975+
.wechat-link-from-avatar {
976976
width: 16px;
977977
height: 16px;
978978
border-radius: 50%;
@@ -986,7 +986,7 @@
986986
overflow: hidden;
987987
}
988988

989-
:deep(.wechat-link-from-avatar-img) {
989+
.wechat-link-from-avatar-img {
990990
position: absolute;
991991
inset: 0;
992992
width: 100%;
@@ -995,7 +995,7 @@
995995
display: block;
996996
}
997997

998-
:deep(.wechat-link-from-name) {
998+
.wechat-link-from-name {
999999
font-size: 12px;
10001000
color: #b2b2b2;
10011001
overflow: hidden;
@@ -1004,7 +1004,7 @@
10041004
}
10051005

10061006
/* 链接封面卡片（170x230 图 + 60 底栏） */
1007-
:deep(.wechat-link-card-cover) {
1007+
.wechat-link-card-cover {
10081008
width: 137px;
10091009
min-width: 137px;
10101010
max-width: 137px;
@@ -1020,11 +1020,11 @@
10201020
transition: background-color 0.15s ease;
10211021
}
10221022

1023-
:deep(.wechat-link-card-cover:hover) {
1023+
.wechat-link-card-cover:hover {
10241024
background: #f5f5f5;
10251025
}
10261026

1027-
:deep(.wechat-link-cover-image-wrap) {
1027+
.wechat-link-cover-image-wrap {
10281028
width: 137px;
10291029
height: 180px;
10301030
position: relative;
@@ -1034,7 +1034,7 @@
10341034
flex-shrink: 0;
10351035
}
10361036

1037-
:deep(.wechat-link-cover-image) {
1037+
.wechat-link-cover-image {
10381038
width: 100%;
10391039
height: 100%;
10401040
object-fit: cover;
@@ -1043,11 +1043,11 @@
10431043
}
10441044

10451045
/* 仅公众号封面卡片去掉菱形尖角，其它消息保持原样 */
1046-
:deep(.wechat-link-card-cover.wechat-special-card)::after {
1046+
.wechat-link-card-cover.wechat-special-card::after {
10471047
content: none !important;
10481048
}
10491049

1050-
:deep(.wechat-link-cover-from) {
1050+
.wechat-link-cover-from {
10511051
height: 30px;
10521052
display: flex;
10531053
align-items: center;
@@ -1062,7 +1062,7 @@
10621062
flex-shrink: 0;
10631063
}
10641064

1065-
:deep(.wechat-link-cover-from-avatar) {
1065+
.wechat-link-cover-from-avatar {
10661066
width: 18px;
10671067
height: 18px;
10681068
border-radius: 50%;
@@ -1076,7 +1076,7 @@
10761076
overflow: hidden;
10771077
}
10781078

1079-
:deep(.wechat-link-cover-from-avatar-img) {
1079+
.wechat-link-cover-from-avatar-img {
10801080
position: absolute;
10811081
inset: 0;
10821082
width: 100%;
@@ -1085,15 +1085,15 @@
10851085
display: block;
10861086
}
10871087

1088-
:deep(.wechat-link-cover-from-name) {
1088+
.wechat-link-cover-from-name {
10891089
font-size: 12px;
10901090
color: #f3f3f3;
10911091
overflow: hidden;
10921092
text-overflow: ellipsis;
10931093
white-space: nowrap;
10941094
}
10951095

1096-
:deep(.wechat-link-cover-title) {
1096+
.wechat-link-cover-title {
10971097
height: 50px;
10981098
padding: 7px 10px 0;
10991099
box-sizing: border-box;

0 commit comments

Comments
 (0)