🎨 style: 优化代码

This commit is contained in:
wangsongsole 2023-06-28 10:51:26 +08:00
parent bbc1aeee73
commit 3ce77614e0
2 changed files with 51 additions and 39 deletions

View File

@ -17,6 +17,7 @@
z-index: 1003; z-index: 1003;
overflow: auto; overflow: auto;
scrollbar-width: none; scrollbar-width: none;
background-color: rgb(250, 67, 59);
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none display: none
@ -28,12 +29,12 @@
} }
.box { .box {
padding: 15px 8px; padding: 15px 8px 20px;
box-sizing: border-box; box-sizing: border-box;
min-height: 667px; min-height: 667px;
width: 100%; width: 100%;
background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_main_1.png') no-repeat top center; 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 { .effect_date {
@ -133,17 +134,29 @@
box-sizing: border-box; box-sizing: border-box;
} }
.instruction-box {
width: 100%;
display: flex;
flex-direction: column;
}
.instruction { .instruction {
width: 100%; width: 100%;
background: url('http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_bg.png') no-repeat top center; background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_text.png') no-repeat top center;
background-size: cover; background-size: 100% 100%;
height: 498px;
font-size: 12px; font-size: 12px;
color: #959595; color: #959595;
padding: 30px 10px 10px; padding: 0 10px 10px;
box-sizing: border-box; box-sizing: border-box;
line-height: 20px; 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 { .TextBlock {
@ -169,10 +182,6 @@
} }
} }
.instruction-1 {
margin-top: 12px;
}
.center { .center {
text-align: center; text-align: center;
} }

View File

@ -93,36 +93,39 @@ export default ({ data }) => {
alt="" alt=""
/> />
</div> </div>
<div className="instruction"> <div className="instruction-box">
<div className="instruction-1"> <div className="instruction-header"></div>
<p className="center"> <div className="instruction">
<img <div className="instruction-1">
className="notice" <p className="center">
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_title_notice.png" <img
alt="" className="notice"
/> src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_title_notice.png"
</p> alt=""
/>
</p>
{data.instruction || [1, 2, 3].includes(data.receive_type) ? ( {data.instruction || [1, 2, 3].includes(data.receive_type) ? (
<> <>
{createElement()} {createElement()}
<h3 className="instruction-text">使用规则</h3> <h3 className="instruction-text">使用规则</h3>
<p <p
className="scroll" className="scroll"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: data.instruction __html: data.instruction
}} }}
></p> ></p>
</> </>
) : ( ) : (
<Placeholder.TextBlock <Placeholder.TextBlock
className="TextBlock" className="TextBlock"
animate animate
widths={widths} widths={widths}
rows={20} rows={20}
dashed={false} dashed={false}
/> />
)} )}
</div>
</div> </div>
</div> </div>
</div> </div>