You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.2 KiB
102 lines
2.2 KiB
2 years ago
|
<!--
|
||
|
|
* @Descripttion:
|
||
|
|
* @version:
|
||
|
|
* @Author: JC9527
|
||
|
|
* @Date: 2023-08-17 17:14:00
|
||
|
|
* @LastEditors: JC9527
|
||
|
2 years ago
|
* @LastEditTime: 2023-12-11 13:43:25
|
||
|
2 years ago
|
-->
|
||
|
2 years ago
|
<template>
|
||
|
2 years ago
|
<popup-title :type="4" v-on:personClose="monitoringClose" title="监控视频" :style="pointLocation">
|
||
|
2 years ago
|
<div class="monitoring">
|
||
|
|
<div class="bg">
|
||
|
|
<img src="@/assets/images/popup/screenshot20230817.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="btns">
|
||
|
|
<div class="btn" @click="monitoringInfo()">上墙</div>
|
||
|
|
<div class="btn">转发</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</popup-title>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
2 years ago
|
import popupTitle from "@/views/components/popupTitle/index.vue"
|
||
|
2 years ago
|
export default {
|
||
|
|
components:{popupTitle},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
2 years ago
|
pointLocation:{
|
||
|
|
left:'',
|
||
|
|
right:'',
|
||
|
|
}
|
||
|
2 years ago
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
monitoringClose(){
|
||
|
|
this.$emit('monitoringClose')
|
||
|
|
},
|
||
|
|
monitoringInfo(){
|
||
|
|
this.$emit('monitoringInfo')
|
||
|
|
}
|
||
|
|
},
|
||
|
2 years ago
|
props:{
|
||
|
|
point:{
|
||
|
|
type:Object,
|
||
|
|
default:function(){
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.pointLocation.left = (this.point.x + 20) + 'px';
|
||
|
|
this.pointLocation.top = (this.point.y - 40) + 'px'
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
point:{
|
||
|
|
handler(newobj,oldobj) {
|
||
|
|
this.pointLocation.left = (newobj.x + 20) + 'px';
|
||
|
|
this.pointLocation.top = (newobj.y - 40) + 'px'
|
||
|
|
},
|
||
|
|
deep:true,
|
||
|
|
}
|
||
|
|
},
|
||
|
2 years ago
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.monitoring {
|
||
|
|
padding: 11px 25px 24px 25px;
|
||
|
|
.bg {
|
||
|
|
background-image: url("../../../assets//images/popup/video.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 192px;
|
||
|
|
height: 108px;
|
||
|
|
padding: 2px;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.btns {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 16px;
|
||
|
|
.btn {
|
||
|
|
background-image: url("../../../assets/images/popup/icon2btn.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 91px;
|
||
|
|
height: 30px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
2 years ago
|
font-family: 'Source Han Sans CN-Regular';
|
||
|
2 years ago
|
font-weight: 400;
|
||
|
|
color: #D3EEF2;
|
||
|
|
line-height: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|