html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1688类B2B平台原型</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>
.phone-mockup {
width: 390px;
height: 844px;
border-radius: 40px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
position: relative;
background: #f8f8f8;
margin: 20px auto;
}
.screen {
width: 100%;
height: 100%;
overflow-y: auto;
background: white;
}
.status-bar {
height: 44px;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
font-size: 14px;
border-bottom: 1px solid #f0f0f0;
}
.tab-bar {
height: 83px;
background: white;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #f0f0f0;
position: absolute;
bottom: 0;
width: 100%;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #666;
font-size: 10px;
}
.tab-item.active {
color: #FF6A00;
}
.tab-item i {
font-size: 22px;
margin-bottom: 4px;
}
.page {
display: none;
height: calc(100% - 44px - 83px);
overflow-y: auto;
}
.page.active {
display: block;
}
.product-card {
transition: all 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.category-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: #FFF5E6;
display: flex;
align-items: center;
justify-content: center;
color: #FF6A00;
font-size: 20px;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-8">
<h1 class="text-3xl font-bold text-center mb-8">1688类B2B平台高保真原型</h1>
<!-- 首页 -->
<div class="phone-mockup">
<div class="screen">
<div class="status-bar">
<span>9:41</span>
<div class="flex space-x-1">
<i class="fas fa-signal"></i>
<i class="fas fa-wifi"></i>
<i class="fas fa-battery-three-quarters"></i>
</div>
</div>
<div id="home-page" class="page active">
<!-- 搜索栏 -->
<div class="p-4">
<div class="relative">
<input type="text" placeholder="搜索商品、供应商"
class="w-full py-2 px-4 pl-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
<i class="fas fa-camera absolute right-3 top-3 text-gray-400"></i>
</div>
</div>
<!-- 轮播图 -->
<div class="px-4">
<div class="relative rounded-xl overflow-hidden h-40 bg-gradient-to-r from-orange-400 to-orange-600 flex items-center justify-center text-white">
<div class="text-center">
<h3 class="text-xl font-bold">1688源头厂货直销</h3>
<p class="text-sm">工厂直供 · 一件代发</p>
</div>
<div class="absolute bottom-2 flex space-x-1">
<div class="w-2 h-2 rounded-full bg-white"></div>
<div class="w-2 h-2 rounded-full bg-white opacity-30"></div>
<div class="w-2 h-2 rounded-full bg-white opacity-30"></div>
</div>
</div>
</div>
<!-- 快捷入口 -->
<div class="grid grid-cols-5 gap-2 p-4">
<div class="flex flex-col items-center">
<div class="category-icon">
<i class="fas fa-tshirt"></i>
</div>
<span class="text-xs mt-1">服装</span>
</div>
<div class="flex flex-col items-center">
<div class="category-icon">
<i class="fas fa-home"></i>
</div>
<span class="text-xs mt-1">家居</span>
</div>
<div class="flex flex-col items-center">
<div class="category-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<span class="text-xs mt-1">数码</span>
</div>
<div class="flex flex-col items-center">
<div class="category-icon">
<i class="fas fa-utensils"></i>
</div>
<span class="text-xs mt-1">食品</span>
</div>
<div class="flex flex-col items-center">
<div class="category-icon">
<i class="fas fa-ellipsis-h"></i>
</div>
<span class="text-xs mt-1">更多</span>
</div>
</div>
<!-- 活动专区 -->
<div class="px-4 mb-4">
<div class="flex justify-between items-center mb-2">
<h3 class="font-bold text-lg">活动专区</h3>
<a href="#" class="text-sm text-orange-500">查看更多 <i class="fas fa-chevron-right"></i></a>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-white rounded-lg overflow-hidden shadow-sm">
<div class="h-24 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center text-white">
<i class="fas fa-gem text-3xl"></i>
</div>
<div class="p-2">
<h4 class="font-medium text-sm">新客专享</h4>
<p class="text-xs text-gray-500">首单立减50元</p>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-sm">
<div class="h-24 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center text-white">
<i class="fas fa-box-open text-3xl"></i>
</div>
<div class="p-2">
<h4 class="font-medium text-sm">批发特惠</h4>
<p class="text-xs text-gray-500">满1000减100</p>
</div>
</div>
</div>
</div>
<!-- 推荐商品 -->
<div class="px-4 mb-4">
<div class="flex justify-between items-center mb-2">
<h3 class="font-bold text-lg">热销商品</h3>
<a href="#" class="text-sm text-orange-500">查看更多 <i class="fas fa-chevron-right"></i></a>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm">
<div class="relative">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="商品图片" class="w-full h-32 object-cover">
<div class="absolute top-2 right-2 bg-orange-500 text-white text-xs px-1 rounded">热销</div>
</div>
<div class="p-2">
<h4 class="font-medium text-sm line-clamp-2">新款男士商务手表 防水夜光多功能运动手表</h4>
<div class="flex items-center mt-1">
<span class="text-orange-500 font-bold text-sm">¥68.00</span>
<span class="text-xs text-gray-400 ml-1 line-through">¥128.00</span>
</div>
<div class="flex items-center mt-1 text-xs text-gray-500">
<span>1000+人付款</span>
<span class="ml-2">广东 深圳</span>
</div>
</div>
</div>
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm">
<div class="relative">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="商品图片" class="w-full h-32 object-cover">
</div>
<div class="p-2">
<h4 class="font-medium text-sm line-clamp-2">无线蓝牙耳机 高音质降噪运动耳机 超长续航</h4>
<div class="flex items-center mt-1">
<span class="text-orange-500 font-bold text-sm">¥89.00</span>
<span class="text-xs text-gray-400 ml-1 line-through">¥159.00</span>
</div>
<div class="flex items-center mt-1 text-xs text-gray-500">
<span>2000+人付款</span>
<span class="ml-2">浙江 杭州</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 分类页 -->
<div id="category-page" class="page">
<div class="p-4">
<h2 class="text-xl font-bold mb-4">商品分类</h2>
<div class="grid grid-cols-4 gap-4">
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-500">
<i class="fas fa-tshirt"></i>
</div>
<span class="text-xs mt-2">服装</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-500">
<i class="fas fa-home"></i>
</div>
<span class="text-xs mt-2">家居</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-500">
<i class="fas fa-mobile-alt"></i>
</div>
<span class="text-xs mt-2">数码</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-500">
<i class="fas fa-utensils"></i>
</div>
<span class="text-xs mt-2">食品</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center text-red-500">
<i class="fas fa-baby"></i>
</div>
<span class="text-xs mt-2">母婴</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-500">
<i class="fas fa-shoe-prints"></i>
</div>
<span class="text-xs mt-2">鞋靴</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500">
<i class="fas fa-briefcase"></i>
</div>
<span class="text-xs mt-2">箱包</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center text-pink-500">
<i class="fas fa-gem"></i>
</div>
<span class="text-xs mt-2">珠宝</span>
</div>
</div>
<div class="mt-6">
<h3 class="font-bold mb-2">热门分类</h3>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">手机配件</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">家居装饰</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">运动户外</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">美妆个护</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">办公用品</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">汽车用品</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">宠物用品</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">工业品</span>
</div>
</div>
</div>
</div>
<!-- 商品详情页 -->
<div id="product-detail-page" class="page">
<div class="relative">
<!-- 商品图片轮播 -->
<div class="swiper h-64 bg-gray-100 relative">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="商品图片" class="w-full h-full object-contain">
<div class="absolute top-4 right-4">
<button class="w-8 h-8 bg-black bg-opacity-40 rounded-full flex items-center justify-center">
<i class="fas fa-share-alt text-white"></i>
</button>
</div>
<div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-1">
<div class="w-2 h-2 rounded-full bg-white"></div>
<div class="w-2 h-2 rounded-full bg-white opacity-30"></div>
<div class="w-2 h-2 rounded-full bg-white opacity-30"></div>
</div>
</div>
<!-- 返回按钮 -->
<button class="absolute top-4 left-4 w-8 h-8 bg-black bg-opacity-40 rounded-full flex items-center justify-center">
<i class="fas fa-chevron-left text-white"></i>
</button>
</div>
<div class="p-4">
<!-- 商品基本信息 -->
<div class="mb-4">
<h1 class="text-lg font-bold mb-1">新款男士商务手表 防水夜光多功能运动手表</h1>
<p class="text-sm text-gray-500 mb-2">厂家直销 | 7天无理由退货 | 48小时发货</p>
<div class="flex items-center">
<div class="flex items-center text-orange-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span class="text-xs ml-1">4.8</span>
</div>
<span class="text-xs text-gray-500 ml-2">500+评价</span>
<span class="text-xs text-gray-500 ml-2">1000+人付款</span>
</div>
</div>
<!-- 价格信息 -->
<div class="bg-orange-50 p-3 rounded-lg mb-4">
<div class="flex items-end">
<span class="text-2xl font-bold text-orange-500">¥68.00</span>
<span class="text-sm text-gray-500 ml-2 line-through">¥128.00</span>
<span class="ml-auto text-sm bg-orange-500 text-white px-2 py-1 rounded">5.3折</span>
</div>
<div class="flex justify-between mt-2 text-xs text-gray-600">
<span>起批量: 1件</span>
<span>库存: 9999件</span>
<span>发货地: 广东 深圳</span>
</div>
</div>
<!-- 优惠活动 -->
<div class="border border-orange-200 rounded-lg p-3 mb-4">
<div class="flex items-center text-orange-500 mb-2">
<i class="fas fa-tag mr-1"></i>
<span class="text-sm font-medium">优惠活动</span>
</div>
<div class="text-sm">
<p class="mb-1">· 满1000元减100元</p>
<p class="mb-1">· 新客首单立减20元</p>
<p>· 2件9折，5件8折</p>
</div>
</div>
<!-- 规格选择 -->
<div class="mb-4">
<h3 class="font-medium mb-2">选择规格</h3>
<div class="flex flex-wrap gap-2">
<button class="px-3 py-1 border rounded-full text-sm">黑色</button>
<button class="px-3 py-1 border rounded-full text-sm bg-orange-500 text-white">银色</button>
<button class="px-3 py-1 border rounded-full text-sm">金色</button>
<button class="px-3 py-1 border rounded-full text-sm">玫瑰金</button>
</div>
</div>
<!-- 数量选择 -->
<div class="mb-4">
<h3 class="font-medium mb-2">购买数量</h3>
<div class="flex items-center">
<button class="w-8 h-8 border rounded flex items-center justify-center">-</button>
<input type="text" value="1" class="w-12 h-8 border-t border-b text-center">
<button class="w-8 h-8 border rounded flex items-center justify-center">+</button>
<span class="text-sm text-gray-500 ml-2">件 (库存9999件)</span>
</div>
</div>
<!-- 供应商信息 -->
<div class="border-t border-b py-3 mb-4">
<div class="flex items-center">
<img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="供应商头像" class="w-10 h-10 rounded-full object-cover">
<div class="ml-2">
<h4 class="font-medium">深圳智能手表厂</h4>
<div class="flex items-center text-xs text-gray-500">
<span>3年</span>
<span class="mx-1">·</span>
<span>回头率: 45%</span>
</div>
</div>
<button class="ml-auto px-3 py-1 border border-orange-500 text-orange-500 rounded-full text-sm flex items-center">
<i class="fas fa-store mr-1"></i> 进店逛逛
</button>
</div>
</div>
</div>
<!-- 底部操作栏 -->
<div class="fixed bottom-16 left-0 right-0 bg-white border-t p-2 flex">
<button class="w-12 h-10 flex flex-col items-center justify-center text-gray-500 text-xs">
<i class="far fa-heart text-lg"></i>
<span>收藏</span>
</button>
<button class="w-12 h-10 flex flex-col items-center justify-center text-gray-500 text-xs">
<i class="fas fa-comment-dots text-lg"></i>
<span>咨询</span>
</button>
<button class="flex-1 bg-orange-500 text-white rounded-full mx-2 flex items-center justify-center">
<i class="fas fa-shopping-cart mr-1"></i> 加入进货单
</button>
<button class="flex-1 bg-red-500 text-white rounded-full flex items-center justify-center">
立即订购
</button>
</div>
</div>
<!-- 搜索页 -->
<div id="search-page" class="page">
<div class="p-4">
<!-- 搜索栏 -->
<div class="relative mb-4">
<input type="text" placeholder="搜索商品、供应商"
class="w-full py-2 px-4 pl-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
<button class="absolute right-3 top-2 text-orange-500">取消</button>
</div>
<!-- 搜索历史 -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium">搜索历史</h3>
<button class="text-gray-400">
<i class="fas fa-trash-alt"></i>
</button>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">手表</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">蓝牙耳机</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">T恤</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">手机壳</span>
</div>
</div>
<!-- 热门搜索 -->
<div>
<h3 class="font-medium mb-2">热门搜索</h3>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">夏季新款</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">防晒衣</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">运动鞋</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">充电宝</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">行李箱</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">太阳镜</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">防晒霜</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">泳衣</span>
</div>
</div>
</div>
</div>
<!-- 购物车页 -->
<div id="cart-page" class="page">
<div class="p-4">
<h2 class="text-xl font-bold mb-4">进货单</h2>
<!-- 购物车商品 -->
<div class="bg-white rounded-lg shadow-sm p-3 mb-3">
<div class="flex items-center mb-2">
<input type="checkbox" checked class="mr-2">
<img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="供应商头像" class="w-6 h-6 rounded-full object-cover">
<span class="ml-1 text-sm font-medium">深圳智能手表厂</span>
</div>
<div class="flex items-start border-b pb-3 mb-3">
<input type="checkbox" checked class="mt-4 mr-2">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="商品图片" class="w-20 h-20 object-cover rounded">
<div class="ml-2 flex-1">
<h4 class="text-sm line-clamp-2">新款男士商务手表 防水夜光多功能运动手表</h4>
<div class="flex items-center mt-1">
<span class="text-orange-500 font-bold text-sm">¥68.00</span>
<span class="text-xs text-gray-400 ml-1 line-through">¥128.00</span>
</div>
<div class="flex justify-between items-center mt-2">
<div class="flex items-center">
<button class="w-6 h-6 border rounded flex items-center justify-center">-</button>
<input type="text" value="1" class="w-8 h-6 border-t border-b text-center text-sm">
<button class="w-6 h-6 border rounded flex items-center justify-center">+</button>
</div>
<button class="text-gray-400">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
<div class="flex items-start">
<input type="checkbox" checked class="mt-4 mr-2">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="商品图片" class="w-20 h-20 object-cover rounded">
<div class="ml-2 flex-1">
<h4 class="text-sm line-clamp-2">无线蓝牙耳机 高音质降噪运动耳机 超长续航</h4>
<div class="flex items-center mt-1">
<span class="text-orange-500 font-bold text-sm">¥89.00</span>
<span class="text-xs text-gray-400 ml-1 line-through">¥159.00</span>
</div>
<div class="flex justify-between items-center mt-2">
<div class="flex items-center">
<button class="w-6 h-6 border rounded flex items-center justify-center">-</button>
<input type="text" value="2" class="w-8 h-6 border-t border-b text-center text-sm">
<button class="w-6 h-6 border rounded flex items-center justify-center">+</button>
</div>
<button class="text-gray-400">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
<!-- 推荐商品 -->
<div>
<h3 class="font-medium mb-2">猜你喜欢</h3>
<div class="grid grid-cols-2 gap-3">
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="商品图片" class="w-full h-32 object-cover">
<div class="p-2">
<h4 class="font-medium text-sm line-clamp-2">高品质头戴式耳机 音乐游戏耳机</h4>
<div class="flex items-center mt-1">
<span class="text-orange-500 font-bold text-sm">¥129.00</span>
<span class="text-xs text-gray-400 ml-1 line-through">¥199.00</span>
</div>
</div>
</div>
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="商品图片" class="w-full h-32 object-cover">
<div class="p-2">
<h4 class="font-medium text-sm line-clamp-2">复古相机 拍立得相机 迷你相机</h4>
<div class="flex items-center mt-1">
<span class="text-orange-500 font-bold text-sm">¥159.00</span>
<span class="text-xs text-gray-400 ml-1 line-through">¥259.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部结算栏 -->
<div class="fixed bottom-16 left-0 right-0 bg-white border-t p-2 flex items-center">
<input type="checkbox" class="mr-2" id="select-all">
<label for="select-all" class="text-sm">全选</label>
<div class="ml-auto text-right">
<div class="text-sm">
合计: <span class="text-orange-500 font-bold">¥246.00</span>
</div>
<div class="text-xs text-gray-500">不含运费</div>
</div>
<button class="ml-4 bg-orange-500 text-white px-6 py-2 rounded-full">
结算(2)
</button>
</div>
</div>
<!-- 我的页面 -->
<div id="profile-page" class="page">
<div class="p-4">
<!-- 用户信息 -->
<div class="flex items-center mb-6">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="用户头像" class="w-16 h-16 rounded-full object-cover">
<div class="ml-3">
<h2 class="text-lg font-bold">张经理</h2>
<p class="text-sm text-gray-500">会员等级: 金牌买家</p>
</div>
<button class="ml-auto text-sm text-orange-500 border border-orange-500 px-3 py-1 rounded-full">
会员中心
</button>
</div>
<!-- 订单状态 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-medium">我的订单</h3>
<a href="#" class="text-sm text-gray-500">全部订单 <i class="fas fa-chevron-right"></i></a>
</div>
<div class="grid grid-cols-5 text-center">
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-500 mb-1">
<i class="far fa-credit-card"></i>
</div>
<span class="text-xs">待付款</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 mb-1">
<i class="fas fa-truck"></i>
</div>
<span class="text-xs">待发货</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-500 mb-1">
<i class="fas fa-box-open"></i>
</div>
<span class="text-xs">待收货</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-500 mb-1">
<i class="fas fa-comment-alt"></i>
</div>
<span class="text-xs">待评价</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-500 mb-1">
<i class="fas fa-exchange-alt"></i>
</div>
<span class="text-xs">退换货</span>
</div>
</div>
</div>
<!-- 常用功能 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<div class="grid grid-cols-4 gap-4">
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-500 mb-1">
<i class="far fa-heart"></i>
</div>
<span class="text-xs">我的收藏</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 mb-1">
<i class="fas fa-store"></i>
</div>
<span class="text-xs">我的店铺</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-500 mb-1">
<i class="fas fa-comments"></i>
</div>
<span class="text-xs">消息中心</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-500 mb-1">
<i class="fas fa-history"></i>
</div>
<span class="text-xs">浏览记录</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-500 mb-1">
<i class="fas fa-ticket-alt"></i>
</div>
<span class="text-xs">优惠券</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-500 mb-1">
<i class="fas fa-coins"></i>
</div>
<span class="text-xs">积分中心</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500 mb-1">
<i class="fas fa-headset"></i>
</div>
<span class="text-xs">客户服务</span>
</div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 mb-1">
<i class="fas fa-cog"></i>
</div>
<span class="text-xs">设置</span>
</div>
</div>
</div>
<!-- 供应商入驻 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<div class="flex items-center">
<div class="w-12 h-12 bg-gradient-to-r from-orange-400 to-orange-600 rounded-lg flex items-center justify-center text-white mr-3">
<i class="fas fa-store-alt text-xl"></i>
</div>
<div class="flex-1">
<h3 class="font-medium">供应商入驻</h3>
<p class="text-xs text-gray-500">0元开店，轻松做生意</p>
</div>
<button class="text-sm bg-orange-500 text-white px-3 py-1 rounded-full">
立即入驻
</button>
</div>
</div>
</div>
</div>
<!-- 底部导航栏 -->
<div class="tab-bar">
<div class="tab-item active" onclick="showPage('home-page')">
<i class="fas fa-home"></i>
<span>首页</span>
</div>
<div class="tab-item" onclick="showPage('category-page')">
<i class="fas fa-th-large"></i>
<span>分类</span>
</div>
<div class="tab-item" onclick="showPage('search-page')">
<i class="fas fa-search"></i>
<span>搜索</span>
</div>
<div class="tab-item" onclick="showPage('cart-page')">
<i class="fas fa-shopping-cart"></i>
<span>进货单</span>
</div>
<div class="tab-item" onclick="showPage('profile-page')">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</div>
</div>
</div>
<!-- 商品详情页单独展示 -->
<div class="phone-mockup mt-12">
<div class="screen">
<div class="status-bar">
<span>9:41</span>
<div class="flex space-x-1">
<i class="fas fa-signal"></i>
<i class="fas fa-wifi"></i>
<i class="fas fa-battery-three-quarters"></i>
</div>
</div>
<div id="product-detail-page-2" class="page active">
<!-- 商品详情页内容与上面相同 -->
<!-- 为节省篇幅，这里省略重复代码 -->
</div>
<div class="tab-bar">
<div class="tab-item" onclick="showPage('home-page')">
<i class="fas fa-home"></i>
<span>首页</span>
</div>
<div class="tab-item" onclick="showPage('category-page')">
<i class="fas fa-th-large"></i>
<span>分类</span>
</div>
<div class="tab-item" onclick="showPage('search-page')">
<i class="fas fa-search"></i>
<span>搜索</span>
</div>
<div class="tab-item" onclick="showPage('cart-page')">
<i class="fas fa-shopping-cart"></i>
<span>进货单</span>
</div>
<div class="tab-item" onclick="showPage('profile-page')">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</div>
</div>
</div>
</div>
<script>
function showPage(pageId) {
// 隐藏所有页面
document.querySelectorAll('.page').forEach(page => {
page.classList.remove('active');
});
// 显示选中的页面
document.getElementById(pageId).classList.add('active');
// 更新tab栏状态
document.querySelectorAll('.tab-item').forEach(tab => {
tab.classList.remove('active');
});
event.currentTarget.classList.add('active');
}
</script>
</body>
</html>主要功能
- 商品浏览与搜索
- 供应商展示
- 询价与沟通
- 订单管理
- 会员服务
用户需求
- 买家：寻找可靠供应商，批量采购，获取优惠价格
- 卖家：展示产品，获取客户询盘，管理订单
核心交互逻辑
- 首页 → 商品分类/搜索 → 商品详情 → 询价/下单
- 供应商主页 → 产品展示 → 联系供应商
- 消息中心 → 与供应商沟通
2. 产品界面规划
关键界面
- 首页
- 商品分类页
- 商品详情页
- 供应商主页
- 搜索页
- 购物车
- 我的(个人中心)
- 消息中心
3. 高保真UI设计
使用iOS设计规范，采用现代化电商UI元素。
4. HTML原型实现
以下是完整的HTML代码，使用Tailwind CSS和FontAwesome：
-
设备模拟：使用iPhone 15 Pro尺寸(390x844px)和圆角设计，模拟真实手机界面
-
核心界面：
- 首页：包含搜索、轮播图、快捷入口、活动专区和商品推荐
- 分类页：展示商品分类和热门分类
- 商品详情页：完整展示商品信息、价格、规格选择和供应商信息
- 搜索页：包含搜索历史和热门搜索
- 购物车页：展示进货单商品和结算功能
- 我的页面：用户信息、订单状态和常用功能
-
交互元素：
- 底部导航栏可切换不同页面
- 商品卡片悬停效果
- 表单元素和按钮的交互状态
-
真实感增强：
- 使用真实商品图片(来自Unsplash)
- 添加iOS风格状态栏
- 使用真实电商平台UI元素和布局