调整页面

components/zhuapaiConfirm/zhuapai.vue

@@ -1,16 +1,13 @@
 <template>
-	<view id="Drop" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)" class="dropContainer">
-		<view class="phone-camera-box-zhuapai">
-			<video ref="videoRef" :class="{
-				'show-video': showVideo,
-				'hidden-video': !showVideo
-			}" style="width:100%; height: 150rpx;" id="videoZhaPai" :controls="false"></video>
+	<view id="Drop" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)"
+		class="dropContainer">
+		<view class="phone-camera-box-zhuapai" style="overflow: hidden;height: 150rpx;">
+			<video ref="videoRef" :class="myClass" style="width:100%; height: 150rpx;position: absolute;"
+				id="videoZhaPai" :controls="false"></video>
 
 			<!-- 隐藏抓拍绘制图片 -->
-			<canvas id="canvasZhuaPai" :class="{
-				'show-video': showVideo,
-				'hidden-video': !showVideo
-			}"  style="width:100%; height:  150rpx;"></canvas>
+			<canvas id="canvasZhuaPai" :class="myClass"
+				style="width:100%; height:  150rpx;position: absolute;"></canvas>
 			<!-- 用于抓拍切出去传递固定img-->
 			<!-- #ifdef H5 -->
 			<img :src="imgUrl" alt="" ref="gudingImg" v-show="false">
@@ -28,7 +25,8 @@
 	import {
 		ref,
 		onUnmounted,
-		nextTick
+		nextTick,
+		computed
 	} from "vue";
 	import {
 		useH5Camera
@@ -50,6 +48,13 @@
 		right: "0",
 	});
 
+	const myClass = computed(() => {
+		return {
+			'show-video': showVideo.value,
+			'hidden-video': !showVideo.value
+		}
+	})
+
 	const emits = defineEmits(['init', 'success', 'error', 'cancel'])
 
 	function noShowVideoBtn() {
@@ -77,7 +82,7 @@
 				startCamera()
 			})
 			// 设定计时器
-			setInterval(() => handleZhua(), zhuapai.value * 60 * 1000 || 6000000)
+			// setInterval(() => handleZhua(), zhuapai.value * 60 * 1000 || 6000000)
 		}
 	}
 
@@ -134,24 +139,44 @@
 		height: 150rpx;
 		margin: 0;
 		padding: 0;
-		// position: absolute;
-		// top: 0;
-		// left: 0;
 		z-index: 10;
 		position: absolute;
 		right: 0;
 		top: 30%;
 
+		::v-deep .uni-video-container {
+			position: absolute;
+		}
 
-		.show-video {
-			z-index: 10
+		::v-deep .uni-video-video {
+			position: absolute;
 		}
 
-		.hidden-video {
-			z-index: -10
+		::v-deep .uni-canvas-canvas {
+			position: absolute;
 		}
+		
+		::v-deep .show-video {
+			z-index: 10;
 
+			.uni-video-video,.uni-canvas-canvas {
+				z-index: 10;
+			}
+		}
+		
+		::v-deep .uni-video-container {
+			
+		}
 
-	}
+		::v-deep .hidden-video {
+			z-index: -10;
+
+			.uni-video-video,.uni-canvas-canvas,{
+				z-index: -10;
+			}
+		}
 
+	
+
+	}
 </style>