7.6 调整前端数据展示
This commit is contained in:
parent
7ea47d62b2
commit
fea22b2978
@ -1,327 +1,170 @@
|
||||
/* index.css */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
/* ========== 全局 ========== */
|
||||
*{
|
||||
margin:0;padding:0;box-sizing:border-box;
|
||||
font-family:'PingFang SC','Helvetica Neue',Arial,sans-serif;
|
||||
}
|
||||
body{
|
||||
background:#f5f5f5;
|
||||
color:#333;
|
||||
max-width:500px;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
padding-bottom:30px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding-bottom: 30px;
|
||||
/* ========== 轮播图 ========== */
|
||||
.swiper-container{
|
||||
width:100%;height:375px;position:relative;overflow:hidden;
|
||||
}
|
||||
.swiper-wrapper{display:flex;transition:transform .3s;}
|
||||
.swiper-slide{flex:0 0 100%;height:375px;}
|
||||
.swiper-slide img{width:100%;height:100%;object-fit:contain;background:#fff;}
|
||||
|
||||
.swiper-pagination{
|
||||
position:absolute;bottom:10px;left:50%;
|
||||
transform:translateX(-50%);display:flex;gap:6px;
|
||||
}
|
||||
.swiper-dot{
|
||||
width:8px;height:8px;border-radius:50%;
|
||||
background:rgba(255,255,255,.5);transition:all .3s;
|
||||
}
|
||||
.swiper-dot.active{background:#ff5000;width:16px;border-radius:4px;}
|
||||
|
||||
/* ========== 商品信息 ========== */
|
||||
.product-info{background:#fff;padding:15px;margin-bottom:10px;}
|
||||
.price-row{display:flex;align-items:center;margin-bottom:12px;}
|
||||
.current-price{color:#ff5000;font-size:28px;font-weight:bold;}
|
||||
.current-price::before{content:"￥";font-size:18px;}
|
||||
.original-price{
|
||||
color:#999;font-size:16px;text-decoration:line-through;margin-left:8px;
|
||||
}
|
||||
.original-price::before{content:"￥";}
|
||||
.title{font-size:18px;font-weight:bold;line-height:1.4;margin-bottom:10px;}
|
||||
|
||||
/* 促销行 */
|
||||
.promo-row{display:flex;align-items:center;gap:6px;margin-top:6px;}
|
||||
.promo-tag{
|
||||
flex-shrink:0;
|
||||
display:inline-block;
|
||||
background:linear-gradient(90deg,#ff2c2c,#ff6b22);
|
||||
color:#fff;font-size:12px;padding:2px 6px;border-radius:2px;
|
||||
}
|
||||
.promo-box{
|
||||
display:inline-block;font-size:13px;padding:2px 6px;
|
||||
border-radius:4px;font-weight:600;line-height:1.2;white-space:nowrap;
|
||||
}
|
||||
.promo-box.drop,
|
||||
.promo-box.sold{
|
||||
background:linear-gradient(90deg,#ff7e00,#ff5000);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* 轮播图样式 */
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 375px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* “xx人在抢” */
|
||||
.group-left{margin-right:4px;color:#ff5000;font-weight:bold;}
|
||||
|
||||
/* ========== 火焰小图标行 ========== */
|
||||
.promo-info{color:#ff5000;font-size:14px;margin:8px 0;display:flex;align-items:center;}
|
||||
.promo-info i{margin-right:5px;}
|
||||
|
||||
/* ========== 拼单列表 ========== */
|
||||
.group-buying{background:#fff;padding:15px;margin-bottom:10px;position:relative;overflow:hidden;}
|
||||
.section-title{
|
||||
font-size:16px;font-weight:bold;margin-bottom:12px;position:relative;padding-left:10px;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
display: flex;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.swiper-slide {
|
||||
flex: 0 0 100%;
|
||||
height: 375px;
|
||||
}
|
||||
.swiper-slide img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:contain; /* cover → contain 可看到整幅图 */
|
||||
background:#fff; /* 若比例不一致留白更自然 */
|
||||
}
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.swiper-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.swiper-dot.active {
|
||||
background: #ff5000;
|
||||
width: 16px;
|
||||
border-radius: 4px;
|
||||
.section-title::before{
|
||||
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
|
||||
width:3px;height:16px;background:#ff5000;border-radius:2px;
|
||||
}
|
||||
|
||||
|
||||
/* 商品信息区域 */
|
||||
.group-left{
|
||||
margin-right:4px;
|
||||
color:#ff5000;
|
||||
font-weight:bold;
|
||||
.group-users{height:120px;position:relative;overflow:hidden;}
|
||||
.user-list{position:absolute;top:0;left:0;width:100%;transition:transform .5s ease;}
|
||||
.user-item{
|
||||
display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #f5f5f5;
|
||||
}
|
||||
.product-info {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
.user-item:last-child{border-bottom:none;}
|
||||
.user-avatar{
|
||||
width:40px;height:40px;border-radius:50%;background:#f5f5f5;
|
||||
display:flex;align-items:center;justify-content:center;margin-right:10px;
|
||||
color:#999;font-size:20px;
|
||||
}
|
||||
.user-info{flex:1;}
|
||||
.user-name{font-size:15px;font-weight:bold;margin-bottom:4px;}
|
||||
.user-status{font-size:13px;color:#666;}
|
||||
.left-num{color:#666;margin-right:4px;font-weight:bold;}
|
||||
.countdown{
|
||||
display:inline-block;background:#ff5000;color:#fff;
|
||||
padding:1px 4px;border-radius:2px;margin-left:5px;
|
||||
}
|
||||
.buy-btn{
|
||||
background:linear-gradient(90deg,#ff2c2c,#ff6b22);
|
||||
color:#fff;border:none;border-radius:4px;padding:6px 15px;
|
||||
font-size:14px;font-weight:bold;cursor:pointer;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
/* ========== 底部操作栏 ========== */
|
||||
.action-bar{
|
||||
position:fixed;inset-inline:0;bottom:0;max-width:500px;margin:0 auto;
|
||||
background:#fff;display:flex;height:60px;
|
||||
box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:100;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
color: #ff5000;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
/* 左侧 3 个图标按钮 */
|
||||
.action-btn{
|
||||
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
font-size:12px;color:#666;
|
||||
}
|
||||
.action-btn i{font-size:20px;margin-bottom:4px;}
|
||||
|
||||
/* 右侧购买区域 */
|
||||
.purchase-btn{flex:2;display:flex;}
|
||||
|
||||
/* 公共：双行按钮布局 */
|
||||
.btn-single,
|
||||
.btn-group{
|
||||
flex:1;
|
||||
/* 纵向排布价格与文案 */
|
||||
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
gap:2px;
|
||||
border:none;cursor:pointer;
|
||||
}
|
||||
|
||||
.current-price::before {
|
||||
content: "￥";
|
||||
font-size: 18px;
|
||||
/* 各自背景色保持不变 */
|
||||
.btn-single{background:#ff9500;color:#fff;}
|
||||
.btn-group {background:#ff5000;color:#fff;}
|
||||
|
||||
/* 价格行 */
|
||||
.btn-price{
|
||||
font-size:18px;
|
||||
font-weight:700;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
text-decoration: line-through;
|
||||
margin-left: 8px;
|
||||
/* 文字行 */
|
||||
.btn-label{
|
||||
font-size:12px;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.original-price::before {
|
||||
content: "￥";
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.promo-tag {
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, #ff2c2c, #ff6b22);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.promo-info {
|
||||
color: #ff5000;
|
||||
font-size: 14px;
|
||||
margin: 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.promo-info i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* 拼单区域 - 修改了高度 */
|
||||
/* “仅剩 x 人成团” 前缀样式 */
|
||||
.left-num{
|
||||
color: #666;
|
||||
margin-right:4px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.group-buying {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #ff5000;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.group-users {
|
||||
height: 120px; /* 修改为120px以容纳两条完整信息 */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0; /* 减小上下内边距 */
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.user-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
display: inline-block;
|
||||
background: #ff5000;
|
||||
color: white;
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background: linear-gradient(90deg, #ff2c2c, #ff6b22);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 6px 15px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-btn i {
|
||||
font-size: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.purchase-btn {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-single {
|
||||
flex: 1;
|
||||
background: #ff9500;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex: 1;
|
||||
background: #ff5000;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ===== 支付弹窗 ===== */
|
||||
/* ========== 支付弹窗 ========== */
|
||||
.pay-mask{
|
||||
position:fixed;inset:0;z-index:999;
|
||||
background:rgba(0,0,0,.45);
|
||||
position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.45);
|
||||
display:none;align-items:center;justify-content:center;
|
||||
}
|
||||
|
||||
/* ① 适当放宽弹窗，保证二维码和按钮都有留白 */
|
||||
.pay-box{
|
||||
width:92%; /* → 手机端留 8% 边距 */
|
||||
max-width:420px; /* → PC 也能放下 260px 二维码 */
|
||||
background:#fff;
|
||||
border-radius:10px;
|
||||
padding:28px 24px;
|
||||
text-align:center;
|
||||
width:92%;max-width:420px;background:#fff;border-radius:10px;
|
||||
padding:28px 24px;text-align:center;
|
||||
}
|
||||
|
||||
/* ② 用 .qr-code 选中 <img>，限制尺寸并居中 */
|
||||
.pay-title{margin:0 0 12px;font-size:20px;font-weight:600;}
|
||||
.pay-amount{margin-bottom:20px;font-size:16px;color:#666;}
|
||||
.qr-code{
|
||||
width:260px; /* 你想要的显示大小 */
|
||||
max-width:100%; /* 小屏自动缩小 */
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:0 auto 32px; /* 居中 + 与按钮留间距 */
|
||||
border-radius:12px;
|
||||
object-fit:contain; /* 防止被拉伸／裁切 */
|
||||
width:260px;max-width:100%;height:auto;display:block;margin:0 auto 32px;
|
||||
border-radius:12px;object-fit:contain;
|
||||
}
|
||||
|
||||
/* 其余按钮样式保持不变 */
|
||||
.pay-btns{display:flex;gap:16px;justify-content:center;}
|
||||
.btn-primary,.btn-secondary{
|
||||
.btn-primary,
|
||||
.btn-secondary{
|
||||
flex:1;padding:12px 0;border:none;border-radius:10px;
|
||||
font-size:16px;font-weight:600;cursor:pointer;
|
||||
}
|
||||
.btn-primary{background:#12a400;color:#fff;}
|
||||
.btn-secondary{background:#f0f0f0;}
|
||||
.btn-secondary{background:#f0f0f0;}
|
||||
|
||||
@ -25,20 +25,18 @@
|
||||
<div class="original-price">100</div>
|
||||
</div>
|
||||
<div class="title">手写MyBatis：渐进式源码实践（全彩）</div>
|
||||
<div>
|
||||
<div class="promo-row">
|
||||
<span class="promo-tag">大促优惠</span>
|
||||
<span>直降￥60，76人再抢，参与马上抢到</span>
|
||||
</div>
|
||||
<div class="promo-info">
|
||||
<i class="fas fa-fire"></i>
|
||||
<!-- 新增：仅剩 x 人成团 -->
|
||||
<span class="group-left"></span>
|
||||
<!-- 直降价 -->
|
||||
<span class="promo-box drop">直降 ￥60</span>
|
||||
<!-- 已抢件数，由 JS 动态写入 -->
|
||||
<span class="promo-box sold" id="soldBox"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 拼单区域 - 修改了高度 -->
|
||||
<div class="group-buying">
|
||||
<div class="section-title">正在拼单</div>
|
||||
<div class="section-title" id="groupTitle"></div>
|
||||
<div class="group-users">
|
||||
<div class="user-list" id="userList">
|
||||
<div class="user-item">
|
||||
@ -121,8 +119,14 @@
|
||||
<span>购物车</span>
|
||||
</div>
|
||||
<div class="purchase-btn">
|
||||
<button class="btn-single" data-price="100">单独购买</button>
|
||||
<button class="btn-group" data-price="80">开团购买</button>
|
||||
<button class="btn-single" data-price="100">
|
||||
<span class="btn-price">￥100</span>
|
||||
<span class="btn-label">单独购买</span>
|
||||
</button>
|
||||
<button class="btn-group" data-price="80">
|
||||
<span class="btn-price">￥80</span>
|
||||
<span class="btn-label">开团购买</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付弹窗（默认隐藏） -->
|
||||
|
||||
@ -74,9 +74,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
|
||||
/* --------- 动态生成“xx人在抢，参与可立即拼成” --------- */
|
||||
const leftNum = Math.floor(Math.random() * 101) + 100; // 100 ~ 200 之间的随机整数
|
||||
const leftSpan = document.querySelector('.group-left');
|
||||
if (leftSpan) leftSpan.textContent = `${leftNum}人在抢，参与可立即拼成`;
|
||||
const leftNum = Math.floor(Math.random() * 101) + 100; // 100 ~ 200
|
||||
const groupTitle = document.getElementById('groupTitle');
|
||||
if (groupTitle) groupTitle.textContent = `${leftNum}人在抢，参与可立即拼成`;
|
||||
|
||||
/* ---------- 拼单用户纵向轮播 ---------- */
|
||||
const userList = document.getElementById('userList');
|
||||
@ -144,6 +144,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
}
|
||||
|
||||
/* --------- 动态填充“已抢 xxx 件” --------- */
|
||||
const soldBox = document.getElementById('soldBox');
|
||||
if (soldBox){
|
||||
const soldNum = Math.floor(Math.random()*101)+200; // 200~300
|
||||
soldBox.textContent = `已抢 ${soldNum} 件`;
|
||||
}
|
||||
|
||||
/* --------- 给每条拼单状态前加 “仅剩 x 人成团” --------- */
|
||||
document.querySelectorAll('.user-status').forEach(statusEl=>{
|
||||
const x = Math.floor(Math.random()*3)+1; // 1 ~ 3 随机整数
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user