登录页面改版

src/assets/css/common.css

@@ -1,3 +1,6 @@
+
+
+
 /* flex布局 */
 .u-f,.u-f-ac,.u-f-ajc,.u-f-jsb,.u-f-je,.u-f1,.u-f-column,.u-f-sa{
 	display: flex;
@@ -63,4 +66,22 @@
 .mrgin-2{
   margin: 20px;
 }
-
+.el-button--primary{
+	background-color: #D42426;
+	color: #fff;
+	border-color: #D42426;
+}
+.el-button--primary.is-plain{
+	background-color: #EAEDF1;
+	color: #D42426;
+	border-color: #EAEDF1;
+}
+.el-button--primary:hover{
+	background-color: #BB1012;
+	border-color: #BB1012;
+}
+.el-button--primary.is-plain:hover{
+	background-color: #D2D2D2;
+	color: #D42426;
+	border-color: #D2D2D2;
+}

src/views/Login.vue

@@ -2,32 +2,30 @@
   <div class="wavy-line">
     <div id="content" style="height: 100%;">
       <div id="Login">
-        <header class="L_header">
-          <div class="w1100">
-            <img src="../assets/image/logoImgnew.png" />
-          </div>
-        </header>
-        <main id="LBg">
-          <section class="w1100 clearfix">
-            <div class="LBox">
-              <div class="Lg_Fm_header">
-                <img src="../assets/image/loginheader.png" />
-                <span>欢迎登录</span>
-              </div>
-              <div class="Lg_Fm_Body">
-                <el-form size="medium" :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left"
-                  label-width="80px">
-                  <el-form-item prop="account" label=" 用户名:">
-                    <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
+        <div class="log_on">
+          <div class="left_content"></div>
+          <div class="right_content">
+            <img v-if="qrCode" class="img1" src="../assets//image/log_code.png" alt="" @click="qrCode=!qrCode">
+            <img  v-else class="img1" src="../assets//image/QR_code.png" alt="" @click="qrCode=!qrCode">
+            <div style="padding:15% 20% ">
+            <img  class="img2" src="../assets//image/logo_img.png" alt="" >
+            <div v-if="qrCode" style="text-align: center;">
+              <img class="img3" src="../assets//image/erweima.png" alt="">
+              <p class="code_word">打开<b>客户端APP</b>扫描二维码</p>
+            </div>
+            <el-form v-else size="medium"  :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left"
+                  label-width="0">
+                  <el-form-item prop="account" label="">
+                    <el-input type="text"  prefix-icon="el-icon-user" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
                   </el-form-item>
-                  <el-form-item prop="password" label=" 密码:">
-                    <el-input type="password" v-model="loginForm.password" auto-complete="off"
+                  <el-form-item prop="password" label="">
+                    <el-input type="password"  prefix-icon="el-icon-lock" v-model="loginForm.password" auto-complete="off"
                       placeholder="密码"></el-input>
                   </el-form-item>
                   <el-row>
                     <el-col :span="14">
-                      <el-form-item prop="captcha" label=" 验证码:">
-                        <el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码">
+                      <el-form-item prop="captcha" label="">
+                        <el-input type="test"  prefix-icon="el-icon-success" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码">
                         </el-input>
                       </el-form-item>
                     </el-col>
@@ -37,25 +35,22 @@
                         @click="refreshCaptcha">
                     </el-col>
                   </el-row>
-                  <el-row style="width:100%;padding: 0px 20px;margin-top: 10px;">
-                    <el-button size="medium" type="primary" style="width:48%;float: left;" @click.native.prevent="reset">重
+                  <el-row style="width:100%;margin-top: 15px;">
+                    <el-button size="medium" type="primary" plain style="width:48%;float: left;" @click.native.prevent="reset">重
                       置</el-button>
                     <el-button size="medium" type="primary" style="width:48%;float: right;" @click.native.prevent="login"
                       :loading="loading">登 录</el-button>
                   </el-row>
-                </el-form>
-              </div>
-            </div>
-          </section>
-        </main>
-        <footer class="L_footer">
+            </el-form>
+          </div>
+          </div>
+        </div>
+        <div class="L_footer">
           <div class="w1100" style="padding-top: 15px;">
             <p style="font-weight: bold;">版权所有©1994-2014山西掌柜科技有限公司 未经许可不得复制转载或者摘编</p>
             <p style="font-weight: bold;">copyright 1994-2014 ZhangGui Property Insurance Co.Lid All rights reserved</p>
           </div>
-        </footer>
-
-
+        </div>
       </div>
     </div>
   </div>
@@ -96,6 +91,7 @@ export default {
         ]
       },
       checked: true,
+      qrCode:false
     }
   },
   created() {
@@ -194,34 +190,6 @@ export default {
           duration: 2000
         })
       });
-
-      // this.$api.login.login(userInfo).then((res) => {
-      //   if (res.msg != null) {
-      //     this.$message({
-      //       message: res.msg,
-      //       type: 'error',
-      //       duration: 2000
-      //     })
-      //   } else {
-      //     if (this.rememberPassword) { //是否保存密码
-      //       Cookies.set('accountInfo', { 'account': this.loginForm.account, 'password': this.loginForm.password, })
-      //     } else {
-      //       Cookies.remove('accountInfo')
-      //     }
-      //     Cookies.set('token', res.data.token, { expires: 1, }) // 放置token到Cookie
-      //     Cookies.set('user', userInfo.account) // 放置token到Cookie
-      //     sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
-      //     this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
-      //     this.$router.push('/') // 登录成功，跳转到主页
-      //   }
-      //   this.loading = false
-      // }).catch((res) => {
-      //   this.$message({
-      //     message: res.message,
-      //     type: 'error',
-      //     duration: 2000
-      //   })
-      // });
     },
     getDictItems() {
       //--数据字典--
@@ -290,78 +258,72 @@ export default {
 
 #Login {
   width: 100%;
-  
   height: 100%;
-  background-image: url(../assets/image/bgImg5.jpg) !important;
+  background-image: url(../assets/image/bgImg.png) !important;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: 100% 100%;
-
-  .L_header {
-    width: 100%;
-    height: 64px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+.log_on{
+  width: 70%;
+  height: 80%;
+  margin: 80px 0 30px 0;
+  .left_content{
+    float: left;
+    width: 50%;
+    height: 100%;
+    background: url(../assets/image/leftImg.png) ;
+    background-size: 100% 100%;
+  }
+  .right_content{
+    float: right;
+    width: 50%;
+    height: 100%;
+    position: relative;
+    // display: flex;
+    // align-items: center;
+    // flex-direction: column;
+    // background: url(../assets/image/QR_code.png) top right  no-repeat #fff;
     background-color: #fff;
-
-    img {
-      padding-top: 11px;
+    .img1{
+      position: absolute;
+      right: 0;
     }
-  }
-
-  .w1100 {
-    width: 1100px;
-    margin: 0 auto;
-  }
-
-  #LBg {
-    width: 100%;
-
-    .LBox {
-      width: 365px;
-      height: 326px;
-      border-radius: 10px;
-      background-color: #fff;
-      margin-top: 133px;
-      margin-bottom: 20px;
-      position: relative;
-      float: right;
-
-      .Lg_Fm_header {
-        img {
-          position: absolute;
-          top: 11px;
-          right: -64px;
-        }
-
-        span {
-          color: #fff;
-          position: absolute;
-          display: block;
-          top: 19px;
-          left: 155px;
-          font-size: 18px;
-        }
-      }
-
-      .Lg_Fm_Body {
-        margin-top: 20px;
-        margin-bottom: 20px;
-        margin-left: 10px;
-        position: absolute;
-        top: 60px;
-        width: 340px;
+    .img2{
+      margin-bottom: 50px;
+      display: block; 
+      margin-left: auto; 
+      margin-right: auto; 
+    }
+    .img3{
+      width: 200px;
+      height: 200px;
+      padding: 15px;
+      display: block; 
+      margin-left: auto; 
+      margin-right: auto; 
+      border: 1px solid #EAEDF1;
+    }
+    .el-form-item{
+      margin-bottom: 30px
+    }
+    .code_word{
+      font-size: 16px;
+      font-weight: bold;
+      margin-top: 20px;
+      b{
+        color: #B20404;
       }
     }
   }
-
+}
   .L_footer {
-    width: 100%;
     height: 64px;
-    background-color: #fff;
-    position: fixed;
     bottom: 0;
-    color: #888;
+    color: #EAEDF1;
     font-size: 12px;
-
     p {
       margin: 0;
     }
@@ -370,38 +332,5 @@ export default {
 
 
 
-// // 登录背景
-// .loginBackground{
-//   background: #2b4b6b;
-//   width:100%;
-//   height: 100%;
-//   background-image: url(../assets/image/bgImg.jpg);
-//   background-repeat:no-repeat ;
-//   background-size:100% 100%;
-// }
-// // 登录Form容器
-// .login-container {
-//   width: 350px;
-//   background: #fff;
-//   border: 1px solid #eaeaea;
-//   -webkit-border-radius: 5px;
-//   border-radius: 5px;
-//   -moz-border-radius: 5px;
-//   position: absolute;
-//   top: 50%;
-//   left: 50%;
-//   transform: translate(-50%,-50%);
-//   padding: 35px 35px 15px 35px;
-//   // 登录标题
-//   .title {
-//     margin: 0px auto 30px auto;
-//     text-align: center;
-//     color: #505458;
-//   }
-//   // 记住密码
-//   .remember {
-//     margin: 0px 0px 35px 0px;
-//     text-align: right;
-//   }
-// }
+
 </style>