练练手
react中进度条的思考参考:https://blog.csdn.net/weixin_34297300/article/details/91381853
import React,{Component} from "react"
import './index.css'
export default class Treasure extends Component{
constructor(props){
super(props)
this.state={}
}
render(){
return(
<div className="treasure">
<div className="content">
<span className="title">快乐手机</span>
<div className="treasureShow">
<div className="treasureImg1">
<img src="" alt="" className="treasureImg"></img>
<span className="price">价值 ¥8999</span>
</div>
<div className="introduce">
<span className="proTitle">FindX2 Pro感官5G手机</span>
<div className="progress"><div className="bar"/></div>
<span className="progressValue">50%</span>
<span className="scale">已参与5000/满10000开奖</span>
<div className="creaditBtn"><span>仅需999积分</span></div>
</div>
</div>
</div>
</div>
)
}
}
.treasure{
padding: 0 16px;
}
.content{
height:150px;
background: #f1bdbd;
}
.title{
display: block;
line-height: 20px;
line-height: 20px;
font-size:18px;
}
.treasureShow{
display: flex;
height: 100px;
width: 328px;
}
.treasureImg{
width: 100px;
height: 100px;
background: #e6f1bd;
border-radius: 12px;
margin-right: 12px;
}
.price{
display: block;
position: absolute;
top:23px;
left:20px;
height: 16px;
width: 70px;
line-height: 16px;
background: #f18408;
color:#fff;
font-size: 12px;
border-radius: 12px;
}
.proTitle{
font-size:16px;
}
.progress{
display: inline-block;
margin-top: 8px;
width: 150px;
height: 4px;
background: #fff;
border-radius: 2px;
}
.bar{
width: 50%;
height: 4px;
background: #f37813;
border-radius: 2px;
}
.progressValue{
font-size: 12px;
margin-left:12px;
}
.scale{
display: inline-block;
font-size:12px
}
.creaditBtn{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;
background: #f37813;
border-radius: 15px;
color:#fff;
margin-top: 8px;
}