首页初始化
This commit is contained in:
熊丽君
@ -1,6 +1,25 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
home
|
||||
<div class="index_page">
|
||||
<el-container>
|
||||
<div class="img_box">
|
||||
<img src="@/assets/image/toubu.png" alt="" />
|
||||
</div>
|
||||
<!-- 整体宽度 -->
|
||||
<div class="content">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<div class="login">
|
||||
<el-button type="text" @click="aaa">登录</el-button>
|
||||
<i class="mark">|</i>
|
||||
<el-button type="text" @click="aaa">注册</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-footer>
|
||||
<el-button >登录</el-button>
|
||||
<el-button v-for="item in 30" :key="item">注册</el-button>
|
||||
</el-footer> -->
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -10,11 +29,45 @@ export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
aaa() {
|
||||
this.$router.push({ path: '/login' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index_page {
|
||||
padding-top: 200px;
|
||||
.img_box {
|
||||
width: 100%;
|
||||
height: 750px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 206px;
|
||||
background-image: url(../assets/image/01.png);
|
||||
.login {
|
||||
text-align: right;
|
||||
padding-right: 100px;
|
||||
.el-button {
|
||||
font-size: 16px;
|
||||
color: #4097e7;
|
||||
}
|
||||
.mark {
|
||||
width: 1px;
|
||||
color: #dcdcdc;
|
||||
margin: 0 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="login-title">
|
||||
<!-- <img src="../assets/image/logo.png" alt="" /> -->
|
||||
<!-- <span>嘉策服务平台</span> -->
|
||||
</div>
|
||||
<el-form
|
||||
<!-- <div class="login-title">
|
||||
<img src="../assets/image/logo.png" alt="" />
|
||||
<span>嘉策服务平台</span>
|
||||
</div> -->
|
||||
<!-- <el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
@ -60,8 +60,109 @@
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-form> -->
|
||||
<!-- <div class="login-form-bg"></div> -->
|
||||
<div class="my-box">
|
||||
<div class="my-left">
|
||||
<div class="bg-img">
|
||||
<img src="@/assets/login.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-right">
|
||||
<div style="min-width:360px;max-width:360px;padding-bottom: 55px;">
|
||||
<div class="m-title">欢迎登录</div>
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
auto-complete="on"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="手机号"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password" v-if="mode">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
placeholder="密码"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" class="code-input" v-if="!mode">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="validCode"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<el-button @click="getCode" type="primary" :disabled="!show">
|
||||
获取验证码
|
||||
<span v-show="!show" class="count">({{ count }}s)</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div
|
||||
class="check-box"
|
||||
:class="mode ? '' : 'flex-end'"
|
||||
style="padding:0 0 15px"
|
||||
>
|
||||
<el-checkbox v-if="mode">记住密码</el-checkbox>
|
||||
<el-button type="text" @click="mode = false" v-if="mode"
|
||||
>验证码登录</el-button
|
||||
>
|
||||
<el-button type="text" @click="mode = true" v-else
|
||||
>密码登录</el-button
|
||||
>
|
||||
</div>
|
||||
<el-button
|
||||
id="login_btn"
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
style="width:100%"
|
||||
@click.native.prevent="handleLogin"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form>
|
||||
<el-checkbox style="padding:15px 0 0"
|
||||
>我已阅读并同意<el-button type="text"
|
||||
>《用户协议》</el-button
|
||||
></el-checkbox
|
||||
>
|
||||
<div style="color:#666;font-size:16px">
|
||||
新用户通过手机验证码登录自动注册账号
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
<!-- <div class="el-login-footer">
|
||||
<span>版权所有：嘉策</span>
|
||||
@ -72,11 +173,17 @@
|
||||
<script>
|
||||
import Cookies from 'js-cookie';
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt';
|
||||
import { getAuthCode } from '@/api/login';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
mode: true,
|
||||
TIME_COUNT: 60,
|
||||
show: true,
|
||||
count: '', // 初始化次数
|
||||
timer: null,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
@ -115,6 +222,28 @@ export default {
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
getCode() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
if (!this.timer) {
|
||||
this.count = this.TIME_COUNT;
|
||||
this.show = false;
|
||||
getAuthCode({ phone: this.loginForm.username }).then(res => {
|
||||
console.log(res);
|
||||
this.timer = setInterval(() => {
|
||||
if (this.count > 0 && this.count <= this.TIME_COUNT) {
|
||||
this.count--;
|
||||
} else {
|
||||
this.show = true;
|
||||
clearInterval(this.timer); // 清除定时器
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
@ -132,14 +261,26 @@ export default {
|
||||
Cookies.remove('password');
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store
|
||||
.dispatch('Login', this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/' });
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
if (this.mode) {
|
||||
this.$store
|
||||
.dispatch('Login', this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/' });
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
this.$store
|
||||
.dispatch('Register', this.loginForm)
|
||||
.then(() => {
|
||||
// this.$router.push({ path: this.redirect || '/' });
|
||||
this.$router.go(-1);
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -186,35 +327,35 @@ $loginForm: 383px;
|
||||
.col {
|
||||
color: #209cff;
|
||||
}
|
||||
.login-form {
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
width: 520px;
|
||||
min-height: $loginForm;
|
||||
padding: 20px;
|
||||
padding-top: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9;
|
||||
// bottom: 0;
|
||||
// margin: auto;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.login-info {
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
// .login-form {
|
||||
// border-radius: 10px;
|
||||
// background: #ffffff;
|
||||
// width: 520px;
|
||||
// min-height: $loginForm;
|
||||
// padding: 20px;
|
||||
// padding-top: 10px;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// z-index: 9;
|
||||
// // bottom: 0;
|
||||
// // margin: auto;
|
||||
// .el-input {
|
||||
// height: 38px;
|
||||
// input {
|
||||
// height: 38px;
|
||||
// }
|
||||
// }
|
||||
// .input-icon {
|
||||
// height: 39px;
|
||||
// width: 14px;
|
||||
// margin-left: 2px;
|
||||
// }
|
||||
// .login-info {
|
||||
// padding: 0 100px;
|
||||
// }
|
||||
// }
|
||||
.login-form-bg {
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
@ -232,13 +373,7 @@ $loginForm: 383px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
@ -255,6 +390,65 @@ $loginForm: 383px;
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
.my-box {
|
||||
min-height: 454px;
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.my-left {
|
||||
min-width: 500px;
|
||||
.bg-img {
|
||||
height: 100%;
|
||||
background-color: #3494ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 405px;
|
||||
height: 325px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-right {
|
||||
min-width: 550px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.m-title {
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 55px auto 45px;
|
||||
}
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.check-box {
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
// .code-input {
|
||||
// .el-form-item__content {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
<style>
|
||||
.el-input__prefix {
|
||||
|
||||
Reference in New Issue
Block a user