<!-- 信息查看层 -->
<div class="floatDiv" :style="{display: isShow,left: floatLeft,top: floatTop}">
  <p>{{floatData.name}}</p>
  <p>{{level(floatData.level)}}</p>
  <p>{{floatData.intersectionStartRing}}环~{{floatData.intersectionEndRing}}环</p>
  <p v-if='floatData.estimatedStartTime'>{{floatData.estimatedViewStartTime}}-{{floatData.estimatedViewEndTime}}</p>
2.效果图：移动到红色剑头的区域显示对应的消息 
3.鼠标事件
<div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave="hiddenDetail($event)" v-for="(item, index) in sectionDiagram" 
:style="{left: item.sqrareLeft + 'px', width: item.width + 'px',zIndex: 88 + index}" :key='index' class="middleBoxBgmSquare" 
:class="square(item.passState)">
</div>
methods里面的代码
// 信息显示层
dataDetails (e, data) {
  this.floatData = data
  this.floatLeft = e.clientX - 195 + 'px' // 减去外层div的left距离
  this.floatTop = e.clientY - 55 + 'px'
  this.isShow = 'inline-block'