huoran
/
FE_middlePlatform_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

开发者登录

Browse Source
dev_202303 V2.4.4
yujialong 2 years ago
parent 7da95181e1
commit cc885752ad
3 changed files with 88 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/logo-white.png
  2. 2
      src/router/index.js
  3. 191
      src/views/devLogin.vue

BIN
src/assets/img/logo-white.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

2
src/router/index.js
Unescape View File

@ -245,7 +245,7 @@ router.beforeEach(function(to, from, next) {
// 根据路由元信息设置文档标题
window.document.title = to.meta.title || '中台';
//使用钩子函数对路由进行权限跳转
const login = location.href.includes('dev.huorantech.cn') ? '/devLogin' : '/login'
const login = location.href.includes('192.168.31.126:') ? '/devLogin' : '/login'
if (!sessionStorage.getItem('token') && to.path !== login && to.path !== '/join' && to.path !== '/success') {
next(login);
} else {

191
src/views/devLogin.vue
Unescape View File

@ -1,74 +1,65 @@
<template>
<div class="wrap">
<div class="header">
<div class="logo">
<img src="../assets/img/logo.png">
</div>
</div>
<img class="logo" width="200" src="../assets/img/logo-white.png">
<div class="login">
<div class="form">
<ul class="tab">
<li v-for="(item, i) in tabList" :key="i" :class="{active: activeIndex == item.id}" @click="handleSelect(item.id)">{{item.label}}</li>
</ul>
<el-form v-show="activeIndex==='1'" :model="param" :rules="rules" ref="login" label-width="0px">
<el-form-item prop="account">
<el-input @blur="blur" v-model="param.account" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
placeholder="请输入密码"
v-model="param.password"
>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="showVerify">
<el-input
placeholder="请输入验证码"
v-model="param.code"
@keyup.enter.native="submitForm()"
>
</el-input>
<img @click="blur" :src="verificationIMG" class="verification" alt="">
</el-form-item>
<div style="width:100%;display:flex;justify-content: flex-end;">
<el-button type="text" class="forget">忘记密码?</el-button>
</div>
<div class="login-btn">
<el-button type="primary" @click="submitForm()">马上登录</el-button>
</div>
</el-form>
<div class="box">
<h1>欢迎使用开发者平台</h1>
<div class="form">
<ul class="tab">
<li v-for="(item, i) in tabList" :key="i" :class="{active: activeIndex == item.id}" @click="handleSelect(item.id)">{{item.label}}</li>
</ul>
<el-form v-show="activeIndex==='1'" :model="param" :rules="rules" ref="login" label-width="0px">
<el-form-item prop="account">
<el-input @blur="blur" v-model="param.account" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
placeholder="请输入密码"
v-model="param.password"
>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="showVerify">
<el-input
placeholder="请输入验证码"
v-model="param.code"
@keyup.enter.native="submitForm()"
>
</el-input>
<img @click="blur" :src="verificationIMG" class="verification" alt="">
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm()">马上登录</el-button>
</div>
</el-form>
<el-form v-show="activeIndex==='2'" :model="phoneOrEmail" :rules="phoneOrEmailrules" ref="phoneOrEmail" label-width="0px">
<el-form-item prop="account">
<el-input @blur="phoneBlur" v-model="phoneOrEmail.account" placeholder="请输入电话/邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
placeholder="请输入密码"
v-model="phoneOrEmail.password"
>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="showPhoneVerify">
<el-input
placeholder="请输入验证码"
v-model="phoneOrEmail.code"
@keyup.enter.native="submitForm('phone')"
>
</el-input>
<img @click="phoneBlur" :src="PhoneVerificationIMG" class="verification" alt="">
</el-form-item>
<div style="width:100%;display:flex;justify-content: flex-end;">
<el-button type="text" class="forget">忘记密码?</el-button>
</div>
<div class="login-btn">
<el-button type="primary" @click="submitForm('phone')">马上登录</el-button>
</div>
</el-form>
<el-form v-show="activeIndex==='2'" :model="phoneOrEmail" :rules="phoneOrEmailrules" ref="phoneOrEmail" label-width="0px">
<el-form-item prop="account">
<el-input @blur="phoneBlur" v-model="phoneOrEmail.account" placeholder="请输入电话/邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
placeholder="请输入密码"
v-model="phoneOrEmail.password"
>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="showPhoneVerify">
<el-input
placeholder="请输入验证码"
v-model="phoneOrEmail.code"
@keyup.enter.native="submitForm('phone')"
>
</el-input>
<img @click="phoneBlur" :src="PhoneVerificationIMG" class="verification" alt="">
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('phone')">马上登录</el-button>
</div>
</el-form>
</div>
</div>
</div>
<el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="576px">
@ -314,22 +305,37 @@ export default {
.wrap {
min-height: 100%;
}
.logo {
z-index: 2;
position: absolute;
top: 50px;
left: 50px;
}
.login {
position: relative;
height: calc(100vh - 144px);
height: 100%;
background-image: url(../assets/img/devLogin.jpg);
background-size: 100%;
}
.box {
width: 448px;
position: absolute;
right: 20%;
top: 50%;
transform: translateY(-50%);
h1 {
margin-bottom: 20px;
font-size: 34px;
color: #fff;
text-align: center;
}
}
/deep/ .form {
width: 448px;
position: absolute;
right: 20%;
top: 50%;
padding: 20px 40px 0;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, .85);
padding: 20px 60px 0;
background-color: rgba(255, 255, 255, .3);
border-radius: 4px;
box-sizing: border-box;
border: 4px solid rgba(255, 255, 255, .2);
.el-input__inner {
height: 50px;
line-height: 50px;
@ -357,15 +363,16 @@ export default {
padding: 18px 5px;
margin: 0 20px;
font-size: 16px;
color: #555;
font-weight: 600;
color: #fff;
cursor: pointer;
border-bottom: 2px solid transparent;
&:last-child{
margin-right: 0;
}
&.active{
color: #9076FF;
border-bottom-color: #9076FF;
color: #fff;
border-bottom-color: #ccc;
}
}
}
@ -382,8 +389,9 @@ export default {
height: 48px;
margin-bottom: 50px;
font-weight: bold;
background: #9076FF;
background: #1dabff;
border-radius: 4px;
border: 0;
}
.forget{
margin-bottom: 28px;
@ -394,29 +402,4 @@ export default {
color: #0092FF;
}
}
/* 头部 */
.header{
height: 60px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
}
.logo{
width: 171px;
height: 40px;
margin-left: 20px;
}
img{
width: 100%;
height: 100%;
}
.tips {
margin: -20px 0 20px 5px;
font-size: 14px;
text-align: center;
color: #666;
}
</style>
Write Preview
Loading…
Cancel
Save