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