|
|
@@ -1,103 +1,138 @@
|
|
|
<template>
|
|
|
- <div class="container" :style="{ backgroundImage: 'url(' + require('../assets/bg_login.jpg') + ')' }">
|
|
|
- <transition :name="`slide-${register ? 'in' : 'out'}`">
|
|
|
- <div class="login-wrapper" @keyup.enter="doRegister" v-if="register" key="register">
|
|
|
- <el-page-header @back="register = false" title="登录" style="width: 350px; line-height: 60px">
|
|
|
- <!-- <div class="register-title" slot="content">注册账号</div> -->
|
|
|
- </el-page-header>
|
|
|
-
|
|
|
- <el-form :model="registerInfo" style="width: 350px" ref="registerForm">
|
|
|
- <el-form-item prop="username" :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }">
|
|
|
- <el-input v-model="registerInfo.username" placeholder="用户名"> </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="password" :rules="{ required: true, message: '请输入密码', trigger: 'blur' }">
|
|
|
- <el-input v-model="registerInfo.password" placeholder="密码" type="password"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button :loading="loading" @click="doRegister" type="primary" style="width: 100%">
|
|
|
- 注册
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="container">
|
|
|
+ <img src="../assets/png-diwen.png" alt="" class="bg1" />
|
|
|
+ <div class="login-box">
|
|
|
+ <div class="login-img">
|
|
|
+ <img src="../assets/logo.png" alt="" class="logo" />
|
|
|
+ <img src="../assets/png-denglv.png" alt="" class="bg2" />
|
|
|
</div>
|
|
|
- <div class="login-wrapper" @keyup.enter="login" v-else key="login">
|
|
|
- <div class="title">欢迎登录</div>
|
|
|
- <el-tabs v-model="activeName" stretch class="tab-list">
|
|
|
- <el-tab-pane label="用户名登陆" name="first">
|
|
|
- <el-form :model="userInfo" style="width: 350px" ref="form">
|
|
|
- <el-form-item
|
|
|
- prop="username"
|
|
|
- :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }"
|
|
|
- >
|
|
|
- <el-input v-model="userInfo.username" placeholder="用户名"> </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- prop="password"
|
|
|
- :rules="{ required: true, message: '请输入密码', trigger: 'blur' }"
|
|
|
- >
|
|
|
- <el-input v-model="userInfo.password" placeholder="密码" type="password"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button :loading="loading" @click="login" type="primary" style="width: 100%"
|
|
|
- >登录
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item>
|
|
|
- <el-button :loading="loading"
|
|
|
- @click="phonelogin" type="primary"
|
|
|
- style="width: 100%;">手机登录</el-button>
|
|
|
- </el-form-item> -->
|
|
|
- <el-form-item label="">
|
|
|
- <el-checkbox v-model="rememberMe">7天内免登录 </el-checkbox>
|
|
|
- <el-button type="text" style="float: right" @click="register = true"
|
|
|
- >注册账号
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="验证码登陆" name="second">
|
|
|
- <el-form :model="userInfo" style="width: 350px" ref="form2">
|
|
|
- <el-form-item
|
|
|
- prop="phone"
|
|
|
- :rules="{ required: true, message: '请输入手机号', trigger: 'blur' }"
|
|
|
+ <transition :name="`slide-${register ? 'in' : 'out'}`">
|
|
|
+ <div class="login-wrapper" @keyup.enter="doRegister" v-if="register" key="register">
|
|
|
+ <el-page-header @back="register = false" title="登录" style="width: 350px; line-height: 60px;">
|
|
|
+ <!-- <div class="register-title" slot="content">注册账号</div> -->
|
|
|
+ </el-page-header>
|
|
|
+
|
|
|
+ <el-form :model="registerInfo" style="width: 350px;" ref="registerForm">
|
|
|
+ <el-form-item
|
|
|
+ prop="username"
|
|
|
+ :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }"
|
|
|
+ >
|
|
|
+ <el-input v-model="registerInfo.username" placeholder="用户名"> </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="password"
|
|
|
+ :rules="{ required: true, message: '请输入密码', trigger: 'blur' }"
|
|
|
+ >
|
|
|
+ <el-input v-model="registerInfo.password" placeholder="密码" type="password"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="loading" @click="doRegister" type="primary" style="width: 100%;">
|
|
|
+ 注册
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="login-wrapper" @keyup.enter="login" v-else key="login">
|
|
|
+ <div class="title">{{ (activeName === 'first' ? '用户名' : '短信验证码') }}登录</div>
|
|
|
+ <el-form
|
|
|
+ size="normal"
|
|
|
+ v-if="activeName === 'first'"
|
|
|
+ :model="userInfo"
|
|
|
+ style="width: 350px;"
|
|
|
+ ref="form"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ prop="username"
|
|
|
+ :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }"
|
|
|
+ >
|
|
|
+ <el-input v-model="userInfo.username" placeholder="用户名">
|
|
|
+ <template #prefix>
|
|
|
+ <img class="input-icon" src="../assets/login_icon_zhanghao.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="password"
|
|
|
+ :rules="{ required: true, message: '请输入密码', trigger: 'blur' }"
|
|
|
+ >
|
|
|
+ <el-input v-model="userInfo.password" placeholder="密码" type="password">
|
|
|
+ <template #prefix>
|
|
|
+ <img class="input-icon" src="../assets/login_icon_mima.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" style="margin-bottom: 60px;">
|
|
|
+ <el-checkbox v-model="rememberMe">7天内免登录 </el-checkbox>
|
|
|
+ <!-- <el-button type="text" style="float: right;" @click="register = true">注册账号 </el-button> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="loading" @click="login" type="primary" style="width: 100%;"
|
|
|
+ >登录
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ @click="activeName = 'second'"
|
|
|
+ type="info"
|
|
|
+ style="width: 100%;"
|
|
|
+ >短信验证码登录</el-button
|
|
|
>
|
|
|
- <el-input v-model="userInfo.phone" name="phone" placeholder="手机号"> </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="code" :rules="{ required: true, message: '验证码', trigger: 'blur' }">
|
|
|
- <div class="code">
|
|
|
- <el-input v-model="userInfo.code" placeholder="请输入验证码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form v-else size="normal" :model="userInfo" style="width: 350px;" ref="form2">
|
|
|
+ <el-form-item
|
|
|
+ prop="phone"
|
|
|
+ :rules="{ required: true, message: '请输入手机号', trigger: 'blur' }"
|
|
|
+ >
|
|
|
+ <el-input v-model="userInfo.phone" name="phone" placeholder="手机号">
|
|
|
+ <template #prefix>
|
|
|
+ <img class="input-icon" src="../assets/login_icon_zhanghao.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code" :rules="{ required: true, message: '验证码', trigger: 'blur' }">
|
|
|
+ <div class="code">
|
|
|
+ <el-input v-model="userInfo.code" placeholder="请输入验证码">
|
|
|
+ <template #prefix>
|
|
|
+ <img class="input-icon" src="../assets/login_icon_yanzhengma.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
|
|
|
- <el-button
|
|
|
- :loading="sending"
|
|
|
- @click="sendMsg"
|
|
|
- type="primary"
|
|
|
- :disabled="time !== 0"
|
|
|
- >
|
|
|
- {{ time === 0 ? '发送验证码' : `重新发送（${time}s）` }}
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item>
|
|
|
+ <el-button
|
|
|
+ :loading="sending"
|
|
|
+ class="code"
|
|
|
+ @click="sendMsg"
|
|
|
+ type="primary"
|
|
|
+ :disabled="time !== 0"
|
|
|
+ >
|
|
|
+ {{ time === 0 ? '发送验证码' : `重新发送（${time}s）` }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" style="margin-bottom: 60px;">
|
|
|
+ <el-checkbox v-model="rememberMe">7天内免登录 </el-checkbox>
|
|
|
+ <!-- <el-button type="text" style="float: right;" @click="register = true">注册账号 </el-button> -->
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item>
|
|
|
<el-button :loading="loading" @click="login"
|
|
|
type="primary" style="width: 100%;">登录
|
|
|
</el-button>
|
|
|
</el-form-item> -->
|
|
|
- <el-form-item>
|
|
|
- <el-button :loading="loading" @click="phonelogin" type="primary" style="width: 100%"
|
|
|
- >手机登录</el-button
|
|
|
- >
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="">
|
|
|
- <el-checkbox v-model="rememberMe">7天内免登录 </el-checkbox>
|
|
|
- <el-button type="text" style="float: right" @click="register = true"
|
|
|
- >注册账号
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="loading" @click="phonelogin" type="primary" style="width: 100%;"
|
|
|
+ >登录</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="loading" @click="activeName = 'first'" type="info" style="width: 100%;"
|
|
|
+ >用户名登录</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -238,33 +273,82 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- background-color: #ebebeb;
|
|
|
- background-image: url('https://microball.oss-cn-hangzhou.aliyuncs.com/izouma/application/rawpixel-com-565462-unsplash%20%281%29.jpg');
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: relative;
|
|
|
+ background: linear-gradient(135deg, #19b668 0%, #119856 100%);
|
|
|
overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
}
|
|
|
+.el-input {
|
|
|
+ height: 50px;
|
|
|
+ .input-icon {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ /deep/ .el-input__prefix {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ border: none;
|
|
|
+ box-shadow: inset 0px -1px 0px 0px #f2f3f5;
|
|
|
+ padding-left: 56px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.bg1 {
|
|
|
+ position: absolute;
|
|
|
+ width: 50%;
|
|
|
+ display: block;
|
|
|
+ height: auto;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+.login-box {
|
|
|
+ display: flex;
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ width: 960px;
|
|
|
+ height: 480px;
|
|
|
+ z-index: 1;
|
|
|
+ position: relative;
|
|
|
+ .login-img {
|
|
|
+ padding: 0 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .logo {
|
|
|
+ width: 140px;
|
|
|
+ height: 34px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .bg2 {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.login-wrapper {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 5px;
|
|
|
- background: white;
|
|
|
- border: 1px #eaeaea solid;
|
|
|
- position: absolute;
|
|
|
- right: 100px;
|
|
|
- top: 100px;
|
|
|
- width: 400px;
|
|
|
+ // justify-content: center;
|
|
|
+ width: 50%;
|
|
|
+ // position: absolute;
|
|
|
+ // right: 100px;
|
|
|
+ // top: 100px;
|
|
|
|
|
|
.title {
|
|
|
- color: #20a0ff;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #292c33;
|
|
|
+ line-height: 28px;
|
|
|
font-weight: bold;
|
|
|
width: 350px;
|
|
|
- line-height: 60px;
|
|
|
+ padding: 30px 0 45px;
|
|
|
}
|
|
|
.register-title {
|
|
|
color: #20a0ff;
|
|
|
@@ -319,4 +403,36 @@ export default {
|
|
|
min-width: 120px;
|
|
|
}
|
|
|
}
|
|
|
+/deep/.el-button--primary {
|
|
|
+ background: #3ab200;
|
|
|
+ border-color: #3ab200;
|
|
|
+}
|
|
|
+/deep/.el-button--info {
|
|
|
+ background: #f2f3f5;
|
|
|
+ color: #292c33;
|
|
|
+ border-color: #f2f3f5;
|
|
|
+}
|
|
|
+/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
|
|
|
+ background: #000000;
|
|
|
+ border-color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-checkbox__input.is-focus .el-checkbox__inner {
|
|
|
+ border-color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/input:-webkit-autofill {
|
|
|
+ box-shadow: 0 0 0px 1000px #ffffff inset;
|
|
|
+ -webkit-text-fill-color: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.code {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #3ab200;
|
|
|
+ border-width: 0;
|
|
|
+}
|
|
|
</style>
|
