优化

src/views/login.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="login">
+    <div class="title">
+      <h2>华双视频水位数据接收平台</h2>
+      <h3>Huashuang video water level data receiving platform</h3>
+    </div>
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">华双视频水位数据接收平台</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -54,10 +57,6 @@
         </div>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
- <!--   <div class="el-login-footer">
-      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
-    </div> -->
   </div>
 </template>
 
@@ -157,24 +156,36 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background: url("../assets/images/login-background.jpg") center center/cover;
-  background-size: cover;
 }
+
 .title {
-  margin: 0px auto 30px auto;
+  position: fixed;
-  text-align: center;
+  left: 26%;
-  color: #707070;
+  top: 34%;
+  color: #fff;
+  h2 {
+    font-size: 50px;
+    font-weight: 700;
+    margin: 4px -191px;
+    letter-spacing: 10px;
+  }
+  h3 {
+    font-size: 22px;
+    margin: 0 -131px;
+  }
 }
 
 .login-form {
-  border-radius: 6px;
+  position: fixed;
+  right: 140px;
+  top: calc(50% - 300px);
+  width: 375px;
+  height: 600px;
+  border-radius: 5px;
   background: #ffffff;
-  width: 400px;
+  padding: 140px 25px 5px;
-  padding: 25px 25px 5px 25px;
   .el-input {
     height: 38px;
     input {
@@ -201,19 +212,13 @@ export default {
     vertical-align: middle;
   }
 }
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
 .login-code-img {
   height: 38px;
 }
+.tips {
+  margin: 20px 20px;
+  .link-type:hover {
+    text-decoration: underline;
+  }
+}
 </style>