您可以使用以下代码实现一个居中的图片,并带有一个白色背景层和圆角边框:
<template>
<view class="container">
<view class="image-wrapper">
<image src="/static/image.jpg" class="image"></image>
</view>
<view class="text-wrapper">
<text class="text">关注公众号</text>
</view>
</view>
</template>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.image-wrapper {
width: 200rpx;
height: 200rpx;
border-radius: 10px;
background-color: #ffffff;
}
.image {
width: 100%;
height: 100%;
border-radius: 10px;
}
.text-wrapper {
margin-top: 20rpx;
text-align: center;
}
.text {
font-size: 28rpx;
color: #000000;
}
</style>
在上面的代码中,我们使用 flex 布局将容器设置为垂直方向居中对齐。通过设置 image-wrapper 的宽度、高度和圆角边框来创建背景层,并在其中放置图片。下方的文字则通过设置 margin-top 和 text-align 的方式实现居中对齐。您可以将 /static/image.jpg
替换为您自己的图片路径。
请注意,以上代码使用了 rpx 单位,用于适配不同设备的屏幕。您可以根据需求修改样式以及调整大小。