ui改动

app/components/cover.js

@@ -0,0 +1,14 @@
+import React,{Component} from 'react'
+import './cover.less'
+
+class Cover extends Component{
+	render(){
+		return(
+			<div>
+				<div className='coverBox' style={{backgroundImage:`url(${this.props.bg.replace(/130/g,'550')})`}}></div>
+				<div className='coverBg'></div>
+			</div>
+		)
+	}
+}
+export default Cover;

app/components/cover.less

@@ -0,0 +1,23 @@
+.coverBox{
+	position:fixed;
+	top:0;
+	left:0;
+	height:100%;
+	width:100%;
+	filter: blur(65px);
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: 50%;
+	opacity: .6;
+	overflow:hidden;
+	z-index:-999;
+}
+.coverBg{
+	position:fixed;
+	top:0;
+	left:0;
+	height:100%;
+	width:100%;
+	z-index:-998;
+	background-color: rgba(0,0,0,.35);
+}

app/components/header.less

@@ -1,8 +1,6 @@
 .components-header{
 	box-sizing:border-box;
 	padding: 15px 25px; 
-	border-bottom: 1px solid #ccc;
-	background: white;
 	.caption{
 		font-size: 20px;
 		text-indent: 20px;

app/player/player.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Progress from '../components/progress'
+import Cover from '../components/cover.js';
 import  './Player.less'
 import { Link } from 'react-router'
 import Pubsub from 'pubsub-js'
@@ -75,37 +76,40 @@ class Player extends React.Component {
 	}
 	render(){
 		return (
-			<div className='player-page'>
-				<h1 className='caption'><Link to='/list'>我的私人音乐坊</Link> </h1>
-				<div className="mt20 row">
-					<div className="controll-wrapper">
-						<h2 className="music-title">{this.props.currentMusicItem.title}</h2>
-						<h3 className="music-artist mt10">{this.props.currentMusicItem.artist}</h3>
-						<div className="row mt20">
-							<div className="volume-container">
-								<i className="icon-volume rt" style={{top:5,left:-5}}></i>
-								<div className="volume-wrapper">
-									<Progress progress={this.state.volume} barColor="red" onProgressChange={this.changeVolumeHanler} />
+			<div>
+				<Cover bg={this.props.currentMusicItem.cover}/>
+				<div className='player-page'>
+					<h1 className='caption'><Link to='/list'>我的私人音乐坊</Link> </h1>
+					<div className="mt20 row">
+						<div className="controll-wrapper">
+							<h2 className="music-title">{this.props.currentMusicItem.title}</h2>
+							<h3 className="music-artist mt10">{this.props.currentMusicItem.artist}</h3>
+							<div className="row mt20">
+								<div className="volume-container">
+									<i className="icon-volume rt" style={{top:5,left:-5}}></i>
+									<div className="volume-wrapper">
+										<Progress progress={this.state.volume} barColor="red" onProgressChange={this.changeVolumeHanler} />
+									</div>
 								</div>
 							</div>
+							<div style={{height:10,lineHeight:'10px'}}>
+								<Progress progress={this.state.progress} onProgressChange={this.progressChangeHandler.bind(this)} />
+								<div className="left-time -col-auto">{(this.state.time/60).toFixed(0)>10?10:'0'+(this.state.time/60).toFixed(0)} : {((this.state.time).toFixed(0)%60<10) ? '0'+(this.state.time).toFixed(0)%60 : (this.state.time).toFixed(0)%60} s</div>
+							</div>
+				                		<div className="mt35 row">
+				                			<div>
+					                			<i className="icon prev" onClick={this.playPrev.bind(this)}></i>
+					                			<i className={`icon ml20 ${Math.ceil(this.state.time)>= Math.ceil(duration) ? 'play' : this.state.isPlay ? 'pause':'play'}`} onClick={this.play.bind(this)}></i>
+					                			<i className="icon next ml20" onClick={this.playNext.bind(this)}></i>
+				                			</div>
+				                			<div className="-col-auto">
+				                				<i className="icon repeat-cycle"></i>
+				                			</div>
+				                		</div>
 						</div>
-						<div style={{height:10,lineHeight:'10px'}}>
-							<Progress progress={this.state.progress} onProgressChange={this.progressChangeHandler.bind(this)} />
-							<div className="left-time -col-auto">{(this.state.time/60).toFixed(0)>10?10:'0'+(this.state.time/60).toFixed(0)} : {((this.state.time).toFixed(0)%60<10) ? '0'+(this.state.time).toFixed(0)%60 : (this.state.time).toFixed(0)%60} s</div>
+						<div className='-col-auto cover' >
+							<img className={`${Math.ceil(this.state.time)>= Math.ceil(duration) ? 'pause' : this.state.isPlay ? '':'pause'}`} src={this.props.currentMusicItem.cover} alt={this.props.currentMusicItem.title}/>
 						</div>
-			                		<div className="mt35 row">
-			                			<div>
-				                			<i className="icon prev" onClick={this.playPrev.bind(this)}></i>
-				                			<i className={`icon ml20 ${Math.ceil(this.state.time)>= Math.ceil(duration) ? 'play' : this.state.isPlay ? 'pause':'play'}`} onClick={this.play.bind(this)}></i>
-				                			<i className="icon next ml20" onClick={this.playNext.bind(this)}></i>
-			                			</div>
-			                			<div className="-col-auto">
-			                				<i className="icon repeat-cycle"></i>
-			                			</div>
-			                		</div>
-					</div>
-					<div className='-col-auto cover' >
-						<img className={`${Math.ceil(this.state.time)>= Math.ceil(duration) ? 'pause' : this.state.isPlay ? '':'pause'}`} src={this.props.currentMusicItem.cover} alt={this.props.currentMusicItem.title}/>
 					</div>
 				</div>
 			</div>

app/player/player.less

@@ -10,7 +10,7 @@ to {transform: rotate(360deg);}
 
 	.caption {
 		font-size: 16px;
-		color: rgb(47, 152, 66);
+		color:#31c27c
 	}
 
 	.cover {
@@ -22,6 +22,7 @@ to {transform: rotate(360deg);}
 			width: 180px;
 			height: 180px;
 			border-radius: 50%;
+			    box-shadow: 0 0 14px #000000;
 			animation:rotate 25s linear infinite;
 		}
 
@@ -44,14 +45,14 @@ to {transform: rotate(360deg);}
 	.music-title {
 	    font-size: 25px;
 	    font-weight: 400;
-	    color: rgb(3, 3, 3);
+	    color: rgba(225,225,225,.8);
 	    height: 36px;
 	    line-height: 36px;
 	}
 	.music-artist {
 		font-size: 15px;
 	    font-weight: 400;
-	    color: rgb(74, 74, 74);
+	    color: rgba(225,225,225,.8);
     }
     .left-time {
     	font-size: 14px;