512 lines
21 KiB
HTML
512 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>虫虫出海 - 企业注册</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
|
background-size: 400% 400%;
|
|
animation: gradientShift 15s ease infinite;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 20px;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* 装饰性浮动元素 */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
|
|
animation: rotate 30s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ====== 主容器：居中卡片式 ====== */
|
|
.container {
|
|
width: 100%;
|
|
max-width: 580px;
|
|
position: relative;
|
|
z-index: 1;
|
|
animation: fadeInUp 0.8s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(40px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* 顶部品牌条 */
|
|
.top-bar {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.logo-wrap {
|
|
width: 120px; height: 120px;
|
|
margin: 0 auto 18px;
|
|
border-radius: 32px;
|
|
background: rgba(255,255,255,0.95);
|
|
padding: 20px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.5) inset;
|
|
overflow: hidden;
|
|
animation: logoFloat 3s ease-in-out infinite;
|
|
}
|
|
@keyframes logoFloat {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
.logo-wrap img { width: 100%; height: 100%; object-fit: contain; filter: none; }
|
|
.logo-wrap img.no-filter { filter: none; }
|
|
|
|
.brand-name {
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 6px;
|
|
text-shadow: 0 4px 20px rgba(0,0,0,.2);
|
|
}
|
|
.brand-sub { font-size: 14px; color: rgba(255,255,255,0.85); letter-spacing: 1.5px; }
|
|
|
|
/* 卡片 */
|
|
.form-card {
|
|
background: rgba(255,255,255,0.96);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-radius: 28px;
|
|
padding: 44px 40px;
|
|
box-shadow: 0 25px 80px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.5) inset;
|
|
border: none;
|
|
}
|
|
|
|
/* 标题行 */
|
|
.card-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 30px;
|
|
}
|
|
.card-title {
|
|
font-size: 24px; font-weight: 800;
|
|
background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
position: relative;
|
|
padding-left: 16px;
|
|
}
|
|
.card-title::before {
|
|
content: '';
|
|
position: absolute; left: 0; top: 2px; bottom: 2px;
|
|
width: 4px; border-radius: 3px;
|
|
background: linear-gradient(180deg, #667eea, #764ba2);
|
|
}
|
|
.back-link {
|
|
font-size: 14px; color: #64748b; text-decoration: none;
|
|
transition: all .2s;
|
|
font-weight: 500;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
}
|
|
.back-link:hover { color: #667eea; background: rgba(102,126,234,0.08); }
|
|
.back-link::before { content: '← '; font-size: 14px; }
|
|
|
|
/* 分组标题 */
|
|
.section-label {
|
|
font-size: 12px; font-weight: 700; color: #94a3b8;
|
|
text-transform: uppercase; letter-spacing: 2.5px;
|
|
margin-bottom: 16px; margin-top: 24px;
|
|
}
|
|
.section-label:first-of-type { margin-top: 0; }
|
|
|
|
/* 表单项 - 单列 */
|
|
.form-group { margin-bottom: 20px; position: relative; }
|
|
|
|
.form-label {
|
|
display: block; font-size: 14px; font-weight: 600;
|
|
color: #475569; margin-bottom: 8px;
|
|
}
|
|
.form-label .required { color: #ef4444; margin-right: 3px; font-size: 15px; }
|
|
|
|
.form-input, .form-select {
|
|
width: 100%; padding: 14px 18px; font-size: 15px;
|
|
border: 2px solid #e2e8f0; border-radius: 14px; outline: none;
|
|
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
background: #f8fafc; color: #1e293b;
|
|
appearance: none;
|
|
height: 54px;
|
|
}
|
|
.form-input:hover, .form-select:hover {
|
|
border-color: #cbd5e1;
|
|
background: #fff;
|
|
}
|
|
.form-input:focus, .form-select:focus {
|
|
border-color: #667eea;
|
|
background: #fff;
|
|
box-shadow: 0 0 0 5px rgba(102,126,234,.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.form-input::placeholder { color: #94a3b8; }
|
|
|
|
.form-select {
|
|
cursor: pointer;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px;
|
|
}
|
|
|
|
/* 营业执照上传区 */
|
|
.license-upload-area {
|
|
border: 2px dashed #cbd5e1;
|
|
border-radius: 16px; padding: 28px;
|
|
text-align: center; cursor: pointer;
|
|
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.license-upload-area:hover {
|
|
border-color: #667eea;
|
|
background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(102,126,234,0.15);
|
|
}
|
|
.license-upload-area.has-image {
|
|
border-style: solid; border-color: #a78bfa; padding: 6px; background: #fff;
|
|
}
|
|
.license-upload-area.has-image .upload-placeholder { display: none; }
|
|
.upload-placeholder .upload-icon-big {
|
|
font-size: 40px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1;
|
|
margin-bottom: 8px;
|
|
}
|
|
.upload-placeholder .upload-hint {
|
|
font-size: 14px; color: #64748b; font-weight: 600;
|
|
}
|
|
.upload-placeholder .upload-desc {
|
|
font-size: 12px; color: #94a3b8; margin-top: 6px;
|
|
}
|
|
.license-preview-img {
|
|
width: 100%; max-height: 180px; object-fit: cover;
|
|
border-radius: 12px; display: none;
|
|
}
|
|
.has-image .license-preview-img { display: block; }
|
|
.license-upload-area input[type="file"] { display: none; }
|
|
|
|
/* 验证码 */
|
|
.captcha-group { display: flex; gap: 14px; align-items: stretch; }
|
|
.captcha-group .form-input { flex: 1; }
|
|
|
|
.captcha-img {
|
|
flex-shrink: 0; width: 130px;
|
|
height: auto; min-height: 54px;
|
|
border-radius: 14px; cursor: pointer;
|
|
border: 2px solid #e2e8f0;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 0 16px; font-size: 22px; font-weight: 800;
|
|
letter-spacing: 6px; color: #667eea; user-select: none;
|
|
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.captcha-img:hover {
|
|
border-color: #667eea;
|
|
background: linear-gradient(135deg, #dbeafe 0%, #cffafe 100%);
|
|
transform: scale(1.05);
|
|
box-shadow: 0 6px 20px rgba(102,126,234,0.2);
|
|
}
|
|
|
|
/* 错误提示 */
|
|
.error-msg {
|
|
color: #ef4444;
|
|
font-size: 13px;
|
|
margin-top: 6px;
|
|
display: none;
|
|
padding-left: 4px;
|
|
animation: shake 0.3s ease-out;
|
|
}
|
|
.error-msg.show { display: block; }
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
|
|
/* 提交按钮 */
|
|
.submit-btn {
|
|
width: 100%; padding: 16px; font-size: 16px; font-weight: 700;
|
|
color: white;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
|
background-size: 200% 200%;
|
|
border: none; border-radius: 14px;
|
|
cursor: pointer;
|
|
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 10px 30px rgba(102,126,234,.4);
|
|
letter-spacing: 1.5px;
|
|
margin-top: 10px;
|
|
}
|
|
.submit-btn:hover {
|
|
background-position: 100% 0;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 16px 40px rgba(102,126,234,.5);
|
|
}
|
|
.submit-btn:active { transform: translateY(-1px); }
|
|
|
|
/* 底部链接 */
|
|
.form-footer { text-align: center; margin-top: 22px; font-size: 14px; color: #64748b; }
|
|
.form-footer a {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
transition: all .2s;
|
|
}
|
|
.form-footer a:hover { color: #764ba2; text-decoration: underline; }
|
|
|
|
/* 分割线装饰 */
|
|
.divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, #e2e8f0, #cbd5e1, #e2e8f0, transparent);
|
|
margin: 26px 0;
|
|
}
|
|
|
|
@keyframes cardShake {
|
|
0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)}
|
|
}
|
|
.shake { animation: cardShake .45s; }
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 580px) {
|
|
body { padding: 24px 16px; }
|
|
.form-card { padding: 32px 26px; border-radius: 22px; }
|
|
.brand-name { font-size: 26px; }
|
|
.logo-wrap { width: 100px; height: 100px; border-radius: 26px; padding: 16px; }
|
|
.captcha-group { flex-direction: column; }
|
|
.captcha-img { width: 100%; min-height: 52px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<!-- 品牌头部 -->
|
|
<div class="top-bar">
|
|
<div class="logo-wrap">
|
|
<img src="logo.png" alt="虫虫出海" class="no-filter">
|
|
</div>
|
|
<h1 class="brand-name">虫虫出海</h1>
|
|
<p class="brand-sub">一站式跨境物流服务平台</p>
|
|
</div>
|
|
|
|
<!-- 注册表单 -->
|
|
<div class="form-card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">企业注册</h2>
|
|
<a href="login-register.html" class="back-link">返回登录</a>
|
|
</div>
|
|
|
|
<form id="registerForm">
|
|
|
|
<!-- 基本信息 -->
|
|
<div class="section-label">基本信息</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label"><span class="required">*</span>公司名称</label>
|
|
<input type="text" class="form-input" id="regCompany" placeholder="请输入完整公司名称" required autocomplete="organization">
|
|
<div class="error-msg" id="regCompanyError">请输入公司名称</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label"><span class="required">*</span>法人姓名</label>
|
|
<input type="text" class="form-input" id="regLegalPerson" placeholder="法人代表姓名" required>
|
|
<div class="error-msg" id="regLegalPersonError">请输入法人姓名</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label"><span class="required">*</span>法人电话</label>
|
|
<input type="tel" class="form-input" id="regLegalPhone" placeholder="用于业务联系的手机号码" required>
|
|
<div class="error-msg" id="regLegalPhoneError">请输入法人电话</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- 证件信息 -->
|
|
<div class="section-label">证件信息</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label"><span class="required">*</span>营业执照 / 证件照</label>
|
|
<div class="license-upload-area" id="licenseUploadArea" onclick="document.getElementById('regLicenseFile').click()">
|
|
<div class="upload-placeholder">
|
|
<div class="upload-icon-big">📄</div>
|
|
<div class="upload-hint">点击上传证件图片</div>
|
|
<div class="upload-desc">支持 JPG、PNG 格式，不超过 5MB</div>
|
|
</div>
|
|
<img class="license-preview-img" id="licensePreview" alt="">
|
|
<input type="file" id="regLicenseFile" accept="image/*" onchange="handleLicenseUpload(this)">
|
|
</div>
|
|
<div class="error-msg" id="regLicenseError">请上传营业执照或相关证件</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">法人身份证号</label>
|
|
<input type="text" class="form-input" id="regIdCard" placeholder="18位身份证号">
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- 地址与发票 -->
|
|
<div class="section-label">地址与发票</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">国家/地区</label>
|
|
<select class="form-select" id="regCountry">
|
|
<option value="中国">中国</option>
|
|
<option value="中国香港">中国香港</option>
|
|
<option value="中国台湾">中国台湾</option>
|
|
<option value="中国澳门">中国澳门</option>
|
|
<option value="美国">美国</option>
|
|
<option value="英国">英国</option>
|
|
<option value="德国">德国</option>
|
|
<option value="法国">法国</option>
|
|
<option value="日本">日本</option>
|
|
<option value="韩国">韩国</option>
|
|
<option value="澳大利亚">澳大利亚</option>
|
|
<option value="加拿大">加拿大</option>
|
|
<option value="其他">其他</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">详细地址</label>
|
|
<input type="text" class="form-input" id="regAddress" placeholder="公司注册地址或经营地址">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">发票抬头</label>
|
|
<input type="text" class="form-input" id="regInvoiceTitle" placeholder="用于开具发票的名称（选填）">
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- 验证码 -->
|
|
<div class="form-group">
|
|
<label class="form-label"><span class="required">*</span>验证码</label>
|
|
<div class="captcha-group">
|
|
<input type="text" class="form-input" id="regCaptcha" placeholder="输入下方验证码" required maxlength="4">
|
|
<div class="captcha-img" id="regCaptchaImg" onclick="refreshCaptcha()" title="点击刷新验证码"></div>
|
|
</div>
|
|
<div class="error-msg" id="regCaptchaError">验证码错误，请重新输入</div>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn">提交注册申请</button>
|
|
|
|
<div class="form-footer">
|
|
已有账号？<a href="login-register.html">立即登录 →</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentCaptcha = '';
|
|
let licenseUploaded = false;
|
|
|
|
function generateCaptcha() {
|
|
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
|
|
let c = '';
|
|
for (let i = 0; i < 4; i++) c += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
return c;
|
|
}
|
|
|
|
function refreshCaptcha() {
|
|
currentCaptcha = generateCaptcha();
|
|
const img = document.getElementById('regCaptchaImg');
|
|
img.textContent = currentCaptcha;
|
|
img.style.transform = 'rotate(' + (Math.random() * 8 - 4) + 'deg)';
|
|
img.style.color = ['#667eea','#764ba2','#818cf8','#a78bfa'][Math.floor(Math.random()*4)];
|
|
}
|
|
|
|
refreshCaptcha();
|
|
|
|
// 营业执照上传
|
|
function handleLicenseUpload(input) {
|
|
var file = input.files[0];
|
|
if (!file) return;
|
|
if (file.size > 5*1024*1024) { alert('图片大小不能超过 5MB'); input.value=''; return; }
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
var preview = document.getElementById('licensePreview');
|
|
preview.src = e.target.result;
|
|
var area = document.getElementById('licenseUploadArea');
|
|
area.classList.add('has-image');
|
|
licenseUploaded = true;
|
|
document.getElementById('regLicenseError').classList.remove('show');
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
// 表单提交
|
|
document.getElementById('registerForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
var company = document.getElementById('regCompany').value.trim();
|
|
var legalPerson = document.getElementById('regLegalPerson').value.trim();
|
|
var legalPhone = document.getElementById('regLegalPhone').value.trim();
|
|
var captcha = document.getElementById('regCaptcha').value.trim();
|
|
|
|
document.querySelectorAll('.error-msg').forEach(function(el){ el.classList.remove('show'); });
|
|
var hasError = false;
|
|
|
|
if (!company) { document.getElementById('regCompanyError').classList.add('show'); hasError=true; }
|
|
if (!legalPerson) { document.getElementById('regLegalPersonError').classList.add('show'); hasError=true; }
|
|
if (!legalPhone) { document.getElementById('regLegalPhoneError').classList.add('show'); hasError=true; }
|
|
if (!licenseUploaded) { document.getElementById('regLicenseError').classList.add('show'); hasError=true; }
|
|
if (captcha.toUpperCase() !== currentCaptcha.toUpperCase()) {
|
|
document.getElementById('regCaptchaError').classList.add('show');
|
|
refreshCaptcha(); hasError=true;
|
|
}
|
|
|
|
if (hasError) {
|
|
this.querySelector('.submit-btn').classList.add('shake');
|
|
setTimeout(() => this.querySelector('.submit-btn').classList.remove('shake'), 450);
|
|
return;
|
|
}
|
|
|
|
alert('注册申请已提交！\n\n公司名称：' + company +
|
|
'\n\n我们将尽快审核您的资料。');
|
|
window.location.href = 'login-register.html';
|
|
});
|
|
|
|
// 实时清除错误
|
|
document.querySelectorAll('.form-input,.form-select').forEach(function(input){
|
|
input.addEventListener('input', function(){
|
|
var group = this.closest('.form-group');
|
|
if (group) { var err = group.querySelector('.error-msg'); if (err) err.classList.remove('show'); }
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|