268 lines
7.7 KiB
HTML
268 lines
7.7 KiB
HTML
|
<!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>
|