productDev/dmvisit.git

			@@ -1,21 +1,54 @@
			<template>
			<div class="wrap">
			<div class="introduce">
			<h2>{{title}}</h2>
			<h3></h3>
			</div>
			<div class="login">
			<h1>系统登录 / LOGIN IN</h1>
			<div class="info-input">
			<el-input v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" maxlength="50" v-trim/>
			<el-input v-model="password" placeholder="请输入密码" type="password" prefix-icon="eva-icon-password" maxlength="30" show-password/>
			<div class="captcha-input">
			<el-input v-model="captcha.value" placeholder="图片验证码" prefix-icon="eva-icon-shield" maxlength="4" @keypress.enter.native="login"/>
			<img v-if="!captcha.loading" :src="captcha.uri" @click="refreshCaptcha">
			<span v-else><i class="el-icon-loading"></i></span>
			<img src="@/assets/images/bg@2x.png" class="main_bg" alt="">
			<div class="login_wrap">
			<div class="login_img">
			<div class="h3">智慧物流园区安消一体化系统</div>
			</div>
			<div class="form_wrap">
			<!-- <div class="tabs">
			<div class="tab active">
			<div class="name">帐号登录</div>
			<div class="icon"></div>
			</div>
			<div class="tab">
			<div class="name">手机登录</div>
			<div class="icon"></div>
			</div>
			</div> -->
			<div class="df_ac">
			<div class="label">帐号</div>
			<div class="line">
			<el-input v-model="username" placeholder="请输入帐号" maxlength="50" v-trim />
			</div>
			</div>
			<div class="df_ac">
			<div class="label">密码</div>
			<div class="line">
			<el-input v-model="password" placeholder="请输入密码" type="password" maxlength="30" show-password />
			</div>
			</div>

			<div class="df_ac">
			<div class="label">验证码</div>
			<div class="line">
			<el-input v-model="captcha.value" placeholder="请输入验证码" maxlength="4" @keypress.enter.native="login" />
			<img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
			<span v-else><i class="el-icon-loading"></i></span>
			</div>
			</div>
			<el-button :loading="loading" type="primary" class="login_btn"
			@click.native.prevent="login">立即登录</el-button>
			<div class="btn_wrap">
			<el-checkbox v-model="isRemPsd">
			<span style="font-size: 13px; font-weight: 400" class="placeholder9">记住密码</span>
			</el-checkbox>
			</div>
			<div class="google">
			<img src="@/assets/images/ic_google@2x.png" class="img" alt="">
			<span class="placeholder6">本系统推荐使用GOOGLE浏览器</span>
			</div>
			</div>
			<el-button :loading="loading" @click="login">登  录</el-button>
			</div>
			</div>
			</template>
			@@ -23,14 +56,14 @@
			<script>
			import { mapMutations } from 'vuex'
			import { getCaptcha, loginByPassword } from '@/api/system/common'
			import Cookies from "js-cookie";
			import Cookies from "js-cookie"

			export default {
			name: 'Login',
			data () {
			data() {
			return {
			loading: false,
			title: process.env.VUE_APP_TITLE,
			isRemPsd: false,
			username: '',
			password: '',
			// 验证码
			@@ -42,10 +75,17 @@
			}
			}
			},
			mounted() {
			this.username = localStorage.getItem('username') \|\| ''
			this.password = localStorage.getItem('password') \|\| ''
			const isRemPsd = localStorage.getItem('isRemPsd') \|\| false
			this.isRemPsd = JSON.parse(isRemPsd)
			this.refreshCaptcha()
			},
			methods: {
			...mapMutations(['setUserInfo']),
			// 登录
			login () {
			login() {
			if (this.loading) {
			return
			}
			@@ -61,8 +101,17 @@
			})
			.then((res) => {
			// window.location.href = process.env.VUE_APP_CONTEXT_PATH
			Cookies.set('dm_user_token',res)
			window.location.reload()
			if (this.isRemPsd) {
			localStorage.setItem('username', this.username.trim())
			localStorage.setItem('password', this.password.trim())
			localStorage.setItem('isRemPsd', this.isRemPsd)
			} else {
			localStorage.removeItem('username')
			localStorage.removeItem('password')
			localStorage.removeItem('isRemPsd')
			}
			Cookies.set('dm_user_token', res)
			this.$router.push('index')
			})
			.catch(e => {
			this.refreshCaptcha()
			@@ -73,7 +122,7 @@
			})
			},
			// 刷新验证码
			refreshCaptcha () {
			refreshCaptcha() {
			this.captcha.loading = true
			getCaptcha()
			.then(data => {
			@@ -90,7 +139,7 @@
			})
			},
			// 登录前验证
			__check () {
			__check() {
			if (this.username.trim() === '') {
			this.$tip.error('请输入用户名')
			return false
			@@ -106,47 +155,218 @@
			return true
			}
			},
			created () {
			this.refreshCaptcha()
			}

			}
			</script>

			<style scoped lang="scss">
			@import "@/assets/style/variables.scss";

			div {
			box-sizing: border-box;
			}

			$input-gap: 30px;

			.wrap {
			display: flex;
			width: 100%;
			height: 100vh;
			background-image: url("../assets/images/login.jpg");
			background-repeat: no-repeat;
			background-size: auto 180%;
			background-clip: content-box;
			background-position: center;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			// 左边介绍
			.introduce {
			padding-left: 10%;
			.main_bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: -1;
			}

			.login_wrap {
			width: 1000px;
			height: 600px;
			box-sizing: border-box;
			color: #fff;
			background: rgba(0, 0, 0, 0.4);
			background: #ffffff;
			box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.11);
			display: flex;
			flex-direction: column;
			justify-content: center;
			h2 {
			font-size:34px;
			font-style: italic;
			font-weight: 900;
			margin-top: 50px;

			.login_img {
			width: 500px;
			height: 600px;
			background: url("../assets/images/login_img@2x.png");
			background-size: 100% 100%;
			padding-left: 40px;
			padding-top: 80px;

			.h3 {
			font-size: 28px;
			font-weight: 700;
			color: #fff;
			margin-bottom: 26px;
			}

			.text {
			font-size: 18px;
			color: #fff;
			}
			}
			h3 {
			font-size: 49px;
			font-weight: 300;
			margin: 25px 0;

			.form_wrap {
			flex: 1;
			height: 100%;
			background-color: #fff;
			box-sizing: border-box;
			/* padding: 50px 80px 20px; */
			padding: 80px 80px 20px;
			position: relative;

			.tabs {
			display: flex;
			justify-content: space-evenly;
			font-size: 20px;
			color: #666666;
			margin-bottom: 30px;

			.tab {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon {
			width: 36px;
			height: 4px;
			background: #fff;
			border-radius: 2px;
			margin-top: 8px;
			}
			}

			.active {
			font-weight: 500;
			font-size: 24px;
			color: #222222;

			.icon {
			background: #207FF7;
			}
			}
			}

			.df_ac {
			flex-direction: column;
			align-items: flex-start;
			}

			.title {
			font-size: 24px;
			margin-top: 70px;
			margin-bottom: 48px;
			text-align: center;
			}

			.label {
			color: #222222;
			margin-bottom: 18px;
			font-size: 14px;
			margin-right: 12px;
			width: 42px;
			}

			&.ey {
			.label {
			width: 135px;
			}
			}

			.line {
			margin-bottom: 17px;
			display: flex;
			width: 100%;

			.el-input {
			height: 40px;

			// font-size: 14px;
			::v-deep .el-input__inner {
			height: 40px !important;
			}
			}

			.code_image {
			width: 100px;
			margin-left: 10px;
			}
			}

			.forget {
			justify-content: space-between;
			width: 100%;

			.text {
			cursor: pointer;
			}
			}

			.login_btn {
			width: 100%;
			height: 40px;
			background: $primary-color;
			box-shadow: 0px 2px 8px 0px rgba(67, 94, 190, 0.15);
			border-radius: 2px;
			margin: 0 auto;
			font-weight: 500;
			font-size: 16px;
			}

			.google {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 12px;

			.img {
			margin-right: 5px;
			width: 18px;
			}
			}

			.btn_wrap {
			margin-top: 20px;
			}

			.agreement {
			text-align: center;
			}

			.google {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 12px;

			.img {
			margin-right: 5px;
			width: 18px;
			}
			}
			}
			}

			// 右边登录
			.login {
			height: 100%;
			@@ -161,40 +381,50 @@
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;

			h1 {
			font-size: 28px;
			font-weight: 500;
			}

			.info-input {
			margin-top: $input-gap;
			margin-bottom: 60px;

			/deep/ .el-input {
			margin-top: 30px;

			.el-input__inner {
			height: 50px;
			background: #F9F9F9;
			border: 1px solid transparent;

			&:focus {
			border: 1px solid $primary-color;
			}
			}
			}
			}

			// 验证码输入
			.captcha-input {
			display: flex;
			margin-top: $input-gap;
			height: 50px;

			.el-input {
			width: 100%;
			margin-top: 0;
			}
			span, img {

			span,
			img {
			width: 45%;
			height: 100%;
			flex-shrink: 0;
			margin-left: 16px;
			}

			span {
			display: flex;
			align-items: center;
			@@ -203,6 +433,7 @@
			border-radius: 8px;
			}
			}

			.el-button {
			height: 50px;
			width: 100%;