From 4566a66910b07211b881b4b8bf2a4a625b4aa27e Mon Sep 17 00:00:00 2001
From: gaofeng <1212121@qq.com>
Date: Mon, 2 Nov 2026 15:46:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/home/view/detail/index.html         | 43 +++++++++++++++---
 app/home/view/public/home_menu.html     |  2 +-
 public/static/home/css/inner-acvisa.css | 60 +++++++++++++++++++++++++
 3 files changed, 98 insertions(+), 7 deletions(-)

diff --git a/app/home/view/detail/index.html b/app/home/view/detail/index.html
index 1dfdf74..1d620dc 100644
--- a/app/home/view/detail/index.html
+++ b/app/home/view/detail/index.html
@@ -330,7 +330,7 @@
                                         class="layui-zhtit-grey">{:lang('evus.pinyin')}</span><span>*</span></label>
                                 <div class="layui-input-block">
                                     <div class="layui-input-group">
-                                        <input type="text" name="us_visa_surname" value="" placeholder="{:lang('evus.last_name_placeholder')}"
+                                        <input lay-verify="englishOnly" type="text" name="us_visa_surname" value="" placeholder="{:lang('evus.last_name_placeholder')}"
                                                class="layui-input layui-required" lay-verType="tips"
                                                lay-reqtext="{:lang('evus.last_name_required')}">
                                         <div class="layui-input-group-prepend" style="width: 5%; text-align: center">
@@ -347,7 +347,7 @@
                                         class="layui-zhtit-grey">{:lang('evus.pinyin')}</span><span>*</span></label>
                                 <div class="layui-input-block">
                                     <div class="layui-input-group">
-                                        <input type="text" name="us_visa_first_name" value="" placeholder="{:lang('evus.first_name_placeholder')}"
+                                        <input lay-verify="englishOnly" type="text" name="us_visa_first_name" value="" placeholder="{:lang('evus.first_name_placeholder')}"
                                                class="layui-input layui-required" lay-verType="tips"
                                                lay-reqtext="{:lang('evus.first_name_required')}">
                                         <div class="layui-input-group-prepend" style="width: 5%; text-align: center">
@@ -763,7 +763,7 @@
                                 <label class="layui-form-label">{:lang('evus.alias_last_name_label')}<span>*</span></label>
                                 <div class="layui-input-block">
                                     <div class="layui-input-group">
-                                        <input class="layui-input layui-required" name="family_name_alias"
+                                        <input lay-verify="englishOnly" class="layui-input layui-required" name="family_name_alias"
                                                type="text" placeholder="{:lang('evus.alias_last_name_placeholder')}" lay-verType="tips"
                                                lay-reqtext="{:lang('evus.alias_last_name_tooltip')}"/>
                                         <div class="layui-input-group-prepend" style="width: 5%; text-align: center">
@@ -780,7 +780,7 @@
                                 <label class="layui-form-label">{:lang('evus.alias_first_name_label')}<span>*</span></label>
                                 <div class="layui-input-block">
                                     <div class="layui-input-group">
-                                        <input class="layui-input layui-required" name="given_name_alias"
+                                        <input lay-verify="englishOnly" class="layui-input layui-required" name="given_name_alias"
                                                type="text" placeholder="{:lang('evus.alias_first_name_placeholder')}" lay-verType="tips"
                                                lay-reqtext="{:lang('evus.alias_first_name_tooltip')}"/>
                                         <div class="layui-input-group-prepend" style="width: 5%; text-align: center">
@@ -838,7 +838,7 @@
                             <label class="layui-form-label">{:lang('evus.email_label')}</label>
                             <div class="layui-input-block">
                                 <div class="layui-input-group">
-                                    <input type="text" name="email" value="" placeholder="{:lang('evus.email_placeholder')}"
+                                    <input lay-verify="email" type="email" name="email" value="" placeholder="{:lang('evus.email_placeholder')}"
                                            class="layui-input"
                                            lay-verType="tips" lay-reqtext="{:lang('evus.email_required')}">
                                     <div class="layui-input-group-prepend" style="width: 5%; text-align: center">
@@ -1339,7 +1339,7 @@
                             <div class="layui-input-block">
                                 <div class="layui-input-group">
                                     <input class="layui-input" name="emergency_email"
-                                           type="text" placeholder="{:lang('evus.emergency_email_placeholder')}" lay-verType="tips"
+                                           type="email" placeholder="{:lang('evus.emergency_email_placeholder')}" lay-verType="tips"
                                            lay-reqtext="{:lang('evus.emergency_email_required')}" lay-verify="email"/>
                                     <div class="layui-input-group-prepend" style="width: 5%; text-align: center">
                                         <i class="layui-icon layui-icon-question"
@@ -1954,9 +1954,14 @@
             }
         },
         englishOnly: function (value, item) {
+            // Conditional and optional names are validated only when visible and filled.
+            if (!value || !layui.$(item).is(':visible')) return;
             if (!/^[A-Za-z]+$/.test(value)) {
                 return '{:lang("js.english_only")}';
             }
+        },
+        email: function (value, item) {
+            if (value && item.validity.typeMismatch) return item.validationMessage;
         }
     });
     async function upload(_this, name) {
@@ -2107,4 +2112,30 @@
         }
     }
 </script>
+<script id="evus-pinyin-input">
+    document.querySelectorAll('input[name="last_name"], input[name="first_name"], input[name="us_visa_surname"], input[name="us_visa_first_name"], input[name="family_name_alias"], input[name="given_name_alias"]').forEach(function (input) {
+        var lastValid = /^[A-Za-z]*$/.test(input.value) ? input.value : '';
+        var composing = false;
+        function checkInput() {
+            if (/^[A-Za-z]*$/.test(input.value)) {
+                lastValid = input.value;
+                return;
+            }
+            // Reject the whole edit rather than silently changing a pasted name.
+            input.value = lastValid;
+            layer.msg('{:lang("js.english_only")}');
+        }
+        input.addEventListener('focus', function () {
+            if (/^[A-Za-z]*$/.test(input.value)) lastValid = input.value;
+        });
+        input.addEventListener('compositionstart', function () { composing = true; });
+        input.addEventListener('compositionend', function () {
+            composing = false;
+            checkInput();
+        });
+        input.addEventListener('input', function (event) {
+            if (!composing && !event.isComposing) checkInput();
+        });
+    });
+</script>
 </html>
diff --git a/app/home/view/public/home_menu.html b/app/home/view/public/home_menu.html
index c0d20c4..053d1cb 100644
--- a/app/home/view/public/home_menu.html
+++ b/app/home/view/public/home_menu.html
@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="/static/home/css/inner-acvisa.css?v=20261102-1">
+<link rel="stylesheet" href="/static/home/css/inner-acvisa.css?v=20261102-3">
 {include file="public/site_nav" /}
diff --git a/public/static/home/css/inner-acvisa.css b/public/static/home/css/inner-acvisa.css
index 5ad1872..1045397 100644
--- a/public/static/home/css/inner-acvisa.css
+++ b/public/static/home/css/inner-acvisa.css
@@ -90,3 +90,63 @@ body:is(.detail-page, .esta-page, .lookup-page):has(.ac-header) .layui-form-labe
 /* The lookup grid already owns its column layout; avoid doubling its outer padding. */
 body.lookup-page:has(.ac-header) .lookup-shell { width: 100%; max-width: none; padding: 0; }
 body.lookup-page:has(.ac-header) #Form1 .lookup-form-grid { padding: 4px 10px 0; }
+
+/* Style the existing EVUS steps as cards without changing their visibility or field structure. */
+body.detail-page:has(.ac-header) .detail-shell > .layui-container > .container:has(> .layui-form) {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+body.detail-page:has(.ac-header) .detail-shell form.layui-form {
+    margin-bottom: 24px;
+    padding: 28px 24px 18px;
+    border: 1px solid #e1e8ee;
+    border-top: 3px solid #d8bd91;
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: 0 6px 22px rgba(23, 45, 69, .04);
+}
+body.detail-page:has(.ac-header) .detail-shell .m-form-application-title h2 { font-size: 22px; }
+body.detail-page:has(.ac-header) .detail-shell .layui-form-label { padding-top: 6px; padding-bottom: 8px; line-height: 1.6; }
+body.detail-page:has(.ac-header) .detail-shell .layui-input { border-color: #d9e2e9; border-radius: 6px; }
+body.detail-page:has(.ac-header) .detail-shell .layui-input:focus { border-color: #285b7c !important; box-shadow: 0 0 0 3px rgba(40, 91, 124, .1); }
+/* Keep address fields in paired rows even when labels have different heights. */
+body.detail-page:has(.ac-header) #Form3 > .layui-row:has(> .layui-col-md6) { display: flex; flex-wrap: wrap; }
+body.detail-page:has(.ac-header) #Form3 > .layui-row > .layui-field-title { flex-basis: 100%; }
+body.detail-page:has(.ac-header) .detail-shell .layui-col-md12 > .layui-form-item:has(input[type="radio"]) {
+    min-height: 0;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #edf1f4;
+}
+body.detail-page:has(.ac-header) .detail-shell .layui-form-radio { margin-top: 0; padding: 6px 8px; line-height: 1.7; white-space: normal; }
+body.detail-page:has(.ac-header) #Form9 .layui-form-item:has(input[name="total_price"]) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    border: 0;
+}
+body.detail-page:has(.ac-header) #Form9 .layui-input-block:has(input[name="total_price"]) { margin: 0; min-width: 0; }
+body.detail-page:has(.ac-header) #Form9 input[name="total_price"] + .layui-form-radio {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    height: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 16px;
+    border: 1px solid #d9e2e9;
+    border-radius: 8px;
+    background: #f8fafc;
+}
+body.detail-page:has(.ac-header) #Form9 input[name="total_price"] + .layui-form-radio > i { flex-shrink: 0; margin-right: 0; }
+body.detail-page:has(.ac-header) #Form9 input[name="total_price"] + .layui-form-radioed { border-color: #173f62; background: #edf3f7; box-shadow: inset 0 0 0 1px #173f62; }
+body.detail-page:has(.ac-header) #Form9 .payment-choice-option:has(input:checked) { border-color: #173f62; box-shadow: 0 0 0 1px #173f62; }
+body.detail-page:has(.ac-header) #submit { min-width: 220px; min-height: 48px; margin-top: 8px; border-radius: 6px; font-size: 18px; box-shadow: none; }
+@media (max-width: 800px) {
+    body.detail-page:has(.ac-header) .detail-shell form.layui-form { margin-bottom: 16px; padding: 20px 10px 12px; }
+    body.detail-page:has(.ac-header) .detail-shell .m-form-application-title h2 { font-size: 20px; }
+    body.detail-page:has(.ac-header) #Form9 .layui-form-item:has(input[name="total_price"]) { grid-template-columns: 1fr; }
+    body.detail-page:has(.ac-header) #submit { width: 100%; min-width: 0; }
+}