🎨 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;
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;
}

View File

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