登录页样式布局修改

src/views/login/login.vue

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