云商城24小时在线下单页面设计方案
根据您的需求，我设计了一个现代化、响应式的云商城下单页面，这个页面融合了直观的导航系统、吸引人的商品展示区、便捷的购物车功能和流畅的结算流程,确保用户可以24小时轻松完成在线购物。
以下是完整的实现代码,包含了所有核心功能和视觉设计：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">云商城 - 24小时在线下单</title>
<!-- 引入外部资源 -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<!-- Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#FF7D00',
neutral: {
100: '#F5F7FA',
200: '#E4E7ED',
300: '#C0C4CC',
400: '#909399',
500: '#606266',
600: '#303133',
700: '#1E1E1E',
}
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-hover {
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}
.btn-primary {
@apply bg-primary text-white px-4 py-2 rounded-lg transition-all duration-200 hover:bg-primary/90 active:scale-95;
}
.btn-secondary {
@apply bg-secondary text-white px-4 py-2 rounded-lg transition-all duration-200 hover:bg-secondary/90 active:scale-95;
}
.input-field {
@apply border border-neutral-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
}
}
</style>
<!-- 引入字体 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="font-inter bg-neutral-100 text-neutral-700">
<!-- 导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4">
<nav class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center">
<a href="#" class="text-primary font-bold text-2xl">云商城</a>
</div>
<!-- 分类导航 - 桌面端 -->
<div class="hidden md:flex items-center space-x-6">
<a href="#" class="text-neutral-600 hover:text-primary transition-colors">家电</a>
<a href="#" class="text-neutral-600 hover:text-primary transition-colors">数码</a>
<a href="#" class="text-neutral-600 hover:text-primary transition-colors">服装</a>
<a href="#" class="text-neutral-600 hover:text-primary transition-colors">美妆</a>
<a href="#" class="text-neutral-600 hover:text-primary transition-colors">食品</a>
</div>
<!-- 右侧功能区 -->
<div class="flex items-center space-x-4">
<!-- 搜索框 -->
<div class="hidden md:flex items-center bg-neutral-100 rounded-full px-3 py-1">
<input type="text" placeholder="搜索商品..." class="bg-transparent outline-none w-40">
<button class="text-neutral-500"><i class="fa fa-search"></i></button>
</div>
<!-- 购物车 -->
<div class="relative cursor-pointer" id="cartToggle">
<i class="fa fa-shopping-cart text-xl"></i>
<span class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center" id="cartCount">0</span>
</div>
<!-- 用户中心 -->
<div class="cursor-pointer">
<i class="fa fa-user-circle text-xl"></i>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden cursor-pointer">
<i class="fa fa-bars text-xl"></i>
</div>
</div>
</nav>
</div>
</header>
<!-- 主Banner -->
<section class="bg-primary/5 py-6">
<div class="container mx-auto px-4">
<div class="relative rounded-xl overflow-hidden h-[200px] md:h-[400px]">
<!-- Banner图片 -->
<img src="https://picsum.photos/1200/400" alt="促销活动" class="w-full h-full object-cover">
<!-- Banner内容 -->
<div class="absolute top-1/2 left-1/4 transform -translate-x-1/2 -translate-y-1/2 text-white">
<h2 class="text-2xl md:text-4xl font-bold mb-2">限时特惠</h2>
<p class="text-lg md:text-xl mb-4">全场商品8折起</p>
<button class="btn-secondary">立即抢购</button>
</div>
<!-- 轮播控制 -->
<div class="absolute bottom-4 right-4 flex space-x-2">
<span class="w-3 h-3 rounded-full bg-white/50 cursor-pointer"></span>
<span class="w-3 h-3 rounded-full bg-white cursor-pointer"></span>
<span class="w-3 h-3 rounded-full bg-white/50 cursor-pointer"></span>
</div>
</div>
</div>
</section>
<!-- 商品分类快捷入口 -->
<section class="container mx-auto px-4 py-8">
<div class="grid grid-cols-4 md:grid-cols-8 gap-4">
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-television text-primary"></i>
</div>
<span class="text-sm">家电</span>
</div>
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-mobile text-primary"></i>
</div>
<span class="text-sm">手机</span>
</div>
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-laptop text-primary"></i>
</div>
<span class="text-sm">电脑</span>
</div>
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-headphones text-primary"></i>
</div>
<span class="text-sm">耳机</span>
</div>
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-shoe-prints text-primary"></i>
</div>
<span class="text-sm">鞋服</span>
</div>
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-gift text-primary"></i>
</div>
<span class="text-sm">礼品</span>
</div>
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-cutlery text-primary"></i>
</div>
<span class="text-sm">食品</span>
</div>
<div class="flex flex-col items-center card-hover">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
<i class="fa fa-plus text-primary"></i>
</div>
<span class="text-sm">更多</span>
</div>
</div>
</section>
<!-- 热门商品区 -->
<section class="container mx-auto px-4 py-8">
<h2 class="text-2xl font-bold mb-6">热门推荐</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- 商品卡片1 -->
<div class="bg-white rounded-xl overflow-hidden card-hover" data-id="1" data-name="智能手表" data-price="1299" data-img="https://picsum.photos/300/300?random=1">
<div class="relative">
<img src="https://picsum.photos/300/300?random=1" alt="智能手表" class="w-full h-48 object-cover">
<span class="absolute top-2 left-2 bg-secondary text-white text-xs px-2 py-1 rounded">热销</span>
</div>
<div class="p-4">
<h3 class="font-medium mb-1">智能手表 心率监测 长续航</h3>
<div class="flex items-center mb-2">
<span class="text-secondary font-bold text-lg">¥1299</span>
<span class="text-neutral-400 text-sm line-through ml-2">¥1599</span>
</div>
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-sm"><i class="fa fa-shopping-cart mr-1"></i>1288人已购</span>
<button class="add-to-cart btn-primary text-sm">加入购物车</button>
</div>
</div>
</div>
<!-- 商品卡片2 -->
<div class="bg-white rounded-xl overflow-hidden card-hover" data-id="2" data-name="无线耳机" data-price="899" data-img="https://picsum.photos/300/300?random=2">
<div class="relative">
<img src="https://picsum.photos/300/300?random=2" alt="无线耳机" class="w-full h-48 object-cover">
<span class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded">新品</span>
</div>
<div class="p-4">
<h3 class="font-medium mb-1">无线蓝牙耳机 主动降噪 高清音质</h3>
<div class="flex items-center mb-2">
<span class="text-secondary font-bold text-lg">¥899</span>
<span class="text-neutral-400 text-sm line-through ml-2">¥999</span>
</div>
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-sm"><i class="fa fa-shopping-cart mr-1"></i>865人已购</span>
<button class="add-to-cart btn-primary text-sm">加入购物车</button>
</div>
</div>
</div>
<!-- 商品卡片3 -->
<div class="bg-white rounded-xl overflow-hidden card-hover" data-id="3" data-name="智能手机" data-price="3999" data-img="https://picsum.photos/300/300?random=3">
<div class="relative">
<img src="https://picsum.photos/300/300?random=3" alt="智能手机" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h3 class="font-medium mb-1">全面屏智能手机 5G 大内存</h3>
<div class="flex items-center mb-2">
<span class="text-secondary font-bold text-lg">¥3999</span>
<span class="text-neutral-400 text-sm line-through ml-2">¥4299</span>
</div>
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-sm"><i class="fa fa-shopping-cart mr-1"></i>2345人已购</span>
<button class="add-to-cart btn-primary text-sm">加入购物车</button>
</div>
</div>
</div>
<!-- 商品卡片4 -->
<div class="bg-white rounded-xl overflow-hidden card-hover" data-id="4" data-name="平板电脑" data-price="2499" data-img="https://picsum.photos/300/300?random=4">
<div class="relative">
<img src="https://picsum.photos/300/300?random=4" alt="平板电脑" class="w-full h-48 object-cover">
<span class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded">折扣</span>
</div>
<div class="p-4">
<h3 class="font-medium mb-1">平板电脑 高清屏幕 学习娱乐</h3>
<div class="flex items-center mb-2">
<span class="text-secondary font-bold text-lg">¥2499</span>
<span class="text-neutral-400 text-sm line-through ml-2">¥2799</span>
</div>
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-sm"><i class="fa fa-shopping-cart mr-1"></i>1567人已购</span>
<button class="add-to-cart btn-primary text-sm">加入购物车</button>
</div>
</div>
</div>
</div>
</section>
<!-- 购物车模态框 -->
<div id="cartModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden transition-opacity duration-300">
<div class="bg-white rounded-xl w-full max-w-md max-h-[80vh] overflow-y-auto transform transition-transform duration-300 scale-95 opacity-0" id="cartContent">
<div class="p-4 border-b flex justify-between items-center">
<h3 class="font-bold text-xl">购物车</h3>
<button id="closeCart" class="text-neutral-500 hover:text-neutral-700"><i class="fa fa-times"></i></button>
</div>
<!-- 购物车为空 -->
<div id="emptyCart" class="p-8 text-center">
<i class="fa fa-shopping-cart text-5xl text-neutral-300 mb-4"></i>
<p class="text-neutral-500">您的购物车还是空的</p>
<button id="continueShopping" class="mt-4 btn-primary">继续购物</button>
</div>
<!-- 购物车商品列表 -->
<div id="cartItems" class="hidden">
<!-- 商品项将通过JS动态添加 -->
</div>
<!-- 购物车底部 -->
<div id="cartFooter" class="p-
