BRS1.0/pages/login/index.vue

<template>
	<view class="content">
		<!-- <img src="../../static/bei.png" alt="" class="tubei"> -->
		<form @submit="formSubmit">
		<view class="avatorWrapper">
		</view>
    <view class="name">系统名称</view>
		<view class="form">
			<view class="inputWrapper">
				<view class="log"></view>
				<input  class="input"  name="yonghuming"  type="text" value=""  placeholder-style="font-size:.8125rem;color:rgb(223, 223, 223);display:flex;justify-content: start;" placeholder="请输入登录账号" @blur="spggBlur"/>			
			</view>
			<view class="inputWrapper">
				<view class="pass"></view>
				<input  class="input"  name="mima"  type="password" value="" placeholder-style="font-size:.8125rem;color:rgb(223, 223, 223);display:flex;justify-content: start;" placeholder="请输入密码" @blur="spggBlur1"/>
			</view>
			
			
		</view>
		<button form-type="submit" class="loginBtn" @tap="login">登录</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				
				
				
				yonghuming:"",
				mima:"",
			}
		},
		onLoad() {

		},
		methods: {
			
			login () {
				uni.redirectTo({
					url: "/pages/index/index"
				})
			},
			
			
			/**发布提交 */
			formSubmit(e) {
				var that = this;
				var	yonghuming1= e.detail.value.yonghuming;
				var	mima1= e.detail.value.mima;
			
			uni.request({
				url:'https://换成你自己的域名接口',
			
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				method: 'POST',
				data: {
					yonghuming:yonghuming1,
					mima:mima1,
					
																	
					
					
				},
				success: (res) => {
					if(res.data=="5"){
						
					wx.showToast({
						title: '用户名或密码错误',
						icon: 'none',
						duration: 500
					});	
						
					}
					else{
						
					uni.navigateTo({
							url:"/pages/index1/index1",
							})		
						
					}
				}
			})
			}

		}
	}
</script>
<style>
	.content {
		background: #377EB4;
		width: 100vw;
		height: 100vh;
		background: url('../../static/bg.png') no-repeat;
		background-size: 100% 100%;
	}
	.avatorWrapper{
		height: 20vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avator{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avator .img{
		width: 100%
	}
	.name{
		padding: 0 100upx;
		color: rgb(255, 255, 255);
		font-family: Noto Sans SC;
		font-size: 34px;
		font-weight: 700;
	}
	.form{
		padding: 0 100upx;
		margin-top: 80px;
	}
	.inputWrapper{
		width: 100%;
		height: 80upx;
		background: rgba(0, 0, 0, 0);
		box-sizing: border-box;
		/* padding: 0 20px; */
		margin-top: 25px;
		border-bottom: 1px solid rgb(223, 223, 223);
		display: flex;
		align-items: center;
	}
	.log{
		width: .875rem;
		height: .875rem;
		background: url('../../static/login.png') no-repeat;
    background-size: 100% 100%;
		margin-right: .75rem;
	}
	.pass{
		width: .875rem;
		height: .875rem;
		background: url('../../static/mima.png') no-repeat;
    background-size: 100% 100%;
		margin-right: .75rem;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		text-align: center;
		color: rgb(223, 223, 223);
		font-family: Noto Sans SC;
		font-size: .8125rem;
		font-weight: 500;

	}
	.loginBtn{
		width: 18.75rem;
    height: 2.5rem;
		background: linear-gradient(177.56deg, rgba(54.04,157.79,205.96,1) -33.78%,rgba(59.83,102.58,194.93,1) 173%);
    border-radius: 2px;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgb(223, 223, 223);
		font-family: Noto Sans SC;
		font-size: 15px;
		font-weight: 700;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}
</style>