<template>
<view class="container">
<!--BUG1：渲染成两个-->
<!-- <cover-view class="trial-box">
<cover-view class="trial-box__tip-text">试看已结束，本视频是VIP会员专享内容</cover-view>
<cover-view class="trial-box__close-btn">成为VIP会员免费观看</cover-view>
</cover-view> -->
<!--BUG2：与Video错位-->
<video
id="myVideo"
class="my-video"
src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4"
>
<cover-view class="trial-box">
<cover-view class="trial-box__tip-text">试看已结束，本视频是VIP会员专享内容</cover-view>
<cover-view class="trial-box__close-btn">成为VIP会员免费观看</cover-view>
</cover-view>
</video>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onLoad() {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.my-video{
position:fixed;
top:0;
left:0;
width:750rpx;
height:calc(750rpx * 9 / 16);
z-index: 0;
}
.trial-box{
position: fixed;
top:0;
left:0;
width:750rpx;
height:calc(750rpx * 9 / 16);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
background-color: rgba(200, 0, 0, 0.2);
&__tip-text{
font-size: 28rpx;
color: #FFFFFF;
}
&__close-btn{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 650rpx;
height: 75rpx;
margin-top: 32rpx;
font-size: 30rpx;
line-height: 75rpx;
border-radius: 50rpx;
color: #FFFFFF;
text-align: center;
background-color: #FE6B00;
}
}
</style>
a***@veehui.com
- 发布：2024-06-04 14:13
- 更新：2024-06-04 14:13
- 阅读：25
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window10
HBuilderX类型： 正式
HBuilderX版本号： 4.15
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： 小米8
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
直接运行代码到Android App基座。
直接运行代码到Android App基座。
预期结果：
cover-view只渲染成一个
cover-view只渲染成一个
实际结果：
cover-view渲染成两个
cover-view渲染成两个
bug描述：
代码见附件。
在Android app-vue真机环境运行中，cover-view的css中设置为position:fixed; 会渲染成两个。
