1012 lines
35 KiB
HTML
1012 lines
35 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', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||
background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #f5f5f5 50%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 状态栏 */
|
||
.status-bar {
|
||
background: #ff6b35;
|
||
color: white;
|
||
padding: 8px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-icons {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 头部区域 */
|
||
.header {
|
||
background: linear-gradient(180deg, #ff6b35 0%, #f7931e 100%);
|
||
padding: 15px 20px 25px;
|
||
}
|
||
|
||
.page-title {
|
||
color: white;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.back-btn {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 45px;
|
||
color: white;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 积分余额 */
|
||
.points-balance {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 15px;
|
||
padding: 15px 20px;
|
||
margin-bottom: 20px;
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.points-amount {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.points-label {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
background: #f5f5f5;
|
||
border-radius: 20px 20px 0 0;
|
||
margin-top: -15px;
|
||
padding: 20px;
|
||
padding-bottom: 120px;
|
||
min-height: calc(100vh - 200px);
|
||
}
|
||
|
||
/* 专区标签 */
|
||
.section-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.section-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 12px 0;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.section-tab.active {
|
||
background: #ff6b35;
|
||
color: white;
|
||
}
|
||
|
||
.section-tab:not(.active) {
|
||
color: #666;
|
||
}
|
||
|
||
/* 专区内容 */
|
||
.section-content {
|
||
display: none;
|
||
}
|
||
|
||
.section-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 积分专区样式 */
|
||
.points-section {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.points-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.points-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.points-more {
|
||
font-size: 12px;
|
||
color: #ff6b35;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 积分商品网格 */
|
||
.points-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
}
|
||
|
||
.points-item {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.points-item-image {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
margin: 0 auto 10px;
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.points-item-name {
|
||
font-size: 13px;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.points-item-points {
|
||
font-size: 14px;
|
||
color: #ff6b35;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.points-item-original {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.points-item-store {
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.exchange-btn {
|
||
background: #ff6b35;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 秒杀专区样式 */
|
||
.seckill-section {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.seckill-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.seckill-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.seckill-timer {
|
||
background: #ff4444;
|
||
color: white;
|
||
padding: 4px 8px;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 秒杀商品 */
|
||
.seckill-item {
|
||
background: #fff5f5;
|
||
border: 1px solid #ffcccc;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.seckill-badge {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: #ff4444;
|
||
color: white;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.seckill-item-header {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.seckill-item-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.seckill-item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.seckill-item-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.seckill-item-spec {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.seckill-item-store {
|
||
font-size: 11px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.seckill-price-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.seckill-price {
|
||
color: #ff4444;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.seckill-original-price {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.seckill-progress {
|
||
background: #f0f0f0;
|
||
border-radius: 10px;
|
||
height: 8px;
|
||
overflow: hidden;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.seckill-progress-bar {
|
||
background: #ff4444;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.seckill-stock {
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.seckill-timing {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.seckill-btn {
|
||
background: #ff4444;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 8px 20px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 预定专区样式 */
|
||
.reservation-section {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.reservation-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.reservation-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.reservation-explain {
|
||
background: #e8f4fd;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
font-size: 13px;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.reservation-explain-title {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
color: #2196f3;
|
||
}
|
||
|
||
/* 预定商品 */
|
||
.reservation-item {
|
||
background: #f0f8ff;
|
||
border: 1px solid #b3d9ff;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.reservation-badge {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: #2196f3;
|
||
color: white;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.reservation-item-header {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.reservation-item-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #2196f3, #64b5f6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reservation-item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.reservation-item-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.reservation-item-spec {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.reservation-item-store {
|
||
font-size: 11px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.reservation-pricing {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.reservation-price-section {
|
||
flex: 1;
|
||
}
|
||
|
||
.reservation-price {
|
||
color: #2196f3;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.reservation-original-price {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.reservation-discount {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
padding: 2px 6px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.reservation-schedule {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.reservation-schedule-item {
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.reservation-schedule-label {
|
||
font-weight: bold;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.reservation-btn {
|
||
background: #2196f3;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 8px 20px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 底部导航 */
|
||
.bottom-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10px 0 25px;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #999;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-item.active {
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 25px;
|
||
height: 25px;
|
||
margin-bottom: 5px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 状态栏 -->
|
||
<div class="status-bar">
|
||
<div>09:15</div>
|
||
<div class="status-icons">
|
||
<span>🔵</span>
|
||
<span>📶</span>
|
||
<span>📶</span>
|
||
<span>🔋 52%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 头部区域 -->
|
||
<div class="header">
|
||
<div class="back-btn">←</div>
|
||
<div class="page-title">福利专区</div>
|
||
|
||
<!-- 积分余额 -->
|
||
<div class="points-balance">
|
||
<div class="points-amount">2,580</div>
|
||
<div class="points-label">我的积分</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="main-content">
|
||
<!-- 专区标签 -->
|
||
<div class="section-tabs">
|
||
<div class="section-tab active" onclick="switchTab('points')">积分专区</div>
|
||
<div class="section-tab" onclick="switchTab('seckill')">秒杀专区</div>
|
||
<div class="section-tab" onclick="switchTab('reservation')">预定专区</div>
|
||
</div>
|
||
|
||
<!-- 积分专区 -->
|
||
<div id="points" class="section-content active">
|
||
<!-- 积分换购 -->
|
||
<div class="points-section">
|
||
<div class="points-header">
|
||
<div class="points-title">积分换购</div>
|
||
<div class="points-more">查看更多 ></div>
|
||
</div>
|
||
<div class="points-grid">
|
||
<div class="points-item">
|
||
<div class="points-item-image">🥛</div>
|
||
<div class="points-item-name">有机纯牛奶 250ml</div>
|
||
<div class="points-item-points">500积分</div>
|
||
<div class="points-item-original">原价 ¥8</div>
|
||
<div class="points-item-store">华清市场/华清超市</div>
|
||
<button class="exchange-btn">立即换购</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍎</div>
|
||
<div class="points-item-name">红富士苹果 约500g</div>
|
||
<div class="points-item-points">800积分</div>
|
||
<div class="points-item-original">原价 ¥12</div>
|
||
<div class="points-item-store">新鲜市场/新鲜果园</div>
|
||
<button class="exchange-btn">立即换购</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🥖</div>
|
||
<div class="points-item-name">法式面包 300g</div>
|
||
<div class="points-item-points">600积分</div>
|
||
<div class="points-item-original">原价 ¥10</div>
|
||
<div class="points-item-store">烘焙市场/烘焙坊</div>
|
||
<button class="exchange-btn">立即换购</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍵</div>
|
||
<div class="points-item-name">龙井茶 50g</div>
|
||
<div class="points-item-points">1200积分</div>
|
||
<div class="points-item-original">原价 ¥25</div>
|
||
<div class="points-item-store">茶叶市场/茶叶专营店</div>
|
||
<button class="exchange-btn">立即换购</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 积分优惠购 -->
|
||
<div class="points-section">
|
||
<div class="points-header">
|
||
<div class="points-title">积分优惠购</div>
|
||
<div class="points-more">查看更多 ></div>
|
||
</div>
|
||
<div class="points-grid">
|
||
<div class="points-item">
|
||
<div class="points-item-image">🥩</div>
|
||
<div class="points-item-name">优质牛肉 500g</div>
|
||
<div class="points-item-points">300积分+¥45</div>
|
||
<div class="points-item-original">原价 ¥68</div>
|
||
<div class="points-item-store">华清市场/华清肉店</div>
|
||
<button class="exchange-btn">立即购买</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍯</div>
|
||
<div class="points-item-name">纯天然蜂蜜 500g</div>
|
||
<div class="points-item-points">200积分+¥35</div>
|
||
<div class="points-item-original">原价 ¥48</div>
|
||
<div class="points-item-store">农家市场/农家特产</div>
|
||
<button class="exchange-btn">立即购买</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🧀</div>
|
||
<div class="points-item-name">进口奶酪 200g</div>
|
||
<div class="points-item-points">500积分+¥25</div>
|
||
<div class="points-item-original">原价 ¥45</div>
|
||
<div class="points-item-store">进口市场/进口食品店</div>
|
||
<button class="exchange-btn">立即购买</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍫</div>
|
||
<div class="points-item-name">比利时巧克力 100g</div>
|
||
<div class="points-item-points">400积分+¥18</div>
|
||
<div class="points-item-original">原价 ¥32</div>
|
||
<div class="points-item-store">甜品市场/甜品屋</div>
|
||
<button class="exchange-btn">立即购买</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 秒杀专区 -->
|
||
<div id="seckill" class="section-content">
|
||
<div class="seckill-section">
|
||
<div class="seckill-header">
|
||
<div class="seckill-title">今日秒杀</div>
|
||
<div class="seckill-timer">距离结束 02:15:30</div>
|
||
</div>
|
||
|
||
<!-- 秒杀商品1 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">限时秒杀</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🍓</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">新鲜草莓 约500g</div>
|
||
<div class="seckill-item-spec">规格：500g/份</div>
|
||
<div class="seckill-item-store">四季水果店(春申菜市场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥9.9</div>
|
||
<div class="seckill-original-price">原价 ¥28</div>
|
||
</div>
|
||
<div class="seckill-discount">6.5折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 75%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">已抢75件 剩余25件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：10:00</div>
|
||
<div>结束时间：12:00</div>
|
||
<div>总数量：100件</div>
|
||
</div>
|
||
<button class="seckill-btn">立即秒杀</button>
|
||
</div>
|
||
|
||
<!-- 秒杀商品2 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">限时秒杀</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🥩</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">精品牛排 200g</div>
|
||
<div class="seckill-item-spec">规格：200g/份</div>
|
||
<div class="seckill-item-store">华清肉店(全季菜市场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥29.9</div>
|
||
<div class="seckill-original-price">原价 ¥68</div>
|
||
</div>
|
||
<div class="seckill-discount">4.4折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 90%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">已抢45件 剩余5件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：14:00</div>
|
||
<div>结束时间：16:00</div>
|
||
<div>总数量：50件</div>
|
||
</div>
|
||
<button class="seckill-btn">立即秒杀</button>
|
||
</div>
|
||
|
||
<!-- 秒杀商品3 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">限时秒杀</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🍯</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">天然百花蜜 500g</div>
|
||
<div class="seckill-item-spec">规格：500g/瓶</div>
|
||
<div class="seckill-item-store">农家特产店(华径菜场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥19.9</div>
|
||
<div class="seckill-original-price">原价 ¥48</div>
|
||
</div>
|
||
<div class="seckill-discount">4.1折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 60%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">已抢30件 剩余20件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：16:00</div>
|
||
<div>结束时间：18:00</div>
|
||
<div>总数量：50件</div>
|
||
</div>
|
||
<button class="seckill-btn">立即秒杀</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预定专区 -->
|
||
<div id="reservation" class="section-content">
|
||
<div class="reservation-section">
|
||
<div class="reservation-header">
|
||
<div class="reservation-title">新品预定</div>
|
||
<div class="points-more">查看更多 ></div>
|
||
</div>
|
||
|
||
<!-- 预定说明 -->
|
||
<div class="reservation-explain">
|
||
<div class="reservation-explain-title">预定说明</div>
|
||
<div>商品预计某日开始上架销售，此时提前预定，可以享受折扣价格。预定成功后，商品上架时将优先发货。</div>
|
||
</div>
|
||
|
||
<!-- 预定商品1 -->
|
||
<div class="reservation-item">
|
||
<div class="reservation-badge">新品预定</div>
|
||
<div class="reservation-item-header">
|
||
<div class="reservation-item-image">🦀</div>
|
||
<div class="reservation-item-info">
|
||
<div class="reservation-item-name">阳澄湖大闸蟹 公4两 母3两</div>
|
||
<div class="reservation-item-spec">规格：公4两母3两/对</div>
|
||
<div class="reservation-item-store">水产专营店(春申菜市场)</div>
|
||
<div class="reservation-pricing">
|
||
<div class="reservation-price-section">
|
||
<div class="reservation-price">预定价 ¥168</div>
|
||
<div class="reservation-original-price">上架价 ¥258</div>
|
||
</div>
|
||
<div class="reservation-discount">6.5折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reservation-schedule">
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">开始上架价格</div>
|
||
<div>¥258</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定上架时间</div>
|
||
<div>9月15日</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">上架销售价格</div>
|
||
<div>¥258</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定销售价格</div>
|
||
<div>¥168</div>
|
||
</div>
|
||
</div>
|
||
<button class="reservation-btn">立即预定</button>
|
||
</div>
|
||
|
||
<!-- 预定商品2 -->
|
||
<div class="reservation-item">
|
||
<div class="reservation-badge">新品预定</div>
|
||
<div class="reservation-item-header">
|
||
<div class="reservation-item-image">🍐</div>
|
||
<div class="reservation-item-info">
|
||
<div class="reservation-item-name">新疆香梨 约2kg</div>
|
||
<div class="reservation-item-spec">规格：2kg/箱</div>
|
||
<div class="reservation-item-store">新鲜果园(华径菜场)</div>
|
||
<div class="reservation-pricing">
|
||
<div class="reservation-price-section">
|
||
<div class="reservation-price">预定价 ¥29.9</div>
|
||
<div class="reservation-original-price">上架价 ¥45</div>
|
||
</div>
|
||
<div class="reservation-discount">6.6折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reservation-schedule">
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">开始上架价格</div>
|
||
<div>¥45</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定上架时间</div>
|
||
<div>9月10日</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">上架销售价格</div>
|
||
<div>¥45</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定销售价格</div>
|
||
<div>¥29.9</div>
|
||
</div>
|
||
</div>
|
||
<button class="reservation-btn">立即预定</button>
|
||
</div>
|
||
|
||
<!-- 预定商品3 -->
|
||
<div class="reservation-item">
|
||
<div class="reservation-badge">新品预定</div>
|
||
<div class="reservation-item-header">
|
||
<div class="reservation-item-image">🧈</div>
|
||
<div class="reservation-item-info">
|
||
<div class="reservation-item-name">进口黄油 200g</div>
|
||
<div class="reservation-item-spec">规格：200g/块</div>
|
||
<div class="reservation-item-store">进口食品店(全季菜市场)</div>
|
||
<div class="reservation-pricing">
|
||
<div class="reservation-price-section">
|
||
<div class="reservation-price">预定价 ¥18.8</div>
|
||
<div class="reservation-original-price">上架价 ¥32</div>
|
||
</div>
|
||
<div class="reservation-discount">5.9折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reservation-schedule">
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">开始上架价格</div>
|
||
<div>¥32</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定上架时间</div>
|
||
<div>9月8日</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">上架销售价格</div>
|
||
<div>¥32</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定销售价格</div>
|
||
<div>¥18.8</div>
|
||
</div>
|
||
</div>
|
||
<button class="reservation-btn">立即预定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部导航 -->
|
||
<div class="bottom-nav">
|
||
<div class="nav-item" onclick="goToPage('home')">
|
||
<div class="nav-icon">🏠</div>
|
||
<span>首页</span>
|
||
</div>
|
||
<div class="nav-item" onclick="goToPage('message')">
|
||
<div class="nav-icon">💬</div>
|
||
<span>消息</span>
|
||
</div>
|
||
<div class="nav-item" onclick="goToPage('cart')">
|
||
<div class="nav-icon">🛒</div>
|
||
<span>购物车</span>
|
||
</div>
|
||
<div class="nav-item active" onclick="goToPage('profile')">
|
||
<div class="nav-icon">👤</div>
|
||
<span>我的</span>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 页面切换功能
|
||
function switchTab(tabName) {
|
||
// 隐藏所有内容
|
||
const contents = document.querySelectorAll('.section-content');
|
||
contents.forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 移除所有标签的激活状态
|
||
const tabs = document.querySelectorAll('.section-tab');
|
||
tabs.forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// 显示选中的内容
|
||
document.getElementById(tabName).classList.add('active');
|
||
|
||
// 激活选中的标签
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
// 页面跳转功能
|
||
function goToPage(page) {
|
||
switch(page) {
|
||
case 'home':
|
||
window.location.href = '电商首页.html';
|
||
break;
|
||
case 'message':
|
||
// 跳转到消息页面
|
||
break;
|
||
case 'cart':
|
||
// 跳转到购物车页面
|
||
break;
|
||
case 'profile':
|
||
// 跳转到个人中心页面
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 返回按钮
|
||
document.querySelector('.back-btn').addEventListener('click', function() {
|
||
window.location.href = '电商首页.html';
|
||
});
|
||
|
||
// 积分换购/购买按钮
|
||
document.querySelectorAll('.exchange-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
alert('跳转到商品详情页');
|
||
});
|
||
});
|
||
|
||
// 秒杀按钮
|
||
document.querySelectorAll('.seckill-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
alert('跳转到秒杀确认页');
|
||
});
|
||
});
|
||
|
||
// 预定按钮
|
||
document.querySelectorAll('.reservation-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
alert('跳转到预定确认页');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |