效果图:
关键点:让圆角的值变成高度的一半。
核心样式:
.content .btn{
width: 600rpx;
border-radius: 300rpx;
background-color: rgb(62,204,97);
color: white;
font-weight: 500;
}
完整代码:
<template>
<view class="content">
<h1 class="title">宝宝相册</h1>
<image class="img" src="../../static/boy1.png"></image>
<button class="btn">微信一键登录</button>
<view>我已阅读并同意用户注册协议和隐私政策</view>
</view>
</template>
<style scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.content .title {
font-size: 34rpx;
font-weight: 300;
margin: 30rpx 0;
}
.content .img {
width: 80%;
margin-bottom: 30rpx;
border-radius: 3%;
}
.content .btn{
width: 600rpx;
border-radius: 300rpx;
background-color: rgb(62,204,97);
color: white;
font-weight: 500;
}
</style>