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