<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
		  <view class="title">
		    <text>找回密码</text>
		  </view>
		</view>
		<!-- 表单 -->
		<view class="login-form">
			<form>
		  <!-- 手机号 -->
		  <view class="form-item">
		    <input class="form-item--input" type="number" v-model="mobile" maxlength="11" autocomplete="off" placeholder="输入手机号码"
			 @input="onInputStepper($event, item)"/>
		  </view>
		  <!-- 验证码 -->
		  <view class="form-item">
			  <input class="form-item--input" type="number" v-model="chkcode" maxlength="11" autocomplete="off" placeholder="输入6位验证码" />
			  <button class="abtn" href="" @click="getsmscode" ref="abtn">获取验证码 </button>
		  </view>
		  <!-- 密码 -->
		  <view class="form-item">
			  <input class="form-item--input" type="password" v-model="vpass" autocomplete="off" placeholder="请输入密码" />
		  </view>
		  <!-- 重复密码 -->
		  <view class="form-item">
			  <input class="form-item--input" type="password" v-model="repass" autocomplete="off" placeholder="再次请输入密码" />
		  </view>
		
		  <!-- 登录按钮 -->
		  <view class="login-button" @click="handleLogin">
		    <text>确认修改</text>
		  </view>
		  </form>
		</view>
		
		<!-- 找回密码 注册 -->
		<view class="regtips">
			<view>已拥有账户?<a class="loginnow" @tap="gologin">登录</a></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 调整到登录页面
			gologin(){
				this.$navTo("pages/login/index")  
			},
		}
	}
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }
  
  // 页面头部
  .header {
    margin-bottom: 60rpx;
  
    .title {
      color: #191919;
      font-size: 54rpx;
    }
  
  }
  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;
  
    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }
  
    &--parts {
      min-width: 100rpx;
      height: 100%;
    }
  	
  	&--radgrp{
  		display: flex;
  		flex:1;
  		height: 100%;
  	}
  	
  	.abtn{
  		font-size: 26rpx;
  	}
  
  
  
    // 短信验证码
    .captcha-sms {
      font-size: 28rpx;
      line-height: 50rpx;
      padding-right: 20rpx;
  
      .activate {
        color: #cea26a;
      }
  
      .un-activate {
        color: #9e9e9e;
      }
    }
  }
  
  
  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, #242e4b, #242e4b);
    color: #fff;
    // border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 15rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 找回密码和 立即注册
  .regtips{
  	  display: flex;
  	 margin-top: 26rpx;
  	 line-height: 1.4;
  	 padding-right: 32rpx;
  	 
  	 .loginnow{
  		 color: #5299dc;
  		 
  		 &:hover{
  			 color: #a60000;
  		 }
  	 }
  	 
  	 
  
  }
  
</style>
