*大屏运营右侧车辆视频监控UI

web/client/src/sections/quanju/containers/footer/operation/right.js

@@ -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 [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 (
-        <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>
     )
 }

web/client/src/sections/quanju/containers/footer/operation/style.less

@@ -28,4 +28,50 @@
 .busList::-webkit-scrollbar-thumb {
 	background-color: rgba(28, 96, 254, 1);
 	border-radius: 1px
+}
+
+
+//车辆视频监控样式
+.busInformation{
+	width: 100%;
+	overflow: hidden;
+	span{
+		width: 85%;
+		height: 15%;
+		h3{
+			margin-top: 6%;
+			list-style:none;
+			margin-left: 4%;
+			color: rgba(216, 240, 255, 1);
+			display: block;
+			float: left;
+			font-size: 10px;
+		}
+		h4{
+			margin-top: 3.6%;
+			color: #fff;
+			font-size: 24px;
+			list-style:none;
+			margin-left: 4%;
+			font-family: "YouSheBiaoTiHei";
+			display: block;
+			float: left;
+			text-shadow: 0px 0px 8px #07B9FE;
+		}
+		h5{
+			margin-top: 4.2%;
+			color: #fff;
+			font-size: 20px;
+			list-style:none;
+			margin-left: 5%;
+			font-family: "YouSheBiaoTiHei";
+			display: block;
+			float: left;
+			text-shadow: 0px 0px 8px #07B9FE;
+		}
+	}
+}
+.busVideo{
+	width: 100%;
+	overflow: hidden;
 }