| | |
| | | <template v-else> |
| | | <div class="media-title"> |
| | | 地图标记事件点 |
| | | <el-popover |
| | | v-if="currentDetail.status === 3 || currentDetail.status === 0" |
| | | popper-class="custom-qrcode-popover" |
| | | :width="120" |
| | | :visible="currentDetail.showQR && detailVisible" |
| | | placement="top" |
| | | title="" |
| | | trigger="hover" |
| | | <el-popover v-if="currentDetail.status === 3 || currentDetail.status === 0" |
| | | popper-class="custom-qrcode-popover" |
| | | :width="120" |
| | | :visible="currentDetail.showQR && detailVisible" |
| | | placement="top" |
| | | title="" |
| | | trigger="click" |
| | | |
| | | > |
| | | <template #reference> |
| | | <img |
| | | @mouseenter="currentDetail.showQR = true" |
| | | @mouseleave="currentDetail.showQR = false" |
| | | class="QRCodeImg" |
| | | src="@/assets/images/dataCenter/qrCode.svg" |
| | | alt="" |
| | | title="事件导航" |
| | | /> |
| | | <img @click.stop="handleQRCode(currentDetail)" class="QRCodeImg" src="@/assets/images/dataCenter/qrCode.svg" alt="" title="事件导航" /> |
| | | </template> |
| | | <div class="qrcode-content"> |
| | | <CreateQRcode |
| | | v-if="currentDetail.showQR && detailVisible" |
| | | :latAndLon="currentDetail.location" |
| | | ></CreateQRcode> |
| | | <div class="close-btn" @click.stop="currentDetail.showQR = false">×</div> |
| | | <CreateQRcode v-if="currentDetail.showQR && detailVisible" :latAndLon="currentDetail.location"></CreateQRcode> |
| | | </div> |
| | | </el-popover> |
| | | </div> |
| | |
| | | max-height: 96vh; |
| | | } |
| | | .custom-qrcode-popover { |
| | | min-width: 120px !important; |
| | | min-width: 160px !important; |
| | | min-height: 140px !important; |
| | | position: relative; |
| | | .qrcode-content{ |
| | | margin-top: 8px; |
| | | .close-btn { |
| | | position: absolute; |
| | | top: 2px; |
| | | right: 2px; |
| | | width: 16px; |
| | | height: 16px; |
| | | line-height: 16px; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | color: #999; |
| | | font-size: 16px; |
| | | z-index: 10; |
| | | |
| | | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped> |