From df6210b2aee2dac052fba3914d6f26ea3064b218 Mon Sep 17 00:00:00 2001
From: Dragon <13925835632@139.com>
Date: Tue, 27 Feb 2024 21:52:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/yinmeng/modules/rule/luckyGiftRule.html  |  9 +-
 .../modules/rule/style/luckyGiftRule.css      | 82 +++++++++++------
 .../modules/rule/style/luckyGiftRule.scss     | 91 +++++++++++--------
 3 files changed, 115 insertions(+), 67 deletions(-)

diff --git a/view/yinmeng/modules/rule/luckyGiftRule.html b/view/yinmeng/modules/rule/luckyGiftRule.html
index 55e224f..6b733fa 100644
--- a/view/yinmeng/modules/rule/luckyGiftRule.html
+++ b/view/yinmeng/modules/rule/luckyGiftRule.html
@@ -6,9 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport"
         content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <title>幸运礼物玩法说明</title>
+    <title>幸运礼物活动规则</title>
     <link rel="stylesheet" href="../../common/css/reset.css">
-    <link rel="stylesheet" href="./style/luckyGiftRule.css">
+    <link rel="stylesheet" href="./style/luckyGiftRule.css?v=1.0">
     <style>
         body {
             background: #F4F4FA;
@@ -20,6 +20,11 @@
     <div class="wrap">
         <div class="fixed_wrap" style="background: #F4F4FA;">
             <div class="tip">送出幸运礼物，获得不同图标和特效</div>
+            <div class="rule">
+                <p>您知悉“幸运礼物”是旨在提升平台娱乐性和用户活跃度的互动功能，该活动仅供互动娱乐，用户通过活动获取的礼物仅限在平台内消耗使用;</p>
+                <p>活动期间，用户应当遵守法律法规及平台规则，如发现用户违规 (包括但不限于使用外挂作弊、套现、反向兑换现金、倒买倒卖、洗钱等违背诚实信用或损害其他用户、平台及任何第三方合法权益的行为)，平台有权撤销用户活动参与资格，收回全部权益，必要时追究法律责任，并有权视情况对用户采取限制、封禁帐号、冻结资金以做进一步查证处理。您也可通过点击用户资料，右上角进行举报。</p>
+                <p>本活动仅限年龄18岁及以上用户参加，请参与互动玩法的用户务必注意健康娱乐，适度消费;</p>
+            </div>
             <div class="gift_list_contain">
                 <ul class="gift_list">
                     <!-- <li class="active" id="1">
diff --git a/view/yinmeng/modules/rule/style/luckyGiftRule.css b/view/yinmeng/modules/rule/style/luckyGiftRule.css
index 81a9b6f..99132b0 100644
--- a/view/yinmeng/modules/rule/style/luckyGiftRule.css
+++ b/view/yinmeng/modules/rule/style/luckyGiftRule.css
@@ -1,113 +1,145 @@
+.wrap {
+  overflow: hidden;
+}
+
 .wrap .fixed_wrap {
-  position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   background-color: #fff;
 }
+
 .wrap .fixed_wrap .tip {
   text-align: center;
   font-size: 0.32rem;
   color: #666;
   margin-top: 0.64rem;
-  margin-bottom: 0.4533333333rem;
+  margin-bottom: 0.45333rem;
 }
+
+.wrap .fixed_wrap .rule {
+  font-size: 0.32rem;
+  color: #666;
+  width: 90%;
+  margin: 0 auto 0.45333rem;
+  line-height: 0.45rem;
+}
+
+.wrap .fixed_wrap .rule p {
+  margin-bottom: 0.13333rem;
+}
+
 .wrap .fixed_wrap .gift_list_contain {
   overflow-x: scroll;
-  margin-bottom: 0.5333333333rem;
+  margin-bottom: 0.53333rem;
 }
+
 .wrap .fixed_wrap .gift_list_contain .gift_list {
   width: max-content;
-  padding: 0 0.3733333333rem;
+  padding: 0 0.37333rem;
   box-sizing: border-box;
 }
+
 .wrap .fixed_wrap .gift_list_contain .gift_list::after {
-  content: "";
+  content: '';
   display: block;
   clear: both;
 }
+
 .wrap .fixed_wrap .gift_list_contain .gift_list li {
   float: left;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 2.2933333333rem;
+  width: 2.29333rem;
   height: 2.88rem;
   margin-left: 0.32rem;
   font-size: 0.32rem;
   text-align: center;
   background: #fff;
 }
+
 .wrap .fixed_wrap .gift_list_contain .gift_list li img {
   width: 1.6rem;
   height: 1.6rem;
   margin-top: 0.32rem;
-  margin-bottom: 0.1333333333rem;
+  margin-bottom: 0.13333rem;
 }
+
 .wrap .fixed_wrap .gift_list_contain .gift_list li.active {
   background: url("../images/2.png") no-repeat 0 0/100% 100%;
   color: #FFB606;
-  width: 2.2933333333rem;
-  height: 3.0666666667rem;
+  width: 2.29333rem;
+  height: 3.06667rem;
 }
+
 .wrap .box {
   background: #fff;
   width: 90%;
   box-sizing: border-box;
-  padding: 0.2666666667rem;
+  padding: 0.26667rem;
   border-radius: 0.2rem;
-  margin: 5.1rem auto 1.0666666667rem;
+  margin: 1rem auto 1.06667rem;
 }
+
 .wrap .select_gift_name {
   position: relative;
-  height: 0.5333333333rem;
-  line-height: 0.5333333333rem;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
   font-weight: bold;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
   color: #333;
   background: #fff;
   margin-left: 0.5rem;
 }
+
 .wrap .select_gift_name::after {
-  content: "";
+  content: '';
   position: absolute;
-  left: -0.3733333333rem;
+  left: -0.37333rem;
   height: inherit;
-  width: 0.1066666667rem;
+  width: 0.10667rem;
   background-color: #FFBC51;
-  border-radius: 0.0533333333rem;
+  border-radius: 0.05333rem;
 }
+
 .wrap .gift_item_contain li {
   display: flex;
   align-items: center;
-  margin-bottom: 0.4266666667rem;
+  margin-bottom: 0.42667rem;
   padding: 0 0.72rem;
   box-sizing: border-box;
 }
+
 .wrap .gift_item_contain li .gift_item_pic {
   width: 1.28rem;
   height: 1.28rem;
-  margin-right: 0.3466666667rem;
+  margin-right: 0.34667rem;
 }
+
 .wrap .gift_item_contain li .gift_item_name {
-  width: 2.6666666667rem;
+  width: 2.66667rem;
   text-align: left;
-  font-size: 0.3466666667rem;
+  font-size: 0.34667rem;
   color: #333;
 }
+
 .wrap .gift_item_contain li .gift_item_price {
   flex: 1;
 }
+
 .wrap .gift_item_contain li .gift_item_price img {
-  width: 0.3466666667rem;
-  height: 0.2666666667rem;
+  width: 0.34667rem;
+  height: 0.26667rem;
   margin-right: 0.08rem;
 }
+
 .wrap .gift_item_contain li .gift_item_price span {
   font-size: 0.32rem;
   color: #333;
 }
+
 .wrap .gift_item_contain li .ratio {
   font-size: 0.32rem;
   color: #666;
@@ -116,5 +148,3 @@
 ::-webkit-scrollbar {
   display: none;
 }
-
-/*# sourceMappingURL=luckyGiftRule.css.map */
diff --git a/view/yinmeng/modules/rule/style/luckyGiftRule.scss b/view/yinmeng/modules/rule/style/luckyGiftRule.scss
index f50ad65..353c0e9 100644
--- a/view/yinmeng/modules/rule/style/luckyGiftRule.scss
+++ b/view/yinmeng/modules/rule/style/luckyGiftRule.scss
@@ -1,10 +1,11 @@
-@function px2rem($px, $rem:75) {
-    @return $px / $rem+rem;
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 .wrap {
+    overflow: hidden;
     .fixed_wrap {
-        position: fixed;
+        // position: fixed;
         top: 0;
         left: 0;
         z-index: 1;
@@ -13,19 +14,31 @@
 
         .tip {
             text-align: center;
-            font-size: px2rem(24, );
+            font-size: px2rem(24);
             color: #666;
-            margin-top: px2rem(48, );
-            margin-bottom: px2rem(34, );
+            margin-top: px2rem(48);
+            margin-bottom: px2rem(34);
+        }
+        .rule {
+            font-size: px2rem(24);
+            color: #666;
+            // margin-top: px2rem(48);
+            // margin-bottom: px2rem(34);
+            width: 90%;
+            margin: 0 auto px2rem(34);
+            line-height: 0.45rem;
+            p{
+                margin-bottom: px2rem(10);
+            }
         }
 
         .gift_list_contain {
             overflow-x: scroll;
-            margin-bottom: px2rem(40, );
+            margin-bottom: px2rem(40);
 
             .gift_list {
                 width: max-content;
-                padding: 0 px2rem(28, );
+                padding: 0 px2rem(28);
                 box-sizing: border-box;
 
                 &::after {
@@ -39,25 +52,25 @@
                     display: flex;
                     flex-direction: column;
                     align-items: center;
-                    width: px2rem(172, );
-                    height: px2rem(216, );
-                    margin-left: px2rem(24, );
-                    font-size: px2rem(24, );
+                    width: px2rem(172);
+                    height: px2rem(216);
+                    margin-left: px2rem(24);
+                    font-size: px2rem(24);
                     text-align: center;
                     background: #fff;
 
                     img {
-                        width: px2rem(120, );
-                        height: px2rem(120, );
-                        margin-top: px2rem(24, );
-                        margin-bottom: px2rem(10, );
+                        width: px2rem(120);
+                        height: px2rem(120);
+                        margin-top: px2rem(24);
+                        margin-bottom: px2rem(10);
                     }
 
                     &.active {
                         background: url('../images/2.png') no-repeat 0 0/100% 100%;
                         color: #FFB606;
-                        width: px2rem(172, );
-                        height: px2rem(230, );
+                        width: px2rem(172);
+                        height: px2rem(230);
                     }
                 }
             }
@@ -68,17 +81,17 @@
         background: #fff;
         width: 90%;
         box-sizing: border-box;
-        padding: px2rem(20, );
-        border-radius: px2rem(15, );
-        margin: 5.1rem auto px2rem(80, );
+        padding: px2rem(20);
+        border-radius: px2rem(15);
+        margin: 1rem auto px2rem(80);
     }
 
     .select_gift_name {
         position: relative;
-        height: px2rem(40, );
-        line-height: px2rem(40, );
+        height: px2rem(40);
+        line-height: px2rem(40);
         font-weight: bold;
-        font-size: px2rem(28, );
+        font-size: px2rem(28);
         color: #333;
         background: #fff;
         margin-left: 0.5rem;
@@ -86,11 +99,11 @@
         &::after {
             content: '';
             position: absolute;
-            left: px2rem(-28, );
+            left: px2rem(-28);
             height: inherit;
-            width: px2rem(8, );
+            width: px2rem(8);
             background-color: #FFBC51;
-            border-radius: px2rem(4, );
+            border-radius: px2rem(4);
         }
     }
 
@@ -98,20 +111,20 @@
         li {
             display: flex;
             align-items: center;
-            margin-bottom: px2rem(32, );
-            padding: 0 px2rem(54, );
+            margin-bottom: px2rem(32);
+            padding: 0 px2rem(54);
             box-sizing: border-box;
 
             .gift_item_pic {
-                width: px2rem(96, );
-                height: px2rem(96, );
-                margin-right: px2rem(26, );
+                width: px2rem(96);
+                height: px2rem(96);
+                margin-right: px2rem(26);
             }
 
             .gift_item_name {
-                width: px2rem(200, );
+                width: px2rem(200);
                 text-align: left;
-                font-size: px2rem(26, );
+                font-size: px2rem(26);
                 color: #333;
             }
 
@@ -119,19 +132,19 @@
                 flex: 1;
 
                 img {
-                    width: px2rem(26, );
-                    height: px2rem(20, );
-                    margin-right: px2rem(6, );
+                    width: px2rem(26);
+                    height: px2rem(20);
+                    margin-right: px2rem(6);
                 }
 
                 span {
-                    font-size: px2rem(24, );
+                    font-size: px2rem(24);
                     color: #333;
                 }
             }
 
             .ratio {
-                font-size: px2rem(24, );
+                font-size: px2rem(24);
                 color: #666;
             }
         }