151 lines
2.7 KiB
Vue
151 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="videoListBig">
|
||
|
|
<div class="title"><i>监控设备列表</i></div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="decivList">
|
||
|
|
<div class="menuDev" v-for="item in VideoData.VideoList" :class="item.status == 0 ? 'online' : 'offline'">
|
||
|
|
<div class="decName">
|
||
|
|
<span v-show="item.status == 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
|
||
|
|
<span v-show="item.status == 1"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
|
||
|
|
<span> {{ item.videoName }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="status">{{ item.status == 0 ? "在线" : "离线" }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { reactive } from "vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
setup() {
|
||
|
|
let VideoData = reactive({
|
||
|
|
VideoList: [
|
||
|
|
{
|
||
|
|
videoName: "东侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "南侧枪机",
|
||
|
|
status: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "西侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
videoName: "北侧枪机",
|
||
|
|
status: 0
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
VideoData
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.videoListBig {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.title {
|
||
|
|
height: 5%;
|
||
|
|
line-height: 35px;
|
||
|
|
text-align: left;
|
||
|
|
font-size: calc(100vw * 18 / 1920);
|
||
|
|
color: #ffffff;
|
||
|
|
background: url("@/assets/images/titleImg.webp") no-repeat;
|
||
|
|
background-size: 150% 100%;
|
||
|
|
i {
|
||
|
|
margin-left: 50px;
|
||
|
|
font-family: OPPOSansH;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
height: 95%;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 10px;
|
||
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
font-size: calc(100vw * 14 / 1920);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.decivList {
|
||
|
|
width: 100%;
|
||
|
|
height: 70%;
|
||
|
|
.menuDev {
|
||
|
|
height: 6%;
|
||
|
|
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
line-height: 35px;
|
||
|
|
font-size: calc(100vw * 14 / 1920);
|
||
|
|
margin: 2% 3%;
|
||
|
|
cursor: pointer;
|
||
|
|
.decName {
|
||
|
|
width: 30%;
|
||
|
|
span {
|
||
|
|
margin-left: 10%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
margin-left: 56%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.menuDev:hover {
|
||
|
|
height: 6%;
|
||
|
|
background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.online {
|
||
|
|
.status {
|
||
|
|
color: #65d7f9;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.offline {
|
||
|
|
.status {
|
||
|
|
color: #ec6266;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|