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 @@