<img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt=""> | <img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt=""> | ||||
<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | ||||
</div> | </div> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
*{ | *{ | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; |
<div class="all"> | <div class="all"> | ||||
<img class="imgBg" src="../../assets/vehicle/detailsBg1.jpg" alt=""> | <img class="imgBg" src="../../assets/vehicle/detailsBg1.jpg" alt=""> | ||||
<img class="contImg" src="../../assets/vehicle/allDetails1.png" alt=""> | <img class="contImg" src="../../assets/vehicle/allDetails1.png" alt=""> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
.imgBg{ | .imgBg{ | ||||
width: 100%; | width: 100%; | ||||
height: 24.91rem; | height: 24.91rem; |
<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | ||||
</div> | </div> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
*{ | *{ | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; |
<template> | <template> | ||||
<div class="all"> | |||||
<div class="all" ref="contentAll"> | |||||
<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> --> | <!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> --> | ||||
<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt=""> | <img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt=""> | ||||
<div class="content"> | <div class="content"> | ||||
<img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask1_7.jpg" alt=""> | <img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask1_7.jpg" alt=""> | ||||
<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | ||||
</div> | </div> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
return{ | return{ | ||||
showMask:false,//弹框显示 | showMask:false,//弹框显示 | ||||
showMaskNum:null, | showMaskNum:null, | ||||
touchstartY:0, | |||||
} | } | ||||
}, | }, | ||||
// mounted(){ | |||||
// window.addEventListener("touchstart",this.touchstart) | |||||
// window.addEventListener("touchend",this.touchend) | |||||
// }, | |||||
methods:{ | methods:{ | ||||
showMaskfn(e){ | showMaskfn(e){ | ||||
this.showMask = true; | this.showMask = true; | ||||
}else{ | }else{ | ||||
this.showMaskNum = 3; | this.showMaskNum = 3; | ||||
} | } | ||||
} | |||||
}, | |||||
touchstart(e){ | |||||
this.touchstartY = e.changedTouches[0].clientY; | |||||
}, | |||||
touchend(e){ | |||||
if(e.changedTouches[0].clientY-this.touchstartY>=50){ | |||||
console.log("下滑") | |||||
}else if(this.touchstartY-e.changedTouches[0].clientY>=50){ | |||||
console.log("上滑") | |||||
} | |||||
}, | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
*{ | *{ | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; |
<img v-if="showMaskNum==2" class="mask1_1" src="../../assets/vehicle/mask1_4.jpg" alt=""> | <img v-if="showMaskNum==2" class="mask1_1" src="../../assets/vehicle/mask1_4.jpg" alt=""> | ||||
<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | ||||
</div> | </div> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
*{ | *{ | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; |
<div class="all"> | <div class="all"> | ||||
<img class="imgBg" src="../../assets/vehicle/detailsBg2.jpg" alt=""> | <img class="imgBg" src="../../assets/vehicle/detailsBg2.jpg" alt=""> | ||||
<img class="contImg" src="../../assets/vehicle/allDetails2.png" alt=""> | <img class="contImg" src="../../assets/vehicle/allDetails2.png" alt=""> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
.imgBg{ | .imgBg{ | ||||
width: 100%; | width: 100%; | ||||
height: 31.07rem; | height: 31.07rem; |
<img class="mask1_1" src="../../assets/vehicle/mask2_1.jpg" alt=""> | <img class="mask1_1" src="../../assets/vehicle/mask2_1.jpg" alt=""> | ||||
<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | ||||
</div> | </div> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
*{ | *{ | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; |
<img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask2_7.jpg" alt=""> | <img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask2_7.jpg" alt=""> | ||||
<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | ||||
</div> | </div> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
*{ | *{ | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; |
<img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask2_4.jpg" alt=""> | <img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask2_4.jpg" alt=""> | ||||
<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt=""> | ||||
</div> | </div> | ||||
<Sidebar></Sidebar> | |||||
<Sidebar class="slide"></Sidebar> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
</script> | </script> | ||||
<style scoped="scoped"> | <style scoped="scoped"> | ||||
.slide{ | |||||
position: fixed; | |||||
top: 0.3rem; | |||||
left: 0.3rem; | |||||
} | |||||
*{ | *{ | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; |