Skip to content

N
NewTruckTerminalSyetem
Commit 1accb4a2 authored by xxx's avatar xxx
Browse files
Options

1

parent 000db5ec
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 70 deletions
src/views/MLargeScreen/components/carInformation/index.vue
View file @ 1accb4a2
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<div class="carInFrom_input">{{realTimeData.effic ? realTimeData.effic + 'km/h' : '无'}}</div> <div class="carInFrom_input">{{realTimeData.effic ? realTimeData.effic + 'km/h' : '无'}}</div>
</div> </div>
<div class="carInFrom_content"> <div class="carInFrom_content">
<div>当日行驶里程：</div> <div>当日里程：</div>
<div class="carInFrom_input">{{realTimeData.mil ? realTimeData.mil : '无'}}</div> <div class="carInFrom_input">{{realTimeData.mil ? realTimeData.mil : '无'}}</div>
</div> </div>
<div class="carInFrom_content"> <div class="carInFrom_content">
...@@ -146,75 +146,152 @@ export default { ...@@ -146,75 +146,152 @@ export default {
</script> </script>
<style scope> <style scope>
.carInMainViews{
position: absolute; @media screen and (max-width:901px){
z-index: 2; .carInMainViews{
top: 50%; position: absolute;
left: 50%; z-index: 2;
height: 75vh; top: 50%;
width: 70vw; left: 50%;
background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxikuang.png'); height: 75vh;
background-size:100% 100%; width: 70vw;
transform: translate(-50%,-50%); background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxikuang.png');
padding: 12px 30px 0px; background-size:100% 100%;
box-sizing: border-box; transform: translate(-50%,-50%);
} padding: 12px 30px 0px;
.carInSmallTitle{ box-sizing: border-box;
color: white; }
font-size: 18px; .carInSmallTitle{
text-align: center; color: white;
line-height: 4.5vh; font-size: 12px;
width: 9vw; text-align: center;
height: 4.5vh; line-height: 6vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png'); width: 11vw;
background-size:100% 100%; height: 6vh;
} background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
.carInClose{ background-size:100% 100%;
position: absolute; }
top: 4vh; .carInClose{
right: 1vw; position: absolute;
cursor: pointer; top: 4vh;
} right: 1vw;
.carInContent{ cursor: pointer;
margin-top: 20px; }
height: 50vh; .carInContent{
width: 100%; margin-top: 1vh;
display: flex; width: 100%;
justify-content: space-between; display: flex;
} justify-content: space-between;
.carInContent>div{ }
width: 47%; .carInContent>div{
height: 100%; width: 47%;
} height: 100%;
.carInContent_left_title{ }
font-size: 20px; .carInContent_left_title{
font-weight: 600; font-size: 16px;
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF); font-weight: 600;
-webkit-background-clip:text; background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-text-fill-color:transparent; -webkit-background-clip:text;
} -webkit-text-fill-color:transparent;
.carInFrom_content{ }
margin-top: 15px; .carInFrom_content{
color: rgb(23,249,250); margin-top: 3vh;
font-size: 18px; color: rgb(23,249,250);
font-weight: 500; font-size: 14px;
letter-spacing: 1px; font-weight: 500;
display: flex; letter-spacing: 0.5px;
justify-content: space-between; display: flex;
} justify-content: space-between;
.carInFrom_content>div{ }
height: 5vh; .carInFrom_content>div{
line-height: 4.5vh; 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;
}
} }
.carInFrom_input{
width: 19vw; @media screen and (min-width:901px){
border: 2px solid rgb(23,249,250); .carInMainViews{
border-radius: 5px; position: absolute;
padding:0px 10px; z-index: 2;
box-sizing: border-box; top: 50%;
white-space: nowrap; left: 50%;
text-overflow: ellipsis; height: 75vh;
overflow: hidden; width: 70vw;
word-break: break-all; 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;
line-height: 4.5vh;
width: 9vw;
height: 4.5vh;
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: 20px;
height: 50vh;
width: 100%;
display: flex;
justify-content: space-between;
}
.carInContent>div{
width: 47%;
height: 100%;
}
.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{
margin-top: 15px;
color: rgb(23,249,250);
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
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;
}
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment