1

src/views/MLargeScreen/components/carInformation/index.vue

@@ -55,7 +55,7 @@
 					<div class="carInFrom_input">{{realTimeData.effic ? realTimeData.effic + 'km/h' : '无'}}</div>
 				</div>
 				<div class="carInFrom_content">
-					<div>当日行驶里程：</div>
+					<div>当日里程：</div>
 					<div class="carInFrom_input">{{realTimeData.mil ? realTimeData.mil : '无'}}</div>
 				</div>
 				<div class="carInFrom_content">
@@ -146,7 +146,9 @@ export default {
 </script>
 
 <style scope>
-.carInMainViews{
+
+@media screen and (max-width:901px){
+	.carInMainViews{
 		position: absolute;
 		z-index: 2;
 		top: 50%;
@@ -158,8 +160,81 @@ export default {
 		transform: translate(-50%,-50%);
 		padding: 12px 30px 0px;
 		box-sizing: border-box;
+	}
+	.carInSmallTitle{
+		color: white;
+		font-size: 12px;
+		text-align: center;
+		line-height: 6vh;
+		width: 11vw;
+		height: 6vh;
+		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
+		background-size:100% 100%;
+	}
+	.carInClose{
+		position: absolute;
+		top: 4vh;
+		right: 1vw;
+		cursor: pointer;
+	}
+	.carInContent{
+		margin-top: 1vh;
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+	}
+	.carInContent>div{
+		width: 47%;
+		height: 100%;
+	}
+	.carInContent_left_title{
+		font-size: 16px;
+		font-weight: 600;
+		background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF); 
+		-webkit-background-clip:text; 
+		-webkit-text-fill-color:transparent; 
+	}
+	.carInFrom_content{
+		margin-top: 3vh;
+		color: rgb(23,249,250);
+		font-size: 14px;
+		font-weight: 500;
+		letter-spacing: 0.5px;
+		display: flex;
+		justify-content: space-between;
+	}
+	.carInFrom_content>div{
+		height: 5vh;
+		line-height: 4.5vh;
+	}
+	.carInFrom_input{
+		width: 19vw;
+		border: 2px solid rgb(23,249,250);
+		border-radius: 5px;
+		padding:0px 10px;
+		box-sizing: border-box;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		word-break: break-all;
+	}
 }
-.carInSmallTitle{
+
+@media screen and (min-width:901px){
+	.carInMainViews{
+		position: absolute;
+		z-index: 2;
+		top: 50%;
+		left: 50%;
+		height: 75vh;
+		width: 70vw;
+		background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxikuang.png');
+		background-size:100% 100%;
+		transform: translate(-50%,-50%);
+		padding: 12px 30px 0px;
+		box-sizing: border-box;
+	}
+	.carInSmallTitle{
 		color: white;
 		font-size: 18px;
 		text-align: center;
@@ -168,32 +243,32 @@ export default {
 		height: 4.5vh;
 		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
 		background-size:100% 100%;
-}
-.carInClose{
+	}
+	.carInClose{
 		position: absolute;
 		top: 4vh;
 		right: 1vw;
 		cursor: pointer;
-}
-.carInContent{
+	}
+	.carInContent{
 		margin-top: 20px;
 		height: 50vh;
 		width: 100%;
 		display: flex;
 		justify-content: space-between;
-}
-.carInContent>div{
+	}
+	.carInContent>div{
 		width: 47%;
 		height: 100%;
-}
-.carInContent_left_title{
+	}
+	.carInContent_left_title{
 		font-size: 20px;
 		font-weight: 600;
 		background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF); 
 		-webkit-background-clip:text; 
 		-webkit-text-fill-color:transparent; 
-}
-.carInFrom_content{
+	}
+	.carInFrom_content{
 		margin-top: 15px;
 		color: rgb(23,249,250);
 		font-size: 18px;
@@ -201,12 +276,12 @@ export default {
 		letter-spacing: 1px;
 		display: flex;
 		justify-content: space-between;
-}
-.carInFrom_content>div{
+	}
+	.carInFrom_content>div{
 		height: 5vh;
 		line-height: 4.5vh;
-}
-.carInFrom_input{
+	}
+	.carInFrom_input{
 		width: 19vw;
 		border: 2px solid rgb(23,249,250);
 		border-radius: 5px;
@@ -216,5 +291,7 @@ export default {
 		text-overflow: ellipsis;
 		overflow: hidden;
 		word-break: break-all;
+	}
 }
+
 </style>
\ No newline at end of file