<template>
|
<div class="screen_container">
|
<div class="screen_header">
|
<div class="header_left">
|
<span>监控点位名称：中华路xxx号</span>
|
<span>所属租住：中华街道区域</span>
|
</div>
|
<div class="header_title">遂昌执法平台</div>
|
<div class="header_right">
|
<span>实时预览</span>
|
<span>录像回放</span>
|
</div>
|
</div>
|
<div class="screen_main">
|
<div class="main_left">
|
<div class="left_top"></div>
|
<div class="left_middle inner-padding">
|
<div class="inner-box"></div>
|
<div class="L_middle_text">
|
<div class="label">● 报警时间：</div>
|
<div class="time">2022.09.09 14:23:23</div>
|
</div>
|
</div>
|
<div class="left_bottom">
|
<div class="L_bottom_left L_bottom_box inner-padding">
|
<div class="inner-box"></div>
|
<div class="L_bottom_text">首次报警</div>
|
</div>
|
<div class="L_bottom_right L_bottom_box inner-padding">
|
<div class="inner-box"></div>
|
<div class="L_bottom_text">实时抓拍</div>
|
</div>
|
</div>
|
</div>
|
<div class="main_right">
|
<div class="M_right_title">报警记录</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {};
|
</script>
|
|
<style lang="scss" scoped>
|
$font-color: #19ecff;
|
.screen_container {
|
width: 100vw;
|
height: 100vh;
|
background: #020723;
|
display: flex;
|
flex-direction: column;
|
.screen_header {
|
display: flex;
|
width: 100%;
|
height: 95px;
|
background: url("@/assets/imgs/screen/header_bg.png") no-repeat;
|
background-size: cover;
|
padding: 0 50px;
|
box-sizing: border-box;
|
.header_left {
|
border: 1px solid red;
|
display: flex;
|
align-items: center;
|
span {
|
font-weight: bold;
|
color: $font-color;
|
line-height: 49px;
|
display: inline-flex;
|
font-size: 15px;
|
width: 290px;
|
height: 49px;
|
border: 1px solid red;
|
justify-content: center;
|
}
|
}
|
.header_title {
|
flex-grow: 1;
|
height: 95px;
|
font-size: 42px;
|
font-weight: 800;
|
color: $font-color;
|
line-height: 95px;
|
letter-spacing: 9px;
|
text-align: center;
|
min-width: 309px;
|
}
|
.header_right {
|
width: 586px;
|
height: 100%;
|
border: 1px solid red;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
span {
|
background: url("@/assets/imgs/screen/header_right.png") no-repeat 100% 100%;
|
width: 119px;
|
height: 49px;
|
display: inline-flex;
|
border: 1px solid red;
|
font-size: 15px;
|
color: $font-color;
|
margin-right: 26px;
|
line-height: 49px;
|
justify-content: center;
|
&:nth-child(2) {
|
margin-right: 166px;
|
}
|
}
|
}
|
}
|
.screen_main {
|
flex-grow: 1;
|
// background-color: pink;
|
padding: 0 30px;
|
display: flex;
|
justify-content: space-between;
|
.main_left {
|
align-self: center;
|
height: 926px;
|
width: 559px;
|
.left_top {
|
background: url("@/assets/imgs/screen/left_top.png") no-repeat;
|
background-size: contain;
|
height: 327px;
|
margin-bottom: 19px;
|
}
|
.left_middle {
|
background: url("@/assets/imgs/screen/left_middle.png") no-repeat;
|
background-size: contain;
|
height: 356px;
|
margin-bottom: 17px;
|
position: relative;
|
.L_middle_text {
|
color: $font-color;
|
display: flex;
|
position: absolute;
|
bottom: 0;
|
right: 30px;
|
height: 37px;
|
line-height: 37px;
|
font-size: 15px;
|
}
|
}
|
.left_bottom {
|
display: flex;
|
justify-content: space-between;
|
.L_bottom_box {
|
width: 270px;
|
height: 207px;
|
border: 1px solid red;
|
background: url("@/assets/imgs/screen/left_bottom.png") no-repeat;
|
background-size: cover;
|
position: relative;
|
.L_bottom_text {
|
color: $font-color;
|
position: absolute;
|
right: 30px;
|
bottom: 0;
|
height: 37px;
|
font-size: 15px;
|
line-height: 37px;
|
}
|
}
|
}
|
}
|
.main_right {
|
width: 560px;
|
height: 928px;
|
align-self: center;
|
border: 1px solid red;
|
background: url("@/assets/imgs/screen/right_bg.png");
|
background-size: cover;
|
.M_right_title {
|
width: 100%;
|
height:92px;
|
font-size: 24px;
|
font-weight: bold;
|
color: $font-color;
|
line-height: 92px;
|
// background: pink;
|
text-align: center;
|
}
|
}
|
}
|
}
|
.inner-padding {
|
padding: 37px 30px;
|
box-sizing: border-box;
|
}
|
.inner-box {
|
height: 100%;
|
border: 1px solid red;
|
}
|
</style>
|
