导航样式

src/views/twoCart/compliance.vue

@@ -20,7 +20,7 @@
             <img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt="">
             <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
         </div>
-        <Sidebar></Sidebar>
+        <Sidebar class="slide"></Sidebar>
     </div>
 </template>
 
@@ -44,6 +44,11 @@
 </script>
 
 <style scoped="scoped">
+    .slide{
+        position: fixed;
+        top: 0.3rem;
+        left: 0.3rem;
+    }
     *{
         padding: 0;
         margin: 0;

src/views/twoCart/criterion-allDetails.vue

@@ -2,7 +2,7 @@
     <div class="all">
         <img class="imgBg" src="../../assets/vehicle/detailsBg1.jpg" alt="">
         <img class="contImg" src="../../assets/vehicle/allDetails1.png" alt="">
-        <Sidebar></Sidebar>
+        <Sidebar class="slide"></Sidebar>
     </div>
 </template>
 <script>
@@ -18,6 +18,11 @@
     }
 </script>
 <style scoped="scoped">
+    .slide{
+        position: fixed;
+        top: 0.3rem;
+        left: 0.3rem;
+    }
     .imgBg{
         width: 100%;
         height: 24.91rem;

src/views/twoCart/criterion-money.vue

@@ -22,7 +22,7 @@
 			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
 		</div>
 
-		<Sidebar></Sidebar>
+		<Sidebar class="slide"></Sidebar>
 	</div>
 </template>
 
@@ -51,6 +51,11 @@
 </script>
 
 <style scoped="scoped">
+	.slide{
+		position: fixed;
+		top: 0.3rem;
+		left: 0.3rem;
+	}
 	*{
 		padding: 0;
 		margin: 0;

src/views/twoCart/criterion-shop.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="all">
+	<div class="all" ref="contentAll">
 		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
 		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
 		<div class="content">
@@ -24,7 +24,7 @@
 			<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="">
 		</div>
-		<Sidebar></Sidebar>
+		<Sidebar class="slide"></Sidebar>
 	</div>
 </template>
 
@@ -37,8 +37,14 @@
 			return{
 				showMask:false,//弹框显示
 				showMaskNum:null,
+				touchstartY:0,
 			}
 		},
+
+		// mounted(){
+		// 	window.addEventListener("touchstart",this.touchstart)
+		// 	window.addEventListener("touchend",this.touchend)
+		// },
 		methods:{
 			showMaskfn(e){
 				this.showMask = true;
@@ -49,12 +55,27 @@
 				}else{
 					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>
 
 <style scoped="scoped">
+	.slide{
+		position: fixed;
+		top: 0.3rem;
+		left: 0.3rem;
+	}
 	*{
 		padding: 0;
 		margin: 0;

src/views/twoCart/criterion-showarea.vue

@@ -21,7 +21,7 @@
 			<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="">
 		</div>
-		<Sidebar></Sidebar>
+		<Sidebar class="slide"></Sidebar>
 	</div>
 </template>
 
@@ -50,6 +50,11 @@
 </script>
 
 <style scoped="scoped">
+	.slide{
+		position: fixed;
+		top: 0.3rem;
+		left: 0.3rem;
+	}
 	*{
 		padding: 0;
 		margin: 0;

src/views/twoCart/high-allDetails.vue

@@ -2,7 +2,7 @@
     <div class="all">
         <img class="imgBg" src="../../assets/vehicle/detailsBg2.jpg" alt="">
         <img class="contImg" src="../../assets/vehicle/allDetails2.png" alt="">
-        <Sidebar></Sidebar>
+        <Sidebar class="slide"></Sidebar>
     </div>
 </template>
 <script>
@@ -18,6 +18,11 @@
   }
 </script>
 <style scoped="scoped">
+    .slide{
+        position: fixed;
+        top: 0.3rem;
+        left: 0.3rem;
+    }
     .imgBg{
         width: 100%;
         height: 31.07rem;

src/views/twoCart/high-money.vue

@@ -18,7 +18,7 @@
 			<img class="mask1_1" src="../../assets/vehicle/mask2_1.jpg" alt="">
 			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
 		</div>
-		<Sidebar></Sidebar>
+		<Sidebar class="slide"></Sidebar>
 	</div>
 </template>
 
@@ -42,6 +42,11 @@
 </script>
 
 <style scoped="scoped">
+	.slide{
+		position: fixed;
+		top: 0.3rem;
+		left: 0.3rem;
+	}
 	*{
 		padding: 0;
 		margin: 0;

src/views/twoCart/high-shop.vue

@@ -25,7 +25,7 @@
 			<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="">
 		</div>
-		<Sidebar></Sidebar>
+		<Sidebar class="slide"></Sidebar>
 	</div>
 </template>
 
@@ -56,6 +56,11 @@
 </script>
 
 <style scoped="scoped">
+	.slide{
+		position: fixed;
+		top: 0.3rem;
+		left: 0.3rem;
+	}
 	*{
 		padding: 0;
 		margin: 0;

src/views/twoCart/high-showarea.vue

@@ -24,7 +24,7 @@
 			<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="">
 		</div>
-		<Sidebar></Sidebar>
+		<Sidebar class="slide"></Sidebar>
 	</div>
 </template>
 
@@ -55,6 +55,11 @@
 </script>
 
 <style scoped="scoped">
+	.slide{
+		position: fixed;
+		top: 0.3rem;
+		left: 0.3rem;
+	}
 	*{
 		padding: 0;
 		margin: 0;