重构官网页面样式,优化代码结构和可维护性
This commit is contained in:
WUSIJIAN
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>
|
||||
Reference in New Issue
Block a user