抓拍修改

components/zhuapaiConfirm/zhuapai.vue

@@ -1,12 +1,10 @@
 <template>
-	<view id="Drop" ref="DropRef" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)">
-		<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>
+	<view class="zhuapai-drop-container" id="Drop" ref="DropRef" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)">
+		<view class="phone-camera-box-zhuapai">
+			<video ref="videoRef" class="video-view-box" :class="myClass" id="videoZhaPai" :controls="false"></video>
 
 			<!-- 隐藏抓拍绘制图片 -->
-			<canvas id="canvasZhuaPai" :class="myClass"
-				style="width:100%; height:  150rpx;position: absolute;"></canvas>
+			<canvas id="canvasZhuaPai" class="video-view-box" :class="myClass"></canvas>
 			<!-- 用于抓拍切出去传递固定img-->
 			<!-- #ifdef H5 -->
 			<img :src="imgUrl" alt="" ref="gudingImg" v-show="false">
@@ -168,55 +166,15 @@
 	})
 </script>
 
-<style lang="scss" scoped>
-	.dropContainer {
-		height: 200rpx;
-	}
-
-	#Drop {
-		width: 30vw;
-		height: 150rpx;
-		margin: 0;
-		padding: 0;
-		z-index: 10;
-		position: absolute;
-		right: 0;
-		top: 30%;
-
-		::v-deep .uni-video-container {
-			position: absolute;
-		}
-
-		::v-deep .uni-video-video {
-			position: absolute;
-		}
-
-		::v-deep .uni-canvas-canvas {
-			position: absolute;
-		}
-
-		::v-deep .show-video {
-			z-index: 10;
-
-			.uni-video-video,
-			.uni-canvas-canvas {
-				z-index: 10;
-			}
+<style lang="scss">
+	.zhuapai-drop-container {
+		width: 160rpx;height: 300rpx;margin: 0;padding: 0;z-index: 10;position: absolute;right: 0;top: 30%;overflow: hidden;
+		.phone-camera-box-zhuapai{
+			height: 200rpx;
+			.uni-video-container{background-color: transparent;}
+			.hidden-video{transform: translateY(500rpx);}
 		}
-
-		::v-deep .uni-video-container {}
-
-		::v-deep .hidden-video {
-			z-index: -10;
-
-			.uni-video-video,
-			.uni-canvas-canvas,
-			{
-			z-index: -10;
-		}
-	}
-
-
-
+		.video-view-box{width:100%; height: 200rpx;position: absolute;}
+		.shiti-video-hidden-btn,.shiti-video-show-btn{background-color: red;width: 50px;height: 50px;    display: block;}
 	}
 </style>