一个网站如何产生流量,dokcer wordpress,五金网站制作,免费网站生成本篇主要实现全屏页面的布局#xff0c;其中还涉及内容自适应宽度。
创建一个preview.vue页面用于图片预览#xff0c;写入以下代码#xff1a;
templateview classpreviewswiper circularswiper-item v-foritem in 5其中还涉及内容自适应宽度。
创建一个preview.vue页面用于图片预览写入以下代码
templateview classpreviewswiper circularswiper-item v-foritem in 5image src/common/images/preview1.jpg modeaspectFill/image/swiper-item/swiperview classmaskview classgoBack/viewview classcount3 / 9/viewview classtime10:10/viewview classdate10月10日/viewview classfooterview classboxuni-icons typeinfo size28/uni-iconsview classtext信息/view/viewview classboxuni-icons typestar size28/uni-iconsview classtext5分/view/viewview classboxuni-icons typedownload size28/uni-iconsview classtext下载/view/view/view/view/view
/template
CSS部分
style langscss 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; // 为遮罩层定位提供参照提供参照方为相对定位自身则为绝对定位。
最终效果
