Cold_online_web/src/views/login/login.vue

<template>
	<div class="login">
		<div class="loginMai">
			<div class="loginPir">
				<div class="loginPir-t">
					<!-- <img src="../../assets/img/logo1.png" alt="" srcset=""> -->
				</div>
				<div class="loginPir-c">
					<div class="loginPir-cLR">
						<div class="loginPir-c-L">
							<h1>冷链验证报告线上</h1>
							<div class="loginPir-c-L">
								验证模板管理、校准证书管理
							</div>
						</div>
						<div class="loginPir-c-R">
							<div class="loginPir-c-R1">
								账号登录/Login
							</div>
							<div class="loginPir-c-R2">
								<div style="margin-bottom: 15px;">
									<el-input v-model="Info.bzd_username" placeholder="请输入内容"></el-input>
								</div>
								<div style="margin-bottom: 15px;">
									<el-input placeholder="请输入密码" v-model="Info.bzd_password" show-password></el-input>
								</div>
								<div style="margin-bottom: 15px;">
									<el-select v-model="Info.value" placeholder="请选择" style="width: 100%;">
										<el-option v-for="item in options" :key="item.value" :label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</div>
								<div style="margin-top: 40px;">
									<el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="loginPir-b"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		UserLogin,AdminLogin
	} from '@/api/login.js'
	export default {
		data(){
			return{
				Info: {
					bzd_username: '',
					bzd_password: '',
					value:'2'
				},
				options: [{
					value: '1',
					label: '管理员登录'
				}, {
					value: '2',
					label: '用户登录'
				}],
			}
		},
		methods:{
			login(){
				if(this.Info.bzd_username===''){
					this.$message.error('请输入登录账号')
					return
				}else if(this.Info.bzd_username===''){
					this.$message.error('请输入登录密码')
					return
				}else{
					if(this.Info.value==1){
						this.GetadminLgApi()
					}else{
						this.GetuserLgApi()
					}
				}
			},
			GetuserLgApi(){//用户登录
				var obj = {
					bzd_username : this.Info.bzd_username,
					bzd_password : this.$md5(this.Info.bzd_password)
				}
				UserLogin(obj).then(res=>{
					if(res.data.Code==200){
						this.$store.commit('setuserInfo', {
							username: this.Info.bzd_username,
							password: this.Info.bzd_password,
							value:this.Info.value,
							token: res.data.Data
						})
						this.$router.replace('/home')
					}
				})
			},
			GetadminLgApi(){//管理员登录
				var obj = {
					bzd_username : this.Info.bzd_username,
					bzd_password : this.$md5(this.Info.bzd_password)
				}
				AdminLogin(obj).then(res=>{
					if(res.data.Code==200){
						this.$store.commit('setuserInfo', {
							username: this.Info.bzd_username,
							password: this.Info.bzd_password,
							value:this.Info.value,
							token: res.data.Data
						})
						this.$router.replace('/home')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		user-select: none;
		background: #fff;
		.loginMai {
			height: 100vh;
			width: 100%;
			display: flex;
			align-items: center;
			.loginPir {
				width: 100%;
				display: flex;
				flex-direction: column;
				.loginPir-t {
					height: 80px;
					margin: 0 auto;
				}

				.loginPir-c {
					flex: 1;
					height: 500px;
					background-image: url('../../assets/img/BJ.jfif');
					background-size:cover;
					background-repeat: no-repeat;
					@media screen and (max-width: 1200px) {
						.loginPir-cLR {
							height: 100%;
							margin: 0 auto;
							display: flex;
							align-items: center;
							justify-content: center;
							.loginPir-c-L {
								display: none;
								color: #fff;
								h1{
									letter-spacing: 5px;
								}
							}
						
							.loginPir-c-R {
								background: #fff;
								border-radius: 4px;
								padding: 40px 30px;
								width: 300px;
								.loginPir-c-R1 {
									padding-bottom: 30px;
									letter-spacing: 2px;
									color: #606266;
								}
							}
						}
					}
					@media screen and (min-width: 1200px) {
						.loginPir-cLR {
							max-width: 1200px;
							height: 100%;
							margin: 0 auto;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.loginPir-c-L {
								color: #fff;
								h1{
									letter-spacing: 5px;
								}
							}
						
							.loginPir-c-R {
								background: #fff;
								border-radius: 4px;
								padding: 40px 30px;
								width: 300px;
						
								.loginPir-c-R1 {
									padding-bottom: 30px;
									letter-spacing: 2px;
									color: #606266;
								}
							}
						}
					}
				}

				.loginPir-b {
					height: 80px;
				}
			}
		}
	}
</style>