-- 路径图显示

src/components/PathDetailImage.vue

@@ -3,7 +3,9 @@
     <div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha"
          :style="{top:`${imgAttr.positions[i]?.top - (current===i?5:0)}px`,left:`${imgAttr.positions[i]?.left - (current===i?10:0)}px`}">
       <div @click="toDetail(i)"
-           :style="{background: `url('${current===i?currentBack:nameBack}')`,backgroundSize:'100%',width:`${current===i?139:123}px`,height:`${current===i?60:53}px`,textAlign:'center',lineHeight:'45px',fontsize:'12px',color:'#FFF'}">
+           class="nameClass"
+           :title="item.name"
+           :style="{background: `url('${current===i?currentBack:nameBack}')`,backgroundSize:'100%',width:`${current===i?107:93}px`,height:`${current===i?80:70}px`,lineHeight:'50px',color:'#FFF'}">
         {{ item.name }}
       </div>
     </div>
@@ -31,11 +33,12 @@ const imageAttrs = {
     width: 1437,
     height: 594,
     positions: [
-      {left: 84, top: 518},
-      {left: 307, top: 370},
-      {left: 848, top: 275},
-      {left: 617, top: 69},
-      {left: 1047, top: 42},
+      {left: 63, top: 503},
+      {left: 828, top: 455},
+      {left: 268, top: 325},
+      {left: 1087, top: 183},
+      {left: 647, top: 84},
+      {left: 1180, top: 40},
     ]
   }
 }
@@ -79,4 +82,12 @@ function close() {
   position: absolute;
   cursor: pointer;
 }
+.nameClass{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  padding:0 20px 0 50px;
+  font-size: 12px;
+}
 </style>