登录页面

ruoyi-admin-vue/src/views/login.vue

 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{title}}</h3>
-      <el-form-item prop="username">
+      <div class="first-title">欢迎登录</div>
+      <div class="sec-title">WMS库存管理系统</div>
+      <el-form-item prop="username" style="margin-top: 50px;">
         <el-input
           v-model="loginForm.username"
           type="text"
@@ -37,7 +38,7 @@
           <img :src="codeUrl" @click="getCode" class="login-code-img"/>
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;"><span class="remember">记住密码</span></el-checkbox>
       <el-form-item style="width:100%;">
         <el-button
           :loading="loading"
@@ -54,10 +55,7 @@
         </div>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
-    </div>
+    <img class="login-left" :src="loginLeft" alt="">
   </div>
 </template>
 
@@ -65,11 +63,12 @@
 import { getCodeImg } from "@/api/login"
 import Cookies from "js-cookie"
 import { encrypt, decrypt } from '@/utils/jsencrypt'
-
+import loginLeft from "@/assets/images/loginLeft.png"
 export default {
   name: "Login",
   data() {
     return {
+      loginLeft,
       title: process.env.VUE_APP_TITLE,
       codeUrl: "",
       loginForm: {
@@ -162,8 +161,8 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
+  background-image: url("../assets/images/loginBack.png");
+  background-size: 100% 100%;
 }
 .title {
   margin: 0px auto 30px auto;
@@ -172,11 +171,40 @@ export default {
 }
 
 .login-form {
-  border-radius: 6px;
+  border-radius: 15px;
   background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+  // width: 400px;
+  padding: 83px 90px 90px 90px;
+  position: fixed;
+  right: 200px;
+  top: 188px;
   z-index: 1;
+  background: rgba(255, 255, 255, 0.3);
+  box-shadow: 0px 19px 39px  rgba(222, 225, 255, 1);
+  backdrop-filter: blur(20px);
+  .first-title {
+    font-size: 32px;
+    font-weight: 500;
+    letter-spacing: 2px;
+    line-height: 46.34px;
+    // color: rgba(51, 51, 51, 1);
+    background: linear-gradient(rgba(75, 123, 254, 1) 0%, rgba(0, 100, 253, 1) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+  }
+  .sec-title { 
+    font-size: 32px;
+    font-weight: 500;
+    letter-spacing: 2px;
+    line-height: 46.34px;
+    background: linear-gradient(rgba(75, 123, 254, 1) 0%, rgba(0, 100, 253, 1) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+  }
   .el-input {
     height: 38px;
     input {
@@ -189,6 +217,15 @@ export default {
     margin-left: 2px;
   }
 }
+.login-left {
+  width: 842.5px;
+  height: 842.34px;
+  object-fit: cover;
+  position: fixed;
+  left: 212px;
+  top: 184px;
+
+}
 .login-tip {
   font-size: 13px;
   text-align: center;
@@ -218,4 +255,8 @@ export default {
 .login-code-img {
   height: 38px;
 }
+.remember{
+  font-size: 16px;
+  color: rgba(37, 37, 37, 0.5);
+}
 </style>