Kaynağa Gözat

登录页样式

release
HolyKnightIX 2 yıl önce
ebeveyn
işleme
a439401ef9
1 değiştirilmiş dosya ile 58 ekleme ve 25 silme
  1. +58
    -25
      src/views/login/login.vue

+ 58
- 25
src/views/login/login.vue Dosyayı Görüntüle

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

Yükleniyor…
İptal
Kaydet