html
<template>
<view class="container">
<view class="layout">
<view class="box" v-for="item in 5">
<view class="pic">
<image src="/static/images/xxmLogo.png" mode="widthFix"></image>
</view>
<view class="text">
@@@@@@@@@@@@@
</view>
</view>
</view>
</view>
</template>
页面布局说明:
1.最外层,使用container容器存放页面所有元素;
2.次外层:使用layout控制页面的整体布局样式;
3 layout里边box,使用for循环生成5个box(div);
4.每个box由2种元素组成,图片和文字,图片mode使用widthFix随宽度进行自适应调节,防止图片被挤压变形,可以确保不同宽高的图片能正常显示。
CSS样式设置:
css
<style lang="scss" scoped>
.container{
.layout{
padding: 50rpx;
.box{
margin-bottom: 60rpx;
box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
border-radius: 15rpx;
overflow: hidden;
.pic{
image{
width: 100%;
}
.text{
padding: 30rpx;
}
}
}
}
}
</style>
1.padding:设置页面元素内边距为50rpx,实现页面元素居中,到四周的内边距相等;
2.box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08),用于设置阴影效果,rgba设置阴影为半透明色;
- border-radius用于设置边框圆角;
4.overflow:设置溢出处理策略;
5.image{width:100%}用于将图片宽度占满,防止左右出现空白;
效果一览:

CSS效果设置 小Demo:
css
.item{
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
height: env(safe-area-inset-bottom);
}
- background: rgba(255, 255, 255, 0.9);
设置元素的背景为白色(RGB 255,255,255),透明度为 0.9(90% 不透明),呈现半透明白色效果。
- border-radius: 50%;
将元素边框设为圆角边框,完全圆形(50%会将元素的四个角变成最大可能的圆角,最终呈现正圆形状)。
- display: flex;
启用 Flex 弹性布局,使子元素可以灵活排列。
- align-items: center;
垂直居中对齐子元素。
- justify-content: center;
水平居中对齐子元素。
综合效果:子元素会在水平和垂直方向上都居中显示。
- 高度设置
height: env(safe-area-inset-bottom);
将元素的高度设置为安全区域底部内嵌距离(safe-area-inset-bottom)。这是为全面屏设备(如 iPhone X 及以上)设计的,用于避免底部刘海或 Home 条遮挡内容。具体高度值由设备环境决定。
效果展示:
