|
|
|
|
@ -0,0 +1,694 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="bg">
|
|
|
|
|
<div class="title1">白坯车间生产监控看板</div>
|
|
|
|
|
<div class="floorNum floorNum1">1F</div>
|
|
|
|
|
<div class="floorNum floorNum2">2F</div>
|
|
|
|
|
<div class="floorNum floorNum3">3F</div>
|
|
|
|
|
<div class="floorNum floorNum4" @click="$router.push('/cs2')">4F</div>
|
|
|
|
|
<div class="floorNum floorNum5">5F</div>
|
|
|
|
|
<div class="floorNum floorNum6">6F</div>
|
|
|
|
|
<div class="output" v-for="i in outputData" :style="`left:${i.left}%`"><span>产量：10车</span></div>
|
|
|
|
|
<div v-for="i in equipmentData" class="equipment" :style="`left: ${i.left}%`">
|
|
|
|
|
<div :class="i.isRight?'equipmentName1':'equipmentName'"><span>设备名称</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows" v-for="i in arrowData" v-if="false">
|
|
|
|
|
<div class="oneAnR" :style="`left:${i.left-3}%`">
|
|
|
|
|
<div class="oneAn">
|
|
|
|
|
<div class="wx" :style="`top: -1%;left:49.5%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 7%;left:49.5%`"></div>
|
|
|
|
|
<div class="wx" :style="`top: 29%;left:49.5%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 37%;left:49.5%`"></div>
|
|
|
|
|
<div class="wx" :style="`top: 59%;left:49.5%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 67%;left:49.5%`"></div>
|
|
|
|
|
<div class="wx" :style="`top: 89%;left:49.5%`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="twoAnR" :style="`left:${i.left-3}%`">
|
|
|
|
|
<div class="twoAn">
|
|
|
|
|
<div class="wxh" :style="`top: -0.9%;left:49%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 6%;left:49%`"></div>
|
|
|
|
|
<div class="wxh" :style="`top: 15.2%;left:49%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 22.1%;left:49%`"></div>
|
|
|
|
|
<div class="wxh" :style="`top: 31.3%;left:49%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top:38.2%;left:49%`"></div>
|
|
|
|
|
<div class="wxh" :style="`top: 47.4%;left:49%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 54.3%;left:49%`"></div>
|
|
|
|
|
<div class="wxh" :style="`top: 63.5%;left:49%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 70.4%;left:49%`"></div>
|
|
|
|
|
<div class="wxh" :style="`top: 79.6%;left:49%`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 86.5%;left:49%`"></div>
|
|
|
|
|
<div class="wxh" :style="`top: 95.7%;left:49%`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box" :style="`top: 74.5%;left:${i.left}%`"></div>
|
|
|
|
|
<div class="box" :style="`top: 78.8%;left:${i.left}%`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(1)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;left: 35.2%;transform: rotate(0)`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 35%;transform: rotate(0deg)`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 34.5%;transform: rotate(0)`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 34.2%;transform: rotate(0)`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 34%;transform: rotate(0)`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 33.8%;transform: rotate(0)`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 33.1%;transform: rotate(0deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(2)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;left: 39.2%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 39%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 39.2%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 39.2%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 39%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 38.7%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 39%;transform: rotate(0deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(3)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;left: 46.2%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 46.3%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 46.2%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 45.8%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 45.8%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 45.9%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 45.4%;transform: rotate(0deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(4)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;left: 50.5%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 50.5%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 50.9%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 51.1%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 51.1%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 51.2%;transform: rotate(0deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 51.7%;transform: rotate(0deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(5)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;left: 57.2%;transform: rotate(358deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 57.5%;transform: rotate(358deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 57.5%;transform: rotate(358deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 57.5%;transform: rotate(358deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 57.8%;transform: rotate(358deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 58%;transform: rotate(358deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 57.7%;transform: rotate(358deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(6)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;left: 61.2%;transform: rotate(355deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 61.5%;transform: rotate(355deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 62.2%;transform: rotate(355deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 62.5%;transform: rotate(355deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 62.8%;transform: rotate(355deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 63.1%;transform: rotate(355deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 63.9%;transform: rotate(355deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(7)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;l;left: 68%;transform: rotate(350deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 68.5%;transform: rotate(350deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 68.8%;transform: rotate(350deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 69%;transform: rotate(350deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 69.5%;transform: rotate(350deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 70%;transform: rotate(350deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 70%;transform: rotate(350deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="arrows1" v-if="isRun.includes(8)">
|
|
|
|
|
<div class="arrow" :style="`top: 38.5%;left: 72.2%;transform: rotate(345deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 42%;left: 72.7%;transform: rotate(345deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 48%;left: 73.5%;transform: rotate(345deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 52%;left: 74.1%;transform: rotate(345deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 57%;left: 74.8%;transform: rotate(345deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 62%;left: 75.3%;transform: rotate(345deg);`"></div>
|
|
|
|
|
<div class="arrow" :style="`top: 66%;left: 76.1%;transform: rotate(345deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomArrows" v-for="(i,k) in 9">
|
|
|
|
|
<div class="arrow" :style="`top: 72.5%;left: ${31.9 + 5.2*k}%;`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomArrows" v-for="(i,k) in 5">
|
|
|
|
|
<div class="arrow" :style="`top: 73.7%;left: ${50.5 - 5.2*k}%;`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-for="i in infoData " class="info"
|
|
|
|
|
:style="`top: ${i.top}%;left: ${i.left}%;transform: rotate(${i.rotate}deg);`">
|
|
|
|
|
<div :class="i.isRight?'infoModel':'infoModel'" :style="`transform: rotate(${360 -i.rotate}deg);`">
|
|
|
|
|
<div class="title">设备名称</div>
|
|
|
|
|
<div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> 10</div>
|
|
|
|
|
<div class="equipmentInfo"><span style="color: #fff9">设备信息:</span> 10</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isRun: [1, 2, 3, 4, 5, 6, 7, 8],
|
|
|
|
|
infoData: [
|
|
|
|
|
{
|
|
|
|
|
top: 28,
|
|
|
|
|
left: 32.7,
|
|
|
|
|
rotate: 7,
|
|
|
|
|
isRight: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 27,
|
|
|
|
|
left: 37.1,
|
|
|
|
|
rotate: 3,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 26.5,
|
|
|
|
|
left: 44.1,
|
|
|
|
|
rotate: 2,
|
|
|
|
|
isRight: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 26,
|
|
|
|
|
left: 48.8,
|
|
|
|
|
rotate: 358,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 25,
|
|
|
|
|
left: 55.8,
|
|
|
|
|
rotate: 355,
|
|
|
|
|
isRight: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 24,
|
|
|
|
|
left: 60.2,
|
|
|
|
|
rotate: 351,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 24,
|
|
|
|
|
left: 66.8,
|
|
|
|
|
rotate: 351,
|
|
|
|
|
isRight: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 22.5,
|
|
|
|
|
left: 71.6,
|
|
|
|
|
rotate: 346,
|
|
|
|
|
isRight: false
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
equipmentData: [
|
|
|
|
|
// {
|
|
|
|
|
// left: 16,
|
|
|
|
|
// isRight: false,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// left: 23.5,
|
|
|
|
|
// isRight: true,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// left: 38,
|
|
|
|
|
// isRight: false,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// left: 45.3,
|
|
|
|
|
// isRight: true,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// left: 59.3,
|
|
|
|
|
// isRight: false,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// left: 66.6,
|
|
|
|
|
// isRight: true,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// left: 81.2,
|
|
|
|
|
// isRight: false,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// left: 88.5,
|
|
|
|
|
// isRight: false,
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
outputData: [
|
|
|
|
|
{
|
|
|
|
|
left: 33.3,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 37.7,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 43.9,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 48.5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 54.5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 59,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 65,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 69.5,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
arrowData: [
|
|
|
|
|
{
|
|
|
|
|
left: 17.93,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 25.23,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 39.8,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 47.13,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 61.13,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 68.43,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 83.03,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
left: 90.33,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {},
|
|
|
|
|
mounted() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bg {
|
|
|
|
|
background-image: url("~@/assets/board/车间监控系统 - 02.jpg");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 1%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
letter-spacing: 0.1vw;
|
|
|
|
|
font-size: 2.1vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.floorNum {
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 96.2%;
|
|
|
|
|
width: 4.6%;
|
|
|
|
|
height: 2.4%;
|
|
|
|
|
color: #fff6;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 2.4vh;
|
|
|
|
|
font-size: 1.5vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorNum1 {
|
|
|
|
|
background-image: url("~@/assets/board/楼层-左背景.png");
|
|
|
|
|
left: 35.5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorNum2 {
|
|
|
|
|
background-image: url("~@/assets/board/楼层-左背景 选中.png");
|
|
|
|
|
left: 39.9%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorNum3 {
|
|
|
|
|
background-image: url("~@/assets/board/楼层-左背景.png");
|
|
|
|
|
left: 44.3%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorNum4 {
|
|
|
|
|
background-image: url("~@/assets/board/楼层-右背景.png");
|
|
|
|
|
left: 51%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorNum5 {
|
|
|
|
|
background-image: url("~@/assets/board/楼层-右背景.png");
|
|
|
|
|
left: 55.4%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.floorNum6 {
|
|
|
|
|
background-image: url("~@/assets/board/楼层-右背景.png");
|
|
|
|
|
left: 59.8%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes example {
|
|
|
|
|
from {
|
|
|
|
|
bottom: 7%
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
bottom: -30%
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes example1 {
|
|
|
|
|
from {
|
|
|
|
|
bottom: 0%;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
bottom: -18.5%
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrows {
|
|
|
|
|
.oneAnR {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 6%;
|
|
|
|
|
height: 10.5%;
|
|
|
|
|
top: 25.6%;
|
|
|
|
|
left: 15%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.oneAn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 13vh;
|
|
|
|
|
bottom: 7%;
|
|
|
|
|
animation-name: example;
|
|
|
|
|
animation-duration: 4s;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.twoAnR {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 6%;
|
|
|
|
|
height: 34.5%;
|
|
|
|
|
top: 37.5%;
|
|
|
|
|
left: 15%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.twoAn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40vh;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
animation-name: example1;
|
|
|
|
|
animation-duration: 4s;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow, .wx, .wxh, .box {
|
|
|
|
|
position: absolute;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 0.5vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wxh {
|
|
|
|
|
width: 0.6vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow {
|
|
|
|
|
background-image: url("~@/assets/board/箭头 下2.png");
|
|
|
|
|
height: 2.5vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wx {
|
|
|
|
|
background-image: url("~@/assets/board/蚊香1.png");
|
|
|
|
|
height: 0.5vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wxh {
|
|
|
|
|
background-image: url("~@/assets/board/蚊香盒.png");
|
|
|
|
|
height: 0.6vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
background-image: url("~@/assets/board/箱子.png");
|
|
|
|
|
transform: translateX(-0.15vw);
|
|
|
|
|
width: 0.82%;
|
|
|
|
|
height: 0.82vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.output {
|
|
|
|
|
background-image: url("~@/assets/board/弹窗3-产量2.png");
|
|
|
|
|
position: absolute;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 4.3%;
|
|
|
|
|
height: 3.1%;
|
|
|
|
|
top: 27%;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 2.4vh;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 2.4vh;
|
|
|
|
|
font-size: 0.7vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 4%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover .infoModel, &:hover .infoModel1 {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.infoModel, .infoModel1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0%;
|
|
|
|
|
left: -295%;
|
|
|
|
|
width: 14.1vw;
|
|
|
|
|
height: 14.7vh;
|
|
|
|
|
color: #fff;
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-image: url("~@/assets/board/弹窗1-设备信息.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 7%;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentOutput {
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
font-size: 0.9vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentInfo {
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 70%;
|
|
|
|
|
font-size: 0.9vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.infoModel {
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
left: 7%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentOutput {
|
|
|
|
|
left: 7%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentInfo {
|
|
|
|
|
left: 7%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.infoModel1 {
|
|
|
|
|
left: 60%;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
right: 7%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentOutput {
|
|
|
|
|
left: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentInfo {
|
|
|
|
|
left: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
transform: rotateY(180deg)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipment {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 72%;
|
|
|
|
|
width: 4%;
|
|
|
|
|
height: 6%;
|
|
|
|
|
|
|
|
|
|
&:hover .equipmentName, &:hover .equipmentName1 {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentName, .equipmentName1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 12.7vw;
|
|
|
|
|
height: 4.4vh;
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
position: absolute;
|
|
|
|
|
line-height: 4.4vh;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-image: url("~@/assets/board/弹窗2-名称.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentName {
|
|
|
|
|
top: -10%;
|
|
|
|
|
left: -255%;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
left: 5%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentName1 {
|
|
|
|
|
top: -10%;
|
|
|
|
|
left: 45%;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
right: 5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
transform: rotateY(180deg)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes arrowAn1 {
|
|
|
|
|
from {
|
|
|
|
|
top: -100%;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
top: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrows1 {
|
|
|
|
|
.arrow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 0.5vw;
|
|
|
|
|
height: 2.5vh;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-image: url("~@/assets/board/箭头 下2.png");
|
|
|
|
|
animation-name: arrowAn1;
|
|
|
|
|
animation-duration: 2s;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomArrows {
|
|
|
|
|
.arrow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 0.5vw;
|
|
|
|
|
height: 2.5vh;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-image: url("~@/assets/board/箭头 下2.png");
|
|
|
|
|
animation-name: arrowAn1;
|
|
|
|
|
animation-duration: 2s;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
陈恒杰
9 months ago
