bhd-components 0.8.1 → 0.9.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.
Files changed (42) hide show
  1. package/README.md +1 -1
  2. package/dist/{3f8529e7.esm.es5.development.js → 100c4e1e.esm.es5.development.js} +2985 -2009
  3. package/dist/{f460f54e.esm.es5.production.js → a4d5ce04.esm.es5.production.js} +1 -1
  4. package/dist/index.esm.es5.development.css +2789 -1232
  5. package/dist/index.esm.es5.development.js +7225 -172
  6. package/dist/index.esm.es5.production.css +1 -1
  7. package/dist/index.esm.es5.production.js +1 -1
  8. package/dist/vendor.esm.es5.development.esm.es5.development.css +84 -83
  9. package/dist/vendor.esm.es5.production.esm.es5.production.css +10 -8
  10. package/es2017/bhdDatePicker/index.d.ts +16 -0
  11. package/es2017/bhdDatePicker/index.js +427 -0
  12. package/es2017/bhdDatePicker/index.module.less +886 -0
  13. package/es2017/customerService/historyFun.d.ts +1 -1
  14. package/es2017/customerService/historyFun.js +2 -1
  15. package/es2017/customerService/html2canvas.test.js +1234 -1233
  16. package/es2017/customerService/index.d.ts +1 -1
  17. package/es2017/customerService/index.js +134 -32
  18. package/es2017/customerService/index.module.less +7 -5
  19. package/es2017/customerService/index2.module.less +7 -5
  20. package/es2017/customerService/screenShotPlugin.esm.js +6515 -0
  21. package/es2017/customerService/screenshotTool.d.ts +1 -0
  22. package/es2017/customerService/screenshotTool.js +23 -12
  23. package/es2017/index.d.ts +1 -0
  24. package/es2017/index.js +1 -0
  25. package/es2017/theme/variable.less +27 -0
  26. package/esm/bhdDatePicker/index.d.ts +16 -0
  27. package/esm/bhdDatePicker/index.js +434 -0
  28. package/esm/bhdDatePicker/index.module.less +886 -0
  29. package/esm/customerService/historyFun.d.ts +1 -1
  30. package/esm/customerService/historyFun.js +2 -1
  31. package/esm/customerService/html2canvas.test.js +34 -34
  32. package/esm/customerService/index.d.ts +1 -1
  33. package/esm/customerService/index.js +139 -36
  34. package/esm/customerService/index.module.less +7 -5
  35. package/esm/customerService/index2.module.less +7 -5
  36. package/esm/customerService/screenShotPlugin.esm.js +6516 -0
  37. package/esm/customerService/screenshotTool.d.ts +1 -0
  38. package/esm/customerService/screenshotTool.js +21 -10
  39. package/esm/index.d.ts +1 -0
  40. package/esm/index.js +1 -0
  41. package/esm/theme/variable.less +27 -0
  42. package/package.json +20 -2
@@ -0,0 +1,886 @@
1
+ @import "../theme/variable.less";
2
+ // 包裹组件样式
3
+ .bhdDatePicker {
4
+ width: 100%;
5
+
6
+ :global {
7
+ .bhd-picker {
8
+ // table 模式下显示样式
9
+ &.table-date-picker {
10
+ * {
11
+ background: transparent;
12
+ border: none;
13
+ }
14
+ position: relative;
15
+ top: 0;
16
+ left: 0;
17
+ border: none;
18
+ box-shadow: none;
19
+ background: transparent;
20
+ padding: 0;
21
+ margin-left: -78px;
22
+ cursor: pointer;
23
+ .bhd-picker-input {
24
+ &:nth-child(1) {
25
+ width: 78px;
26
+ opacity: 0;
27
+ & > input {
28
+ cursor: pointer;
29
+ &::placeholder {
30
+ display: none !important;
31
+ opacity: 0;
32
+ }
33
+ }
34
+ }
35
+ &:nth-child(3) {
36
+ display: none;
37
+ }
38
+ }
39
+ .bhd-picker-range-separator {
40
+ display: none;
41
+ }
42
+ .bhd-picker-active-bar {
43
+ display: none;
44
+ }
45
+ .bhd-picker-suffix {
46
+ color: @color-text-Tr;
47
+ }
48
+ .bhd-picker-clear {
49
+ display: none;
50
+ }
51
+ }
52
+ }
53
+ }
54
+ }
55
+ // 弹出日历样式
56
+ .bhdDatePickerPopup {
57
+ // 单选、范围、日程安排
58
+ &.singlePicker,
59
+ &.rangePicker,
60
+ &.extraPicker {
61
+ :global {
62
+ // 时间
63
+ .bhd-picker-time-panel {
64
+ .bhd-picker-time-panel-column {
65
+ margin: 0;
66
+
67
+ & > li.bhd-picker-time-panel-cell {
68
+ margin: 0;
69
+ .bhd-picker-time-panel-cell-inner {
70
+ width: 56px;
71
+ height: 32px;
72
+ line-height: 32px;
73
+ padding: 0;
74
+ text-align: center;
75
+ border-radius: 0;
76
+ }
77
+ }
78
+ &:hover {
79
+ &::-webkit-scrollbar {
80
+ width: 0;
81
+ }
82
+ }
83
+ &:not(:first-child) {
84
+ border: none;
85
+ }
86
+ }
87
+ }
88
+
89
+ // 时间与天相邻
90
+ .bhd-picker-date-panel + .bhd-picker-time-panel {
91
+ padding: 0;
92
+ gap: 0;
93
+ .bhd-picker-header {
94
+ height: 48px;
95
+ .bhd-picker-header-view {
96
+ line-height: 48px !important;
97
+ }
98
+ }
99
+ }
100
+
101
+ // 天、周
102
+ .bhd-picker-date-panel,
103
+ .bhd-picker-week-panel {
104
+ width: 272px;
105
+ & .bhd-picker-content {
106
+ width: 224px;
107
+ margin: 0 auto;
108
+ & th {
109
+ width: 32px;
110
+ height: 32px;
111
+ }
112
+ }
113
+
114
+ & .bhd-picker-cell {
115
+ padding: 0;
116
+ padding-top: 8px;
117
+
118
+ &::before {
119
+ top: calc(50% + 4px);
120
+ height: 32px;
121
+ }
122
+
123
+ & .bhd-picker-cell-inner {
124
+ width: 32px;
125
+ height: 32px;
126
+ line-height: 32px;
127
+ }
128
+ }
129
+
130
+ & .bhd-picker-body {
131
+ position: relative;
132
+
133
+ // 设置标题背景色
134
+ &::before {
135
+ content: "";
136
+ width: 100%;
137
+ height: 32px;
138
+ border-radius: 4px;
139
+ position: absolute;
140
+ top: 0;
141
+ left: 0;
142
+ background-color: @color-background-filltertiary-Tr;
143
+ }
144
+ }
145
+ }
146
+
147
+ //周
148
+ .bhd-picker-week-panel {
149
+ .bhd-picker-week-panel-row:hover {
150
+ color: @color-background-primary-base !important;
151
+ & td {
152
+ &:before {
153
+ background-color: @color-background-primary-weak !important;
154
+ }
155
+
156
+ .bhd-picker-cell-inner {
157
+ color: @color-background-primary-base !important;
158
+ }
159
+ }
160
+ }
161
+ }
162
+
163
+ // 月
164
+ .bhd-picker-month-panel {
165
+ width: 272px;
166
+ & .bhd-picker-body {
167
+ width: 240px;
168
+ }
169
+ & .bhd-picker-content {
170
+ height: 200px;
171
+ width: 240px;
172
+
173
+ & tbody {
174
+ display: flex;
175
+ flex-wrap: wrap;
176
+ gap: 24px;
177
+
178
+ & tr {
179
+ display: flex;
180
+ gap: 24px;
181
+ }
182
+ }
183
+ }
184
+
185
+ & .bhd-picker-cell {
186
+ padding: 0;
187
+ &::before {
188
+ height: 32px;
189
+ width: 64px;
190
+ }
191
+
192
+ & .bhd-picker-cell-inner {
193
+ width: 64px;
194
+ height: 32px;
195
+ line-height: 32px;
196
+ padding: 0;
197
+ }
198
+ }
199
+ }
200
+
201
+ //季度
202
+ .bhd-picker-quarter-panel {
203
+ & .bhd-picker-content {
204
+ height: 32px;
205
+ }
206
+ & .bhd-picker-cell {
207
+ padding: 0;
208
+ &::before {
209
+ height: 32px;
210
+ }
211
+
212
+ & .bhd-picker-cell-inner {
213
+ height: 32px;
214
+ line-height: 32px;
215
+ padding: 0;
216
+ }
217
+ }
218
+ }
219
+
220
+ // 年
221
+ .bhd-picker-year-panel {
222
+ width: 272px;
223
+ & .bhd-picker-body {
224
+ width: 240px;
225
+ }
226
+ & .bhd-picker-content {
227
+ height: 200px;
228
+ width: 240px;
229
+
230
+ & tbody {
231
+ display: flex;
232
+ flex-wrap: wrap;
233
+ gap: 24px;
234
+
235
+ & tr {
236
+ display: flex;
237
+ gap: 24px;
238
+ }
239
+ }
240
+ }
241
+
242
+ & .bhd-picker-cell {
243
+ padding: 0;
244
+ &::before {
245
+ height: 32px;
246
+ width: 64px;
247
+ }
248
+
249
+ & .bhd-picker-cell-inner {
250
+ width: 64px;
251
+ height: 32px;
252
+ line-height: 32px;
253
+ padding: 0;
254
+ }
255
+ }
256
+ }
257
+
258
+ // 设置底部区域
259
+ .bhd-picker-footer {
260
+ padding: 12px 16px;
261
+ align-items: flex-start;
262
+ display: flex;
263
+ flex-direction: row;
264
+ justify-content: flex-end;
265
+ gap: 10px;
266
+ align-self: stretch;
267
+ border-top: 1px solid @color-background-fillsecondary-Tr !important;
268
+ line-height: 30px !important;
269
+ align-items: center;
270
+ flex-direction: row-reverse;
271
+ justify-content: flex-start;
272
+
273
+ & .bhd-picker-footer-extra {
274
+ padding: 0;
275
+ line-height: 30px;
276
+
277
+ &:not(:last-child) {
278
+ border-bottom: none;
279
+ }
280
+ }
281
+
282
+ & .bhd-picker-ranges {
283
+ padding: 0;
284
+ line-height: 30px;
285
+ height: 30px;
286
+ gap: 10px;
287
+ align-items: center;
288
+
289
+ & .bhd-picker-now {
290
+ color: @color-background-primary-base;
291
+ .bhd-picker-now-btn {
292
+ color: @color-background-primary-base;
293
+ }
294
+ }
295
+ }
296
+
297
+ // 今天按钮
298
+ .bhd-picker-today-btn {
299
+ font-size: 14px;
300
+ font-style: normal;
301
+ font-weight: 400;
302
+ line-height: 14px;
303
+ color: @color-background-primary-base !important;
304
+ }
305
+
306
+ .bhd-picker-now-btn {
307
+ color: @color-background-primary-base;
308
+ }
309
+
310
+ .bhd-picker-presets {
311
+ min-width: unset;
312
+ font-size: 14px;
313
+ font-style: normal;
314
+ font-weight: 400;
315
+ line-height: 14px;
316
+ color: @color-background-primary-base;
317
+ display: flex;
318
+ gap: 10px;
319
+ flex-direction: row-reverse;
320
+ justify-content: flex-start;
321
+ align-items: center;
322
+
323
+ .bhd-picker-preset-btn {
324
+ color: @color-background-primary-base;
325
+ height: 16px;
326
+ line-height: 16px;
327
+ }
328
+ }
329
+
330
+ .bhd-picker-ok {
331
+ & .bhd-btn-primary {
332
+ height: 30px;
333
+ padding: 0 16px;
334
+ // line-height: 30px;
335
+ border: none;
336
+ box-shadow: none;
337
+ line-height: 21px;
338
+
339
+ &:disabled,
340
+ &.disabled {
341
+ background: @color-background-fillsecondary-Tr;
342
+ color: @color-text-tertiary-Tr;
343
+ cursor: no-drop;
344
+ border: none;
345
+ box-shadow: none;
346
+ }
347
+ }
348
+ }
349
+
350
+ // 隐藏默认的当前
351
+ & > a {
352
+ display: none;
353
+ }
354
+ // & > .bhd-picker-ranges {
355
+ // display: none;
356
+ // }
357
+ }
358
+
359
+ // 默认
360
+ .bhd-picker-cell-in-view {
361
+ color: @color-text-Secondary-Tr;
362
+ }
363
+
364
+ .bhd-picker-cell-disabled.bhd-picker-cell-today
365
+ .bhd-picker-cell-inner::before {
366
+ border-color: @color-background-primary-base !important;
367
+ }
368
+ // 禁用
369
+ .bhd-picker-cell-disabled {
370
+ color: @color-text-quaternary-Tr !important;
371
+ }
372
+ }
373
+ }
374
+
375
+ // 单选
376
+ &.singlePicker {
377
+ :global {
378
+ .bhd-picker-date-panel,
379
+ .bhd-picker-week-panel {
380
+ width: 272px;
381
+ & .bhd-picker-content {
382
+ width: 224px;
383
+ margin: 0 auto;
384
+ & th {
385
+ width: 32px;
386
+ height: 32px;
387
+ }
388
+ }
389
+
390
+ & .bhd-picker-cell {
391
+ padding: 0;
392
+ padding-top: 8px;
393
+
394
+ &::before {
395
+ top: calc(50% + 4px);
396
+ height: 32px;
397
+ }
398
+
399
+ & .bhd-picker-cell-inner {
400
+ width: 32px;
401
+ height: 32px;
402
+ line-height: 32px;
403
+ }
404
+ }
405
+
406
+ .bhd-picker-header-super-prev-btn,
407
+ .bhd-picker-header-super-next-btn {
408
+ display: none !important;
409
+ }
410
+ }
411
+
412
+ .bhd-picker-week-panel {
413
+ width: 304px;
414
+ }
415
+
416
+ .bhd-picker-month-panel {
417
+ width: 272px;
418
+ & .bhd-picker-body {
419
+ width: 240px;
420
+ }
421
+ & .bhd-picker-content {
422
+ height: 200px;
423
+ width: 240px;
424
+ }
425
+
426
+ & .bhd-picker-cell {
427
+ padding: 0;
428
+ &::before {
429
+ height: 32px;
430
+ width: 64px;
431
+ }
432
+
433
+ & .bhd-picker-cell-inner {
434
+ width: 64px;
435
+ height: 32px;
436
+ line-height: 32px;
437
+ padding: 0;
438
+ }
439
+ }
440
+ }
441
+
442
+ .bhd-picker-year-panel {
443
+ width: 272px;
444
+ & .bhd-picker-body {
445
+ width: 240px;
446
+ }
447
+ & .bhd-picker-content {
448
+ height: 200px;
449
+ width: 240px;
450
+ }
451
+
452
+ & .bhd-picker-cell {
453
+ padding: 0;
454
+ &::before {
455
+ height: 32px;
456
+ width: 64px;
457
+ }
458
+
459
+ & .bhd-picker-cell-inner {
460
+ width: 64px;
461
+ height: 32px;
462
+ line-height: 32px;
463
+ padding: 0;
464
+ }
465
+ }
466
+ }
467
+
468
+ // // 设置 当天的位置
469
+ // .bhd-picker-date-panel + .bhd-picker-footer {
470
+ // justify-content: center !important;
471
+ // }
472
+ }
473
+ }
474
+
475
+ //范围选择
476
+ &.rangePicker {
477
+ :global {
478
+ .bhd-picker-date-panel {
479
+ .bhd-picker-header-super-prev-btn,
480
+ .bhd-picker-header-super-next-btn {
481
+ display: none !important;
482
+ }
483
+ .bhd-picker-header-prev-btn,
484
+ .bhd-picker-header-next-btn {
485
+ visibility: visible !important;
486
+ }
487
+ }
488
+ //范围选择公共
489
+ .bhd-picker-cell-in-view.bhd-picker-cell-in-range.bhd-picker-cell-range-hover-end
490
+ .bhd-picker-cell-inner::after {
491
+ left: 0;
492
+ }
493
+ .bhd-picker-cell-in-view.bhd-picker-cell-in-range.bhd-picker-cell-range-hover-start
494
+ .bhd-picker-cell-inner::after {
495
+ right: 0;
496
+ }
497
+ .bhd-picker-cell.bhd-picker-cell-in-view.bhd-picker-cell-in-range {
498
+ .bhd-picker-cell-inner::after {
499
+ right: 0 !important;
500
+ }
501
+ }
502
+
503
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-start::before {
504
+ left: 0;
505
+ }
506
+
507
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:not(
508
+ .bhd-picker-cell-in-range
509
+ ):not(.bhd-picker-cell-range-start):not(
510
+ .bhd-picker-cell-range-end
511
+ )::after,
512
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end:not(
513
+ .bhd-picker-cell-in-range
514
+ ):not(.bhd-picker-cell-range-start):not(
515
+ .bhd-picker-cell-range-end
516
+ )::after,
517
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start-single::after,
518
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-end-near-hover::after,
519
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-start-near-hover::after,
520
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-end-single::after,
521
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:not(
522
+ .bhd-picker-cell-in-range
523
+ )::after {
524
+ height: 32px;
525
+ border: none;
526
+ background: @color-background-primary-weak;
527
+ }
528
+ .bhd-picker-year-panel .bhd-picker-cell::before,
529
+ .bhd-picker-year-panel .bhd-picker-cell::before {
530
+ left: 0;
531
+ border-radius: 4px;
532
+ }
533
+
534
+ // 日期
535
+ .bhd-picker-date-panel {
536
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:not(
537
+ .bhd-picker-cell-in-range
538
+ ):not(.bhd-picker-cell-range-start):not(
539
+ .bhd-picker-cell-range-end
540
+ )::after,
541
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end:not(
542
+ .bhd-picker-cell-in-range
543
+ ):not(.bhd-picker-cell-range-start):not(
544
+ .bhd-picker-cell-range-end
545
+ )::after,
546
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start-single::after,
547
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-end-near-hover::after,
548
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-start.bhd-picker-cell-range-end.bhd-picker-cell-range-start-near-hover::after,
549
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end.bhd-picker-cell-range-end-single::after,
550
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:not(
551
+ .bhd-picker-cell-in-range
552
+ )::after {
553
+ top: calc(50% + 4px);
554
+ width: 32px;
555
+ }
556
+ }
557
+
558
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover:last-child::after,
559
+ tr
560
+ > .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-start:last-child::after,
561
+ .bhd-picker-cell-in-view.bhd-picker-cell-end.bhd-picker-cell-range-hover-edge-end.bhd-picker-cell-range-hover-edge-end-near-range::after,
562
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-edge-end:not(
563
+ .bhd-picker-cell-range-hover-edge-end-near-range
564
+ )::after,
565
+ .bhd-picker-cell-in-view.bhd-picker-cell-range-hover-end::after {
566
+ right: 0;
567
+ border: none;
568
+ }
569
+
570
+ .bhd-picker-cell-range-hover-start::after,
571
+ .bhd-picker-cell-range-hover-end::after,
572
+ .bhd-picker-cell-range-hover::after {
573
+ left: 0;
574
+ }
575
+
576
+ .bhd-picker-cell:hover:not(.bhd-picker-cell-in-view)
577
+ .bhd-picker-cell-inner,
578
+ .bhd-picker-cell:hover:not(.bhd-picker-cell-selected):not(
579
+ .bhd-picker-cell-range-start
580
+ ):not(.bhd-picker-cell-range-end):not(
581
+ .bhd-picker-cell-range-hover-start
582
+ ):not(.bhd-picker-cell-range-hover-end)
583
+ .bhd-picker-cell-inner {
584
+ background: @color-background-primary-weak !important;
585
+ color: @color-background-primary-base;
586
+ }
587
+ }
588
+ }
589
+
590
+ // 日程安排
591
+ &.extraPicker {
592
+ :global {
593
+ .extraText {
594
+ color: @color-background-elevated;
595
+ font-size: 12px;
596
+ font-style: normal;
597
+ font-weight: 400;
598
+ line-height: 12px;
599
+
600
+ &.selectable {
601
+ color: #5991ef;
602
+ }
603
+ &.noselectable {
604
+ color: @color-text-error;
605
+ }
606
+ &.selected {
607
+ color: #23d9c3;
608
+ }
609
+ }
610
+ .bhd-picker-date-panel {
611
+ width: 416px;
612
+ padding: 16px 24px 16px 24px;
613
+ & .bhd-picker-content {
614
+ width: 336px;
615
+ margin: 0 auto;
616
+ & th {
617
+ width: 48px;
618
+ height: 48px;
619
+ }
620
+ }
621
+
622
+ & .bhd-picker-cell {
623
+ padding: 0;
624
+ padding-top: 8px;
625
+
626
+ &::before {
627
+ top: calc(50% + 4px);
628
+ height: 48px;
629
+ }
630
+
631
+ & .bhd-picker-cell-inner {
632
+ width: 48px;
633
+ height: 48px;
634
+ line-height: 24px;
635
+ display: flex;
636
+ flex-direction: column;
637
+ justify-content: center;
638
+ align-items: center;
639
+ }
640
+ }
641
+
642
+ .bhd-picker-header-super-prev-btn,
643
+ .bhd-picker-header-super-next-btn {
644
+ display: none !important;
645
+ }
646
+ }
647
+
648
+ .bhd-picker-cell-selected {
649
+ color: @color-background-elevated !important;
650
+ .extraText {
651
+ &.selectable {
652
+ color: @color-background-elevated !important;
653
+ }
654
+ &.noselectable {
655
+ color: @color-background-elevated !important;
656
+ }
657
+ &.selected {
658
+ color: @color-background-elevated !important;
659
+ }
660
+ }
661
+
662
+ & .bhd-picker-cell-inner {
663
+ background-color: @color-background-primary-base;
664
+ }
665
+ }
666
+ .bhd-picker-cell-today {
667
+ color: @color-background-primary-base !important;
668
+ .extraText {
669
+ &.selectable {
670
+ color: @color-background-primary-base;
671
+ }
672
+ &.noselectable {
673
+ color: @color-background-primary-base;
674
+ }
675
+ &.selected {
676
+ color: @color-background-primary-base;
677
+ }
678
+ }
679
+ }
680
+ .bhd-picker-cell-disabled::before {
681
+ background: transparent;
682
+ color: @color-text-quaternary-Tr;
683
+ }
684
+ .bhd-picker-date-panel {
685
+ // 设置标题背景色高度
686
+ .bhd-picker-body {
687
+ &::before {
688
+ height: 48px !important;
689
+ }
690
+ }
691
+ }
692
+ }
693
+
694
+ // 查看
695
+ &.readonly {
696
+ :global {
697
+ // 隐藏头部点击按钮
698
+ .bhd-picker-header-view > button {
699
+ pointer-events: none;
700
+ }
701
+ // 隐藏底部
702
+ .bhd-picker-footer {
703
+ display: none !important;
704
+ }
705
+
706
+ // 头部位置变更
707
+ .bhd-picker-header {
708
+ position: relative;
709
+ .bhd-picker-header-prev-btn {
710
+ position: absolute;
711
+ right: 40px;
712
+ border: none !important;
713
+ }
714
+ .bhd-picker-header-view {
715
+ position: absolute;
716
+ left: 0;
717
+ }
718
+ .bhd-picker-header-next-btn {
719
+ position: absolute;
720
+ right: 0;
721
+ border: none !important;
722
+ }
723
+ }
724
+ .bhd-picker-cell-in-view {
725
+ pointer-events: none;
726
+ color: @color-text-Secondary-Tr;
727
+ }
728
+ }
729
+ }
730
+ }
731
+
732
+ // 公共的
733
+ :global {
734
+ // 重置样式
735
+ * {
736
+ padding: 0;
737
+ margin: 0;
738
+ box-sizing: border-box;
739
+ }
740
+
741
+ // 重置table样式
742
+ table {
743
+ display: table !important;
744
+ width: 100%;
745
+ table-layout: fixed;
746
+ margin-bottom: 0 !important;
747
+ border-collapse: separate;
748
+ thead {
749
+ background-color: transparent !important;
750
+ tr {
751
+ background-color: transparent !important;
752
+ border: none !important;
753
+
754
+ th {
755
+ border: none !important;
756
+ }
757
+ }
758
+ }
759
+
760
+ th {
761
+ background-color: transparent !important;
762
+ }
763
+ tbody {
764
+ tr {
765
+ background-color: @color-background-elevated;
766
+ border: none !important;
767
+ td {
768
+ border: none !important;
769
+ }
770
+ }
771
+ }
772
+ }
773
+
774
+ // 面板样式
775
+ .bhd-picker-panel-container {
776
+ box-shadow: none !important;
777
+ border: 1px solid @color-border-Tr;
778
+ }
779
+
780
+ // 年的面板:禁止点击十年的按钮
781
+ .bhd-picker-year-panel {
782
+ & .bhd-picker-decade-btn {
783
+ cursor: not-allowed !important;
784
+ pointer-events: none;
785
+ }
786
+ }
787
+
788
+ // 内容面板
789
+ .bhd-picker-decade-panel,
790
+ .bhd-picker-year-panel,
791
+ .bhd-picker-quarter-panel,
792
+ .bhd-picker-month-panel,
793
+ .bhd-picker-week-panel,
794
+ .bhd-picker-date-panel,
795
+ .bhd-picker-time-panel {
796
+ padding: 16px;
797
+ gap: 16px;
798
+ & .bhd-picker-body {
799
+ padding: 0 !important;
800
+ }
801
+
802
+ // 设置头部圆角
803
+ & .bhd-picker-content th {
804
+ &:first-child {
805
+ border-top-left-radius: 4px;
806
+ border-bottom-left-radius: 4px;
807
+ }
808
+
809
+ &:last-child {
810
+ border-top-right-radius: 4px;
811
+ border-bottom-right-radius: 4px;
812
+ }
813
+ }
814
+ }
815
+
816
+ // 头部
817
+ .bhd-picker-header {
818
+ padding: 0 !important;
819
+ border-bottom: none !important;
820
+ height: 32px;
821
+ line-height: 32px;
822
+
823
+ & button {
824
+ line-height: 32px !important;
825
+ color: @color-text-Secondary-Tr !important;
826
+ }
827
+ }
828
+ // 头部文字
829
+ .bhd-picker-header-view {
830
+ text-align: center;
831
+ color: @color-text-Tr;
832
+ font-size: 16px;
833
+ font-weight: 500 !important;
834
+ line-height: 32px !important;
835
+ & button {
836
+ line-height: 32px !important;
837
+ color: @color-text-Tr !important;
838
+ &:hover {
839
+ color: @color-background-primary-base !important;
840
+ }
841
+ }
842
+ }
843
+
844
+ // >>按钮图标
845
+ .bhd-picker-header-super-prev-btn,
846
+ .bhd-picker-header-super-next-btn,
847
+ .bhd-picker-header-prev-btn,
848
+ .bhd-picker-header-next-btn {
849
+ border: 1px solid @color-border-Tr !important;
850
+ color: @color-text-Secondary-Tr !important;
851
+ border-radius: 4px;
852
+ padding: 7px !important;
853
+ height: 32px;
854
+ width: 32px;
855
+ display: flex;
856
+ align-items: center;
857
+ justify-content: center;
858
+ }
859
+
860
+ //当天
861
+ .bhd-picker-cell-today {
862
+ color: @color-background-primary-base !important;
863
+ &:hover {
864
+ .bhd-picker-cell-inner {
865
+ background-color: @color-background-primary-weak !important;
866
+ }
867
+ }
868
+ }
869
+ //悬浮
870
+ .bhd-picker-cell-inner {
871
+ &:hover {
872
+ background-color: @color-background-primary-weak !important;
873
+ color: @color-background-primary-base !important;
874
+ }
875
+ }
876
+ //选中
877
+ .bhd-picker-cell-selected {
878
+ &:hover {
879
+ .bhd-picker-cell-inner {
880
+ background-color: @color-background-primary-hover !important;
881
+ color: @color-background-elevated !important;
882
+ }
883
+ }
884
+ }
885
+ }
886
+ }