\u7b7e\u8bc1\u7533\u8bf7\u4fe1\u606f\u8868 \u00b7 \u5728\u7ebf\u586b\u5199<\/title>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<style>\n :root{\n --blue:#2563eb; --blue-l:#eff6ff; --ink:#0f172a; --muted:#64748b;\n --line:#e2e8f0; --card:#ffffff; --bg:#f1f5f9; --radius:14px;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",sans-serif;\n background:var(--bg); color:var(--ink); line-height:1.5;\n -webkit-font-smoothing:antialiased;\n }\n\n \/* ---------- \u9876\u90e8 ---------- *\/\n .app-header{\n background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);\n color:#fff; padding:30px 24px 60px;\n }\n .app-header .inner{\n max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap;\n }\n .logo{\n width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.18);\n display:grid;place-items:center;font-size:27px;\n border:1px solid rgba(255,255,255,.32); flex:none;\n }\n .app-header h1{margin:0;font-size:22px;letter-spacing:.5px;}\n .app-header p{margin:4px 0 0;font-size:13px;opacity:.85;}\n\n \/* ---------- \u4e3b\u4f53 ---------- *\/\n .container{max-width:1080px;margin:-38px auto 0;padding:0 24px 130px;}\n .card{\n background:var(--card);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;\n border:1px solid rgba(226,232,240,.9);\n box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -18px rgba(15,23,42,.35);\n }\n .card h2{\n display:flex;align-items:center;gap:10px;font-size:15px;margin:0 0 18px;font-weight:700;color:#0f172a;\n }\n .card h2 .num{\n width:24px;height:24px;border-radius:7px;background:var(--blue-l);color:var(--blue);\n display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;\n }\n\n .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}\n .grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}\n .span2{grid-column:span 2;}\n @media(max-width:760px){\n .grid,.grid.three{grid-template-columns:1fr;}\n .span2{grid-column:span 1;}\n }\n\n .field{display:flex;flex-direction:column;gap:6px;min-width:0;}\n .field > label{font-size:12.5px;color:#334155;font-weight:600;}\n .field > label .req{color:#ef4444;margin-left:2px;}\n .field input[type=text],\n .field input[type=date],\n .field input[type=email],\n .field input[type=tel],\n .field input[type=number],\n .field select,\n .field textarea{\n width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;\n font-size:14px;background:#fff;color:var(--ink);font-family:inherit;\n transition:border-color .15s, box-shadow .15s;outline:none;\n }\n .field input:focus,.field select:focus,.field textarea:focus{\n border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.14);\n }\n .field input.err,.field select.err{border-color:#f87171;background:#fef2f2;}\n .field textarea{resize:vertical;min-height:76px;}\n .field select{appearance:none;background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'\/><\/svg>\");\n background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}\n\n \/* \u5355\u9009\u6309\u94ae\u7ec4 *\/\n .radios{display:flex;gap:8px;flex-wrap:wrap;padding-top:1px;}\n .radios > label{\n display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--line);\n border-radius:10px;font-size:13.5px;font-weight:500;color:#334155;background:#fff;\n cursor:pointer;transition:.15s;user-select:none;\n }\n .radios > label input{display:none;}\n .radios > label:hover{border-color:#bfdbfe;}\n .radios > label:has(input:checked){\n border-color:var(--blue);background:var(--blue-l);color:var(--blue);font-weight:700;\n }\n\n \/* \u7167\u7247\u4e0a\u4f20 *\/\n .photo-row{display:flex;gap:14px;align-items:center;}\n .photo-box{\n width:92px;height:120px;border:1.5px dashed #cbd5e1;border-radius:10px;\n display:grid;place-items:center;cursor:pointer;background:#f8fafc;\n overflow:hidden;font-size:11.5px;color:#94a3b8;text-align:center;\n transition:.15s;flex:none;line-height:1.4;padding:4px;\n }\n .photo-box:hover{border-color:#93c5fd;background:var(--blue-l);color:var(--blue);}\n .photo-box img{width:100%;height:100%;object-fit:cover;display:block;}\n .photo-tip{font-size:11.5px;color:#94a3b8;line-height:1.8;}\n\n \/* ---------- \u5e95\u90e8\u64cd\u4f5c\u680f ---------- *\/\n .action-bar{\n position:fixed;left:0;right:0;bottom:0;z-index:60;\n background:rgba(255,255,255,.92);backdrop-filter:blur(12px);\n border-top:1px solid var(--line);padding:12px 24px;\n display:flex;justify-content:center;gap:12px;\n }\n .btn{\n border:none;border-radius:11px;padding:12px 26px;font-size:14.5px;font-weight:700;\n cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;\n transition:transform .18s, box-shadow .18s, background .18s;white-space:nowrap;\n }\n .btn-primary{\n background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;\n box-shadow:0 10px 22px -10px rgba(37,99,235,.95);\n }\n .btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(37,99,235,1);}\n .btn-primary:disabled{opacity:.65;cursor:not-allowed;}\n .btn-ghost{background:#fff;color:#475569;border:1px solid var(--line);}\n .btn-ghost:hover{background:#f8fafc;}\n\n .spinner{\n width:15px;height:15px;border-radius:50%;\n border:2px solid rgba(255,255,255,.4);border-top-color:#fff;\n animation:spin .7s linear infinite;\n }\n @keyframes spin{to{transform:rotate(360deg);}}\n\n \/* ---------- \u63d0\u793a\u6761 ---------- *\/\n .toast{\n position:fixed;left:50%;bottom:100px;transform:translate(-50%,16px);\n background:#0f172a;color:#fff;padding:11px 20px;border-radius:10px;\n font-size:13.5px;opacity:0;pointer-events:none;transition:.28s;z-index:300;\n max-width:86vw;text-align:center;\n }\n .toast.show{opacity:1;transform:translate(-50%,0);}\n\n .footnote{text-align:center;font-size:12px;color:#94a3b8;margin-top:6px;}\n\n \/* =========================================================\n PDF \u6587\u6863\u6837\u5f0f\uff08\u79bb\u5c4f\u6e32\u67d3\u7528\uff09\n ========================================================= *\/\n #pdf-doc{\n position:fixed; left:-10000px; top:0;\n width:794px; padding:48px 52px 44px;\n background:#ffffff; color:#0f172a;\n font-family:\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"Heiti SC\",sans-serif;\n line-height:1.5;\n }\n #pdf-doc .doc-head{\n display:flex;justify-content:space-between;align-items:flex-start;\n border-bottom:3px solid #2563eb;padding-bottom:16px;\n }\n #pdf-doc .doc-flag{\n font-size:11px;letter-spacing:3px;color:#2563eb;font-weight:800;margin-bottom:6px;\n }\n #pdf-doc h1{margin:0;font-size:26px;letter-spacing:5px;font-weight:800;}\n #pdf-doc .doc-sub{margin:5px 0 0;font-size:12px;color:#94a3b8;letter-spacing:1.2px;}\n #pdf-doc .doc-photo{\n width:96px;height:126px;border:1px solid #cbd5e1;border-radius:4px;\n display:grid;place-items:center;font-size:11px;color:#94a3b8;text-align:center;\n overflow:hidden;flex:none;background:#f8fafc;line-height:1.5;\n }\n #pdf-doc .doc-photo img{width:100%;height:100%;object-fit:cover;display:block;}\n #pdf-doc .doc-meta{\n display:flex;justify-content:space-between;\n font-size:11.5px;color:#64748b;margin:10px 0 20px;\n }\n #pdf-doc .sec{margin-bottom:16px;}\n #pdf-doc .sec h3{\n font-size:13px;margin:0 0 6px;padding-left:10px;\n border-left:3px solid #2563eb;color:#1e293b;font-weight:700;line-height:1.3;\n }\n #pdf-doc .prow{display:flex;gap:16px;padding:4px 0;}\n #pdf-doc .pcell{flex:1 1 0;display:flex;gap:8px;align-items:baseline;min-width:0;}\n #pdf-doc .pcell.full{flex:1 1 100%;}\n #pdf-doc .pl{font-size:11.5px;color:#64748b;white-space:nowrap;flex:none;line-height:1.7;}\n #pdf-doc .pv{\n font-size:12.5px;font-weight:600;color:#0f172a;flex:1;min-width:0;\n min-height:18px;border-bottom:1px dashed #cbd5e1;padding-bottom:1px;\n word-break:break-word;line-height:1.7;\n }\n #pdf-doc .declare{\n margin-top:20px;border:1px solid #e2e8f0;border-radius:8px;\n padding:13px 16px;background:#f8fafc;font-size:11.5px;color:#475569;line-height:1.9;\n }\n #pdf-doc .declare b{color:#1e293b;}\n #pdf-doc .sign{display:flex;gap:48px;margin-top:32px;font-size:12.5px;color:#334155;}\n #pdf-doc .sign-item{flex:1;display:flex;align-items:flex-end;gap:6px;}\n #pdf-doc .sign-item i{flex:1;display:block;height:24px;border-bottom:1px solid #94a3b8;}\n #pdf-doc .doc-foot{\n margin-top:26px;padding-top:12px;border-top:1px solid #e2e8f0;\n font-size:10.5px;color:#94a3b8;text-align:center;letter-spacing:.5px;\n }\n<\/style>\n<\/head>\n<body>\n\n<header class=\"app-header\">\n <div class=\"inner\">\n <div class=\"logo\">\ud83d\udec2<\/div>\n <div>\n <h1>BAO\u5c55\u4f1a\u7b7e\u8bc1\u7533\u8bf7\u4fe1\u606f\u8868<\/h1>\n <p>Visa Application Form \u00b7 \u672c\u5730\u586b\u5199\uff0c\u6570\u636e\u4e0d\u4f1a\u4e0a\u4f20<\/p>\n <\/div>\n <\/div>\n<\/header>\n\n<main class=\"container\">\n <form id=\"visaForm\" novalidate autocomplete=\"off\">\n\n \n <section class=\"card\">\n <h2><span class=\"num\">1<\/span>\u7533\u8bf7\u4eba\u57fa\u672c\u4fe1\u606f<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u4e2d\u6587\u59d3\u540d<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"cnName\" data-required placeholder=\"\u8bf7\u8f93\u5165\u4e2d\u6587\u59d3\u540d\uff08\u8bf7\u4f7f\u7528CN\u4ee3\u66ff\uff09\">\n <\/div>\n <div class=\"field\">\n <label>\u82f1\u6587\u59d3\u6c0f\uff08\u62fc\u97f3\uff09<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"surname\" data-required placeholder=\"\u5982\uff1aZHANG\">\n <\/div>\n <div class=\"field\">\n <label>\u82f1\u6587\u540d\u5b57\uff08\u62fc\u97f3\uff09<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"givenName\" data-required placeholder=\"\u5982\uff1aSAN\">\n <\/div>\n <div class=\"field\">\n <label>\u6027\u522b<\/label>\n <div class=\"radios\">\n <label><input type=\"radio\" name=\"gender\" value=\"\u7537\"><span>\u7537<\/span><\/label>\n <label><input type=\"radio\" name=\"gender\" value=\"\u5973\"><span>\u5973<\/span><\/label>\n\t <label><input type=\"radio\" name=\"gender\" value=\"\u5176\u4ed6\"><span>\u5176\u4ed6<\/span><\/label>\n\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>\u51fa\u751f\u65e5\u671f<\/label>\n <input type=\"date\" name=\"birthDate\">\n <\/div>\n <div class=\"field\">\n <label>\u51fa\u751f\u5730<\/label>\n <input type=\"text\" name=\"birthPlace\" placeholder=\"\u5982\uff1a\u5317\u4eac\u5e02\">\n <\/div>\n <div class=\"field\">\n <label>\u56fd\u7c4d<\/label>\n <select name=\"nationality\">\n <option value=\"\u4e2d\u56fd\">\u4e2d\u56fd<\/option>\n <option value=\"\u5176\u4ed6\">\u5176\u4ed6<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u8eab\u4efd\u8bc1\u53f7\uff08\u968f\u4fbf\u7f16\uff0c\u522b\u586b\u771f\u7684\uff09<\/label>\n <input type=\"text\" name=\"idNumber\" placeholder=\"\u52ff\u586b\u5199\u771f\u5b9e\u4fe1\u606f\uff01\">\n <\/div>\n <div class=\"field\">\n <label>\u5a5a\u59fb\u72b6\u51b5<\/label>\n <select name=\"marital\">\n <option value=\"\">\u8bf7\u9009\u62e9<\/option>\n <option value=\"\u672a\u5a5a\">\u672a\u5a5a<\/option>\n <option value=\"\u5df2\u5a5a\">\u5df2\u5a5a<\/option>\n <option value=\"\u79bb\u5f02\">\u79bb\u5f02<\/option>\n <option value=\"\u4e27\u5076\">\u4e27\u5076<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u6700\u9ad8\u5b66\u5386<\/label>\n <select name=\"education\">\n <option value=\"\">\u8bf7\u9009\u62e9<\/option>\n <option value=\"\u9ad8\u4e2d\u53ca\u4ee5\u4e0b\">\u9ad8\u4e2d\u53ca\u4ee5\u4e0b<\/option>\n <option value=\"\u5927\u4e13\">\u5927\u4e13<\/option>\n <option value=\"\u672c\u79d1\">\u672c\u79d1<\/option>\n <option value=\"\u7855\u58eb\">\u7855\u58eb<\/option>\n <option value=\"\u535a\u58eb\">\u535a\u58eb<\/option>\n <\/select>\n <\/div>\n <div class=\"field span2\">\n <label>\u8bc1\u4ef6\u7167<\/label>\n <div class=\"photo-row\">\n <div class=\"photo-box\" id=\"photoBox\"><span>\uff0b \u4e0a\u4f20\u7167\u7247<\/span><\/div>\n <div class=\"photo-tip\">\n \u652f\u6301 JPG \/ PNG \u683c\u5f0f<br>\n \u5efa\u8bae\u5c3a\u5bf8 35\u00d745mm<br>\n \u6587\u4ef6\u4e0d\u8d85\u8fc7 5MB\n <\/div>\n <\/div>\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" hidden>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">2<\/span>\u62a4\u7167\u4fe1\u606f<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u62a4\u7167\u53f7\u7801<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"passportNo\" data-required placeholder=\"\u4e71\u7f16\uff0c\u522b\u586b\u771f\u7684\">\n <\/div>\n <div class=\"field\">\n <label>\u62a4\u7167\u7c7b\u578b<\/label>\n <select name=\"passportType\">\n <option value=\"\u666e\u901a\u62a4\u7167\">\u666e\u901a\u62a4\u7167<\/option>\n <option value=\"\u516c\u52a1\u62a4\u7167\">\u516c\u52a1\u62a4\u7167<\/option>\n <option value=\"\u5916\u4ea4\u62a4\u7167\">\u5916\u4ea4\u62a4\u7167<\/option>\n <option value=\"\u56e0\u516c\u666e\u901a\u62a4\u7167\">\u56e0\u516c\u666e\u901a\u62a4\u7167<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u7b7e\u53d1\u65e5\u671f<\/label>\n <input type=\"date\" name=\"issueDate\">\n <\/div>\n <div class=\"field\">\n <label>\u6709\u6548\u671f\u81f3<\/label>\n <input type=\"date\" name=\"expiryDate\">\n <\/div>\n <div class=\"field\">\n <label>\u5c55\u4f1a\u4e3b\u529e<\/label>\n <input type=\"text\" name=\"issueAuthority\" placeholder=\"\u5982\uff1a\u5e7f\u5ddebao\u00b7\u7ca4\u8fd1\u8fdc\u6765\u7ec4\u59d4\u4f1a\">\n <\/div>\n <div class=\"field\">\n <label>\u5730\u70b9<\/label>\n <input type=\"text\" name=\"issuePlace\" placeholder=\"\u5982\uff1a\u5317\u4eac\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">3<\/span>\u8054\u7cfb\u65b9\u5f0f<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u624b\u673a\u53f7\u7801<span class=\"req\">*<\/span><\/label>\n <input type=\"tel\" name=\"phone\" data-required placeholder=\"\u5982\uff1a13800138000\">\n <\/div>\n <div class=\"field\">\n <label>\u7535\u5b50\u90ae\u7bb1<\/label>\n <input type=\"email\" name=\"email\" placeholder=\"\u5982\uff1aexample@qq.com\">\n <\/div>\n <div class=\"field\">\n <label>\u73b0\u5c45\u4f4f\u57ce\u5e02<\/label>\n <input type=\"text\" name=\"city\" placeholder=\"\u5982\uff1a\u4e0a\u6d77\u5e02\">\n <\/div>\n <div class=\"field\">\n <label>\u90ae\u653f\u7f16\u7801<\/label>\n <input type=\"text\" name=\"postcode\" placeholder=\"\u4e0d\u77e5\u9053\u5c31\u4e71\u586b\">\n <\/div>\n <div class=\"field span2\">\n <label>\u73b0\u5c45\u4f4f\u5730\u5740<\/label>\n <input type=\"text\" name=\"address\" placeholder=\"\u8bf7\u4f7f\u7528\u9e21\u7a9d\u6258\u65af\u7684\u4f4f\u5740\uff0c\u522b\u586b\u771f\u7684\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">4<\/span>\u65c5\u884c\u4fe1\u606f<\/h2>\n <div class=\"grid three\">\n <div class=\"field\">\n <label>\u7b7e\u8bc1\u7c7b\u578b<\/label>\n <select name=\"visaType\">\n <option value=\"\u65c5\u6e38\u7b7e\u8bc1\uff08\u6e38\u5ba2\uff09\">\u65c5\u6e38\u7b7e\u8bc1<\/option>\n <option value=\"\u5546\u52a1\u7b7e\u8bc1\uff08\u5c55\u5546\uff09\">\u5546\u52a1\u7b7e\u8bc1<\/option>\n <option value=\"\u63a2\u4eb2\u8bbf\u53cb\u7b7e\u8bc1\uff08\u81ea\u7531\u884c\uff09\">\u63a2\u4eb2\u8bbf\u53cb\u7b7e\u8bc1<\/option>\n <option value=\"\u7559\u5b66\u7b7e\u8bc1(\u5b66\u751fcoser)\">\u7559\u5b66\u7b7e\u8bc1<\/option>\n <option value=\"\u5de5\u4f5c\u7b7e\u8bc1(staff)\">\u5de5\u4f5c\u7b7e\u8bc1<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u7968\u6863\u4fe1\u606f<\/label>\n <select name=\"entries\">\n <option value=\"\u666e\u7968\">\u666e\u7968<\/option>\n <option value=\"VIP\u7968\">VIP\u7968<\/option>\n <option value=\"\u5176\u4ed6\">\u5176\u4ed6<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u76ee\u7684\u5730\u5c55\u4f1a<\/label>\n <input type=\"text\" name=\"destination\" placeholder=\"\u5982\uff1a\u5e7f\u5ddebao\u7ca4\u8fd1\u8fdc\u67652.0\">\n <\/div>\n <div class=\"field\">\n <label>\u9884\u8ba1\u5165\u5883\u65e5\u671f<\/label>\n <input type=\"date\" name=\"arrivalDate\" id=\"arrivalDate\">\n <\/div>\n <div class=\"field\">\n <label>\u9884\u8ba1\u79bb\u5883\u65e5\u671f<\/label>\n <input type=\"date\" name=\"departureDate\" id=\"departureDate\">\n <\/div>\n <div class=\"field\">\n <label>\u505c\u7559\u5929\u6570<\/label>\n <input type=\"number\" name=\"stayDays\" min=\"1\" placeholder=\"\u81ea\u52a8\u8ba1\u7b97 \/ \u53ef\u4fee\u6539\">\n <\/div>\n <div class=\"field\">\n <label>\u5165\u5883\u4f4d\u7f6e<\/label>\n <input type=\"text\" name=\"port\" placeholder=\"\u5982\uff1a\u5e7f\u5dde\u7948\u798f\u4f1a\u5c55\u4e2d\u5fc3\">\n <\/div>\n <div class=\"field\">\n <label>\u540c\u884c\u4eba\u6570<\/label>\n <input type=\"number\" name=\"companions\" min=\"0\" value=\"0\">\n <\/div>\n <div class=\"field\">\n <label>\u9080\u8bf7\u4eba \/ \u5355\u4f4d<\/label>\n <input type=\"text\" name=\"inviter\" placeholder=\"\u65e0\u5219\u586b\u300c\u65e0\u300d\">\n <\/div>\n <div class=\"field span2\">\n <label>\u9080\u8bf7\u4eba\u8eab\u4efd<\/label>\n <input type=\"text\" name=\"stayAddress\" placeholder=\"\u6e38\u5ba2\u3001staff\u3001\u5609\u5bbe\u7b49\">\n <\/div>\n <div class=\"field\">\n <label>\u9080\u8bf7\u4eba\u8054\u7cfb\u65b9\u5f0f<\/label>\n <input type=\"tel\" name=\"inviterPhone\" placeholder=\"\u4e0d\u60f3\u900f\u9732\u5c31\u522b\u586b\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">5<\/span>\u804c\u4e1a\u4e0e\u6559\u80b2<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u5f53\u524d\u804c\u4e1a<\/label>\n <input type=\"text\" name=\"occupation\" placeholder=\"\u5982\uff1a\u8001\u5e08 \/ \u5b66\u751f\">\n <\/div>\n <div class=\"field\">\n <label>\u5de5\u4f5c\u5355\u4f4d \/ \u5b66\u6821\u540d\u79f0<\/label>\n <input type=\"text\" name=\"employer\" placeholder=\"\u5982\uff1a\u5343\u5e74\u79d1\u6280\u5b66\u9662\">\n <\/div>\n <div class=\"field\">\n <label>\u804c\u52a1<\/label>\n <input type=\"tel\" name=\"workPhone\" placeholder=\"\u81ea\u5df1\u7f16\">\n <\/div>\n <div class=\"field\">\n <label>\u6708\u6536\u5165\uff08\u5143\uff09<\/label>\n <input type=\"number\" name=\"income\" min=\"0\" placeholder=\"\u5982\uff1a15000\">\n <\/div>\n <div class=\"field span2\">\n <label>\u5355\u4f4d \/ \u5b66\u6821\u5730\u5740<\/label>\n <input type=\"text\" name=\"workAddress\" placeholder=\"\u586b\u9e21\u7a9d\u6258\u65af\u7684\u5730\u5740\">\n <\/div>\n <\/div>\n <\/section>\n\n \n\n <p class=\"footnote\">\ud83d\udd12 \u6240\u6709\u4fe1\u606f\u4ec5\u5728\u60a8\u7684\u6d4f\u89c8\u5668\u672c\u5730\u5904\u7406\uff0c\u4e0d\u4f1a\u4e0a\u4f20\u81f3\u4efb\u4f55\u670d\u52a1\u5668\u3002<\/p>\n <\/form>\n<\/main>\n\n\n<div class=\"action-bar\">\n <button type=\"button\" class=\"btn btn-ghost\" id=\"resetBtn\">\u6e05\u7a7a\u91cd\u586b<\/button>\n <button type=\"button\" class=\"btn btn-primary\" id=\"exportBtn\">\ud83d\udcc4 \u751f\u6210\u5e76\u4e0b\u8f7d PDF<\/button>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n(function () {\n 'use strict';\n\n const form = document.getElementById('visaForm');\n const exportBtn = document.getElementById('exportBtn');\n const resetBtn = document.getElementById('resetBtn');\n const photoBox = document.getElementById('photoBox');\n const photoInput = document.getElementById('photoInput');\n const toastEl = document.getElementById('toast');\n\n let photoData = '';\n let toastTimer = null;\n\n \/* ---------------- \u5de5\u5177\u51fd\u6570 ---------------- *\/\n\n function toast(msg) {\n toastEl.textContent = msg;\n toastEl.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(() => toastEl.classList.remove('show'), 2800);\n }\n\n function esc(str) {\n return String(str == null ? '' : str).replace(\/[&<>\"']\/g, c => ({\n '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": '''\n }[c]));\n }\n\n \/** \u8bfb\u53d6\u8868\u5355\u503c *\/\n function gv(name) {\n const radio = form.querySelector('input[type=radio][name=\"' + name + '\"]');\n if (radio) {\n const checked = form.querySelector('input[type=radio][name=\"' + name + '\"]:checked');\n return checked ? checked.value : '';\n }\n const el = form.elements[name];\n if (!el) return '';\n return (el.value || '').trim();\n }\n\n function dateStamp() {\n const d = new Date();\n return d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');\n }\n\n \/* ---------------- \u7167\u7247\u4e0a\u4f20 ---------------- *\/\n\n photoBox.addEventListener('click', () => photoInput.click());\n\n photoInput.addEventListener('change', e => {\n const file = e.target.files && e.target.files[0];\n if (!file) return;\n if (!\/^image\\\/\/.test(file.type)) {\n toast('\u8bf7\u9009\u62e9\u56fe\u7247\u6587\u4ef6');\n return;\n }\n if (file.size > 5 * 1024 * 1024) {\n toast('\u56fe\u7247\u4e0d\u80fd\u8d85\u8fc7 5MB');\n return;\n }\n const reader = new FileReader();\n reader.onload = ev => {\n photoData = ev.target.result;\n photoBox.innerHTML = '<img decoding=\"async\" src=\"' + photoData + '\" alt=\"\u8bc1\u4ef6\u7167\">';\n };\n reader.readAsDataURL(file);\n });\n\n \/* ---------------- \u505c\u7559\u5929\u6570\u81ea\u52a8\u8ba1\u7b97 ---------------- *\/\n\n function calcDays() {\n const a = form.elements['arrivalDate'].value;\n const b = form.elements['departureDate'].value;\n if (!a || !b) return;\n const diff = Math.round((new Date(b) - new Date(a)) \/ 86400000);\n if (diff >= 0) form.elements['stayDays'].value = diff + 1;\n }\n document.getElementById('arrivalDate').addEventListener('change', calcDays);\n document.getElementById('departureDate').addEventListener('change', calcDays);\n\n \/* ---------------- \u8868\u5355\u6821\u9a8c ---------------- *\/\n\n function validateForm() {\n let ok = true;\n let firstErr = null;\n\n form.querySelectorAll('[data-required]').forEach(el => {\n el.classList.remove('err');\n if (!el.value.trim()) {\n el.classList.add('err');\n ok = false;\n if (!firstErr) firstErr = el;\n }\n });\n\n \/\/ \u90ae\u7bb1\u683c\u5f0f\n ['email', 'ecEmail'].forEach(n => {\n const el = form.elements[n];\n if (el && el.value.trim() && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(el.value.trim())) {\n el.classList.add('err');\n ok = false;\n if (!firstErr) firstErr = el;\n }\n });\n\n if (!ok) {\n toast('\u8bf7\u68c0\u67e5\u6807\u7ea2\u7684\u5fc5\u586b\u9879 \/ \u683c\u5f0f\u662f\u5426\u6b63\u786e');\n if (firstErr) {\n firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });\n setTimeout(() => firstErr.focus({ preventScroll: true }), 320);\n }\n return false;\n }\n return true;\n }\n\n form.addEventListener('input', e => {\n if (e.target.classList && e.target.classList.contains('err')) {\n e.target.classList.remove('err');\n }\n });\n\n \/* ---------------- \u6784\u5efa PDF \u6587\u6863\u7ed3\u6784 ---------------- *\/\n\n function C(label, value) {\n return '<div class=\"pcell\"><span class=\"pl\">' + label + '<\/span>' +\n '<span class=\"pv\">' + (value ? esc(value) : '') + '<\/span><\/div>';\n }\n function C1(label, value) {\n return '<div class=\"pcell full\"><span class=\"pl\">' + label + '<\/span>' +\n '<span class=\"pv\">' + (value ? esc(value) : '') + '<\/span><\/div>';\n }\n function R() {\n return '<div class=\"prow\">' + Array.prototype.join.call(arguments, '') + '<\/div>';\n }\n\n function buildDoc() {\n const el = document.createElement('div');\n el.id = 'pdf-doc';\n\n const now = new Date();\n const dateStr = now.getFullYear() + '\u5e74' + (now.getMonth() + 1) + '\u6708' + now.getDate() + '\u65e5';\n const serial = 'VA' + dateStamp() + '-' + String(Math.floor(Math.random() * 9000) + 1000);\n\n const photoHTML = photoData\n ? '<img decoding=\"async\" src=\"' + photoData + '\" alt=\"photo\">'\n : '\u7167\u7247<br>PHOTO';\n\n const S1 =\n R(C('\u4e2d\u6587\u59d3\u540d', gv('cnName')), C('\u82f1\u6587\u59d3\u6c0f', gv('surname'))) +\n R(C('\u82f1\u6587\u540d\u5b57', gv('givenName')), C('\u6027\u522b', gv('gender'))) +\n R(C('\u51fa\u751f\u65e5\u671f', gv('birthDate')), C('\u51fa\u751f\u5730', gv('birthPlace'))) +\n R(C('\u56fd\u7c4d', gv('nationality')), C('\u8eab\u4efd\u8bc1\u53f7', gv('idNumber'))) +\n R(C('\u5a5a\u59fb\u72b6\u51b5', gv('marital')), C('\u6700\u9ad8\u5b66\u5386', gv('education')));\n\n const S2 =\n R(C('\u62a4\u7167\u53f7\u7801', gv('passportNo')), C('\u62a4\u7167\u7c7b\u578b', gv('passportType'))) +\n R(C('\u7b7e\u53d1\u65e5\u671f', gv('issueDate')), C('\u6709\u6548\u671f\u81f3', gv('expiryDate'))) +\n R(C('\u7b7e\u53d1\u673a\u5173', gv('issueAuthority')), C('\u7b7e\u53d1\u5730\u70b9', gv('issuePlace')));\n\n const S3 =\n R(C('\u624b\u673a\u53f7\u7801', gv('phone')), C('\u7535\u5b50\u90ae\u7bb1', gv('email'))) +\n R(C('\u73b0\u5c45\u4f4f\u57ce\u5e02', gv('city')), C('\u90ae\u653f\u7f16\u7801', gv('postcode'))) +\n R(C1('\u73b0\u5c45\u4f4f\u5730\u5740', gv('address')));\n\n const S4 =\n R(C('\u7b7e\u8bc1\u7c7b\u578b', gv('visaType')), C('\u7968\u6863', gv('entries'))) +\n R(C('\u76ee\u7684\u5730\u56fd\u5bb6\/\u5730\u533a', gv('destination')), C('\u5165\u5883\u53e3\u5cb8', gv('port'))) +\n R(C('\u9884\u8ba1\u5165\u5883\u65e5\u671f', gv('arrivalDate')), C('\u9884\u8ba1\u79bb\u5883\u65e5\u671f', gv('departureDate'))) +\n R(C('\u505c\u7559\u5929\u6570', gv('stayDays')), C('\u540c\u884c\u4eba\u6570', gv('companions'))) +\n R(C('\u9080\u8bf7\u4eba\/\u5355\u4f4d', gv('inviter')), C('\u9080\u8bf7\u4eba\u8eab\u4efd', gv('inviterPhone'))) +\n R(C1('\u9080\u8bf7\u4eba\u8054\u7cfb\u65b9\u5f0f', gv('stayAddress')));\n\n const S5 =\n R(C('\u5f53\u524d\u804c\u4e1a', gv('occupation')), C('\u5355\u4f4d\/\u5b66\u6821\u540d\u79f0', gv('employer'))) +\n R(C('\u804c\u52a1', gv('workPhone')), C('\u6708\u6536\u5165(\u5143)', gv('income'))) +\n R(C1('\u5355\u4f4d\/\u5b66\u6821\u5730\u5740', gv('workAddress')));\n\n \n el.innerHTML =\n '<div class=\"doc-head\">' +\n '<div>' +\n '<div class=\"doc-flag\">VISA APPLICATION<\/div>' +\n '<h1>\u7b7e\u8bc1\u7533\u8bf7\u8868<\/h1>' +\n '<p class=\"doc-sub\">Visa Application Form<\/p>' +\n '<\/div>' +\n '<div class=\"doc-photo\">' + photoHTML + '<\/div>' +\n '<\/div>' +\n\n '<div class=\"doc-meta\">' +\n '<span>\u7533\u8bf7\u7f16\u53f7\uff1a' + serial + '<\/span>' +\n '<span>\u586b\u8868\u65e5\u671f\uff1a' + dateStr + '<\/span>' +\n '<\/div>' +\n\n '<div class=\"sec\"><h3>\u4e00\u3001\u7533\u8bf7\u4eba\u57fa\u672c\u4fe1\u606f<\/h3>' + S1 + '<\/div>' +\n '<div class=\"sec\"><h3>\u4e8c\u3001\u62a4\u7167\u4fe1\u606f<\/h3>' + S2 + '<\/div>' +\n '<div class=\"sec\"><h3>\u4e09\u3001\u8054\u7cfb\u65b9\u5f0f<\/h3>' + S3 + '<\/div>' +\n '<div class=\"sec\"><h3>\u56db\u3001\u65c5\u884c\u4fe1\u606f<\/h3>' + S4 + '<\/div>' +\n '<div class=\"sec\"><h3>\u4e94\u3001\u804c\u4e1a\u4e0e\u6559\u80b2<\/h3>' + S5 + '<\/div>' +\n \n\n '<div class=\"declare\">' +\n '<b>\u58f0\u660e\uff1a<\/b>\u4ee5\u4e0a\u4fe1\u606f\u5747\u4e0d\u4f1a\u5b58\u6863\u7528\u4f5c\u4ed6\u7528\uff0c\u5206\u4eab\u4e4b\u524d\u8bf7\u4e09\u601d\uff0c\u672c\u6587\u4ef6\u4e0d\u5177\u5907\u4efb\u4f55\u6cd5\u5f8b\u6548\u529b\uff0c\u4ec5\u4f9b\u5a31\u4e50' +\n '<\/div>' +\n\n '<div class=\"sign\">' +\n '<div class=\"sign-item\"><span>\u7533\u8bf7\u4eba\u7b7e\u540d\uff1a<\/span><i><\/i><\/div>' +\n '<div class=\"sign-item\"><span>\u65e5\u671f\uff1a<\/span><i><\/i><\/div>' +\n '<\/div>' +\n\n '<div class=\"doc-foot\">\u672c\u8868\u683c\u7531\u7533\u8bf7\u4eba\u5728\u7ebf\u586b\u5199\u751f\u6210 \u00b7 ' + serial + '<\/div>';\n\n return el;\n }\n\n \/* ---------------- \u5bfc\u51fa PDF ---------------- *\/\n\n async function exportPDF() {\n if (!validateForm()) return;\n\n if (typeof html2canvas === 'undefined' || !window.jspdf) {\n toast('PDF \u7ec4\u4ef6\u672a\u52a0\u8f7d\u6210\u529f\uff0c\u8bf7\u68c0\u67e5\u7f51\u7edc\u540e\u5237\u65b0\u9875\u9762\u91cd\u8bd5');\n return;\n }\n\n const originalHTML = exportBtn.innerHTML;\n exportBtn.disabled = true;\n exportBtn.innerHTML = '<span class=\"spinner\"><\/span>\u6b63\u5728\u751f\u6210 PDF\u2026';\n\n let docEl = null;\n\n try {\n docEl = buildDoc();\n document.body.appendChild(docEl);\n\n \/\/ \u7b49\u5f85\u5e03\u5c40\u4e0e\u56fe\u7247\u52a0\u8f7d\n await new Promise(r => requestAnimationFrame(() => setTimeout(r, 80)));\n const imgs = Array.from(docEl.querySelectorAll('img'));\n await Promise.all(imgs.map(img => img.complete\n ? Promise.resolve()\n : new Promise(res => { img.onload = img.onerror = res; })\n ));\n\n const canvas = await html2canvas(docEl, {\n scale: 2,\n backgroundColor: '#ffffff',\n useCORS: true,\n logging: false\n });\n\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n const pageW = pdf.internal.pageSize.getWidth(); \/\/ 210\n const pageH = pdf.internal.pageSize.getHeight(); \/\/ 297\n const imgW = pageW;\n const imgH = canvas.height * pageW \/ canvas.width;\n const imgData = canvas.toDataURL('image\/jpeg', 0.93);\n\n \/\/ \u9996\u9875\n pdf.addImage(imgData, 'JPEG', 0, 0, imgW, imgH);\n\n \/\/ \u82e5\u5185\u5bb9\u8d85\u8fc7\u4e00\u9875\uff0c\u7ee7\u7eed\u5206\u9875\u7ed8\u5236\n let remain = imgH - pageH;\n let offsetY = 0;\n while (remain > 1) {\n offsetY -= pageH;\n pdf.addPage();\n pdf.addImage(imgData, 'JPEG', 0, offsetY, imgW, imgH);\n remain -= pageH;\n }\n\n const safeName = (gv('cnName') || gv('surname') || '\u7533\u8bf7\u4eba')\n .replace(\/[\\\\\/:*?\"<>|\\s]\/g, '');\n pdf.save('\u7b7e\u8bc1\u7533\u8bf7\u8868_' + safeName + '_' + dateStamp() + '.pdf');\n\n toast('\u2705 PDF \u5df2\u751f\u6210\uff0c\u8bf7\u67e5\u770b\u6d4f\u89c8\u5668\u4e0b\u8f7d');\n } catch (err) {\n console.error(err);\n toast('\u751f\u6210\u5931\u8d25\uff1a' + (err && err.message ? err.message : '\u8bf7\u91cd\u8bd5'));\n } finally {\n if (docEl && docEl.parentNode) docEl.parentNode.removeChild(docEl);\n exportBtn.disabled = false;\n exportBtn.innerHTML = originalHTML;\n }\n }\n\n \/* ---------------- \u91cd\u7f6e ---------------- *\/\n\n resetBtn.addEventListener('click', () => {\n if (!confirm('\u786e\u5b9a\u8981\u6e05\u7a7a\u6240\u6709\u5df2\u586b\u5199\u7684\u5185\u5bb9\u5417\uff1f')) return;\n form.reset();\n photoData = '';\n photoBox.innerHTML = '<span>\uff0b \u4e0a\u4f20\u7167\u7247<\/span>';\n form.querySelectorAll('.err').forEach(el => el.classList.remove('err'));\n window.scrollTo({ top: 0, behavior: 'smooth' });\n toast('\u5df2\u6e05\u7a7a\u8868\u5355');\n });\n\n exportBtn.addEventListener('click', exportPDF);\n\n \/\/ \u8868\u5355\u5185\u56de\u8f66\u4e0d\u63d0\u4ea4\n form.addEventListener('submit', e => e.preventDefault());\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6ce8\u610f\uff01\uff01\uff01\u672c\u7f51\u9875\u53ea\u662f\u5904\u4e8e\u5a31\u4e50\u76ee\u7684\u5236\u4f5c\uff0c\u7531\u6b64\u4e0b\u8f7d\u7684pdf\u5206\u4eab\u524d\u8bf7\u4e09\u601d\uff0c\u672c\u754c\u9762\u751f\u6210\u7684\u4efb\u4f55\u6587\u4ef6\u4e0d\u5177\u6709\u6cd5\u5f8b\u6548\u529b\uff01\uff01\uff01 \u7b7e\u8bc1\u7533\u8bf7\u4fe1\u606f\u8868 \u00b7 …<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-173","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meowshop.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=173"}],"version-history":[{"count":1,"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions\/174"}],"wp:attachment":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":173,"date":"2026-10-16T02:58:07","date_gmt":"2026-10-15T18:58:07","guid":{"rendered":"https:\/\/meowshop.top\/?page_id=173"},"modified":"2026-10-16T02:58:07","modified_gmt":"2026-10-15T18:58:07","slug":"bao%e7%ad%be%e8%af%81%e7%94%b3%e8%af%b7","status":"publish","type":"page","link":"https:\/\/meowshop.top\/?page_id=173","title":{"rendered":"BAO\u7b7e\u8bc1\u7533\u8bf7"},"content":{"rendered":"\n

\u6ce8\u610f\uff01\uff01\uff01\u672c\u7f51\u9875\u53ea\u662f\u5904\u4e8e\u5a31\u4e50\u76ee\u7684\u5236\u4f5c\uff0c\u7531\u6b64\u4e0b\u8f7d\u7684pdf\u5206\u4eab\u524d\u8bf7\u4e09\u601d\uff0c\u672c\u754c\u9762\u751f\u6210\u7684\u4efb\u4f55\u6587\u4ef6\u4e0d\u5177\u6709\u6cd5\u5f8b\u6548\u529b\uff01\uff01\uff01<\/p>\n\n\n\n\n\n\n\n\n\u7b7e\u8bc1\u7533\u8bf7\u4fe1\u606f\u8868 \u00b7 \u5728\u7ebf\u586b\u5199<\/title>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<style>\n :root{\n --blue:#2563eb; --blue-l:#eff6ff; --ink:#0f172a; --muted:#64748b;\n --line:#e2e8f0; --card:#ffffff; --bg:#f1f5f9; --radius:14px;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",sans-serif;\n background:var(--bg); color:var(--ink); line-height:1.5;\n -webkit-font-smoothing:antialiased;\n }\n\n \/* ---------- \u9876\u90e8 ---------- *\/\n .app-header{\n background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);\n color:#fff; padding:30px 24px 60px;\n }\n .app-header .inner{\n max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap;\n }\n .logo{\n width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.18);\n display:grid;place-items:center;font-size:27px;\n border:1px solid rgba(255,255,255,.32); flex:none;\n }\n .app-header h1{margin:0;font-size:22px;letter-spacing:.5px;}\n .app-header p{margin:4px 0 0;font-size:13px;opacity:.85;}\n\n \/* ---------- \u4e3b\u4f53 ---------- *\/\n .container{max-width:1080px;margin:-38px auto 0;padding:0 24px 130px;}\n .card{\n background:var(--card);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;\n border:1px solid rgba(226,232,240,.9);\n box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -18px rgba(15,23,42,.35);\n }\n .card h2{\n display:flex;align-items:center;gap:10px;font-size:15px;margin:0 0 18px;font-weight:700;color:#0f172a;\n }\n .card h2 .num{\n width:24px;height:24px;border-radius:7px;background:var(--blue-l);color:var(--blue);\n display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;\n }\n\n .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}\n .grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}\n .span2{grid-column:span 2;}\n @media(max-width:760px){\n .grid,.grid.three{grid-template-columns:1fr;}\n .span2{grid-column:span 1;}\n }\n\n .field{display:flex;flex-direction:column;gap:6px;min-width:0;}\n .field > label{font-size:12.5px;color:#334155;font-weight:600;}\n .field > label .req{color:#ef4444;margin-left:2px;}\n .field input[type=text],\n .field input[type=date],\n .field input[type=email],\n .field input[type=tel],\n .field input[type=number],\n .field select,\n .field textarea{\n width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;\n font-size:14px;background:#fff;color:var(--ink);font-family:inherit;\n transition:border-color .15s, box-shadow .15s;outline:none;\n }\n .field input:focus,.field select:focus,.field textarea:focus{\n border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.14);\n }\n .field input.err,.field select.err{border-color:#f87171;background:#fef2f2;}\n .field textarea{resize:vertical;min-height:76px;}\n .field select{appearance:none;background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'\/><\/svg>\");\n background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}\n\n \/* \u5355\u9009\u6309\u94ae\u7ec4 *\/\n .radios{display:flex;gap:8px;flex-wrap:wrap;padding-top:1px;}\n .radios > label{\n display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--line);\n border-radius:10px;font-size:13.5px;font-weight:500;color:#334155;background:#fff;\n cursor:pointer;transition:.15s;user-select:none;\n }\n .radios > label input{display:none;}\n .radios > label:hover{border-color:#bfdbfe;}\n .radios > label:has(input:checked){\n border-color:var(--blue);background:var(--blue-l);color:var(--blue);font-weight:700;\n }\n\n \/* \u7167\u7247\u4e0a\u4f20 *\/\n .photo-row{display:flex;gap:14px;align-items:center;}\n .photo-box{\n width:92px;height:120px;border:1.5px dashed #cbd5e1;border-radius:10px;\n display:grid;place-items:center;cursor:pointer;background:#f8fafc;\n overflow:hidden;font-size:11.5px;color:#94a3b8;text-align:center;\n transition:.15s;flex:none;line-height:1.4;padding:4px;\n }\n .photo-box:hover{border-color:#93c5fd;background:var(--blue-l);color:var(--blue);}\n .photo-box img{width:100%;height:100%;object-fit:cover;display:block;}\n .photo-tip{font-size:11.5px;color:#94a3b8;line-height:1.8;}\n\n \/* ---------- \u5e95\u90e8\u64cd\u4f5c\u680f ---------- *\/\n .action-bar{\n position:fixed;left:0;right:0;bottom:0;z-index:60;\n background:rgba(255,255,255,.92);backdrop-filter:blur(12px);\n border-top:1px solid var(--line);padding:12px 24px;\n display:flex;justify-content:center;gap:12px;\n }\n .btn{\n border:none;border-radius:11px;padding:12px 26px;font-size:14.5px;font-weight:700;\n cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;\n transition:transform .18s, box-shadow .18s, background .18s;white-space:nowrap;\n }\n .btn-primary{\n background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;\n box-shadow:0 10px 22px -10px rgba(37,99,235,.95);\n }\n .btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(37,99,235,1);}\n .btn-primary:disabled{opacity:.65;cursor:not-allowed;}\n .btn-ghost{background:#fff;color:#475569;border:1px solid var(--line);}\n .btn-ghost:hover{background:#f8fafc;}\n\n .spinner{\n width:15px;height:15px;border-radius:50%;\n border:2px solid rgba(255,255,255,.4);border-top-color:#fff;\n animation:spin .7s linear infinite;\n }\n @keyframes spin{to{transform:rotate(360deg);}}\n\n \/* ---------- \u63d0\u793a\u6761 ---------- *\/\n .toast{\n position:fixed;left:50%;bottom:100px;transform:translate(-50%,16px);\n background:#0f172a;color:#fff;padding:11px 20px;border-radius:10px;\n font-size:13.5px;opacity:0;pointer-events:none;transition:.28s;z-index:300;\n max-width:86vw;text-align:center;\n }\n .toast.show{opacity:1;transform:translate(-50%,0);}\n\n .footnote{text-align:center;font-size:12px;color:#94a3b8;margin-top:6px;}\n\n \/* =========================================================\n PDF \u6587\u6863\u6837\u5f0f\uff08\u79bb\u5c4f\u6e32\u67d3\u7528\uff09\n ========================================================= *\/\n #pdf-doc{\n position:fixed; left:-10000px; top:0;\n width:794px; padding:48px 52px 44px;\n background:#ffffff; color:#0f172a;\n font-family:\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"Heiti SC\",sans-serif;\n line-height:1.5;\n }\n #pdf-doc .doc-head{\n display:flex;justify-content:space-between;align-items:flex-start;\n border-bottom:3px solid #2563eb;padding-bottom:16px;\n }\n #pdf-doc .doc-flag{\n font-size:11px;letter-spacing:3px;color:#2563eb;font-weight:800;margin-bottom:6px;\n }\n #pdf-doc h1{margin:0;font-size:26px;letter-spacing:5px;font-weight:800;}\n #pdf-doc .doc-sub{margin:5px 0 0;font-size:12px;color:#94a3b8;letter-spacing:1.2px;}\n #pdf-doc .doc-photo{\n width:96px;height:126px;border:1px solid #cbd5e1;border-radius:4px;\n display:grid;place-items:center;font-size:11px;color:#94a3b8;text-align:center;\n overflow:hidden;flex:none;background:#f8fafc;line-height:1.5;\n }\n #pdf-doc .doc-photo img{width:100%;height:100%;object-fit:cover;display:block;}\n #pdf-doc .doc-meta{\n display:flex;justify-content:space-between;\n font-size:11.5px;color:#64748b;margin:10px 0 20px;\n }\n #pdf-doc .sec{margin-bottom:16px;}\n #pdf-doc .sec h3{\n font-size:13px;margin:0 0 6px;padding-left:10px;\n border-left:3px solid #2563eb;color:#1e293b;font-weight:700;line-height:1.3;\n }\n #pdf-doc .prow{display:flex;gap:16px;padding:4px 0;}\n #pdf-doc .pcell{flex:1 1 0;display:flex;gap:8px;align-items:baseline;min-width:0;}\n #pdf-doc .pcell.full{flex:1 1 100%;}\n #pdf-doc .pl{font-size:11.5px;color:#64748b;white-space:nowrap;flex:none;line-height:1.7;}\n #pdf-doc .pv{\n font-size:12.5px;font-weight:600;color:#0f172a;flex:1;min-width:0;\n min-height:18px;border-bottom:1px dashed #cbd5e1;padding-bottom:1px;\n word-break:break-word;line-height:1.7;\n }\n #pdf-doc .declare{\n margin-top:20px;border:1px solid #e2e8f0;border-radius:8px;\n padding:13px 16px;background:#f8fafc;font-size:11.5px;color:#475569;line-height:1.9;\n }\n #pdf-doc .declare b{color:#1e293b;}\n #pdf-doc .sign{display:flex;gap:48px;margin-top:32px;font-size:12.5px;color:#334155;}\n #pdf-doc .sign-item{flex:1;display:flex;align-items:flex-end;gap:6px;}\n #pdf-doc .sign-item i{flex:1;display:block;height:24px;border-bottom:1px solid #94a3b8;}\n #pdf-doc .doc-foot{\n margin-top:26px;padding-top:12px;border-top:1px solid #e2e8f0;\n font-size:10.5px;color:#94a3b8;text-align:center;letter-spacing:.5px;\n }\n<\/style>\n<\/head>\n<body>\n\n<header class=\"app-header\">\n <div class=\"inner\">\n <div class=\"logo\">\ud83d\udec2<\/div>\n <div>\n <h1>BAO\u5c55\u4f1a\u7b7e\u8bc1\u7533\u8bf7\u4fe1\u606f\u8868<\/h1>\n <p>Visa Application Form \u00b7 \u672c\u5730\u586b\u5199\uff0c\u6570\u636e\u4e0d\u4f1a\u4e0a\u4f20<\/p>\n <\/div>\n <\/div>\n<\/header>\n\n<main class=\"container\">\n <form id=\"visaForm\" novalidate autocomplete=\"off\">\n\n \n <section class=\"card\">\n <h2><span class=\"num\">1<\/span>\u7533\u8bf7\u4eba\u57fa\u672c\u4fe1\u606f<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u4e2d\u6587\u59d3\u540d<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"cnName\" data-required placeholder=\"\u8bf7\u8f93\u5165\u4e2d\u6587\u59d3\u540d\uff08\u8bf7\u4f7f\u7528CN\u4ee3\u66ff\uff09\">\n <\/div>\n <div class=\"field\">\n <label>\u82f1\u6587\u59d3\u6c0f\uff08\u62fc\u97f3\uff09<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"surname\" data-required placeholder=\"\u5982\uff1aZHANG\">\n <\/div>\n <div class=\"field\">\n <label>\u82f1\u6587\u540d\u5b57\uff08\u62fc\u97f3\uff09<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"givenName\" data-required placeholder=\"\u5982\uff1aSAN\">\n <\/div>\n <div class=\"field\">\n <label>\u6027\u522b<\/label>\n <div class=\"radios\">\n <label><input type=\"radio\" name=\"gender\" value=\"\u7537\"><span>\u7537<\/span><\/label>\n <label><input type=\"radio\" name=\"gender\" value=\"\u5973\"><span>\u5973<\/span><\/label>\n\t <label><input type=\"radio\" name=\"gender\" value=\"\u5176\u4ed6\"><span>\u5176\u4ed6<\/span><\/label>\n\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>\u51fa\u751f\u65e5\u671f<\/label>\n <input type=\"date\" name=\"birthDate\">\n <\/div>\n <div class=\"field\">\n <label>\u51fa\u751f\u5730<\/label>\n <input type=\"text\" name=\"birthPlace\" placeholder=\"\u5982\uff1a\u5317\u4eac\u5e02\">\n <\/div>\n <div class=\"field\">\n <label>\u56fd\u7c4d<\/label>\n <select name=\"nationality\">\n <option value=\"\u4e2d\u56fd\">\u4e2d\u56fd<\/option>\n <option value=\"\u5176\u4ed6\">\u5176\u4ed6<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u8eab\u4efd\u8bc1\u53f7\uff08\u968f\u4fbf\u7f16\uff0c\u522b\u586b\u771f\u7684\uff09<\/label>\n <input type=\"text\" name=\"idNumber\" placeholder=\"\u52ff\u586b\u5199\u771f\u5b9e\u4fe1\u606f\uff01\">\n <\/div>\n <div class=\"field\">\n <label>\u5a5a\u59fb\u72b6\u51b5<\/label>\n <select name=\"marital\">\n <option value=\"\">\u8bf7\u9009\u62e9<\/option>\n <option value=\"\u672a\u5a5a\">\u672a\u5a5a<\/option>\n <option value=\"\u5df2\u5a5a\">\u5df2\u5a5a<\/option>\n <option value=\"\u79bb\u5f02\">\u79bb\u5f02<\/option>\n <option value=\"\u4e27\u5076\">\u4e27\u5076<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u6700\u9ad8\u5b66\u5386<\/label>\n <select name=\"education\">\n <option value=\"\">\u8bf7\u9009\u62e9<\/option>\n <option value=\"\u9ad8\u4e2d\u53ca\u4ee5\u4e0b\">\u9ad8\u4e2d\u53ca\u4ee5\u4e0b<\/option>\n <option value=\"\u5927\u4e13\">\u5927\u4e13<\/option>\n <option value=\"\u672c\u79d1\">\u672c\u79d1<\/option>\n <option value=\"\u7855\u58eb\">\u7855\u58eb<\/option>\n <option value=\"\u535a\u58eb\">\u535a\u58eb<\/option>\n <\/select>\n <\/div>\n <div class=\"field span2\">\n <label>\u8bc1\u4ef6\u7167<\/label>\n <div class=\"photo-row\">\n <div class=\"photo-box\" id=\"photoBox\"><span>\uff0b \u4e0a\u4f20\u7167\u7247<\/span><\/div>\n <div class=\"photo-tip\">\n \u652f\u6301 JPG \/ PNG \u683c\u5f0f<br>\n \u5efa\u8bae\u5c3a\u5bf8 35\u00d745mm<br>\n \u6587\u4ef6\u4e0d\u8d85\u8fc7 5MB\n <\/div>\n <\/div>\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" hidden>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">2<\/span>\u62a4\u7167\u4fe1\u606f<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u62a4\u7167\u53f7\u7801<span class=\"req\">*<\/span><\/label>\n <input type=\"text\" name=\"passportNo\" data-required placeholder=\"\u4e71\u7f16\uff0c\u522b\u586b\u771f\u7684\">\n <\/div>\n <div class=\"field\">\n <label>\u62a4\u7167\u7c7b\u578b<\/label>\n <select name=\"passportType\">\n <option value=\"\u666e\u901a\u62a4\u7167\">\u666e\u901a\u62a4\u7167<\/option>\n <option value=\"\u516c\u52a1\u62a4\u7167\">\u516c\u52a1\u62a4\u7167<\/option>\n <option value=\"\u5916\u4ea4\u62a4\u7167\">\u5916\u4ea4\u62a4\u7167<\/option>\n <option value=\"\u56e0\u516c\u666e\u901a\u62a4\u7167\">\u56e0\u516c\u666e\u901a\u62a4\u7167<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u7b7e\u53d1\u65e5\u671f<\/label>\n <input type=\"date\" name=\"issueDate\">\n <\/div>\n <div class=\"field\">\n <label>\u6709\u6548\u671f\u81f3<\/label>\n <input type=\"date\" name=\"expiryDate\">\n <\/div>\n <div class=\"field\">\n <label>\u5c55\u4f1a\u4e3b\u529e<\/label>\n <input type=\"text\" name=\"issueAuthority\" placeholder=\"\u5982\uff1a\u5e7f\u5ddebao\u00b7\u7ca4\u8fd1\u8fdc\u6765\u7ec4\u59d4\u4f1a\">\n <\/div>\n <div class=\"field\">\n <label>\u5730\u70b9<\/label>\n <input type=\"text\" name=\"issuePlace\" placeholder=\"\u5982\uff1a\u5317\u4eac\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">3<\/span>\u8054\u7cfb\u65b9\u5f0f<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u624b\u673a\u53f7\u7801<span class=\"req\">*<\/span><\/label>\n <input type=\"tel\" name=\"phone\" data-required placeholder=\"\u5982\uff1a13800138000\">\n <\/div>\n <div class=\"field\">\n <label>\u7535\u5b50\u90ae\u7bb1<\/label>\n <input type=\"email\" name=\"email\" placeholder=\"\u5982\uff1aexample@qq.com\">\n <\/div>\n <div class=\"field\">\n <label>\u73b0\u5c45\u4f4f\u57ce\u5e02<\/label>\n <input type=\"text\" name=\"city\" placeholder=\"\u5982\uff1a\u4e0a\u6d77\u5e02\">\n <\/div>\n <div class=\"field\">\n <label>\u90ae\u653f\u7f16\u7801<\/label>\n <input type=\"text\" name=\"postcode\" placeholder=\"\u4e0d\u77e5\u9053\u5c31\u4e71\u586b\">\n <\/div>\n <div class=\"field span2\">\n <label>\u73b0\u5c45\u4f4f\u5730\u5740<\/label>\n <input type=\"text\" name=\"address\" placeholder=\"\u8bf7\u4f7f\u7528\u9e21\u7a9d\u6258\u65af\u7684\u4f4f\u5740\uff0c\u522b\u586b\u771f\u7684\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">4<\/span>\u65c5\u884c\u4fe1\u606f<\/h2>\n <div class=\"grid three\">\n <div class=\"field\">\n <label>\u7b7e\u8bc1\u7c7b\u578b<\/label>\n <select name=\"visaType\">\n <option value=\"\u65c5\u6e38\u7b7e\u8bc1\uff08\u6e38\u5ba2\uff09\">\u65c5\u6e38\u7b7e\u8bc1<\/option>\n <option value=\"\u5546\u52a1\u7b7e\u8bc1\uff08\u5c55\u5546\uff09\">\u5546\u52a1\u7b7e\u8bc1<\/option>\n <option value=\"\u63a2\u4eb2\u8bbf\u53cb\u7b7e\u8bc1\uff08\u81ea\u7531\u884c\uff09\">\u63a2\u4eb2\u8bbf\u53cb\u7b7e\u8bc1<\/option>\n <option value=\"\u7559\u5b66\u7b7e\u8bc1(\u5b66\u751fcoser)\">\u7559\u5b66\u7b7e\u8bc1<\/option>\n <option value=\"\u5de5\u4f5c\u7b7e\u8bc1(staff)\">\u5de5\u4f5c\u7b7e\u8bc1<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u7968\u6863\u4fe1\u606f<\/label>\n <select name=\"entries\">\n <option value=\"\u666e\u7968\">\u666e\u7968<\/option>\n <option value=\"VIP\u7968\">VIP\u7968<\/option>\n <option value=\"\u5176\u4ed6\">\u5176\u4ed6<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label>\u76ee\u7684\u5730\u5c55\u4f1a<\/label>\n <input type=\"text\" name=\"destination\" placeholder=\"\u5982\uff1a\u5e7f\u5ddebao\u7ca4\u8fd1\u8fdc\u67652.0\">\n <\/div>\n <div class=\"field\">\n <label>\u9884\u8ba1\u5165\u5883\u65e5\u671f<\/label>\n <input type=\"date\" name=\"arrivalDate\" id=\"arrivalDate\">\n <\/div>\n <div class=\"field\">\n <label>\u9884\u8ba1\u79bb\u5883\u65e5\u671f<\/label>\n <input type=\"date\" name=\"departureDate\" id=\"departureDate\">\n <\/div>\n <div class=\"field\">\n <label>\u505c\u7559\u5929\u6570<\/label>\n <input type=\"number\" name=\"stayDays\" min=\"1\" placeholder=\"\u81ea\u52a8\u8ba1\u7b97 \/ \u53ef\u4fee\u6539\">\n <\/div>\n <div class=\"field\">\n <label>\u5165\u5883\u4f4d\u7f6e<\/label>\n <input type=\"text\" name=\"port\" placeholder=\"\u5982\uff1a\u5e7f\u5dde\u7948\u798f\u4f1a\u5c55\u4e2d\u5fc3\">\n <\/div>\n <div class=\"field\">\n <label>\u540c\u884c\u4eba\u6570<\/label>\n <input type=\"number\" name=\"companions\" min=\"0\" value=\"0\">\n <\/div>\n <div class=\"field\">\n <label>\u9080\u8bf7\u4eba \/ \u5355\u4f4d<\/label>\n <input type=\"text\" name=\"inviter\" placeholder=\"\u65e0\u5219\u586b\u300c\u65e0\u300d\">\n <\/div>\n <div class=\"field span2\">\n <label>\u9080\u8bf7\u4eba\u8eab\u4efd<\/label>\n <input type=\"text\" name=\"stayAddress\" placeholder=\"\u6e38\u5ba2\u3001staff\u3001\u5609\u5bbe\u7b49\">\n <\/div>\n <div class=\"field\">\n <label>\u9080\u8bf7\u4eba\u8054\u7cfb\u65b9\u5f0f<\/label>\n <input type=\"tel\" name=\"inviterPhone\" placeholder=\"\u4e0d\u60f3\u900f\u9732\u5c31\u522b\u586b\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2><span class=\"num\">5<\/span>\u804c\u4e1a\u4e0e\u6559\u80b2<\/h2>\n <div class=\"grid\">\n <div class=\"field\">\n <label>\u5f53\u524d\u804c\u4e1a<\/label>\n <input type=\"text\" name=\"occupation\" placeholder=\"\u5982\uff1a\u8001\u5e08 \/ \u5b66\u751f\">\n <\/div>\n <div class=\"field\">\n <label>\u5de5\u4f5c\u5355\u4f4d \/ \u5b66\u6821\u540d\u79f0<\/label>\n <input type=\"text\" name=\"employer\" placeholder=\"\u5982\uff1a\u5343\u5e74\u79d1\u6280\u5b66\u9662\">\n <\/div>\n <div class=\"field\">\n <label>\u804c\u52a1<\/label>\n <input type=\"tel\" name=\"workPhone\" placeholder=\"\u81ea\u5df1\u7f16\">\n <\/div>\n <div class=\"field\">\n <label>\u6708\u6536\u5165\uff08\u5143\uff09<\/label>\n <input type=\"number\" name=\"income\" min=\"0\" placeholder=\"\u5982\uff1a15000\">\n <\/div>\n <div class=\"field span2\">\n <label>\u5355\u4f4d \/ \u5b66\u6821\u5730\u5740<\/label>\n <input type=\"text\" name=\"workAddress\" placeholder=\"\u586b\u9e21\u7a9d\u6258\u65af\u7684\u5730\u5740\">\n <\/div>\n <\/div>\n <\/section>\n\n \n\n <p class=\"footnote\">\ud83d\udd12 \u6240\u6709\u4fe1\u606f\u4ec5\u5728\u60a8\u7684\u6d4f\u89c8\u5668\u672c\u5730\u5904\u7406\uff0c\u4e0d\u4f1a\u4e0a\u4f20\u81f3\u4efb\u4f55\u670d\u52a1\u5668\u3002<\/p>\n <\/form>\n<\/main>\n\n\n<div class=\"action-bar\">\n <button type=\"button\" class=\"btn btn-ghost\" id=\"resetBtn\">\u6e05\u7a7a\u91cd\u586b<\/button>\n <button type=\"button\" class=\"btn btn-primary\" id=\"exportBtn\">\ud83d\udcc4 \u751f\u6210\u5e76\u4e0b\u8f7d PDF<\/button>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n(function () {\n 'use strict';\n\n const form = document.getElementById('visaForm');\n const exportBtn = document.getElementById('exportBtn');\n const resetBtn = document.getElementById('resetBtn');\n const photoBox = document.getElementById('photoBox');\n const photoInput = document.getElementById('photoInput');\n const toastEl = document.getElementById('toast');\n\n let photoData = '';\n let toastTimer = null;\n\n \/* ---------------- \u5de5\u5177\u51fd\u6570 ---------------- *\/\n\n function toast(msg) {\n toastEl.textContent = msg;\n toastEl.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(() => toastEl.classList.remove('show'), 2800);\n }\n\n function esc(str) {\n return String(str == null ? '' : str).replace(\/[&<>\"']\/g, c => ({\n '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": '''\n }[c]));\n }\n\n \/** \u8bfb\u53d6\u8868\u5355\u503c *\/\n function gv(name) {\n const radio = form.querySelector('input[type=radio][name=\"' + name + '\"]');\n if (radio) {\n const checked = form.querySelector('input[type=radio][name=\"' + name + '\"]:checked');\n return checked ? checked.value : '';\n }\n const el = form.elements[name];\n if (!el) return '';\n return (el.value || '').trim();\n }\n\n function dateStamp() {\n const d = new Date();\n return d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');\n }\n\n \/* ---------------- \u7167\u7247\u4e0a\u4f20 ---------------- *\/\n\n photoBox.addEventListener('click', () => photoInput.click());\n\n photoInput.addEventListener('change', e => {\n const file = e.target.files && e.target.files[0];\n if (!file) return;\n if (!\/^image\\\/\/.test(file.type)) {\n toast('\u8bf7\u9009\u62e9\u56fe\u7247\u6587\u4ef6');\n return;\n }\n if (file.size > 5 * 1024 * 1024) {\n toast('\u56fe\u7247\u4e0d\u80fd\u8d85\u8fc7 5MB');\n return;\n }\n const reader = new FileReader();\n reader.onload = ev => {\n photoData = ev.target.result;\n photoBox.innerHTML = '<img decoding=\"async\" src=\"' + photoData + '\" alt=\"\u8bc1\u4ef6\u7167\">';\n };\n reader.readAsDataURL(file);\n });\n\n \/* ---------------- \u505c\u7559\u5929\u6570\u81ea\u52a8\u8ba1\u7b97 ---------------- *\/\n\n function calcDays() {\n const a = form.elements['arrivalDate'].value;\n const b = form.elements['departureDate'].value;\n if (!a || !b) return;\n const diff = Math.round((new Date(b) - new Date(a)) \/ 86400000);\n if (diff >= 0) form.elements['stayDays'].value = diff + 1;\n }\n document.getElementById('arrivalDate').addEventListener('change', calcDays);\n document.getElementById('departureDate').addEventListener('change', calcDays);\n\n \/* ---------------- \u8868\u5355\u6821\u9a8c ---------------- *\/\n\n function validateForm() {\n let ok = true;\n let firstErr = null;\n\n form.querySelectorAll('[data-required]').forEach(el => {\n el.classList.remove('err');\n if (!el.value.trim()) {\n el.classList.add('err');\n ok = false;\n if (!firstErr) firstErr = el;\n }\n });\n\n \/\/ \u90ae\u7bb1\u683c\u5f0f\n ['email', 'ecEmail'].forEach(n => {\n const el = form.elements[n];\n if (el && el.value.trim() && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(el.value.trim())) {\n el.classList.add('err');\n ok = false;\n if (!firstErr) firstErr = el;\n }\n });\n\n if (!ok) {\n toast('\u8bf7\u68c0\u67e5\u6807\u7ea2\u7684\u5fc5\u586b\u9879 \/ \u683c\u5f0f\u662f\u5426\u6b63\u786e');\n if (firstErr) {\n firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });\n setTimeout(() => firstErr.focus({ preventScroll: true }), 320);\n }\n return false;\n }\n return true;\n }\n\n form.addEventListener('input', e => {\n if (e.target.classList && e.target.classList.contains('err')) {\n e.target.classList.remove('err');\n }\n });\n\n \/* ---------------- \u6784\u5efa PDF \u6587\u6863\u7ed3\u6784 ---------------- *\/\n\n function C(label, value) {\n return '<div class=\"pcell\"><span class=\"pl\">' + label + '<\/span>' +\n '<span class=\"pv\">' + (value ? esc(value) : '') + '<\/span><\/div>';\n }\n function C1(label, value) {\n return '<div class=\"pcell full\"><span class=\"pl\">' + label + '<\/span>' +\n '<span class=\"pv\">' + (value ? esc(value) : '') + '<\/span><\/div>';\n }\n function R() {\n return '<div class=\"prow\">' + Array.prototype.join.call(arguments, '') + '<\/div>';\n }\n\n function buildDoc() {\n const el = document.createElement('div');\n el.id = 'pdf-doc';\n\n const now = new Date();\n const dateStr = now.getFullYear() + '\u5e74' + (now.getMonth() + 1) + '\u6708' + now.getDate() + '\u65e5';\n const serial = 'VA' + dateStamp() + '-' + String(Math.floor(Math.random() * 9000) + 1000);\n\n const photoHTML = photoData\n ? '<img decoding=\"async\" src=\"' + photoData + '\" alt=\"photo\">'\n : '\u7167\u7247<br>PHOTO';\n\n const S1 =\n R(C('\u4e2d\u6587\u59d3\u540d', gv('cnName')), C('\u82f1\u6587\u59d3\u6c0f', gv('surname'))) +\n R(C('\u82f1\u6587\u540d\u5b57', gv('givenName')), C('\u6027\u522b', gv('gender'))) +\n R(C('\u51fa\u751f\u65e5\u671f', gv('birthDate')), C('\u51fa\u751f\u5730', gv('birthPlace'))) +\n R(C('\u56fd\u7c4d', gv('nationality')), C('\u8eab\u4efd\u8bc1\u53f7', gv('idNumber'))) +\n R(C('\u5a5a\u59fb\u72b6\u51b5', gv('marital')), C('\u6700\u9ad8\u5b66\u5386', gv('education')));\n\n const S2 =\n R(C('\u62a4\u7167\u53f7\u7801', gv('passportNo')), C('\u62a4\u7167\u7c7b\u578b', gv('passportType'))) +\n R(C('\u7b7e\u53d1\u65e5\u671f', gv('issueDate')), C('\u6709\u6548\u671f\u81f3', gv('expiryDate'))) +\n R(C('\u7b7e\u53d1\u673a\u5173', gv('issueAuthority')), C('\u7b7e\u53d1\u5730\u70b9', gv('issuePlace')));\n\n const S3 =\n R(C('\u624b\u673a\u53f7\u7801', gv('phone')), C('\u7535\u5b50\u90ae\u7bb1', gv('email'))) +\n R(C('\u73b0\u5c45\u4f4f\u57ce\u5e02', gv('city')), C('\u90ae\u653f\u7f16\u7801', gv('postcode'))) +\n R(C1('\u73b0\u5c45\u4f4f\u5730\u5740', gv('address')));\n\n const S4 =\n R(C('\u7b7e\u8bc1\u7c7b\u578b', gv('visaType')), C('\u7968\u6863', gv('entries'))) +\n R(C('\u76ee\u7684\u5730\u56fd\u5bb6\/\u5730\u533a', gv('destination')), C('\u5165\u5883\u53e3\u5cb8', gv('port'))) +\n R(C('\u9884\u8ba1\u5165\u5883\u65e5\u671f', gv('arrivalDate')), C('\u9884\u8ba1\u79bb\u5883\u65e5\u671f', gv('departureDate'))) +\n R(C('\u505c\u7559\u5929\u6570', gv('stayDays')), C('\u540c\u884c\u4eba\u6570', gv('companions'))) +\n R(C('\u9080\u8bf7\u4eba\/\u5355\u4f4d', gv('inviter')), C('\u9080\u8bf7\u4eba\u8eab\u4efd', gv('inviterPhone'))) +\n R(C1('\u9080\u8bf7\u4eba\u8054\u7cfb\u65b9\u5f0f', gv('stayAddress')));\n\n const S5 =\n R(C('\u5f53\u524d\u804c\u4e1a', gv('occupation')), C('\u5355\u4f4d\/\u5b66\u6821\u540d\u79f0', gv('employer'))) +\n R(C('\u804c\u52a1', gv('workPhone')), C('\u6708\u6536\u5165(\u5143)', gv('income'))) +\n R(C1('\u5355\u4f4d\/\u5b66\u6821\u5730\u5740', gv('workAddress')));\n\n \n el.innerHTML =\n '<div class=\"doc-head\">' +\n '<div>' +\n '<div class=\"doc-flag\">VISA APPLICATION<\/div>' +\n '<h1>\u7b7e\u8bc1\u7533\u8bf7\u8868<\/h1>' +\n '<p class=\"doc-sub\">Visa Application Form<\/p>' +\n '<\/div>' +\n '<div class=\"doc-photo\">' + photoHTML + '<\/div>' +\n '<\/div>' +\n\n '<div class=\"doc-meta\">' +\n '<span>\u7533\u8bf7\u7f16\u53f7\uff1a' + serial + '<\/span>' +\n '<span>\u586b\u8868\u65e5\u671f\uff1a' + dateStr + '<\/span>' +\n '<\/div>' +\n\n '<div class=\"sec\"><h3>\u4e00\u3001\u7533\u8bf7\u4eba\u57fa\u672c\u4fe1\u606f<\/h3>' + S1 + '<\/div>' +\n '<div class=\"sec\"><h3>\u4e8c\u3001\u62a4\u7167\u4fe1\u606f<\/h3>' + S2 + '<\/div>' +\n '<div class=\"sec\"><h3>\u4e09\u3001\u8054\u7cfb\u65b9\u5f0f<\/h3>' + S3 + '<\/div>' +\n '<div class=\"sec\"><h3>\u56db\u3001\u65c5\u884c\u4fe1\u606f<\/h3>' + S4 + '<\/div>' +\n '<div class=\"sec\"><h3>\u4e94\u3001\u804c\u4e1a\u4e0e\u6559\u80b2<\/h3>' + S5 + '<\/div>' +\n \n\n '<div class=\"declare\">' +\n '<b>\u58f0\u660e\uff1a<\/b>\u4ee5\u4e0a\u4fe1\u606f\u5747\u4e0d\u4f1a\u5b58\u6863\u7528\u4f5c\u4ed6\u7528\uff0c\u5206\u4eab\u4e4b\u524d\u8bf7\u4e09\u601d\uff0c\u672c\u6587\u4ef6\u4e0d\u5177\u5907\u4efb\u4f55\u6cd5\u5f8b\u6548\u529b\uff0c\u4ec5\u4f9b\u5a31\u4e50' +\n '<\/div>' +\n\n '<div class=\"sign\">' +\n '<div class=\"sign-item\"><span>\u7533\u8bf7\u4eba\u7b7e\u540d\uff1a<\/span><i><\/i><\/div>' +\n '<div class=\"sign-item\"><span>\u65e5\u671f\uff1a<\/span><i><\/i><\/div>' +\n '<\/div>' +\n\n '<div class=\"doc-foot\">\u672c\u8868\u683c\u7531\u7533\u8bf7\u4eba\u5728\u7ebf\u586b\u5199\u751f\u6210 \u00b7 ' + serial + '<\/div>';\n\n return el;\n }\n\n \/* ---------------- \u5bfc\u51fa PDF ---------------- *\/\n\n async function exportPDF() {\n if (!validateForm()) return;\n\n if (typeof html2canvas === 'undefined' || !window.jspdf) {\n toast('PDF \u7ec4\u4ef6\u672a\u52a0\u8f7d\u6210\u529f\uff0c\u8bf7\u68c0\u67e5\u7f51\u7edc\u540e\u5237\u65b0\u9875\u9762\u91cd\u8bd5');\n return;\n }\n\n const originalHTML = exportBtn.innerHTML;\n exportBtn.disabled = true;\n exportBtn.innerHTML = '<span class=\"spinner\"><\/span>\u6b63\u5728\u751f\u6210 PDF\u2026';\n\n let docEl = null;\n\n try {\n docEl = buildDoc();\n document.body.appendChild(docEl);\n\n \/\/ \u7b49\u5f85\u5e03\u5c40\u4e0e\u56fe\u7247\u52a0\u8f7d\n await new Promise(r => requestAnimationFrame(() => setTimeout(r, 80)));\n const imgs = Array.from(docEl.querySelectorAll('img'));\n await Promise.all(imgs.map(img => img.complete\n ? Promise.resolve()\n : new Promise(res => { img.onload = img.onerror = res; })\n ));\n\n const canvas = await html2canvas(docEl, {\n scale: 2,\n backgroundColor: '#ffffff',\n useCORS: true,\n logging: false\n });\n\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n const pageW = pdf.internal.pageSize.getWidth(); \/\/ 210\n const pageH = pdf.internal.pageSize.getHeight(); \/\/ 297\n const imgW = pageW;\n const imgH = canvas.height * pageW \/ canvas.width;\n const imgData = canvas.toDataURL('image\/jpeg', 0.93);\n\n \/\/ \u9996\u9875\n pdf.addImage(imgData, 'JPEG', 0, 0, imgW, imgH);\n\n \/\/ \u82e5\u5185\u5bb9\u8d85\u8fc7\u4e00\u9875\uff0c\u7ee7\u7eed\u5206\u9875\u7ed8\u5236\n let remain = imgH - pageH;\n let offsetY = 0;\n while (remain > 1) {\n offsetY -= pageH;\n pdf.addPage();\n pdf.addImage(imgData, 'JPEG', 0, offsetY, imgW, imgH);\n remain -= pageH;\n }\n\n const safeName = (gv('cnName') || gv('surname') || '\u7533\u8bf7\u4eba')\n .replace(\/[\\\\\/:*?\"<>|\\s]\/g, '');\n pdf.save('\u7b7e\u8bc1\u7533\u8bf7\u8868_' + safeName + '_' + dateStamp() + '.pdf');\n\n toast('\u2705 PDF \u5df2\u751f\u6210\uff0c\u8bf7\u67e5\u770b\u6d4f\u89c8\u5668\u4e0b\u8f7d');\n } catch (err) {\n console.error(err);\n toast('\u751f\u6210\u5931\u8d25\uff1a' + (err && err.message ? err.message : '\u8bf7\u91cd\u8bd5'));\n } finally {\n if (docEl && docEl.parentNode) docEl.parentNode.removeChild(docEl);\n exportBtn.disabled = false;\n exportBtn.innerHTML = originalHTML;\n }\n }\n\n \/* ---------------- \u91cd\u7f6e ---------------- *\/\n\n resetBtn.addEventListener('click', () => {\n if (!confirm('\u786e\u5b9a\u8981\u6e05\u7a7a\u6240\u6709\u5df2\u586b\u5199\u7684\u5185\u5bb9\u5417\uff1f')) return;\n form.reset();\n photoData = '';\n photoBox.innerHTML = '<span>\uff0b \u4e0a\u4f20\u7167\u7247<\/span>';\n form.querySelectorAll('.err').forEach(el => el.classList.remove('err'));\n window.scrollTo({ top: 0, behavior: 'smooth' });\n toast('\u5df2\u6e05\u7a7a\u8868\u5355');\n });\n\n exportBtn.addEventListener('click', exportPDF);\n\n \/\/ \u8868\u5355\u5185\u56de\u8f66\u4e0d\u63d0\u4ea4\n form.addEventListener('submit', e => e.preventDefault());\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6ce8\u610f\uff01\uff01\uff01\u672c\u7f51\u9875\u53ea\u662f\u5904\u4e8e\u5a31\u4e50\u76ee\u7684\u5236\u4f5c\uff0c\u7531\u6b64\u4e0b\u8f7d\u7684pdf\u5206\u4eab\u524d\u8bf7\u4e09\u601d\uff0c\u672c\u754c\u9762\u751f\u6210\u7684\u4efb\u4f55\u6587\u4ef6\u4e0d\u5177\u6709\u6cd5\u5f8b\u6548\u529b\uff01\uff01\uff01 \u7b7e\u8bc1\u7533\u8bf7\u4fe1\u606f\u8868 \u00b7 …<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-173","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meowshop.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=173"}],"version-history":[{"count":1,"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/meowshop.top\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions\/174"}],"wp:attachment":[{"href":"https:\/\/meowshop.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}