🎨 style: 优化代码
This commit is contained in:
parent
bbc1aeee73
commit
3ce77614e0
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue