1202 lines
44 KiB
HTML
1202 lines
44 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>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #09090b;
|
|
--card: #ffffff;
|
|
--card-foreground: #09090b;
|
|
--primary: #18181b;
|
|
--primary-foreground: #fafafa;
|
|
--secondary: #f4f4f5;
|
|
--secondary-foreground: #18181b;
|
|
--muted: #f4f4f5;
|
|
--muted-foreground: #71717a;
|
|
--accent: #18181b;
|
|
--accent-foreground: #fafafa;
|
|
--destructive: #ef4444;
|
|
--border: #e4e4e7;
|
|
--input: #ffffff;
|
|
--ring: #09090b;
|
|
--radius: 4px;
|
|
--sidebar: #fafafa;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
background-color: var(--card);
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
|
|
display: flex;
|
|
min-height: 680px;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-container {
|
|
flex: 1;
|
|
padding: 40px;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
.logo-area {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background-color: var(--primary);
|
|
color: var(--primary-foreground);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 21px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.progress-bar {
|
|
display: flex;
|
|
margin-bottom: 35px;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-bar::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 17px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: var(--border);
|
|
z-index: 1;
|
|
}
|
|
|
|
.progress-step {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.step-circle {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 99px;
|
|
background-color: var(--muted);
|
|
color: var(--muted-foreground);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 8px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.step-circle.active {
|
|
background-color: var(--primary);
|
|
color: var(--primary-foreground);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.step-circle.completed {
|
|
background-color: var(--primary);
|
|
color: var(--primary-foreground);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.step-text {
|
|
font-size: 12px;
|
|
color: var(--muted-foreground);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.step-text.active {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.form-section {
|
|
display: none;
|
|
}
|
|
|
|
.form-section.active {
|
|
display: block;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
margin-bottom: 23px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.section-subtitle {
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
margin-bottom: 21px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-row .form-group {
|
|
flex: 1;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 7px;
|
|
font-weight: 500;
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.required::after {
|
|
content: " *";
|
|
color: var(--destructive);
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
font-size: 13px;
|
|
background-color: var(--input);
|
|
color: var(--foreground);
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: var(--ring);
|
|
box-shadow: 0 0 0 1px var(--ring);
|
|
}
|
|
|
|
.input-with-icon {
|
|
position: relative;
|
|
}
|
|
|
|
.input-with-icon i {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.input-with-icon input {
|
|
padding-left: 38px;
|
|
}
|
|
|
|
.password-strength {
|
|
margin-top: 5px;
|
|
height: 3px;
|
|
background-color: var(--muted);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.password-strength-bar {
|
|
height: 100%;
|
|
width: 0;
|
|
transition: width 0.3s, background-color 0.3s;
|
|
}
|
|
|
|
.password-hint {
|
|
font-size: 11px;
|
|
color: var(--muted-foreground);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.terms {
|
|
margin-top: 24px;
|
|
padding: 15px;
|
|
background-color: var(--muted);
|
|
border-radius: var(--radius);
|
|
border-left: 3px solid var(--primary);
|
|
}
|
|
|
|
.terms label {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
font-weight: normal;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.terms input {
|
|
width: auto;
|
|
margin-right: 10px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.terms a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.terms a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 29px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 22px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.btn-prev {
|
|
background-color: transparent;
|
|
color: var(--foreground);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.btn-prev:hover {
|
|
background-color: var(--muted);
|
|
}
|
|
|
|
.btn-next,
|
|
.btn-submit {
|
|
background-color: var(--primary);
|
|
color: var(--primary-foreground);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.btn-next:hover,
|
|
.btn-submit:hover {
|
|
background-color: var(--foreground);
|
|
border-color: var(--foreground);
|
|
}
|
|
|
|
.btn-submit {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
.summary {
|
|
margin-top: 18px;
|
|
padding: 18px;
|
|
background-color: var(--muted);
|
|
border-radius: var(--radius);
|
|
border-left: 3px solid var(--primary);
|
|
}
|
|
|
|
.summary h4 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 14px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.summary-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.summary-label {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.summary-value {
|
|
font-weight: 500;
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.info-sidebar {
|
|
width: 350px;
|
|
background-color: var(--sidebar);
|
|
padding: 44px 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-header {
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.022em;
|
|
margin-bottom: 6px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.page-description {
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.info-sidebar h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 24px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.info-list {
|
|
list-style: none;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.info-item {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.info-icon {
|
|
width: 33px;
|
|
height: 33px;
|
|
background-color: var(--muted);
|
|
color: var(--foreground);
|
|
border-radius: var(--radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.info-content {
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.success-message {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 56px 18px;
|
|
}
|
|
|
|
.success-icon {
|
|
width: 66px;
|
|
height: 66px;
|
|
background-color: var(--primary);
|
|
color: var(--primary-foreground);
|
|
border-radius: 95px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
margin: 0 auto 22px;
|
|
}
|
|
|
|
.success-message h2 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 14px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.success-message p {
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 18px;
|
|
line-height: 1.5;
|
|
max-width: 460px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.admin-account {
|
|
background-color: var(--muted);
|
|
border-radius: var(--radius);
|
|
padding: 16px;
|
|
margin-top: 22px;
|
|
max-width: 340px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.admin-label {
|
|
font-size: 12px;
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.admin-email {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--foreground);
|
|
word-break: break-all;
|
|
}
|
|
|
|
@media (max-width: 1060px) {
|
|
.container {
|
|
max-width: 920px;
|
|
}
|
|
|
|
.form-container {
|
|
padding: 32px;
|
|
}
|
|
|
|
.info-sidebar {
|
|
width: 310px;
|
|
padding: 36px 22px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-container {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border);
|
|
order: 2;
|
|
}
|
|
|
|
.info-sidebar {
|
|
width: 100%;
|
|
order: 1;
|
|
padding: 32px 28px;
|
|
}
|
|
|
|
.info-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-row {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.summary-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 580px) {
|
|
.container {
|
|
min-height: auto;
|
|
}
|
|
|
|
.form-container {
|
|
padding: 24px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.button-group {
|
|
flex-direction: column-reverse;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="content">
|
|
<div class="form-container">
|
|
<div class="logo-area">
|
|
<div class="logo-icon">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div class="logo-text">CorpRegister</div>
|
|
</div>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress-step">
|
|
<div class="step-circle active">1</div>
|
|
<div class="step-text active">公司信息</div>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="step-circle">2</div>
|
|
<div class="step-text">管理员信息</div>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="step-circle">3</div>
|
|
<div class="step-text">确认提交</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第一步:公司信息 -->
|
|
<form id="registrationForm">
|
|
<div class="form-section active" id="section-company">
|
|
<h2 class="section-title">公司基本信息</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="companyName" class="required">公司全称</label>
|
|
<input type="text" id="companyName" required placeholder="请输入公司法定全称">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="companyType" class="required">公司类型</label>
|
|
<select id="companyType" required>
|
|
<option value="">请选择公司类型</option>
|
|
<option value="private">私营企业</option>
|
|
<option value="state-owned">国有企业</option>
|
|
<option value="foreign">外资企业</option>
|
|
<option value="joint-venture">合资企业</option>
|
|
<option value="other">其他</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="industry" class="required">所属行业</label>
|
|
<select id="industry" required>
|
|
<option value="">请选择行业</option>
|
|
<option value="tech">科技/互联网</option>
|
|
<option value="finance">金融/银行</option>
|
|
<option value="manufacturing">制造业</option>
|
|
<option value="retail">零售/贸易</option>
|
|
<option value="service">服务业</option>
|
|
<option value="education">教育/培训</option>
|
|
<option value="healthcare">医疗健康</option>
|
|
<option value="real-estate">房地产</option>
|
|
<option value="logistics">物流运输</option>
|
|
<option value="other">其他</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="companyAddress" class="required">公司地址</label>
|
|
<input type="text" id="companyAddress" required placeholder="请输入公司详细地址">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="phone" class="required">联系电话</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-phone"></i>
|
|
<input type="tel" id="phone" required placeholder="请输入公司联系电话">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="companyEmail" class="required">公司邮箱</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-envelope"></i>
|
|
<input type="email" id="companyEmail" required placeholder="请输入公司邮箱">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="website">公司网站</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-globe"></i>
|
|
<input type="url" id="website" placeholder="https://example.com">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="companyDesc">公司简介</label>
|
|
<textarea id="companyDesc" rows="3" placeholder="请简要描述公司主营业务、规模等信息"></textarea>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<div></div>
|
|
<button type="button" class="btn btn-next" onclick="nextStep()">
|
|
<span>下一步</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二步:管理员信息 -->
|
|
<div class="form-section" id="section-admin">
|
|
<h2 class="section-title">超级管理员信息</h2>
|
|
<p class="section-subtitle">超级管理员将拥有系统的最高权限,请谨慎设置</p>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="adminName" class="required">管理员姓名</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-user"></i>
|
|
<input type="text" id="adminName" required placeholder="请输入管理员真实姓名">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="adminEmail" class="required">管理员邮箱</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-envelope"></i>
|
|
<input type="email" id="adminEmail" required placeholder="用于登录系统">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="password" class="required">登录密码</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-lock"></i>
|
|
<input type="password" id="password" required placeholder="至少8位,包含字母和数字">
|
|
</div>
|
|
<div class="password-strength">
|
|
<div class="password-strength-bar" id="passwordStrengthBar"></div>
|
|
</div>
|
|
<div class="password-hint" id="passwordHint">密码强度:弱</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword" class="required">确认密码</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-lock"></i>
|
|
<input type="password" id="confirmPassword" required placeholder="再次输入密码">
|
|
</div>
|
|
<div class="password-hint" id="passwordMatchHint"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="adminPhone">管理员手机</label>
|
|
<div class="input-with-icon">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
<input type="tel" id="adminPhone" placeholder="用于接收系统通知">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="adminPosition">担任职务</label>
|
|
<input type="text" id="adminPosition" placeholder="请输入管理员职务">
|
|
</div>
|
|
|
|
<div class="terms">
|
|
<label>
|
|
<input type="checkbox" id="agreeTerms" required>
|
|
<span>我同意并接受 <a href="#">服务条款</a> 和 <a
|
|
href="#">隐私政策</a>,并确认所提供的信息真实有效。我了解超级管理员将拥有系统的最高权限,并会妥善保管账户信息。</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button type="button" class="btn btn-prev" onclick="prevStep()">
|
|
<i class="fas fa-arrow-left"></i>
|
|
<span>上一步</span>
|
|
</button>
|
|
<button type="button" class="btn btn-next" onclick="nextStep()">
|
|
<span>下一步</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第三步:确认信息 -->
|
|
<div class="form-section" id="section-confirm">
|
|
<h2 class="section-title">确认信息</h2>
|
|
<p class="section-subtitle">请确认以下信息是否正确,提交后不可更改</p>
|
|
|
|
<div class="summary">
|
|
<h4>公司信息</h4>
|
|
<div class="summary-grid">
|
|
<div class="summary-item">
|
|
<span class="summary-label">公司名称:</span>
|
|
<span class="summary-value" id="summary-companyName">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">公司类型:</span>
|
|
<span class="summary-value" id="summary-companyType">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">所属行业:</span>
|
|
<span class="summary-value" id="summary-industry">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">公司地址:</span>
|
|
<span class="summary-value" id="summary-companyAddress">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">联系电话:</span>
|
|
<span class="summary-value" id="summary-phone">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">公司邮箱:</span>
|
|
<span class="summary-value" id="summary-companyEmail">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary" style="margin-top: 20px;">
|
|
<h4>管理员信息</h4>
|
|
<div class="summary-grid">
|
|
<div class="summary-item">
|
|
<span class="summary-label">管理员姓名:</span>
|
|
<span class="summary-value" id="summary-adminName">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">管理员邮箱:</span>
|
|
<span class="summary-value" id="summary-adminEmail">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">管理员手机:</span>
|
|
<span class="summary-value" id="summary-adminPhone">-</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">担任职务:</span>
|
|
<span class="summary-value" id="summary-adminPosition">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button type="button" class="btn btn-prev" onclick="prevStep()">
|
|
<i class="fas fa-arrow-left"></i>
|
|
<span>上一步</span>
|
|
</button>
|
|
<button type="button" class="btn btn-submit" onclick="submitForm()">
|
|
<i class="fas fa-check"></i>
|
|
<span>提交注册</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- 提交成功后的消息 -->
|
|
<div class="success-message" id="successMessage">
|
|
<div class="success-icon">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<h2>注册成功!</h2>
|
|
<p>公司信息和超级管理员账户已成功创建。</p>
|
|
<p>系统初始化邮件已发送至管理员邮箱,请按照邮件指引完成系统初始化设置。</p>
|
|
|
|
<div class="admin-account">
|
|
<div class="admin-label">超级管理员账户</div>
|
|
<div class="admin-email" id="successAdminEmail"></div>
|
|
</div>
|
|
|
|
<button class="btn btn-submit" onclick="resetForm()" style="margin-top: 28px;">
|
|
<i class="fas fa-plus"></i>
|
|
<span>注册新公司</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 侧边栏 -->
|
|
<div class="info-sidebar">
|
|
<div class="info-header">
|
|
<h1 class="page-title">公司信息注册</h1>
|
|
<p class="page-description">请填写公司信息并创建超级管理员账户以完成系统初始化设置</p>
|
|
</div>
|
|
|
|
<h3>注册说明</h3>
|
|
|
|
<ul class="info-list">
|
|
<li class="info-item">
|
|
<div class="info-item-header">
|
|
<div class="info-icon">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div class="info-title">公司信息</div>
|
|
</div>
|
|
<div class="info-content">
|
|
请填写公司的法定全称、地址和联系方式,确保信息真实有效,这将用于系统备案和官方文件。
|
|
</div>
|
|
</li>
|
|
|
|
<li class="info-item">
|
|
<div class="info-item-header">
|
|
<div class="info-icon">
|
|
<i class="fas fa-user-shield"></i>
|
|
</div>
|
|
<div class="info-title">超级管理员</div>
|
|
</div>
|
|
<div class="info-content">
|
|
超级管理员拥有系统的最高权限,可以创建和管理其他用户,分配角色和权限,请妥善保管账户信息。
|
|
</div>
|
|
</li>
|
|
|
|
<li class="info-item">
|
|
<div class="info-item-header">
|
|
<div class="info-icon">
|
|
<i class="fas fa-lock"></i>
|
|
</div>
|
|
<div class="info-title">账户安全</div>
|
|
</div>
|
|
<div class="info-content">
|
|
请设置强密码(至少8位,包含字母和数字),建议定期更换密码,不要将账户信息透露给他人。
|
|
</div>
|
|
</li>
|
|
|
|
<li class="info-item">
|
|
<div class="info-item-header">
|
|
<div class="info-icon">
|
|
<i class="fas fa-headset"></i>
|
|
</div>
|
|
<div class="info-title">技术支持</div>
|
|
</div>
|
|
<div class="info-content">
|
|
如果在注册过程中遇到问题,请联系我们的技术支持团队:<br>
|
|
电话:400-123-4567<br>
|
|
邮箱:support@example.com
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentStep = 1;
|
|
const totalSteps = 3;
|
|
|
|
// 密码强度检查
|
|
const passwordInput = document.getElementById('password');
|
|
const passwordStrengthBar = document.getElementById('passwordStrengthBar');
|
|
const passwordHint = document.getElementById('passwordHint');
|
|
const confirmPasswordInput = document.getElementById('confirmPassword');
|
|
const passwordMatchHint = document.getElementById('passwordMatchHint');
|
|
|
|
passwordInput.addEventListener('input', function () {
|
|
const password = this.value;
|
|
let strength = 0;
|
|
let color = '#ef4444';
|
|
let text = '弱';
|
|
|
|
if (password.length >= 8) strength++;
|
|
if (/[A-Z]/.test(password)) strength++;
|
|
if (/[0-9]/.test(password)) strength++;
|
|
if (/[^A-Za-z0-9]/.test(password)) strength++;
|
|
|
|
if (strength === 1) {
|
|
color = '#ef4444';
|
|
text = '弱';
|
|
} else if (strength === 2 || strength === 3) {
|
|
color = '#f59e0b';
|
|
text = '中等';
|
|
} else if (strength === 4) {
|
|
color = '#10b981';
|
|
text = '强';
|
|
}
|
|
|
|
passwordStrengthBar.style.width = (strength * 25) + '%';
|
|
passwordStrengthBar.style.backgroundColor = color;
|
|
passwordHint.textContent = '密码强度:' + text;
|
|
passwordHint.style.color = color;
|
|
|
|
checkPasswordMatch();
|
|
});
|
|
|
|
confirmPasswordInput.addEventListener('input', checkPasswordMatch);
|
|
|
|
function checkPasswordMatch() {
|
|
const password = passwordInput.value;
|
|
const confirmPassword = confirmPasswordInput.value;
|
|
|
|
if (confirmPassword === '') {
|
|
passwordMatchHint.textContent = '';
|
|
passwordMatchHint.style.color = '#71717a';
|
|
return;
|
|
}
|
|
|
|
if (password === confirmPassword) {
|
|
passwordMatchHint.textContent = '✓ 密码匹配';
|
|
passwordMatchHint.style.color = '#10b981';
|
|
} else {
|
|
passwordMatchHint.textContent = '✗ 密码不匹配';
|
|
passwordMatchHint.style.color = '#ef4444';
|
|
}
|
|
}
|
|
|
|
// 表单步骤导航
|
|
function nextStep() {
|
|
if (!validateCurrentStep()) return;
|
|
|
|
// 更新步骤指示器
|
|
document.querySelectorAll('.step-circle')[currentStep - 1].classList.remove('active');
|
|
document.querySelectorAll('.step-circle')[currentStep - 1].classList.add('completed');
|
|
document.querySelectorAll('.step-text')[currentStep - 1].classList.remove('active');
|
|
|
|
// 隐藏当前步骤
|
|
document.querySelector('.form-section.active').classList.remove('active');
|
|
|
|
// 显示下一步
|
|
currentStep++;
|
|
document.querySelectorAll('.step-circle')[currentStep - 1].classList.add('active');
|
|
document.querySelectorAll('.step-text')[currentStep - 1].classList.add('active');
|
|
document.getElementById(`section-${getSectionName(currentStep)}`).classList.add('active');
|
|
|
|
// 如果是最后一步,更新摘要信息
|
|
if (currentStep === 3) {
|
|
updateSummary();
|
|
}
|
|
}
|
|
|
|
function prevStep() {
|
|
// 更新步骤指示器
|
|
document.querySelectorAll('.step-circle')[currentStep - 1].classList.remove('active');
|
|
document.querySelectorAll('.step-text')[currentStep - 1].classList.remove('active');
|
|
|
|
// 隐藏当前步骤
|
|
document.querySelector('.form-section.active').classList.remove('active');
|
|
|
|
// 显示上一步
|
|
currentStep--;
|
|
document.querySelectorAll('.step-circle')[currentStep - 1].classList.add('active');
|
|
document.querySelectorAll('.step-circle')[currentStep - 1].classList.remove('completed');
|
|
document.querySelectorAll('.step-text')[currentStep - 1].classList.add('active');
|
|
document.getElementById(`section-${getSectionName(currentStep)}`).classList.add('active');
|
|
}
|
|
|
|
function getSectionName(step) {
|
|
switch (step) {
|
|
case 1: return 'company';
|
|
case 2: return 'admin';
|
|
case 3: return 'confirm';
|
|
default: return 'company';
|
|
}
|
|
}
|
|
|
|
// 验证当前步骤
|
|
function validateCurrentStep() {
|
|
if (currentStep === 1) {
|
|
const requiredFields = ['companyName', 'companyType', 'industry', 'companyAddress', 'phone', 'companyEmail'];
|
|
for (let fieldId of requiredFields) {
|
|
const field = document.getElementById(fieldId);
|
|
if (!field.value.trim()) {
|
|
showError(field, `请填写${field.previousElementSibling.textContent.replace(' *', '')}`);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 验证邮箱格式
|
|
const emailField = document.getElementById('companyEmail');
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(emailField.value)) {
|
|
showError(emailField, '请输入有效的公司邮箱地址');
|
|
return false;
|
|
}
|
|
|
|
clearErrors();
|
|
|
|
} else if (currentStep === 2) {
|
|
const requiredFields = ['adminName', 'adminEmail', 'password', 'confirmPassword'];
|
|
for (let fieldId of requiredFields) {
|
|
const field = document.getElementById(fieldId);
|
|
if (!field.value.trim()) {
|
|
showError(field, `请填写${field.previousElementSibling.textContent.replace(' *', '')}`);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 验证邮箱格式
|
|
const emailField = document.getElementById('adminEmail');
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(emailField.value)) {
|
|
showError(emailField, '请输入有效的管理员邮箱地址');
|
|
return false;
|
|
}
|
|
|
|
// 验证密码
|
|
const password = document.getElementById('password').value;
|
|
if (password.length < 8) {
|
|
showError(document.getElementById('password'), '密码长度至少为8位');
|
|
return false;
|
|
}
|
|
|
|
if (!/(?=.*[A-Za-z])(?=.*\d)/.test(password)) {
|
|
showError(document.getElementById('password'), '密码必须包含字母和数字');
|
|
return false;
|
|
}
|
|
|
|
// 验证密码匹配
|
|
if (password !== document.getElementById('confirmPassword').value) {
|
|
showError(document.getElementById('confirmPassword'), '两次输入的密码不匹配');
|
|
return false;
|
|
}
|
|
|
|
// 验证条款同意
|
|
if (!document.getElementById('agreeTerms').checked) {
|
|
alert('请同意服务条款和隐私政策');
|
|
return false;
|
|
}
|
|
|
|
clearErrors();
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function showError(inputElement, message) {
|
|
// 清除之前的错误样式
|
|
inputElement.classList.remove('error');
|
|
|
|
// 添加错误样式
|
|
inputElement.classList.add('error');
|
|
inputElement.style.borderColor = '#ef4444';
|
|
inputElement.style.boxShadow = '0 0 0 1px rgba(239, 68, 68, 0.2)';
|
|
|
|
// 显示错误消息
|
|
alert(message);
|
|
inputElement.focus();
|
|
}
|
|
|
|
function clearErrors() {
|
|
const errorElements = document.querySelectorAll('.error');
|
|
errorElements.forEach(element => {
|
|
element.classList.remove('error');
|
|
element.style.borderColor = '';
|
|
element.style.boxShadow = '';
|
|
});
|
|
}
|
|
|
|
// 更新摘要信息
|
|
function updateSummary() {
|
|
document.getElementById('summary-companyName').textContent = document.getElementById('companyName').value || '-';
|
|
document.getElementById('summary-companyType').textContent = document.getElementById('companyType').options[document.getElementById('companyType').selectedIndex].text || '-';
|
|
document.getElementById('summary-industry').textContent = document.getElementById('industry').options[document.getElementById('industry').selectedIndex].text || '-';
|
|
document.getElementById('summary-companyAddress').textContent = document.getElementById('companyAddress').value || '-';
|
|
document.getElementById('summary-phone').textContent = document.getElementById('phone').value || '-';
|
|
document.getElementById('summary-companyEmail').textContent = document.getElementById('companyEmail').value || '-';
|
|
document.getElementById('summary-adminName').textContent = document.getElementById('adminName').value || '-';
|
|
document.getElementById('summary-adminEmail').textContent = document.getElementById('adminEmail').value || '-';
|
|
document.getElementById('summary-adminPhone').textContent = document.getElementById('adminPhone').value || '-';
|
|
document.getElementById('summary-adminPosition').textContent = document.getElementById('adminPosition').value || '-';
|
|
}
|
|
|
|
// 提交表单
|
|
function submitForm() {
|
|
// 在实际应用中,这里会发送数据到服务器
|
|
// 这里我们只模拟提交成功
|
|
document.querySelector('.form-container').style.display = 'none';
|
|
document.getElementById('successMessage').style.display = 'block';
|
|
document.getElementById('successAdminEmail').textContent = document.getElementById('adminEmail').value;
|
|
}
|
|
|
|
// 重置表单
|
|
function resetForm() {
|
|
// 重置所有表单字段
|
|
document.getElementById('registrationForm').reset();
|
|
|
|
// 重置步骤指示器
|
|
currentStep = 1;
|
|
document.querySelectorAll('.step-circle').forEach((circle, index) => {
|
|
circle.classList.remove('active', 'completed');
|
|
if (index === 0) circle.classList.add('active');
|
|
});
|
|
|
|
document.querySelectorAll('.step-text').forEach((text, index) => {
|
|
text.classList.remove('active');
|
|
if (index === 0) text.classList.add('active');
|
|
});
|
|
|
|
// 重置表单显示
|
|
document.querySelectorAll('.form-section').forEach(section => {
|
|
section.classList.remove('active');
|
|
});
|
|
document.getElementById('section-company').classList.add('active');
|
|
|
|
// 重置UI状态
|
|
document.querySelector('.form-container').style.display = 'block';
|
|
document.getElementById('successMessage').style.display = 'none';
|
|
passwordStrengthBar.style.width = '0%';
|
|
passwordHint.textContent = '密码强度:弱';
|
|
passwordMatchHint.textContent = '';
|
|
clearErrors();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |