| @@ -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> | |||