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

apps/infra/net/nginx/captcha.html

@@ -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;
+                position: relative;
-                display: flex;
+                width: 300px;
-                justify-content: center;
+                height: 65px;
-                align-items: center;
+                overflow: hidden;
-                min-height: 100px;
+                margin: 0 auto 30px;
-                margin-bottom: 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 id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible"></div>
-                    <div class="loading">请稍等...</div>
+                <div class="loading">验证码加载中, 请稍等...</div>
-                </div>
             </form>
             <a href="mailto:admin@dev.cm">联系我们</a>
         </div>

apps/infra/net/nginx/configmap-html.yaml

@@ -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;
+                position: relative;
-                display: flex;
+                width: 300px;
-                justify-content: center;
+                height: 65px;
-                align-items: center;
+                overflow: hidden;
-                min-height: 100px;
+                margin: 0 auto 30px;
-                margin-bottom: 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 id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible"></div>
-                    <div class="loading">请稍等...</div>
+                <div class="loading">验证码加载中, 请稍等...</div>
-                </div>
             </form>
             <a href="mailto:admin@dev.cm">联系我们</a>
         </div>