复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极速未来 - 豪华汽车体验</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.hero-bg {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('https://picsum.photos/1920/1080?car=1') center/cover;
}
.car-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body class="font-sans antialiased">
<!-- 导航栏 -->
<nav class="bg-black text-white py-4 px-6 sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<div class="text-2xl font-bold">极速未来</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="hover:text-yellow-400">首页</a>
<a href="#models" class="hover:text-yellow-400">车型</a>
<a href="#gallery" class="hover:text-yellow-400">图库</a>
<a href="#contact" class="hover:text-yellow-400">预约试驾</a>
</div>
<button class="md:hidden text-xl">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- 主内容区域 -->
<div id="app" class="bg-gray-50">
<!-- 内容将通过JavaScript动态加载 -->
</div>
<!-- JSON数据 -->
<script id="carData" type="application/json">
{
"brand": "极速未来",
"slogan": "重新定义驾驶体验",
"models": [
{
"id": 1,
"name": "旗舰豪华轿车",
"description": "极致舒适与科技完美融合",
"price": "¥1,280,000起",
"image": "https://picsum.photos/600/400?car=2",
"features": ["智能驾驶系统", "豪华真皮座椅", "4D环绕音响"]
},
{
"id": 2,
"name": "高性能SUV",
"description": "力量与优雅的完美平衡",
"price": "¥980,000起",
"image": "https://picsum.photos/600/400?car=3",
"features": ["全地形模式", "超大空间", "智能四驱系统"]
},
{
"id": 3,
"name": "纯电动跑车",
"description": "零排放，无限可能",
"price": "¥1,580,000起",
"image": "https://picsum.photos/600/400?car=4",
"features": ["800km续航", "3秒破百", "太阳能车顶"]
}
],
"gallery": [
"https://picsum.photos/1200/600?car=5",
"https://picsum.photos/1200/600?car=6",
"https://picsum.photos/1200/600?car=7"
]
}
</script>
<script>
// 加载JSON数据并渲染页面
document.addEventListener('DOMContentLoaded', function() {
const data = JSON.parse(document.getElementById('carData').textContent);
const app = document.getElementById('app');
// 渲染英雄区域
app.innerHTML = `
<section id="home" class="hero-bg text-white h-screen flex items-center">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">${data.slogan}</h1>
<p class="text-xl md:text-2xl mb-8">探索我们的2025年旗舰车型系列</p>
<button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-8 rounded-full text-lg transition duration-300">
立即预约
</button>
</div>
</section>
<!-- 车型展示 -->
<section id="models" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">精选车型</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10" id="model-container">
${data.models.map(model => `
<div class="car-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-500">
<img src="${model.image}" alt="${model.name}展示" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">${model.name}</h3>
<p class="text-gray-600 mb-4">${model.description}</p>
<ul class="mb-4 text-sm text-gray-500">
${model.features.map(feature => `<li class="mb-1"><i class="fas fa-check text-yellow-500 mr-2"></i>${feature}</li>`).join('')}
</ul>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold">${model.price}</span>
<button class="bg-black text-white py-2 px-4 rounded hover:bg-gray-800 transition">详情</button>
</div>
</div>
</div>
`).join('')}
</div>
</div>
</section>
<!-- 图片轮播 -->
<section id="gallery" class="py-20 bg-black text-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">视觉盛宴</h2>
<div class="relative h-96 overflow-hidden rounded-lg" id="gallery-container">
${data.gallery.map((img, index) => `
<div class="absolute inset-0 transition-opacity duration-1000 ${index === 0 ? 'opacity-100' : 'opacity-0'}">
<img src="${img}" alt="汽车展示图${index+1}" class="w-full h-full object-cover">
</div>
`).join('')}
<button id="prev" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 text-white p-2 rounded-full hover:bg-opacity-50">
<i class="fas fa-chevron-left"></i>
</button>
<button id="next" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 text-white p-2 rounded-full hover:bg-opacity-50">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</section>
<!-- 预约表单 -->
<section id="contact" class="py-20 bg-gray-100">
<div class="container mx-auto px-6 max-w-4xl">
<h2 class="text-3xl font-bold text-center mb-16">预约试驾体验</h2>
<form class="bg-white p-8 rounded-lg shadow-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-gray-700 mb-2">姓名</label>
<input type="text" class="w-full px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-yellow-500">
</div>
<div>
<label class="block text-gray-700 mb-2">电话</label>
<input type="tel" class="w-full px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-yellow-500">
</div>
<div>
<label class="block text-gray-700 mb-2">邮箱</label>
<input type="email" class="w-full px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-yellow-500">
</div>
<div>
<label class="block text-gray-700 mb-2">意向车型</label>
<select class="w-full px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-yellow-500">
${data.models.map(model => `<option>${model.name}</option>`).join('')}
</select>
</div>
<div class="md:col-span-2">
<label class="block text-gray-700 mb-2">备注信息</label>
<textarea rows="4" class="w-full px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
</div>
</div>
<button type="submit" class="mt-6 w-full bg-black text-white py-3 px-6 rounded hover:bg-gray-800 transition duration-300">
提交预约
</button>
</form>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-black text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">${data.brand}</h3>
<p class="text-gray-400">${data.slogan}</p>
</div>
<div>
<h4 class="font-bold mb-4">快速链接</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition">首页</a></li>
<li><a href="#models" class="text-gray-400 hover:text-white transition">车型</a></li>
<li><a href="#gallery" class="text-gray-400 hover:text-white transition">图库</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition">预约试驾</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">联系我们</h4>
<ul class="text-gray-400 space-y-2">
<li>400-888-8888</li>
<li>contact@speedfuture.com</li>
<li>上海市浦东新区世纪大道88号</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">关注我们</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weixin text-2xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weibo text-2xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-douyin text-2xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-xiaohongshu text-2xl"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
<p>© 2025 ${data.brand}汽车有限公司. 保留所有权利.</p>
</div>
</div>
</footer>
`;
// 轮播图功能
let currentSlide = 0;
const slides = document.querySelectorAll('#gallery-container > div');
const totalSlides = slides.length;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.style.opacity = i === index ? '1' : '0';
});
}
document.getElementById('next').addEventListener('click', () => {
currentSlide = (currentSlide + 1) % totalSlides;
showSlide(currentSlide);
});
document.getElementById('prev').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
showSlide(currentSlide);
});
// 自动轮播
setInterval(() => {
currentSlide = (currentSlide + 1) % totalSlides;
showSlide(currentSlide);
}, 5000);
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
</script>
</body>
</html>
