Skip to content

L
lbs-gpsbd-web
Commit 3f3f61a4 authored by yangkaiyi's avatar yangkaiyi
Browse files
Options

改登录、注册UI

parent cfc044ce
Hide whitespace changes
Inline Side-by-side
Showing with 799 additions and 634 deletions
src/views/login/index.vue
View file @ 3f3f61a4
<template>
<!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> -->
<div class="container" :style="{background:'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)'}">
<div class="login-center">
<el-card class="my-card">
<el-row>
<el-col :span="12" class="bg-purple">
<div class="welcome">
<div class="lbs-logo" id="svg-div"></div>
<div class="title">
<div class="logo">
<span class="system-name">GPS<font color="#606266">BD</font></span>
<span class="trademark">®</span>
<span class="system-title">{{$t("common.systemName")}}</span>
</div>
<div style="margin-top: 20px;">
<el-tooltip placement="top">
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_client.png"/></div>
<el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_tracker.png"/></div>
<el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div>
<el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button>
</el-tooltip>
</div>
</div>
<div class="login-phone">商务:13665607002 技术支持:13355514723
<!-- <span>版权所有:安徽东位信息科技有限公司</span> -->
</div>
</div>
</el-col>
<el-col :span="12" class="bg-purple2">
<div class="login-right">
<div class="login-title">{{$t("login.login")}}</div>
<div class="line"></div>
<el-form :model="loginForm" ref="loginForm" status-icon >
<el-form-item prop="account" :rules="[{ required: true, message: '账号不能为空'},{ min: 2, max: 12, message: '请输入正确的账号', trigger: 'blur' }]">
<MDinput v-model="loginForm.account" :maxlength="100" name="account" autocomplete="off" required>
{{$t('register.account')}}
</MDinput>
</el-form-item>
<el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空'}]">
<MDinput type="password" v-model="loginForm.password" :maxlength="100" name="password" autocomplete="off" required>
{{$t('register.password')}}
</MDinput>
<!-- <span class="login-icon el-icon-lock"></span>
<el-input type="password" v-model="loginForm.password" autocomplete="off" :placeholder="$t('register.password')"></el-input> -->
</el-form-item>
<el-form-item label="场景">
<el-radio-group v-model="sceneMode" @change="changeSceneMode">
<el-radio label="2d">2D</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="18"><el-button style="width:100%;" @click="handleLogin">{{$t("login.login")}}</el-button></el-col>
<el-col :span="6"><el-button v-if="registration" style="width:100%;" @click="$router.push({ path: '/register' })">{{$t("login.register")}}</el-button></el-col>
</el-row>
</el-form-item>
<lang-select class="set-language"></lang-select>
</el-form>
</div>
</el-col>
</el-row>
</el-card>
</div>
<div class ="footer-copyright">
<el-button type="text" size="small" @click.native="$store.dispatch('setVisblesFlag', [{key:'feedbackDialog',value:true}])">{{$t("map.userUserFeedback")}}</el-button><el-button type="text" size="small">{{$store.state.common.system.name}}® Version:{{$store.state.common.system.version}} ©{{$store.state.common.system.date}} {{$store.state.common.system.company}}</el-button>
</el-dialog>
</div>
</div>
</template>
<script>
import Vivus from 'vivus'
import '@/styles/common.scss';
import MDinput from '@/components/MDinput'
import LangSelect from '@/components/LangSelect'
import Feedback from '../map/components/feedback/index';
import { getConfigReg,userLogin,installCheck } from '@/api/api'
export default {
name: 'login',
components: { Feedback,LangSelect,MDinput},
data() {
return {
readonlyInput: true,
registration:true,
loginForm: {
account: '',
password: '',
client:0
},
loading: false,
pwdType: 'password',
sceneMode:localStorage.sceneMode?localStorage.sceneMode:'2d'
}
},
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
init(){
installCheck().then(data => {
if(!data){
this.$router.push({path: '/install'})
}else{
getConfigReg().then(data => {
this.registration = data;
})
}
})
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading=true;
this.$store.dispatch('Login', this.loginForm).then(data => {
this.loading = false;
// this.$router.push({path: '/'})
}).catch(() => {
this.loading = false
})
}
})
},
changeSceneMode(val){
localStorage.sceneMode = val;
//this.$store.dispatch('setMapValues',[{key:'sceneMode',value:val}]);
},
myCallback(){
console.log('myCallback');
},
randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
break;
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
return 0;
break;
}
}
},
mounted() {
this.init();
new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }, this.myCallback);
//console.log(this.randomNum(10,300));
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.container {
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
//background: url('../../assets/images/bg.png') no-repeat center / cover;
.welcome{
text-align: -webkit-center;
//position: absolute;
//left: 26%;
margin-top: 14px;
font-size: 30px;
color: #fff;
.title {
//left: -50px;
//position: absolute;
font: bold 30px "microsoft yahei";
white-space: nowrap;
}
.trademark {
vertical-align: top;
font-size: 12px;
padding: 3px;
// color: #606266
}
.system-title{
//color: #606266
}
.system-name{
//color: #606266
}
}
.my-card {
background-color: hsla(0,0%,100%,0.2);
width: 80%;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
.line {
width: 20px;
height: 10px;
border-bottom: 2px solid #fff;
margin: 0 auto 20px;
}
.login-title{
height: 40px;
line-height: 40px;
font-size: 20px;
color: #fff;
text-align: center;
}
span{
padding-left: 10px;
}
.el-input{
width: 300px;
padding-left: 10px;
}
}
}
.lbs-logo{
width: 300px;
height: 190px;
}
.login-icon {
color: #fff
}
.el-button--text{
color: #fff
}
.login-center{
text-align: center;
.el-form-item__label{
color: #fff
}
.el-radio__label{
color: #fff
}
}
.login-right{
padding: 26px;
}
.bg-purple {
//position: absolute;
background: #409EFF;
height: 600px;
padding: 16px;
}
.bg-purple2 {
//background: #cccccc;
}
.login-center .el-card__body{
padding: 0px
}
.login-phone{
font-size: 12px;
float:left;
bottom: 0;
position: fixed;
span{
float: right;
}
}
.set-language{
float: right;
//color: #409EFF;
}
.material-input__component{
background-color:transparent!important;
margin-top: 27px!important;
}
.material-input__component .material-label{
color: #ffffff!important;
}
.material-input__component .material-input{
color: #ffffff!important;
}
</style>
<template>
<!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> -->
<div
class="container"
:style="{
background: 'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)',
}"
>
<div class="login-center">
<el-card class="my-card">
<el-row>
<!-- <el-col :span="12" class="bg-purple">
<div class="welcome">
<div class="lbs-logo" id="svg-div"></div>
<div class="title">
<div class="logo">
<span class="system-name">GPS<font color="#606266">BD</font></span>
<span class="trademark">®</span>
<span class="system-title">{{$t("common.systemName")}}</span>
</div>
<div style="margin-top: 20px;">
<el-tooltip placement="top">
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_client.png"/></div>
<el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_tracker.png"/></div>
<el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div>
<el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button>
</el-tooltip>
</div>
</div>
<div class="login-phone">商务:13665607002 技术支持:13355514723
</div>
</div>
</el-col> -->
<el-col :span="24" class="bg-purple2">
<div class="login-right">
<div class="login-title">花博会重要有害生物踪迹管理系统</div>
<!-- <div class="line"></div> -->
<el-form :model="loginForm" ref="loginForm" status-icon>
<el-form-item
prop="account"
:rules="[
{ required: true, message: '账号不能为空' },
{
min: 2,
max: 12,
message: '请输入正确的账号',
trigger: 'blur',
},
]"
>
<MDinput
v-model="loginForm.account"
:maxlength="100"
name="account"
autocomplete="off"
required
>
{{ $t("register.account") }}
</MDinput>
</el-form-item>
<el-form-item
prop="password"
:rules="[{ required: true, message: '密码不能为空' }]"
>
<MDinput
type="password"
v-model="loginForm.password"
:maxlength="100"
name="password"
autocomplete="off"
required
>
{{ $t("register.password") }}
</MDinput>
<!-- <span class="login-icon el-icon-lock"></span>
<el-input type="password" v-model="loginForm.password" autocomplete="off" :placeholder="$t('register.password')"></el-input> -->
</el-form-item>
<div style="height: 30px" />
<el-form-item>
<el-row :gutter="20">
<el-col :span="18"
><el-button style="width: 100%" @click="handleLogin">{{
$t("login.login")
}}</el-button></el-col
>
<el-col :span="6"
><el-button
v-if="registration"
style="width: 100%"
@click="$router.push({ path: '/register' })"
>{{ $t("login.register") }}</el-button
></el-col
>
</el-row>
</el-form-item>
<!-- <lang-select class="set-language"></lang-select> -->
</el-form>
</div>
</el-col>
</el-row>
</el-card>
</div>
<div class="footer-copyright">
<el-button
type="text"
size="small"
@click.native="
$store.dispatch('setVisblesFlag', [
{ key: 'feedbackDialog', value: true },
])
"
>{{ $t("map.userUserFeedback") }}</el-button
><el-button type="text" size="small"
>{{ $store.state.common.system.name }}® Version:{{
$store.state.common.system.version
}}
©{{ $store.state.common.system.date }}
{{ $store.state.common.system.company }}</el-button
>
</div>
</div>
</template>
<script>
import Vivus from "vivus";
import "@/styles/common.scss";
import MDinput from "@/components/MDinput";
// import LangSelect from "@/components/LangSelect";
import Feedback from "../map/components/feedback/index";
import { getConfigReg, userLogin, installCheck } from "@/api/api";
export default {
name: "login",
components: {
Feedback,
// LangSelect,
MDinput,
},
data() {
return {
readonlyInput: true,
registration: true,
loginForm: {
account: "",
password: "",
client: 0,
},
loading: false,
pwdType: "password",
sceneMode: localStorage.sceneMode ? localStorage.sceneMode : "2d",
};
},
methods: {
showPwd() {
if (this.pwdType === "password") {
this.pwdType = "";
} else {
this.pwdType = "password";
}
},
init() {
installCheck().then((data) => {
if (!data) {
this.$router.push({ path: "/install" });
} else {
getConfigReg().then((data) => {
this.registration = data;
});
}
});
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
this.$store
.dispatch("Login", this.loginForm)
.then((data) => {
this.loading = false;
// this.$router.push({path: '/'})
})
.catch(() => {
this.loading = false;
});
}
});
},
changeSceneMode(val) {
localStorage.sceneMode = val;
//this.$store.dispatch('setMapValues',[{key:'sceneMode',value:val}]);
},
myCallback() {
console.log("myCallback");
},
randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
},
},
mounted() {
this.init();
// new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }, this.myCallback);
//console.log(this.randomNum(10,300));
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
.container {
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
//background: url('../../assets/images/bg.png') no-repeat center / cover;
.welcome {
text-align: -webkit-center;
//position: absolute;
//left: 26%;
margin-top: 14px;
font-size: 30px;
color: #fff;
.title {
//left: -50px;
//position: absolute;
font: bold 30px "microsoft yahei";
white-space: nowrap;
}
.trademark {
vertical-align: top;
font-size: 12px;
padding: 3px;
// color: #606266
}
.system-title {
//color: #606266
}
.system-name {
//color: #606266
}
}
.my-card {
background-color: hsla(0, 0%, 100%, 0.2);
width: 80%;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
.line {
width: 20px;
height: 10px;
border-bottom: 2px solid #fff;
margin: 0 auto 20px;
}
.login-title {
height: 40px;
line-height: 40px;
font-size: 40px;
color: #fff;
text-align: center;
}
span {
padding-left: 10px;
}
.el-input {
width: 300px;
padding-left: 10px;
}
}
}
.lbs-logo {
width: 300px;
height: 190px;
}
.login-icon {
color: #fff;
}
.el-button--text {
color: #fff;
}
.login-center {
text-align: center;
.el-form-item__label {
color: #fff;
}
.el-radio__label {
color: #fff;
}
}
.login-right {
height: 100%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bg-purple {
//position: absolute;
background: #409eff;
height: 600px;
padding: 16px;
}
.bg-purple2 {
//background: #cccccc;
}
.login-center {
.el-card__body {
padding: 0px;
height: 100%;
.el-row {
height: 100%;
.el-col {
height: 100%;
}
}
}
}
.login-phone {
font-size: 12px;
float: left;
bottom: 0;
position: fixed;
span {
float: right;
}
}
.set-language {
float: right;
//color: #409EFF;
}
.material-input__component {
background-color: transparent !important;
margin-top: 27px !important;
}
.material-input__component .material-label {
color: #ffffff !important;
}
.material-input__component .material-input {
color: #ffffff !important;
}
</style>
src/views/login/register.vue
View file @ 3f3f61a4
<template>
<!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> -->
<div class="container" :style="{background:'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)'}">
<div class="login-center">
<el-card class="my-card">
<el-row>
<el-col :span="12" class="bg-purple">
<div class="welcome">
<div class="lbs-logo" id="svg-div"></div>
<div class="title">
<div class="logo">
<span class="system-name">GPS<font color="#606266">BD</font></span>
<span class="trademark">®</span>
<span class="system-title">{{$t("common.systemName")}}</span>
</div>
<div style="margin-top: 20px;">
<el-tooltip placement="top">
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_client.png"/></div>
<el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_tracker.png"/></div>
<el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div>
<el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button>
</el-tooltip>
</div>
</div>
<div class="login-phone">商务:13665607002 技术支持:13355514723</div>
</div>
</el-col>
<el-col :span="12" class="bg-purple2">
<div class="login-right">
<!-- <div class="login-title">{{$t("login.register")}}</div>
<div class="line"></div> -->
<!-- <div class="register-type">
<el-radio-group v-model="registerForm.roleIds[0]" >
<el-radio :label="item.value" v-for="(item,index) in roles" :key="index">{{item.label}}</el-radio>
</el-radio-group>
</div> -->
<el-form :model="registerForm" :rules="registerFormRules" ref="registerForm" status-icon >
<el-form-item prop="account" :rules="[{ required: true, message: '手机号码不能为空'},{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }]">
<MDinput v-model="registerForm.account" :maxlength="100" name="account" autocomplete="off" required>
{{$t('register.mobile')}}
</MDinput>
</el-form-item>
<el-form-item prop="email" :rules="[{ required: true, message: '请输入邮箱'},{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}]">
<MDinput v-model="registerForm.email" :maxlength="100" name="email" autocomplete="off" required>
{{$t('register.email')}}
</MDinput>
</el-form-item>
<el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur'},{ min: 6, max: 20, message: '请输入不低于6位的密码', trigger: 'blur' }]">
<MDinput type="password" v-model="registerForm.password" :maxlength="100" name="password" autocomplete="off" required>
{{$t('register.password')}}
</MDinput>
</el-form-item>
<el-form-item name="password2" prop="password2" :rules="[{ required: true, message: '请再次输入密码'},{ min: 6, max: 20, message: '请输入不低于6位的密码', trigger: 'blur' },{validator: validatePass3, trigger: 'blur'}]">
<MDinput type="password" @keyup.enter.native="handleRegister" v-model="registerForm.password2" :maxlength="100" name="password2" autocomplete="off" required>
{{$t('register.password2')}}
</MDinput>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="16"><el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleRegister">{{$t("login.register")}}</el-button></el-col>
<el-col :span="8"><el-button type="primary" style="width:100%;" :loading="loading" @click="$router.push({ path: '/login' })">{{$t("login.login")}}</el-button></el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</el-card>
</div>
<div class ="footer-copyright">
<el-button type="text" size="small" @click.native="$store.dispatch('setVisblesFlag', [{key:'feedbackDialog',value:true}])">{{$t("map.userUserFeedback")}}</el-button><el-button type="text" size="small">{{$store.state.common.system.name}}® Version:{{$store.state.common.system.version}} ©{{$store.state.common.system.date}} {{$store.state.common.system.company}}</el-button>
</el-dialog>
</div>
</div>
</template>
<script>
import Vivus from 'vivus'
import '@/styles/common.scss';
import MDinput from '@/components/MDinput'
import { userRegister } from '@/api/api'
export default {
name: 'register',
components: {MDinput},
data() {
const validatePass = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error('密码不能小于5位'))
} else {
callback()
}
}
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.registerForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
roles:[{
value: 1,
label: this.$t('common.personal')
},
{
value: 2,
label: this.$t('common.enterprise')
}],
registerForm: {
roleIds:[1],
account: '',
password: ''
},
registerFormRules: { //登录框验证规则
account: [
{ required: true, message: '请输入帐号', trigger: 'blur' },
{ min: 2, max: 12, message: '请输入正确的帐号', trigger: 'blur' }
],
email:[
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
],
phone:[
{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur'},
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
],
password2:[
{ validator: validatePass2, trigger: 'blur' },
]
},
loading: false,
pwdType: 'password'
}
},
methods: {
validatePass3(rule, value, callback) {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.registerForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
},
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
handleRegister() {
this.$refs.registerForm.validate(valid => {
if (valid) {
this.registerForm.phone = this.registerForm.account
userRegister(this.registerForm).then((res) => {
this.$message({
message: '注册成功',
type: 'success'
});
this.$router.push({path: '/login'})
});
}
})
}
},
mounted() {
new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' });
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.container {
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
//background: url('../../assets/images/bg.png') no-repeat center / cover;
.welcome{
text-align: -webkit-center;
//position: absolute;
//left: 26%;
margin-top: 14px;
font-size: 30px;
color: #fff;
.title {
//left: -50px;
//position: absolute;
font: bold 30px "microsoft yahei";
white-space: nowrap;
}
.trademark {
vertical-align: top;
font-size: 12px;
padding: 3px;
// color: #606266
}
.system-title{
//color: #606266
}
.system-name{
//color: #606266
}
}
.my-card {
background-color: hsla(0,0%,100%,0.2);
width: 80%;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
.line {
width: 20px;
height: 10px;
border-bottom: 2px solid #fff;
margin: 0 auto 20px;
}
.login-title{
height: 40px;
line-height: 40px;
font-size: 20px;
color: #fff;
text-align: center;
}
span{
padding-left: 10px;
}
.el-input{
width: 300px;
padding-left: 10px;
}
}
}
.lbs-logo{
width: 300px;
height: 190px;
}
.login-icon {
color: #fff
}
.el-button--text{
color: #fff
}
.login-center{
text-align: center;
.el-form-item__label{
color: #fff
}
.el-radio__label{
color: #fff
}
}
.login-right{
padding: 26px;
}
.bg-purple {
//position: absolute;
background: #409EFF;
height: 600px;
padding: 16px;
}
.bg-purple2 {
//background: #cccccc;
}
.login-center .el-card__body{
padding: 0px
}
.login-phone{
font-size: 12px;
float:left;
bottom: 0;
position: fixed;
}
.set-language{
float: right;
//color: #409EFF;
}
.register-type{
margin-bottom: 10px;
}
.material-input__component{
background-color:transparent!important;
margin-top: 16px!important;
}
.material-input__component .material-label{
color: #ffffff!important;
}
.material-input__component .material-input{
color: #ffffff!important;
}
</style>
<template>
<!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> -->
<div
class="container"
:style="{
background: 'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)',
}"
>
<div class="login-center">
<el-card class="my-card">
<el-row>
<!-- <el-col :span="12" class="bg-purple">
<div class="welcome">
<div class="lbs-logo" id="svg-div"></div>
<div class="title">
<div class="logo">
<span class="system-name">GPS<font color="#606266">BD</font></span>
<span class="trademark">®</span>
<span class="system-title">{{$t("common.systemName")}}</span>
</div>
<div style="margin-top: 20px;">
<el-tooltip placement="top">
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_client.png"/></div>
<el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_tracker.png"/></div>
<el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button>
</el-tooltip>
<el-tooltip placement="top">
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div>
<el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button>
</el-tooltip>
</div>
</div>
<div class="login-phone">商务:13665607002 技术支持:13355514723</div>
</div>
</el-col> -->
<el-col :span="24" class="bg-purple2">
<div class="login-right">
<!-- <div class="login-title">{{$t("login.register")}}</div>
<div class="line"></div> -->
<!-- <div class="register-type">
<el-radio-group v-model="registerForm.roleIds[0]" >
<el-radio :label="item.value" v-for="(item,index) in roles" :key="index">{{item.label}}</el-radio>
</el-radio-group>
</div> -->
<el-form
:model="registerForm"
:rules="registerFormRules"
ref="registerForm"
status-icon
>
<el-form-item
prop="account"
:rules="[
{ required: true, message: '手机号码不能为空' },
{
min: 11,
max: 11,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]"
>
<MDinput
v-model="registerForm.account"
:maxlength="100"
name="account"
autocomplete="off"
required
>
{{ $t("register.mobile") }}
</MDinput>
</el-form-item>
<el-form-item
prop="email"
:rules="[
{ required: true, message: '请输入邮箱' },
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
]"
>
<MDinput
v-model="registerForm.email"
:maxlength="100"
name="email"
autocomplete="off"
required
>
{{ $t("register.email") }}
</MDinput>
</el-form-item>
<el-form-item
prop="password"
:rules="[
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 20,
message: '请输入不低于6位的密码',
trigger: 'blur',
},
]"
>
<MDinput
type="password"
v-model="registerForm.password"
:maxlength="100"
name="password"
autocomplete="off"
required
>
{{ $t("register.password") }}
</MDinput>
</el-form-item>
<el-form-item
name="password2"
prop="password2"
:rules="[
{ required: true, message: '请再次输入密码' },
{
min: 6,
max: 20,
message: '请输入不低于6位的密码',
trigger: 'blur',
},
{ validator: validatePass3, trigger: 'blur' },
]"
>
<MDinput
type="password"
@keyup.enter.native="handleRegister"
v-model="registerForm.password2"
:maxlength="100"
name="password2"
autocomplete="off"
required
>
{{ $t("register.password2") }}
</MDinput>
</el-form-item>
<div style="height: 30px" />
<el-form-item>
<el-row :gutter="20">
<el-col :span="16"
><el-button
type="primary"
style="width: 100%"
:loading="loading"
@click.native.prevent="handleRegister"
>{{ $t("login.register") }}</el-button
></el-col
>
<el-col :span="8"
><el-button
type="primary"
style="width: 100%"
:loading="loading"
@click="$router.push({ path: '/login' })"
>{{ $t("login.login") }}</el-button
></el-col
>
</el-row>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</el-card>
</div>
<div class="footer-copyright">
<el-button
type="text"
size="small"
@click.native="
$store.dispatch('setVisblesFlag', [
{ key: 'feedbackDialog', value: true },
])
"
>{{ $t("map.userUserFeedback") }}</el-button
><el-button type="text" size="small"
>{{ $store.state.common.system.name }}® Version:{{
$store.state.common.system.version
}}
©{{ $store.state.common.system.date }}
{{ $store.state.common.system.company }}</el-button
>
</div>
</div>
</template>
<script>
import Vivus from "vivus";
import "@/styles/common.scss";
import MDinput from "@/components/MDinput";
import { userRegister } from "@/api/api";
export default {
name: "register",
components: { MDinput },
data() {
const validatePass = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error("密码不能小于5位"));
} else {
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.registerForm.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
roles: [
{
value: 1,
label: this.$t("common.personal"),
},
{
value: 2,
label: this.$t("common.enterprise"),
},
],
registerForm: {
roleIds: [1],
account: "",
password: "",
},
registerFormRules: {
//登录框验证规则
account: [
{ required: true, message: "请输入帐号", trigger: "blur" },
{ min: 2, max: 12, message: "请输入正确的帐号", trigger: "blur" },
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phone: [
{
min: 11,
max: 11,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
password2: [{ validator: validatePass2, trigger: "blur" }],
},
loading: false,
pwdType: "password",
};
},
methods: {
validatePass3(rule, value, callback) {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.registerForm.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
},
showPwd() {
if (this.pwdType === "password") {
this.pwdType = "";
} else {
this.pwdType = "password";
}
},
handleRegister() {
this.$refs.registerForm.validate((valid) => {
if (valid) {
this.registerForm.phone = this.registerForm.account;
userRegister(this.registerForm).then((res) => {
this.$message({
message: "注册成功",
type: "success",
});
this.$router.push({ path: "/login" });
});
}
});
},
},
mounted() {
// new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' });
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
.container {
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
//background: url('../../assets/images/bg.png') no-repeat center / cover;
.welcome {
text-align: -webkit-center;
//position: absolute;
//left: 26%;
margin-top: 14px;
font-size: 30px;
color: #fff;
.title {
//left: -50px;
//position: absolute;
font: bold 30px "microsoft yahei";
white-space: nowrap;
}
.trademark {
vertical-align: top;
font-size: 12px;
padding: 3px;
// color: #606266
}
.system-title {
//color: #606266
}
.system-name {
//color: #606266
}
}
.my-card {
background-color: hsla(0, 0%, 100%, 0.2);
width: 80%;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
.line {
width: 20px;
height: 10px;
border-bottom: 2px solid #fff;
margin: 0 auto 20px;
}
// .login-title {
// height: 40px;
// line-height: 40px;
// font-size: 20px;
// color: #fff;
// text-align: center;
// }
span {
padding-left: 10px;
}
.el-input {
width: 300px;
padding-left: 10px;
}
}
}
.lbs-logo {
width: 300px;
height: 190px;
}
.login-icon {
color: #fff;
}
.el-button--text {
color: #fff;
}
.login-center {
text-align: center;
.el-form-item__label {
color: #fff;
}
.el-radio__label {
color: #fff;
}
}
.login-right {
height: 100%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bg-purple {
//position: absolute;
background: #409eff;
height: 600px;
padding: 16px;
}
.bg-purple2 {
//background: #cccccc;
}
.login-center .el-card__body {
padding: 0px;
}
.login-phone {
font-size: 12px;
float: left;
bottom: 0;
position: fixed;
}
.set-language {
float: right;
//color: #409EFF;
}
.register-type {
margin-bottom: 10px;
}
.material-input__component {
background-color: transparent !important;
margin-top: 16px !important;
}
.material-input__component .material-label {
color: #ffffff !important;
}
.material-input__component .material-input {
color: #ffffff !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment