设计特点
- 响应式设计：适配桌面、平板和手机等不同设备。
- 现代化UI：使用Tailwind CSS框架,界面简洁美观。
- 功能完整：包含首页、回收流程、价格估算、关于我们和联系方式等核心模块。
- 交互友好：包含价格计算器、表单提交等交互功能。
- 代码清晰：HTML结构清晰，CSS和JavaScript分离,易于理解和修改。
文件结构
为了方便管理,我们建议创建以下文件结构：
（图片来源网络，侵删）
waste-recycling/
├── index.html
├── css/
│ └── style.css
└── js/
└── script.jsHTML 代码 (index.html)
这是页面的主体结构,包含了所有内容模块和导航。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">绿源回收 - 让废品重获新生</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50">
<!-- 导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-50">
<nav class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-recycle text-green-600 text-3xl"></i>
<span class="text-2xl font-bold text-gray-800">绿源回收</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="nav-link text-gray-600 hover:text-green-600 transition">首页</a>
<a href="#process" class="nav-link text-gray-600 hover:text-green-600 transition">回收流程</a>
<a href="#pricing" class="nav-link text-gray-600 hover:text-green-600 transition">价格估算</a>
<a href="#about" class="nav-link text-gray-600 hover:text-green-600 transition">关于我们</a>
<a href="#contact" class="nav-link text-gray-600 hover:text-green-600 transition">联系我们</a>
</div>
<button id="mobile-menu-btn" class="md:hidden text-gray-600">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
<a href="#home" class="block py-2 text-gray-600 hover:text-green-600">首页</a>
<a href="#process" class="block py-2 text-gray-600 hover:text-green-600">回收流程</a>
<a href="#pricing" class="block py-2 text-gray-600 hover:text-green-600">价格估算</a>
<a href="#about" class="block py-2 text-gray-600 hover:text-green-600">关于我们</a>
<a href="#contact" class="block py-2 text-gray-600 hover:text-green-600">联系我们</a>
</div>
</nav>
</header>
<main>
<!-- 首页 Hero Section -->
<section id="home" class="bg-gradient-to-r from-green-500 to-teal-600 text-white py-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">让每一件废品，都有价值</h1>
<p class="text-xl mb-10 max-w-2xl mx-auto">我们致力于为您提供便捷、高效、环保的废品回收服务，共同守护我们的绿色家园。</p>
<a href="#pricing" class="bg-white text-green-600 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-gray-100 transition">立即估价</a>
</div>
</section>
<!-- 回收流程 -->
<section id="process" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">我们的回收流程</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6 bg-white rounded-lg shadow-md">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-phone-alt text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">1. 联系我们</h3>
<p class="text-gray-600">通过电话或在线表单告诉我们您需要回收的废品类型和数量。</p>
</div>
<div class="text-center p-6 bg-white rounded-lg shadow-md">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-truck text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">2. 上门回收</h3>
<p class="text-gray-600">我们的工作人员会与您预约时间，准时上门进行回收。</p>
</div>
<div class="text-center p-6 bg-white rounded-lg shadow-md">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-money-bill-wave text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">3. 现场结算</h3>
<p class="text-gray-600">称重、估价后，我们当场现金支付，方便快捷。</p>
</div>
</div>
</div>
</section>
<!-- 价格估算 -->
<section id="pricing" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">在线价格估算</h2>
<div class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md">
<form id="pricing-form">
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="waste-type">
选择废品类型
</label>
<select id="waste-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
<option value="">请选择...</option>
<option value="paper" data-price="1.5">废纸 (元/公斤)</option>
<option value="plastic" data-price="3.0">塑料瓶 (元/公斤)</option>
<option value="metal" data-price="5.0">废金属 (元/公斤)</option>
<option value="electronics" data-price="8.0">废旧家电 (元/公斤)</option>
</select>
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="weight">
重量 (公斤)
</label>
<input type="number" id="weight" placeholder="请输入重量" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<button type="submit" class="w-full bg-green-600 text-white font-bold py-3 px-4 rounded-md hover:bg-green-700 transition">
计算预估价格
</button>
</form>
<div id="price-result" class="mt-6 p-4 bg-green-50 border border-green-200 rounded-md hidden">
<p class="text-green-800 font-semibold text-lg">预估价格：<span id="estimated-price">0</span> 元</p>
</div>
</div>
</div>
</section>
<!-- 关于我们 -->
<section id="about" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">关于绿源回收</h2>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="环保团队" class="rounded-lg shadow-lg">
</div>
<div class="md:w-1/2">
<p class="text-gray-600 mb-4">
绿源回收成立于2025年，是一家专注于环保再生资源回收利用的企业，我们拥有专业的回收团队和先进的处理设备，致力于为个人和企业提供高效、透明、环保的废品回收解决方案。
</p>
<p class="text-gray-600 mb-4">
我们相信，每一次回收都是对地球的守护，通过我们的努力，已经有超过数百吨的废品得到了妥善处理和再利用，为减少环境污染、节约自然资源贡献了力量。
</p>
<div class="flex space-x-6 text-green-600">
<div class="text-center">
<p class="text-3xl font-bold">500+</p>
<p class="text-gray-600">服务客户</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold">1000+</p>
<p class="text-gray-600">回收吨数</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold">98%</p>
<p class="text-gray-600">客户满意度</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">联系我们</h2>
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4">联系方式</h3>
<div class="space-y-4">
<p class="flex items-center text-gray-600">
<i class="fas fa-map-marker-alt text-green-600 w-6"></i>
<span class="ml-3">北京市朝阳区环保科技园A座101室</span>
</p>
<p class="flex items-center text-gray-600">
<i class="fas fa-phone text-green-600 w-6"></i>
<span class="ml-3">400-123-4567</span>
</p>
<p class="flex items-center text-gray-600">
<i class="fas fa-envelope text-green-600 w-6"></i>
<span class="ml-3">service@lvyuanhuishou.com</span>
</p>
<p class="flex items-center text-gray-600">
<i class="fas fa-clock text-green-600 w-6"></i>
<span class="ml-3">周一至周日 8:00 - 20:00</span>
</p>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">发送消息</h3>
<form id="contact-form">
<div class="mb-4">
<input type="text" placeholder="您的姓名" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<div class="mb-4">
<input type="tel" placeholder="您的电话" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<div class="mb-4">
<textarea placeholder="请输入您的留言" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
</div>
<button type="submit" class="w-full bg-green-600 text-white font-bold py-3 px-4 rounded-md hover:bg-green-700 transition">
提交留言
</button>
</form>
<div id="contact-success" class="mt-4 p-4 bg-green-50 border border-green-200 rounded-md hidden">
<p class="text-green-800">感谢您的留言！我们会尽快与您联系。</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-6 text-center">
<p>© 2025 绿源回收. 保留所有权利. | <a href="#" class="hover:text-green-400">隐私政策</a> | <a href="#" class="hover:text-green-400">使用条款</a></p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
CSS 代码 (css/style.css)
这个文件用于添加一些自定义样式,特别是平滑滚动效果。
/* style.css */
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 导航栏激活状态 */
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 50%;
background-color: #10b981; /* Tailwind green-500 */
transition: all 0.3s ease-in-out;
transform: translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
/* 移动端菜单动画 */
#mobile-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
#mobile-menu.show {
max-height: 300px; /* 足够容纳所有菜单项 */
}
JavaScript 代码 (js/script.js)
这个文件负责处理交互逻辑，如移动端菜单、价格计算器和表单提交。
// script.js
document.addEventListener('DOMContentLoaded', function() {
// 移动端菜单切换
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', function() {
mobileMenu.classList.toggle('show');
});
// 点击导航链接后关闭移动端菜单
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('show');
});
});
// 价格计算器
const pricingForm = document.getElementById('pricing-form');
const priceResult = document.getElementById('price-result');
const estimatedPriceSpan = document.getElementById('estimated-price');
pricingForm.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const wasteTypeSelect = document.getElementById('waste-type');
const weightInput = document.getElementById('weight');
const selectedOption = wasteTypeSelect.options[wasteTypeSelect.selectedIndex];
const pricePerKg = parseFloat(selectedOption.getAttribute('data-price')) || 0;
const weight = parseFloat(weightInput.value) || 0;
if (pricePerKg > 0 && weight > 0) {
const totalPrice = (pricePerKg * weight).toFixed(2);
estimatedPriceSpan.textContent = totalPrice;
priceResult.classList.remove('hidden');
} else {
priceResult.classList.add('hidden');
alert('请选择废品类型并输入有效重量！');
}
});
// 联系表单提交
const contactForm = document.getElementById('contact-form');
const contactSuccess = document.getElementById('contact-success');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// 在实际应用中，这里会使用AJAX将表单数据发送到服务器
// 这里我们只做一个简单的成功提示
contactSuccess.classList.remove('hidden');
contactForm.reset(); // 清空表单
// 3秒后隐藏成功提示
setTimeout(() => {
contactSuccess.classList.add('hidden');
}, 3000);
});
// 滚动时更新导航栏激活状态 (可选)
const sections = document.querySelectorAll('section[id]');
const navLinksAll = document.querySelectorAll('.nav-link');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= (sectionTop - 200)) {
current = section.getAttribute('id');
}
});
navLinksAll.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').slice(1) === current) {
link.classList.add('active');
}
});
});
});
如何使用
- 创建文件：按照上面的文件结构，创建
index.html,css/style.css, 和js/script.js三个文件。 - 复制代码：将对应的代码复制到相应的文件中。
- 打开网页：在浏览器中打开
index.html文件,你就可以看到这个废品回收网站了。
后续可以扩展的功能
- 后端服务：将
js/script.js中的表单提交改为使用fetch或axios向后端API发送数据。 - 用户系统：增加用户注册和登录功能,方便用户管理订单和历史记录。
- 地图集成：在联系我们页面集成地图,显示公司位置。
- 预约系统：增加在线预约回收时间的功能。
- 支付接口：集成微信或支付宝支付,方便线上结算。
（图片来源网络，侵删）
