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>
相关推荐
孙严Pay12 分钟前
代付 VS 纯代付
笔记·科技·计算机网络·其他·微信
白远山33 分钟前
城市电竞陪玩调度系统实战:从派单算法到多端协同的架构拆解
java·架构·uni-app·需求分析
iPad协议个微协议1 小时前
微信消息进入工单系统为什么需要候选层:WechatApi 接入后的服务流程设计
微信·自动化·微信开发·wechatapi·个人微信号二次开发·微信api·微信二次开发
iPad协议个微协议18 小时前
微信自动回复从关键词到 AI:WechatApi 如何连接消息、模型和人工
微信·自动化·微信开发·wechatapi·个人微信号二次开发
白远山20 小时前
上海24小时自助健身房系统软件开发实战指南
java·架构·uni-app·需求分析
微信ipad协议开发1 天前
微信视频号自动化:内容发布与互动的 API 实现
运维·微信
微信ipad协议开发1 天前
教培机构微信自动化:从招生引流到社群运维的完整链路
微信·机器人·自动化·教育电商
微信ipad协议开发1 天前
保险代理人微信赋能:多号管理与客户跟进的自动化方案
微信·机器人
wechatbot8881 天前
【极客互动】企业微信Spring Boot 调度 SearchContact开发自动添加外部联系人网关
汇编·微信·自动化·企业微信·rpa
懂软件的胡子个哥2 天前
微信二次开发如何保护接口安全,Token、权限和重放防护都要考虑
微信·自动化·wechatapi·个人微信号二次开发·微信群管理