From 3ce77614e0f3a927a2041af0a2c0859c68531e83 Mon Sep 17 00:00:00 2001
From: wangsongsole <wangsongsole@126.com>
Date: Wed, 28 Jun 2023 10:51:26 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/redPackets/index.less          | 29 ++++++---
 src/components/redPackets/mobileComponent.jsx | 61 ++++++++++---------
 2 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/components/redPackets/index.less b/src/components/redPackets/index.less
index d26aa2fa..0042c9ad 100644
--- a/src/components/redPackets/index.less
+++ b/src/components/redPackets/index.less
@@ -17,6 +17,7 @@
 	z-index: 1003;
 	overflow: auto;
 	scrollbar-width: none;
+	background-color: rgb(250, 67, 59);
 
 	&::-webkit-scrollbar {
 		display: none
@@ -28,12 +29,12 @@
 	}
 
 	.box {
-		padding: 15px 8px;
+		padding: 15px 8px 20px;
 		box-sizing: border-box;
 		min-height: 667px;
 		width: 100%;
 		background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_main_1.png') no-repeat top center;
-		background-size: cover;
+		background-size: 100%;
 	}
 
 	.effect_date {
@@ -133,17 +134,29 @@
 		box-sizing: border-box;
 	}
 
+	.instruction-box {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
 	.instruction {
 		width: 100%;
-		background: url('http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_bg.png') no-repeat top center;
-		background-size: cover;
-		height: 498px;
+		background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_text.png') no-repeat top center;
+		background-size: 100% 100%;
 		font-size: 12px;
 		color: #959595;
-		padding: 30px 10px 10px;
+		padding: 0 10px 10px;
 		box-sizing: border-box;
 		line-height: 20px;
+	}
 
+
+	.instruction-header {
+		width: 100%;
+		height: 43px;
+		background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_header.png') no-repeat;
+		background-size: 100%;
 	}
 
 	.TextBlock {
@@ -169,10 +182,6 @@
 		}
 	}
 
-	.instruction-1 {
-		margin-top: 12px;
-	}
-
 	.center {
 		text-align: center;
 	}
diff --git a/src/components/redPackets/mobileComponent.jsx b/src/components/redPackets/mobileComponent.jsx
index 434d3e6a..d0bff497 100644
--- a/src/components/redPackets/mobileComponent.jsx
+++ b/src/components/redPackets/mobileComponent.jsx
@@ -93,36 +93,39 @@ export default ({ data }) => {
             alt=""
           />
         </div>
-        <div className="instruction">
-          <div className="instruction-1">
-            <p className="center">
-              <img
-                className="notice"
-                src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_title_notice.png"
-                alt=""
-              />
-            </p>
+        <div className="instruction-box">
+          <div className="instruction-header"></div>
+          <div className="instruction">
+            <div className="instruction-1">
+              <p className="center">
+                <img
+                  className="notice"
+                  src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_title_notice.png"
+                  alt=""
+                />
+              </p>
 
-            {data.instruction || [1, 2, 3].includes(data.receive_type) ? (
-              <>
-                {createElement()}
-                <h3 className="instruction-text">使用规则</h3>
-                <p
-                  className="scroll"
-                  dangerouslySetInnerHTML={{
-                    __html: data.instruction
-                  }}
-                ></p>
-              </>
-            ) : (
-              <Placeholder.TextBlock
-                className="TextBlock"
-                animate
-                widths={widths}
-                rows={20}
-                dashed={false}
-              />
-            )}
+              {data.instruction || [1, 2, 3].includes(data.receive_type) ? (
+                <>
+                  {createElement()}
+                  <h3 className="instruction-text">使用规则</h3>
+                  <p
+                    className="scroll"
+                    dangerouslySetInnerHTML={{
+                      __html: data.instruction
+                    }}
+                  ></p>
+                </>
+              ) : (
+                <Placeholder.TextBlock
+                  className="TextBlock"
+                  animate
+                  widths={widths}
+                  rows={20}
+                  dashed={false}
+                />
+              )}
+            </div>
           </div>
         </div>
       </div>