style: 登录页面表单居中问题

This commit is contained in:
Captain.B 2021-07-03 12:12:50 +08:00 committed by 刘瑞斌
parent e0bd4a6e61
commit de0f345825
1 changed files with 24 additions and 14 deletions

View File

@ -2,17 +2,15 @@
<div class="container" v-if="ready"> <div class="container" v-if="ready">
<el-row type="flex"> <el-row type="flex">
<el-col :span="12"> <el-col :span="12">
<div class="title">
<div class="title-img">
<img :src="'/display/file/loginLogo'" alt="">
</div>
<div class="welcome">
<span>{{ loginTitle }}</span>
</div>
</div>
<div class="content"> <div class="content">
<div class="title">
<div class="title-img">
<img :src="'/display/file/loginLogo'" alt="">
</div>
<div class="welcome">
<span>{{ loginTitle }}</span>
</div>
</div>
<div class="form"> <div class="form">
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item v-slot:default> <el-form-item v-slot:default>
@ -29,7 +27,8 @@
autocomplete="off"/> autocomplete="off"/>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="form.password" :placeholder="$t('commons.password')" show-password autocomplete="off" <el-input v-model="form.password" :placeholder="$t('commons.password')" show-password
autocomplete="off"
maxlength="30" show-word-limit/> maxlength="30" show-word-limit/>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -48,7 +47,9 @@
<div class="divider"/> <div class="divider"/>
<el-col :span="12"> <el-col :span="12">
<img class="login-image" :src="'/display/file/loginImage'" alt=""> <div class="content">
<img class="login-image" :src="'/display/file/loginImage'" alt="">
</div>
</el-col> </el-col>
</el-row> </el-row>
@ -214,11 +215,20 @@ export default {
<style scoped> <style scoped>
.container { .container {
width: 1200px; width: 1200px;
height: 810px; height: 730px;
margin: calc((100vh - 860px) / 2) auto 0; margin: 0 auto;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.content {
margin-left: 10px;
}
.el-row--flex {
height: 730px;
margin-top: calc((100vh - 800px) / 2);
}
.el-col:nth-child(3) { .el-col:nth-child(3) {
align-items: center; align-items: center;
display: flex; display: flex;