Skip to content

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

改登录、注册UI

parent cfc044ce
Show whitespace changes
Inline Side-by-side
Showing with 799 additions and 634 deletions
src/views/login/index.vue
View file @ 3f3f61a4
<template> <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, 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="container"
:style="{
background: 'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)',
}"
>
<div class="login-center"> <div class="login-center">
<el-card class="my-card"> <el-card class="my-card">
<el-row> <el-row>
<el-col :span="12" class="bg-purple"> <!-- <el-col :span="12" class="bg-purple">
<div class="welcome"> <div class="welcome">
<div class="lbs-logo" id="svg-div"></div> <div class="lbs-logo" id="svg-div"></div>
<div class="title"> <div class="title">
...@@ -32,148 +34,194 @@ ...@@ -32,148 +34,194 @@
</div> </div>
</div> </div>
<div class="login-phone">商务:13665607002 技术支持:13355514723 <div class="login-phone">商务:13665607002 技术支持:13355514723
<!-- <span>版权所有:安徽东位信息科技有限公司</span> -->
</div> </div>
</div> </div>
</el-col> </el-col> -->
<el-col :span="12" class="bg-purple2"> <el-col :span="24" class="bg-purple2">
<div class="login-right"> <div class="login-right">
<div class="login-title">{{$t("login.login")}}</div> <div class="login-title">花博会重要有害生物踪迹管理系统</div>
<div class="line"></div> <!-- <div class="line"></div> -->
<el-form :model="loginForm" ref="loginForm" status-icon > <el-form :model="loginForm" ref="loginForm" status-icon>
<el-form-item prop="account" :rules="[{ required: true, message: '账号不能为空'},{ min: 2, max: 12, message: '请输入正确的账号', trigger: 'blur' }]"> <el-form-item
<MDinput v-model="loginForm.account" :maxlength="100" name="account" autocomplete="off" required> prop="account"
{{$t('register.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> </MDinput>
</el-form-item> </el-form-item>
<el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空'}]"> <el-form-item
<MDinput type="password" v-model="loginForm.password" :maxlength="100" name="password" autocomplete="off" required> prop="password"
{{$t('register.password')}} :rules="[{ required: true, message: '密码不能为空' }]"
>
<MDinput
type="password"
v-model="loginForm.password"
:maxlength="100"
name="password"
autocomplete="off"
required
>
{{ $t("register.password") }}
</MDinput> </MDinput>
<!-- <span class="login-icon el-icon-lock"></span> <!-- <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-input type="password" v-model="loginForm.password" autocomplete="off" :placeholder="$t('register.password')"></el-input> -->
</el-form-item> </el-form-item>
<el-form-item label="场景"> <div style="height: 30px" />
<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-form-item>
<el-row :gutter="20"> <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="18"
<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-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-row>
</el-form-item> </el-form-item>
<lang-select class="set-language"></lang-select> <!-- <lang-select class="set-language"></lang-select> -->
</el-form> </el-form>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
</div> </div>
<div class ="footer-copyright"> <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-button
</el-dialog> 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>
</div> </div>
</template> </template>
<script> <script>
import Vivus from 'vivus' import Vivus from "vivus";
import '@/styles/common.scss'; import "@/styles/common.scss";
import MDinput from '@/components/MDinput' import MDinput from "@/components/MDinput";
import LangSelect from '@/components/LangSelect' // import LangSelect from "@/components/LangSelect";
import Feedback from '../map/components/feedback/index'; import Feedback from "../map/components/feedback/index";
import { getConfigReg,userLogin,installCheck } from '@/api/api' import { getConfigReg, userLogin, installCheck } from "@/api/api";
export default { export default {
name: 'login', name: "login",
components: { Feedback,LangSelect,MDinput}, components: {
Feedback,
// LangSelect,
MDinput,
},
data() { data() {
return { return {
readonlyInput: true, readonlyInput: true,
registration:true, registration: true,
loginForm: { loginForm: {
account: '', account: "",
password: '', password: "",
client:0 client: 0,
}, },
loading: false, loading: false,
pwdType: 'password', pwdType: "password",
sceneMode:localStorage.sceneMode?localStorage.sceneMode:'2d' sceneMode: localStorage.sceneMode ? localStorage.sceneMode : "2d",
} };
}, },
methods: { methods: {
showPwd() { showPwd() {
if (this.pwdType === 'password') { if (this.pwdType === "password") {
this.pwdType = '' this.pwdType = "";
} else { } else {
this.pwdType = 'password' this.pwdType = "password";
} }
}, },
init(){ init() {
installCheck().then(data => { installCheck().then((data) => {
if(!data){ if (!data) {
this.$router.push({path: '/install'}) this.$router.push({ path: "/install" });
}else{ } else {
getConfigReg().then(data => { getConfigReg().then((data) => {
this.registration = data; this.registration = data;
}) });
} }
}) });
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading=true; this.loading = true;
this.$store.dispatch('Login', this.loginForm).then(data => { this.$store
.dispatch("Login", this.loginForm)
.then((data) => {
this.loading = false; this.loading = false;
// this.$router.push({path: '/'}) // this.$router.push({path: '/'})
}).catch(() => {
this.loading = false
}) })
.catch(() => {
this.loading = false;
});
} }
}) });
}, },
changeSceneMode(val){ changeSceneMode(val) {
localStorage.sceneMode = val; localStorage.sceneMode = val;
//this.$store.dispatch('setMapValues',[{key:'sceneMode',value:val}]); //this.$store.dispatch('setMapValues',[{key:'sceneMode',value:val}]);
}, },
myCallback(){ myCallback() {
console.log('myCallback'); console.log("myCallback");
}, },
randomNum(minNum,maxNum){ randomNum(minNum, maxNum) {
switch(arguments.length){ switch (arguments.length) {
case 1: case 1:
return parseInt(Math.random()*minNum+1,10); return parseInt(Math.random() * minNum + 1, 10);
break; break;
case 2: case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break; break;
default: default:
return 0; return 0;
break; break;
} }
} },
}, },
mounted() { mounted() {
this.init(); this.init();
new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }, this.myCallback); // new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }, this.myCallback);
//console.log(this.randomNum(10,300)); //console.log(this.randomNum(10,300));
} },
} };
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.container {
.container {
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%); //background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -181,7 +229,7 @@ export default { ...@@ -181,7 +229,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
//background: url('../../assets/images/bg.png') no-repeat center / cover; //background: url('../../assets/images/bg.png') no-repeat center / cover;
.welcome{ .welcome {
text-align: -webkit-center; text-align: -webkit-center;
//position: absolute; //position: absolute;
//left: 26%; //left: 26%;
...@@ -193,7 +241,6 @@ export default { ...@@ -193,7 +241,6 @@ export default {
//position: absolute; //position: absolute;
font: bold 30px "microsoft yahei"; font: bold 30px "microsoft yahei";
white-space: nowrap; white-space: nowrap;
} }
.trademark { .trademark {
vertical-align: top; vertical-align: top;
...@@ -201,16 +248,15 @@ export default { ...@@ -201,16 +248,15 @@ export default {
padding: 3px; padding: 3px;
// color: #606266 // color: #606266
} }
.system-title{ .system-title {
//color: #606266 //color: #606266
} }
.system-name{ .system-name {
//color: #606266 //color: #606266
} }
} }
.my-card { .my-card {
background-color: hsla(0, 0%, 100%, 0.2);
background-color: hsla(0,0%,100%,0.2);
width: 80%; width: 80%;
height: 60%; height: 60%;
position: absolute; position: absolute;
...@@ -226,82 +272,91 @@ export default { ...@@ -226,82 +272,91 @@ export default {
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
margin: 0 auto 20px; margin: 0 auto 20px;
} }
.login-title{ .login-title {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
font-size: 20px; font-size: 40px;
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
span{ span {
padding-left: 10px; padding-left: 10px;
} }
.el-input{ .el-input {
width: 300px; width: 300px;
padding-left: 10px; padding-left: 10px;
} }
} }
} }
.lbs-logo{ .lbs-logo {
width: 300px; width: 300px;
height: 190px; height: 190px;
}
.login-icon {
color: #fff
}
.el-button--text{
color: #fff
} }
.login-center{ .login-icon {
color: #fff;
}
.el-button--text {
color: #fff;
}
.login-center {
text-align: center; text-align: center;
.el-form-item__label{ .el-form-item__label {
color: #fff color: #fff;
} }
.el-radio__label{ .el-radio__label {
color: #fff color: #fff;
} }
} }
.login-right{ .login-right {
padding: 26px; height: 100%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.bg-purple { .bg-purple {
//position: absolute; //position: absolute;
background: #409EFF; background: #409eff;
height: 600px; height: 600px;
padding: 16px; padding: 16px;
} }
.bg-purple2 { .bg-purple2 {
//background: #cccccc; //background: #cccccc;
}
.login-center {
.el-card__body {
padding: 0px;
height: 100%;
.el-row {
height: 100%;
.el-col {
height: 100%;
} }
.login-center .el-card__body{
padding: 0px
} }
.login-phone{ }
}
.login-phone {
font-size: 12px; font-size: 12px;
float:left; float: left;
bottom: 0; bottom: 0;
position: fixed; position: fixed;
span{ span {
float: right; float: right;
} }
}
} .set-language {
.set-language{
float: right; float: right;
//color: #409EFF; //color: #409EFF;
} }
.material-input__component{ .material-input__component {
background-color:transparent!important; background-color: transparent !important;
margin-top: 27px!important; margin-top: 27px !important;
}
} .material-input__component .material-label {
.material-input__component .material-label{ color: #ffffff !important;
color: #ffffff!important; }
} .material-input__component .material-input {
.material-input__component .material-input{ color: #ffffff !important;
color: #ffffff!important; }
}
</style> </style>
src/views/login/register.vue
View file @ 3f3f61a4
<template> <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, 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="container"
:style="{
background: 'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)',
}"
>
<div class="login-center"> <div class="login-center">
<el-card class="my-card"> <el-card class="my-card">
<el-row> <el-row>
<el-col :span="12" class="bg-purple"> <!-- <el-col :span="12" class="bg-purple">
<div class="welcome"> <div class="welcome">
<div class="lbs-logo" id="svg-div"></div> <div class="lbs-logo" id="svg-div"></div>
...@@ -33,8 +36,8 @@ ...@@ -33,8 +36,8 @@
</div> </div>
<div class="login-phone">商务:13665607002 技术支持:13355514723</div> <div class="login-phone">商务:13665607002 技术支持:13355514723</div>
</div> </div>
</el-col> </el-col> -->
<el-col :span="12" class="bg-purple2"> <el-col :span="24" class="bg-purple2">
<div class="login-right"> <div class="login-right">
<!-- <div class="login-title">{{$t("login.register")}}</div> <!-- <div class="login-title">{{$t("login.register")}}</div>
<div class="line"></div> --> <div class="line"></div> -->
...@@ -44,158 +47,265 @@ ...@@ -44,158 +47,265 @@
</el-radio-group> </el-radio-group>
</div> --> </div> -->
<el-form :model="registerForm" :rules="registerFormRules" ref="registerForm" status-icon > <el-form
<el-form-item prop="account" :rules="[{ required: true, message: '手机号码不能为空'},{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }]"> :model="registerForm"
:rules="registerFormRules"
<MDinput v-model="registerForm.account" :maxlength="100" name="account" autocomplete="off" required> ref="registerForm"
{{$t('register.mobile')}} 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> </MDinput>
</el-form-item> </el-form-item>
<el-form-item prop="email" :rules="[{ required: true, message: '请输入邮箱'},{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}]"> <el-form-item
<MDinput v-model="registerForm.email" :maxlength="100" name="email" autocomplete="off" required> prop="email"
{{$t('register.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> </MDinput>
</el-form-item> </el-form-item>
<el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur'},{ min: 6, max: 20, message: '请输入不低于6位的密码', trigger: 'blur' }]"> <el-form-item
prop="password"
<MDinput type="password" v-model="registerForm.password" :maxlength="100" name="password" autocomplete="off" required> :rules="[
{{$t('register.password')}} { 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> </MDinput>
</el-form-item> </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'}]"> <el-form-item
<MDinput type="password" @keyup.enter.native="handleRegister" v-model="registerForm.password2" :maxlength="100" name="password2" autocomplete="off" required> name="password2"
{{$t('register.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> </MDinput>
</el-form-item> </el-form-item>
<div style="height: 30px" />
<el-form-item> <el-form-item>
<el-row :gutter="20"> <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="16"
<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-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-row>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
</div> </div>
<div class ="footer-copyright"> <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-button
</el-dialog> 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>
</div> </div>
</template> </template>
<script> <script>
import Vivus from 'vivus' import Vivus from "vivus";
import '@/styles/common.scss'; import "@/styles/common.scss";
import MDinput from '@/components/MDinput' import MDinput from "@/components/MDinput";
import { userRegister } from '@/api/api' import { userRegister } from "@/api/api";
export default { export default {
name: 'register', name: "register",
components: {MDinput}, components: { MDinput },
data() { data() {
const validatePass = (rule, value, callback) => { const validatePass = (rule, value, callback) => {
if (value.length < 5) { if (value.length < 5) {
callback(new Error('密码不能小于5位')) callback(new Error("密码不能小于5位"));
} else { } else {
callback() callback();
}
} }
};
var validatePass2 = (rule, value, callback) => { var validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === "") {
callback(new Error('请再次输入密码')); callback(new Error("请再次输入密码"));
} else if (value !== this.registerForm.password) { } else if (value !== this.registerForm.password) {
callback(new Error('两次输入密码不一致!')); callback(new Error("两次输入密码不一致!"));
} else { } else {
callback(); callback();
} }
}; };
return { return {
roles:[{ roles: [
{
value: 1, value: 1,
label: this.$t('common.personal') label: this.$t("common.personal"),
}, },
{ {
value: 2, value: 2,
label: this.$t('common.enterprise') label: this.$t("common.enterprise"),
}], },
],
registerForm: { registerForm: {
roleIds:[1], roleIds: [1],
account: '', account: "",
password: '' password: "",
}, },
registerFormRules: { //登录框验证规则 registerFormRules: {
//登录框验证规则
account: [ account: [
{ required: true, message: '请输入帐号', trigger: 'blur' }, { required: true, message: "请输入帐号", trigger: "blur" },
{ min: 2, max: 12, message: '请输入正确的帐号', trigger: 'blur' } { min: 2, max: 12, message: "请输入正确的帐号", trigger: "blur" },
], ],
email:[ email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']} {
], type: "email",
phone:[ message: "请输入正确的邮箱地址",
{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur'}, trigger: ["blur", "change"],
},
], ],
password:[ phone: [
{ required: true, message: '请输入密码', trigger: 'blur' }, {
min: 11,
max: 11,
message: "请输入正确的手机号码",
trigger: "blur",
},
], ],
password2:[ password: [{ required: true, message: "请输入密码", trigger: "blur" }],
{ validator: validatePass2, trigger: 'blur' }, password2: [{ validator: validatePass2, trigger: "blur" }],
]
}, },
loading: false, loading: false,
pwdType: 'password' pwdType: "password",
} };
}, },
methods: { methods: {
validatePass3(rule, value, callback) { validatePass3(rule, value, callback) {
if (value === '') { if (value === "") {
callback(new Error('请再次输入密码')); callback(new Error("请再次输入密码"));
} else if (value !== this.registerForm.password) { } else if (value !== this.registerForm.password) {
callback(new Error('两次输入密码不一致!')); callback(new Error("两次输入密码不一致!"));
} else { } else {
callback(); callback();
} }
}, },
showPwd() { showPwd() {
if (this.pwdType === 'password') { if (this.pwdType === "password") {
this.pwdType = '' this.pwdType = "";
} else { } else {
this.pwdType = 'password' this.pwdType = "password";
} }
}, },
handleRegister() { handleRegister() {
this.$refs.registerForm.validate(valid => { this.$refs.registerForm.validate((valid) => {
if (valid) { if (valid) {
this.registerForm.phone = this.registerForm.account this.registerForm.phone = this.registerForm.account;
userRegister(this.registerForm).then((res) => { userRegister(this.registerForm).then((res) => {
this.$message({ this.$message({
message: '注册成功', message: "注册成功",
type: 'success' type: "success",
}); });
this.$router.push({path: '/login'}) this.$router.push({ path: "/login" });
}); });
}
})
} }
});
},
}, },
mounted() { mounted() {
new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }); // new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' });
} },
} };
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.container {
.container {
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%); //background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -203,7 +313,7 @@ export default { ...@@ -203,7 +313,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
//background: url('../../assets/images/bg.png') no-repeat center / cover; //background: url('../../assets/images/bg.png') no-repeat center / cover;
.welcome{ .welcome {
text-align: -webkit-center; text-align: -webkit-center;
//position: absolute; //position: absolute;
//left: 26%; //left: 26%;
...@@ -215,7 +325,6 @@ export default { ...@@ -215,7 +325,6 @@ export default {
//position: absolute; //position: absolute;
font: bold 30px "microsoft yahei"; font: bold 30px "microsoft yahei";
white-space: nowrap; white-space: nowrap;
} }
.trademark { .trademark {
vertical-align: top; vertical-align: top;
...@@ -223,16 +332,15 @@ export default { ...@@ -223,16 +332,15 @@ export default {
padding: 3px; padding: 3px;
// color: #606266 // color: #606266
} }
.system-title{ .system-title {
//color: #606266 //color: #606266
} }
.system-name{ .system-name {
//color: #606266 //color: #606266
} }
} }
.my-card { .my-card {
background-color: hsla(0, 0%, 100%, 0.2);
background-color: hsla(0,0%,100%,0.2);
width: 80%; width: 80%;
height: 60%; height: 60%;
position: absolute; position: absolute;
...@@ -248,80 +356,82 @@ export default { ...@@ -248,80 +356,82 @@ export default {
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
margin: 0 auto 20px; margin: 0 auto 20px;
} }
.login-title{ // .login-title {
height: 40px; // height: 40px;
line-height: 40px; // line-height: 40px;
font-size: 20px; // font-size: 20px;
color: #fff; // color: #fff;
text-align: center; // text-align: center;
} // }
span{ span {
padding-left: 10px; padding-left: 10px;
} }
.el-input{ .el-input {
width: 300px; width: 300px;
padding-left: 10px; padding-left: 10px;
} }
} }
} }
.lbs-logo{ .lbs-logo {
width: 300px; width: 300px;
height: 190px; height: 190px;
}
.login-icon {
color: #fff
}
.el-button--text{
color: #fff
} }
.login-center{ .login-icon {
color: #fff;
}
.el-button--text {
color: #fff;
}
.login-center {
text-align: center; text-align: center;
.el-form-item__label{ .el-form-item__label {
color: #fff color: #fff;
} }
.el-radio__label{ .el-radio__label {
color: #fff color: #fff;
} }
} }
.login-right{ .login-right {
padding: 26px; height: 100%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.bg-purple { .bg-purple {
//position: absolute; //position: absolute;
background: #409EFF; background: #409eff;
height: 600px; height: 600px;
padding: 16px; padding: 16px;
} }
.bg-purple2 { .bg-purple2 {
//background: #cccccc; //background: #cccccc;
} }
.login-center .el-card__body{ .login-center .el-card__body {
padding: 0px padding: 0px;
} }
.login-phone{ .login-phone {
font-size: 12px; font-size: 12px;
float:left; float: left;
bottom: 0; bottom: 0;
position: fixed; position: fixed;
}
} .set-language {
.set-language{
float: right; float: right;
//color: #409EFF; //color: #409EFF;
} }
.register-type{ .register-type {
margin-bottom: 10px; margin-bottom: 10px;
} }
.material-input__component{ .material-input__component {
background-color:transparent!important; background-color: transparent !important;
margin-top: 16px!important; margin-top: 16px !important;
}
} .material-input__component .material-label {
.material-input__component .material-label{ color: #ffffff !important;
color: #ffffff!important; }
} .material-input__component .material-input {
.material-input__component .material-input{ color: #ffffff !important;
color: #ffffff!important; }
}
</style> </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