hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 03:46:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

-- 路径图显示

Browse Source
This commit is contained in:
yuping
2022-12-25 21:00:44 +08:00
parent 44431655ba
commit e2bf8e8bb8
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/PathDetailImage.vue
View File

@@ -3,7 +3,9 @@
<div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha" <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`}"> :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)" <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 }} {{ item.name }}
</div> </div>
</div> </div>
@@ -31,11 +33,12 @@ const imageAttrs = {
width: 1437, width: 1437,
height: 594, height: 594,
positions: [ positions: [
{left: 84, top: 518}, {left: 63, top: 503},
{left: 307, top: 370}, {left: 828, top: 455},
{left: 848, top: 275}, {left: 268, top: 325},
{left: 617, top: 69}, {left: 1087, top: 183},
{left: 1047, top: 42}, {left: 647, top: 84},
{left: 1180, top: 40},
] ]
} }
} }
@@ -79,4 +82,12 @@ function close() {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
} }
.nameClass{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding:0 20px 0 50px;
font-size: 12px;
}
</style> </style>