yuang-framework-ui-pc 1.1.29 → 1.1.30
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.
- package/es/icons/SliderArrowSlide.js +1 -1
- package/es/icons/SliderArrowStatic.js +1 -1
- package/es/yu-slider-captcha-dialog/SliderCaptcha.js +30 -136
- package/es/yu-slider-captcha-dialog/index.js +5 -5
- package/es/yu-slider-captcha-dialog/style/index.scss +20 -20
- package/lib/icons/SliderArrowSlide.cjs +1 -1
- package/lib/icons/SliderArrowStatic.cjs +1 -1
- package/lib/yu-slider-captcha-dialog/SliderCaptcha.cjs +29 -135
- package/lib/yu-slider-captcha-dialog/index.cjs +5 -5
- package/lib/yu-slider-captcha-dialog/style/index.scss +20 -20
- package/package.json +1 -1
|
@@ -21,7 +21,7 @@ const _hoisted_1 = {
|
|
|
21
21
|
};
|
|
22
22
|
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
|
|
23
23
|
d: "M793.751 733.16l0-181.775-145.42 0 0-96.948L787.69199999 454.437l0-187.833L1024 502.911zM230.248 733.16l0-181.775L375.669 551.385l0-96.948-139.36099999 0 0-187.833L0 502.911zM575.621 757.396L442.32 757.396l0-490.793L575.621 266.603z",
|
|
24
|
-
fill: "
|
|
24
|
+
fill: "currentColor",
|
|
25
25
|
"p-id": "2866"
|
|
26
26
|
}, null, -1);
|
|
27
27
|
const _hoisted_3 = [
|
|
@@ -21,7 +21,7 @@ const _hoisted_1 = {
|
|
|
21
21
|
};
|
|
22
22
|
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
|
|
23
23
|
d: "M883.2 723.2a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z m0-256a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z m0-256a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z",
|
|
24
|
-
fill: "
|
|
24
|
+
fill: "currentColor",
|
|
25
25
|
"p-id": "3008"
|
|
26
26
|
}, null, -1);
|
|
27
27
|
const _hoisted_3 = [
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import { defineComponent, ref, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, unref, normalizeStyle, normalizeClass, createCommentVNode, toDisplayString,
|
|
1
|
+
import { defineComponent, ref, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, unref, normalizeStyle, normalizeClass, createCommentVNode, toDisplayString, createBlock } from "vue";
|
|
2
2
|
import { http } from "yuang-framework-ui-common/lib/config/httpConfig";
|
|
3
|
-
import { getBaseUrl } from "yuang-framework-ui-common/lib/utils/urlUtils";
|
|
4
3
|
import { RefreshRight, CircleClose } from "@element-plus/icons-vue";
|
|
5
4
|
import { SliderArrowStatic, SliderArrowSlide } from "../icons";
|
|
6
|
-
const _hoisted_1 = { class: "slider-captcha-container" };
|
|
7
|
-
const _hoisted_2 = { class: "slider-captcha-title" };
|
|
5
|
+
const _hoisted_1 = { class: "yu-slider-captcha-container" };
|
|
6
|
+
const _hoisted_2 = { class: "yu-slider-captcha-title" };
|
|
8
7
|
const _hoisted_3 = ["width", "height"];
|
|
9
|
-
const _hoisted_4 =
|
|
10
|
-
const _hoisted_5 = ["width", "height"];
|
|
11
|
-
const _hoisted_6 = { class: "slider-hint" };
|
|
8
|
+
const _hoisted_4 = { class: "slider-hint" };
|
|
12
9
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
13
10
|
...{ name: "SliderCaptcha" },
|
|
14
11
|
__name: "SliderCaptcha",
|
|
@@ -27,16 +24,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
27
24
|
const emit = __emit;
|
|
28
25
|
const canvas = ref(null);
|
|
29
26
|
const block = ref(null);
|
|
30
|
-
const isFrontCheck = ref(false);
|
|
31
27
|
const verifyActive = ref(false);
|
|
32
28
|
const verifySuccess = ref(false);
|
|
33
29
|
const verifyFail = ref(false);
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const image = ref(void 0);
|
|
30
|
+
ref(null);
|
|
31
|
+
ref(null);
|
|
32
|
+
ref(props.blockLength * 2);
|
|
33
|
+
ref(void 0);
|
|
34
|
+
ref(void 0);
|
|
40
35
|
const originX = ref(void 0);
|
|
41
36
|
const originY = ref(void 0);
|
|
42
37
|
const dragDistanceList = ref([]);
|
|
@@ -56,13 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
56
51
|
bindEvents();
|
|
57
52
|
};
|
|
58
53
|
const initDom = () => {
|
|
59
|
-
|
|
60
|
-
canvasCtx.value = canvas.value.getContext("2d");
|
|
61
|
-
blockCtx.value = block.value.getContext("2d");
|
|
62
|
-
initImage();
|
|
63
|
-
} else {
|
|
64
|
-
getCaptcha();
|
|
65
|
-
}
|
|
54
|
+
getCaptcha();
|
|
66
55
|
};
|
|
67
56
|
const getCaptcha = () => {
|
|
68
57
|
http.get("/sso-api/standard/framework-captcha/getSliderCaptcha", { params: {} }).then((res) => {
|
|
@@ -75,63 +64,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
75
64
|
}, 200);
|
|
76
65
|
});
|
|
77
66
|
};
|
|
78
|
-
const initImage = () => {
|
|
79
|
-
const imageObject = createImage(() => {
|
|
80
|
-
drawBlock();
|
|
81
|
-
let { canvasWidth, canvasHeight, blockX: blockX2, blockY: blockY2, blockRadius, blockWidth: blockWidth2 } = this;
|
|
82
|
-
canvasCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
83
|
-
blockCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
84
|
-
let yAxle = blockY2 - blockRadius * 2;
|
|
85
|
-
let ImageData = blockCtx.value.getImageData(blockX2, yAxle, blockWidth2, blockWidth2);
|
|
86
|
-
block.value.width = blockWidth2;
|
|
87
|
-
blockCtx.value.putImageData(ImageData, 0, yAxle);
|
|
88
|
-
isLoading.value = false;
|
|
89
|
-
key.value = "loyer";
|
|
90
|
-
});
|
|
91
|
-
image.value = imageObject;
|
|
92
|
-
};
|
|
93
|
-
const createImage = (onload) => {
|
|
94
|
-
const image2 = document.createElement("img");
|
|
95
|
-
image2.crossOrigin = "Anonymous";
|
|
96
|
-
image2.onload = onload;
|
|
97
|
-
image2.onerror = () => {
|
|
98
|
-
image2.src = `${getBaseUrl()}/img/slider-captcha/pic-0.jpeg`;
|
|
99
|
-
};
|
|
100
|
-
image2.src = getImageSrc();
|
|
101
|
-
return image2;
|
|
102
|
-
};
|
|
103
|
-
const getImageSrc = () => {
|
|
104
|
-
const len = props.imageList.length;
|
|
105
|
-
return len > 0 ? props.imageList[getNonceByRange(0, len)] : `https://loyer.wang/view/ftp/wallpaper/${getNonceByRange(1, 1e3)}.jpg`;
|
|
106
|
-
};
|
|
107
|
-
const getNonceByRange = (start, end) => {
|
|
108
|
-
return Math.round(Math.random() * (end - start) + start);
|
|
109
|
-
};
|
|
110
|
-
const drawBlock = () => {
|
|
111
|
-
blockX.value = getNonceByRange(blockWidth.value + 10, props.canvasWidth - (blockWidth.value + 10));
|
|
112
|
-
blockY.value = getNonceByRange(10 + props.blockRadius * 2, props.canvasHeight - (blockWidth.value + 10));
|
|
113
|
-
draw(canvasCtx.value, "fill");
|
|
114
|
-
draw(blockCtx.value, "clip");
|
|
115
|
-
};
|
|
116
|
-
const draw = (ctx, operation) => {
|
|
117
|
-
const PI = Math.PI;
|
|
118
|
-
let { blockX: x, blockY: y, blockLength: l, blockRadius: r } = this;
|
|
119
|
-
ctx.beginPath();
|
|
120
|
-
ctx.moveTo(x, y);
|
|
121
|
-
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
|
122
|
-
ctx.lineTo(x + l, y);
|
|
123
|
-
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
|
124
|
-
ctx.lineTo(x + l, y + l);
|
|
125
|
-
ctx.lineTo(x, y + l);
|
|
126
|
-
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
|
127
|
-
ctx.lineTo(x, y);
|
|
128
|
-
ctx.lineWidth = 2;
|
|
129
|
-
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
|
|
130
|
-
ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
|
|
131
|
-
ctx.stroke();
|
|
132
|
-
ctx[operation]();
|
|
133
|
-
ctx.globalCompositeOperation = "destination-over";
|
|
134
|
-
};
|
|
135
67
|
const bindEvents = () => {
|
|
136
68
|
var _a, _b, _c;
|
|
137
69
|
(_a = document.getElementById("slider-button")) == null ? void 0 : _a.addEventListener("mousedown", (event) => {
|
|
@@ -165,9 +97,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
165
97
|
}
|
|
166
98
|
};
|
|
167
99
|
const checkImgSrc = () => {
|
|
168
|
-
if (isFrontCheck.value) {
|
|
169
|
-
return true;
|
|
170
|
-
}
|
|
171
100
|
return !!canvas.value.src;
|
|
172
101
|
};
|
|
173
102
|
const startEvent = (clientX, clientY) => {
|
|
@@ -214,16 +143,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
214
143
|
if (!turingTest()) {
|
|
215
144
|
verifyFailEvent();
|
|
216
145
|
} else {
|
|
217
|
-
if (isFrontCheck.value) {
|
|
218
|
-
const accuracyValue = props.accuracy <= 1 ? 1 : props.accuracy > 10 ? 10 : props.accuracy;
|
|
219
|
-
const spliced = Math.abs(moveLength - blockX.value) <= accuracyValue;
|
|
220
|
-
if (!spliced) {
|
|
221
|
-
verifyFailEvent();
|
|
222
|
-
} else {
|
|
223
|
-
emit("success", { key: key.value, value: moveLength });
|
|
224
|
-
}
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
146
|
let params = {
|
|
228
147
|
key: key.value,
|
|
229
148
|
captcha: moveLength
|
|
@@ -260,15 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
260
179
|
sliderBoxWidth.value = 0;
|
|
261
180
|
sliderButtonLeft.value = 0;
|
|
262
181
|
nextTick(() => {
|
|
263
|
-
|
|
264
|
-
let { canvasWidth, canvasHeight } = this;
|
|
265
|
-
canvasCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
266
|
-
blockCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
267
|
-
block.value.width = canvasWidth;
|
|
268
|
-
image.value.src = getImageSrc();
|
|
269
|
-
} else {
|
|
270
|
-
getCaptcha();
|
|
271
|
-
}
|
|
182
|
+
getCaptcha();
|
|
272
183
|
});
|
|
273
184
|
};
|
|
274
185
|
const close = () => {
|
|
@@ -286,19 +197,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
286
197
|
createTextVNode(" 完成拼图验证 "),
|
|
287
198
|
createElementVNode("div", {
|
|
288
199
|
onClick: refresh,
|
|
289
|
-
class: "slider-captcha-refresh-icon"
|
|
200
|
+
class: "yu-slider-captcha-refresh-icon"
|
|
290
201
|
}, [
|
|
291
202
|
createVNode(unref(RefreshRight))
|
|
292
203
|
]),
|
|
293
204
|
createElementVNode("div", {
|
|
294
205
|
onClick: close,
|
|
295
|
-
class: "slider-captcha-close-icon"
|
|
206
|
+
class: "yu-slider-captcha-close-icon"
|
|
296
207
|
}, [
|
|
297
208
|
createVNode(unref(CircleClose))
|
|
298
209
|
])
|
|
299
210
|
]),
|
|
300
211
|
createElementVNode("div", {
|
|
301
|
-
class: "slider-captcha",
|
|
212
|
+
class: "yu-slider-captcha",
|
|
302
213
|
style: normalizeStyle({ width: _ctx.canvasWidth + "px" }),
|
|
303
214
|
onselectstart: "return false;"
|
|
304
215
|
}, [
|
|
@@ -312,35 +223,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
312
223
|
class: "success-hint",
|
|
313
224
|
style: normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
314
225
|
}, toDisplayString(successHint.value), 5)) : createCommentVNode("", true),
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
width: _ctx.canvasWidth,
|
|
328
|
-
height: _ctx.canvasHeight
|
|
329
|
-
}, null, 8, _hoisted_4)
|
|
330
|
-
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
|
|
331
|
-
createElementVNode("img", {
|
|
332
|
-
ref_key: "canvas",
|
|
333
|
-
ref: canvas,
|
|
334
|
-
class: "slide-canvas",
|
|
335
|
-
width: _ctx.canvasWidth,
|
|
336
|
-
height: _ctx.canvasHeight
|
|
337
|
-
}, null, 8, _hoisted_5),
|
|
338
|
-
createElementVNode("img", {
|
|
339
|
-
ref_key: "block",
|
|
340
|
-
ref: block,
|
|
341
|
-
class: normalizeClass(["slide-block", { "verify-fail": verifyFail.value }])
|
|
342
|
-
}, null, 2)
|
|
343
|
-
], 64)),
|
|
226
|
+
createElementVNode("img", {
|
|
227
|
+
ref_key: "canvas",
|
|
228
|
+
ref: canvas,
|
|
229
|
+
class: "slide-canvas",
|
|
230
|
+
width: _ctx.canvasWidth,
|
|
231
|
+
height: _ctx.canvasHeight
|
|
232
|
+
}, null, 8, _hoisted_3),
|
|
233
|
+
createElementVNode("img", {
|
|
234
|
+
ref_key: "block",
|
|
235
|
+
ref: block,
|
|
236
|
+
class: normalizeClass(["yu-slide-block", { "verify-fail": verifyFail.value }])
|
|
237
|
+
}, null, 2),
|
|
344
238
|
createElementVNode("div", {
|
|
345
239
|
class: normalizeClass(["slider", { "verify-active": verifyActive.value, "verify-success": verifySuccess.value, "verify-fail": verifyFail.value }])
|
|
346
240
|
}, [
|
|
@@ -349,20 +243,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
349
243
|
style: normalizeStyle({ width: sliderBoxWidth.value + "px" })
|
|
350
244
|
}, [
|
|
351
245
|
createElementVNode("div", {
|
|
352
|
-
class: "slider-button",
|
|
246
|
+
class: "yu-slider-button",
|
|
353
247
|
id: "slider-button",
|
|
354
248
|
style: normalizeStyle({ left: sliderButtonLeft.value + "px" })
|
|
355
249
|
}, [
|
|
356
250
|
!isSliderSlide.value ? (openBlock(), createBlock(unref(SliderArrowStatic), {
|
|
357
251
|
key: 0,
|
|
358
|
-
class: "slider-button-icon yu-color-primary"
|
|
252
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
359
253
|
})) : (openBlock(), createBlock(unref(SliderArrowSlide), {
|
|
360
254
|
key: 1,
|
|
361
|
-
class: "slider-button-icon yu-color-primary"
|
|
255
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
362
256
|
}))
|
|
363
257
|
], 4)
|
|
364
258
|
], 4),
|
|
365
|
-
createElementVNode("span",
|
|
259
|
+
createElementVNode("span", _hoisted_4, toDisplayString(_ctx.sliderHint), 1)
|
|
366
260
|
], 2)
|
|
367
261
|
], 4)
|
|
368
262
|
]);
|
|
@@ -2,12 +2,12 @@ import { defineComponent, ref, openBlock, createElementBlock, createElementVNode
|
|
|
2
2
|
import SliderCaptcha from "./SliderCaptcha";
|
|
3
3
|
const _hoisted_1 = {
|
|
4
4
|
key: 0,
|
|
5
|
-
class: "slider-captcha-dialog-container"
|
|
5
|
+
class: "yu-slider-captcha-dialog-container"
|
|
6
6
|
};
|
|
7
|
-
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "slider-captcha-dialog-modal" }, null, -1);
|
|
8
|
-
const _hoisted_3 = { class: "slider-captcha-dialog-wrapper" };
|
|
9
|
-
const _hoisted_4 = { class: "slider-captcha-dialog slide-up" };
|
|
10
|
-
const _hoisted_5 = { class: "slider-captcha" };
|
|
7
|
+
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "yu-slider-captcha-dialog-modal" }, null, -1);
|
|
8
|
+
const _hoisted_3 = { class: "yu-slider-captcha-dialog-wrapper" };
|
|
9
|
+
const _hoisted_4 = { class: "yu-slider-captcha-dialog slide-up" };
|
|
10
|
+
const _hoisted_5 = { class: "yu-slider-captcha" };
|
|
11
11
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
12
12
|
...{ name: "YuSliderCaptchaDialog" },
|
|
13
13
|
__name: "index",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.slider-captcha-dialog-container {
|
|
2
|
-
.slider-captcha-dialog-modal {
|
|
1
|
+
.yu-slider-captcha-dialog-container {
|
|
2
|
+
.yu-slider-captcha-dialog-modal {
|
|
3
3
|
position: fixed;
|
|
4
4
|
left: 0;
|
|
5
5
|
top: 0;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
z-index: 1000;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.slider-captcha-dialog-wrapper {
|
|
14
|
+
.yu-slider-captcha-dialog-wrapper {
|
|
15
15
|
position: fixed;
|
|
16
16
|
top: 0;
|
|
17
17
|
right: 0;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
z-index: 1001;
|
|
24
24
|
|
|
25
|
-
.slider-captcha-dialog {
|
|
25
|
+
.yu-slider-captcha-dialog {
|
|
26
26
|
// 在移动端禁止上下滑动，添加position: fixed;
|
|
27
27
|
position: fixed;
|
|
28
28
|
background: #fff;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
border-radius: 4px;
|
|
45
45
|
|
|
46
|
-
.slider-captcha {
|
|
46
|
+
.yu-slider-captcha {
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -65,18 +65,18 @@
|
|
|
65
65
|
|
|
66
66
|
|
|
67
67
|
|
|
68
|
-
.slider-captcha-container {
|
|
69
|
-
.slider-captcha {
|
|
68
|
+
.yu-slider-captcha-container {
|
|
69
|
+
.yu-slider-captcha {
|
|
70
70
|
position: relative;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.slider-captcha-title {
|
|
73
|
+
.yu-slider-captcha-title {
|
|
74
74
|
position: relative;
|
|
75
75
|
height: 30px;
|
|
76
76
|
font-size: 16px;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
.slider-captcha-refresh-icon {
|
|
79
|
+
.yu-slider-captcha-refresh-icon {
|
|
80
80
|
position: absolute;
|
|
81
81
|
right: 30px;
|
|
82
82
|
top: 0;
|
|
@@ -89,11 +89,11 @@
|
|
|
89
89
|
opacity: 0.7;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
.slider-captcha-refresh-icon:hover {
|
|
92
|
+
.yu-slider-captcha-refresh-icon:hover {
|
|
93
93
|
opacity: 1;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
.slider-captcha-close-icon {
|
|
96
|
+
.yu-slider-captcha-close-icon {
|
|
97
97
|
position: absolute;
|
|
98
98
|
right: 0;
|
|
99
99
|
top: 0;
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
opacity: 0.7;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
.slider-captcha-close-icon:hover {
|
|
109
|
+
.yu-slider-captcha-close-icon:hover {
|
|
110
110
|
opacity: 1;
|
|
111
111
|
}
|
|
112
112
|
}
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
/*阻塞块*/
|
|
173
|
-
.slide-block {
|
|
173
|
+
.yu-slide-block {
|
|
174
174
|
position: absolute;
|
|
175
175
|
left: 0;
|
|
176
176
|
top: 0;
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
/*校验失败时的阻塞块样式*/
|
|
182
|
-
.slide-block.verify-fail {
|
|
182
|
+
.yu-slide-block.verify-fail {
|
|
183
183
|
transition: left 0.5s linear;
|
|
184
184
|
}
|
|
185
185
|
|
|
@@ -214,7 +214,7 @@
|
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
/*滑动按钮*/
|
|
217
|
-
.slider-button {
|
|
217
|
+
.yu-slider-button {
|
|
218
218
|
background-color: rgb(255, 255, 255);
|
|
219
219
|
color: white;
|
|
220
220
|
text-align: center;
|
|
@@ -235,17 +235,17 @@
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
/*鼠标悬浮时的按钮样式*/
|
|
238
|
-
.slider-button:hover {
|
|
238
|
+
.yu-slider-button:hover {
|
|
239
239
|
//background: #1991FA
|
|
240
240
|
cursor: pointer;
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
/*鼠标悬浮时的按钮图标样式*/
|
|
244
|
-
.slider-button:hover .slider-button-icon {
|
|
244
|
+
.yu-slider-button:hover .yu-slider-button-icon {
|
|
245
245
|
}
|
|
246
246
|
|
|
247
247
|
/*滑动按钮图标*/
|
|
248
|
-
.slider-button-icon {
|
|
248
|
+
.yu-slider-button-icon {
|
|
249
249
|
width: 32px;
|
|
250
250
|
height: 32px;
|
|
251
251
|
font-size: 24px;
|
|
@@ -276,7 +276,7 @@
|
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
/*校验成功时的按钮图标样式*/
|
|
279
|
-
.verify-success .slider-button-icon {
|
|
279
|
+
.verify-success .yu-slider-button-icon {
|
|
280
280
|
background-position: 0 0 !important;
|
|
281
281
|
}
|
|
282
282
|
|
|
@@ -291,5 +291,5 @@
|
|
|
291
291
|
}
|
|
292
292
|
|
|
293
293
|
/*校验失败时的按钮图标样式*/
|
|
294
|
-
.verify-fail .slider-button-icon {
|
|
294
|
+
.verify-fail .yu-slider-button-icon {
|
|
295
295
|
}
|
|
@@ -22,7 +22,7 @@ const _hoisted_1 = {
|
|
|
22
22
|
};
|
|
23
23
|
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("path", {
|
|
24
24
|
d: "M793.751 733.16l0-181.775-145.42 0 0-96.948L787.69199999 454.437l0-187.833L1024 502.911zM230.248 733.16l0-181.775L375.669 551.385l0-96.948-139.36099999 0 0-187.833L0 502.911zM575.621 757.396L442.32 757.396l0-490.793L575.621 266.603z",
|
|
25
|
-
fill: "
|
|
25
|
+
fill: "currentColor",
|
|
26
26
|
"p-id": "2866"
|
|
27
27
|
}, null, -1);
|
|
28
28
|
const _hoisted_3 = [
|
|
@@ -22,7 +22,7 @@ const _hoisted_1 = {
|
|
|
22
22
|
};
|
|
23
23
|
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("path", {
|
|
24
24
|
d: "M883.2 723.2a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z m0-256a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z m0-256a44.8 44.8 0 0 1 0 89.6H140.8a44.8 44.8 0 0 1 0-89.6h742.4z",
|
|
25
|
-
fill: "
|
|
25
|
+
fill: "currentColor",
|
|
26
26
|
"p-id": "3008"
|
|
27
27
|
}, null, -1);
|
|
28
28
|
const _hoisted_3 = [
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const vue = require("vue");
|
|
3
3
|
const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
|
|
4
|
-
const urlUtils = require("yuang-framework-ui-common/lib/utils/urlUtils");
|
|
5
4
|
const iconsVue = require("@element-plus/icons-vue");
|
|
6
5
|
const icons = require("../icons");
|
|
7
|
-
const _hoisted_1 = { class: "slider-captcha-container" };
|
|
8
|
-
const _hoisted_2 = { class: "slider-captcha-title" };
|
|
6
|
+
const _hoisted_1 = { class: "yu-slider-captcha-container" };
|
|
7
|
+
const _hoisted_2 = { class: "yu-slider-captcha-title" };
|
|
9
8
|
const _hoisted_3 = ["width", "height"];
|
|
10
|
-
const _hoisted_4 =
|
|
11
|
-
const _hoisted_5 = ["width", "height"];
|
|
12
|
-
const _hoisted_6 = { class: "slider-hint" };
|
|
9
|
+
const _hoisted_4 = { class: "slider-hint" };
|
|
13
10
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
14
11
|
...{ name: "SliderCaptcha" },
|
|
15
12
|
__name: "SliderCaptcha",
|
|
@@ -28,16 +25,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
28
25
|
const emit = __emit;
|
|
29
26
|
const canvas = vue.ref(null);
|
|
30
27
|
const block = vue.ref(null);
|
|
31
|
-
const isFrontCheck = vue.ref(false);
|
|
32
28
|
const verifyActive = vue.ref(false);
|
|
33
29
|
const verifySuccess = vue.ref(false);
|
|
34
30
|
const verifyFail = vue.ref(false);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
const image = vue.ref(void 0);
|
|
31
|
+
vue.ref(null);
|
|
32
|
+
vue.ref(null);
|
|
33
|
+
vue.ref(props.blockLength * 2);
|
|
34
|
+
vue.ref(void 0);
|
|
35
|
+
vue.ref(void 0);
|
|
41
36
|
const originX = vue.ref(void 0);
|
|
42
37
|
const originY = vue.ref(void 0);
|
|
43
38
|
const dragDistanceList = vue.ref([]);
|
|
@@ -57,13 +52,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
57
52
|
bindEvents();
|
|
58
53
|
};
|
|
59
54
|
const initDom = () => {
|
|
60
|
-
|
|
61
|
-
canvasCtx.value = canvas.value.getContext("2d");
|
|
62
|
-
blockCtx.value = block.value.getContext("2d");
|
|
63
|
-
initImage();
|
|
64
|
-
} else {
|
|
65
|
-
getCaptcha();
|
|
66
|
-
}
|
|
55
|
+
getCaptcha();
|
|
67
56
|
};
|
|
68
57
|
const getCaptcha = () => {
|
|
69
58
|
httpConfig.http.get("/sso-api/standard/framework-captcha/getSliderCaptcha", { params: {} }).then((res) => {
|
|
@@ -76,63 +65,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
76
65
|
}, 200);
|
|
77
66
|
});
|
|
78
67
|
};
|
|
79
|
-
const initImage = () => {
|
|
80
|
-
const imageObject = createImage(() => {
|
|
81
|
-
drawBlock();
|
|
82
|
-
let { canvasWidth, canvasHeight, blockX: blockX2, blockY: blockY2, blockRadius, blockWidth: blockWidth2 } = this;
|
|
83
|
-
canvasCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
84
|
-
blockCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
85
|
-
let yAxle = blockY2 - blockRadius * 2;
|
|
86
|
-
let ImageData = blockCtx.value.getImageData(blockX2, yAxle, blockWidth2, blockWidth2);
|
|
87
|
-
block.value.width = blockWidth2;
|
|
88
|
-
blockCtx.value.putImageData(ImageData, 0, yAxle);
|
|
89
|
-
isLoading.value = false;
|
|
90
|
-
key.value = "loyer";
|
|
91
|
-
});
|
|
92
|
-
image.value = imageObject;
|
|
93
|
-
};
|
|
94
|
-
const createImage = (onload) => {
|
|
95
|
-
const image2 = document.createElement("img");
|
|
96
|
-
image2.crossOrigin = "Anonymous";
|
|
97
|
-
image2.onload = onload;
|
|
98
|
-
image2.onerror = () => {
|
|
99
|
-
image2.src = `${urlUtils.getBaseUrl()}/img/slider-captcha/pic-0.jpeg`;
|
|
100
|
-
};
|
|
101
|
-
image2.src = getImageSrc();
|
|
102
|
-
return image2;
|
|
103
|
-
};
|
|
104
|
-
const getImageSrc = () => {
|
|
105
|
-
const len = props.imageList.length;
|
|
106
|
-
return len > 0 ? props.imageList[getNonceByRange(0, len)] : `https://loyer.wang/view/ftp/wallpaper/${getNonceByRange(1, 1e3)}.jpg`;
|
|
107
|
-
};
|
|
108
|
-
const getNonceByRange = (start, end) => {
|
|
109
|
-
return Math.round(Math.random() * (end - start) + start);
|
|
110
|
-
};
|
|
111
|
-
const drawBlock = () => {
|
|
112
|
-
blockX.value = getNonceByRange(blockWidth.value + 10, props.canvasWidth - (blockWidth.value + 10));
|
|
113
|
-
blockY.value = getNonceByRange(10 + props.blockRadius * 2, props.canvasHeight - (blockWidth.value + 10));
|
|
114
|
-
draw(canvasCtx.value, "fill");
|
|
115
|
-
draw(blockCtx.value, "clip");
|
|
116
|
-
};
|
|
117
|
-
const draw = (ctx, operation) => {
|
|
118
|
-
const PI = Math.PI;
|
|
119
|
-
let { blockX: x, blockY: y, blockLength: l, blockRadius: r } = this;
|
|
120
|
-
ctx.beginPath();
|
|
121
|
-
ctx.moveTo(x, y);
|
|
122
|
-
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
|
123
|
-
ctx.lineTo(x + l, y);
|
|
124
|
-
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
|
125
|
-
ctx.lineTo(x + l, y + l);
|
|
126
|
-
ctx.lineTo(x, y + l);
|
|
127
|
-
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
|
128
|
-
ctx.lineTo(x, y);
|
|
129
|
-
ctx.lineWidth = 2;
|
|
130
|
-
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
|
|
131
|
-
ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
|
|
132
|
-
ctx.stroke();
|
|
133
|
-
ctx[operation]();
|
|
134
|
-
ctx.globalCompositeOperation = "destination-over";
|
|
135
|
-
};
|
|
136
68
|
const bindEvents = () => {
|
|
137
69
|
var _a, _b, _c;
|
|
138
70
|
(_a = document.getElementById("slider-button")) == null ? void 0 : _a.addEventListener("mousedown", (event) => {
|
|
@@ -166,9 +98,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
166
98
|
}
|
|
167
99
|
};
|
|
168
100
|
const checkImgSrc = () => {
|
|
169
|
-
if (isFrontCheck.value) {
|
|
170
|
-
return true;
|
|
171
|
-
}
|
|
172
101
|
return !!canvas.value.src;
|
|
173
102
|
};
|
|
174
103
|
const startEvent = (clientX, clientY) => {
|
|
@@ -215,16 +144,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
215
144
|
if (!turingTest()) {
|
|
216
145
|
verifyFailEvent();
|
|
217
146
|
} else {
|
|
218
|
-
if (isFrontCheck.value) {
|
|
219
|
-
const accuracyValue = props.accuracy <= 1 ? 1 : props.accuracy > 10 ? 10 : props.accuracy;
|
|
220
|
-
const spliced = Math.abs(moveLength - blockX.value) <= accuracyValue;
|
|
221
|
-
if (!spliced) {
|
|
222
|
-
verifyFailEvent();
|
|
223
|
-
} else {
|
|
224
|
-
emit("success", { key: key.value, value: moveLength });
|
|
225
|
-
}
|
|
226
|
-
return;
|
|
227
|
-
}
|
|
228
147
|
let params = {
|
|
229
148
|
key: key.value,
|
|
230
149
|
captcha: moveLength
|
|
@@ -261,15 +180,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
261
180
|
sliderBoxWidth.value = 0;
|
|
262
181
|
sliderButtonLeft.value = 0;
|
|
263
182
|
vue.nextTick(() => {
|
|
264
|
-
|
|
265
|
-
let { canvasWidth, canvasHeight } = this;
|
|
266
|
-
canvasCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
267
|
-
blockCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
268
|
-
block.value.width = canvasWidth;
|
|
269
|
-
image.value.src = getImageSrc();
|
|
270
|
-
} else {
|
|
271
|
-
getCaptcha();
|
|
272
|
-
}
|
|
183
|
+
getCaptcha();
|
|
273
184
|
});
|
|
274
185
|
};
|
|
275
186
|
const close = () => {
|
|
@@ -287,19 +198,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
287
198
|
vue.createTextVNode(" 完成拼图验证 "),
|
|
288
199
|
vue.createElementVNode("div", {
|
|
289
200
|
onClick: refresh,
|
|
290
|
-
class: "slider-captcha-refresh-icon"
|
|
201
|
+
class: "yu-slider-captcha-refresh-icon"
|
|
291
202
|
}, [
|
|
292
203
|
vue.createVNode(vue.unref(iconsVue.RefreshRight))
|
|
293
204
|
]),
|
|
294
205
|
vue.createElementVNode("div", {
|
|
295
206
|
onClick: close,
|
|
296
|
-
class: "slider-captcha-close-icon"
|
|
207
|
+
class: "yu-slider-captcha-close-icon"
|
|
297
208
|
}, [
|
|
298
209
|
vue.createVNode(vue.unref(iconsVue.CircleClose))
|
|
299
210
|
])
|
|
300
211
|
]),
|
|
301
212
|
vue.createElementVNode("div", {
|
|
302
|
-
class: "slider-captcha",
|
|
213
|
+
class: "yu-slider-captcha",
|
|
303
214
|
style: vue.normalizeStyle({ width: _ctx.canvasWidth + "px" }),
|
|
304
215
|
onselectstart: "return false;"
|
|
305
216
|
}, [
|
|
@@ -313,35 +224,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
313
224
|
class: "success-hint",
|
|
314
225
|
style: vue.normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
315
226
|
}, vue.toDisplayString(successHint.value), 5)) : vue.createCommentVNode("", true),
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
width: _ctx.canvasWidth,
|
|
329
|
-
height: _ctx.canvasHeight
|
|
330
|
-
}, null, 8, _hoisted_4)
|
|
331
|
-
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
|
|
332
|
-
vue.createElementVNode("img", {
|
|
333
|
-
ref_key: "canvas",
|
|
334
|
-
ref: canvas,
|
|
335
|
-
class: "slide-canvas",
|
|
336
|
-
width: _ctx.canvasWidth,
|
|
337
|
-
height: _ctx.canvasHeight
|
|
338
|
-
}, null, 8, _hoisted_5),
|
|
339
|
-
vue.createElementVNode("img", {
|
|
340
|
-
ref_key: "block",
|
|
341
|
-
ref: block,
|
|
342
|
-
class: vue.normalizeClass(["slide-block", { "verify-fail": verifyFail.value }])
|
|
343
|
-
}, null, 2)
|
|
344
|
-
], 64)),
|
|
227
|
+
vue.createElementVNode("img", {
|
|
228
|
+
ref_key: "canvas",
|
|
229
|
+
ref: canvas,
|
|
230
|
+
class: "slide-canvas",
|
|
231
|
+
width: _ctx.canvasWidth,
|
|
232
|
+
height: _ctx.canvasHeight
|
|
233
|
+
}, null, 8, _hoisted_3),
|
|
234
|
+
vue.createElementVNode("img", {
|
|
235
|
+
ref_key: "block",
|
|
236
|
+
ref: block,
|
|
237
|
+
class: vue.normalizeClass(["yu-slide-block", { "verify-fail": verifyFail.value }])
|
|
238
|
+
}, null, 2),
|
|
345
239
|
vue.createElementVNode("div", {
|
|
346
240
|
class: vue.normalizeClass(["slider", { "verify-active": verifyActive.value, "verify-success": verifySuccess.value, "verify-fail": verifyFail.value }])
|
|
347
241
|
}, [
|
|
@@ -350,20 +244,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
350
244
|
style: vue.normalizeStyle({ width: sliderBoxWidth.value + "px" })
|
|
351
245
|
}, [
|
|
352
246
|
vue.createElementVNode("div", {
|
|
353
|
-
class: "slider-button",
|
|
247
|
+
class: "yu-slider-button",
|
|
354
248
|
id: "slider-button",
|
|
355
249
|
style: vue.normalizeStyle({ left: sliderButtonLeft.value + "px" })
|
|
356
250
|
}, [
|
|
357
251
|
!isSliderSlide.value ? (vue.openBlock(), vue.createBlock(vue.unref(icons.SliderArrowStatic), {
|
|
358
252
|
key: 0,
|
|
359
|
-
class: "slider-button-icon yu-color-primary"
|
|
253
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
360
254
|
})) : (vue.openBlock(), vue.createBlock(vue.unref(icons.SliderArrowSlide), {
|
|
361
255
|
key: 1,
|
|
362
|
-
class: "slider-button-icon yu-color-primary"
|
|
256
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
363
257
|
}))
|
|
364
258
|
], 4)
|
|
365
259
|
], 4),
|
|
366
|
-
vue.createElementVNode("span",
|
|
260
|
+
vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(_ctx.sliderHint), 1)
|
|
367
261
|
], 2)
|
|
368
262
|
], 4)
|
|
369
263
|
]);
|
|
@@ -3,12 +3,12 @@ const vue = require("vue");
|
|
|
3
3
|
const SliderCaptcha = require("./SliderCaptcha");
|
|
4
4
|
const _hoisted_1 = {
|
|
5
5
|
key: 0,
|
|
6
|
-
class: "slider-captcha-dialog-container"
|
|
6
|
+
class: "yu-slider-captcha-dialog-container"
|
|
7
7
|
};
|
|
8
|
-
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "slider-captcha-dialog-modal" }, null, -1);
|
|
9
|
-
const _hoisted_3 = { class: "slider-captcha-dialog-wrapper" };
|
|
10
|
-
const _hoisted_4 = { class: "slider-captcha-dialog slide-up" };
|
|
11
|
-
const _hoisted_5 = { class: "slider-captcha" };
|
|
8
|
+
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "yu-slider-captcha-dialog-modal" }, null, -1);
|
|
9
|
+
const _hoisted_3 = { class: "yu-slider-captcha-dialog-wrapper" };
|
|
10
|
+
const _hoisted_4 = { class: "yu-slider-captcha-dialog slide-up" };
|
|
11
|
+
const _hoisted_5 = { class: "yu-slider-captcha" };
|
|
12
12
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
13
13
|
...{ name: "YuSliderCaptchaDialog" },
|
|
14
14
|
__name: "index",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.slider-captcha-dialog-container {
|
|
2
|
-
.slider-captcha-dialog-modal {
|
|
1
|
+
.yu-slider-captcha-dialog-container {
|
|
2
|
+
.yu-slider-captcha-dialog-modal {
|
|
3
3
|
position: fixed;
|
|
4
4
|
left: 0;
|
|
5
5
|
top: 0;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
z-index: 1000;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.slider-captcha-dialog-wrapper {
|
|
14
|
+
.yu-slider-captcha-dialog-wrapper {
|
|
15
15
|
position: fixed;
|
|
16
16
|
top: 0;
|
|
17
17
|
right: 0;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
z-index: 1001;
|
|
24
24
|
|
|
25
|
-
.slider-captcha-dialog {
|
|
25
|
+
.yu-slider-captcha-dialog {
|
|
26
26
|
// 在移动端禁止上下滑动，添加position: fixed;
|
|
27
27
|
position: fixed;
|
|
28
28
|
background: #fff;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
border-radius: 4px;
|
|
45
45
|
|
|
46
|
-
.slider-captcha {
|
|
46
|
+
.yu-slider-captcha {
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -65,18 +65,18 @@
|
|
|
65
65
|
|
|
66
66
|
|
|
67
67
|
|
|
68
|
-
.slider-captcha-container {
|
|
69
|
-
.slider-captcha {
|
|
68
|
+
.yu-slider-captcha-container {
|
|
69
|
+
.yu-slider-captcha {
|
|
70
70
|
position: relative;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.slider-captcha-title {
|
|
73
|
+
.yu-slider-captcha-title {
|
|
74
74
|
position: relative;
|
|
75
75
|
height: 30px;
|
|
76
76
|
font-size: 16px;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
.slider-captcha-refresh-icon {
|
|
79
|
+
.yu-slider-captcha-refresh-icon {
|
|
80
80
|
position: absolute;
|
|
81
81
|
right: 30px;
|
|
82
82
|
top: 0;
|
|
@@ -89,11 +89,11 @@
|
|
|
89
89
|
opacity: 0.7;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
.slider-captcha-refresh-icon:hover {
|
|
92
|
+
.yu-slider-captcha-refresh-icon:hover {
|
|
93
93
|
opacity: 1;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
.slider-captcha-close-icon {
|
|
96
|
+
.yu-slider-captcha-close-icon {
|
|
97
97
|
position: absolute;
|
|
98
98
|
right: 0;
|
|
99
99
|
top: 0;
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
opacity: 0.7;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
.slider-captcha-close-icon:hover {
|
|
109
|
+
.yu-slider-captcha-close-icon:hover {
|
|
110
110
|
opacity: 1;
|
|
111
111
|
}
|
|
112
112
|
}
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
/*阻塞块*/
|
|
173
|
-
.slide-block {
|
|
173
|
+
.yu-slide-block {
|
|
174
174
|
position: absolute;
|
|
175
175
|
left: 0;
|
|
176
176
|
top: 0;
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
/*校验失败时的阻塞块样式*/
|
|
182
|
-
.slide-block.verify-fail {
|
|
182
|
+
.yu-slide-block.verify-fail {
|
|
183
183
|
transition: left 0.5s linear;
|
|
184
184
|
}
|
|
185
185
|
|
|
@@ -214,7 +214,7 @@
|
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
/*滑动按钮*/
|
|
217
|
-
.slider-button {
|
|
217
|
+
.yu-slider-button {
|
|
218
218
|
background-color: rgb(255, 255, 255);
|
|
219
219
|
color: white;
|
|
220
220
|
text-align: center;
|
|
@@ -235,17 +235,17 @@
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
/*鼠标悬浮时的按钮样式*/
|
|
238
|
-
.slider-button:hover {
|
|
238
|
+
.yu-slider-button:hover {
|
|
239
239
|
//background: #1991FA
|
|
240
240
|
cursor: pointer;
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
/*鼠标悬浮时的按钮图标样式*/
|
|
244
|
-
.slider-button:hover .slider-button-icon {
|
|
244
|
+
.yu-slider-button:hover .yu-slider-button-icon {
|
|
245
245
|
}
|
|
246
246
|
|
|
247
247
|
/*滑动按钮图标*/
|
|
248
|
-
.slider-button-icon {
|
|
248
|
+
.yu-slider-button-icon {
|
|
249
249
|
width: 32px;
|
|
250
250
|
height: 32px;
|
|
251
251
|
font-size: 24px;
|
|
@@ -276,7 +276,7 @@
|
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
/*校验成功时的按钮图标样式*/
|
|
279
|
-
.verify-success .slider-button-icon {
|
|
279
|
+
.verify-success .yu-slider-button-icon {
|
|
280
280
|
background-position: 0 0 !important;
|
|
281
281
|
}
|
|
282
282
|
|
|
@@ -291,5 +291,5 @@
|
|
|
291
291
|
}
|
|
292
292
|
|
|
293
293
|
/*校验失败时的按钮图标样式*/
|
|
294
|
-
.verify-fail .slider-button-icon {
|
|
294
|
+
.verify-fail .yu-slider-button-icon {
|
|
295
295
|
}
|