import * as React from 'react' ; import "./RecommendHeader.scss" ; import Swiper from "../../../../../components/Swiper/Swiper" ; import banner0 from "../../../../../static/img/banner1.jpeg" ; import banner1 from "../../../../../static/img/banner2.jpeg" ; import banner2 from "../../../../../static/img/banner3.jpeg" ; import banner3 from "../../../../../static/img/banner4.jpeg" ; import download from "../../../../../static/img/download.png" ; const bannerBgList = [ { id : 0 , name : banner0 , } , { id : 1 , name : banner1 , } , { id : 2 , name : banner2 , } , { id : 3 , name : banner3 , } , { id : 4 , name : banner0 , } , { id : 5 , name : banner0 , } , { id : 6 , name : banner1 , } , { id : 7 , name : banner2 , } , { id : 8 , name : banner3 , } , { id : 9 , name : banner0 , } , ] ; interface IPropsType { banners : [ ] ; } const RecommendHeader = ( props ) : JSX . Element => { const [ states , setStates ] = React . useState < number > ( 0 ) ; const changeIndex = ( index ) => { setStates ( index ) ; } ; return ( < div className = "recommendHeader" style = { { background : `url(${ bannerBgList [ states ] . name }) repeat-x` } } > < div className = "bannerWithDownload" > < div className = "bannerPosBox" > { } { } < Swiper { ... props } changeIndex = { changeIndex } / > < /div> { } < div className = "downLoad" > < img src = { download } alt = "" / > < /div> { } < button className = "left" / > < button className = "right" / > { } < ul className = "chointPointBox" > { } < /ul> < /div> < /div>); } ; export default RecommendHeader ;