refactor[login]: refactor login page style

This commit is contained in:
Pan 2018-12-24 17:51:05 +08:00
parent 90ee05df93
commit afdb893dcd

View file

@ -39,19 +39,21 @@
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
<div class="tips">
<span>{{ $t('login.username') }} : admin</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<div class="tips">
<span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<div style="position:relative">
<div class="tips">
<span>{{ $t('login.username') }} : admin</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<div class="tips">
<span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
</div>
</el-form>
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
{{ $t('login.thirdpartyTips') }}
<br>
<br>
@ -213,18 +215,17 @@ $dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
position: fixed;
height: 100%;
min-height: 100%;
width: 100%;
background-color: $bg;
overflow: hidden;
.login-form {
position: absolute;
left: 0;
right: 0;
position: relative;
width: 520px;
max-width: 100%;
padding: 35px 35px 15px 35px;
margin: 120px auto;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;
}
.tips {
font-size: 14px;
@ -270,8 +271,8 @@ $light_gray:#eee;
}
.thirdparty-button {
position: absolute;
right: 35px;
bottom: 28px;
right: 0;
bottom: 6px;
}
}
</style>