html1

最新推荐文章于 2024-07-14 09:37:06 发布

灵眸星河

最新推荐文章于 2024-07-14 09:37:06 发布

阅读量95

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_63698880/article/details/138467077

版权

这篇文章详细描述了一个基于Vue.js的前端登录界面，包括用户名/邮箱输入框、密码输入框、密码显示/隐藏功能以及登录提交逻辑。展示了如何使用前端技术处理用户输入和基本验证。

摘要由CSDN通过智能技术生成

<template>
	<view class="contents">
		<view class="top-bar">
			<view class="top-bar-right" @tap="toSignUp">
				<view class="text">注册</view>
			</view>	
		</view>
		<view class="logo">
			<image src="../../static/imge/weixin.png"></image>
		</view>
		<view class="main">
			<view class="title">登录</view>
			<view class="slogan">您好，欢迎来到 聊天室！</view>
			<view class="inputs">
					<view class="inputs-div">
				<input type="text" placeholder="用户名/邮箱" class="user" placeholder-style="color:#aaa;font-weight:400;" @blur="getUser"/>
				</view>
				<view class="inputs-div">
				<input :type="type" placeholder="密码" class="psw" placeholder-style="color:#aaa;font-weight:400;" @blur="getPsw"/>
				<image :src="lookurl" class="look"  @tap="looks"></image>
		   <view class="tips">输入用户或密码错误!</view> 
		   </view>
			
		</view>
		</view>
			<view class="submit" @tap="login">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:'',
				psw:'',
				type:'password',
				look:false,    //是否显示密码
				lookurl:'../../static/commnt/yinchang.png',
			}
		},
		methods: {
			//跳转注册页面
			toSignUp: function(){
			uni.navigateTo({
				url:'/pages/signup/signup',
			});	
			},
			//获取用户名/邮箱
			getUser: function(e){
				this.user =e.detail.value;
			},
			//获取密码
			getPsw: function(e){
				this.psw =e.detail.value;
			},
			//登录提交
			login:function(){
			//	console.log(this.psw)
			if(this.user && this.psw){
				console.log('提交')
			}	
			},
			looks: function(){
				if(this.look){
					this.type="password";
					this.look=!this.look;
					this.lookurl='../../static/commnt/yinchang.png';
				}else{
					this.type="text";
					this.look=!this.look;
					this.lookurl='../../static/commnt/xianshi.png';
					}
		}
	}
	}
</script>

<style lang="scss">
.contents {
	
		padding-top:var(--status-bar-height);
	}
.top-bar{
	position: fixed;
	z-index: 1001;
	top:0;
	left:0;
	width:100%;
	height: 88rpx;
	padding-top:var(--status-bar-height);
	background: $uni-bg-color;
	//border-bottom:1px solid $uni-border-color;
	
	.top-bar-right{
		float: right;
		padding-right:32rpx;
		.text{
			font-size:$uni-font-size-lg;
			font-weight:500;
			color:$uni-text-color;
			line-height:88rpx;
		}
	}
}
.logo {
	text-align:center;
	image{
	padding-top:256rpx;
	 width:194rpx;
	 height:92rpx;
	 margin:0 auto;
    }
 }
.main{
	padding: 54rpx $uni-spacing-row-lg 120rpx;
	//width:100%;
	.title{
		font-size:56rpx;
		font-weight:500;
		color:$uni-text-color;
		line-height:80rpx;
	}
	.slogan{
		font-size:40rpx;
		color:$uni-text-color-grey;
		line-height:56rpx;
	}
	.inputs{
		padding-top:8rpx;
		input{
			padding-top:40rpx;
			height:88rpx;
			font-size:$uni-font-size-lg;
			font-weight:500;
			color:$uni-text-color;
			line-height:88rpx;
			border-bottom:1px solid $uni-border-color;
		}
	}
	.inputs-div{
		position:relative;
	}
	.tips{
		float:left;
		font-size:$uni-font-size-lg;
		color:$uni-color-warning;
		line-height:56rpx;
	}
	.look{
		position:absolute;
		right:0;
		top: 70rpx;
		width:59rpx;
		height:62rpx;
	}
}
.submit{
	margin: 0 auto;
	width:520rpx;
	height:96rpx;
	background:$uni-color-primary;
	box-shadow:0px 50rpx 32rpx -36rpx rgba(255,228,49,0.4);
	border-radius:48rpx;
	font-size:$uni-font-size-lg;
	font-weight:500;
	color:$uni-text-color;
	line-height:96rpx;
	text-align:center;
}
</style>