组件版本的
class PopContent extends Component{
render() {
const {awardContent,closeMask,imgUrl} = this.props;
return(
<div className="popMask">
<div className="wrapContent">
<div className="popHeader" style={{background:"url("+win+")"}}>
<img src={imgUrl} alt=""/>
</div>
{ awardContent?
<div className="popContent">恭喜您获得{awardContent}</div>
:<div className="popContent">今天抽奖次数已用完</div>
}
<div className="popFooter">
<div className="buttonFooter" onClick={closeMask}>朕知道了</div>
</div>
</div>
</div>
)
}
}
对应的样式:
.popMask {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
}
.wrapContent {
width: 660px;
height: 600px;
background-color: #fff;
margin: auto;
opacity: 1;
position: relative;
}
.popHeader {
width: 100%;
height: 300px;
position: relative;
}
.popHeader img {
position: absolute;
width: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.popContent {
width: 100%;
height: 150px;
background-color: #fff;
font-size: 40px;
text-align: center;
line-height: 150px;
}
.popFooter {
width: 100%;
height: 150px;
background-color: #fff;
display: flex;
}
.buttonFooter {
width: 80%;
height: 120px;
margin: auto;
text-align: center;
line-height: 120px;
font-size: 50px;
color: white;
background-color: rgb(255, 142, 0);
}
效果