登录页效果

src/views/login/index.vue

@@ -1,12 +1,8 @@
 <template>
-  <div class="login-container">
+  <div class="login-container" :style="'background-image:' + bgImage">
+    <div class="loginTit"><img class="img" src="@/assets/title.png" alt="医美机构商城管理系统"></div>
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
-      <div class="title-container">
-        <div class="logo"><!--<img class="img" :src="systemImage" alt="">--></div>
-        <h3 class="title"><!--{{ systemName ? systemName : '后台管理系统' }}--></h3>
-      </div>
-
       <el-form-item prop="account">
         <span class="svg-container">
           <svg-icon icon-class="user" />
@@ -83,7 +79,8 @@ export default {
       },
       loading: false,
       passwordType: 'password',
-      redirect: undefined
+      redirect: undefined,
+      bgImage: 'url(' + require('@/assets/bg.jpg') + ')'
     }
   },
   watch: {
@@ -136,7 +133,7 @@ export default {
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
+$bg:#1f2f3f;
 $light_gray:#fff;
 $cursor: #fff;
 
@@ -148,6 +145,10 @@ $cursor: #fff;
 
 /* reset element-ui css */
 .login-container {
+  background-color: $bg;
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% 100%;
   .el-input {
     display: inline-block;
     height: 47px;
@@ -172,7 +173,7 @@ $cursor: #fff;
 
   .el-form-item {
     border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
+    background: $bg;
     border-radius: 5px;
     color: #454545;
   }
@@ -180,7 +181,7 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
+$bg:#1f2f3f;
 $dark_gray:#889aa4;
 $light_gray:#eee;
 
@@ -189,15 +190,21 @@ $light_gray:#eee;
   width: 100%;
   background-color: $bg;
   overflow: hidden;
-
+  .loginTit {
+    max-width: 700px;
+    padding: 220px 20px 0;
+    margin: 0 auto;
+    img{
+       width:100%;
+    }
+  }
   .login-form {
     position: relative;
     width: 450px;
     max-width: 100%;
-    padding: 180px 35px 45px 35px;
+    padding: 45px 35px;
     margin: 0 auto;
     overflow: hidden;
-    background: $bg;
     border-radius: 8px;
   }