wanyiwei
2 years ago
4 changed files with 110 additions and 2 deletions
After Width: | Height: | Size: 623 KiB |
After Width: | Height: | Size: 14 KiB |
@ -1,8 +1,70 @@ |
|||||
import React from 'react' |
import React, { useState } from 'react' |
||||
|
import { Carousel } from 'antd'; |
||||
|
import Module from '../../public/module' |
||||
|
|
||||
const Right = () => { |
const Right = () => { |
||||
|
const [dataLists, setDataList] = useState([ |
||||
|
{ |
||||
|
route: '147', |
||||
|
plate: '赣APJ090' |
||||
|
}, { |
||||
|
route: '166', |
||||
|
plate: '赣APJ087' |
||||
|
}, { |
||||
|
route: '171', |
||||
|
plate: '赣APJ184' |
||||
|
}, { |
||||
|
route: '186', |
||||
|
plate: '赣APJ241' |
||||
|
}, { |
||||
|
route: '199', |
||||
|
plate: '赣APJ337' |
||||
|
} |
||||
|
]) |
||||
|
const style = { height: "97%", marginTop: "3%" } |
||||
return ( |
return ( |
||||
<div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>555555555 |
<div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}> |
||||
|
<Module style={style} customize={true} title={"车辆视频监控"}> |
||||
|
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}> |
||||
|
<Carousel |
||||
|
autoplay |
||||
|
infinite |
||||
|
autoplaySpeed={300000} |
||||
|
vertical={true} |
||||
|
slidesToShow={4} |
||||
|
> |
||||
|
{ |
||||
|
dataLists.map((data, index) => ( |
||||
|
<div key={index} style={{width:'100%',height:'40%'}}> |
||||
|
<div className='busInformation'> |
||||
|
<img src='assets/images/quanju/theBus.png' style={{ width: '15%', display:'block',float:'left' }} /> |
||||
|
<span> |
||||
|
<h3>所属线路</h3> |
||||
|
<h4>{data.route}</h4> |
||||
|
<h3>车辆牌照号</h3> |
||||
|
<h5>{data.plate}</h5> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className='busVideo'> |
||||
|
<div style={{ |
||||
|
width:'98%',margin:'1% 1%',height:171,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
|
border:'1px solid #1C60FE' |
||||
|
}}><img src='assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
||||
|
<div style={{ |
||||
|
width:'48%',margin:'1% 1%',height:140,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
|
border:'1px solid #1C60FE' |
||||
|
}}><img src='assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
||||
|
<div style={{ |
||||
|
width:'48%',margin:'1% 1%',height:140,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
|
border:'1px solid #1C60FE' |
||||
|
}}><img src='assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)) |
||||
|
} |
||||
|
</Carousel> |
||||
|
</div> |
||||
|
</Module> |
||||
</div> |
</div> |
||||
) |
) |
||||
} |
} |
||||
|
Loading…
Reference in new issue