This commit is contained in:
sunmeng 2024-11-05 08:46:39 +08:00
parent 6b79c4086e
commit c47442967a

View File

@ -477,6 +477,21 @@
<div class="map1"> <div class="map1">
<div class="drag_box8" ref="drag_box8"> <div class="drag_box8" ref="drag_box8">
<img class="drag_img" src="../../assets/img/map4.jpg" alt="" /> <img class="drag_img" src="../../assets/img/map4.jpg" alt="" />
<div class="popBox" :key="index">
<template>
<div class="pole_item" :style="getTopOrLeft8(8)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>泵房</span>
</div>
<img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div>
</template>
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index"> <div class="popBox" v-for="(item, index) in popContentList" :key="index">
<template> <template>
<div class="pole_item" :style="getTopOrLeft8(item.id)" @click="handlerPop(item.id)"> <div class="pole_item" :style="getTopOrLeft8(item.id)" @click="handlerPop(item.id)">
@ -1117,40 +1132,40 @@ export default {
} }
}, },
getTopOrLeft8(id){ getTopOrLeft8(id){
if(id == 1){ if(id == 8){
return 'top:79%;left:28%;z-index:8;' return 'top:79%;left:28%;z-index:8;'
}else if(id == 2){ }else if(id == 1){
return 'top:62%;left:39%;z-index:7;' return 'top:62%;left:39%;z-index:7;'
}else if(id == 3){ }else if(id == 2){
return 'top:48%;left:52%;z-index:6;' return 'top:48%;left:52%;z-index:6;'
}else if(id == 4){ }else if(id == 3){
return 'top:24%;left:59%;z-index:5;' return 'top:24%;left:59%;z-index:5;'
}else if(id == 5){ }else if(id == 4){
return 'top:16%;left:57%;z-index:4;' return 'top:16%;left:57%;z-index:4;'
}else if(id == 6){ }else if(id == 5){
return 'top:6%;left:55%;z-index:3;' return 'top:6%;left:55%;z-index:3;'
}else if(id == 7){ }else if(id == 6){
return 'top:1%;left:52%;z-index:2;' return 'top:1%;left:52%;z-index:2;'
}else if(id == 8){ }else if(id == 7){
return 'top:-4%;left:48%;z-index:1;' return 'top:-4%;left:48%;z-index:1;'
} }
}, },
getTopOrLeft8_8(id){ getTopOrLeft8_8(id){
if(id == 1){ if(id == 8){
return 'top:79%;left:28%;transform: translate(54%,-50%);' return 'top:79%;left:28%;transform: translate(54%,-50%);'
}else if(id == 2){ }else if(id == 1){
return 'top:62%;left:39%;transform: translate(54%,-50%);' return 'top:62%;left:39%;transform: translate(54%,-50%);'
}else if(id == 3){ }else if(id == 2){
return 'top:48%;left:52%;transform: translate(54%,-50%);' return 'top:48%;left:52%;transform: translate(54%,-50%);'
}else if(id == 4){ }else if(id == 3){
return 'top:24%;left:59%;transform: translate(54%,-50%);' return 'top:24%;left:59%;transform: translate(54%,-50%);'
}else if(id == 5){ }else if(id == 4){
return 'top:16%;left:57%;transform: translate(54%,0%);' return 'top:16%;left:57%;transform: translate(54%,0%);'
}else if(id == 6){ }else if(id == 5){
return 'top:6%;left:55%;transform: translate(54%,0%);' return 'top:6%;left:55%;transform: translate(54%,0%);'
}else if(id == 7){ }else if(id == 6){
return 'top:1%;left:52%;transform: translate(54%,0%);' return 'top:1%;left:52%;transform: translate(54%,0%);'
}else if(id == 8){ }else if(id == 7){
return 'top:0%;left:48%;transform: translate(54%,0%);' return 'top:0%;left:48%;transform: translate(54%,0%);'
} }
}, },
@ -2340,13 +2355,13 @@ export default {
height: auto; height: auto;
position: absolute; position: absolute;
top:-95px; top:-95px;
-webkit-mask-image: linear-gradient( // -webkit-mask-image: linear-gradient(
90deg, // 90deg,
transparent 0%, // transparent 0%,
blue 2%, // blue 2%,
blue 97%, // blue 97%,
transparent 99% // transparent 99%
); // );
.drag_img { .drag_img {
width: 100%; width: 100%;