阿里巴巴1688类网站高保真原型设计

<!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元素和布局