修改登录页面

business-css/frontend/src/views/login/index.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="login-container">
+    <img src="@/assets/images/bg.png" alt="" style="position: absolute;top: 0;left: 0;width: 100%;height: 100vh;object-fit: cover;">
     <div class="login-container-center">
       <div class="login-container-left">
-        <el-image
+       
-          :src="loginImg"
-          fit="cover"
-        />
       </div>
       <div class="login-container-right">
         <el-form
@@ -17,12 +15,12 @@
           label-position="left"
         >
           <div class="title-container">
-            <h3 class="title">{{$t('login.title')}}</h3>
+            <div class="title">账号登录</div>
           </div>
 
           <el-form-item prop="username">
             <span class="svg-container">
-              <svg-icon icon-class="user" />
+              <img src="@/assets/login/username.png" alt="">
             </span>
             <el-input
               ref="username"
@@ -43,7 +41,7 @@
           >
             <el-form-item prop="password">
               <span class="svg-container">
-                <svg-icon icon-class="password" />
+               <img src="@/assets/login/password.png" alt="">
               </span>
               <el-input
                 ref="passwordRef"
@@ -73,7 +71,7 @@
             class="login-code"
           >
             <span class="svg-container">
-              <svg-icon icon-class="valid_code" />
+              <img src="@/assets/login/valid_code.png" alt="">
             </span>
             <el-input
               style="width: 60%;"
@@ -102,7 +100,7 @@
             size="default"
             :loading="loading"
             type="primary"
-            style="width: 100%;height: 50px; margin-bottom: 10px"
+            style="width: 100%;height: 50px; margin-bottom: 10px;margin-top: 10px;"
             @click.prevent="handleLogin"
           >{{ $t('login.login') }}
           </el-button>
@@ -321,11 +319,12 @@ $light_gray: #000000;
     position: relative;
 
     .title {
-      font-size: 36px;
+      font-family: '微软雅黑';
-      color: $light_gray;
+      font-weight: 400;
-      margin: 0px auto 40px auto;
+      font-style: normal;
+      font-size: 30px;
+      color: #363636;
       text-align: center;
-      font-weight: bold;
     }
 
     .set-language {
@@ -413,7 +412,7 @@ $light_gray: #eee;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   .login-container-left {
     .el-image {
       min-height: 420px;
@@ -422,18 +421,23 @@ $light_gray: #eee;
     }
   }
   .login-container-right {
-    width: 625px;
+    position: relative;
-    height: calc(100vh - 200px);
+    margin-bottom: 40px;
-    min-height: 420px;
+    width: 500px;
-    min-width: 350px;
+    height: 539px;
-    border-radius: 5px 5px 0;
+    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
+    border: none;
+    border-radius: 10px;
+    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     -webkit-justify-content: center;
     align-items: center;
     -webkit-align-items: center;
+
   }
 }
 .login-container {