阿里巴巴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元素和布局