From fea22b2978dbad3b1f254590aa8e014f31e7d00d Mon Sep 17 00:00:00 2001 From: zhangsan <646228430@qq.com> Date: Sun, 6 Jul 2025 18:11:46 +0800 Subject: [PATCH] =?UTF-8?q?7.6=20=E8=B0=83=E6=95=B4=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/dev-ops/nginx/html/css/index.css | 437 +++++++++----------------- docs/dev-ops/nginx/html/index.html | 24 +- docs/dev-ops/nginx/html/js/index.js | 13 +- 3 files changed, 164 insertions(+), 310 deletions(-) diff --git a/docs/dev-ops/nginx/html/css/index.css b/docs/dev-ops/nginx/html/css/index.css index 789c918..e161daa 100644 --- a/docs/dev-ops/nginx/html/css/index.css +++ b/docs/dev-ops/nginx/html/css/index.css @@ -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 选中 ,限制尺寸并居中 */ +.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;} \ No newline at end of file +.btn-secondary{background:#f0f0f0;} diff --git a/docs/dev-ops/nginx/html/index.html b/docs/dev-ops/nginx/html/index.html index 6c53f0e..e87bede 100644 --- a/docs/dev-ops/nginx/html/index.html +++ b/docs/dev-ops/nginx/html/index.html @@ -25,20 +25,18 @@
100
手写MyBatis:渐进式源码实践(全彩)
-
+
大促优惠 - 直降¥60,76人再抢,参与马上抢到 -
-
- - - + + 直降 ¥60 + +
-
正在拼单
+
@@ -121,8 +119,14 @@ 购物车
- - + +
diff --git a/docs/dev-ops/nginx/html/js/index.js b/docs/dev-ops/nginx/html/js/index.js index a04facb..5c32d27 100644 --- a/docs/dev-ops/nginx/html/js/index.js +++ b/docs/dev-ops/nginx/html/js/index.js @@ -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 随机整数