小程序开发——手机号验证码登录页面

最新推荐文章于 2024-09-24 12:12:39 发布

致力于学习前端

最新推荐文章于 2024-09-24 12:12:39 发布

阅读量1.5k

点赞数

分类专栏：前端开发学习文章标签：小程序

本文链接：https://blog.csdn.net/qq_44657834/article/details/113485677

版权

前端开发学习专栏收录该内容

16 篇文章 2 订阅

订阅专栏

最终做出页面效果：

<view class="main_candidate">
	
	<view class="inputbox flex">
		<text class="input-label">手机号</text>
		<input name="name" placeholder="请输入手机号" bindinput="inputName" class="primary"/>
	</view>
	<view class="inputbox flex">
		<text class="input-label">验证码</text>
		<input name="code" placeholder="请输入验证码"  class="primary"/>
		<button class="getCode" bindtap="sendVerifyCode">发送验证码</button>
	</view>
	<button class="login" form-type="submit">立即登录</button>
	<view class="register">
			<text bindtap="register">没有账号？去注册</text>
	</view>
	
</view>

.input-label {
  color: #888;
  font-size: 12pt;
  height: 25rpx;
  line-height: 25rpx;
  padding: 0 25rpx;
  border-right: 1px solid #d8d8d8; 
}
.main_candidate{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  margin-top: 30px;
}
.inputbox{
  padding-left: 6px;
  box-sizing: border-box;
  border-bottom: 1px solid #dadada;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  background-color: #fff;
}
.flex{
  border-radius: 5px;
  border: 2px solid #f4f4f4;
  display: flex;
  align-items: center;
  margin: 40rpx 0;
}
.primary{
  flex:1;
}
.inputbox button{
  width: 110px; 
  height: 38px;
  color:#fff;
  background-color: #5dd5c8;
  font-size: 16px; 
}
.login{
  margin-top: 20px;
  background-color: #5dd5c8;
  color: #fff;
  font-size: 20px;
}
.register{
  color: blue;
  font-size: 16px;
  margin: 0 auto;
  width: 40%;
  margin-top: 10px;
}