bhd-components 0.7.1 → 0.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,3 +8,1395 @@
8
8
  @color-background-primary-weak: @color-background-info-weak;
9
9
 
10
10
 
11
+ .service_ChatWindow_Drawer,
12
+ .ChatWindow_Modal {
13
+ width: 100% !important;
14
+ :global {
15
+ .bhd-drawer-mask {
16
+ background-color: @color-border-Tr !important;
17
+ }
18
+ }
19
+ }
20
+ .ChatWindow_Drawer,
21
+ .ChatWindow_Modal {
22
+ /* 全局修改滚动条样式 */
23
+ textarea::-webkit-scrollbar {
24
+ background-color: #eaedf1;
25
+ background-color: transparent;
26
+ width: 4px;
27
+ height: 4px;
28
+ }
29
+ textarea::-webkit-scrollbar-thumb {
30
+ border-radius: 4px;
31
+ background-color: rgba(0, 0, 0, 0.25);
32
+ }
33
+
34
+ pre::-webkit-scrollbar {
35
+ background-color: #eaedf1;
36
+ background-color: transparent;
37
+ width: 4px;
38
+ height: 4px;
39
+ }
40
+ pre::-webkit-scrollbar-thumb {
41
+ border-radius: 4px;
42
+ background-color: rgba(0, 0, 0, 0.25);
43
+ }
44
+
45
+ // background: #F5F5F5 !important;
46
+ box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1) !important;
47
+ :global {
48
+ .bhd-drawer-body {
49
+ padding: 0 !important;
50
+ }
51
+ }
52
+ .header_wrap {
53
+ .top {
54
+ display: flex;
55
+ padding: 16px 24px;
56
+ justify-content: space-between;
57
+ align-items: center;
58
+ background-color: #fff;
59
+ line-height: 1;
60
+ .user {
61
+ color: #000;
62
+ font-size: 16px;
63
+ font-weight: 600;
64
+ position: relative;
65
+ padding-left: 36px;
66
+
67
+ i {
68
+ padding-right: 16px;
69
+ color: #111;
70
+ position: absolute;
71
+ font-size: 20px;
72
+ top: -2px;
73
+ left: 0;
74
+ cursor: pointer;
75
+ }
76
+ .count{
77
+ position: absolute;
78
+ top: -6px;
79
+ right: 5px;
80
+ background-color: #f4523b;
81
+ color: #fff;
82
+ padding: 0 5px;
83
+ border-radius: 25px;
84
+ font-size: 12px;
85
+ line-height: 1.2;
86
+ }
87
+ }
88
+ .operate {
89
+ display: flex;
90
+ height: 16px;
91
+ i {
92
+ font-size: 16px;
93
+ margin-left: 23px;
94
+ cursor: pointer;
95
+ }
96
+ // :global{
97
+ // .iconicon_guanbi_Close{
98
+ // // font-size: 23px;
99
+ // position: relative;
100
+ // top: 1px;
101
+ // }
102
+ // }
103
+ .line {
104
+ display: inline-block;
105
+ width: 1px;
106
+ height: 16px;
107
+ background-color: @color-border-Tr;
108
+ margin: 0 4px;
109
+ margin-left: 23px;
110
+ }
111
+ }
112
+ }
113
+ }
114
+ //newlabo中使用
115
+ .header_wrap_newlabo {
116
+ .top {
117
+ background-color: #f5f5f5;
118
+ border-bottom: 1px solid @color-border-secondary;
119
+ .user {
120
+ padding-left: 0;
121
+ font-weight: 400;
122
+ }
123
+ }
124
+ }
125
+ .Drawer_main {
126
+ max-height: calc(100vh - 110px);
127
+ overflow: auto;
128
+ background: #f5f5f5;
129
+ min-height: 200px;
130
+ .loading {
131
+ text-align: center;
132
+ margin: 10px 0;
133
+ img {
134
+ width: 30px;
135
+ height: 30px;
136
+ }
137
+ }
138
+ .message_con {
139
+ padding: 16px;
140
+ padding-top: 0;
141
+ .left {
142
+ .head_sculpture {
143
+ width: 32px;
144
+ height: 32px;
145
+ margin-top: 24px;
146
+ border-radius: 50%;
147
+ display: inline-block;
148
+ vertical-align: top;
149
+ overflow: hidden;
150
+ img {
151
+ width: 100%;
152
+ height: 100%;
153
+ }
154
+ }
155
+ .main_content{
156
+ display: flex;
157
+ flex-direction: column;
158
+ align-items: flex-end;
159
+
160
+
161
+ }
162
+ }
163
+ .right {
164
+ .head_sculpture {
165
+ width: 32px;
166
+ height: 32px;
167
+ margin-top: 24px;
168
+ line-height: 32px;
169
+ border-radius: 50%;
170
+ display: inline-block;
171
+ vertical-align: top;
172
+ overflow: hidden;
173
+ // background-color: @color-background-primary-base;
174
+ text-align: center;
175
+ i {
176
+ color: #fff;
177
+ }
178
+ img {
179
+ width: 100%;
180
+ height: 100%;
181
+ }
182
+ }
183
+ }
184
+ & > li {
185
+ position: relative;
186
+ // margin-bottom: 24px;
187
+ display: flex;
188
+ width: 100%;
189
+ .main {
190
+ max-width: 80%;
191
+
192
+ .main_content_flag{
193
+ width: 100%;
194
+ }
195
+
196
+ .main_content_flag:hover{
197
+ .operate_modal {
198
+ // display: block;
199
+ visibility: visible;
200
+ }
201
+ }
202
+ .main_content {
203
+ position: relative;
204
+
205
+ .content {
206
+
207
+ max-width: 100%;
208
+ // width: 100%;
209
+ //以下优化ai返回的内容的样式
210
+ .content_child {
211
+ padding: 0;
212
+ line-height: 1;
213
+ p{
214
+ word-break: break-all;
215
+ white-space: break-spaces;
216
+ }
217
+ p,
218
+ li {
219
+ line-height: 1.5;
220
+ color: rgba(0, 0, 0, 0.85);
221
+ }
222
+
223
+ & > h3 {
224
+ font-size: 16px;
225
+ font-weight: 600;
226
+ padding: 10px 0;
227
+ }
228
+ ol {
229
+ list-style: decimal;
230
+ padding-inline-start: 20px;
231
+
232
+ li{
233
+ list-style-type: auto;
234
+ }
235
+
236
+ li p {
237
+ padding: 4px 0;
238
+ font-size: 14px;
239
+ font-weight: 600;
240
+ }
241
+ li > ul li {
242
+ list-style: inside;
243
+ color: rgba(0, 0, 0, 0.65);
244
+ }
245
+ }
246
+ }
247
+ pre {
248
+ background: rgba(0, 0, 0, 0.05);
249
+ padding: 12px;
250
+ line-height: 1.5;
251
+ margin: 4px 0;
252
+ }
253
+ }
254
+ .sign{
255
+ background-color: #1890ff;
256
+ color: #fff;
257
+ }
258
+ }
259
+ .operate_modal {
260
+ // display: none;
261
+ visibility: hidden;
262
+ // min-width: 200px;
263
+ height: 24px;
264
+ white-space: nowrap;
265
+ position: relative;
266
+ right: 0;
267
+ top: -14px;
268
+ z-index: 9;
269
+ text-align: right;
270
+ // padding-bottom: 10px;
271
+ .operate {
272
+ display: inline-flex;
273
+ align-items: center;
274
+ padding: 8px 0;
275
+ border-radius: 4px;
276
+ background: #fff;
277
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
278
+ line-height: 1;
279
+ color: @color-text-tertiary-Tr;
280
+ i {
281
+ color: @color-text-tertiary-Tr;
282
+ font-size: 16px;
283
+ cursor: pointer;
284
+ svg {
285
+ color: @color-icon-fill-Tr;
286
+ }
287
+ &:hover {
288
+ svg {
289
+ color: @color-data-visualization-01;
290
+ }
291
+ }
292
+ }
293
+ .active {
294
+ // color: @color-background-primary-base;
295
+ svg {
296
+ color: @color-text-primary;
297
+ }
298
+ }
299
+ span {
300
+ margin: 0 8px;
301
+ }
302
+ .ask_question {
303
+ cursor: pointer;
304
+ color: @color-text-tertiary-Tr;
305
+ font-size: 12px;
306
+ line-height: 1;
307
+ padding: 2px 8px;
308
+ background-color: @color-background-filltertiary-Tr;
309
+ margin-right: 16px;
310
+ &:hover{
311
+ color: @color-text-primary;
312
+ }
313
+ }
314
+ }
315
+ }
316
+ .operate_modal_bottom {
317
+ display: flex;
318
+ justify-content: space-between;
319
+ align-items: center;
320
+ // position: sticky;
321
+ bottom: 0;
322
+
323
+ .operate {
324
+ display: inline-block;
325
+ padding: 8px;
326
+ line-height: 1;
327
+ color: @color-text-tertiary-Tr;
328
+ i {
329
+ color: @color-text-tertiary-Tr;
330
+ font-size: 16px;
331
+ cursor: pointer;
332
+ svg {
333
+ color: @color-icon-fill-Tr;
334
+ }
335
+ &:hover {
336
+ svg {
337
+ color: @color-data-visualization-01;
338
+ }
339
+ }
340
+ }
341
+ .active {
342
+ // color: @color-background-primary-base;
343
+ svg {
344
+ color: @color-text-primary;
345
+ }
346
+ }
347
+ span {
348
+ margin: 0 8px;
349
+ cursor: pointer;
350
+ }
351
+ }
352
+ .stop_generate {
353
+ // position: absolute;
354
+ font-size: 12px;
355
+ color: @color-text-tertiary-Tr;
356
+ display: inline-block;
357
+ padding: 8px 0;
358
+ cursor: pointer;
359
+ .icon {
360
+ display: inline-block;
361
+ width: 10px;
362
+ height: 10px;
363
+ border-radius: 2px;
364
+ background-color: @color-text-tertiary-Tr;
365
+ margin-right: 4px;
366
+ }
367
+ .find_teacher {
368
+ padding: 2px 8px;
369
+ border-radius: 2px;
370
+ background-color: @color-background-filltertiary-Tr;
371
+ color: @color-text-tertiary-Tr;
372
+ font-size: 12px;
373
+ line-height: 1;
374
+ &:hover{
375
+ color: @color-text-primary;
376
+ }
377
+ }
378
+ }
379
+ .stop_generate:hover{
380
+ color: @color-text-primary;
381
+ span{
382
+ color: @color-text-primary;
383
+ }
384
+ }
385
+ .stop_findTeacher {
386
+ font-size: 12px;
387
+ color: @color-text-tertiary-Tr;
388
+ display: inline-block;
389
+ padding: 8px 0;
390
+ cursor: pointer;
391
+ span {
392
+ padding: 0px 8px;
393
+ background-color: @color-background-filltertiary-Tr;
394
+ color: @color-text-tertiary-Tr;
395
+ &:hover{
396
+ color: @color-text-primary;
397
+ }
398
+ }
399
+ }
400
+
401
+ }
402
+ }
403
+ .content {
404
+ padding: 12px 16px;
405
+ // max-width: 80%;
406
+ display: inline-block;
407
+ font-size: 14px;
408
+ }
409
+ }
410
+ .left {
411
+ justify-content: flex-end;
412
+ .main {
413
+ text-align: right;
414
+ }
415
+ }
416
+ li.left .content {
417
+ border-radius: 20px 2px 20px 20px;
418
+ background: #d1e4ff;
419
+ text-align: left;
420
+ // position: absolute;
421
+ // left: 0;
422
+ // float: right;
423
+ }
424
+ li.right .content {
425
+ border-radius: 2px 20px 20px 20px;
426
+ background: #fff;
427
+ // position: absolute;
428
+ // right: 0;
429
+ }
430
+
431
+ li .content {
432
+ .association_problem li {
433
+ color: #5991ef;
434
+ font-size: 14px;
435
+ font-weight: 400;
436
+ line-height: 1.8;
437
+ cursor: pointer;
438
+ list-style-type: none;
439
+ }
440
+ }
441
+ .time {
442
+ display: block;
443
+ margin: 40px 0;
444
+ margin-bottom: 16px;
445
+ text-align: center;
446
+ font-size: 12px;
447
+ color: rgba(0, 0, 0, 0.25);
448
+ position: relative;
449
+ &::before {
450
+ content: "";
451
+ width: 100px;
452
+ display: inline-block;
453
+ height: 1px;
454
+ background-color: #ebebeb;
455
+ position: relative;
456
+ top: -3px;
457
+ right: 16px;
458
+ }
459
+ &::after {
460
+ content: "";
461
+ width: 100px;
462
+ display: inline-block;
463
+ height: 1px;
464
+ background-color: #ebebeb;
465
+ position: relative;
466
+ top: -3px;
467
+ left: 16px;
468
+ }
469
+ }
470
+ .citation_content {
471
+ display: table;
472
+ margin-top: 4px;
473
+ padding: 8px;
474
+ border-radius: 2px;
475
+ background: #e7e7e7;
476
+ p {
477
+ color: @color-text-Secondary-Tr;
478
+ font-size: 12px;
479
+ line-height: 1.5;
480
+
481
+ overflow: hidden;
482
+ text-overflow: ellipsis;
483
+ -webkit-box-orient: vertical;
484
+ -webkit-line-clamp: 2;
485
+ display: -webkit-box;
486
+
487
+ max-height: 36px;
488
+ word-break: break-all;
489
+ cursor: pointer;
490
+
491
+ text-align: left;
492
+ }
493
+ .text_exceed{
494
+ padding-right: 16px;
495
+ position: relative;
496
+ &>span{
497
+ position: absolute;
498
+ top: 20px;
499
+ right: 0;
500
+ }
501
+ }
502
+ }
503
+
504
+ .popover_content {
505
+ max-width: 400px;
506
+ }
507
+ }
508
+ }
509
+ .Drawer_main::-webkit-scrollbar {
510
+ background-color: #eff0f7;
511
+ background-color: transparent;
512
+ width: 6px;
513
+ height: 4px;
514
+ }
515
+ .Drawer_main::-webkit-scrollbar-thumb {
516
+ border-radius: 4px;
517
+ background-color: rgba(181, 184, 198, 0.8);
518
+ }
519
+ //newlabo中使用
520
+ .Drawer_main_newlabo {
521
+ pre {
522
+ background: #2b303b !important;
523
+ color: #fff;
524
+ overflow: auto;
525
+ pre::-webkit-scrollbar {
526
+ background-color: #eaedf1;
527
+ background-color: transparent;
528
+ width: 4px;
529
+ height: 4px;
530
+ }
531
+ pre::-webkit-scrollbar-thumb {
532
+ border-radius: 4px;
533
+ background-color: #f4f4f4;
534
+ }
535
+ }
536
+ }
537
+ //隐藏聊天头像
538
+ .Drawer_main_newlabo_no_pic {
539
+ .head_sculpture {
540
+ display: none !important;
541
+ }
542
+ }
543
+ .Drawer_buttom_Issues_List {
544
+ position: absolute;
545
+ bottom: 0;
546
+ width: 100%;
547
+ .issues_list_teacherList {
548
+ white-space: nowrap;
549
+ overflow: auto;
550
+ width: calc(100% - 40px);
551
+ box-sizing: border-box;
552
+ margin-bottom: 6px;
553
+
554
+ .item {
555
+ display: inline-block;
556
+ margin-right: 8px;
557
+ &:last-child {
558
+ margin-right: 0;
559
+ }
560
+ }
561
+ }
562
+ .issues_list_teacherList::-webkit-scrollbar {
563
+ background-color: #eaedf1;
564
+ background-color: transparent;
565
+ width: 4px;
566
+ height: 4px;
567
+ }
568
+ .issues_list_teacherList::-webkit-scrollbar-thumb {
569
+ border-radius: 4px;
570
+ background-color: rgba(181, 184, 198, 0.6);
571
+ }
572
+ .issues_list {
573
+ position: absolute;
574
+ bottom: 60px;
575
+ margin: 0 16px;
576
+ padding-bottom: 4px;
577
+ line-height: 1;
578
+ .item > span {
579
+ cursor: pointer;
580
+ max-width: 100%;
581
+ display: inline-block;
582
+ margin-bottom: 2px;
583
+ padding: 8px 16px;
584
+ justify-content: center;
585
+ align-items: center;
586
+ border-radius: 4px;
587
+ background: #ececec;
588
+ font-size: 14px;
589
+ line-height: 1;
590
+ overflow: hidden;
591
+ // white-space: nowrap;
592
+ // text-overflow: ellipsis;
593
+
594
+ &:hover {
595
+ background-color: #fff;
596
+ }
597
+ .sign {
598
+ color: @color-text-primary;
599
+ }
600
+ }
601
+ }
602
+ .Drawer_buttom {
603
+ display: flex;
604
+ align-items: flex-end;
605
+ margin-bottom: 12px;
606
+ padding: 0 16px;
607
+ .input_wrap {
608
+ // display: flex;
609
+ align-items: flex-end;
610
+ width: calc(100% - 36px);
611
+ background-color: #fff;
612
+ padding: 11px 16px;
613
+ border: 1px solid @color-border-secondary;
614
+ border-radius: 8px;
615
+ justify-content: space-between;
616
+ line-height: 1;
617
+ position: relative;
618
+ padding-right: 1px;
619
+ & > .input {
620
+ // width: calc(100% - 24px);
621
+ line-height: 1;
622
+ textarea {
623
+ max-height: 100px;
624
+ padding: 0;
625
+ border: none;
626
+ box-shadow: none !important;
627
+ resize: none;
628
+ padding-right: 48px;
629
+ }
630
+
631
+ :global {
632
+ textarea.bhd-input {
633
+ min-height: 21px !important;
634
+ line-height: 1.5;
635
+ }
636
+ .bhd-input[disabled] {
637
+ background-color: #fff !important;
638
+ }
639
+ }
640
+ }
641
+ & > .no_AI {
642
+ width: 100%;
643
+ textarea {
644
+ padding-right: 12px;
645
+ }
646
+ }
647
+ .voice {
648
+ position: absolute;
649
+ right: 18px;
650
+ bottom: 10px;
651
+ color: rgba(0, 0, 0, 0.65);
652
+ i {
653
+ cursor: pointer;
654
+ svg {
655
+ color: @color-icon-fill-Tr;
656
+ font-size: 20px;
657
+ }
658
+ }
659
+ .voice_btn {
660
+ width: 32px;
661
+ cursor: pointer;
662
+ position: absolute;
663
+ bottom: -5px;
664
+ right: -10px;
665
+ }
666
+ }
667
+ .disabled{
668
+ cursor:not-allowed !important;
669
+ color: rgba(0, 0, 0, 0.25) !important;
670
+ svg{
671
+ color: rgba(0, 0, 0, 0.25) !important;
672
+ }
673
+ }
674
+ .content_main {
675
+ display: flex;
676
+ align-items: center;
677
+ width: calc(100% - 24px);
678
+ // margin-right: 8px;
679
+ .content_con {
680
+ margin-top: 6px;
681
+ align-items: center;
682
+ padding: 8px;
683
+ background: #e7e7e7;
684
+ display: inline-block;
685
+ width: calc(100% - 60px);
686
+ //
687
+ p {
688
+ color: rgba(0, 0, 0, 0.65);
689
+ border-radius: 2px;
690
+ font-size: 12px;
691
+ line-height: 1.5;
692
+
693
+ overflow: hidden;
694
+ text-overflow: ellipsis;
695
+ -webkit-box-orient: vertical;
696
+ -webkit-line-clamp: 2;
697
+ display: -webkit-box;
698
+
699
+ max-height: 36px;
700
+ word-break: break-all;
701
+ }
702
+ }
703
+ .delete_quote {
704
+ font-size: 18px;
705
+ color: @color-icon-tertiary;
706
+ margin-top: 6px;
707
+ }
708
+ }
709
+ }
710
+
711
+ .sending {
712
+ width: 20px;
713
+ margin-left: 16px;
714
+ margin-bottom: 8px;
715
+ i {
716
+ svg {
717
+ font-size: 20px;
718
+ color: @color-icon-fill-Tr;
719
+ }
720
+ }
721
+ .disabled {
722
+ svg {
723
+ color: rgba(0, 0, 0, 0.25);
724
+ cursor: not-allowed;
725
+ }
726
+ }
727
+ }
728
+ }
729
+ }
730
+ //newlabo中使用
731
+ .Drawer_buttom_Issues_List_newlabo {
732
+ // bottom: revert-layer !important;
733
+ background-color: #f5f5f5 !important;
734
+ }
735
+
736
+ :global {
737
+ .anticon {
738
+ vertical-align: 0;
739
+ }
740
+ }
741
+ }
742
+ .ChatWindow_Drawer {
743
+ background: #f5f5f5 !important;
744
+ position: relative;
745
+ height: 100%;
746
+ :global {
747
+ .bhd-drawer-header {
748
+ display: none !important;
749
+ }
750
+ }
751
+ }
752
+ .ChatWindow_Modal {
753
+ :global {
754
+ .bhd-modal {
755
+ border-radius: 8px;
756
+ overflow: hidden;
757
+ position: relative;
758
+ }
759
+ .bhd-modal-content {
760
+ height: 100%;
761
+ background-color: #f5f5f5 !important;
762
+ .bhd-modal-close {
763
+ display: none !important;
764
+ }
765
+ }
766
+ .bhd-modal-header {
767
+ display: none !important;
768
+ }
769
+ .bhd-modal-body {
770
+ height: 100%;
771
+ padding: 0 !important;
772
+ border-radius: 4px !important;
773
+ }
774
+
775
+ .bhd-drawer-right > .bhd-drawer-content-wrapper {
776
+ top: 129px;
777
+ right: 200px;
778
+ height: 790px;
779
+ }
780
+ }
781
+ .main_list {
782
+ max-height: 650px;
783
+ }
784
+ .user {
785
+ padding-left: 0 !important;
786
+ cursor: pointer;
787
+ }
788
+ .Drawer_buttom_Issues_List {
789
+ border-radius: 4px;
790
+ width: calc(100% - 328px);
791
+ margin-left: 328px;
792
+ }
793
+ .Drawer_main {
794
+ max-height: 700px;
795
+
796
+ .chat_content {
797
+ width: calc(100% - 328px);
798
+ margin-left: 328px;
799
+ display: inline-block;
800
+ }
801
+ }
802
+ }
803
+
804
+
805
+ //引用气泡
806
+ .popover_main_content {
807
+ min-width: 300px !important;
808
+ max-width: 340px !important;
809
+ background-color: #fff !important;
810
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
811
+ border-radius: 4px;
812
+ border: 1px solid rgba(0, 0, 0, 0.15);
813
+
814
+ :global {
815
+ .bhd-tooltip-content {
816
+ background-color: #fff;
817
+ border-radius: 4px;
818
+ .bhd-tooltip-inner {
819
+ background-color: #fff;
820
+ color: @color-text-Tr;
821
+ font-size: 14px;
822
+ padding: 12px 16px;
823
+ border-radius: 4px;
824
+ }
825
+ }
826
+ .bhd-tooltip-arrow:before {
827
+ background: #ccc !important;
828
+ }
829
+ .bhd-tooltip-arrow::after {
830
+ width: 0 !important;
831
+ height: 0 !important;
832
+ border: 5px solid;
833
+ border-color: transparent transparent #fff transparent;
834
+ transform: none !important;
835
+ background: transparent !important;
836
+ bottom: 0px !important;
837
+ left: 0px !important;
838
+ right: 0 !important;
839
+ box-shadow: none !important;
840
+ }
841
+ }
842
+ }
843
+ .popover_main_content_name{
844
+ width: auto;
845
+ background-color: #fff !important;
846
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
847
+ border-radius: 4px;
848
+ border: 1px solid rgba(0, 0, 0, 0.15);
849
+ :global {
850
+ .bhd-tooltip-content {
851
+ background-color: #fff;
852
+ border-radius: 4px;
853
+ .bhd-tooltip-inner {
854
+ background-color: #fff;
855
+ color: @color-text-Tr;
856
+ font-size: 14px;
857
+ padding: 12px 16px;
858
+ border-radius: 4px;
859
+ }
860
+ }
861
+ .bhd-tooltip-arrow:before {
862
+ background: #ccc !important;
863
+ }
864
+ .bhd-tooltip-arrow::after {
865
+ width: 0 !important;
866
+ height: 0 !important;
867
+ border: 5px solid;
868
+ border-color: transparent transparent #fff transparent;
869
+ transform: none !important;
870
+ background: transparent !important;
871
+ bottom: 0px !important;
872
+ left: 0px !important;
873
+ right: 0 !important;
874
+ box-shadow: none !important;
875
+ }
876
+ }
877
+ }
878
+
879
+ //联系人列表
880
+ .teacher_layout {
881
+ position: fixed;
882
+ right: 568px;
883
+
884
+ border-radius: 8px;
885
+ background: rgba(255, 255, 255, 0.5);
886
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
887
+ backdrop-filter: blur(7.5px);
888
+ width: 80px;
889
+ .top > div,
890
+ .bottom > div {
891
+ display: flex;
892
+ flex-direction: column;
893
+ align-items: center;
894
+ padding: 8px;
895
+ border-radius: 8px;
896
+ margin: 8px 0;
897
+ max-width: 60px;
898
+ overflow: hidden;
899
+ position: relative;
900
+ cursor: pointer;
901
+ &:hover {
902
+ background-color: #f5f5f5;
903
+ .delete {
904
+ display: block;
905
+ }
906
+ }
907
+ p {
908
+ max-width: 60px;
909
+ overflow: hidden;
910
+ text-overflow: ellipsis;
911
+ white-space: nowrap;
912
+ color: @color-text-Secondary-Tr;
913
+ font-size: 12px;
914
+ line-height: 1;
915
+ padding-top: 12px;
916
+ }
917
+ img {
918
+ width: 32px;
919
+ height: 32px;
920
+ border-radius: 50%;
921
+ }
922
+ .num {
923
+ position: absolute;
924
+ top: 0;
925
+ right: 0;
926
+ border-radius: 26px;
927
+ background-color: #f4523b;
928
+ color: #fff;
929
+ padding: 0 5px;
930
+ border-radius: 25px;
931
+ font-size: 12px;
932
+ line-height: 1.2;
933
+ }
934
+ .delete {
935
+ position: absolute;
936
+ top: 2px;
937
+ right: 2px;
938
+ color: rgba(0, 0, 0, 0.65);
939
+ font-size: 12px;
940
+ display: none;
941
+ }
942
+ }
943
+ .top > div {
944
+ margin: 8px;
945
+ }
946
+ .top .shrink {
947
+ border-bottom: 1px solid @color-border-secondary;
948
+ border-radius: 0;
949
+ margin-bottom: 8px;
950
+ margin-top: 8px;
951
+ & > span {
952
+ font-size: 20px;
953
+ }
954
+ p {
955
+ padding-top: 0;
956
+ }
957
+ &:hover {
958
+ background-color: #fff !important;
959
+ }
960
+ }
961
+ .top .active,
962
+ .bottom .active {
963
+ background: @color-background-primary-weak-hover;
964
+ }
965
+ .bottom > div:last-child {
966
+ margin-bottom: 0;
967
+ }
968
+ .bottom > div:first-child {
969
+ margin-top: 0;
970
+ }
971
+ .bottom {
972
+ max-height: 524px;
973
+ padding: 0 8px;
974
+ padding-right: 4px;
975
+ overflow-y: auto;
976
+ margin-bottom: 8px;
977
+ margin-top: 8px;
978
+ }
979
+ .bottom::-webkit-scrollbar {
980
+ background-color: #eaedf1;
981
+ background-color: transparent;
982
+ width: 4px;
983
+ height: 4px;
984
+ }
985
+ .bottom::-webkit-scrollbar-thumb {
986
+ border-radius: 4px;
987
+ background-color: rgba(0, 0, 0, 0.25);
988
+ }
989
+ }
990
+ .teacher_layout_newlabo {
991
+ top: 50px;
992
+ right: 0;
993
+ .top{
994
+ svg{
995
+ transform: rotate(180deg);
996
+ }
997
+ }
998
+ .top .active,
999
+ .bottom .active {
1000
+ // background: @color-background-info-weak !important;
1001
+ background-color: #D1E4FF;
1002
+ }
1003
+ }
1004
+ .teacher_layout_modal {
1005
+ width: 328px;
1006
+ height: calc(100% - 48px);
1007
+ background-color: #fff;
1008
+ position: absolute;
1009
+ border-top: 1px solid @color-border-secondary;
1010
+ .top,
1011
+ .bottom {
1012
+ .ai {
1013
+ border-bottom: 1px solid @color-border-secondary;
1014
+ padding: 16px;
1015
+ display: flex;
1016
+ align-items: center;
1017
+ cursor: pointer;
1018
+ img {
1019
+ width: 32px;
1020
+ height: 32px;
1021
+ border-radius: 50%;
1022
+ margin-right: 12px;
1023
+ }
1024
+ & > span {
1025
+ margin-right: 12px;
1026
+ }
1027
+ .user_info {
1028
+ width: 252px;
1029
+ .message {
1030
+ color: #000;
1031
+ font-size: 14px;
1032
+ line-height: 1;
1033
+ padding-right: 10px;
1034
+ .num {
1035
+ margin-left: 12px;
1036
+ border-radius: 26px;
1037
+ background-color: #f4523b;
1038
+ color: #fff;
1039
+ padding: 0 5px;
1040
+ border-radius: 25px;
1041
+ font-size: 12px;
1042
+ line-height: 1;
1043
+ }
1044
+
1045
+ .time {
1046
+ font-size: 12px;
1047
+ color: @color-text-quaternary-Tr;
1048
+ float: right;
1049
+ }
1050
+ }
1051
+ .con {
1052
+ color: rgba(0, 0, 0, 0.45);
1053
+ font-size: 12px;
1054
+ line-height: 1.5;
1055
+ margin-top: 8px;
1056
+ overflow: hidden;
1057
+ white-space: nowrap;
1058
+ text-overflow: ellipsis;
1059
+ }
1060
+ }
1061
+ }
1062
+ .active {
1063
+ background: @color-background-primary-weak-hover;
1064
+ }
1065
+ }
1066
+ .bottom{
1067
+ overflow: auto;
1068
+ height: calc(100% - 70px);
1069
+ }
1070
+ .bottom::-webkit-scrollbar {
1071
+ background-color: #eaedf1;
1072
+ background-color: transparent;
1073
+ width: 4px;
1074
+ height: 4px;
1075
+ }
1076
+ .bottom::-webkit-scrollbar-thumb {
1077
+ border-radius: 4px;
1078
+ background-color: rgba(0, 0, 0, 0.25);
1079
+ }
1080
+
1081
+ :global {
1082
+ .anticon {
1083
+ vertical-align: 0;
1084
+ }
1085
+ }
1086
+ }
1087
+ .teacher_layout_modal_newlabo{
1088
+ .top,
1089
+ .bottom {
1090
+ .active {
1091
+ background: @color-background-info-weak !important
1092
+ }
1093
+ }
1094
+ }
1095
+
1096
+ //历史记录11
1097
+ .history_list {
1098
+ position: absolute;
1099
+ top: 0;
1100
+ background: rgba(0, 0, 0, 0.3);
1101
+ width: 100%;
1102
+ height: 100%;
1103
+ overflow: hidden;
1104
+
1105
+ .search_layout {
1106
+ background: #fff;
1107
+ position: absolute;
1108
+ z-index: 10;
1109
+ bottom: -500px;
1110
+ width: 100%;
1111
+ border-radius: 16px 16px 0px 0px;
1112
+ overflow: hidden;
1113
+ animation: mymove 1s forwards;
1114
+ box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
1115
+
1116
+ .title {
1117
+ border-bottom: 1px solid @color-border-Tr;
1118
+ font-size: 16px;
1119
+ font-weight: 600;
1120
+ line-height: 150%;
1121
+ padding: 16px 24px;
1122
+ display: flex;
1123
+ justify-content: space-between;
1124
+ svg {
1125
+ font-size: 12px;
1126
+ cursor: pointer;
1127
+ opacity: 0.65;
1128
+ font-weight: 300;
1129
+ }
1130
+ }
1131
+ .search_top {
1132
+ position: relative;
1133
+ margin: 16px 24px;
1134
+ // margin-bottom: 0;
1135
+ // display: flex;
1136
+ // align-items: center;
1137
+ // justify-content: space-between;
1138
+ background-color: #fff;
1139
+
1140
+ input {
1141
+ width: 100%;
1142
+ height: 40px;
1143
+ line-height: 40px;
1144
+ border-radius: 2px;
1145
+ border: 1px solid @color-border-secondary;
1146
+ padding-left: 46px;
1147
+ padding-right: 30px;
1148
+ color: @color-text-Tr;
1149
+ }
1150
+ :global {
1151
+ .anticon {
1152
+ position: absolute;
1153
+ top: 11px;
1154
+ z-index: 1;
1155
+ left: 14px;
1156
+ font-size: 16px;
1157
+ color: rgba(0, 0, 0, 0.65);
1158
+ }
1159
+ .guanbi_Close {
1160
+ position: absolute;
1161
+ top: 3px;
1162
+ right: 38px;
1163
+ font-size: 16px;
1164
+ z-index: 1;
1165
+ color: rgba(0, 0, 0, 0.65);
1166
+ cursor: pointer;
1167
+ svg {
1168
+ font-size: 10px;
1169
+ opacity: 0.65;
1170
+ }
1171
+ }
1172
+ }
1173
+ svg {
1174
+ opacity: 0.65;
1175
+ font-weight: 300;
1176
+ }
1177
+ }
1178
+ .main_list:first-child {
1179
+ margin-top: 0;
1180
+ }
1181
+ .main_list {
1182
+ overflow: auto;
1183
+ height: 510px;
1184
+ &::-webkit-scrollbar {
1185
+ background-color: #eaedf1;
1186
+ background-color: transparent;
1187
+ width: 4px;
1188
+ height: 4px;
1189
+ }
1190
+ &::-webkit-scrollbar-thumb {
1191
+ border-radius: 4px;
1192
+ background-color: rgba(0, 0, 0, 0.25);
1193
+ }
1194
+ //list_item
1195
+ .list_item{
1196
+ .list_summary{
1197
+ width: 100%;
1198
+ padding: 8px 16px;
1199
+ display: flex;
1200
+ align-items: center;
1201
+ border-bottom: 1px solid @color-border-secondary;
1202
+ cursor: pointer;
1203
+ &:hover{
1204
+ background-color: #EBEBEB;
1205
+ }
1206
+ .head_img{
1207
+ width: 36px;
1208
+ height: 36px;
1209
+ border-radius: 50%;
1210
+ margin-right: 16px;
1211
+
1212
+ img{
1213
+ width: 36px;
1214
+ height: 36px;
1215
+ border-radius: 50%;
1216
+ }
1217
+ svg{
1218
+ width: 36px;
1219
+ height: 36px;
1220
+ }
1221
+ }
1222
+ .list_desc{
1223
+ width: calc(100% - 56px);
1224
+ .name{
1225
+ color:@color-text-Tr;
1226
+ font-size: 16px;
1227
+ font-weight: 600;
1228
+ line-height: 150%;
1229
+ margin-bottom: 4px;
1230
+ .time{
1231
+ float: right;
1232
+ font-size: 14px;
1233
+ color: @color-text-tertiary;
1234
+ font-weight: 400;
1235
+ }
1236
+ }
1237
+ .decs{
1238
+ color: @color-text-Secondary-Tr;
1239
+ font-size: 14px;
1240
+ font-weight: 400;
1241
+ line-height: 150%;
1242
+ overflow: hidden;
1243
+ text-overflow: ellipsis;
1244
+ white-space: nowrap;
1245
+ span{
1246
+ color:@color-text-primary;
1247
+ }
1248
+ }
1249
+ }
1250
+ .open{
1251
+ font-size: 24px;
1252
+ color: @color-icon-fill-Tr;
1253
+ }
1254
+ //展开
1255
+ .active{
1256
+ svg{
1257
+ transform: rotate(90deg);
1258
+ }
1259
+ }
1260
+ }
1261
+ .list_summary_active{
1262
+ background-color: @color-background-primary-weak;
1263
+ &:hover{
1264
+ background-color: @color-background-primary-weak;
1265
+ }
1266
+ }
1267
+
1268
+ //详情
1269
+ .list_detail{
1270
+ background-color: @color-background-fillquaternary-Tr;
1271
+ .list {
1272
+ // margin: 8px 24px;
1273
+ // padding: 8px;
1274
+ // border-bottom: 1px solid @color-border-secondary;
1275
+ padding: 8px 16px;
1276
+ margin-bottom: 1px;
1277
+ position: relative;
1278
+ cursor: pointer;
1279
+ &:hover {
1280
+ background-color: rgba(0, 0, 0, 0.04);
1281
+ // border-radius: 8px;
1282
+ }
1283
+ &::before {
1284
+ content: "";
1285
+ display: inline-block;
1286
+ width: 100%;
1287
+ height: 1px;
1288
+ background-color: @color-border-secondary;
1289
+ position: absolute;
1290
+ bottom: -1px;
1291
+ left: -1px;
1292
+ }
1293
+ .name {
1294
+ display: flex;
1295
+ justify-content: space-between;
1296
+ align-items: center;
1297
+ margin-bottom: 4px;
1298
+ p {
1299
+ color: @color-text-Secondary-Tr;
1300
+ font-size: 14px;
1301
+ line-height: 1.5;
1302
+ }
1303
+ .time {
1304
+ font-size: 14px;
1305
+ color: @color-text-tertiary;
1306
+ }
1307
+ }
1308
+ .con {
1309
+ color: @color-text-Tr;
1310
+ font-size: 14px;
1311
+ font-weight: 400;
1312
+ line-height: 150%;
1313
+ overflow: hidden;
1314
+ text-overflow: ellipsis;
1315
+ // -webkit-box-orient: vertical;
1316
+ // -webkit-line-clamp: 2;
1317
+ // display: -webkit-box;
1318
+
1319
+ max-height: 21px;
1320
+ white-space: nowrap;
1321
+ span {
1322
+ color: @color-text-primary;
1323
+ }
1324
+ }
1325
+ }
1326
+ .list_more{
1327
+ text-align: center;
1328
+ color: @color-text-tertiary-Tr;
1329
+ font-size: 14px;
1330
+ }
1331
+ }
1332
+ }
1333
+
1334
+ .no_data{
1335
+ text-align: center;
1336
+ margin-top: 130px;
1337
+ img{
1338
+ width: 160px;
1339
+ }
1340
+ p{
1341
+ margin-top: 24px;
1342
+ color: rgba(0, 0, 0, 0.45);
1343
+ text-align: center;
1344
+ font-size: 14px;
1345
+ line-height: 100%; /* 14px */
1346
+ }
1347
+ }
1348
+ }
1349
+ }
1350
+ @keyframes mymove {
1351
+ from {
1352
+ bottom: -500px;
1353
+ }
1354
+ to {
1355
+ bottom: 0;
1356
+ }
1357
+ }
1358
+
1359
+ @-webkit-keyframes mymove /*Safari and Chrome*/ {
1360
+ from {
1361
+ bottom: -500px;
1362
+ }
1363
+ to {
1364
+ bottom: 0;
1365
+ }
1366
+ }
1367
+
1368
+ :global {
1369
+ .anticon {
1370
+ vertical-align: 0;
1371
+ }
1372
+ }
1373
+ }
1374
+ //全屏下的历史记录
1375
+ .history_list_broadside {
1376
+ width: 417px;
1377
+ height: calc(100% - 48px);
1378
+ right: 0;
1379
+ top: 48px;
1380
+ border-radius: 0;
1381
+ background: transparent;
1382
+ overflow: visible;
1383
+ .search_layout {
1384
+ height: 100%;
1385
+ border-radius: 0;
1386
+ box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
1387
+ .search_top{
1388
+ margin: 16px;
1389
+ }
1390
+ .title{
1391
+ padding: 16px;
1392
+ }
1393
+ .main_list {
1394
+ height: calc(100% - 140px);
1395
+ max-height: calc(100% - 140px);
1396
+ // .list{
1397
+ // margin: 8px 16px 17px;
1398
+ // }
1399
+ }
1400
+ }
1401
+ }
1402
+