yunqueai/ai_dianshang
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
ai_dianshang/原型/页面 7.html
sjk ad4a600af9 init
2025-11-17 14:11:46 +08:00

287 lines
9.0 KiB
HTML
Raw Permalink Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink