会员主演去
This commit is contained in:
parent
0afa101446
commit
63329dd6b4
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
|
|
@ -0,0 +1,518 @@
|
|||
<!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', sans-serif;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 店铺会员卡区域 */
|
||||
.store-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.store-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.store-card {
|
||||
border: 1px dashed #ccc;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.store-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.store-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px dashed #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.store-info h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.coupon-count {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
padding: 3px 8px;
|
||||
border: 1px dashed #ccc;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.coupon-count:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.coupon-details {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.coupon-details.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border: 1px dashed #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.coupon-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.coupon-expiry {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.coupon-content {
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.member-level {
|
||||
padding: 5px 10px;
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 会员优惠商品列表样式 */
|
||||
.product-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed #eee;
|
||||
}
|
||||
.product-list-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.product-list-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.product-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px dashed #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.product-list-info {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.product-list-info h5 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.product-list-price {
|
||||
font-size: 13px;
|
||||
color: #e53935;
|
||||
font-weight: bold;
|
||||
}
|
||||
.product-list-points {
|
||||
font-size: 13px;
|
||||
color: #1e88e5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.product-offer-type {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #fb8c00;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.store-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px dashed #ccc;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
color: #aaa;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-button:hover,
|
||||
.close-button:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#modal-coupon-list .coupon-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border: 1px dashed #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
#modal-coupon-list .coupon-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="header">
|
||||
<h1>我的会员</h1>
|
||||
</div>
|
||||
|
||||
<!-- 店铺会员卡区域 -->
|
||||
<div class="store-section">
|
||||
<div class="store-cards">
|
||||
<!-- 店铺1 -->
|
||||
<div class="store-card">
|
||||
<div class="store-title">
|
||||
<div class="store-logo">摊位图片占位符</div>
|
||||
<h3>新鲜水果店</h3>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<div class="member-level">金牌会员 lv4</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">优惠券：5张</div>
|
||||
<div class="coupon-details">
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">生日优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-09 至 2024-08-16</div>
|
||||
<div class="coupon-content">当日当天9折优惠</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">满减优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-08-31</div>
|
||||
<div class="coupon-content">满200-20</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">新用户优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-07-20 至 2024-09-20</div>
|
||||
<div class="coupon-content">首次购买8.5折</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">会员优惠商品</div>
|
||||
<div class="coupon-details">
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>进口香蕉 500g</h5>
|
||||
<div class="product-list-points">300积分</div>
|
||||
</div>
|
||||
<div class="product-offer-type">积分兑换</div>
|
||||
</div>
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>新鲜草莓 1kg</h5>
|
||||
<div class="product-list-price">¥35.00</div>
|
||||
</div>
|
||||
<div class="product-offer-type">积分双倍</div>
|
||||
</div>
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>有机西兰花 500g</h5>
|
||||
<div class="product-list-price">¥12.50</div>
|
||||
</div>
|
||||
<div class="product-offer-type">优惠券可用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 店铺2 -->
|
||||
<div class="store-card">
|
||||
<div class="store-title">
|
||||
<div class="store-logo">摊位图片占位符</div>
|
||||
<h3>优质蔬菜铺</h3>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<div class="member-level">银牌会员 lv3</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">优惠券：3张</div>
|
||||
<div class="coupon-details">
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">满减优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-08-31</div>
|
||||
<div class="coupon-content">满100-10</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">蔬菜专享券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-05 至 2024-08-25</div>
|
||||
<div class="coupon-content">绿叶蔬菜9折</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">周末特惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-12-31</div>
|
||||
<div class="coupon-content">周末购物满50-5</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">会员优惠商品</div>
|
||||
<div class="coupon-details">
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>有机西兰花 500g</h5>
|
||||
<div class="product-list-price">¥12.50</div>
|
||||
</div>
|
||||
<div class="product-offer-type">优惠券可用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 店铺3 -->
|
||||
<div class="store-card">
|
||||
<div class="store-title">
|
||||
<div class="store-logo">摊位图片占位符</div>
|
||||
<h3>精品肉类专营</h3>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<div class="member-level">铜牌会员 lv2</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">优惠券：2张</div>
|
||||
<div class="coupon-details">
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">肉类专享券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-08-31</div>
|
||||
<div class="coupon-content">精品肉类8.8折</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">满减优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-07-15 至 2024-09-15</div>
|
||||
<div class="coupon-content">满150-15</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">会员优惠商品</div>
|
||||
<div class="coupon-details">
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>澳洲进口牛排 200g</h5>
|
||||
<div class="product-list-price">¥58.00</div>
|
||||
</div>
|
||||
<div class="product-offer-type">积分双倍</div>
|
||||
</div>
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>本地五花肉 500g</h5>
|
||||
<div class="product-list-price">¥28.00</div>
|
||||
</div>
|
||||
<div class="product-offer-type">优惠券可用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 优惠券弹窗 -->
|
||||
<div id="coupon-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button">×</span>
|
||||
<h2>可用优惠券</h2>
|
||||
<div id="modal-coupon-list">
|
||||
<!-- 优惠券将在这里动态插入 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function toggleCoupons(element) {
|
||||
const couponDetails = element.nextElementSibling;
|
||||
if (couponDetails && couponDetails.classList.contains('coupon-details')) {
|
||||
couponDetails.classList.toggle('show');
|
||||
}
|
||||
}
|
||||
|
||||
// --- 新增代码 ---
|
||||
|
||||
const modal = document.getElementById('coupon-modal');
|
||||
const modalCouponList = document.getElementById('modal-coupon-list');
|
||||
const closeButton = document.querySelector('#coupon-modal .close-button');
|
||||
|
||||
function showProductCoupons(productElement) {
|
||||
const storeCard = productElement.closest('.store-card');
|
||||
if (!storeCard) return;
|
||||
|
||||
const couponSection = storeCard.querySelector('.coupon-details');
|
||||
if (!couponSection) return;
|
||||
|
||||
const coupons = couponSection.querySelectorAll('.coupon-item');
|
||||
|
||||
modalCouponList.innerHTML = '';
|
||||
|
||||
if (coupons.length === 0) {
|
||||
modalCouponList.innerHTML = '<p>暂无可用优惠券。</p>';
|
||||
} else {
|
||||
coupons.forEach(coupon => {
|
||||
modalCouponList.appendChild(coupon.cloneNode(true));
|
||||
});
|
||||
}
|
||||
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
if(closeButton) {
|
||||
closeButton.onclick = function() {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const productItems = document.querySelectorAll('.product-list-item');
|
||||
productItems.forEach(item => {
|
||||
const offerType = item.querySelector('.product-offer-type');
|
||||
if (offerType && offerType.innerText.trim() === '优惠券可用') {
|
||||
item.style.cursor = 'pointer';
|
||||
item.addEventListener('click', function() {
|
||||
showProductCoupons(this);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,777 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue