优化首页悬停动画挤压其他元素问题，优化登录页面

src/views/index.vue

@@ -1880,6 +1880,7 @@ export default {
   padding-right: 5px;
   .operatetitle-card {
     width: 24%;
+    border: 1px solid transparent;
     background-color: rgba(245, 247, 250, 1);
     border-radius: 4px;
     padding: 15px;

src/views/login.vue

@@ -1,25 +1,38 @@
 <template>
   <div class="login" id="loginBox">
+    <div class="logopositon">
+      <img src="../assets/images/yunlian_logo.png" alt="">
+    </div>
     <div class="login-con">
       <div class="img-box">
-        <img src="../assets/image/login_left.png" alt="">
+        <div class="imgline1">
+          一站式私域平台
+        </div>
+        <div class="imgline2">
+          助力企业打造自主客户资产池!
+        </div>
       </div>
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-        <h3 class="title">{{vueAppTitle}}</h3>
+        <div class="title">{{vueAppTitle}}</div>
+        <div class="title-line"></div>
         <el-form-item prop="username">
-          <el-input 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 v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" class="username" >
+            <img slot="prefix" src="../assets/images/user.png" class="input-icon "/>
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input
             v-model="loginForm.password"
-            type="password"
+            :type="passwordtype"
             auto-complete="off"
             placeholder="密码"
             @keyup.enter.native="handleLogin"
+            class="password"
           >
-            <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" /> -->
+            <img slot="prefix" src="../assets/images/pass.png" class="input-icon" />
+            <img slot="suffix" src="../assets/images/eyeoff.png" class="input-icon2" v-if="ispassword" @click.stop="changetype()"/>
+            <img slot="suffix" src="../assets/images/eyeopen.png" class="input-icon2" v-else @click.stop="changetype()"/>
           </el-input>
         </el-form-item>
         <el-form-item prop="code">
@@ -29,8 +42,10 @@
             placeholder="验证码"
             style="width: 63%"
             @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"/> -->
+            <img slot="prefix" src="../assets/images/code.png" class="input-icon" />
           </el-input>
           <div class="login-code">
             <img :src="codeUrl" @click="getCode" class="login-code-img"/>
@@ -96,7 +111,9 @@ export default {
         code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
       },
       loading: false,
-      redirect: undefined
+      redirect: undefined,
+      passwordtype:'password',
+      ispassword:true
     };
   },
   watch: {
@@ -156,6 +173,14 @@ export default {
             });
         }
       });
+    },
+    changetype(){
+      this.ispassword=!this.ispassword
+      if(this.ispassword){
+        this.passwordtype="password"
+      }else{
+        this.passwordtype="text"
+      }
     }
   }
 };
@@ -163,43 +188,70 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
+  .logopositon{
+    position: fixed;
+    left: 30px;
+    top: 30px;
+  }
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
-  background-image: linear-gradient(#0e68c3, #1e99f5);
+  background-image: (url(../assets/images/login_bg.png) );
+  background-size: 100% 100%;
   background-size: cover;
+
   .login-con{
-    width: 750px;
+    width: 880px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-radius: 10px;
-    overflow: hidden;
-    background: #ffffff;
+
+
     .img-box{
-      width: 420px;
-      height: 420px;
-      img{
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+      width: 440px;
+      height: 500px;
+      background-image: url(../assets/images/login_left.png);
+      background-size: 100% 100%;
+      color: #FFFFFF;
+      .imgline1{
+        font-size: 34px;
+        font-weight:400;
+        margin-left: 38px;
+        margin-top: 38px;
+        letter-spacing: 2px;
+      }
+      .imgline2{
+        margin-left: 38px;
+        font-size: 16px;
+        margin-top: 6px;
+        letter-spacing: 1px;
       }
+
     }
   }
 }
 .title {
-  margin: 0px auto 30px auto;
+  margin: 0px auto 15px auto;
   text-align: center;
-  color: #707070;
+  color: #202124;
+  font-weight: 500;
+  font-size: 20px;
+}
+.title-line{
+  width: 40px;
+  border-bottom: 2px solid #006CFF;
+  margin: 0px auto 30px auto;
 }
-
 .login-form {
   box-sizing: border-box;
   background: #ffffff;
-  width: 330px;
-  padding: 25px 25px 5px 25px;
+  width: 440px;
+  height: 500px;
+  padding: 40px 25px 5px 25px;
+  box-shadow:4px -4px 10px rgba(0, 108, 255, 0.15);
   .el-input {
     height: 38px;
     input {
@@ -207,9 +259,16 @@ export default {
     }
   }
   .input-icon {
-    height: 39px;
-    width: 14px;
+    height: 20px;
+    width: 20px;
     margin-left: 2px;
+    margin-top: 10px;
+  }
+  .input-icon2{
+    height: 20px;
+    width: 20px;
+    margin-right: 4px;
+    margin-top: 10px;
   }
 }
 .login-tip {
@@ -241,4 +300,6 @@ export default {
 .login-code-img {
   height: 38px;
 }
+
+
 </style>