yunqueai/ai_dianshang
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
sjk
2025-11-17 14:11:46 +08:00
commit ad4a600af9
1659 changed files with 171560 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
原型/页面 10.html Normal file
View File

@@ -0,0 +1,245 @@
<!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>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF6B35',
secondary: '#FFD93D'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #ffffff;
color: #333333;
padding-top: 60px;
padding-bottom: 60px;
}
.nav-bar {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.tab-bar {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
display: grid;
grid-template-columns: repeat(4, 1fr);
z-index: 1000;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
color: #999999;
}
.tab-item.active {
color: #FF6B35;
}
.tab-item i {
font-size: 20px;
margin-bottom: 4px;
}
.service-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background-color: #f8f8f8;
margin-bottom: 8px;
}
.service-icon i {
font-size: 24px;
color: #FF6B35;
}
.menu-item {
display: flex;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
}
.menu-item:last-child {
border-bottom: none;
}
.menu-item i {
width: 24px;
height: 24px;
font-size: 18px;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #FF6B35;
}
.badge {
background-color: #FF6B35;
color: white;
border-radius: 12px;
padding: 2px 6px;
font-size: 12px;
margin-left: 6px;
}
</style>
</head>
<body>
<div class="nav-bar">
<h1 class="text-xl font-bold">我的</h1>
</div>
<div class="px-5 py-6">
<div class="flex items-center mb-8">
<img src="https://ai-public.mastergo.com/ai/img_res/3136456d4da4446b36a65233b223c52c.jpg" alt="用户头像" class="w-16 h-16 rounded-full mr-4">
<div>
<div class="flex items-center mb-1">
<h2 class="text-lg font-semibold mr-2">李小雨</h2>
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">黄金会员</span>
</div>
<p class="text-sm text-gray-500">生活需要仪式感，购物也是如此</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
<div class="grid grid-cols-4 gap-4 mb-4">
<div class="text-center">
<div class="service-icon mx-auto">
<i class="fas fa-wallet"></i>
</div>
<span class="text-sm">待付款</span>
<span class="badge">3</span>
</div>
<div class="text-center">
<div class="service-icon mx-auto">
<i class="fas fa-truck"></i>
</div>
<span class="text-sm">待收货</span>
<span class="badge">1</span>
</div>
<div class="text-center">
<div class="service-icon mx-auto">
<i class="fas fa-comment-dots"></i>
</div>
<span class="text-sm">待评价</span>
<span class="badge">5</span>
</div>
<div class="text-center">
<div class="service-icon mx-auto">
<i class="fas fa-undo"></i>
</div>
<span class="text-sm">退款/售后</span>
</div>
</div>
<div class="flex justify-between items-center pt-4 border-t border-gray-100">
<div class="flex items-center">
<i class="fas fa-receipt text-primary mr-2"></i>
<span>我的订单</span>
</div>
<div class="flex items-center text-gray-400">
<span class="text-sm mr-1">查看全部订单</span>
<i class="fas fa-chevron-right text-xs"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mr-3">
<i class="fas fa-ticket-alt text-blue-500 text-xl"></i>
</div>
<div>
<div class="font-medium">优惠券</div>
<div class="text-sm text-gray-500">3 张可用</div>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mr-3">
<i class="fas fa-coins text-green-500 text-xl"></i>
</div>
<div>
<div class="font-medium">积分</div>
<div class="text-sm text-gray-500">1,280 分</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="menu-item">
<i class="fas fa-map-marker-alt"></i>
<span class="flex-1">地址管理</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="menu-item">
<i class="fas fa-headset"></i>
<span class="flex-1">客服中心</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="menu-item">
<i class="fas fa-question-circle"></i>
<span class="flex-1">帮助与反馈</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="menu-item">
<i class="fas fa-cog"></i>
<span class="flex-1">设置</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
</div>
<div class="tab-bar">
<div class="tab-item">
<i class="fas fa-home"></i>
<span>首页</span>
</div>
<div class="tab-item">
<i class="fas fa-th-large"></i>
<span>分类</span>
</div>
<div class="tab-item">
<i class="fas fa-shopping-cart"></i>
<span>购物车</span>
</div>
<div class="tab-item active">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</div>
</body>
</html>

268
原型/页面 11.html Normal file
View File

@@ -0,0 +1,268 @@
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF6B35',
secondary: '#F9A825'
},
borderRadius: {
'none': '0px',
'sm': '2px',
'DEFAULT': '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #FFFFFF;
color: #333333;
}
.nav-bar {
position: fixed;
top: 0;
width: 100%;
height: 44px;
background-color: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
z-index: 1000;
}
.tab-bar {
position: fixed;
bottom: 0;
width: 100%;
height: 49px;
background-color: #FFFFFF;
box-shadow: 0 -1px 2px rgba(0,0,0,0.05);
z-index: 1000;
}
.product-image-container {
height: 375px;
overflow: hidden;
position: relative;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.indicator {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
}
.dot.active {
background-color: #FFFFFF;
}
.price-original {
text-decoration: line-through;
color: #999999;
font-size: 14px;
}
.price-current {
color: #FF6B35;
font-size: 18px;
font-weight: bold;
}
.section-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
color: #333333;
}
.detail-content {
line-height: 1.6;
color: #666666;
font-size: 14px;
}
.review-item {
padding: 12px 0;
border-bottom: 1px solid #EEEEEE;
}
.review-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #EEEEEE;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 12px;
}
.star-rating {
color: #F9A825;
}
.action-button {
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
.add-cart {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
color: #333333;
margin-right: 10px;
}
.buy-now {
background-color: #FF6B35;
color: #FFFFFF;
}
.spec-button {
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 6px 12px;
font-size: 14px;
color: #666666;
cursor: pointer;
}
.spec-button.selected {
border-color: #FF6B35;
color: #FF6B35;
background-color: rgba(255,107,53,0.05);
}
</style>
</head>
<body class="relative w-full max-w-[375px] mx-auto bg-white">
<!-- 导航栏 -->
<div class="nav-bar flex items-center justify-between px-4">
<i class="fas fa-arrow-left text-lg text-gray-700"></i>
<span class="text-base font-medium text-gray-800">商品详情</span>
<div class="flex space-x-4">
<i class="fas fa-share-alt text-lg text-gray-700"></i>
<i class="far fa-heart text-lg text-gray-700"></i>
</div>
</div>
<!-- 主要内容区域 -->
<div class="pt-44 pb-60 px-4">
<!-- 商品图片展示区 -->
<div class="product-image-container mb-4">
<img src="https://ai-public.mastergo.com/ai/img_res/6e0e2db8f5cfa75c78e25c19613a1cc2.jpg" alt="商品图片" class="product-image">
<div class="indicator">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<!-- 商品信息展示区 -->
<div class="mb-6">
<h1 class="text-xl font-bold text-gray-900 mb-2">有机新鲜胡萝卜 500g</h1>
<div class="flex items-center mb-3">
<span class="price-original mr-2">¥ 25.80</span>
<span class="price-current">¥ 19.90</span>
</div>
<div class="flex justify-between text-sm text-gray-500 mb-4">
<span>销量 1.2w+</span>
<span>好评率 98%</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-700">选择规格</span>
<div class="spec-button selected">500g装</div>
</div>
</div>
<!-- 商品详细描述区 -->
<div class="mb-6">
<div class="section-title">商品详情</div>
<div class="detail-content">
<p class="mb-3">来自云南高原的有机胡萝卜，采用自然农法种植，无农药残留，富含β-胡萝卜素和维生素A，口感清甜脆嫩。</p>
<p class="mb-3">适合生食、榨汁或烹饪，营养价值高，是家庭健康饮食的理想选择。</p>
<p>产地：云南昆明<br>净含量：500g<br>保质期：冷藏3天</p>
</div>
</div>
<!-- 用户评价区域 -->
<div class="mb-6">
<div class="section-title flex justify-between items-center">
<span>用户评价 (128)</span>
<span class="text-primary text-sm">查看更多 ></span>
</div>
<div class="review-item">
<div class="flex items-start mb-2">
<div class="review-avatar mr-3">张*</div>
<div>
<div class="star-rating mb-1">
<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"></i>
</div>
<p class="text-sm text-gray-700">胡萝卜很新鲜，包装也很仔细，配送速度快</p>
</div>
</div>
<div class="text-xs text-gray-500">2023-05-15</div>
</div>
<div class="review-item">
<div class="flex items-start mb-2">
<div class="review-avatar mr-3">李*</div>
<div>
<div class="star-rating mb-1">
<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>
</div>
<p class="text-sm text-gray-700">品质不错，就是有点小贵，性价比一般</p>
</div>
</div>
<div class="text-xs text-gray-500">2023-05-10</div>
</div>
</div>
</div>
<!-- 底部操作栏 -->
<div class="tab-bar flex items-center px-4">
<div class="action-button add-cart">
<i class="fas fa-shopping-cart mr-2"></i>
加入购物车
</div>
<div class="action-button buy-now">
立即购买
</div>
</div>
</body>
</html>

287
原型/页面 7.html Normal file
View File

@@ -0,0 +1,287 @@
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF6B35',
secondary: '#FFD93D'
},
borderRadius: {
'none': '0px',
'sm': '2px',
'DEFAULT': '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #FFFFFF;
color: #333333;
}
.nav-bar {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background-color: #FFFFFF;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.tab-bar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
background-color: #FFFFFF;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.content-area {
margin-top: 60px;
margin-bottom: 60px;
padding: 16px;
}
.search-box {
background-color: #F5F5F5;
border-radius: 20px;
padding: 8px 16px;
}
.category-item {
width: 64px;
}
.product-card {
background-color: #FFFFFF;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
overflow: hidden;
}
.hot-deal-card {
background: linear-gradient(135deg, #FF6B35 0%, #FFD93D 100%);
border-radius: 12px;
color: white;
padding: 16px;
}
.countdown {
background-color: rgba(0,0,0,0.2);
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
}
.icon-bg {
background-color: #F0F0F0;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 64px;
overflow: hidden;
}
.icon-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航栏 -->
<nav class="nav-bar h-16 flex items-center px-4">
<div class="search-box flex-1 flex items-center bg-white border border-gray-200 rounded-full shadow-sm px-4">
<i class="fas fa-search text-gray-400 mr-2"></i>
<input type="text" placeholder="搜索商品" class="text-sm w-full py-2 outline-none">
<i class="fas fa-camera text-gray-400 ml-2"></i>
</div>
</nav>
<!-- 内容区域 -->
<div class="content-area">
<!-- 轮播图 -->
<div class="mb-6 rounded-2xl overflow-hidden h-48">
<img src="https://ai-public.mastergo.com/ai/img_res/656c3b7d27268b4591c7caac34085148.jpg" alt="Banner" class="w-full h-full object-cover object-top">
</div>
<!-- 分类快捷入口 -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">商品分类</h2>
<div class="grid grid-cols-5 gap-4">
<div class="category-item flex flex-col items-center">
<div class="icon-bg mb-2">
<img src="https://ai-public.mastergo.com/ai/img_res/d6020a31add44088fbf6ecbb00cdc11b.jpg" alt="服装">
</div>
<span class="text-xs text-center whitespace-nowrap overflow-hidden text-ellipsis">服装</span>
</div>
<div class="category-item flex flex-col items-center">
<div class="icon-bg mb-2">
<img src="https://ai-public.mastergo.com/ai/img_res/74b2aa26fdfd03c24003f6ea57e889a9.jpg" alt="数码">
</div>
<span class="text-xs text-center whitespace-nowrap overflow-hidden text-ellipsis">数码</span>
</div>
<div class="category-item flex flex-col items-center">
<div class="icon-bg mb-2">
<img src="https://ai-public.mastergo.com/ai/img_res/8a57c286be7fccd38c8648998523c1e2.jpg" alt="家居">
</div>
<span class="text-xs text-center whitespace-nowrap overflow-hidden text-ellipsis">家居</span>
</div>
<div class="category-item flex flex-col items-center">
<div class="icon-bg mb-2">
<img src="https://ai-public.mastergo.com/ai/img_res/4fdf215efd195d438a059a67afa76e91.jpg" alt="美妆">
</div>
<span class="text-xs text-center whitespace-nowrap overflow-hidden text-ellipsis">美妆</span>
</div>
<div class="category-item flex flex-col items-center">
<div class="icon-bg mb-2">
<img src="https://ai-public.mastergo.com/ai/img_res/6f0558e9efd6027553366832cce8ff3b.jpg" alt="运动">
</div>
<span class="text-xs text-center whitespace-nowrap overflow-hidden text-ellipsis">运动</span>
</div>
</div>
</div>
<!-- 热销推荐 -->
<div class="mb-8">
<div class="hot-deal-card mb-4">
<div class="flex justify-between items-center mb-2">
<h2 class="text-lg font-bold">限时抢购</h2>
<div class="countdown">剩余 02:15:36</div>
</div>
<p class="text-sm mb-3">精选爆款直降，错过再等一年</p>
<div class="flex overflow-x-auto space-x-4 pb-2">
<div class="flex-shrink-0 w-32">
<div class="bg-white rounded-lg overflow-hidden mb-2">
<img src="https://ai-public.mastergo.com/ai/img_res/3165891caadc33015a714871bd81a68b.jpg" alt="热销商品" class="w-full h-32 object-cover">
</div>
<p class="text-xs text-white font-semibold">¥ 2999</p>
<p class="text-xs line-through text-white opacity-80">¥ 3999</p>
</div>
<div class="flex-shrink-0 w-32">
<div class="bg-white rounded-lg overflow-hidden mb-2">
<img src="https://ai-public.mastergo.com/ai/img_res/8ac84dae3965e5150fe170b7517ac1c5.jpg" alt="热销商品" class="w-full h-32 object-cover">
</div>
<p class="text-xs text-white font-semibold">¥ 599</p>
<p class="text-xs line-through text-white opacity-80">¥ 899</p>
</div>
</div>
</div>
</div>
<!-- 商品列表 -->
<div>
<h2 class="text-lg font-semibold mb-4">热门商品</h2>
<div class="space-y-4">
<div class="product-card">
<div class="flex p-4">
<div class="w-24 h-24 rounded-lg overflow-hidden mr-4">
<img src="https://ai-public.mastergo.com/ai/img_res/97ea42572c43980f15d00a70665f9fae.jpg" alt="商品图片" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h3 class="font-medium text-sm mb-1">简约休闲运动鞋</h3>
<p class="text-xs text-gray-500 mb-2">透气舒适 时尚百搭</p>
<div class="flex items-center mb-2">
<span class="text-primary font-bold text-sm">¥ 299</span>
<span class="text-gray-400 text-xs line-through ml-2">¥ 399</span>
</div>
<div class="flex items-center">
<div class="flex text-yellow-400 text-xs mr-2">
<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>
</div>
<span class="text-xs text-gray-500">4.8 (128)</span>
</div>
</div>
</div>
</div>
<div class="product-card">
<div class="flex p-4">
<div class="w-24 h-24 rounded-lg overflow-hidden mr-4">
<img src="https://ai-public.mastergo.com/ai/img_res/a4b227050c29e6458373e41ad1f92416.jpg" alt="商品图片" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h3 class="font-medium text-sm mb-1">智能保温水杯</h3>
<p class="text-xs text-gray-500 mb-2">长效保温 一键测温</p>
<div class="flex items-center mb-2">
<span class="text-primary font-bold text-sm">¥ 189</span>
<span class="text-gray-400 text-xs line-through ml-2">¥ 259</span>
</div>
<div class="flex items-center">
<div class="flex text-yellow-400 text-xs mr-2">
<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="far fa-star"></i>
</div>
<span class="text-xs text-gray-500">4.5 (96)</span>
</div>
</div>
</div>
</div>
<div class="product-card">
<div class="flex p-4">
<div class="w-24 h-24 rounded-lg overflow-hidden mr-4">
<img src="https://ai-public.mastergo.com/ai/img_res/1749370a9d714f65119b035b1492f06c.jpg" alt="商品图片" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h3 class="font-medium text-sm mb-1">无线充电板</h3>
<p class="text-xs text-gray-500 mb-2">快充兼容 多重保护</p>
<div class="flex items-center mb-2">
<span class="text-primary font-bold text-sm">¥ 129</span>
<span class="text-gray-400 text-xs line-through ml-2">¥ 169</span>
</div>
<div class="flex items-center">
<div class="flex text-yellow-400 text-xs mr-2">
<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"></i>
</div>
<span class="text-xs text-gray-500">4.9 (215)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部Tab导航 -->
<nav class="tab-bar h-16 grid grid-cols-4">
<a href="#" class="flex flex-col items-center justify-center text-primary">
<i class="fas fa-home text-xl mb-1"></i>
<span class="text-xs">首页</span>
</a>
<a href="#" class="flex flex-col items-center justify-center text-gray-500">
<i class="fas fa-th-large text-xl mb-1"></i>
<span class="text-xs">分类</span>
</a>
<a href="#" class="flex flex-col items-center justify-center text-gray-500">
<i class="fas fa-shopping-cart text-xl mb-1"></i>
<span class="text-xs">购物车</span>
</a>
<a href="#" class="flex flex-col items-center justify-center text-gray-500">
<i class="fas fa-user text-xl mb-1"></i>
<span class="text-xs">我的</span>
</a>
</nav>
</body>
</html>

398
原型/页面 8.html Normal file
View File

@@ -0,0 +1,398 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF6B35',
secondary: '#FFD93D'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #FFFFFF;
color: #333333;
}
.font-logo {
font-family: 'Pacifico', cursive;
}
.nav-bar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background-color: #FFFFFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.tab-bar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
background-color: #FFFFFF;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.content-area {
margin-top: 60px;
margin-bottom: 60px;
padding: 16px;
}
.product-card {
background-color: #FFFFFF;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
padding: 16px;
margin-bottom: 16px;
}
.checkbox {
width: 20px;
height: 20px;
border: 2px solid #CCCCCC;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.checkbox.checked {
background-color: #FF6B35;
border-color: #FF6B35;
}
.checkbox.checked i {
color: white;
font-size: 12px;
}
.quantity-selector {
display: flex;
align-items: center;
border: 1px solid #E0E0E0;
border-radius: 8px;
overflow: hidden;
}
.quantity-btn {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
background-color: #F5F5F5;
cursor: pointer;
}
.quantity-input {
width: 40px;
height: 32px;
text-align: center;
border: none;
outline: none;
}
.delete-btn {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
color: #999999;
cursor: pointer;
}
.checkout-btn {
background-color: #FF6B35;
color: white;
padding: 12px 24px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
}
.checkout-btn.disabled {
background-color: #E0E0E0;
color: #999999;
cursor: not-allowed;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 40px 0;
}
.empty-state img {
width: 160px;
height: 160px;
margin-bottom: 24px;
}
.empty-state p {
font-size: 16px;
color: #666666;
margin-bottom: 24px;
}
.home-btn {
background-color: #FF6B35;
color: white;
padding: 10px 24px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航栏 -->
<div class="nav-bar h-16 flex items-center justify-between px-4">
<div class="text-lg font-semibold">购物车</div>
<button id="editBtn" class="text-primary font-medium">编辑</button>
</div>
<!-- 内容区域 -->
<div class="content-area">
<!-- 商品列表 -->
<div id="cartItems">
<!-- 商品卡片 1 -->
<div class="product-card flex items-center">
<div class="checkbox mr-3 checked" data-id="1">
<i class="fas fa-check"></i>
</div>
<img src="https://ai-public.mastergo.com/ai/img_res/0f74548a92239930f7c8ad61b061b9ff.jpg" alt="商品图片" class="w-20 h-20 object-cover rounded-lg mr-4">
<div class="flex-1">
<div class="font-medium text-gray-900 mb-1">新鲜有机胡萝卜 500g</div>
<div class="text-sm text-gray-500 mb-2">规格：500g 装</div>
<div class="flex items-center justify-between">
<div class="text-primary font-semibold">¥ 12.80</div>
<div class="quantity-selector">
<div class="quantity-btn minus">-</div>
<input type="text" class="quantity-input" value="2" readonly>
<div class="quantity-btn plus">+</div>
</div>
</div>
</div>
<div class="delete-btn ml-3 hidden">
<i class="fas fa-trash-alt"></i>
</div>
</div>
<!-- 商品卡片 2 -->
<div class="product-card flex items-center">
<div class="checkbox mr-3" data-id="2">
<i class="fas fa-check"></i>
</div>
<img src="https://ai-public.mastergo.com/ai/img_res/3cfcb52a871dbf9ae402f13950be8047.jpg" alt="商品图片" class="w-20 h-20 object-cover rounded-lg mr-4">
<div class="flex-1">
<div class="font-medium text-gray-900 mb-1">进口红富士苹果 1kg</div>
<div class="text-sm text-gray-500 mb-2">规格：1kg 装</div>
<div class="flex items-center justify-between">
<div class="text-primary font-semibold">¥ 25.90</div>
<div class="quantity-selector">
<div class="quantity-btn minus">-</div>
<input type="text" class="quantity-input" value="1" readonly>
<div class="quantity-btn plus">+</div>
</div>
</div>
</div>
<div class="delete-btn ml-3 hidden">
<i class="fas fa-trash-alt"></i>
</div>
</div>
<!-- 商品卡片 3 -->
<div class="product-card flex items-center">
<div class="checkbox mr-3 checked" data-id="3">
<i class="fas fa-check"></i>
</div>
<img src="https://ai-public.mastergo.com/ai/img_res/6d22e044f8bfb8a254960685673c0da3.jpg" alt="商品图片" class="w-20 h-20 object-cover rounded-lg mr-4">
<div class="flex-1">
<div class="font-medium text-gray-900 mb-1">纯牛奶 250ml*12 盒</div>
<div class="text-sm text-gray-500 mb-2">规格：整箱装</div>
<div class="flex items-center justify-between">
<div class="text-primary font-semibold">¥ 49.90</div>
<div class="quantity-selector">
<div class="quantity-btn minus">-</div>
<input type="text" class="quantity-input" value="1" readonly>
<div class="quantity-btn plus">+</div>
</div>
</div>
</div>
<div class="delete-btn ml-3 hidden">
<i class="fas fa-trash-alt"></i>
</div>
</div>
</div>
<!-- 空状态 -->
<div id="emptyState" class="empty-state hidden">
<img src="https://ai-public.mastergo.com/ai/img_res/018fce2680dbe4a8ae1d932b70e5c255.jpg" alt="空购物车">
<p>购物车空空如也</p>
<div class="home-btn">去首页逛逛</div>
</div>
</div>
<!-- 底部操作栏 -->
<div class="tab-bar h-16 flex items-center px-4">
<div class="checkbox mr-3" id="selectAll">
<i class="fas fa-check"></i>
</div>
<div class="flex-1 text-sm">
全选
</div>
<div class="flex items-center">
<div class="mr-4 text-right">
<div class="text-sm text-gray-500">合计：</div>
<div class="text-lg font-semibold text-primary total-amount">¥ 88.60</div>
</div>
<button class="checkout-btn">去结算 (3)</button>
</div>
</div>
<!-- 底部标签栏 -->
<div class="tab-bar h-16 flex items-center justify-around px-0 py-2" style="position: fixed; bottom: 0; width: 375px;">
<div class="flex flex-col items-center justify-center w-full h-full">
<div class="flex justify-around w-full">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-home text-xl"></i>
<span class="text-xs mt-1">首页</span>
</div>
<div class="flex flex-col items-center justify-center">
<i class="fas fa-th-large text-xl"></i>
<span class="text-xs mt-1">分类</span>
</div>
<div class="flex flex-col items-center justify-center">
<i class="fas fa-shopping-cart text-xl text-primary"></i>
<span class="text-xs mt-1 text-primary">购物车</span>
</div>
<div class="flex flex-col items-center justify-center">
<i class="fas fa-user text-xl"></i>
<span class="text-xs mt-1">我的</span>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const editBtn = document.getElementById('editBtn');
const deleteBtns = document.querySelectorAll('.delete-btn');
const checkboxes = document.querySelectorAll('.checkbox');
const selectAll = document.getElementById('selectAll');
const cartItems = document.getElementById('cartItems');
const emptyState = document.getElementById('emptyState');
const checkoutBtns = document.querySelectorAll('.checkout-btn');
let isEditing = false;
// 切换编辑模式
editBtn.addEventListener('click', function() {
isEditing = !isEditing;
editBtn.textContent = isEditing ? '完成' : '编辑';
deleteBtns.forEach(btn => {
btn.classList.toggle('hidden', !isEditing);
});
});
// 全选功能
selectAll.addEventListener('click', function() {
const isChecked = selectAll.classList.contains('checked');
selectAll.classList.toggle('checked', !isChecked);
checkboxes.forEach(checkbox => {
if (checkbox.id !== 'selectAll') {
checkbox.classList.toggle('checked', !isChecked);
}
});
updateTotal();
});
// 单个商品选择
checkboxes.forEach(checkbox => {
if (checkbox.id !== 'selectAll') {
checkbox.addEventListener('click', function() {
this.classList.toggle('checked');
updateSelectAllState();
updateTotal();
});
}
});
// 数量增减
document.querySelectorAll('.quantity-btn').forEach(btn => {
btn.addEventListener('click', function() {
const selector = this.parentElement;
const input = selector.querySelector('.quantity-input');
let value = parseInt(input.value);
if (this.classList.contains('plus')) {
value++;
} else {
if (value > 1) value--;
}
input.value = value;
updateTotal();
});
});
// 删除商品
deleteBtns.forEach(btn => {
btn.addEventListener('click', function() {
const card = this.closest('.product-card');
card.remove();
updateSelectAllState();
updateTotal();
// 检查是否为空状态
if (cartItems.children.length === 0) {
cartItems.classList.add('hidden');
emptyState.classList.remove('hidden');
}
});
});
// 更新全选状态
function updateSelectAllState() {
const allCheckboxes = Array.from(checkboxes).filter(cb => cb.id !== 'selectAll');
const checkedCount = allCheckboxes.filter(cb => cb.classList.contains('checked')).length;
const allSelected = checkedCount === allCheckboxes.length && allCheckboxes.length > 0;
selectAll.classList.toggle('checked', allSelected);
}
// 更新总价和结算按钮状态
function updateTotal() {
let total = 0;
let count = 0;
document.querySelectorAll('.product-card').forEach(card => {
const checkbox = card.querySelector('.checkbox');
if (checkbox.classList.contains('checked')) {
const priceText = card.querySelector('.text-primary').textContent;
const price = parseFloat(priceText.replace('¥', ''));
const quantity = parseInt(card.querySelector('.quantity-input').value);
total += price * quantity;
count += quantity;
}
});
// 更新所有价格显示
document.querySelectorAll('.total-amount').forEach(el => {
el.textContent = `¥ ${total.toFixed(2)}`;
});
// 更新所有结算按钮
checkoutBtns.forEach(btn => {
btn.textContent = `去结算 (${count})`;
});
// 更新结算按钮状态
checkoutBtns.forEach(btn => {
if (count === 0) {
btn.classList.add('disabled');
} else {
btn.classList.remove('disabled');
}
});
}
// 初始化总价
updateTotal();
});
</script>
</body>
</html>

255
原型/页面 9.html Normal file
View File

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