red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构官网页面样式,优化代码结构和可维护性

Browse Source
This commit is contained in:
WUSIJIAN
2025-12-31 17:12:39 +08:00
parent 5120b0d57f
commit 273d2da785
5 changed files with 1303 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
public/web/auth.html
View File

@@ -4,128 +4,96 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商家中心 - 智推科技</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/3.0.23/tailwind.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
900: '#0c4a6e',
}
}
}
}
}
</script>
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
</head>
<body class="bg-slate-50 font-sans min-h-screen flex flex-col">
<body class="auth-body">
<!-- 简化版导航 -->
<nav class="bg-white shadow-sm w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="index.html" class="flex items-center gap-2 text-slate-600 hover:text-brand-600 transition">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
返回首页
</a>
</div>
<div class="flex items-center">
<span class="text-xl font-bold text-brand-600">商家中心</span>
</div>
</div>
<nav class="auth-navbar">
<div class="auth-navbar-container">
<a href="index.html" class="auth-back-link">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
返回首页
</a>
<span class="auth-title">商家中心</span>
</div>
</nav>
<main class="flex-grow flex items-center justify-center p-4">
<div class="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden flex flex-col fade-in-up">
<main class="auth-main">
<div class="auth-card fade-in-up">
<!-- Tab 切换 -->
<div class="flex border-b border-slate-100">
<button id="tab-login" onclick="switchMode('login')" class="flex-1 py-4 text-center font-semibold text-brand-600 border-b-2 border-brand-600 hover:text-brand-700 transition">
<div class="auth-tabs">
<button id="tab-login" onclick="switchMode('login')" class="auth-tab active">
商家登录
</button>
<button id="tab-register" onclick="switchMode('register')" class="flex-1 py-4 text-center font-semibold text-slate-500 hover:text-brand-600 transition border-b-2 border-transparent">
<button id="tab-register" onclick="switchMode('register')" class="auth-tab">
商家入驻
</button>
</div>
<div class="p-8">
<div class="auth-form-container">
<!-- 登录表单 -->
<form id="login-form" class="space-y-6" onsubmit="handleLogin(event)">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">账号/手机号</label>
<input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入您的账号" required>
<form id="login-form" class="auth-form" onsubmit="handleLogin(event)">
<div class="form-group">
<label class="form-label">账号/手机号</label>
<input type="text" class="form-input" placeholder="请输入您的账号" required>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">密码</label>
<input type="password" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入密码" required>
<div class="form-group">
<label class="form-label">密码</label>
<input type="password" class="form-input" placeholder="请输入密码" required>
</div>
<div class="flex items-center justify-between text-sm">
<label class="flex items-center text-slate-600">
<input type="checkbox" class="mr-2 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
<div class="form-row">
<label class="form-checkbox">
<input type="checkbox">
记住我
</label>
<a href="#" class="text-brand-600 hover:underline">忘记密码？</a>
<a href="#" class="form-link">忘记密码？</a>
</div>
<button type="submit" class="w-full bg-brand-600 text-white py-3 rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all shadow-md hover:shadow-lg">
<button type="submit" class="btn-submit">
立即登录
</button>
</form>
<!-- 注册表单 -->
<form id="register-form" class="space-y-4 hidden" onsubmit="handleRegister(event)">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">公司全称 <span class="text-red-500">*</span></label>
<input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请填写营业执照上的公司名称" required>
<form id="register-form" class="auth-form hidden" onsubmit="handleRegister(event)">
<div class="form-group">
<label class="form-label">公司全称 <span class="required">*</span></label>
<input type="text" class="form-input" placeholder="请填写营业执照上的公司名称" required>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">联系人姓名</label>
<input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入联系人姓名" required>
<div class="form-group">
<label class="form-label">联系人姓名</label>
<input type="text" class="form-input" placeholder="请输入联系人姓名" required>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">手机号码</label>
<input type="tel" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:border-brand-500 outline-none transition" placeholder="请输入手机号码" required>
<div class="form-group">
<label class="form-label">手机号码</label>
<input type="tel" class="form-input" placeholder="请输入手机号码" required>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">营业执照 <span class="text-red-500">*</span></label>
<div id="drop-zone" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 border-dashed rounded-lg hover:border-brand-500 hover:bg-brand-50 transition-colors duration-200 cursor-pointer bg-slate-50 relative group">
<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" accept="image/*" required onchange="handleFileSelect(this)">
<div class="space-y-1 text-center" id="upload-placeholder">
<svg class="mx-auto h-12 w-12 text-slate-400 group-hover:text-brand-500 transition-colors" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<div class="form-group">
<label class="form-label">营业执照 <span class="required">*</span></label>
<div id="drop-zone" class="upload-zone">
<input type="file" accept="image/*" required onchange="handleFileSelect(this)">
<div class="upload-placeholder" id="upload-placeholder">
<svg stroke="currentColor" fill="none" viewBox="0 0 48 48">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex text-sm text-slate-600 justify-center">
<span class="font-medium text-brand-600 group-hover:text-brand-700">点击上传</span>
<p class="pl-1 group-hover:text-slate-700">或拖拽文件</p>
<div class="upload-text">
<span class="highlight">点击上传</span> 或拖拽文件
</div>
<p class="text-xs text-slate-500">支持 JPG, PNG, PDF</p>
</div>
<div id="file-name" class="hidden flex items-center justify-center text-sm text-brand-600 font-medium h-full min-h-[80px]">
<!-- File name will appear here -->
<p class="upload-hint">支持 JPG, PNG, PDF</p>
</div>
<div id="file-name" class="upload-filename"></div>
</div>
</div>
<div class="pt-2">
<button type="submit" class="w-full bg-brand-600 text-white py-3 rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all shadow-md hover:shadow-lg">
提交入驻申请
</button>
<p class="text-xs text-slate-500 text-center mt-4">
提交即代表同意 <a href="#" class="text-brand-600 hover:underline">《商家入驻协议》</a>
</p>
</div>
<button type="submit" class="btn-submit">
提交入驻申请
</button>
<p class="form-hint">
提交即代表同意 <a href="#" class="form-link">《商家入驻协议》</a>
</p>
</form>
</div>
</div>
@@ -138,31 +106,16 @@
const tabLogin = document.getElementById('tab-login');
const tabRegister = document.getElementById('tab-register');
// Reset animations
loginForm.classList.remove('fade-in-up');
registerForm.classList.remove('fade-in-up');
void loginForm.offsetWidth; // Trigger reflow
if (mode === 'login') {
loginForm.classList.remove('hidden');
loginForm.classList.add('fade-in-up');
registerForm.classList.add('hidden');
tabLogin.classList.add('text-brand-600', 'border-brand-600');
tabLogin.classList.remove('text-slate-500', 'border-transparent');
tabRegister.classList.remove('text-brand-600', 'border-brand-600');
tabRegister.classList.add('text-slate-500', 'border-transparent');
tabLogin.classList.add('active');
tabRegister.classList.remove('active');
} else {
loginForm.classList.add('hidden');
registerForm.classList.remove('hidden');
registerForm.classList.add('fade-in-up');
tabRegister.classList.add('text-brand-600', 'border-brand-600');
tabRegister.classList.remove('text-slate-500', 'border-transparent');
tabLogin.classList.remove('text-brand-600', 'border-brand-600');
tabLogin.classList.add('text-slate-500', 'border-transparent');
tabRegister.classList.add('active');
tabLogin.classList.remove('active');
}
// Update URL without reloading
@@ -194,13 +147,13 @@
});
function highlight(e) {
dropZone.classList.add('border-brand-500', 'bg-brand-50', 'scale-[1.02]');
dropZone.classList.remove('border-slate-300', 'bg-slate-50');
dropZone.style.borderColor = 'var(--brand-500)';
dropZone.style.background = 'var(--brand-50)';
}
function unhighlight(e) {
dropZone.classList.remove('border-brand-500', 'bg-brand-50', 'scale-[1.02]');
dropZone.classList.add('border-slate-300', 'bg-slate-50');
dropZone.style.borderColor = '#cbd5e1';
dropZone.style.background = 'var(--slate-50)';
}
dropZone.addEventListener('drop', handleDrop, false);
@@ -219,7 +172,7 @@
function handleLogin(e) {
e.preventDefault();
// 跳转到后台管理系统登录页
window.location.href = '/#/login';
window.location.href = '/index.html#/login';
}
function handleFileSelect(input) {
@@ -228,11 +181,11 @@
if (input.files && input.files[0]) {
placeholder.classList.add('hidden');
fileNameDisplay.classList.remove('hidden');
fileNameDisplay.classList.add('show');
fileNameDisplay.textContent = '已选择: ' + input.files[0].name;
} else {
placeholder.classList.remove('hidden');
fileNameDisplay.classList.add('hidden');
fileNameDisplay.classList.remove('show');
}
}