图片拼接类型验证码, 两块图片之间添加一个细线, 遮盖切分的像素误差

This commit is contained in:
灌糖包子 2026-05-16 14:07:35 +08:00
parent e581ced7e8
commit 0aef7d0ad5
Signed by: sookie
GPG Key ID: 0599BECB75C1E68D
2 changed files with 16 additions and 5 deletions

View File

@ -9,16 +9,14 @@ import {
const TYPE = "CONCAT";
function getTemplate(styleConfig) {
function getTemplate() {
return `
<div class="captcha captcha-slider captcha-concat">
<div class="slider-tip">
<span class="captcha-slider-move-track-font" >拖动滑块完成拼图</span>
</div>
<div class="content">
<div class="captcha-slider-concat-img-div">
<img class="captcha-slider-concat-slider-img" src="" alt/>
</div>
<div class="captcha-slider-concat-img-div"></div>
<div class="captcha-slider-concat-bg-img"></div>
<div class="captcha-tips"></div>
</div>
@ -46,7 +44,7 @@ class Concat extends CommonCaptcha {
init(captchaData, endCallback, loadSuccessCallback) {
// 重载样式
this.destroy();
this.boxEl.append(getTemplate(this.styleConfig));
this.boxEl.append(getTemplate());
this.el = this.boxEl.find(".captcha");
this.loadStyle();
// 按钮绑定事件

View File

@ -5,6 +5,19 @@
transform: translate(0px, 0px);
z-index: 1;
width: 100%;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(255, 255, 255, 0.92);
box-shadow:
0 0 6px 3px rgb(255 255 255 / 60%),
0 1px 4px rgb(0 0 0 / 90%);
pointer-events: none;
}
}
.captcha-slider-concat-bg-img {
width: 100%;