bhd-components 0.6.9 → 0.7.1

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