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.
JiangningUrbanManagePc/src/views/uselessComponents/monitoringPopup/index.vue

102 lines
2.2 KiB

<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-17 17:14:00
* @LastEditors: JC9527
* @LastEditTime: 2023-12-11 13:43:25
-->
<template>
<popup-title :type="4" v-on:personClose="monitoringClose" title="监控视频" :style="pointLocation">
<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>
import popupTitle from "@/views/components/popupTitle/index.vue"
export default {
components:{popupTitle},
data() {
return {
pointLocation:{
left:'',
right:'',
}
}
},
methods:{
monitoringClose(){
this.$emit('monitoringClose')
},
monitoringInfo(){
this.$emit('monitoringInfo')
}
},
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,
}
},
}
</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;
font-family: 'Source Han Sans CN-Regular';
font-weight: 400;
color: #D3EEF2;
line-height: 20px;
cursor: pointer;
}
}
}
</style>