<template>
<view class="container">
<!-- 观看倒计时 -->
<cover-view class="countdown" >
<cover-view>您还需观看</cover-view>
<cover-view style="color:#E60000;margin-left:10px;">{{countDownInterval}}{{isVerifyFace}}
</cover-view>
</cover-view>
<!-- pdf文件 -->
<web-view :src="pdfSrc"></web-view>
<!-- 蒙版弹窗 -->
<cover-view class="mask" v-if="isVerifyFace">
<cover-view class="mask-content">
测试
</cover-view>
</cover-view>
</view>
</template>
<script>
export default {
data() {
return {
isVerifyFace: false, // 是否检测人脸
countDownInterval: 0, // 定时器
pdfSrc: '', // pdf文件地址
}
},
onShow() {
},
onLoad(option) {
this.isVerifyFace=true
setTimeout(()=>{
this.isVerifyFace=false
},2000)
},
beforeDestroy() {
},
methods: {
},
} </script>
<style>
.container {
position: relative;
}
.countdown {
width: 100%;
background-color: #ffffff;
text-align: center;
display: flex;
position: fixed;
left: 0;
top: -40px;
justify-content: center;
align-items: center;
}
.mask {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
/* top: -70px; */
left: 0;
background-color: rgba(0, 0, 0, 0.9);
filter: alpha(opacity=90);
}
.mask-content {
display: flex;
width: 200px;
border-radius: 20rpx;
justify-content: center;
align-items: center;
padding: 40rpx;
background-color: #ffffff;
} </style>
3***@qq.com (作者)
<template>
<view class="container">
<!-- 观看倒计时 -->
<cover-view class="countdown" v-if="studyFinish!=1">
<cover-view>您还需观看</cover-view>
<cover-view style="color:#E60000;margin-left:10px;">{{formatSeconds(this.usedSecond)}}{{isVerifyFace}}
</cover-view>
</cover-view>
<!-- pdf文件 -->
<web-view :src="pdfSrc"></web-view>
<!-- 蒙版弹窗 -->
<cover-view class="mask" v-if="isVerifyFace">
<cover-view class="mask-content">
测试
</cover-view>
</cover-view>
</view>
</template>
<script>
export default {
data() {
return {
isVerifyFace: false, // 是否检测人脸
countDownInterval: 0, // 定时器
pdfSrc: '', // pdf文件地址
}
},
onShow() {
},
onLoad(option) {
this.isVerifyFace=true
setTimeout(()=>{
this.isVerifyFace=false
},2000)
</script>
<style>
.container {
position: relative;
}
</style>
2022-05-07 10:27