Skip to content

N
NLT-e-cigarette
Commit 31326375 authored by 张伯涛's avatar 张伯涛
Browse files
Options

登录页样式布局修改

parent 60ac2267
Show whitespace changes
Inline Side-by-side
Showing with 53 additions and 51 deletions
src/views/login/login.vue
View file @ 31326375
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="companyTitle">诺兰特（北京）移动通信设备有限公司</div> <div class="companyTitle">诺兰特（北京）移动通信设备有限公司</div>
<!-- <img class="fy-logo" src="../../assets/image/denglu_logo.png">--> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">电子加热器追溯平台系统</h3> <img class="fy-logo" src="../../assets/image/loginLogo.png">
<div class="title">电子加热器追溯平台系统</div>
<div class="login-form-content"> <div class="login-form-content">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
...@@ -21,26 +21,25 @@ ...@@ -21,26 +21,25 @@
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item prop="code">--> <!-- <el-form-item prop="code">-->
<!-- <el-input--> <!-- <el-input-->
<!-- v-model="loginForm.code"--> <!-- v-model="loginForm.code"-->
<!-- auto-complete="off"--> <!-- auto-complete="off"-->
<!-- placeholder="验证码"--> <!-- placeholder="验证码"-->
<!-- style="width: 63%"--> <!-- style="width: 63%"-->
<!-- @keyup.enter.native="handleLogin"--> <!-- @keyup.enter.native="handleLogin"-->
<!-- >--> <!-- >-->
<!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />--> <!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
<!-- </el-input>--> <!-- </el-input>-->
<!-- &lt;!&ndash;<div class="login-code">--> <!-- &lt;!&ndash;<div class="login-code">-->
<!-- <img :src="codeUrl" @click="getCode">--> <!-- <img :src="codeUrl" @click="getCode">-->
<!-- </div>&ndash;&gt;--> <!-- </div>&ndash;&gt;-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item style="width:80%;margin-bottom: 20px"> <el-form-item style="width:100%;margin-bottom: 20px;text-align: center">
<el-button <el-button
class="blue-btn" class="blue-btn"
:loading="loading" :loading="loading"
size="medium" size="medium"
type="primary"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
...@@ -51,12 +50,12 @@ ...@@ -51,12 +50,12 @@
class="buttons-content" class="buttons-content"
> >
<el-checkbox v-model="loginForm.rememberMe" class="rem-code">记住密码</el-checkbox> <el-checkbox v-model="loginForm.rememberMe" class="rem-code">记住密码</el-checkbox>
<!-- <el-link--> <!-- <el-link-->
<!-- :underline="false"--> <!-- :underline="false"-->
<!-- @click="goDetail('/forgetPwd')"--> <!-- @click="goDetail('/forgetPwd')"-->
<!-- >--> <!-- >-->
<!-- <router-link to="/forgetPwd">忘记密码</router-link>--> <!-- <router-link to="/forgetPwd">忘记密码</router-link>-->
<!-- </el-link>--> <!-- </el-link>-->
</div> </div>
</div> </div>
</el-form> </el-form>
...@@ -162,8 +161,16 @@ export default { ...@@ -162,8 +161,16 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../../assets/image/login-background.jpg"); background-image: url("../../assets/image/loginBg.png");
background-size: cover; background-size: cover;
.companyTitle{
position: absolute;
left: 30px;
top: 30px;
color: white;
font-size: 17px;
font-weight: bold;
}
.el-input__prefix{ .el-input__prefix{
left: 14px; left: 14px;
} }
...@@ -177,52 +184,48 @@ export default { ...@@ -177,52 +184,48 @@ export default {
} }
.fy-logo{ .fy-logo{
position: fixed; position: fixed;
top: 20px; top: 17px;
left: 45%; left: 29%;
width: 8vw; width: 11vw;
} }
.title { .title {
margin: 7vh auto 7vh auto; margin: 10vh auto 7vh auto;
text-align: center; text-align: center;
color: black; color: white;
font-size: 36px; font-size: 30px;
} }
.login-form { .login-form {
position: absolute;
background: rgba(255,255,255,.2);
backdrop-filter: blur(4px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
border-radius: 6px; border-radius: 6px;
background: #ffffff no-repeat; //background: #ffffff no-repeat;
background-size: 59%; background-size: 59%;
background-position-y: 57px; background-position-y: 57px;
width: 78vw; width: 29vw;
height: 76vh; height: 65vh;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.companyTitle{
position: absolute;
left: 30px;
top: 30px;
color: white;
font-size: 17px;
font-weight: bold;
}
.login-form-content{ .login-form-content{
position: absolute; //position: absolute;
top: 40%; //top: 40%;
right: 28%; //right: 28%;
width: 45%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.el-form-item{ .el-form-item{
width: 80%; width: 100%;
.el-input__inner{ .el-input__inner{
border-radius: 4px; border-radius: 4px;
} }
} }
.blue-btn{ .blue-btn{
width: 36vw; background-color: #EFB239;
width: 100%;
height: 40px; height: 40px;
border-radius: 4px; border-radius: 4px;
font-size: 18px; font-size: 18px;
...@@ -268,9 +271,8 @@ export default { ...@@ -268,9 +271,8 @@ export default {
} }
.buttons-content{ .buttons-content{
display: flex; display: flex;
width: 80%; width: 51%;
justify-content: space-between; justify-content: space-between;
padding: 0 14px;
.rem-code span{ .rem-code span{
color: $font-dark; color: $font-dark;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment