运营公交车辆卡片优化

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

@@ -56,7 +56,7 @@ const Right = ({ busRunTime }) => {
     const style = { height: "97%", marginTop: "3%" }
     const carouselContent = busRunTimeList.map((d, index) => {
         return (
-            <div key={index} style={{ width: '100%', height: '40%' }}>
+            <div key={index} style={{ width: '100%', height: '40%' }} className='carCard'>
                 <div className='busInformation'>
                     <img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} />
                     <span>
@@ -85,8 +85,8 @@ const Right = ({ busRunTime }) => {
                 // title={"车辆视频监控"}
                 title={"公交运营信息"}
             >
-                <div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}>
+                <div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }} >
-                    <div style={{ border: '1px solid rgba(10, 114, 255, 1)', backgroundColor: 'rgba(10, 114, 255, 0.1)' }}>
+                    <div style={{ border: '1px solid rgba(10, 114, 255, 1)', backgroundColor: 'rgba(10, 114, 255, 0.1)' }} >
                         <img src='/assets/images/quanju/search.png' style={{ width: '5%', margin: '0 1.5% 1% 3.5%' }} />
                         <Input
                             style={{

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

@@ -1,78 +1,92 @@
 .busList {
-	width: 100%;
+    width: 100%;
-	height: 96%;
+    height: 96%;
-	overflow-x: hidden;
+    overflow-x: hidden;
     overflow-y: auto;
-	.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{
+
-		background: none;
+    .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
-		background-color: none !important; 
+        background: none;
-		border: 1px solid rgba(10, 114, 255, 1);
+        background-color: none !important;
-	}
+        border: 1px solid rgba(10, 114, 255, 1);
-	.ant-tree .ant-tree-node-content-wrapper:hover {
+    }
-		background-color: none;
+
-		background: none;
+    .ant-tree .ant-tree-node-content-wrapper:hover {
-		// border: 1px solid rgba(10, 114, 255, 1);
+        background-color: none;
-	}
+        background: none;
+        // border: 1px solid rgba(10, 114, 255, 1);
+    }
 
 }
 
 .busList::-webkit-scrollbar-track {
-	background-color: rgba(3, 60, 158, 0.3);
+    background-color: rgba(3, 60, 158, 0.3);
-	border-radius: 1px
+    border-radius: 1px
 }
 
 .busList::-webkit-scrollbar {
-	width: 5px;
+    width: 5px;
 }
 
 .busList::-webkit-scrollbar-thumb {
-	background-color: rgba(28, 96, 254, 1);
+    background-color: rgba(28, 96, 254, 1);
-	border-radius: 1px
+    border-radius: 1px
 }
 
+//
+.carCard {
+    background-image: url(/assets/images/leadership/beijinglan.png);
+    background-size: cover;
+    margin: 12px 0;
+    padding: 0 -4px;
+}
 
 //车辆视频监控样式
-.busInformation{
+.busInformation {
-	width: 100%;
+    width: 100%;
-	overflow: hidden;
+    overflow: hidden;
-	span{
+
-		width: 85%;
+    span {
-		height: 15%;
+        width: 85%;
-		h3{
+        height: 15%;
-			margin-top: 6%;
+
-			list-style:none;
+        h3 {
-			margin-left: 4%;
+            margin-top: 6%;
-			color: rgba(216, 240, 255, 1);
+            list-style: none;
-			display: block;
+            margin-left: 4%;
-			float: left;
+            color: rgba(216, 240, 255, 1);
-			font-size: 10px;
+            display: block;
-		}
+            float: left;
-		h4{
+            font-size: 10px;
-			margin-top: 3.6%;
+        }
-			color: #fff;
+
-			font-size: 24px;
+        h4 {
-			list-style:none;
+            margin-top: 3.6%;
-			margin-left: 4%;
+            color: #fff;
-			font-family: "YouSheBiaoTiHei";
+            font-size: 24px;
-			display: block;
+            list-style: none;
-			float: left;
+            margin-left: 4%;
-			text-shadow: 0px 0px 8px #07B9FE;
+            font-family: "YouSheBiaoTiHei";
-		}
+            display: block;
-		h5{
+            float: left;
-			margin-top: 4.2%;
+            text-shadow: 0px 0px 8px #07B9FE;
-			color: #fff;
+        }
-			font-size: 20px;
+
-			list-style:none;
+        h5 {
-			margin-left: 5%;
+            margin-top: 4.2%;
-			font-family: "YouSheBiaoTiHei";
+            color: #fff;
-			display: block;
+            font-size: 20px;
-			float: left;
+            list-style: none;
-			text-shadow: 0px 0px 8px #07B9FE;
+            margin-left: 5%;
-		}
+            font-family: "YouSheBiaoTiHei";
-	}
+            display: block;
+            float: left;
+            text-shadow: 0px 0px 8px #07B9FE;
+        }
+    }
 }
-.busVideo{
+
-	width: 100%;
+.busVideo {
-	overflow: hidden;
+    width: 100%;
-	margin-bottom: 2%;
+    overflow: hidden;
+    margin-bottom: 2%;
 }