部分代码
css
.homePhoto{
width: 100%;
flex: 1;
position: relative;
background: url(../../assets/home_bg.png) no-repeat left top;
background-size: cover;
p{
width: 150px;
height: 40px;
border: 2px solid #ffffff;
color: #ffffff;
font-size: 12px;
line-height: 40px;
text-align: center;
margin: 0 auto;
margin-top: 100%;
}
div{
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
img:nth-child(1){
width: 100%;
height: auto;
display: block;
}
img:nth-child(2){
width: 40px;
height: auto;
display: block;
position: absolute;
left: 20px;
bottom: 30px;
}
}
// div:nth-child(1){
// z-index: 9;
// }
// div:nth-child(2){
// z-index: 8;
// }
// div:nth-child(3){
// z-index: 7;
// }
}
jsx
import React, { PropTypes } from 'react';
import styles from './HomePhoto.less';
import $ from "jquery";
function HomePhoto ({
photoList=[],
start,
move,
end,
goShopping,
}){
let pl=photoList.map((photo,index)=>
<div style={{zIndex:-index+999}} key={photo.collocation_id} id='photo' onTouchStart ={(event)=>start(event,photo.collocation_id)} onTouchMove ={(event)=>move(event,photo.collocation_id)} onTouchEnd ={(event)=>end(event,photo.collocation_id)}>
<img src={photo.url}/>
<img src={require('../../assets/shouzhi.png')}/>
</div>
)
return(
<div className={styles.homePhoto} id="photos">
<p onClick={goShopping}>逛逛单品</p>
{
localStorage.getItem('token')?'':<div id='photo' onTouchStart ={(event)=>start(event,1)} onTouchMove ={(event)=>move(event,1)} onTouchEnd ={(event)=>end(event,1)}>
<img src={require('../../assets/sao.png')}/>
</div>
}
{pl}
</div>
)
}
export default HomePhoto;