uni-app项目实战笔记14--给全屏页面添加遮罩层

接着上一篇，给全屏页面加上遮罩层，先来看效果：

从图片上看，遮罩分上下两层：

1.上层显示计数，时间和日期；

2.下层显示信息，评分和下载。

模板层代码：

<template><view class="preview"><swiper circular><swiper-item  v-for="item in 5"><image @click="maskChange" src="/common/images/preview1.jpg" mode="aspectFill"></image></swiper-item></swiper><view class="mask" v-if="maskState"><view class="goBack"></view><view class="count">3 / 9</view><view class="time"><uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat></view><view class="date"><uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat></view><view class="footer"><view class="box"><uni-icons type="info" size="28"></uni-icons><view class="text">信息</view></view><view class="box"><uni-icons type="star" size="28"></uni-icons><view class="text">5分</view></view><view class="box"><uni-icons type="download" size="23"></uni-icons><view class="text">下载</view></view></view></view></view>
</template>

知识要点：

1.引入uniapp时间格式化组件，对时间和日期进行格式化显示：‘

<view class="time"><uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
</view>
<view class="date"><uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
</view>

2.定义maskChange点击事件控制遮罩层的显示与隐藏。

<script setup>import {ref} from "vue"const maskState = ref(true)function maskChange(){maskState.value = !maskState.value}
</script>

CSS代码

<style lang="scss" scoped>.preview{width: 100%;height: 100vh;position: relative;swiper{width: 100%;height: 100%;image{width: 100%;height: 100%;}}.mask{&>view{position: absolute;left: 0;margin: auto;right: 0;color: #fff;width: fit-content;}.goBack{}.count{top:10vh;background: rgba(0,0,0,0.3);font-size: 28rpx;border-radius: 40rpx;padding: 8rpx 28rpx;backdrop-filter: blur(10rpx);}.time{font-size: 140rpx;top:calc(10vh + 80rpx);font-weight: 100;line-height: 1em;text-shadow: 0 4rpx rgba(0,0,0,0.3);}.date{font-size: 34rpx;top:calc(10vh + 230rpx);text-shadow: 0 2rpx rgba(0,0,0,0.3);}.footer{background: rgba(255,255,255,0.8);bottom:10vh;width: 65vw;height: 120rpx;border-radius: 120rpx;color:#000;display: flex;justify-content: space-around;align-items: center;box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);backdrop-filter: blur(20rpx);.box{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 2rpx 12rpx;.text{font-size: 20rpx;color: $text-font-color-2;}}}}}     
</style>

知识要点：

1. 遮罩层通用样式

.mask > view {position: absolute;left: 0;right: 0;margin: auto;  // 水平居中width: fit-content; // 宽度适应内容color: #fff;  // 默认白色文字
}

• 作用：所有mask的直接子 view 元素（.goBack, .count, .time, .date, .footer）共用绝对定位和居中逻辑，使用.mask > view{}来声明通用样式

• 例外：.footer 单独覆盖了部分样式（如颜色、定位）。

2. 顶部计数指示器 (.count)

.count {top: 10vh;  // 距顶部10%视口高度background: rgba(0,0,0,0.3); // 半透明黑底border-radius: 40rpx;  // 胶囊形状backdrop-filter: blur(10rpx); // 磨砂效果}

3. 时间与日期 (.time & .date)

.time {font-size: 140rpx;  // 超大字号top: calc(10vh + 80rpx); // 位于计数下方font-weight: 100;   // 细体字text-shadow: 0 4rpx rgba(0,0,0,0.3); // 文字投影
}.date {font-size: 34rpx;top: calc(10vh + 230rpx); // 时间下方text-shadow: 0 2rpx rgba(0,0,0,0.3);
}

4. 底部操作栏 (.footer)

.footer {bottom: 10vh;  // 距底部10%视口高度width: 65vw;   // 宽度65%视口height: 120rpx;background: rgba(255,255,255,0.8); // 半透明白底border-radius: 120rpx; // 圆形backdrop-filter: blur(20rpx); // 强模糊.box {// 每个操作项垂直居中排列图标和文字}
}