2021-07-12

练练手

react中进度条的思考参考：https://blog.youkuaiyun.com/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;
}