opt:优化登录页面

lms/nladmin-ui/src/views/login.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="login" :style="'background-image:url('+ Background +');'">
+    <img v-if="logo" :src="logo" class="sidebar-logo2" />
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
       <h3 class="title">
         {{title}}</h3>
@@ -46,12 +47,14 @@ import Config from '@/settings'
 import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
 import Background from '@/assets/images/background.jpg'
+import Logo from '@/assets/images/hailaing2.png'
 export default {
   name: 'Login',
   data() {
     return {
       title: '甘肃海亮铜箔LMS',
       Background: Background,
+      logo: Logo,
       codeUrl: '',
       cookiePass: '',
       loginForm: {
@@ -159,47 +162,53 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background-size: cover;
-  }
-  .title {
-    margin: 0 auto 30px auto;
-    text-align: center;
-    color: #707070;
-  }
-
-  .login-form {
-    border-radius: 6px;
-    background: #ffffff;
-    width: 385px;
-    padding: 25px 25px 5px 25px;
-    .el-input {
-      height: 38px;
-      input {
-        height: 38px;
-      }
-    }
-    .input-icon{
-      height: 39px;width: 14px;margin-left: 2px;
-    }
-  }
-  .login-tip {
-    font-size: 13px;
-    text-align: center;
-    color: #bfbfbf;
-  }
-  .login-code {
-    width: 33%;
-    display: inline-block;
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+}
+.title {
+  margin: 0 auto 30px auto;
+  text-align: center;
+  color: #006cb6;
+}
+.sidebar-logo2 {
+  width: 370px;
+  height: 56px;
+  position: absolute; /* 绝对定位 */
+  top: 8px; /* 顶部对齐 */
+  left: 8px; /* 左侧对齐 */
+}
+.login-form {
+  border-radius: 6px;
+  background-color: rgb(252, 247, 247, 0.5); /* 白色背景，50%透明度 */
+  width: 385px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
     height: 38px;
-    float: right;
-    img{
-      cursor: pointer;
-      vertical-align:middle
+    input {
+      height: 38px;
     }
   }
+  .input-icon{
+    height: 39px;width: 14px;margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  display: inline-block;
+  height: 38px;
+  float: right;
+  img{
+    cursor: pointer;
+    vertical-align:middle
+  }
+}
 </style>