根据项目需要展示一张图片，而这张图片是由多张图片根据每张图片的经纬度信息拼接而成，需求显示每张图片的详细信息。因此，用到了antd的气泡卡片。

<div style="position: relative;margin-top: 30px">
	<a-spin :spinning="spinning" size="large">
			<!-- 气泡卡片信息-->
		<a-popover v-for="(item,index) in devicePanel"  arrow-point-at-center placement="rightTop"
							 trigger="click">
			<!--设备图片	-->
			<img id="bgimage" :src="item.image"
					 :style="{left:item.coord[0]+'px',top:item.coord[1]+'px'} "
					 class="imgStyle" @click="showInfo(item.data,index)" />
			<span slot="title">{{ model.typename }}</span>
			<!--判断点击时的数据的下标 跟 图片列表循环里的数据的下标是否一致，一致就显示，不一致就不显示-->
			<template slot="content" v-if="clickIndex==index">
				<p>局站: {{ model.stationname }}</p>
				<p>所属区域: {{ model.areaname }}</p>
				<p>设备名称: {{ model.devicename }}</p>
				<p>模块名称: {{ model.cardname }}</p>
				<p>端口名称: {{ model.portname }}</p>
				<p>描述: {{ model.description }}</p>
				<p>告警状态: {{ model.levelname }}</p>
				<p>光功率值(dBm): {{ model.currentvalue }}</p>
				<p>参考值(dBm): {{ model.referencevalue }}</p>
			</template>
		</a-popover>
	</a-spin>
</div>
<script>
export default {
	data() {
		return {
			 //visible: false,因为循环展示，避免多个气泡同时显示和隐藏，未用到
			clickIndex: "",将点击的数据的下标保存起来
			model: {//面板图信息
				typename: "",//图片类型名称
				areaname: "",//所属区域
				stationname: "",//局站
				devicename: "",//设备名称
				cardname: "",//模块名称
				portname: "",//端口名称
				description: "",//描述
				levelname: "",//告警状态
				currentvalue: "",//当前光功率值
				referencevalue: ""//参考值
			},
			devicePanel: [],//面板图数组
		}		
	}，
	methods: {
		//点击查看设备信息
		showInfo(deviceInfo, index) {
			// console.log("点击的这条数据的下标:" + index)
			// this.visible = true
			this.clickIndex = index  //将点击的这条数据的下标保存起来
			// console.log("查看设备信息: " + JSON.stringify(deviceInfo))
			//弹窗显示信息
			this.model = deviceInfo
		}
	}
}
</script>

**图片显示：**这里把图片显示的父级设置成relative相对定位，而图片设置为absolute绝对定位。图片能完美显示在相应的位置。

想要实现显示每张图片的详细信息，通过click事件控制显现，判断点击时的数据的下标 跟 图片列表循环里的数据的下标是否一致，一致就显示，不一致就不显示