zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor[login]: refactor login page style

This commit is contained in:
Pan 2018-12-24 17:51:05 +08:00
parent a92151d048
commit 3a2da6afd3
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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