https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
<cover-view class="watermark">
<cover-view class="watermark-info-box">
<cover-view class="watermark-info-top">
<cover-view class="watermark-info-time">09:58</cover-view>
<cover-view wx:if="{{currentTime}}" class="watermark-info-line"></cover-view>
<cover-view>
<cover-view class="watermark-info-date">2025-05-16</cover-view>
<cover-view>星期五</cover-view>
</cover-view>
</cover-view>
<cover-view class="watermark-address">地址信息·地址信息</cover-view>
</cover-view>
</cover-view>
.camera-area {
width: 100%;
height: 80vh;
background: #000;
}
.watermark {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 80vh;
font-size: 16px;
color: #fff;
}
.watermark-info-box {
position: absolute;
bottom: 32rpx;
left: 0;
box-sizing: border-box;
width: 100%;
padding: 0 32rpx;
font-size: 28rpx;
}
.watermark-info-top {
display: flex;
align-items: center;
}
.watermark-info-time {
position: relative;
font-size: 60rpx;
font-weight: bold;
}
.watermark-info-line {
width: 4rpx;
height: 60rpx;
margin: 0 16rpx;
background-color: #e79913;
}
.watermark-info-date {
margin-bottom: 14rpx;
}
.watermark-address {
display: block;
width: 100%;
margin-top: 10rpx;
font-size: 28rpx;
line-height: 36rpx;
word-wrap: break-word;
white-space: normal;
}
8字被遮挡, 但是如果是12:18就不会
现在都是同层渲染了,直接用View就行了,估计这个都不维护了