|
|
@@ -3,7 +3,7 @@
|
|
|
<view class="phone-camera-box-zhuapai">
|
|
|
<video ref="videoRef" class="video-view-box" :class="myClass" id="videoZhaPai" :controls="false"></video>
|
|
|
<!-- 隐藏抓拍绘制图片 -->
|
|
|
- <canvas id="canvasZhuaPai" class="video-view-box" :class="myClass"></canvas>
|
|
|
+ <canvas id="canvasZhuaPai" class="video-view-box canvas-view-box" :class="myClass"></canvas>
|
|
|
<!-- 用于抓拍切出去传递固定img-->
|
|
|
<!-- #ifdef H5 -->
|
|
|
<img :src="imgUrl" alt="" id="gdImg" v-show="false">
|
|
|
@@ -11,8 +11,8 @@
|
|
|
<!-- 测试抓拍使用 -->
|
|
|
<!-- <button @click="handleZhua">抓拍</button> -->
|
|
|
</view>
|
|
|
- <span v-show="showVideo" @click="noShowVideoBtn" class="shiti-video-hidden-btn">开<i></i></span>
|
|
|
- <span v-show="!showVideo" @click="showVideoBtn" class="shiti-video-show-btn">关<i></i></span>
|
|
|
+ <span v-show="showVideo" @click="noShowVideoBtn" class="shiti-video-hidden-btn"><i></i></span>
|
|
|
+ <span v-show="!showVideo" @click="showVideoBtn" class="shiti-video-show-btn"><i></i></span>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -171,66 +171,21 @@
|
|
|
|
|
|
<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;
|
|
|
+ width: 180rpx;height: 400rpx;margin: 0;padding: 0;z-index: 10;position: absolute;overflow: hidden;
|
|
|
.phone-camera-box-zhuapai{
|
|
|
- width: 100%;height: 200rpx;position: absolute;overflow: hidden;
|
|
|
+ width: 100%;height: 240rpx;position: absolute;overflow: hidden;
|
|
|
.uni-video-container{background-color: transparent;}
|
|
|
- .hidden-video{transform: translateY(500rpx);}
|
|
|
+ .canvas-view-box,.hidden-video{transform: translateY(10000rpx);}
|
|
|
}
|
|
|
- .video-view-box{width:100%;-height: 200rpx;position: absolute;}
|
|
|
+ .video-view-box{width:100%;height: 240rpx;position: absolute;}
|
|
|
.shiti-video-hidden-btn,.shiti-video-show-btn{
|
|
|
- background-color: red;width: 50rpx;height: 50rpx;display: block;position: absolute;bottom:50px;}
|
|
|
- }
|
|
|
-
|
|
|
-/* .dropContainer {
|
|
|
- height: 200rpx;
|
|
|
- }
|
|
|
-
|
|
|
- #Drop {
|
|
|
- width: 150rpx;
|
|
|
- height: 200rpx;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- z-index: 10;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 30%;
|
|
|
-
|
|
|
-
|
|
|
- .uni-video-container{background-color: transparent; overflow: hidden;}
|
|
|
- .phone-camera-box-zhuapai{
|
|
|
- .hidden-video{transform: translateX(500rpx);}
|
|
|
- }
|
|
|
-
|
|
|
- .video-view-box {
|
|
|
- height: 10vh;
|
|
|
- width: 100%
|
|
|
- }
|
|
|
-
|
|
|
- ::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;
|
|
|
- }
|
|
|
- }
|
|
|
- ::v-deep .uni-video-container {}
|
|
|
- ::v-deep .hidden-video {
|
|
|
- z-index: -10;
|
|
|
- .uni-video-video,
|
|
|
- .uni-canvas-canvas,
|
|
|
- {
|
|
|
- z-index: -10;
|
|
|
+ position: absolute;top:6rpx;right:6rpx;
|
|
|
+ i{width: 32rpx;height: 32rpx;display: block;background-size: cover;background-repeat: no-repeat;background-position:center;}
|
|
|
}
|
|
|
+ .shiti-video-hidden-btn i{background-image: url("@/static/images/exam/video-close-icon.svg");}
|
|
|
+ .shiti-video-show-btn{
|
|
|
+ background-color: #dcfbf1;padding:20rpx;top:0;right:0;border-radius:8rpx;
|
|
|
+ i{background-image: url("@/static/images/exam/video-play-icon.svg");}
|
|
|
+ }
|
|
|
}
|
|
|
- } */
|
|
|
</style>
|
tanxue
