没有动手实操就不是你的知识！
需要日后留意的知识点：
组件首字母 大写 ！
Scss同样可以使用
import，在项目中通常这样使用：通过一个scss文件用来作为全局的css样式引入，这样就不需要每一个样式都引入一遍看着麻烦，例如：
@charset "UTF-8";
@import
"mixin",
"variable",
"base/reset",
"base/icon",
"component/base64",
"component/topbar",
"component/navigator",
"component/footer",
"component/login",
"views/lucky",
"views/introducation",
"views/a"
video标签有话说，自身集合许多的接口、方法；有需要点击参看
蒙层使用
position:fixed——这个方法可以直接让蒙层脱离文档流，这样宽高的100%就是相对屏幕。React 的
refs相关问题，目前讲不明白，因为我也一知半解。。。（9月1号会写一篇文档专门讲，先立FLAG！）
下面是我实现的方法：
Scss部分：
.litleCoverStyle{
width:200px;
height:133px;
position: absolute;
top: 100px;
right: 400px;
background: #000;
opacity: .25;
}
.litleIcon{
width: 50px;
border-radius: 50%;
background: #fff;
top: 50%;
left: 50%;
position: absolute;
margin-top: -25px;
margin-left: -25px
}
.btnPic{
position: absolute;
top: 100px;
right: 400px;
width: 200px;
}
.videos{
width: 624px;
height: 368px;
position:absolute;
top:400px;
}
.videoCover{
width: 624px;
height: 368px;
position:absolute;
top:0px;
background:#000;
opacity: .25;
z-index: 998;
}
.screenCover{
background: #000;
opacity: .25;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.cancel{
width: 30px;
position: absolute;
right: 10px;
top: 10px;
z-index: 999
}
jsx部分：
class VideoPlay extends React.Component{
constructor(props){
super(props)
this.hide = {
display: "none",
opacity: 0
}
this.show = {
display: "block",
}
this.state = {
videoOpen: this.hide,
videoCover: this.show
}
}
handleOpen(e){
this.setState({
videoOpen: this.show,
})
}
handleVideoPlay(e){
this.setState({
videoCover: this.hide
})
this.video.play()
}
handleVideoCancel(e){
this.setState({
videoOpen: this.hide,
videoCover: this.show
})
this.video.pause()
this.video.load()
}
render(){
return(
<div>
{/* 按钮部分： */}
<div className="videoBtn" onClick={this.handleOpen.bind(this)}>
<div className="litleCoverStyle">
</div>
</div>
{/* 视频部分： */}
<div className="videos" style={this.state.videoOpen}>
<div className="screenCover" onClick={this.handleVideoCancel.bind(this)} ></div>
<div className="videoCover" style={this.state.videoCover} onClick={this.handleVideoPlay.bind(this)}>
</div>
<video ref={video => this.video = video} src="http://hd.hclzx.cn/video/ad.mp4" controls="controls">ds</video>
</div>
</div>
)
}
}
点击查看效果——这是仅做测试网站，公司官网是www.hclzx.com，欢迎登陆注册哦！
THE END
