|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>淘宝网 - 淘！我喜欢</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.search-box { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.search-box:focus-within { |
|
|
border-color: #FF5000; |
|
|
box-shadow: 0 0 5px rgba(255, 80, 0, 0.3); |
|
|
} |
|
|
.category-item:hover .category-icon { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.carousel-item { |
|
|
transition: opacity 0.5s ease; |
|
|
} |
|
|
.carousel-item.hidden { |
|
|
opacity: 0; |
|
|
display: none; |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
.flash-sale-progress { |
|
|
background: linear-gradient(to right, #FF5000 var(--progress), #f0f0f0 var(--progress)); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<div class="bg-orange-500 text-white py-2 px-4"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex space-x-4 text-sm"> |
|
|
<a href="#" class="hover:text-gray-200">亲，请登录</a> |
|
|
<a href="#" class="hover:text-gray-200">免费注册</a> |
|
|
<a href="#" class="hover:text-gray-200">手机逛淘宝</a> |
|
|
</div> |
|
|
<div class="flex space-x-4 text-sm"> |
|
|
<a href="#" class="hover:text-gray-200"><i class="fas fa-user mr-1"></i>我的淘宝</a> |
|
|
<a href="#" class="hover:text-gray-200"><i class="fas fa-heart mr-1"></i>收藏夹</a> |
|
|
<a href="#" class="hover:text-gray-200"><i class="fas fa-shopping-cart mr-1"></i>购物车</a> |
|
|
<a href="#" class="hover:text-gray-200"><i class="fas fa-list mr-1"></i>订单</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="bg-white py-4 shadow-sm"> |
|
|
<div class="container mx-auto flex items-center"> |
|
|
|
|
|
<div class="mr-10"> |
|
|
<a href="#" class="text-3xl font-bold text-orange-500">淘宝</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
<div class="search-box flex border-2 border-orange-300 rounded overflow-hidden"> |
|
|
<input type="text" placeholder="搜索商品/店铺" class="px-4 py-2 w-full focus:outline-none"> |
|
|
<button class="bg-orange-500 text-white px-6 py-2 font-semibold hover:bg-orange-600"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-1 text-xs text-gray-500"> |
|
|
<a href="#" class="mr-2 hover:text-orange-500">连衣裙</a> |
|
|
<a href="#" class="mr-2 hover:text-orange-500">手机</a> |
|
|
<a href="#" class="mr-2 hover:text-orange-500">零食</a> |
|
|
<a href="#" class="mr-2 hover:text-orange-500">运动鞋</a> |
|
|
<a href="#" class="mr-2 hover:text-orange-500">笔记本电脑</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ml-10 relative"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-shopping-cart text-2xl"></i> |
|
|
<span class="ml-1">购物车</span> |
|
|
<span class="absolute -top-2 -right-2 bg-orange-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto py-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative group mr-6"> |
|
|
<button class="flex items-center bg-orange-500 text-white px-4 py-2 rounded-sm"> |
|
|
<i class="fas fa-bars mr-2"></i> |
|
|
<span>全部商品分类</span> |
|
|
</button> |
|
|
<div class="absolute left-0 mt-1 w-48 bg-white shadow-lg rounded-md py-1 z-10 hidden group-hover:block"> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">女装 / 内衣</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">男装 / 运动户外</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">女鞋 / 男鞋 / 箱包</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">美妆 / 个护清洁</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">腕表 / 眼镜 / 珠宝饰品</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">手机 / 数码 / 电脑办公</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">母婴玩具</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">零食 / 茶酒 / 生鲜</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">家装 / 家纺 / 家具</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">汽车 / 二手车</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-700 hover:text-orange-500 font-medium">首页</a> |
|
|
<a href="#" class="text-gray-700 hover:text-orange-500 font-medium">天猫</a> |
|
|
<a href="#" class="text-gray-700 hover:text-orange-500 font-medium">聚划算</a> |
|
|
<a href="#" class="text-gray-700 hover:text-orange-500 font-medium">淘抢购</a> |
|
|
<a href="#" class="text-gray-700 hover:text-orange-500 font-medium">天天特卖</a> |
|
|
<a href="#" class="text-gray-700 hover:text-orange-500 font-medium">有好货</a> |
|
|
<a href="#" class="text-gray-700 hover:text-orange-500 font-medium">淘宝直播</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="container mx-auto mt-4"> |
|
|
<div class="flex"> |
|
|
|
|
|
<aside class="w-56 bg-white rounded shadow-sm mr-4"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-gray-700 mb-3">商品分类</h3> |
|
|
<ul> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-female mr-2 text-orange-400"></i> |
|
|
<span>女装</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-male mr-2 text-blue-400"></i> |
|
|
<span>男装</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-mobile-alt mr-2 text-purple-400"></i> |
|
|
<span>手机数码</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-laptop mr-2 text-indigo-400"></i> |
|
|
<span>电脑办公</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-home mr-2 text-green-400"></i> |
|
|
<span>家居家装</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-utensils mr-2 text-red-400"></i> |
|
|
<span>食品生鲜</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-baby-carriage mr-2 text-pink-400"></i> |
|
|
<span>母婴用品</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-gamepad mr-2 text-yellow-400"></i> |
|
|
<span>玩具乐器</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-car mr-2 text-gray-400"></i> |
|
|
<span>汽车用品</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center text-gray-700 hover:text-orange-500"> |
|
|
<i class="fas fa-heartbeat mr-2 text-red-400"></i> |
|
|
<span>医药保健</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
|
|
|
<div class="bg-white rounded shadow-sm overflow-hidden relative"> |
|
|
<div class="carousel-item"> |
|
|
<img src="https://via.placeholder.com/1000x400/FF5000/FFFFFF?text=淘宝促销活动1" alt="Promotion 1" class="w-full"> |
|
|
</div> |
|
|
<div class="carousel-item hidden"> |
|
|
<img src="https://via.placeholder.com/1000x400/FF9900/FFFFFF?text=淘宝促销活动2" alt="Promotion 2" class="w-full"> |
|
|
</div> |
|
|
<div class="carousel-item hidden"> |
|
|
<img src="https://via.placeholder.com/1000x400/FF3300/FFFFFF?text=淘宝促销活动3" alt="Promotion 3" class="w-full"> |
|
|
</div> |
|
|
<div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> |
|
|
<button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100" data-index="0"></button> |
|
|
<button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100" data-index="1"></button> |
|
|
<button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100" data-index="2"></button> |
|
|
</div> |
|
|
<button class="carousel-prev absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-50 text-gray-800 p-2 rounded-full hover:bg-opacity-80"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<button class="carousel-next absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-50 text-gray-800 p-2 rounded-full hover:bg-opacity-80"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 bg-white rounded shadow-sm p-4"> |
|
|
<h3 class="text-lg font-semibold mb-4">热门分类</h3> |
|
|
<div class="grid grid-cols-5 gap-4"> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-female text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">女装</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-mobile-alt text-blue-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">手机</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-utensils text-green-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">食品</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-laptop text-purple-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">电脑</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-home text-red-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">家居</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-baby text-yellow-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">母婴</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-gamepad text-indigo-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">游戏</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-shoe-prints text-pink-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">鞋靴</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-book text-teal-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">图书</span> |
|
|
</a> |
|
|
<a href="#" class="category-item flex flex-col items-center text-center"> |
|
|
<div class="category-icon w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-2 transition-transform"> |
|
|
<i class="fas fa-ellipsis-h text-gray-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-700">更多</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 bg-white rounded shadow-sm p-4"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<h3 class="text-lg font-semibold mr-4">限时秒杀</h3> |
|
|
<div class="bg-red-500 text-white px-2 py-1 rounded text-xs"> |
|
|
<span class="font-bold">12:00</span> 场 |
|
|
</div> |
|
|
<div class="ml-4 flex items-center"> |
|
|
<div class="text-red-500 font-bold">距结束</div> |
|
|
<div class="ml-2 bg-gray-800 text-white px-2 py-1 rounded text-xs">02</div> |
|
|
<div class="mx-1 text-gray-500">:</div> |
|
|
<div class="bg-gray-800 text-white px-2 py-1 rounded text-xs">15</div> |
|
|
<div class="mx-1 text-gray-500">:</div> |
|
|
<div class="bg-gray-800 text-white px-2 py-1 rounded text-xs">43</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-orange-500">查看更多 <i class="fas fa-angle-right"></i></a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-6 gap-4"> |
|
|
<a href="#" class="product-card transition-transform duration-300"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/150x150/FF5000/FFFFFF?text=商品1" alt="Product 1" class="w-full"> |
|
|
</div> |
|
|
<div class="text-red-500 font-bold text-center">¥49.9</div> |
|
|
<div class="text-xs text-gray-500 text-center line-through">¥99.9</div> |
|
|
<div class="mt-1"> |
|
|
<div class="flash-sale-progress h-1 rounded-full" style="--progress: 70%"></div> |
|
|
<div class="text-xs text-gray-500 mt-1">已售70%</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card transition-transform duration-300"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/150x150/FF9900/FFFFFF?text=商品2" alt="Product 2" class="w-full"> |
|
|
</div> |
|
|
<div class="text-red-500 font-bold text-center">¥89</div> |
|
|
<div class="text-xs text-gray-500 text-center line-through">¥129</div> |
|
|
<div class="mt-1"> |
|
|
<div class="flash-sale-progress h-1 rounded-full" style="--progress: 45%"></div> |
|
|
<div class="text-xs text-gray-500 mt-1">已售45%</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card transition-transform duration-300"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/150x150/FF3300/FFFFFF?text=商品3" alt="Product 3" class="w-full"> |
|
|
</div> |
|
|
<div class="text-red-500 font-bold text-center">¥129</div> |
|
|
<div class="text-xs text-gray-500 text-center line-through">¥199</div> |
|
|
<div class="mt-1"> |
|
|
<div class="flash-sale-progress h-1 rounded-full" style="--progress: 85%"></div> |
|
|
<div class="text-xs text-gray-500 mt-1">已售85%</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card transition-transform duration-300"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/150x150/FF6600/FFFFFF?text=商品4" alt="Product 4" class="w-full"> |
|
|
</div> |
|
|
<div class="text-red-500 font-bold text-center">¥39.9</div> |
|
|
<div class="text-xs text-gray-500 text-center line-through">¥59.9</div> |
|
|
<div class="mt-1"> |
|
|
<div class="flash-sale-progress h-1 rounded-full" style="--progress: 60%"></div> |
|
|
<div class="text-xs text-gray-500 mt-1">已售60%</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card transition-transform duration-300"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/150x150/FF8800/FFFFFF?text=商品5" alt="Product 5" class="w-full"> |
|
|
</div> |
|
|
<div class="text-red-500 font-bold text-center">¥159</div> |
|
|
<div class="text-xs text-gray-500 text-center line-through">¥259</div> |
|
|
<div class="mt-1"> |
|
|
<div class="flash-sale-progress h-1 rounded-full" style="--progress: 30%"></div> |
|
|
<div class="text-xs text-gray-500 mt-1">已售30%</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card transition-transform duration-300"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/150x150/FF7700/FFFFFF?text=商品6" alt="Product 6" class="w-full"> |
|
|
</div> |
|
|
<div class="text-red-500 font-bold text-center">¥79</div> |
|
|
<div class="text-xs text-gray-500 text-center line-through">¥129</div> |
|
|
<div class="mt-1"> |
|
|
<div class="flash-sale-progress h-1 rounded-full" style="--progress: 90%"></div> |
|
|
<div class="text-xs text-gray-500 mt-1">已售90%</div> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 bg-white rounded shadow-sm p-4"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-semibold">猜你喜欢</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="tab-btn active px-3 py-1 bg-orange-500 text-white rounded" data-tab="tab1">热门</button> |
|
|
<button class="tab-btn px-3 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300" data-tab="tab2">新品</button> |
|
|
<button class="tab-btn px-3 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300" data-tab="tab3">特价</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tab-content active" id="tab1"> |
|
|
<div class="grid grid-cols-5 gap-4"> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF5000/FFFFFF?text=推荐商品1" alt="Recommended 1" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">2023新款夏季女装连衣裙韩版修身显瘦气质短袖裙子</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥129</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥259</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售1.2万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF9900/FFFFFF?text=推荐商品2" alt="Recommended 2" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">小米13 Pro 5G智能手机骁龙8Gen2徕卡影像120W快充</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥4799</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥5299</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售5.6万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF3300/FFFFFF?text=推荐商品3" alt="Recommended 3" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">三只松鼠每日坚果750g混合坚果礼盒30包孕妇零食大礼包</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥89</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥129</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售8.9万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF6600/FFFFFF?text=推荐商品4" alt="Recommended 4" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">夏季男士短袖T恤纯棉宽松潮流上衣韩版休闲打底衫</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥59</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥99</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售3.4万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF8800/FFFFFF?text=推荐商品5" alt="Recommended 5" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">华为MatePad 11 2023款平板电脑120Hz高刷2.5K全面屏</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥2799</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥3299</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售2.1万</span> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tab-content" id="tab2"> |
|
|
<div class="grid grid-cols-5 gap-4"> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/0099FF/FFFFFF?text=新品1" alt="New 1" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">2023夏季新款男士冰丝凉感短袖衬衫商务休闲上衣</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥159</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥199</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售2.3万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/0099FF/FFFFFF?text=新品2" alt="New 2" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">OPPO Find X6 Pro 5G智能手机骁龙8Gen2超光影三主摄</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥5999</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥6499</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售1.8万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/0099FF/FFFFFF?text=新品3" alt="New 3" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">夏季新款女士凉鞋时尚百搭平底罗马鞋舒适透气沙滩鞋</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥89</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥129</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售4.5万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/0099FF/FFFFFF?text=新品4" alt="New 4" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">2023新款无线蓝牙耳机降噪运动跑步入耳式高音质</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥199</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥299</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售6.7万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/0099FF/FFFFFF?text=新品5" alt="New 5" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">夏季儿童防晒衣男女童轻薄透气防紫外线外套</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥69</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥99</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售3.2万</span> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tab-content" id="tab3"> |
|
|
<div class="grid grid-cols-5 gap-4"> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF00FF/FFFFFF?text=特价1" alt="Discount 1" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">夏季男士休闲短裤宽松速干运动裤沙滩裤五分裤</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥49</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥89</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售7.8万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF00FF/FFFFFF?text=特价2" alt="Discount 2" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">美的电风扇家用落地扇静音遥控定时立式风扇</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥159</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥229</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售5.6万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF00FF/FFFFFF?text=特价3" alt="Discount 3" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">夏季女士凉拖鞋居家防滑浴室拖鞋软底舒适拖鞋</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥19.9</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥39.9</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售12.3万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF00FF/FFFFFF?text=特价4" alt="Discount 4" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">儿童玩具积木拼装益智男孩女孩大颗粒拼插积木</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥39.9</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥69.9</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售9.8万</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="product-card block p-3 hover:shadow-md transition-all duration-300 rounded"> |
|
|
<div class="bg-gray-100 rounded overflow-hidden mb-2"> |
|
|
<img src="https://via.placeholder.com/200x200/FF00FF/FFFFFF?text=特价5" alt="Discount 5" class="w-full"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-800 mb-1 line-clamp-2">夏季冰丝凉席三件套可折叠席子1.5m1.8m床空调席</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-red-500 font-bold">¥129</span> |
|
|
<span class="ml-2 text-xs text-gray-500 line-through">¥199</span> |
|
|
<span class="ml-auto text-xs text-gray-500">已售6.5万</span> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-white mt-8 border-t"> |
|
|
<div class="container mx-auto py-8 px-4"> |
|
|
<div class="grid grid-cols-5 gap-8"> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">新手上路</h4> |
|
|
<ul class="space-y-2 text-sm text-gray-600"> |
|
|
<li><a href="#" class="hover:text-orange-500">新手专区</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">购物流程</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">会员介绍</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">常见问题</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">付款方式</h4> |
|
|
<ul class="space-y-2 text-sm text-gray-600"> |
|
|
<li><a href="#" class="hover:text-orange-500">支付宝</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">银行卡</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">花呗分期</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">货到付款</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">商家服务</h4> |
|
|
<ul class="space-y-2 text-sm text-gray-600"> |
|
|
<li><a href="#" class="hover:text-orange-500">商家入驻</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">商家中心</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">运营服务</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">物流服务</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">消费者保障</h4> |
|
|
<ul class="space-y-2 text-sm text-gray-600"> |
|
|
<li><a href="#" class="hover:text-orange-500">假一赔十</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">七天无理由退换</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">运费险</a></li> |
|
|
<li><a href="#" class="hover:text-orange-500">售后保障</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">关注我们</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-weixin text-2xl"></i></a> |
|
|
<a href="#" class="text-red-500 hover:text-red-700"><i class="fab fa-weibo text-2xl"></i></a> |
|
|
<a href="#" class="text-green-500 hover:text-green-700"><i class="fab fa-qq text-2xl"></i></a> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<img src="https://via.placeholder.com/100x100" alt="QR Code" class="w-24 h-24"> |
|
|
<p class="text-xs mt-1 text-gray-500">手机淘宝扫码下载</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 pt-8 border-t text-center text-sm text-gray-500"> |
|
|
<p>© 2003-2023 Taobao.com 版权所有</p> |
|
|
<div class="mt-2 flex justify-center space-x-4"> |
|
|
<a href="#" class="hover:text-orange-500">关于淘宝</a> |
|
|
<a href="#" class="hover:text-orange-500">联系我们</a> |
|
|
<a href="#" class="hover:text-orange-500">隐私政策</a> |
|
|
<a href="#" class="hover:text-orange-500">法律声明</a> |
|
|
<a href="#" class="hover:text-orange-500">知识产权</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg md:hidden flex justify-around py-2"> |
|
|
<a href="#" class="flex flex-col items-center text-orange-500"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span class="text-xs mt-1">首页</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center text-gray-600"> |
|
|
<i class="fas fa-search"></i> |
|
|
<span class="text-xs mt-1">发现</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center text-gray-600"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
<span class="text-xs mt-1">购物车</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center text-gray-600"> |
|
|
<i class="fas fa-user"></i> |
|
|
<span class="text-xs mt-1">我的淘宝</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const items = document.querySelectorAll('.carousel-item'); |
|
|
const dots = document.querySelectorAll('.carousel-dot'); |
|
|
const prevBtn = document.querySelector('.carousel-prev'); |
|
|
const nextBtn = document.querySelector('.carousel-next'); |
|
|
let currentIndex = 0; |
|
|
|
|
|
function showItem(index) { |
|
|
items.forEach(item => item.classList.add('hidden')); |
|
|
dots.forEach(dot => dot.classList.remove('bg-orange-500')); |
|
|
|
|
|
items[index].classList.remove('hidden'); |
|
|
dots[index].classList.add('bg-orange-500'); |
|
|
currentIndex = index; |
|
|
} |
|
|
|
|
|
function nextItem() { |
|
|
let newIndex = (currentIndex + 1) % items.length; |
|
|
showItem(newIndex); |
|
|
} |
|
|
|
|
|
function prevItem() { |
|
|
let newIndex = (currentIndex - 1 + items.length) % items.length; |
|
|
showItem(newIndex); |
|
|
} |
|
|
|
|
|
|
|
|
let interval = setInterval(nextItem, 3000); |
|
|
|
|
|
|
|
|
const carousel = document.querySelector('.carousel-item').parentElement; |
|
|
carousel.addEventListener('mouseenter', () => clearInterval(interval)); |
|
|
carousel.addEventListener('mouseleave', () => interval = setInterval(nextItem, 3000)); |
|
|
|
|
|
|
|
|
dots.forEach(dot => { |
|
|
dot.addEventListener('click', () => { |
|
|
clearInterval(interval); |
|
|
showItem(parseInt(dot.dataset.index)); |
|
|
interval = setInterval(nextItem, 3000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
nextBtn.addEventListener('click', () => { |
|
|
clearInterval(interval); |
|
|
nextItem(); |
|
|
interval = setInterval(nextItem, 3000); |
|
|
}); |
|
|
|
|
|
prevBtn.addEventListener('click', () => { |
|
|
clearInterval(interval); |
|
|
prevItem(); |
|
|
interval = setInterval(nextItem, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
const tabBtns = document.querySelectorAll('.tab-btn'); |
|
|
tabBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
tabBtns.forEach(b => b.classList.remove('active', 'bg-orange-500', 'text-white')); |
|
|
tabBtns.forEach(b => b.classList.add('bg-gray-200', 'text-gray-700')); |
|
|
|
|
|
btn.classList.add('active', 'bg-orange-500', 'text-white'); |
|
|
btn.classList.remove('bg-gray-200', 'text-gray-700'); |
|
|
|
|
|
const tabId = btn.dataset.tab; |
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
showItem(0); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Spinerce/taobao" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
