dev.cm/k3s
1
0
派生 0
代码 议题 拉取请求 活动

feat(captcha): 验证码样式优化

浏览代码
这个提交包含在：
rohow
2025-03-31 15:25:54 +08:00
未验证
父节点 210e29b469
当前提交 c891b244b3
共修改 2 个文件，包含 88 行新增和 26 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
apps/infra/net/nginx/captcha.html
+44 -13
查看文件
@@ -189,10 +189,6 @@
box-shadow: 0 0 0 0 #000, 0 0 0 2px #1cfafe
}
.error-social {
margin-top: 35px
}
.error-social > a {
width: 40px;
height: 40px;
@@ -208,21 +204,57 @@
}
#captcha-form {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
margin-bottom: 30px;
position: relative;
width: 300px;
height: 65px;
overflow: hidden;
margin: 0 auto 30px;
background-color: #fff;
-webkit-box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
}
.loading {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 65px;
gap: 10px;
}
.loading:has(+ *) {
display: none;
}
.loading::before {
content: "";
width: 20px;
height: 20px;
border: 2px solid #000;
border-right-color: #1cfafe;
border-radius: 50%;
animation: spin 1s linear infinite;
}
#captcha {
position: relative;
z-index: 2;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media only screen and (max-width: 480px) {
.error .error-code {
height: 122px;
@@ -254,9 +286,8 @@
<h2>请完成验证</h2>
<p>请完成下面验证, 页面将会自动跳转到访问页面。</p>
<form id="captcha-form" method="POST">
<div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible">
<div class="loading">请稍等...</div>
</div>
<div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible"></div>
<div class="loading">验证码加载中, 请稍等...</div>
</form>
<a href="mailto:admin@dev.cm">联系我们</a>
</div>
apps/infra/net/nginx/configmap-html.yaml
+44 -13
查看文件
@@ -196,10 +196,6 @@ data:
box-shadow: 0 0 0 0 #000, 0 0 0 2px #1cfafe
}
.error-social {
margin-top: 35px
}
.error-social > a {
width: 40px;
height: 40px;
@@ -215,21 +211,57 @@ data:
}
#captcha-form {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
margin-bottom: 30px;
position: relative;
width: 300px;
height: 65px;
overflow: hidden;
margin: 0 auto 30px;
background-color: #fff;
-webkit-box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
}
.loading {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 65px;
gap: 10px;
}
.loading:has(+ *) {
display: none;
}
.loading::before {
content: "";
width: 20px;
height: 20px;
border: 2px solid #000;
border-right-color: #1cfafe;
border-radius: 50%;
animation: spin 1s linear infinite;
}
#captcha {
position: relative;
z-index: 2;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media only screen and (max-width: 480px) {
.error .error-code {
height: 122px;
@@ -261,9 +293,8 @@ data:
<h2>请完成验证</h2>
<p>请完成下面验证, 页面将会自动跳转到访问页面。</p>
<form id="captcha-form" method="POST">
<div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible">
<div class="loading">请稍等...</div>
</div>
<div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible"></div>
<div class="loading">验证码加载中, 请稍等...</div>
</form>
<a href="mailto:admin@dev.cm">联系我们</a>
</div>