256 lines
11 KiB
HTML
256 lines
11 KiB
HTML
|
<!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 rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
primary: '#FF6B35',
|
||
|
|
secondary: '#FFD93D'
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
'none': '0px',
|
||
|
|
'sm': '2px',
|
||
|
|
'DEFAULT': '4px',
|
||
|
|
'md': '8px',
|
||
|
|
'lg': '12px',
|
||
|
|
'xl': '16px',
|
||
|
|
'2xl': '20px',
|
||
|
|
'3xl': '24px',
|
||
|
|
'full': '9999px',
|
||
|
|
'button': '4px'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
color: #333333;
|
||
|
|
padding-top: 60px;
|
||
|
|
padding-bottom: 60px;
|
||
|
|
}
|
||
|
|
.category-item {
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
.category-item.active {
|
||
|
|
background-color: #FFF5F0;
|
||
|
|
color: #FF6B35;
|
||
|
|
border-left: 3px solid #FF6B35;
|
||
|
|
}
|
||
|
|
.hot-category-card {
|
||
|
|
scroll-snap-align: start;
|
||
|
|
}
|
||
|
|
.search-input {
|
||
|
|
padding-left: 36px;
|
||
|
|
}
|
||
|
|
.search-icon {
|
||
|
|
left: 12px;
|
||
|
|
}
|
||
|
|
.fab-button {
|
||
|
|
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-white">
|
||
|
|
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<nav class="fixed top-0 left-0 w-full bg-white shadow-sm z-10 flex items-center justify-between px-4 py-3">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="font-['Pacifico'] text-xl text-primary">logo</div>
|
||
|
|
</div>
|
||
|
|
<div class="relative flex-1 mx-4">
|
||
|
|
<i class="fas fa-search absolute top-1/2 transform -translate-y-1/2 text-gray-400 search-icon"></i>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="搜索商品"
|
||
|
|
class="w-full bg-gray-100 rounded-full py-2 px-4 text-sm search-input focus:outline-none"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<button class="text-gray-600">
|
||
|
|
<i class="fas fa-bell text-lg"></i>
|
||
|
|
</button>
|
||
|
|
<button class="text-gray-600 relative">
|
||
|
|
<i class="fas fa-shopping-cart text-lg"></i>
|
||
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- 主体内容 -->
|
||
|
|
<main class="flex flex-col h-full">
|
||
|
|
|
||
|
|
<!-- 分类展示区域 -->
|
||
|
|
<div class="flex flex-1 overflow-hidden">
|
||
|
|
<!-- 左侧一级分类 -->
|
||
|
|
<div class="w-1/3 bg-gray-50 overflow-y-auto">
|
||
|
|
<div class="category-item active px-4 py-3 text-sm font-medium">女装</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">男装</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">童装</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">鞋靴</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">箱包</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">配饰</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">美妆</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">家居</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">数码</div>
|
||
|
|
<div class="category-item px-4 py-3 text-sm font-medium">运动</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 右侧二级分类及商品预览 -->
|
||
|
|
<div class="w-2/3 overflow-y-auto p-4">
|
||
|
|
<h2 class="text-lg font-semibold mb-3">连衣裙</h2>
|
||
|
|
<div class="grid grid-cols-3 gap-3 mb-6">
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/1161650320183d2ea6cf4543cf5254de.jpg" alt="夏季连衣裙" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">夏季连衣裙</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/4dfd45ee3835c20f3098617588587b6c.jpg" alt="派对连衣裙" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">派对连衣裙</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/c804a96a983604ab10b4d256a102dc18.jpg" alt="休闲连衣裙" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">休闲连衣裙</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 class="text-lg font-semibold mb-3">上装</h2>
|
||
|
|
<div class="grid grid-cols-3 gap-3 mb-6">
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/b8d952b3c1ff977985a3e5027a214140.jpg" alt="T恤" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">T恤</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/0a195e5ee9ef23d5d3a7ca2daa8fe28b.jpg" alt="衬衫" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">衬衫</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/bde9ac446343bd1c9b712bef72f3014d.jpg" alt="毛衣" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">毛衣</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 class="text-lg font-semibold mb-3">下装</h2>
|
||
|
|
<div class="grid grid-cols-3 gap-3">
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/63377b13080b57e5c7068d8c0e25b8c9.jpg" alt="牛仔裤" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">牛仔裤</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/b846f39788997cf1b9da1d0ecf04b7b3.jpg" alt="半身裙" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">半身裙</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center">
|
||
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/a7b826a70a829baa4a80b77cbc854e48.jpg" alt="短裤" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-center">短裤</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 热门推荐板块 -->
|
||
|
|
<div class="px-4 py-5 border-t border-gray-100">
|
||
|
|
<h2 class="text-lg font-semibold mb-3">热门推荐</h2>
|
||
|
|
<div class="flex overflow-x-auto space-x-4 pb-2 scrollbar-hide">
|
||
|
|
<div class="hot-category-card flex-shrink-0 w-32">
|
||
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
|
||
|
|
<div class="h-24 overflow-hidden">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/946c6fb7a236f52719924a165e1b7f68.jpg" alt="夏季新品" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-2">
|
||
|
|
<p class="text-xs font-medium text-center truncate">夏季新品</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hot-category-card flex-shrink-0 w-32">
|
||
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
|
||
|
|
<div class="h-24 overflow-hidden">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/826f9d2e068ef7ba46c6d78de53ab27d.jpg" alt="限时折扣" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-2">
|
||
|
|
<p class="text-xs font-medium text-center truncate">限时折扣</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hot-category-card flex-shrink-0 w-32">
|
||
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
|
||
|
|
<div class="h-24 overflow-hidden">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/0d6d6d9dc05126ca227bf583131971e5.jpg" alt="畅销单品" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-2">
|
||
|
|
<p class="text-xs font-medium text-center truncate">畅销单品</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hot-category-card flex-shrink-0 w-32">
|
||
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
|
||
|
|
<div class="h-24 overflow-hidden">
|
||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/5aa552154933b6bde3f6c308765137ae.jpg" alt="新品上架" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-2">
|
||
|
|
<p class="text-xs font-medium text-center truncate">新品上架</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 底部导航 -->
|
||
|
|
<nav class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 grid grid-cols-4 py-2 z-10">
|
||
|
|
<a href="#" class="flex flex-col items-center justify-center text-xs text-gray-500">
|
||
|
|
<i class="fas fa-home text-lg mb-1"></i>
|
||
|
|
<span>首页</span>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="flex flex-col items-center justify-center text-xs text-primary">
|
||
|
|
<i class="fas fa-th-large text-lg mb-1"></i>
|
||
|
|
<span>分类</span>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="flex flex-col items-center justify-center text-xs text-gray-500">
|
||
|
|
<i class="fas fa-shopping-cart text-lg mb-1"></i>
|
||
|
|
<span>购物车</span>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="flex flex-col items-center justify-center text-xs text-gray-500">
|
||
|
|
<i class="fas fa-user text-lg mb-1"></i>
|
||
|
|
<span>我的</span>
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- FAB 悬浮按钮 -->
|
||
|
|
<button class="fab-button fixed bottom-20 right-4 bg-primary text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg">
|
||
|
|
<i class="fas fa-qrcode text-xl"></i>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|