login

src/views/Login.vue

@@ -1,37 +1,22 @@
 <template>
+  <!-- 102 -->
   <div class="login-container">
     <div class="login_box">
-      <!-- 头像区域 -->
-      <!-- <div class="avatar_box">
-        <img src="../assets/logo.png" alt="">
-      </div> -->
-      <!-- 登录表单区域 -->
-      <!-- <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px"  class="login_form">
-        <el-form-item prop="user_name">
-          <el-input prefix-icon="el-icon-search" v-model="loginForm.user_name" placeholder="用户名"></el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input prefix-icon="el-icon-search" v-model="loginForm.password" placeholder="密码" type="password"></el-input>
-        </el-form-item>
-        <el-form-item class="btns">
-          <el-button type="primary" @click="login">登录</el-button>
-          <el-button type="info" @click="resetLoginForm">重置</el-button>
-        </el-form-item>  
-      </el-form> -->
+     
     </div>
     <div class="new-login">
       <div class="new-login-l">
-        <img src="@/assets/images/logo.png" alt="">
+       
       </div>
       <div class="new-login-r">
-        <div class="title">用户登录：</div>
+        <div class="new-login-r-title">用户登录：</div>
         <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-form" auto-complete="on" label-position="left">
-          <el-form-item prop="user_name">
+          <el-form-item prop="user_name"  >
             <!-- <span class="svg-container">
                 <svg-icon icon-class="user" />  
             </span>  -->
             <i class="el-icon-user-solid"></i>
-            <el-input   ref="user_name" v-model="loginForm.user_name" placeholder="用户名" name="user_name" type="text" tabindex="1" auto-complete="on" />
+            <el-input   ref="user_name" v-model="loginForm.user_name" placeholder="用户名" name="user_name" type="text" tabindex="1" auto-complete="on" style="background-color:#0b2a57"/>
           </el-form-item>
 
           <el-form-item prop="password" class="password">
@@ -52,7 +37,9 @@
             </input>
           </el-form-item> -->
         </el-form>
-        <el-button   type="primary" :loading="loading" class="btn" @click.native.prevent="login">登录</el-button>
+        <div class ="subbtn" @click="login"></div>
+        
+        <!-- <el-button   type="primary" :loading="loading" class="btn" @click.native.prevent="login">登录</el-button> -->
       </div>
     </div>
     <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
@@ -82,12 +69,12 @@ export default {
       },
       //表单验证规则
       loginFormRules:{
-        user_name:[
-          { required:true, message:"请输入登录名称", trigger:"blur" }
-        ],
-        password:[
-          { required:true, message:"请输入登录密码", trigger:"blur" } 
-        ]
+        // user_name:[
+        //   { required:true, message:"请输入登录名称", trigger:"blur" }
+        // ],
+        // password:[
+        //   { required:true, message:"请输入登录密码", trigger:"blur" } 
+        // ]
       },
 
       loading: false,
@@ -265,12 +252,7 @@ export default {
 <!-- 加了scoped，则是仅在此组件里生效 -->
 <style scoped>
  
-/* .login_container{background-color:#2b4b6b;height: 100%}
-.login_box{width:450px;height:300px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
-.avatar_box{height:130px;width:130px;border:1px solid #eee;border-radius:50%;padding:10px;box-shadow:0 0 10px #ddd;position:absolute;left:50%;transform:translate(-50%, -50%);}
-.avatar_box img{width:100%}
-.login_form{position:absolute;bottom:0;width:100%;padding:0 20px;box-sizing: border-box}
-.btns{display:flex;justify-content: flex-end} */
+ 
 
 
 .login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
@@ -279,35 +261,44 @@ export default {
     -webkit-text-fill-color: #000 !important;
 }
 
-.login-container{position: relative;height: 100%;width: 100%; min-height: 500px;background:  url("../assets/images/nlogin-bg1.jpg") no-repeat; }
+.login-container{position: relative;height: 100%;width: 100%; min-height: 500px;background:  url("../assets/bg.png") no-repeat; }
+
+.new-login{   width: 1000px;height: 700px;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto; background:  url("../assets/lg-img.png") no-repeat; }
+ 
+ 
+.new-login-l{float:left;height:100%;width:50%;position: relative; }
+ 
+.new-login-r{ float:left;height:80%;width:40%;position: relative; float:left; }
 
-.new-login{   width: 50%;height: 42%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;  }
-.new-login-l{background: red;float:left;height:100%;width:50%;background:  url("../assets/images/nlogin-bg2.png") no-repeat;position: relative; }
-.new-login-l  img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50%;height:23%;}
-.new-login-r{ background: #fff;float:left;height:100%;width:50%;position: relative;}
-.new-login-r .title{margin-top: 10%;font-size: 20px;font-weight: 600;color: #019969;text-align: center;}
+
+.new-login-r-title{margin-top: 55%;font-size: 20px;font-weight: 600;color: #37bdff;text-align: left;padding-left: 55px}
 .new-login-r .login-form{  position: relative;width: 520px;max-width: 100%;overflow: hidden;height: 48%;}
-.login-form .svg-container{padding: 6px 5px 6px 15px; color: #999; vertical-align: middle; width: 30px; display: inline-block;} 
+
+
+.login-form .svg-container{padding: 6px 5px 6px 15px; color: #129bda; vertical-align: middle; width: 30px; display: inline-block;} 
 .login-form .el-input {  display: inline-block; width: 80%;   }
     
 .new-login-r  .el-form-item {
-          border: none; background: #fff; border-radius: 5px; color: #999;width: 73%; margin: 10px auto;height: 30% }
+          border: none; background: none; border-radius: 5px; color: #4fdeff;width: 73%; margin: 10px auto;height: 30% }
+
+
 .new-login-r  .el-form-item  /deep/.el-form-item__content {
-            line-height: 16%; border-bottom: 1px solid #e7e7e7;
+            line-height: 16%; border: 1px solid #1b67b7;background: #08204b;border-radius: 4px
           }
-          .new-login-r  .el-form-item  .el-form-item__content .el-input  /deep/.el-input__inner{border: none !important;}
+.new-login-r  .el-form-item  .el-form-item__content .el-input  /deep/.el-input__inner{border: none !important;border-radius:0px;background: #08204b;color: #FFF;}
        
           .rememberPassword  /deep/.el-form-item__content {line-height:16%; border: none;padding-bottom: 10px;}
           .rememberPassword  /deep/.el-form-item__content span{padding-left: 5px;}  
 
 
 
+.password{margin-top: 10px;margin-bottom: 20px;}
 
-        .password{margin-top: 10px;margin-bottom: 20px;}
-        .btn{
-          position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;  }
-          .btn  span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
- 
+.subbtn{position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;  height: 60px;background:  url("../assets/btnss.png") no-repeat;background-size: 300px 60px }
+
+/* .btn{position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;  }
+ .btn  span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
+  */
 
 
 

src/views/Login100.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="login-container">
+    <div class="login_box">
+      <!-- 头像区域 -->
+      <!-- <div class="avatar_box">
+        <img src="../assets/logo.png" alt="">
+      </div> -->
+      <!-- 登录表单区域 -->
+      <!-- <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px"  class="login_form">
+        <el-form-item prop="user_name">
+          <el-input prefix-icon="el-icon-search" v-model="loginForm.user_name" placeholder="用户名"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input prefix-icon="el-icon-search" v-model="loginForm.password" placeholder="密码" type="password"></el-input>
+        </el-form-item>
+        <el-form-item class="btns">
+          <el-button type="primary" @click="login">登录</el-button>
+          <el-button type="info" @click="resetLoginForm">重置</el-button>
+        </el-form-item>  
+      </el-form> -->
+    </div>
+    <div class="new-login">
+      <div class="new-login-l">
+        <img src="@/assets/images/logo.png" alt="">
+      </div>
+      <div class="new-login-r">
+        <div class="title">用户登录：</div>
+        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-form" auto-complete="on" label-position="left">
+          <el-form-item prop="user_name">
+            <!-- <span class="svg-container">
+                <svg-icon icon-class="user" />  
+            </span>  -->
+            <i class="el-icon-user-solid"></i>
+            <el-input   ref="user_name" v-model="loginForm.user_name" placeholder="用户名" name="user_name" type="text" tabindex="1" auto-complete="on" />
+          </el-form-item>
+
+          <el-form-item prop="password" class="password">
+            <!-- <span class="svg-container">
+               <svg-icon icon-class="password" /> 
+            </span> -->
+            <i class="el-icon-unlock"></i>
+            <el-input  :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+            <span class="show-pwd" @click="showPwd">
+              <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
+            </span>
+          </el-form-item>
+          <!-- <el-form-item prop="password" class="rememberPassword">
+            <input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
+            <span for="remember-password-checkbox">
+              记住密码
+            </span>
+            </input>
+          </el-form-item> -->
+        </el-form>
+        <el-button   type="primary" :loading="loading" class="btn" @click.native.prevent="login">登录</el-button>
+      </div>
+    </div>
+    <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
+      <p style="text-align:center;line-height:16px;">
+        版权所有
+        <a href="http://www.dairyinfo.com.cn" target="_blank">上海科湃腾信息科技有限公司</a>
+        <!-- <a style="margin-left: 20px;" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备11008303号-3 </a> -->
+      </p>
+
+    </div>
+  </div>
+</template> 
+
+<script>
+import { GetDataByName, PostDataByName, ajaxDataGet, ajaxDataPost, ajaxDataLogin} from '@/api/common'
+import {md5} from '@/utils/md5'
+
+
+
+export default {
+  data() {
+    return {
+      loginForm:{
+        user_name:"", //admin cyj
+        password:""  //123456
+ 
+      },
+      //表单验证规则
+      loginFormRules:{
+        user_name:[
+          { required:true, message:"请输入登录名称", trigger:"blur" }
+        ],
+        password:[
+          { required:true, message:"请输入登录密码", trigger:"blur" } 
+        ]
+      },
+
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined,
+      rememberPassword: ''
+    }
+  },
+
+
+  created(){
+     
+  },
+  methods:{
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    login(){
+      var me = this 
+
+      //validate表单预验证
+      this.$refs.loginFormRef.validate( valid => {
+        //如果false,就返回
+        if(!valid) return;
+        // var g_token = 111111
+        //  sessionStorage.setItem("g_token",g_token)
+
+     // me.$router.push("/home")
+ 
+        //方法一：直接用axios请求
+        //.post是请求方式 也可以是Get
+        //这里 /test是后端的接口地址
+        //loginForm请求发的参数
+
+
+        
+
+
+        // var send_data = {
+        //   user_name:me.loginForm.user_name,
+        //   password: md5(me.loginForm.password) 
+        // }
+        // this.$http.post("/login",send_data ,{ headers:{  } }).then(function(res){
+        //   //打印请求成功结果
+        //   console.log('res',res)
+        //   console.log('res.data',res.data) 
+        //   if (res.data.code == 200) {
+				   
+        //    var g_token = res.data.data.token
+        //     // 设置全局缓存token
+        //     sessionStorage.setItem("g_token",g_token)
+        //     console.log('g_token',g_token)
+            
+        //     var g_pastureId = res.data.data.pastureId
+        //     var g_employeeId = res.data.data.employeeId
+        //     var g_userNameSee = res.data.data.userName
+        //     var g_actualName = res.data.data.actualName
+            
+            
+        //     sessionStorage.setItem("g_pastureId",g_pastureId)
+        //     sessionStorage.setItem("g_employeeId",g_employeeId)
+        //     sessionStorage.setItem("g_userNameSee",g_userNameSee)
+        //     sessionStorage.setItem("g_actualName",g_actualName)
+ 
+        
+ 
+        //       //成功登录后跳转页面
+        //       me.$router.push("/home")
+    
+        //     } else {
+        //       me.$message({ type: 'error', message: '登陆失败！' + res.data.msg, duration: 2000 })
+             
+        //     }
+        // }).catch(function(error){
+        //   //打印请求失败结果
+        //   console.log('error',error)
+        //   me.$message({ type: 'error', message: '请求错误！' +error.response.data.errors, duration: 2000 })
+        // })
+
+        
+
+        // //方法二：用封装xios请求 、 路径写死
+        // PostDataByName(this.loginForm).then(response => {
+        //   //打印请求成功结果
+        //   console.log('response',response)
+        // })
+
+    
+  
+
+        //方法二：用封装axios请求、路径不写死
+        // ajaxData("/login"  ,this.loginForm).then(res => {
+        //   //打印请求成功结果
+        //   console.log('response',res)
+        //   this.$message({ type: 'error', message: '请求成功', duration: 2000 })
+        //   //本地存储数据
+        //   window.sessionStorage.setItem("token",res.data)
+        //   //跳转路由到Home页面
+        //  this.$router.push("/home")
+        // })
+            //跳转路由到Home页面
+         //this.$router.push("/home")
+
+
+         var send_data = {
+          user_name:me.loginForm.user_name,
+          password: md5(me.loginForm.password) 
+        }
+
+
+
+        ajaxDataLogin("/login"  ,send_data).then(res => {
+          //打印请求成功结果
+          console.log('res',res)
+          console.log('res.data',res.data) 
+          if (res.code == 200) {
+				   
+           var g_token = res.data.token
+            // 设置全局缓存token
+            sessionStorage.setItem("g_token",g_token)
+            console.log('g_token',g_token)
+            
+            var g_pastureId = res.data.pastureId
+            var g_employeeId = res.data.employeeId
+            var g_userNameSee = res.data.userName
+            var g_actualName = res.data.actualName
+            
+            
+            sessionStorage.setItem("g_pastureId",g_pastureId)
+            sessionStorage.setItem("g_employeeId",g_employeeId)
+            sessionStorage.setItem("g_userNameSee",g_userNameSee)
+            sessionStorage.setItem("g_actualName",g_actualName)
+ 
+        
+ 
+              //成功登录后跳转页面
+              me.$router.push("/home")
+    
+            } else {
+              me.$message({ type: 'error', message: '登陆失败！' + res.data.msg, duration: 2000 })
+             
+            }
+        }).catch(function(error){
+          //打印请求失败结果
+          console.log('error',error)
+          me.$message({ type: 'error', message: '请求错误！' +error.response.data.errors, duration: 2000 })
+        })
+
+
+
+       })
+
+      
+      
+      
+    },
+
+   
+    
+    //重置登录表单
+    resetLoginForm(){
+      //this.$refs.loginFormRef直接绑定  resetFields()重置
+      this.$refs.loginFormRef.resetFields();
+    }
+  }
+}
+</script>
+<!-- 加了scoped，则是仅在此组件里生效 -->
+<style scoped>
+ 
+/* .login_container{background-color:#2b4b6b;height: 100%}
+.login_box{width:450px;height:300px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
+.avatar_box{height:130px;width:130px;border:1px solid #eee;border-radius:50%;padding:10px;box-shadow:0 0 10px #ddd;position:absolute;left:50%;transform:translate(-50%, -50%);}
+.avatar_box img{width:100%}
+.login_form{position:absolute;bottom:0;width:100%;padding:0 20px;box-sizing: border-box}
+.btns{display:flex;justify-content: flex-end} */
+
+
+.login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
+    box-shadow: 0 0 0px 1000px #fff inset !important;
+    -webkit-text-fill-color: #000 !important;
+}
+
+.login-container{position: relative;height: 100%;width: 100%; min-height: 500px;background:  url("../assets/images/nlogin-bg1.jpg") no-repeat; }
+
+.new-login{   width: 50%;height: 42%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;  }
+.new-login-l{background: red;float:left;height:100%;width:50%;background:  url("../assets/images/nlogin-bg2.png") no-repeat;position: relative; }
+.new-login-l  img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50%;height:23%;}
+.new-login-r{ background: #fff;float:left;height:100%;width:50%;position: relative;}
+.new-login-r .title{margin-top: 10%;font-size: 20px;font-weight: 600;color: #019969;text-align: center;}
+.new-login-r .login-form{  position: relative;width: 520px;max-width: 100%;overflow: hidden;height: 48%;}
+.login-form .svg-container{padding: 6px 5px 6px 15px; color: #999; vertical-align: middle; width: 30px; display: inline-block;} 
+.login-form .el-input {  display: inline-block; width: 80%;   }
+    
+.new-login-r  .el-form-item {
+          border: none; background: #fff; border-radius: 5px; color: #999;width: 73%; margin: 10px auto;height: 30% }
+.new-login-r  .el-form-item  /deep/.el-form-item__content {
+            line-height: 16%; border-bottom: 1px solid #e7e7e7;
+          }
+          .new-login-r  .el-form-item  .el-form-item__content .el-input  /deep/.el-input__inner{border: none !important;}
+       
+          .rememberPassword  /deep/.el-form-item__content {line-height:16%; border: none;padding-bottom: 10px;}
+          .rememberPassword  /deep/.el-form-item__content span{padding-left: 5px;}  
+
+
+
+
+        .password{margin-top: 10px;margin-bottom: 20px;}
+        .btn{
+          position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;  }
+          .btn  span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
+ 
+
+
+
+
+
+    
+</style>

src/views/Login102.vue

@@ -0,0 +1,308 @@
+<template>
+  <!-- 102 -->
+  <div class="login-container">
+    <div class="login_box">
+     
+    </div>
+    <div class="new-login">
+      <div class="new-login-l">
+       
+      </div>
+      <div class="new-login-r">
+        <div class="new-login-r-title">用户登录：</div>
+        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-form" auto-complete="on" label-position="left">
+          <el-form-item prop="user_name"  >
+            <!-- <span class="svg-container">
+                <svg-icon icon-class="user" />  
+            </span>  -->
+            <i class="el-icon-user-solid"></i>
+            <el-input   ref="user_name" v-model="loginForm.user_name" placeholder="用户名" name="user_name" type="text" tabindex="1" auto-complete="on" style="background-color:#0b2a57"/>
+          </el-form-item>
+
+          <el-form-item prop="password" class="password">
+            <!-- <span class="svg-container">
+               <svg-icon icon-class="password" /> 
+            </span> -->
+            <i class="el-icon-unlock"></i>
+            <el-input  :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+            <span class="show-pwd" @click="showPwd">
+              <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
+            </span>
+          </el-form-item>
+          <!-- <el-form-item prop="password" class="rememberPassword">
+            <input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
+            <span for="remember-password-checkbox">
+              记住密码
+            </span>
+            </input>
+          </el-form-item> -->
+        </el-form>
+        <div class ="subbtn" @click="login"></div>
+        
+        <!-- <el-button   type="primary" :loading="loading" class="btn" @click.native.prevent="login">登录</el-button> -->
+      </div>
+    </div>
+    <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
+      <p style="text-align:center;line-height:16px;">
+        版权所有
+        <a href="http://www.dairyinfo.com.cn" target="_blank">上海科湃腾信息科技有限公司</a>
+        <!-- <a style="margin-left: 20px;" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备11008303号-3 </a> -->
+      </p>
+
+    </div>
+  </div>
+</template> 
+
+<script>
+import { GetDataByName, PostDataByName, ajaxDataGet, ajaxDataPost, ajaxDataLogin} from '@/api/common'
+import {md5} from '@/utils/md5'
+
+
+
+export default {
+  data() {
+    return {
+      loginForm:{
+        user_name:"", //admin cyj
+        password:""  //123456
+ 
+      },
+      //表单验证规则
+      loginFormRules:{
+        // user_name:[
+        //   { required:true, message:"请输入登录名称", trigger:"blur" }
+        // ],
+        // password:[
+        //   { required:true, message:"请输入登录密码", trigger:"blur" } 
+        // ]
+      },
+
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined,
+      rememberPassword: ''
+    }
+  },
+
+
+  created(){
+     
+  },
+  methods:{
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    login(){
+      var me = this 
+
+      //validate表单预验证
+      this.$refs.loginFormRef.validate( valid => {
+        //如果false,就返回
+        if(!valid) return;
+        // var g_token = 111111
+        //  sessionStorage.setItem("g_token",g_token)
+
+     // me.$router.push("/home")
+ 
+        //方法一：直接用axios请求
+        //.post是请求方式 也可以是Get
+        //这里 /test是后端的接口地址
+        //loginForm请求发的参数
+
+
+        
+
+
+        // var send_data = {
+        //   user_name:me.loginForm.user_name,
+        //   password: md5(me.loginForm.password) 
+        // }
+        // this.$http.post("/login",send_data ,{ headers:{  } }).then(function(res){
+        //   //打印请求成功结果
+        //   console.log('res',res)
+        //   console.log('res.data',res.data) 
+        //   if (res.data.code == 200) {
+				   
+        //    var g_token = res.data.data.token
+        //     // 设置全局缓存token
+        //     sessionStorage.setItem("g_token",g_token)
+        //     console.log('g_token',g_token)
+            
+        //     var g_pastureId = res.data.data.pastureId
+        //     var g_employeeId = res.data.data.employeeId
+        //     var g_userNameSee = res.data.data.userName
+        //     var g_actualName = res.data.data.actualName
+            
+            
+        //     sessionStorage.setItem("g_pastureId",g_pastureId)
+        //     sessionStorage.setItem("g_employeeId",g_employeeId)
+        //     sessionStorage.setItem("g_userNameSee",g_userNameSee)
+        //     sessionStorage.setItem("g_actualName",g_actualName)
+ 
+        
+ 
+        //       //成功登录后跳转页面
+        //       me.$router.push("/home")
+    
+        //     } else {
+        //       me.$message({ type: 'error', message: '登陆失败！' + res.data.msg, duration: 2000 })
+             
+        //     }
+        // }).catch(function(error){
+        //   //打印请求失败结果
+        //   console.log('error',error)
+        //   me.$message({ type: 'error', message: '请求错误！' +error.response.data.errors, duration: 2000 })
+        // })
+
+        
+
+        // //方法二：用封装xios请求 、 路径写死
+        // PostDataByName(this.loginForm).then(response => {
+        //   //打印请求成功结果
+        //   console.log('response',response)
+        // })
+
+    
+  
+
+        //方法二：用封装axios请求、路径不写死
+        // ajaxData("/login"  ,this.loginForm).then(res => {
+        //   //打印请求成功结果
+        //   console.log('response',res)
+        //   this.$message({ type: 'error', message: '请求成功', duration: 2000 })
+        //   //本地存储数据
+        //   window.sessionStorage.setItem("token",res.data)
+        //   //跳转路由到Home页面
+        //  this.$router.push("/home")
+        // })
+            //跳转路由到Home页面
+         //this.$router.push("/home")
+
+
+         var send_data = {
+          user_name:me.loginForm.user_name,
+          password: md5(me.loginForm.password) 
+        }
+
+
+
+        ajaxDataLogin("/login"  ,send_data).then(res => {
+          //打印请求成功结果
+          console.log('res',res)
+          console.log('res.data',res.data) 
+          if (res.code == 200) {
+				   
+           var g_token = res.data.token
+            // 设置全局缓存token
+            sessionStorage.setItem("g_token",g_token)
+            console.log('g_token',g_token)
+            
+            var g_pastureId = res.data.pastureId
+            var g_employeeId = res.data.employeeId
+            var g_userNameSee = res.data.userName
+            var g_actualName = res.data.actualName
+            
+            
+            sessionStorage.setItem("g_pastureId",g_pastureId)
+            sessionStorage.setItem("g_employeeId",g_employeeId)
+            sessionStorage.setItem("g_userNameSee",g_userNameSee)
+            sessionStorage.setItem("g_actualName",g_actualName)
+ 
+        
+ 
+              //成功登录后跳转页面
+              me.$router.push("/home")
+    
+            } else {
+              me.$message({ type: 'error', message: '登陆失败！' + res.data.msg, duration: 2000 })
+             
+            }
+        }).catch(function(error){
+          //打印请求失败结果
+          console.log('error',error)
+          me.$message({ type: 'error', message: '请求错误！' +error.response.data.errors, duration: 2000 })
+        })
+
+
+
+       })
+
+      
+      
+      
+    },
+
+   
+    
+    //重置登录表单
+    resetLoginForm(){
+      //this.$refs.loginFormRef直接绑定  resetFields()重置
+      this.$refs.loginFormRef.resetFields();
+    }
+  }
+}
+</script>
+<!-- 加了scoped，则是仅在此组件里生效 -->
+<style scoped>
+ 
+ 
+
+
+.login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
+    box-shadow: 0 0 0px 1000px #fff inset !important;
+    -webkit-text-fill-color: #000 !important;
+}
+
+.login-container{position: relative;height: 100%;width: 100%; min-height: 500px;background:  url("../assets/bg.png") no-repeat; }
+
+.new-login{   width: 1000px;height: 700px;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto; background:  url("../assets/lg-img.png") no-repeat; }
+ 
+ 
+.new-login-l{float:left;height:100%;width:50%;position: relative; }
+ 
+.new-login-r{ float:left;height:80%;width:40%;position: relative; float:left; }
+
+
+.new-login-r-title{margin-top: 55%;font-size: 20px;font-weight: 600;color: #37bdff;text-align: left;padding-left: 55px}
+.new-login-r .login-form{  position: relative;width: 520px;max-width: 100%;overflow: hidden;height: 48%;}
+
+
+.login-form .svg-container{padding: 6px 5px 6px 15px; color: #129bda; vertical-align: middle; width: 30px; display: inline-block;} 
+.login-form .el-input {  display: inline-block; width: 80%;   }
+    
+.new-login-r  .el-form-item {
+          border: none; background: none; border-radius: 5px; color: #4fdeff;width: 73%; margin: 10px auto;height: 30% }
+
+
+.new-login-r  .el-form-item  /deep/.el-form-item__content {
+            line-height: 16%; border: 1px solid #1b67b7;background: #08204b;border-radius: 4px
+          }
+.new-login-r  .el-form-item  .el-form-item__content .el-input  /deep/.el-input__inner{border: none !important;border-radius:0px;background: #08204b;color: #FFF;}
+       
+          .rememberPassword  /deep/.el-form-item__content {line-height:16%; border: none;padding-bottom: 10px;}
+          .rememberPassword  /deep/.el-form-item__content span{padding-left: 5px;}  
+
+
+
+.password{margin-top: 10px;margin-bottom: 20px;}
+
+.subbtn{position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;  height: 60px;background:  url("../assets/btnss.png") no-repeat;background-size: 300px 60px }
+
+/* .btn{position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;  }
+ .btn  span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
+  */
+
+
+
+
+
+    
+</style>