首页修改

digital-management-web/src/views/login.vue

 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">泽宏后台管理系统</h3>
+      <h3 class="title">用户登录</h3>
+      <div class="split"></div>
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+        <el-input style="width: 75%" v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
@@ -13,6 +14,7 @@
           type="password"
           auto-complete="off"
           placeholder="密码"
+          style="width: 75%"
           @keyup.enter.native="handleLogin"
         >
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
@@ -23,7 +25,7 @@
           v-model="loginForm.code"
           auto-complete="off"
           placeholder="验证码"
-          style="width: 63%"
+          style="width: 75%"
           @keyup.enter.native="handleLogin"
         >
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
@@ -32,13 +34,12 @@
           <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-form-item style="width:100%;">
+      <!--<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
+      <el-form-item style="width:75%;">
         <el-button
           :loading="loading"
           size="medium"
-          type="primary"
-          style="width:100%;"
+          style="width:100%;background: linear-gradient(179deg, #0C6CC0 -20%, #05C0C0 -20%, #1A92F4 93%);color: #FFFFFF"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
@@ -47,9 +48,13 @@
       </el-form-item>
     </el-form>
     <!--  底部  -->
-    <div class="el-login-footer">
+    <!--<div class="el-login-footer">
       <span>Copyright © 2018-2021 ruoyi.vip All Rights Reserved.</span>
-    </div>
+    </div>-->
+    <!--<div style="position: absolute;bottom: 0px;display: flex;justify-content: center">
+      <el-image style="width: 100%; height: 100%;" :src="require('@/assets/images/login-center.png')"/>
+      <el-image style="width: 840px; height: 453px;" :src="require('@/assets/images/login-bottom.png')"/>
+    </div>-->
   </div>
 </template>
 
@@ -145,30 +150,46 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/login-background.png");
   background-size: cover;
 }
 .title {
-  margin: 0px auto 30px auto;
+  margin: 0px auto 15px auto;
   text-align: center;
-  color: #707070;
+  color: #FFFFFF;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 24px;
+}
+
+.split{
+  height:2px;
+  background: linear-gradient(270deg, rgba(2, 137, 255, 0) 0%, #14E8F7 50%, rgba(2, 137, 255, 0) 100%, rgba(24, 254, 254, 0) 100%);
+  margin-bottom: 60px;
 }
 
 .login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
+ //border-radius: 6px;
+  //background: #ffffff;
+  width: 430px;
   padding: 25px 25px 5px 25px;
+  box-sizing: border-box;
+  border: 1px solid ;
+  border-image: linear-gradient(180deg, #14E8F7 0%, rgba(20, 232, 247, 0) 92%) 1;
+
   .el-input {
     height: 38px;
     input {
       height: 38px;
+      color: #A3DCF6;
+      background: rgba(20, 168, 247, 0.59);
     }
   }
   .input-icon {
     height: 39px;
     width: 14px;
     margin-left: 2px;
+    color: #A3DCF6;
   }
 }
 .login-tip {
@@ -177,12 +198,14 @@ export default {
   color: #bfbfbf;
 }
 .login-code {
-  width: 33%;
+  width: 21%;
   height: 38px;
   float: right;
   img {
     cursor: pointer;
     vertical-align: middle;
+    width: 80px;
+    object-fit: fill;
   }
 }
 .el-login-footer {