<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>
- 发布:2024-06-04 14:13
- 更新:2024-11-18 15:07
- 阅读:105
产品分类: 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渲染成两个
蔡cai
试下把cover-view标签提取出来,和video标签同级
<video></video>
<cover-view></cover-view>
2024-11-18 15:14