yuang-framework-ui-pc 1.1.28 → 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/style/index.scss +0 -3
- package/es/yu-slider-captcha-dialog/SliderCaptcha.js +35 -147
- package/es/yu-slider-captcha-dialog/index.js +5 -5
- package/es/yu-slider-captcha-dialog/style/index.scss +27 -22
- package/lib/icons/SliderArrowSlide.cjs +1 -1
- package/lib/icons/SliderArrowStatic.cjs +1 -1
- package/lib/style/index.scss +0 -3
- package/lib/yu-slider-captcha-dialog/SliderCaptcha.cjs +34 -146
- package/lib/yu-slider-captcha-dialog/index.cjs +5 -5
- package/lib/yu-slider-captcha-dialog/style/index.scss +27 -22
- 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 = [
|
package/es/style/index.scss
CHANGED
|
@@ -1,22 +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 = {
|
|
12
|
-
key: 0,
|
|
13
|
-
class: "slider-button-icon yu-color-primary"
|
|
14
|
-
};
|
|
15
|
-
const _hoisted_7 = {
|
|
16
|
-
key: 1,
|
|
17
|
-
class: "slider-button-icon yu-color-primary"
|
|
18
|
-
};
|
|
19
|
-
const _hoisted_8 = { class: "slider-hint" };
|
|
8
|
+
const _hoisted_4 = { class: "slider-hint" };
|
|
20
9
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
21
10
|
...{ name: "SliderCaptcha" },
|
|
22
11
|
__name: "SliderCaptcha",
|
|
@@ -35,16 +24,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
35
24
|
const emit = __emit;
|
|
36
25
|
const canvas = ref(null);
|
|
37
26
|
const block = ref(null);
|
|
38
|
-
const isFrontCheck = ref(false);
|
|
39
27
|
const verifyActive = ref(false);
|
|
40
28
|
const verifySuccess = ref(false);
|
|
41
29
|
const verifyFail = ref(false);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const image = ref(void 0);
|
|
30
|
+
ref(null);
|
|
31
|
+
ref(null);
|
|
32
|
+
ref(props.blockLength * 2);
|
|
33
|
+
ref(void 0);
|
|
34
|
+
ref(void 0);
|
|
48
35
|
const originX = ref(void 0);
|
|
49
36
|
const originY = ref(void 0);
|
|
50
37
|
const dragDistanceList = ref([]);
|
|
@@ -64,13 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
64
51
|
bindEvents();
|
|
65
52
|
};
|
|
66
53
|
const initDom = () => {
|
|
67
|
-
|
|
68
|
-
canvasCtx.value = canvas.value.getContext("2d");
|
|
69
|
-
blockCtx.value = block.value.getContext("2d");
|
|
70
|
-
initImage();
|
|
71
|
-
} else {
|
|
72
|
-
getCaptcha();
|
|
73
|
-
}
|
|
54
|
+
getCaptcha();
|
|
74
55
|
};
|
|
75
56
|
const getCaptcha = () => {
|
|
76
57
|
http.get("/sso-api/standard/framework-captcha/getSliderCaptcha", { params: {} }).then((res) => {
|
|
@@ -83,63 +64,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
83
64
|
}, 200);
|
|
84
65
|
});
|
|
85
66
|
};
|
|
86
|
-
const initImage = () => {
|
|
87
|
-
const imageObject = createImage(() => {
|
|
88
|
-
drawBlock();
|
|
89
|
-
let { canvasWidth, canvasHeight, blockX: blockX2, blockY: blockY2, blockRadius, blockWidth: blockWidth2 } = this;
|
|
90
|
-
canvasCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
91
|
-
blockCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
92
|
-
let yAxle = blockY2 - blockRadius * 2;
|
|
93
|
-
let ImageData = blockCtx.value.getImageData(blockX2, yAxle, blockWidth2, blockWidth2);
|
|
94
|
-
block.value.width = blockWidth2;
|
|
95
|
-
blockCtx.value.putImageData(ImageData, 0, yAxle);
|
|
96
|
-
isLoading.value = false;
|
|
97
|
-
key.value = "loyer";
|
|
98
|
-
});
|
|
99
|
-
image.value = imageObject;
|
|
100
|
-
};
|
|
101
|
-
const createImage = (onload) => {
|
|
102
|
-
const image2 = document.createElement("img");
|
|
103
|
-
image2.crossOrigin = "Anonymous";
|
|
104
|
-
image2.onload = onload;
|
|
105
|
-
image2.onerror = () => {
|
|
106
|
-
image2.src = `${getBaseUrl()}/img/slider-captcha/pic-0.jpeg`;
|
|
107
|
-
};
|
|
108
|
-
image2.src = getImageSrc();
|
|
109
|
-
return image2;
|
|
110
|
-
};
|
|
111
|
-
const getImageSrc = () => {
|
|
112
|
-
const len = props.imageList.length;
|
|
113
|
-
return len > 0 ? props.imageList[getNonceByRange(0, len)] : `https://loyer.wang/view/ftp/wallpaper/${getNonceByRange(1, 1e3)}.jpg`;
|
|
114
|
-
};
|
|
115
|
-
const getNonceByRange = (start, end) => {
|
|
116
|
-
return Math.round(Math.random() * (end - start) + start);
|
|
117
|
-
};
|
|
118
|
-
const drawBlock = () => {
|
|
119
|
-
blockX.value = getNonceByRange(blockWidth.value + 10, props.canvasWidth - (blockWidth.value + 10));
|
|
120
|
-
blockY.value = getNonceByRange(10 + props.blockRadius * 2, props.canvasHeight - (blockWidth.value + 10));
|
|
121
|
-
draw(canvasCtx.value, "fill");
|
|
122
|
-
draw(blockCtx.value, "clip");
|
|
123
|
-
};
|
|
124
|
-
const draw = (ctx, operation) => {
|
|
125
|
-
const PI = Math.PI;
|
|
126
|
-
let { blockX: x, blockY: y, blockLength: l, blockRadius: r } = this;
|
|
127
|
-
ctx.beginPath();
|
|
128
|
-
ctx.moveTo(x, y);
|
|
129
|
-
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
|
130
|
-
ctx.lineTo(x + l, y);
|
|
131
|
-
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
|
132
|
-
ctx.lineTo(x + l, y + l);
|
|
133
|
-
ctx.lineTo(x, y + l);
|
|
134
|
-
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
|
135
|
-
ctx.lineTo(x, y);
|
|
136
|
-
ctx.lineWidth = 2;
|
|
137
|
-
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
|
|
138
|
-
ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
|
|
139
|
-
ctx.stroke();
|
|
140
|
-
ctx[operation]();
|
|
141
|
-
ctx.globalCompositeOperation = "destination-over";
|
|
142
|
-
};
|
|
143
67
|
const bindEvents = () => {
|
|
144
68
|
var _a, _b, _c;
|
|
145
69
|
(_a = document.getElementById("slider-button")) == null ? void 0 : _a.addEventListener("mousedown", (event) => {
|
|
@@ -173,9 +97,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
173
97
|
}
|
|
174
98
|
};
|
|
175
99
|
const checkImgSrc = () => {
|
|
176
|
-
if (isFrontCheck.value) {
|
|
177
|
-
return true;
|
|
178
|
-
}
|
|
179
100
|
return !!canvas.value.src;
|
|
180
101
|
};
|
|
181
102
|
const startEvent = (clientX, clientY) => {
|
|
@@ -222,16 +143,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
222
143
|
if (!turingTest()) {
|
|
223
144
|
verifyFailEvent();
|
|
224
145
|
} else {
|
|
225
|
-
if (isFrontCheck.value) {
|
|
226
|
-
const accuracyValue = props.accuracy <= 1 ? 1 : props.accuracy > 10 ? 10 : props.accuracy;
|
|
227
|
-
const spliced = Math.abs(moveLength - blockX.value) <= accuracyValue;
|
|
228
|
-
if (!spliced) {
|
|
229
|
-
verifyFailEvent();
|
|
230
|
-
} else {
|
|
231
|
-
emit("success", { key: key.value, value: moveLength });
|
|
232
|
-
}
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
146
|
let params = {
|
|
236
147
|
key: key.value,
|
|
237
148
|
captcha: moveLength
|
|
@@ -268,15 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
268
179
|
sliderBoxWidth.value = 0;
|
|
269
180
|
sliderButtonLeft.value = 0;
|
|
270
181
|
nextTick(() => {
|
|
271
|
-
|
|
272
|
-
let { canvasWidth, canvasHeight } = this;
|
|
273
|
-
canvasCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
274
|
-
blockCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
275
|
-
block.value.width = canvasWidth;
|
|
276
|
-
image.value.src = getImageSrc();
|
|
277
|
-
} else {
|
|
278
|
-
getCaptcha();
|
|
279
|
-
}
|
|
182
|
+
getCaptcha();
|
|
280
183
|
});
|
|
281
184
|
};
|
|
282
185
|
const close = () => {
|
|
@@ -294,19 +197,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
294
197
|
createTextVNode(" 完成拼图验证 "),
|
|
295
198
|
createElementVNode("div", {
|
|
296
199
|
onClick: refresh,
|
|
297
|
-
class: "slider-captcha-refresh-icon"
|
|
200
|
+
class: "yu-slider-captcha-refresh-icon"
|
|
298
201
|
}, [
|
|
299
202
|
createVNode(unref(RefreshRight))
|
|
300
203
|
]),
|
|
301
204
|
createElementVNode("div", {
|
|
302
205
|
onClick: close,
|
|
303
|
-
class: "slider-captcha-close-icon"
|
|
206
|
+
class: "yu-slider-captcha-close-icon"
|
|
304
207
|
}, [
|
|
305
208
|
createVNode(unref(CircleClose))
|
|
306
209
|
])
|
|
307
210
|
]),
|
|
308
211
|
createElementVNode("div", {
|
|
309
|
-
class: "slider-captcha",
|
|
212
|
+
class: "yu-slider-captcha",
|
|
310
213
|
style: normalizeStyle({ width: _ctx.canvasWidth + "px" }),
|
|
311
214
|
onselectstart: "return false;"
|
|
312
215
|
}, [
|
|
@@ -320,35 +223,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
320
223
|
class: "success-hint",
|
|
321
224
|
style: normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
322
225
|
}, toDisplayString(successHint.value), 5)) : createCommentVNode("", true),
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
width: _ctx.canvasWidth,
|
|
336
|
-
height: _ctx.canvasHeight
|
|
337
|
-
}, null, 8, _hoisted_4)
|
|
338
|
-
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
|
|
339
|
-
createElementVNode("img", {
|
|
340
|
-
ref_key: "canvas",
|
|
341
|
-
ref: canvas,
|
|
342
|
-
class: "slide-canvas",
|
|
343
|
-
width: _ctx.canvasWidth,
|
|
344
|
-
height: _ctx.canvasHeight
|
|
345
|
-
}, null, 8, _hoisted_5),
|
|
346
|
-
createElementVNode("img", {
|
|
347
|
-
ref_key: "block",
|
|
348
|
-
ref: block,
|
|
349
|
-
class: normalizeClass(["slide-block", { "verify-fail": verifyFail.value }])
|
|
350
|
-
}, null, 2)
|
|
351
|
-
], 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),
|
|
352
238
|
createElementVNode("div", {
|
|
353
239
|
class: normalizeClass(["slider", { "verify-active": verifyActive.value, "verify-success": verifySuccess.value, "verify-fail": verifyFail.value }])
|
|
354
240
|
}, [
|
|
@@ -357,18 +243,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
357
243
|
style: normalizeStyle({ width: sliderBoxWidth.value + "px" })
|
|
358
244
|
}, [
|
|
359
245
|
createElementVNode("div", {
|
|
360
|
-
class: "slider-button",
|
|
246
|
+
class: "yu-slider-button",
|
|
361
247
|
id: "slider-button",
|
|
362
248
|
style: normalizeStyle({ left: sliderButtonLeft.value + "px" })
|
|
363
249
|
}, [
|
|
364
|
-
!isSliderSlide.value ? (openBlock(),
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
250
|
+
!isSliderSlide.value ? (openBlock(), createBlock(unref(SliderArrowStatic), {
|
|
251
|
+
key: 0,
|
|
252
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
253
|
+
})) : (openBlock(), createBlock(unref(SliderArrowSlide), {
|
|
254
|
+
key: 1,
|
|
255
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
256
|
+
}))
|
|
369
257
|
], 4)
|
|
370
258
|
], 4),
|
|
371
|
-
createElementVNode("span",
|
|
259
|
+
createElementVNode("span", _hoisted_4, toDisplayString(_ctx.sliderHint), 1)
|
|
372
260
|
], 2)
|
|
373
261
|
], 4)
|
|
374
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;
|
|
@@ -225,24 +225,29 @@
|
|
|
225
225
|
//top: -12px;
|
|
226
226
|
top: -10px;
|
|
227
227
|
left: 0;
|
|
228
|
+
|
|
229
|
+
display: flex;
|
|
230
|
+
justify-content: center;
|
|
231
|
+
align-items: center;
|
|
232
|
+
|
|
228
233
|
width: 56px;
|
|
229
234
|
height: 60px;
|
|
230
235
|
}
|
|
231
236
|
|
|
232
237
|
/*鼠标悬浮时的按钮样式*/
|
|
233
|
-
.slider-button:hover {
|
|
238
|
+
.yu-slider-button:hover {
|
|
234
239
|
//background: #1991FA
|
|
235
240
|
cursor: pointer;
|
|
236
241
|
}
|
|
237
242
|
|
|
238
243
|
/*鼠标悬浮时的按钮图标样式*/
|
|
239
|
-
.slider-button:hover .slider-button-icon {
|
|
244
|
+
.yu-slider-button:hover .yu-slider-button-icon {
|
|
240
245
|
}
|
|
241
246
|
|
|
242
247
|
/*滑动按钮图标*/
|
|
243
|
-
.slider-button-icon {
|
|
244
|
-
width:
|
|
245
|
-
height:
|
|
248
|
+
.yu-slider-button-icon {
|
|
249
|
+
width: 32px;
|
|
250
|
+
height: 32px;
|
|
246
251
|
font-size: 24px;
|
|
247
252
|
text-align: center;
|
|
248
253
|
line-height: 60px;
|
|
@@ -271,7 +276,7 @@
|
|
|
271
276
|
}
|
|
272
277
|
|
|
273
278
|
/*校验成功时的按钮图标样式*/
|
|
274
|
-
.verify-success .slider-button-icon {
|
|
279
|
+
.verify-success .yu-slider-button-icon {
|
|
275
280
|
background-position: 0 0 !important;
|
|
276
281
|
}
|
|
277
282
|
|
|
@@ -286,5 +291,5 @@
|
|
|
286
291
|
}
|
|
287
292
|
|
|
288
293
|
/*校验失败时的按钮图标样式*/
|
|
289
|
-
.verify-fail .slider-button-icon {
|
|
294
|
+
.verify-fail .yu-slider-button-icon {
|
|
290
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 = [
|
package/lib/style/index.scss
CHANGED
|
@@ -1,23 +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 = {
|
|
13
|
-
key: 0,
|
|
14
|
-
class: "slider-button-icon yu-color-primary"
|
|
15
|
-
};
|
|
16
|
-
const _hoisted_7 = {
|
|
17
|
-
key: 1,
|
|
18
|
-
class: "slider-button-icon yu-color-primary"
|
|
19
|
-
};
|
|
20
|
-
const _hoisted_8 = { class: "slider-hint" };
|
|
9
|
+
const _hoisted_4 = { class: "slider-hint" };
|
|
21
10
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
22
11
|
...{ name: "SliderCaptcha" },
|
|
23
12
|
__name: "SliderCaptcha",
|
|
@@ -36,16 +25,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
36
25
|
const emit = __emit;
|
|
37
26
|
const canvas = vue.ref(null);
|
|
38
27
|
const block = vue.ref(null);
|
|
39
|
-
const isFrontCheck = vue.ref(false);
|
|
40
28
|
const verifyActive = vue.ref(false);
|
|
41
29
|
const verifySuccess = vue.ref(false);
|
|
42
30
|
const verifyFail = vue.ref(false);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
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);
|
|
49
36
|
const originX = vue.ref(void 0);
|
|
50
37
|
const originY = vue.ref(void 0);
|
|
51
38
|
const dragDistanceList = vue.ref([]);
|
|
@@ -65,13 +52,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
65
52
|
bindEvents();
|
|
66
53
|
};
|
|
67
54
|
const initDom = () => {
|
|
68
|
-
|
|
69
|
-
canvasCtx.value = canvas.value.getContext("2d");
|
|
70
|
-
blockCtx.value = block.value.getContext("2d");
|
|
71
|
-
initImage();
|
|
72
|
-
} else {
|
|
73
|
-
getCaptcha();
|
|
74
|
-
}
|
|
55
|
+
getCaptcha();
|
|
75
56
|
};
|
|
76
57
|
const getCaptcha = () => {
|
|
77
58
|
httpConfig.http.get("/sso-api/standard/framework-captcha/getSliderCaptcha", { params: {} }).then((res) => {
|
|
@@ -84,63 +65,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
84
65
|
}, 200);
|
|
85
66
|
});
|
|
86
67
|
};
|
|
87
|
-
const initImage = () => {
|
|
88
|
-
const imageObject = createImage(() => {
|
|
89
|
-
drawBlock();
|
|
90
|
-
let { canvasWidth, canvasHeight, blockX: blockX2, blockY: blockY2, blockRadius, blockWidth: blockWidth2 } = this;
|
|
91
|
-
canvasCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
92
|
-
blockCtx.value.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
93
|
-
let yAxle = blockY2 - blockRadius * 2;
|
|
94
|
-
let ImageData = blockCtx.value.getImageData(blockX2, yAxle, blockWidth2, blockWidth2);
|
|
95
|
-
block.value.width = blockWidth2;
|
|
96
|
-
blockCtx.value.putImageData(ImageData, 0, yAxle);
|
|
97
|
-
isLoading.value = false;
|
|
98
|
-
key.value = "loyer";
|
|
99
|
-
});
|
|
100
|
-
image.value = imageObject;
|
|
101
|
-
};
|
|
102
|
-
const createImage = (onload) => {
|
|
103
|
-
const image2 = document.createElement("img");
|
|
104
|
-
image2.crossOrigin = "Anonymous";
|
|
105
|
-
image2.onload = onload;
|
|
106
|
-
image2.onerror = () => {
|
|
107
|
-
image2.src = `${urlUtils.getBaseUrl()}/img/slider-captcha/pic-0.jpeg`;
|
|
108
|
-
};
|
|
109
|
-
image2.src = getImageSrc();
|
|
110
|
-
return image2;
|
|
111
|
-
};
|
|
112
|
-
const getImageSrc = () => {
|
|
113
|
-
const len = props.imageList.length;
|
|
114
|
-
return len > 0 ? props.imageList[getNonceByRange(0, len)] : `https://loyer.wang/view/ftp/wallpaper/${getNonceByRange(1, 1e3)}.jpg`;
|
|
115
|
-
};
|
|
116
|
-
const getNonceByRange = (start, end) => {
|
|
117
|
-
return Math.round(Math.random() * (end - start) + start);
|
|
118
|
-
};
|
|
119
|
-
const drawBlock = () => {
|
|
120
|
-
blockX.value = getNonceByRange(blockWidth.value + 10, props.canvasWidth - (blockWidth.value + 10));
|
|
121
|
-
blockY.value = getNonceByRange(10 + props.blockRadius * 2, props.canvasHeight - (blockWidth.value + 10));
|
|
122
|
-
draw(canvasCtx.value, "fill");
|
|
123
|
-
draw(blockCtx.value, "clip");
|
|
124
|
-
};
|
|
125
|
-
const draw = (ctx, operation) => {
|
|
126
|
-
const PI = Math.PI;
|
|
127
|
-
let { blockX: x, blockY: y, blockLength: l, blockRadius: r } = this;
|
|
128
|
-
ctx.beginPath();
|
|
129
|
-
ctx.moveTo(x, y);
|
|
130
|
-
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
|
131
|
-
ctx.lineTo(x + l, y);
|
|
132
|
-
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
|
133
|
-
ctx.lineTo(x + l, y + l);
|
|
134
|
-
ctx.lineTo(x, y + l);
|
|
135
|
-
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
|
136
|
-
ctx.lineTo(x, y);
|
|
137
|
-
ctx.lineWidth = 2;
|
|
138
|
-
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
|
|
139
|
-
ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
|
|
140
|
-
ctx.stroke();
|
|
141
|
-
ctx[operation]();
|
|
142
|
-
ctx.globalCompositeOperation = "destination-over";
|
|
143
|
-
};
|
|
144
68
|
const bindEvents = () => {
|
|
145
69
|
var _a, _b, _c;
|
|
146
70
|
(_a = document.getElementById("slider-button")) == null ? void 0 : _a.addEventListener("mousedown", (event) => {
|
|
@@ -174,9 +98,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
174
98
|
}
|
|
175
99
|
};
|
|
176
100
|
const checkImgSrc = () => {
|
|
177
|
-
if (isFrontCheck.value) {
|
|
178
|
-
return true;
|
|
179
|
-
}
|
|
180
101
|
return !!canvas.value.src;
|
|
181
102
|
};
|
|
182
103
|
const startEvent = (clientX, clientY) => {
|
|
@@ -223,16 +144,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
223
144
|
if (!turingTest()) {
|
|
224
145
|
verifyFailEvent();
|
|
225
146
|
} else {
|
|
226
|
-
if (isFrontCheck.value) {
|
|
227
|
-
const accuracyValue = props.accuracy <= 1 ? 1 : props.accuracy > 10 ? 10 : props.accuracy;
|
|
228
|
-
const spliced = Math.abs(moveLength - blockX.value) <= accuracyValue;
|
|
229
|
-
if (!spliced) {
|
|
230
|
-
verifyFailEvent();
|
|
231
|
-
} else {
|
|
232
|
-
emit("success", { key: key.value, value: moveLength });
|
|
233
|
-
}
|
|
234
|
-
return;
|
|
235
|
-
}
|
|
236
147
|
let params = {
|
|
237
148
|
key: key.value,
|
|
238
149
|
captcha: moveLength
|
|
@@ -269,15 +180,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
269
180
|
sliderBoxWidth.value = 0;
|
|
270
181
|
sliderButtonLeft.value = 0;
|
|
271
182
|
vue.nextTick(() => {
|
|
272
|
-
|
|
273
|
-
let { canvasWidth, canvasHeight } = this;
|
|
274
|
-
canvasCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
275
|
-
blockCtx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
276
|
-
block.value.width = canvasWidth;
|
|
277
|
-
image.value.src = getImageSrc();
|
|
278
|
-
} else {
|
|
279
|
-
getCaptcha();
|
|
280
|
-
}
|
|
183
|
+
getCaptcha();
|
|
281
184
|
});
|
|
282
185
|
};
|
|
283
186
|
const close = () => {
|
|
@@ -295,19 +198,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
295
198
|
vue.createTextVNode(" 完成拼图验证 "),
|
|
296
199
|
vue.createElementVNode("div", {
|
|
297
200
|
onClick: refresh,
|
|
298
|
-
class: "slider-captcha-refresh-icon"
|
|
201
|
+
class: "yu-slider-captcha-refresh-icon"
|
|
299
202
|
}, [
|
|
300
203
|
vue.createVNode(vue.unref(iconsVue.RefreshRight))
|
|
301
204
|
]),
|
|
302
205
|
vue.createElementVNode("div", {
|
|
303
206
|
onClick: close,
|
|
304
|
-
class: "slider-captcha-close-icon"
|
|
207
|
+
class: "yu-slider-captcha-close-icon"
|
|
305
208
|
}, [
|
|
306
209
|
vue.createVNode(vue.unref(iconsVue.CircleClose))
|
|
307
210
|
])
|
|
308
211
|
]),
|
|
309
212
|
vue.createElementVNode("div", {
|
|
310
|
-
class: "slider-captcha",
|
|
213
|
+
class: "yu-slider-captcha",
|
|
311
214
|
style: vue.normalizeStyle({ width: _ctx.canvasWidth + "px" }),
|
|
312
215
|
onselectstart: "return false;"
|
|
313
216
|
}, [
|
|
@@ -321,35 +224,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
321
224
|
class: "success-hint",
|
|
322
225
|
style: vue.normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
323
226
|
}, vue.toDisplayString(successHint.value), 5)) : vue.createCommentVNode("", true),
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
width: _ctx.canvasWidth,
|
|
337
|
-
height: _ctx.canvasHeight
|
|
338
|
-
}, null, 8, _hoisted_4)
|
|
339
|
-
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
|
|
340
|
-
vue.createElementVNode("img", {
|
|
341
|
-
ref_key: "canvas",
|
|
342
|
-
ref: canvas,
|
|
343
|
-
class: "slide-canvas",
|
|
344
|
-
width: _ctx.canvasWidth,
|
|
345
|
-
height: _ctx.canvasHeight
|
|
346
|
-
}, null, 8, _hoisted_5),
|
|
347
|
-
vue.createElementVNode("img", {
|
|
348
|
-
ref_key: "block",
|
|
349
|
-
ref: block,
|
|
350
|
-
class: vue.normalizeClass(["slide-block", { "verify-fail": verifyFail.value }])
|
|
351
|
-
}, null, 2)
|
|
352
|
-
], 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),
|
|
353
239
|
vue.createElementVNode("div", {
|
|
354
240
|
class: vue.normalizeClass(["slider", { "verify-active": verifyActive.value, "verify-success": verifySuccess.value, "verify-fail": verifyFail.value }])
|
|
355
241
|
}, [
|
|
@@ -358,18 +244,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
358
244
|
style: vue.normalizeStyle({ width: sliderBoxWidth.value + "px" })
|
|
359
245
|
}, [
|
|
360
246
|
vue.createElementVNode("div", {
|
|
361
|
-
class: "slider-button",
|
|
247
|
+
class: "yu-slider-button",
|
|
362
248
|
id: "slider-button",
|
|
363
249
|
style: vue.normalizeStyle({ left: sliderButtonLeft.value + "px" })
|
|
364
250
|
}, [
|
|
365
|
-
!isSliderSlide.value ? (vue.openBlock(), vue.
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
251
|
+
!isSliderSlide.value ? (vue.openBlock(), vue.createBlock(vue.unref(icons.SliderArrowStatic), {
|
|
252
|
+
key: 0,
|
|
253
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
254
|
+
})) : (vue.openBlock(), vue.createBlock(vue.unref(icons.SliderArrowSlide), {
|
|
255
|
+
key: 1,
|
|
256
|
+
class: "yu-slider-button-icon yu-color-primary"
|
|
257
|
+
}))
|
|
370
258
|
], 4)
|
|
371
259
|
], 4),
|
|
372
|
-
vue.createElementVNode("span",
|
|
260
|
+
vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(_ctx.sliderHint), 1)
|
|
373
261
|
], 2)
|
|
374
262
|
], 4)
|
|
375
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;
|
|
@@ -225,24 +225,29 @@
|
|
|
225
225
|
//top: -12px;
|
|
226
226
|
top: -10px;
|
|
227
227
|
left: 0;
|
|
228
|
+
|
|
229
|
+
display: flex;
|
|
230
|
+
justify-content: center;
|
|
231
|
+
align-items: center;
|
|
232
|
+
|
|
228
233
|
width: 56px;
|
|
229
234
|
height: 60px;
|
|
230
235
|
}
|
|
231
236
|
|
|
232
237
|
/*鼠标悬浮时的按钮样式*/
|
|
233
|
-
.slider-button:hover {
|
|
238
|
+
.yu-slider-button:hover {
|
|
234
239
|
//background: #1991FA
|
|
235
240
|
cursor: pointer;
|
|
236
241
|
}
|
|
237
242
|
|
|
238
243
|
/*鼠标悬浮时的按钮图标样式*/
|
|
239
|
-
.slider-button:hover .slider-button-icon {
|
|
244
|
+
.yu-slider-button:hover .yu-slider-button-icon {
|
|
240
245
|
}
|
|
241
246
|
|
|
242
247
|
/*滑动按钮图标*/
|
|
243
|
-
.slider-button-icon {
|
|
244
|
-
width:
|
|
245
|
-
height:
|
|
248
|
+
.yu-slider-button-icon {
|
|
249
|
+
width: 32px;
|
|
250
|
+
height: 32px;
|
|
246
251
|
font-size: 24px;
|
|
247
252
|
text-align: center;
|
|
248
253
|
line-height: 60px;
|
|
@@ -271,7 +276,7 @@
|
|
|
271
276
|
}
|
|
272
277
|
|
|
273
278
|
/*校验成功时的按钮图标样式*/
|
|
274
|
-
.verify-success .slider-button-icon {
|
|
279
|
+
.verify-success .yu-slider-button-icon {
|
|
275
280
|
background-position: 0 0 !important;
|
|
276
281
|
}
|
|
277
282
|
|
|
@@ -286,5 +291,5 @@
|
|
|
286
291
|
}
|
|
287
292
|
|
|
288
293
|
/*校验失败时的按钮图标样式*/
|
|
289
|
-
.verify-fail .slider-button-icon {
|
|
294
|
+
.verify-fail .yu-slider-button-icon {
|
|
290
295
|
}
|