tms页面放大

This commit is contained in:
Yuan 2023-11-13 10:38:30 +08:00
parent 8020075b98
commit ad6d96890c

View File

@ -99,7 +99,8 @@
<td :class="{ bg_g: item }" v-for="(item, j) in v" :key="j">{{ item ? '' : '-- --' }}</td></template
>
<td v-if="i === 0" :rowspan="Object.keys(carInfo).length + 1">
<div class="speedBg" :style="{ backgroundImage: `url('${localStatic}/jl3d/tms/PMS3.png')` }">
<div class="speedBg">
<img :src="`${localStatic}/jl3d/tms/PMS3.png`" />
<div
id="accBar"
:style="{
@ -107,7 +108,7 @@
}"
:class="{ bg_g: trainInfo.tractionPercent > 0, bg_r: trainInfo.tractionPercent < 0 }"
></div>
<div style="width: 6px;"></div>
<div class="gap"></div>
<div id="speedBar" :style="{ transform: `scaleY(${trainInfo.speed / 80})` }"></div>
</div>
<div>{{ trainInfo.speed }} km/h</div>
@ -223,8 +224,8 @@ export default {
background: #f00;
}
#content {
width: 60%;
height: 60%;
width: 80%;
height: 90%;
padding: 5px;
display: flex;
color: #fff;
@ -234,7 +235,7 @@ export default {
align-items: center;
table {
width: 100%;
font-size: 1rem;
font-size: 1.4rem;
text-align: center;
border-collapse: collapse;
td {
@ -275,13 +276,21 @@ export default {
.speedBg {
height: 90%;
padding: 2px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
justify-content: center;
position: relative;
img {
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 100%;
}
.gap {
width: 4%;
}
div {
width: 20px;
width: 23%;
transform-origin: bottom;
transform: scaleY(0.5);
}