255 lines
13 KiB
HTML
255 lines
13 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>
|
|
<script src="https://cdn.tailwindcss.com"></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>
|
|
</head>
|
|
<body class="bg-slate-50 font-sans min-h-screen flex flex-col">
|
|
|
|
<!-- 简化版导航 -->
|
|
<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>
|
|
</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">
|
|
|
|
<!-- 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">
|
|
商家登录
|
|
</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>
|
|
</div>
|
|
|
|
<div class="p-8">
|
|
<!-- 登录表单 -->
|
|
<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>
|
|
</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>
|
|
<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">
|
|
记住我
|
|
</label>
|
|
<a href="#" class="text-brand-600 hover:underline">忘记密码？</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>
|
|
</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>
|
|
</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>
|
|
<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>
|
|
|
|
<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">
|
|
<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>
|
|
<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 -->
|
|
</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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
function switchMode(mode) {
|
|
const loginForm = document.getElementById('login-form');
|
|
const registerForm = document.getElementById('register-form');
|
|
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');
|
|
} 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');
|
|
}
|
|
|
|
// Update URL without reloading
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('mode', mode);
|
|
window.history.pushState({}, '', url);
|
|
}
|
|
|
|
// 拖拽效果处理
|
|
const dropZone = document.getElementById('drop-zone');
|
|
if(dropZone) {
|
|
const input = dropZone.querySelector('input');
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
dropZone.addEventListener(eventName, preventDefaults, false);
|
|
});
|
|
|
|
function preventDefaults(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
dropZone.addEventListener(eventName, highlight, false);
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach(eventName => {
|
|
dropZone.addEventListener(eventName, unhighlight, false);
|
|
});
|
|
|
|
function highlight(e) {
|
|
dropZone.classList.add('border-brand-500', 'bg-brand-50', 'scale-[1.02]');
|
|
dropZone.classList.remove('border-slate-300', 'bg-slate-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.addEventListener('drop', handleDrop, false);
|
|
|
|
function handleDrop(e) {
|
|
const dt = e.dataTransfer;
|
|
const files = dt.files;
|
|
|
|
if (files && files.length > 0) {
|
|
input.files = files;
|
|
handleFileSelect(input);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleLogin(e) {
|
|
e.preventDefault();
|
|
// 跳转到后台管理系统登录页
|
|
window.location.href = '/#/login';
|
|
}
|
|
|
|
function handleFileSelect(input) {
|
|
const placeholder = document.getElementById('upload-placeholder');
|
|
const fileNameDisplay = document.getElementById('file-name');
|
|
|
|
if (input.files && input.files[0]) {
|
|
placeholder.classList.add('hidden');
|
|
fileNameDisplay.classList.remove('hidden');
|
|
fileNameDisplay.textContent = '已选择: ' + input.files[0].name;
|
|
} else {
|
|
placeholder.classList.remove('hidden');
|
|
fileNameDisplay.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function handleRegister(e) {
|
|
e.preventDefault();
|
|
const company = e.target.querySelector('input[placeholder*="公司"]').value;
|
|
alert(`入驻申请提交成功！\n\n欢迎 ${company} 加入我们。\n我们将尽快审核您的资料。`);
|
|
window.location.href = 'index.html';
|
|
}
|
|
|
|
// Initialize based on URL parameter
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const mode = params.get('mode') || 'login';
|
|
switchMode(mode);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|