mt-fe-group/dezhou-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add video

Browse Source
This commit is contained in:
lb
2023-05-11 09:37:06 +08:00
parent 21541e856f
commit 678a29b37e
3 changed files with 137 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/videos/fire-to-bottom.mp4 Normal file
View File

Binary file not shown.

BIN
src/assets/videos/fire-to-top.mp4 Normal file
View File

Binary file not shown.

224
src/components/layout/Main.vue
View File

@@ -1,40 +1,90 @@
<template> <template>
<main class=""> <main class="">
<div class="eq-main absolute"></div> <div class="eq-main absolute">
<!-- style="
position: absolute;
top: 224px;
left: 59px;
transform: scale(1, 1.05);
width: 360px;
height: 100px;
" -->
<div
class="video-bottom"
style="
position: absolute;
bottom: 151px;
left: 65px;
transform: scale(1.02, 1.05);
"
>
<video
id="1"
preload="auto"
height="100"
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-top.mp4"
></video>
</div>
<AreaOne style="position: absolute; top: 160px; left: 1588px" /> <div
class="video-bottom"
style="
position: absolute;
top: 131px;
left: 72px;
transform: scale(1.02, 1.05);
"
>
<video
id="2"
class="video-top"
preload="auto"
height="100"
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"
></video>
</div>
<!-- style="position: absolute; top: 0; left: 0; transform: scale(1, 1.05) width: 360px; height: 100px;" -->
</div>
<div class="absolute left kiln-runtime"> <AreaOne style="position: absolute; top: 160px; left: 1588px" />
<KilnRuntime />
</div> <div class="absolute left kiln-runtime">
<div class="absolute left kiln-pressure"> <KilnRuntime />
<KilnPressure /> </div>
</div> <div class="absolute left kiln-pressure">
<div class="absolute left fan-runtime"> <KilnPressure />
<FanRuntime /> </div>
</div> <div class="absolute left fan-runtime">
<div class="absolute left oil-flow"> <FanRuntime />
<OilFlow /> </div>
</div> <div class="absolute left oil-flow">
<div class="absolute left gas-flow"> <OilFlow />
<GasFlow /> </div>
</div> <div class="absolute left gas-flow">
<div class="absolute left top-temp"> <GasFlow />
<TopTemp /> </div>
</div> <div class="absolute left top-temp">
<div class="absolute left bottom-temp"> <TopTemp />
<BottomTemp /> </div>
</div> <div class="absolute left bottom-temp">
<div class="absolute left ou-temp"> <BottomTemp />
<XicaoTemp /> </div>
</div> <div class="absolute left ou-temp">
<div class="absolute in-water"> <XicaoTemp />
<InWater /> </div>
</div> <div class="absolute in-water">
<div class="absolute out-water"> <InWater />
<OutWater /> </div>
</div> <div class="absolute out-water">
</main> <OutWater />
</div>
</main>
</template> </template>
<script> <script>
@@ -52,24 +102,24 @@ import AreaOne from "../isolate-area-1/Area.vue";
// import Container from './Container.vue' // import Container from './Container.vue'
export default { export default {
name: "Main", name: "Main",
components: { components: {
AreaOne, AreaOne,
KilnRuntime, KilnRuntime,
KilnPressure, KilnPressure,
FanRuntime, FanRuntime,
OilFlow, OilFlow,
GasFlow, GasFlow,
TopTemp, TopTemp,
BottomTemp, BottomTemp,
XicaoTemp, XicaoTemp,
InWater, InWater,
OutWater, OutWater,
}, },
props: {}, props: {},
data() { data() {
return {}; return {};
}, },
}; };
</script> </script>
@@ -77,23 +127,23 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
main { main {
height: 1px; height: 1px;
flex: 1; flex: 1;
// background: #eee2; // background: #eee2;
} }
.eq-main { .eq-main {
width: w(7150px); width: w(7150px);
height: h(960px); height: h(960px);
background: url(../../assets/eq.png) no-repeat; background: url(../../assets/eq.png) no-repeat;
background-size: 100%; background-size: 100%;
top: 170px; top: 170px;
left: 380px; left: 380px;
position: relative; position: relative;
} }
.eq-main::after { .eq-main::after {
content: ''; content: "";
position: absolute; position: absolute;
right: 1000px; right: 1000px;
top: 164px; top: 164px;
@@ -104,52 +154,52 @@ main {
} }
.kiln-runtime { .kiln-runtime {
top: h(200px); top: h(200px);
left: w(60px); left: w(60px);
} }
.kiln-pressure { .kiln-pressure {
top: h(610px); top: h(610px);
left: w(60px); left: w(60px);
} }
.fan-runtime { .fan-runtime {
top: h(1020px); top: h(1020px);
left: w(60px); left: w(60px);
} }
.oil-flow { .oil-flow {
top: h(1588px); top: h(1588px);
left: w(60px); left: w(60px);
} }
.gas-flow { .gas-flow {
top: h(1588px); top: h(1588px);
left: w(1660px); left: w(1660px);
} }
.top-temp { .top-temp {
top: h(1588px); top: h(1588px);
left: w(3260px); left: w(3260px);
} }
.bottom-temp { .bottom-temp {
top: h(1588px); top: h(1588px);
left: w(4860px); left: w(4860px);
} }
.ou-temp { .ou-temp {
top: h(1588px); top: h(1588px);
left: w(6460px); left: w(6460px);
} }
.in-water { .in-water {
top: h(200px); top: h(200px);
left: w(8096px); left: w(8096px);
// left: w(5096px); // left: w(5096px);
z-index: 100; z-index: 100;
} }
.out-water { .out-water {
top: h(1177px); top: h(1177px);
left: w(8096px); left: w(8096px);
// left: w(5096px); // left: w(5096px);
z-index: 100; z-index: 100;
} }
</style> </style>