|
|
@@ -1,19 +1,15 @@ |
|
|
|
<template> |
|
|
|
<div class="page"> |
|
|
|
<div class="logoBox" @click="go('/')"> |
|
|
|
<img src="../../assets/img/LOGO1.png" alt class="logo" /> |
|
|
|
<img src="../../assets/img/logoh.png" alt class="logo" /> |
|
|
|
<!-- <div class="logoTitle">metavatar</div> --> |
|
|
|
</div> |
|
|
|
<div class="loginBox"> |
|
|
|
<div class="welcome">欢迎加入metAvatar</div> |
|
|
|
<div class="welcome">登录邃芒</div> |
|
|
|
<el-form ref="form" :rules="rules" :model="form"> |
|
|
|
<el-form-item class="phone" prop="phone"> |
|
|
|
<el-input |
|
|
|
class="phoneInput" |
|
|
|
v-model="form.phone" |
|
|
|
:placeholder="characters == 1 ? '请输入手机号' : 'Phone'" |
|
|
|
clearable |
|
|
|
></el-input> |
|
|
|
<el-input class="phoneInput" v-model="form.phone"></el-input> |
|
|
|
<div class="inputPhone">请输入手机号</div> |
|
|
|
<el-button class="getCode" type="text" @click="getCode">{{ |
|
|
|
codeInfo |
|
|
|
}}</el-button> |
|
|
@@ -23,12 +19,12 @@ |
|
|
|
class="codeInput" |
|
|
|
v-model="form.code" |
|
|
|
maxlength="10" |
|
|
|
:placeholder="characters == 1 ? '请输入验证码' : 'Name'" |
|
|
|
clearable |
|
|
|
></el-input> |
|
|
|
<div class="inputCode">请输入短信验证码</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="submitBtn" @click="login">登录(注册)</el-button> |
|
|
|
<button class="submitBtn" @click.native="login">登录/注册</button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
@@ -166,41 +162,78 @@ export default { |
|
|
|
// margin-top: 10px; |
|
|
|
margin-left: 5px; |
|
|
|
margin-top: 10px; |
|
|
|
float: left; |
|
|
|
margin-bottom: 15px; |
|
|
|
overflow: hidden; |
|
|
|
cursor: pointer; |
|
|
|
text-align: center; |
|
|
|
.logo { |
|
|
|
float: left; |
|
|
|
width: 140px; |
|
|
|
height: 40px; |
|
|
|
width: 240px; |
|
|
|
height: 70px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loginBox { |
|
|
|
height: 500px; |
|
|
|
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); |
|
|
|
// background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); |
|
|
|
margin: auto; |
|
|
|
text-align: center; |
|
|
|
padding-top: 100px; |
|
|
|
padding-left: 30px; |
|
|
|
padding-right: 30px; |
|
|
|
.welcome { |
|
|
|
font-size: 26px; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 25px; |
|
|
|
font-size: 18px; |
|
|
|
color: #000; |
|
|
|
font-weight: 600; |
|
|
|
margin-bottom: 40px; |
|
|
|
} |
|
|
|
.phoneInput { |
|
|
|
.phone { |
|
|
|
position: relative; |
|
|
|
margin-bottom: 25px; |
|
|
|
|
|
|
|
.inputPhone { |
|
|
|
position: absolute; |
|
|
|
background-color: #fff; |
|
|
|
top: -5px; |
|
|
|
left: 12px; |
|
|
|
font-size: 12px; |
|
|
|
height: 10px; |
|
|
|
line-height: 10px; |
|
|
|
color: #0068b7; |
|
|
|
} |
|
|
|
.getCode { |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
color: #0068b7; |
|
|
|
} |
|
|
|
} |
|
|
|
.getCode { |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
.code { |
|
|
|
position: relative; |
|
|
|
.inputCode { |
|
|
|
position: absolute; |
|
|
|
background-color: #fff; |
|
|
|
top: -5px; |
|
|
|
left: 12px; |
|
|
|
font-size: 12px; |
|
|
|
height: 10px; |
|
|
|
line-height: 10px; |
|
|
|
color: #0068b7; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.submitBtn { |
|
|
|
background: linear-gradient(140deg, #1ec2ae, #6e60e9, #2867d4); |
|
|
|
border: none; |
|
|
|
position: relative; |
|
|
|
right: 10px; |
|
|
|
float: right; |
|
|
|
color: #fff; |
|
|
|
font-size: 15px; |
|
|
|
line-height: 15px; |
|
|
|
border: none; |
|
|
|
padding: 9px; |
|
|
|
background-color: #0068b7; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/deep/ .el-input__inner { |
|
|
|
border: 1px solid #0068b7; |
|
|
|
} |
|
|
|
</style> |