jp-commuter-ds/pages/car/login.vue

<template>
	
	<view class="login">
		<car-common   ref="common"  ></car-common>
		<u-navbar title="登录"  :is-back="false">
			<view class="slot-wrap"></view>
			<view class="navbar-right"  @click="gotoHome" >
				<u-icon name="home-fill" color="#999" size="28"></u-icon>
				
				<span >前往首页</span>
			</view>
		</u-navbar>
		<view class="login-logo">
			<img src="static/img/logo_1.png" alt="">
		</view>
		<view class="login-name">车信达</view>
		<view class="login-form">
			<view class="login-form-row">
				<view class="login-form-title">
					<u-icon name="zhanghao" custom-prefix="custom-icon"  size="38" color="#1677ff"></u-icon>
				</view>
				<view class="login-form-input">
					<u-input placeholder="请输入手机号" v-model="subFormCode.phone" type="text"></u-input>
				</view>
			</view>
			<view class="login-form-row">
				<view class="login-form-title">
					<u-icon name="yanzhengma" custom-prefix="custom-icon"  size="38" color="#1677ff"></u-icon>
				</view>
				<view class="login-form-input">
					<u-input placeholder="请输入验证码" maxlength="6" v-model="subFormCode.verifyCode" type="number"  ></u-input>
				</view>
				<view class="login-form-code">
					<span @click="sendMsg" v-text="isSendMsgIng?(sendMsgSecond+'秒'):'发送验证码'" >发送验证码</span>
				</view>
			</view>
			<view class="login-button">
				<u-button type="primary" shape="circle" @click="login" >立即登录</u-button>
			</view>
			<view class="forget" v-if="false" ><span>忘记密码？</span></view>
			<view class="login-foot">
				<p>登录即为同意</p><span>《用户协议》</span><span>《隐私政策》</span> 
			</view>
		</view>
	</view>
</template>

<script>
	import api from './login.js'
	export default api;
	
</script>

<style scoped lang="scss">
	.login{
		text-align: center;
	}
	.login-logo{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20px;
		overflow: hidden;
		margin: 160rpx auto 0;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.login-name{
		font-size:16px;
		font-weight: bold;
		margin-top: 20rpx;
	}
	.login-form{
		width: 300px;
		margin: 30px auto;	
	}
	.login-form-row{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f7f7f7;
		position: relative;
		.login-form-title{
			margin-right: 20rpx;
		}
		.login-form-input{
			flex: 1;
			padding-right: 20rpx;
		}
	}
	.login-button{
		margin: 40rpx 0;
	}
	.navbar-right {
			display: flex;
			margin-right: 20rpx;
			span{
				color:rgb(96, 98, 102);
				margin-left: 3px;
			}
		}
	.slot-wrap {
			display: flex;
			align-items: center;
			flex: 1;
		}
	.forget{
		text-align: right;
		color:#1677ff;
	}
	.login-form-code{
		color:#1677ff;
	}
	.login-foot{
		display: flex;
		text-align: center;
		position: fixed;
		bottom:20rpx;
		left:50%;
		margin-left:-250rpx;
		color:#999;
		span{
			color:#1677ff
		}
	}
</style>