From bf88518b9c1b98762fc92a61e25481fbb14890b6 Mon Sep 17 00:00:00 2001 From: linbin <495561397@qq.com> Date: Sat, 23 Aug 2025 21:53:57 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E7=94=B5=E5=95=86=E9=A6=96=E9=A1=B5=EF=BC=8C=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=BC=8F=E5=B8=83=E5=B1=80=E5=92=8C=E8=BD=AE?= =?UTF-8?q?=E6=92=AD=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - **样式重构**: - 引入 `cards-container` 网格布局，替代原有的 `market-section`。 - 新增通用的 `card` 卡片样式，并分别为菜市场卡片 (`market-card`) 和商品卡片 (`product-card`) 设计了详细的样式，包括图片、标题、评分、价格、操作按钮等。 - 为菜市场卡片增加了轮播图的样式，包括轮播指示器。 - **HTML结构更新**: - 使用新的卡片式布局完全重构了首页内容区域。 - 增加了一个包含两个菜市场信息的轮播卡片。 - 新增了四个商品展示卡片，包含商品图片、名称、价格、店铺等信息。 - **新增JavaScript功能**: - 增加了轮播图的自动播放和手动切换功能。 - 添加了对移动端触摸滑动的支持，用户可以通过左右滑动来切换轮播图。 --- 用户端APP/电商首页.html | 527 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 501 insertions(+), 26 deletions(-) diff --git a/用户端APP/电商首页.html b/用户端APP/电商首页.html index db278d4..10158fe 100644 --- a/用户端APP/电商首页.html +++ b/用户端APP/电商首页.html @@ -133,6 +133,7 @@ border-radius: 20px 20px 0 0; margin-top: -15px; padding: 20px; + padding-bottom: 120px; min-height: calc(100vh - 200px); } @@ -261,40 +262,283 @@ color: rgba(255,255,255,0.7); } - /* 菜市场区域 */ - .market-section { + /* 卡片容器 */ + .cards-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + margin-bottom: 20px; + } + + /* 通用卡片样式 */ + .card { background: white; border-radius: 15px; - padding: 15px; - margin-bottom: 20px; + padding: 0; + position: relative; + overflow: hidden; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + height: 320px; + } + + /* 菜市场轮播卡片 */ + .market-card { position: relative; } - .market-title { - background: linear-gradient(135deg, #2d5a3d, #4a7c59); - color: white; - padding: 10px 15px; - border-radius: 10px; - font-size: 16px; - font-weight: bold; - margin-bottom: 10px; + .market-carousel { + position: relative; + overflow: hidden; + height: 100%; + } + + .market-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 0.5s ease-in-out; + display: flex; + flex-direction: column; + } + + .market-slide.active { + opacity: 1; } .market-image { width: 100%; - height: 120px; - background: linear-gradient(135deg, #4a7c59, #70b77e); - border-radius: 10px; + height: 150px; + background-size: cover; + background-position: center; position: relative; - overflow: hidden; + flex-shrink: 0; } - .market-image::after { - content: '🥗'; + .market-title { + position: absolute; + top: 15px; + left: 15px; + background: rgba(0,0,0,0.7); + color: white; + padding: 6px 12px; + border-radius: 15px; + font-size: 14px; + font-weight: bold; + } + + .brand-badge { position: absolute; - right: 15px; bottom: 15px; - font-size: 30px; + left: 15px; + background: #ffa500; + color: white; + padding: 4px 10px; + border-radius: 12px; + font-size: 11px; + font-weight: bold; + } + + .market-info { + padding: 12px 15px; + flex: 1; + display: flex; + flex-direction: column; + } + + .market-name { + font-size: 13px; + color: #333; + margin-bottom: 5px; + font-weight: 500; + } + + .market-rating { + display: flex; + align-items: center; + gap: 5px; + font-size: 11px; + color: #666; + margin-bottom: 5px; + } + + .rating-star { + color: #ffa500; + } + + .market-stats { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 11px; + color: #666; + margin-bottom: 10px; + } + + .market-delivery { + background: #f0f8f0; + color: #4a7c59; + padding: 2px 6px; + border-radius: 8px; + font-size: 10px; + } + + .market-actions { + display: flex; + justify-content: center; + align-items: center; + padding: 0 15px 10px; + } + + .action-group { + display: flex; + align-items: center; + gap: 12px; + } + + .action-btn { + display: flex; + align-items: center; + gap: 3px; + font-size: 11px; + color: #666; + background: none; + border: none; + cursor: pointer; + } + + .action-btn.liked { + color: #ff6b6b; + } + + /* 轮播指示器 */ + .carousel-indicators { + position: absolute; + bottom: 50px; + right: 15px; + display: flex; + gap: 5px; + } + + .indicator { + width: 6px; + height: 6px; + border-radius: 50%; + background: rgba(255,255,255,0.5); + cursor: pointer; + transition: background 0.3s; + } + + .indicator.active { + background: white; + } + + /* 商品卡片 */ + .product-card { + position: relative; + display: flex; + flex-direction: column; + height: 320px; + } + + .product-image { + width: 80px; + height: 80px; + background-size: cover; + background-position: center; + border-radius: 50%; + margin: 15px auto 10px; + position: relative; + flex-shrink: 0; + } + + .product-badge { + position: absolute; + top: 10px; + right: 10px; + background: rgba(0,0,0,0.7); + color: white; + padding: 4px 8px; + border-radius: 10px; + font-size: 10px; + } + + .product-info { + padding: 0 15px 15px; + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + } + + .product-name { + font-size: 13px; + color: #333; + margin-bottom: 8px; + font-weight: 500; + line-height: 1.3; + } + + .product-price { + color: #ff6b6b; + font-size: 16px; + font-weight: bold; + margin-bottom: 8px; + } + + .product-price .unit { + font-size: 12px; + color: #999; + font-weight: normal; + } + + .product-store { + font-size: 11px; + color: #666; + margin-bottom: 8px; + line-height: 1.2; + } + + .product-meta { + display: flex; + justify-content: center; + gap: 8px; + font-size: 10px; + color: #999; + margin-bottom: 8px; + } + + .product-delivery { + font-size: 10px; + color: #999; + margin-bottom: 10px; + } + + .product-actions { + display: flex; + justify-content: center; + gap: 10px; + margin-top: auto; + padding-bottom: 5px; + } + + .add-to-cart { + position: absolute; + bottom: 15px; + right: 15px; + width: 28px; + height: 28px; + background: #4a7c59; + color: white; + border: none; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + cursor: pointer; } /* 底部导航 */ @@ -385,12 +629,12 @@
-
08:24
+
09:15
🔵 📶 📶 - 🔋 58% + 🔋 52%
@@ -494,10 +738,192 @@ - -
-
全季菜市场
-
+ +
+ +
+
+
+
+
华径菜场
+
👑 品牌
+
+
+
春申路1501号
+
+ ⭐ + 5.0分 + 📍 0.1km +
+
+ 销量：0份 + 满¥99免运费 +
+
+
+
+ + + +
+
+
+
+
+
全季菜市场
+
🏪 市场
+
+
+
徐汇区田林路
+
+ ⭐ + 4.8分 + 📍 0.3km +
+
+ 销量：15份 + 满¥66免运费 +
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
盐池滩羊腿肉约800g
+
¥99.8/份
+
华清羊肉店(全季菜市场)
+
+ ⭐ 4.8分 + 📍 0.3km +
+
起送¥20 满¥50免运费
+
+ + +
+
+ +
+ + +
+
+
🥩
+
+
订单备货中
+
+
盐池滩羊排骨丝
+
¥105.8/份
+
清羊肉店(全季菜市场)
+
+ ⭐ 4.9分 + 📍 0.3km +
+
起送¥30 满¥80免运费
+
+ + +
+
+ +
+ + +
+
+
+
巨峰葡萄约100g
+
¥12/份
+
四季水果店(春申菜市场)
+
+ ⭐ 4.7分 + 📍 0.1km +
+
起送¥10 满¥30免运费
+
+ + +
+
+ +
+ + +
+
+
+
新疆哈密瓜约500g
+
¥28/份
+
新鲜果园(华径菜场)
+
+ ⭐ 4.9分 + 📍 0.1km +
+
起送¥15 满¥40免运费
+
+ + +
+
+ +
@@ -526,5 +952,54 @@ 我的 + + \ No newline at end of file