777 lines
21 KiB
HTML
777 lines
21 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>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 顶部状态栏 */
|
||
.status-bar {
|
||
background-color: #fff;
|
||
padding: 8px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border-bottom: 1px dashed #ccc;
|
||
}
|
||
|
||
.status-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.status-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* 导航栏 */
|
||
.navbar {
|
||
background-color: #4CAF50;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: white;
|
||
}
|
||
|
||
.nav-back {
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-title {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 搜索框 */
|
||
.search-container {
|
||
padding: 12px 16px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.search-box {
|
||
background-color: #f5f5f5;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 20px;
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.search-icon {
|
||
color: #999;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
border: none;
|
||
background: none;
|
||
outline: none;
|
||
color: #999;
|
||
}
|
||
|
||
/* 菜市场卡片 */
|
||
.market-card {
|
||
margin: 16px;
|
||
background-color: #fff;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.market-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.market-avatar {
|
||
width: 60px;
|
||
height: 60px;
|
||
background-color: #f0f0f0;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
}
|
||
|
||
.market-info h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.market-stats {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.rating {
|
||
color: #FF9800;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.market-details {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.market-delivery {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.delivery-info {
|
||
font-size: 13px;
|
||
color: #999;
|
||
}
|
||
|
||
.coupon-btn {
|
||
background-color: #FF9800;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 横幅 */
|
||
.banner {
|
||
margin: 0 16px 16px;
|
||
height: 120px;
|
||
background: linear-gradient(135deg, #4CAF50, #8BC34A);
|
||
border: 1px dashed #ccc;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 店长推荐 */
|
||
.section {
|
||
margin: 16px;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.market-category {
|
||
background-color: #f0f0f0;
|
||
border: 1px dashed #ccc;
|
||
padding: 2px 4px;
|
||
border-radius: 2px;
|
||
font-size: 10px;
|
||
color: #666;
|
||
margin-right: 8px;
|
||
width: 40px;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: 1;
|
||
}
|
||
|
||
.recommend-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.recommend-item {
|
||
background-color: #fff;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.recommend-image {
|
||
width: 100%;
|
||
height: 60px;
|
||
background-color: #f0f0f0;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 6px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.recommend-price {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #4CAF50;
|
||
}
|
||
|
||
/* 功能按钮区域 */
|
||
.feature-buttons {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
margin: 16px;
|
||
}
|
||
|
||
.feature-btn {
|
||
background-color: #fff;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
padding: 16px 8px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
background-color: #f0f0f0;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 50%;
|
||
margin: 0 auto 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
}
|
||
|
||
.feature-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
/* 排序选项 */
|
||
.sort-options {
|
||
display: flex;
|
||
background-color: #fff;
|
||
border: 1px dashed #ccc;
|
||
margin: 0 16px 8px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sort-option {
|
||
flex: 1;
|
||
padding: 10px 8px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
border-right: 1px dashed #ccc;
|
||
cursor: pointer;
|
||
color: #666;
|
||
}
|
||
|
||
.sort-option:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.sort-option.active {
|
||
color: #4CAF50;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 分类标签 */
|
||
.category-tabs {
|
||
display: flex;
|
||
background-color: #fff;
|
||
border: 1px dashed #ccc;
|
||
margin: 0 16px 16px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.category-tab {
|
||
flex: 1;
|
||
padding: 12px 8px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
border-right: 1px dashed #ccc;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.category-tab:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.category-tab.active {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
}
|
||
|
||
/* 商品网格 */
|
||
.product-grid {
|
||
margin: 0 16px 100px;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.product-card {
|
||
background-color: #fff;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.product-image {
|
||
width: 100%;
|
||
height: 120px;
|
||
background-color: #f0f0f0;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.product-specs {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.product-store {
|
||
font-size: 11px;
|
||
color: #4CAF50;
|
||
margin-bottom: 4px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.product-delivery {
|
||
font-size: 10px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.product-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.product-meta {
|
||
text-align: right;
|
||
font-size: 11px;
|
||
color: #999;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.product-rating {
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.product-distance {
|
||
color: #666;
|
||
}
|
||
|
||
/* 社交按钮样式 */
|
||
.social-buttons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px dashed #eee;
|
||
}
|
||
|
||
.social-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
color: #666;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.social-btn:hover {
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.social-btn.active {
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.social-btn .icon {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.social-btn .count {
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* 底部购物车 */
|
||
.cart-float {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
border-top: 1px dashed #ccc;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.cart-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background-color: #4CAF50;
|
||
border: 1px dashed #333;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.cart-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.cart-count {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.cart-total {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.checkout-btn {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: 1px dashed #333;
|
||
border-radius: 20px;
|
||
padding: 10px 20px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 420px) {
|
||
.product-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.product-card {
|
||
padding: 10px;
|
||
}
|
||
|
||
.product-image {
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.recommend-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.feature-buttons {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.product-grid {
|
||
gap: 8px;
|
||
}
|
||
|
||
.product-card {
|
||
padding: 8px;
|
||
}
|
||
|
||
.product-image {
|
||
height: 80px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部状态栏 -->
|
||
<div class="status-bar">
|
||
<div class="status-left">
|
||
<span>12:46</span>
|
||
</div>
|
||
<div class="status-right">
|
||
<span>🔋20%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航栏 -->
|
||
<div class="navbar">
|
||
<span class="nav-back">←</span>
|
||
<span class="nav-title">上海市茅台路香万家...</span>
|
||
</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="search-container">
|
||
<div class="search-box">
|
||
<span class="search-icon">🔍</span>
|
||
<input type="text" class="search-input" placeholder="查询市场内商品">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 菜市场卡片 -->
|
||
<div class="market-card">
|
||
<div class="market-header">
|
||
<div class="market-avatar">店铺</div>
|
||
<div class="market-info">
|
||
<h3>春申菜市场</h3>
|
||
<div class="market-stats">
|
||
<span class="rating">⭐ 5.0分</span>
|
||
<span>👥 粉丝 4</span>
|
||
<span>📈 销量 36</span>
|
||
<span>🔗</span>
|
||
<span>👍</span>
|
||
<span>❤️</span>
|
||
</div>
|
||
<div class="market-details">
|
||
📍 农家小妙(春申菜店)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="market-delivery">
|
||
<div class="delivery-info">
|
||
起送 ¥1 配送 ¥1 3h内送达
|
||
</div>
|
||
<button class="coupon-btn">🏷️ 无门槛0.5元</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 横幅 -->
|
||
<div class="banner">
|
||
可选内容轮播图，具备点击交互
|
||
</div>
|
||
|
||
<!-- 店长推荐 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
|
||
<div class="section-title">
|
||
👨🍳 店长推荐
|
||
</div>
|
||
</div>
|
||
<div class="recommend-grid">
|
||
<div class="recommend-item">
|
||
<div class="recommend-image">商品图</div>
|
||
<div class="recommend-price">¥2</div>
|
||
</div>
|
||
<div class="recommend-item">
|
||
<div class="recommend-image">商品图</div>
|
||
<div class="recommend-price">¥25</div>
|
||
</div>
|
||
<div class="recommend-item">
|
||
<div class="recommend-image">商品图</div>
|
||
<div class="recommend-price">¥3</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能按钮区域 -->
|
||
<div class="feature-buttons">
|
||
|
||
<div class="market-category">本<br>市<br>场<br>品<br>类</div>
|
||
<div class="feature-btn">
|
||
<div class="feature-icon">✨</div>
|
||
<div class="feature-text">特色推荐</div>
|
||
</div>
|
||
<div class="feature-btn">
|
||
<div class="feature-icon">🎁</div>
|
||
<div class="feature-text">福利专区</div>
|
||
</div>
|
||
<div class="feature-btn">
|
||
<div class="feature-icon">👑</div>
|
||
<div class="feature-text">会员专区</div>
|
||
</div>
|
||
<div class="feature-btn">
|
||
<div class="feature-icon">📊</div>
|
||
<div class="feature-text">分销中心</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分类标签 -->
|
||
<div class="category-tabs">
|
||
<div class="category-tab active">全部</div>
|
||
<div class="category-tab">海鲜水产</div>
|
||
<div class="category-tab">水果鲜花</div>
|
||
<div class="category-tab">蔬菜</div>
|
||
<div class="category-tab">蛋类</div>
|
||
</div>
|
||
|
||
<!-- 排序选项 -->
|
||
<div class="sort-options">
|
||
<div class="sort-option active">综合排序</div>
|
||
<div class="sort-option">销量 ↓</div>
|
||
<div class="sort-option">新品</div>
|
||
<div class="sort-option">价格</div>
|
||
<div class="sort-option">📍 已选择摊位</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- 商品网格 -->
|
||
<div class="product-grid">
|
||
<div class="product-card">
|
||
<div class="product-image">蔬菜图</div>
|
||
<div class="product-name">西蓝花约500g</div>
|
||
<div class="product-specs">¥1/份(约) ⭐ 5.0分</div>
|
||
<div class="product-store">牛牛蔬菜店(春申菜市场)</div>
|
||
<div class="product-delivery">起送¥1，满¥2免基础配送费</div>
|
||
<div class="product-footer">
|
||
<div class="product-price">¥1</div>
|
||
<div class="product-meta">
|
||
<div class="product-distance">📍 0.1km</div>
|
||
</div>
|
||
</div>
|
||
<div class="social-buttons">
|
||
<div class="social-btn">
|
||
<span class="icon">🔗</span>
|
||
</div>
|
||
<div class="social-btn" onclick="likeProduct(this)">
|
||
<span class="icon">👍</span>
|
||
<span class="count">28</span>
|
||
</div>
|
||
<div class="social-btn" onclick="favoriteProduct(this)">
|
||
<span class="icon">❤️</span>
|
||
<span class="count">15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-card">
|
||
<div class="product-image">蔬菜图</div>
|
||
<div class="product-name">冬瓜500g</div>
|
||
<div class="product-specs">¥2/份(约) ⭐ 5.0分</div>
|
||
<div class="product-store">牛牛蔬菜店(春申菜市场)</div>
|
||
<div class="product-delivery">起送¥1，满¥2免基础配送费</div>
|
||
<div class="product-footer">
|
||
<div class="product-price">¥2</div>
|
||
<div class="product-meta">
|
||
<div class="product-distance">📍 0.1km</div>
|
||
</div>
|
||
</div>
|
||
<div class="social-buttons">
|
||
<div class="social-btn">
|
||
<span class="icon">🔗</span>
|
||
</div>
|
||
<div class="social-btn" onclick="likeProduct(this)">
|
||
<span class="icon">👍</span>
|
||
<span class="count">34</span>
|
||
</div>
|
||
<div class="social-btn" onclick="favoriteProduct(this)">
|
||
<span class="icon">❤️</span>
|
||
<span class="count">21</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- 底部浮动购物车 -->
|
||
<div class="cart-float">
|
||
<div class="cart-icon">🛒</div>
|
||
<div class="cart-info">
|
||
<div class="cart-count">已选择 0 件商品</div>
|
||
<div class="cart-total">合计：¥0.00</div>
|
||
</div>
|
||
<button class="checkout-btn">去结算</button>
|
||
</div>
|
||
|
||
<script>
|
||
function likeProduct(btn) {
|
||
const countSpan = btn.querySelector('.count');
|
||
let count = parseInt(countSpan.textContent);
|
||
|
||
if (btn.classList.contains('active')) {
|
||
btn.classList.remove('active');
|
||
countSpan.textContent = count - 1;
|
||
} else {
|
||
btn.classList.add('active');
|
||
countSpan.textContent = count + 1;
|
||
}
|
||
}
|
||
|
||
function favoriteProduct(btn) {
|
||
const countSpan = btn.querySelector('.count');
|
||
let count = parseInt(countSpan.textContent);
|
||
|
||
if (btn.classList.contains('active')) {
|
||
btn.classList.remove('active');
|
||
countSpan.textContent = count - 1;
|
||
} else {
|
||
btn.classList.add('active');
|
||
countSpan.textContent = count + 1;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |