uniapp实现微信一键登录按钮样式,如何开发胶囊按钮的样式

效果图:

关键点:让圆角的值变成高度的一半。

核心样式:

css 复制代码
.content .btn{
		width: 600rpx;
		border-radius: 300rpx;
		background-color: rgb(62,204,97);
		color: white;
		font-weight: 500;
	}

完整代码:

html 复制代码
<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>
相关推荐
wechatbot88810 分钟前
【极客互动】企业微信Spring Boot 调度 SearchContact开发自动添加外部联系人网关
汇编·微信·自动化·企业微信·rpa
懂软件的胡子个哥17 小时前
微信二次开发如何保护接口安全,Token、权限和重放防护都要考虑
微信·自动化·wechatapi·个人微信号二次开发·微信群管理
白远山18 小时前
上海24小时自助健身房系统软件开发实战指南:从需求到部署
java·架构·uni-app·需求分析
deepfu19 小时前
微信 API 消息模块:发送视频消息的流程与优化点
微信·机器人
iPad协议个微协议21 小时前
用 WechatApi 搭建微信自动化系统,需要哪些工程能力
微信·自动化·微信开发·wechatapi·个人微信号二次开发·微信ai客服·微信智能体ai
微信ipad协议开发1 天前
微信机器人 SaaS 还是私有化部署?两种模式对比选型
微信·机器人
海鸥两三1 天前
小程序文档预览 · 进阶面试题
小程序·uni-app·uniapp
海鸥两三1 天前
微信小程序 PDF 预览实践(uni.downloadFile → uni.openDocument)
小程序·uni-app
懂软件的胡子个哥1 天前
微信二次开发如何设计高可用架构,服务器故障时消息不能跟着丢
微信·自动化·wechatapi·个人微信号二次开发·微信群管理
懂软件的胡子个哥2 天前
微信二次开发如何接入 AI,真正可用的不是简单自动回复
运维·微信·wechatapi·个人微信号二次开发·微信群管理