本篇主要實現全屏頁面的布局，其中還涉及內容自適應寬度。

創建一個preview.vue頁面用于圖片預覽，寫入以下代碼：

<template><view class="preview"><swiper circular><swiper-item  v-for="item in 5"><image src="/common/images/preview1.jpg" mode="aspectFill"></image></swiper-item></swiper><view class="mask"><view class="goBack"></view><view class="count">3 / 9</view><view class="time">10:10</view><view class="date">10月10日</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="28"></uni-icons><view class="text">下載</view></view></view></view></view>
</template>

CSS部分：

<style lang="scss" scoped>
.preview {width: 100%;height: 100vh; // 全屏高度position: relative; // 為遮罩層定位提供參照swiper, image {width: 100%;height: 100%; // 輪播圖撐滿全屏}.mask {.count {position: absolute;top: 10vh; // 距頂部10%視口高度left: 0;right: 0;margin: auto; // 水平居中width: fit-content; // 寬度適應內容background: rgba(0,0,0,0.3); // 半透明背景backdrop-filter: blur(10rpx); // 磨砂效果}}
}
</style>

CSS代碼說明：

height:10vh; 實現全屏高度；

top:10vh; 距頂部10vh高度；

width:fit-content讓寬度自適應內容，隨內容實現寬度自增減；

?position: relative; // 為遮罩層定位提供參照，提供參照方為相對定位，自身則為絕對定位。

最終效果：