最新uni-app微信小程序获取头像昵称方式

最新推荐文章于 2024-10-26 12:47:24 发布

ᝰꫛꫀꪝ477

最新推荐文章于 2024-10-26 12:47:24 发布

阅读量275

点赞数 1

文章标签： uni-app 微信小程序 notepad++

本文链接：https://blog.csdn.net/weixin_59627728/article/details/142317470

版权

<template>
	<view class="login-page">
		<image class="login-image" src="/static/login.png" mode="widthFix"></image>
		<text class="login-tips">登录体验更多AI功能</text>
		<view class="login-view">
			<button   open-type="chooseAvatar" id="avatar-button">
				<image class="avatar" src=" /static/touxiang.png" mode=""></image>
			</button>
			
			<form class="form-submit">
				<input type="nickname" class="weui-input" placeholder="请输入昵称" />
				<button form-type="submit" class="submit-button">登录</button>
			</form>
		</view>
	</view>    

</template>

1.html部分

<style lang="scss">
	.login-page {
		position: fixed;
		top: 0; 
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 999;

		.login-image {
			width: 100%;
			margin-top: 110rpx;
		}

		.login-tips {
			font-weight: bold;
			padding: 40rpx 20rpx;
		}
		.login-view{
			display: flex;
			flex-direction: column;
			align-items: center; 
			#avatar-button,.avatar{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.form-submit{
				 width: 100%;
				 .weui-input{
					 padding: 20rpx;
					 margin: 20rpx;
					 border-bottom: 1rpx solid #f2f2f2;
				 }
				 .submit-button{
					 background: linear-gradient(to right, #A2cffe, #c0e7fd);
					 padding: 15rpx 0;
					 margin: 55rpx 20rpx 0 20rpx;
				 }
			}
		}
	}
</style>

2.css 部分

3.效果图