1 | .rv-root {
|
2 | position: fixed;
|
3 | top: 0;
|
4 | right: 0;
|
5 | bottom: 0;
|
6 | left: 0;
|
7 | display: flex;
|
8 | align-items: center;
|
9 | justify-content: center;
|
10 | }
|
11 | .rv-mask {
|
12 | position: fixed;
|
13 | top: 0;
|
14 | right: 0;
|
15 | bottom: 0;
|
16 | left: 0;
|
17 | z-index: 9999;
|
18 | height: 100%;
|
19 | background-color: rgba(0, 0, 0, 0.5);
|
20 | }
|
21 | .rv-wrap {
|
22 | position: relative;
|
23 | width: 18.5rem;
|
24 | background-color: #fff;
|
25 | border-radius: 10px;
|
26 | z-index: 9999;
|
27 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
28 |
|
29 | .rv-close {
|
30 | position: absolute;
|
31 | right: 0;
|
32 | top: 0;
|
33 | height: 20px;
|
34 | width: 20px;
|
35 | margin: 0.625rem 0.625rem 0.625rem auto;
|
36 | transition: opacity 0.2s ease-in-out;
|
37 |
|
38 | &:hover {
|
39 | opacity: 0.5;
|
40 | }
|
41 | }
|
42 | .rv-title {
|
43 | text-align: center;
|
44 | margin: 0.625rem auto;
|
45 | font-size: 14px;
|
46 | color: #9b9b9b;
|
47 | }
|
48 |
|
49 | .rv-content {
|
50 | padding: 0.75rem 1rem 1.125rem;
|
51 | text-align: center;
|
52 |
|
53 | .rv-text {
|
54 | font-size: 18px;
|
55 | white-space: nowrap;
|
56 | text-overflow: ellipsis;
|
57 | overflow: hidden;
|
58 | word-break: break-all;
|
59 | }
|
60 |
|
61 | .rv-image {
|
62 | position: relative;
|
63 | margin: 1.5625rem auto;
|
64 | img,
|
65 | .rv-image-mask {
|
66 | border-radius: 50%;
|
67 | max-width: 152px;
|
68 | max-height: 152px;
|
69 | user-select: none;
|
70 | }
|
71 | .rv-image-mask {
|
72 | position: absolute;
|
73 | top: 0;
|
74 | left: 0;
|
75 | bottom: 0;
|
76 | right: 0;
|
77 | margin: auto;
|
78 | width: 152px;
|
79 | height: 152px;
|
80 | background-color: rgba(0, 0, 0, 0.5);
|
81 |
|
82 | &,
|
83 | .rv-image-mask-success,
|
84 | .rv-image-mask-error {
|
85 | opacity: 0;
|
86 | visibility: hidden;
|
87 | transition: opacity 0.2s ease-in-out;
|
88 | }
|
89 |
|
90 | svg {
|
91 | margin: auto;
|
92 | position: absolute;
|
93 | left: 0;
|
94 | top: 0;
|
95 | right: 0;
|
96 | bottom: 0;
|
97 | transition: fill 0.2s ease-in-out;
|
98 | }
|
99 | }
|
100 | }
|
101 |
|
102 | .rv-control {
|
103 | position: relative;
|
104 | width: 95%;
|
105 | height: 3.125rem;
|
106 | margin: 0 auto 0.9375rem auto;
|
107 | user-select: none;
|
108 |
|
109 | .rv-bar {
|
110 | position: absolute;
|
111 | left: 0;
|
112 | top: 0;
|
113 | height: 100%;
|
114 | width: 100%;
|
115 | background-color: #f1f1f1;
|
116 | border-radius: 100px;
|
117 | }
|
118 |
|
119 | .rv-slider {
|
120 | position: absolute;
|
121 | top: 0;
|
122 | left: 0;
|
123 | height: 3.125rem;
|
124 | width: 3.125rem;
|
125 | background: #fff;
|
126 | border-radius: 50%;
|
127 | box-shadow: 0 21px 52px 0 rgba(82,82,82,.2);
|
128 | transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out,
|
129 | box-shadow 0.2s ease-in-out;
|
130 |
|
131 | &.rv-slider-normal {
|
132 | background: #4E6EF2;
|
133 | border-color: #4E6EF2;
|
134 | box-shadow: 0px 7px 18px -5px #4E6EF2;
|
135 |
|
136 | svg {
|
137 | fill: #fff;
|
138 | }
|
139 | }
|
140 |
|
141 | svg {
|
142 | margin: auto;
|
143 | position: absolute;
|
144 | left: 0;
|
145 | top: 0;
|
146 | right: 0;
|
147 | bottom: 0;
|
148 | fill: #8a8a8a;
|
149 | transition: fill 0.2s ease-in-out;
|
150 | }
|
151 | }
|
152 | .rv-slider-error {
|
153 | background: #ff7875;
|
154 | border-color: #ff7875;
|
155 | box-shadow: 0px 7px 18px -5px #ff7875;
|
156 |
|
157 | svg {
|
158 | fill: #fff;
|
159 | }
|
160 | }
|
161 | .rv-slider-success {
|
162 | background: #52c41a;
|
163 | border-color: #52c41a;
|
164 | box-shadow: 0px 7px 18px -5px #52c41a;
|
165 |
|
166 | svg {
|
167 | fill: #fff;
|
168 | }
|
169 | }
|
170 | }
|
171 |
|
172 | .rv-extra {
|
173 | margin-top: 1.4375rem;
|
174 | margin-bottom: 0.3125rem;
|
175 | font-size: 14px;
|
176 |
|
177 | span {
|
178 | display: inline-block;
|
179 | width: 15px;
|
180 | height: 15px;
|
181 | vertical-align: middle;
|
182 | margin-right: 3px;
|
183 | margin-top: -2px;
|
184 | }
|
185 |
|
186 | a {
|
187 | color: inherit;
|
188 | cursor: pointer;
|
189 | text-decoration: none;
|
190 | }
|
191 | }
|
192 | }
|
193 | }
|
194 | @keyframes shake {
|
195 | 0% {
|
196 | left: 0px;
|
197 | }
|
198 | 25% {
|
199 | left: 3px;
|
200 | }
|
201 | 50% {
|
202 | left: 0px;
|
203 | }
|
204 | 75% {
|
205 | left: -3px;
|
206 | }
|
207 | 100% {
|
208 | left: 0px;
|
209 | }
|
210 | }
|