<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-02 09:39:32
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-01 14:41:41
|
* @FilePath: \srs-police-affairs\src\components\map\components\videoRowClickPopup.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div>
|
<div v-if="videoRowClickPopup" class="popup-dom" id="videoRowClickPopup">
|
<div style="transform: translate(-50%, 0);">
|
<!-- 样式自己修改 -->
|
<div class="content" :class="{ 'scale-dom': scaleDomFlag }">
|
{{ videoRowClickPopupData.name }}
|
</div>
|
<div class="bottom-arrow"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
|
export default {
|
name: 'VideoRowClickPopup',
|
|
inject: ["getWidth", 'userInfo'],
|
|
data () {
|
return {
|
scaleDomFlag: false
|
}
|
},
|
|
computed: {
|
...mapGetters([
|
'videoRowClickPopup',
|
'videoRowClickPopupData'
|
])
|
},
|
|
mounted () {
|
|
if (this.getWidth() > 7000) {
|
this.scaleDomFlag = true
|
} else {
|
this.scaleDomFlag = false
|
}
|
|
},
|
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popup-dom {
|
position: fixed;
|
top: -16px;
|
left: 0;
|
z-index: 1 !important;
|
|
&>.popup-box {
|
position: relative;
|
}
|
|
.bottom-arrow {
|
position: absolute;
|
left: 50%;
|
bottom: 0px;
|
width: 0;
|
height: 0;
|
border: 10px solid transparent;
|
border-top-color: $bg-color;
|
transform: translate(-50%, 100%);
|
}
|
|
.scale-dom {
|
transform: scale(3);
|
transform-origin: left;
|
}
|
|
.content {
|
margin-bottom: 10px;
|
padding: 0.5vh;
|
width: 220px;
|
background: $bg-color;
|
border-radius: 4px;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
|
}
|
|
}
|
</style>
|
