重构官网页面样式,优化代码结构和可维护性
This commit is contained in:
WUSIJIAN
254
public/web/auth-old.html
Normal file
254
public/web/auth-old.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<!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://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>
|
||||
</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>
|
||||
@@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
186
public/web/index-old.html
Normal file
186
public/web/index-old.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>智能营销服务平台 - CID广告 & AI客服</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<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 text-slate-800 font-sans">
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="bg-white shadow-sm fixed 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">
|
||||
<span class="text-2xl font-bold text-brand-600">红动未来科技</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#services" class="text-slate-600 hover:text-brand-600 transition">核心业务</a>
|
||||
<a href="#advantage" class="text-slate-600 hover:text-brand-600 transition">优势</a>
|
||||
<a href="auth.html?mode=register" class="bg-brand-600 text-white px-5 py-2 rounded-full hover:bg-brand-700 transition shadow-md">商家入驻</a>
|
||||
<a href="/index.html#/login" class="text-slate-600 hover:text-brand-600 transition font-medium">后台登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero 区域 -->
|
||||
<section class="relative pt-32 pb-20 bg-gradient-to-br from-brand-50 via-white to-brand-50 overflow-hidden">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute top-0 left-0 -ml-20 -mt-20 w-96 h-96 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
|
||||
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 fade-in-up">
|
||||
<div class="text-center max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight mb-6 leading-tight">
|
||||
赋能商业增长的 <br>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-brand-400">智能营销解决方案</span>
|
||||
</h1>
|
||||
<p class="text-lg text-slate-600 mb-10 leading-relaxed max-w-2xl mx-auto">
|
||||
通过精准的 CID 广告归因技术与 24/7 智能 AI 客服，帮助企业降低获客成本，提升转化效率，实现全链路营销闭环。
|
||||
</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href="auth.html?mode=register" class="px-8 py-4 bg-brand-600 text-white rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all duration-200 shadow-lg hover:shadow-brand-500/30">立即入驻</a>
|
||||
<a href="#services" class="px-8 py-4 bg-white text-brand-600 border border-brand-200 rounded-lg font-semibold hover:bg-slate-50 hover:border-brand-300 active:scale-95 transition-all duration-200">了解服务</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心业务介绍 -->
|
||||
<section id="services" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 fade-in-up" style="animation-delay: 0.2s;">
|
||||
<h2 class="text-3xl font-bold text-slate-900 mb-4">核心业务板块</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">专注于电商与服务行业的两大核心痛点：流量获取与用户留存。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- CID 广告业务 -->
|
||||
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.3s;">
|
||||
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-blue-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-100 transition-colors duration-300">
|
||||
<svg class="w-8 h-8 text-blue-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">CID 广告业务</h3>
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
打破平台数据壁垒，实现跨平台广告投放效果精准归因。
|
||||
</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
全链路转化数据回传
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
提升 ROI 投产比
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
支持多媒体平台
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聚合电商业务 -->
|
||||
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.4s;">
|
||||
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-orange-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-14 h-14 bg-orange-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-100 transition-colors duration-300">
|
||||
<svg class="w-8 h-8 text-orange-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-orange-600 transition-colors">聚合电商业务</h3>
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
一站式聚合主流电商平台资源，实现流量共享与销售增长。
|
||||
</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
多平台商品一键管理
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
聚合流量分发体系
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
供应链深度整合
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI 客服业务 -->
|
||||
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.5s;">
|
||||
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-purple-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-100 transition-colors duration-300">
|
||||
<svg class="w-8 h-8 text-purple-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-purple-600 transition-colors">AI 智能客服业务</h3>
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
基于大模型的智能对话系统，7x24小时在线，秒级响应客户咨询。
|
||||
</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
自动接待与意图识别
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
智能话术推荐
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
降低人工成本
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 底部 CTA -->
|
||||
<section class="py-20 bg-brand-900 text-white">
|
||||
<div class="max-w-4xl mx-auto text-center px-4">
|
||||
<h2 class="text-3xl font-bold mb-6">准备好提升您的业务了吗？</h2>
|
||||
<p class="text-brand-100 mb-8 text-lg">加入数千家已经在使用我们服务的商家行列，开启智能营销新时代。</p>
|
||||
<a href="auth.html?mode=register" class="inline-block px-10 py-4 bg-white text-brand-900 rounded-lg font-bold text-lg hover:bg-brand-50 transition transform hover:scale-105">
|
||||
免费商家入驻
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-slate-900 text-slate-400 py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||||
<p>© 2025 红动未来科技. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,103 +4,74 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>智能营销服务平台 - CID广告 & AI客服</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 text-slate-800 font-sans">
|
||||
<body>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="bg-white shadow-sm fixed 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">
|
||||
<span class="text-2xl font-bold text-brand-600">红动未来科技</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#services" class="text-slate-600 hover:text-brand-600 transition">核心业务</a>
|
||||
<a href="#advantage" class="text-slate-600 hover:text-brand-600 transition">优势</a>
|
||||
<a href="auth.html?mode=register" class="bg-brand-600 text-white px-5 py-2 rounded-full hover:bg-brand-700 transition shadow-md">商家入驻</a>
|
||||
<a href="/index.html#/login" class="text-slate-600 hover:text-brand-600 transition font-medium">后台登录</a>
|
||||
</div>
|
||||
<nav class="navbar">
|
||||
<div class="navbar-container">
|
||||
<span class="navbar-brand">红动未来科技</span>
|
||||
<div class="navbar-menu">
|
||||
<a href="#services" class="navbar-link">核心业务</a>
|
||||
<a href="#cta" class="navbar-link">优势</a>
|
||||
<a href="auth.html?mode=register" class="btn btn-primary">商家入驻</a>
|
||||
<a href="/index.html#/login" class="navbar-link">后台登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero 区域 -->
|
||||
<section class="relative pt-32 pb-20 bg-gradient-to-br from-brand-50 via-white to-brand-50 overflow-hidden">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute top-0 left-0 -ml-20 -mt-20 w-96 h-96 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
|
||||
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 fade-in-up">
|
||||
<div class="text-center max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight mb-6 leading-tight">
|
||||
赋能商业增长的 <br>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-brand-400">智能营销解决方案</span>
|
||||
</h1>
|
||||
<p class="text-lg text-slate-600 mb-10 leading-relaxed max-w-2xl mx-auto">
|
||||
通过精准的 CID 广告归因技术与 24/7 智能 AI 客服，帮助企业降低获客成本，提升转化效率，实现全链路营销闭环。
|
||||
</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href="auth.html?mode=register" class="px-8 py-4 bg-brand-600 text-white rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all duration-200 shadow-lg hover:shadow-brand-500/30">立即入驻</a>
|
||||
<a href="#services" class="px-8 py-4 bg-white text-brand-600 border border-brand-200 rounded-lg font-semibold hover:bg-slate-50 hover:border-brand-300 active:scale-95 transition-all duration-200">了解服务</a>
|
||||
</div>
|
||||
<section class="hero">
|
||||
<div class="hero-blob hero-blob-1"></div>
|
||||
<div class="hero-blob hero-blob-2"></div>
|
||||
<div class="hero-content fade-in-up">
|
||||
<h1 class="hero-title">
|
||||
赋能商业增长的 <br>
|
||||
<span class="hero-title-gradient">智能营销解决方案</span>
|
||||
</h1>
|
||||
<p class="hero-description">
|
||||
通过精准的 CID 广告归因技术与 24/7 智能 AI 客服，帮助企业降低获客成本，提升转化效率，实现全链路营销闭环。
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="auth.html?mode=register" class="btn btn-primary btn-lg">立即入驻</a>
|
||||
<a href="#services" class="btn btn-outline btn-lg">了解服务</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心业务介绍 -->
|
||||
<section id="services" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 fade-in-up" style="animation-delay: 0.2s;">
|
||||
<h2 class="text-3xl font-bold text-slate-900 mb-4">核心业务板块</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">专注于电商与服务行业的两大核心痛点：流量获取与用户留存。</p>
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
<div class="section-header fade-in-up">
|
||||
<h2 class="section-title">核心业务板块</h2>
|
||||
<p class="section-description">专注于电商与服务行业的两大核心痛点：流量获取与用户留存。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="services-grid">
|
||||
<!-- CID 广告业务 -->
|
||||
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.3s;">
|
||||
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-blue-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-100 transition-colors duration-300">
|
||||
<svg class="w-8 h-8 text-blue-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
|
||||
<div class="service-card fade-in-up">
|
||||
<div class="service-card-glow blue"></div>
|
||||
<div class="service-card-content">
|
||||
<div class="service-icon blue">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">CID 广告业务</h3>
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
<h3 class="service-title blue">CID 广告业务</h3>
|
||||
<p class="service-description">
|
||||
打破平台数据壁垒，实现跨平台广告投放效果精准归因。
|
||||
</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<ul class="service-features">
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
全链路转化数据回传
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
提升 ROI 投产比
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
支持多媒体平台
|
||||
</li>
|
||||
</ul>
|
||||
@@ -108,27 +79,27 @@
|
||||
</div>
|
||||
|
||||
<!-- 聚合电商业务 -->
|
||||
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.4s;">
|
||||
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-orange-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-14 h-14 bg-orange-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-100 transition-colors duration-300">
|
||||
<svg class="w-8 h-8 text-orange-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
|
||||
<div class="service-card fade-in-up">
|
||||
<div class="service-card-glow orange"></div>
|
||||
<div class="service-card-content">
|
||||
<div class="service-icon orange">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-orange-600 transition-colors">聚合电商业务</h3>
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
<h3 class="service-title orange">聚合电商业务</h3>
|
||||
<p class="service-description">
|
||||
一站式聚合主流电商平台资源，实现流量共享与销售增长。
|
||||
</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<ul class="service-features">
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
多平台商品一键管理
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
聚合流量分发体系
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
供应链深度整合
|
||||
</li>
|
||||
</ul>
|
||||
@@ -136,27 +107,27 @@
|
||||
</div>
|
||||
|
||||
<!-- AI 客服业务 -->
|
||||
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.5s;">
|
||||
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-purple-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-100 transition-colors duration-300">
|
||||
<svg class="w-8 h-8 text-purple-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
<div class="service-card fade-in-up">
|
||||
<div class="service-card-glow purple"></div>
|
||||
<div class="service-card-content">
|
||||
<div class="service-icon purple">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-purple-600 transition-colors">AI 智能客服业务</h3>
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
<h3 class="service-title purple">AI 智能客服业务</h3>
|
||||
<p class="service-description">
|
||||
基于大模型的智能对话系统，7x24小时在线，秒级响应客户咨询。
|
||||
</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<ul class="service-features">
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
自动接待与意图识别
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
智能话术推荐
|
||||
</li>
|
||||
<li class="flex items-center text-slate-700">
|
||||
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<li class="service-feature">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
降低人工成本
|
||||
</li>
|
||||
</ul>
|
||||
@@ -167,21 +138,21 @@
|
||||
</section>
|
||||
|
||||
<!-- 底部 CTA -->
|
||||
<section class="py-20 bg-brand-900 text-white">
|
||||
<div class="max-w-4xl mx-auto text-center px-4">
|
||||
<h2 class="text-3xl font-bold mb-6">准备好提升您的业务了吗？</h2>
|
||||
<p class="text-brand-100 mb-8 text-lg">加入数千家已经在使用我们服务的商家行列，开启智能营销新时代。</p>
|
||||
<a href="auth.html?mode=register" class="inline-block px-10 py-4 bg-white text-brand-900 rounded-lg font-bold text-lg hover:bg-brand-50 transition transform hover:scale-105">
|
||||
<section id="cta" class="cta">
|
||||
<div class="container">
|
||||
<h2 class="cta-title">准备好提升您的业务了吗？</h2>
|
||||
<p class="cta-description">加入数千家已经在使用我们服务的商家行列，开启智能营销新时代。</p>
|
||||
<a href="auth.html?mode=register" class="btn btn-white btn-lg">
|
||||
免费商家入驻
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-slate-900 text-slate-400 py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 红动未来科技. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
717
public/web/main.css
Normal file
717
public/web/main.css
Normal file
@@ -0,0 +1,717 @@
|
||||
/* 基础重置和变量 */
|
||||
:root {
|
||||
--brand-50: #f0f9ff;
|
||||
--brand-100: #e0f2fe;
|
||||
--brand-200: #bae6fd;
|
||||
--brand-400: #38bdf8;
|
||||
--brand-500: #0ea5e9;
|
||||
--brand-600: #0284c7;
|
||||
--brand-700: #0369a1;
|
||||
--brand-900: #0c4a6e;
|
||||
--slate-50: #f8fafc;
|
||||
--slate-100: #f1f5f9;
|
||||
--slate-400: #94a3b8;
|
||||
--slate-600: #475569;
|
||||
--slate-700: #334155;
|
||||
--slate-800: #1e293b;
|
||||
--slate-900: #0f172a;
|
||||
--blue-50: #eff6ff;
|
||||
--blue-100: #dbeafe;
|
||||
--blue-600: #2563eb;
|
||||
--orange-50: #fff7ed;
|
||||
--orange-100: #ffedd5;
|
||||
--orange-600: #ea580c;
|
||||
--purple-50: #faf5ff;
|
||||
--purple-100: #f3e8ff;
|
||||
--purple-600: #9333ea;
|
||||
--green-500: #22c55e;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: var(--slate-50);
|
||||
color: var(--slate-800);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.navbar {
|
||||
background: white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
color: var(--slate-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--brand-600);
|
||||
color: white;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--brand-700);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: white;
|
||||
color: var(--brand-600);
|
||||
border: 1px solid var(--brand-200);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--slate-50);
|
||||
border-color: var(--brand-400);
|
||||
}
|
||||
|
||||
.btn-white {
|
||||
background: white;
|
||||
color: var(--brand-900);
|
||||
}
|
||||
|
||||
.btn-white:hover {
|
||||
background: var(--brand-50);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Hero 区域 */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 8rem 1rem 5rem;
|
||||
background: linear-gradient(135deg, var(--brand-50) 0%, white 50%, var(--brand-50) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-blob {
|
||||
position: absolute;
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
border-radius: 50%;
|
||||
mix-blend-mode: multiply;
|
||||
filter: blur(64px);
|
||||
opacity: 0.3;
|
||||
animation: blob 7s infinite;
|
||||
}
|
||||
|
||||
.hero-blob-1 {
|
||||
top: -5rem;
|
||||
left: -5rem;
|
||||
background: var(--blue-100);
|
||||
}
|
||||
|
||||
.hero-blob-2 {
|
||||
top: -5rem;
|
||||
right: -5rem;
|
||||
background: var(--purple-100);
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--slate-900);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title-gradient {
|
||||
background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.125rem;
|
||||
color: var(--slate-600);
|
||||
max-width: 42rem;
|
||||
margin: 0 auto 2.5rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* 业务板块 */
|
||||
.services {
|
||||
padding: 5rem 1rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--slate-900);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--slate-600);
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.services-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.service-card {
|
||||
position: relative;
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--slate-100);
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--brand-200);
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
.service-card-glow {
|
||||
position: absolute;
|
||||
top: -1.5rem;
|
||||
right: -1.5rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
filter: blur(32px);
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .service-card-glow {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.service-card-glow.blue { background: var(--blue-100); }
|
||||
.service-card-glow.orange { background: var(--orange-100); }
|
||||
.service-card-glow.purple { background: var(--purple-100); }
|
||||
|
||||
.service-card-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.service-icon.blue { background: var(--blue-50); }
|
||||
.service-icon.orange { background: var(--orange-50); }
|
||||
.service-icon.purple { background: var(--purple-50); }
|
||||
|
||||
.service-card:hover .service-icon.blue { background: var(--blue-100); }
|
||||
.service-card:hover .service-icon.orange { background: var(--orange-100); }
|
||||
.service-card:hover .service-icon.purple { background: var(--purple-100); }
|
||||
|
||||
.service-icon svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .service-icon svg {
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
.service-icon.blue svg { color: var(--blue-600); }
|
||||
.service-icon.orange svg { color: var(--orange-600); }
|
||||
.service-icon.purple svg { color: var(--purple-600); }
|
||||
|
||||
.service-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--slate-900);
|
||||
margin-bottom: 1rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .service-title.blue { color: var(--blue-600); }
|
||||
.service-card:hover .service-title.orange { color: var(--orange-600); }
|
||||
.service-card:hover .service-title.purple { color: var(--purple-600); }
|
||||
|
||||
.service-description {
|
||||
color: var(--slate-600);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.service-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.service-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--slate-700);
|
||||
}
|
||||
|
||||
.service-feature svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: var(--green-500);
|
||||
margin-right: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* CTA 区域 */
|
||||
.cta {
|
||||
padding: 5rem 1rem;
|
||||
background: var(--brand-900);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cta-description {
|
||||
color: var(--brand-100);
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: var(--slate-900);
|
||||
color: var(--slate-400);
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes blob {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(30px, -50px) scale(1.1); }
|
||||
66% { transform: translate(-20px, 20px) scale(0.9); }
|
||||
100% { transform: translate(0, 0) scale(1); }
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* ========== Auth 页面样式 ========== */
|
||||
.auth-body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-navbar {
|
||||
background: white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.auth-navbar-container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.auth-back-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.auth-back-link:hover {
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.auth-back-link svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.auth-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
||||
width: 100%;
|
||||
max-width: 28rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--slate-100);
|
||||
}
|
||||
|
||||
.auth-tab {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--slate-400);
|
||||
}
|
||||
|
||||
.auth-tab:hover {
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.auth-tab.active {
|
||||
color: var(--brand-600);
|
||||
border-bottom-color: var(--brand-600);
|
||||
}
|
||||
|
||||
.auth-form-container {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-form.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--slate-700);
|
||||
}
|
||||
|
||||
.form-label .required {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--brand-500);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.form-checkbox input {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.form-link {
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.form-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: var(--brand-600);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background: var(--brand-700);
|
||||
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-submit:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 文件上传区域 */
|
||||
.upload-zone {
|
||||
margin-top: 0.25rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--slate-50);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-zone:hover {
|
||||
border-color: var(--brand-500);
|
||||
background: var(--brand-50);
|
||||
}
|
||||
|
||||
.upload-zone input[type="file"] {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-placeholder svg {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 auto 0.5rem;
|
||||
color: var(--slate-400);
|
||||
}
|
||||
|
||||
.upload-zone:hover .upload-placeholder svg {
|
||||
color: var(--brand-500);
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.upload-text .highlight {
|
||||
color: var(--brand-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--slate-400);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.upload-filename {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.875rem;
|
||||
color: var(--brand-600);
|
||||
font-weight: 500;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.upload-filename.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.upload-placeholder.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--slate-400);
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
Reference in New Issue
Block a user