refactor(module(qa)): 代码重构

zhuguifei

2026-03-04 63b4909ac5d0b7355be211cc7080673b41cdb3cc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
@use 'sass:math';
 
$base-size: 100px;
$em-to-px: math.div($base-size, 2.5);
$loader-color-1: rgb(var(--error-color) / 75%);
$loader-color-2: rgb(var(--primary-color) / 75%);
$loader-color-3: rgb(var(--success-color) / 75%);
$loader-color-4: rgb(var(--warning-color) / 75%);
 
@function loader-size($em-value) {
  @return $em-to-px * $em-value;
}
 
/* From Uiverse.io by SchawnnahJ */
.loader {
  position: relative;
  width: loader-size(2.5);
  height: loader-size(2.5);
  transform: rotate(165deg);
}
 
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: loader-size(0.5);
  height: loader-size(0.5);
  border-radius: loader-size(0.25);
  transform: translate(-50%, -50%);
}
 
.loader:before {
  animation: before8 2s infinite;
}
 
.loader:after {
  animation: after6 2s infinite;
}
 
@keyframes before8 {
  0% {
    width: loader-size(0.5);
    box-shadow:
      loader-size(1) loader-size(-0.5) $loader-color-1,
      loader-size(-1) loader-size(0.5) $loader-color-2;
  }
 
  35% {
    width: loader-size(2.5);
    box-shadow:
      0 loader-size(-0.5) $loader-color-1,
      0 loader-size(0.5) $loader-color-2;
  }
 
  70% {
    width: loader-size(0.5);
    box-shadow:
      loader-size(-1) loader-size(-0.5) $loader-color-1,
      loader-size(1) loader-size(0.5) $loader-color-2;
  }
 
  100% {
    box-shadow:
      loader-size(1) loader-size(-0.5) $loader-color-1,
      loader-size(-1) loader-size(0.5) $loader-color-2;
  }
}
 
@keyframes after6 {
  0% {
    height: loader-size(0.5);
    box-shadow:
      loader-size(0.5) loader-size(1) $loader-color-3,
      loader-size(-0.5) loader-size(-1) $loader-color-4;
  }
 
  35% {
    height: loader-size(2.5);
    box-shadow:
      loader-size(0.5) 0 $loader-color-3,
      loader-size(-0.5) 0 $loader-color-4;
  }
 
  70% {
    height: loader-size(0.5);
    box-shadow:
      loader-size(0.5) loader-size(-1) $loader-color-3,
      loader-size(-0.5) loader-size(1) $loader-color-4;
  }
 
  100% {
    box-shadow:
      loader-size(0.5) loader-size(1) $loader-color-3,
      loader-size(-0.5) loader-size(-1) $loader-color-4;
  }
}
 
.loader {
  position: absolute;
  top: calc(50% - #{math.div(loader-size(2.5), 2)});
  left: calc(50% - #{math.div(loader-size(2.5), 2)});
}