diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4fb8065..b909440 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,39 +3,49 @@
   <div :style="{backgroundImage:'url('+bgUrl+')'}" class="login-container">
     <div class="login-div">
       <div ref="element" class="right-div">
-        <el-form id= "login-form" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="right">
-          <h5 class="login-title">用户登录</h5>
-          <h5 class="login-subtitle">USER LOGIN</h5>
-          <el-form-item prop="username">
+        <h5 class="login-title">用户登录</h5>
+
+        <el-tabs v-model="loginType" @tab-click="handleChangeLoginType">
+          <el-tab-pane label="密码登录" name="password">
+            <el-form id= "login-form" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="right">
+              <el-form-item prop="username">
             <span class="svg-container">
               <svg-icon icon-class="user" />
             </span>
-            <el-input v-model.trim="loginForm.username" name="username" type="text" auto-complete="on" placeholder="用户名" />
-          </el-form-item>
-          <el-form-item prop="password">
+                <el-input v-model.trim="loginForm.username" name="username" type="text" auto-complete="on" placeholder="用户名" />
+              </el-form-item>
+              <el-form-item prop="password">
             <span class="svg-container">
               <svg-icon icon-class="password" />
             </span>
-            <el-input
-              :type="pwdType"
-              v-model.trim="loginForm.password"
-              name="password"
-              auto-complete="on"
-              placeholder="密码"
-              @keyup.enter.native="handleLogin" />
-            <span class="show-pwd" @click="showPwd">
+                <el-input
+                  :type="pwdType"
+                  v-model.trim="loginForm.password"
+                  name="password"
+                  auto-complete="on"
+                  placeholder="密码"
+                  @keyup.enter.native="handleLogin" />
+                <span class="show-pwd" @click="showPwd">
               <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
             </span>
-          </el-form-item>
+              </el-form-item>
 
-          <kaptcha-comp v-if="showKaptcha" ref="kaptcha" @passKaptcha="passKaptcha"/>
+              <kaptcha-comp v-if="showKaptcha" ref="kaptcha" @passKaptcha="passKaptcha"/>
 
-          <el-form-item>
-            <el-button :loading="loading" class="login-btn" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-              登录
-            </el-button>
-          </el-form-item>
-        </el-form>
+              <el-form-item>
+                <el-button :loading="loading" class="login-btn" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
+                  登录
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+
+          <el-tab-pane label="人脸登录" name="face">
+            <div class="face-outer">
+              <video id="video" width="392" autoplay></video>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
       <div class="clear-div"/>
     </div>
@@ -85,6 +95,7 @@
         callback()
       }
     }
+
     return {
       loginForm: {
         username: '',
@@ -96,11 +107,12 @@
         password: [{ required: true, trigger: ['blur', 'change'], validator: validatePass }],
         kaptcha: [{ required: false, trigger: ['blur', 'change'], validator: validateKaptcha }]
       },
+      loginType: 'password',
       loading: false,
       pwdType: 'password',
       redirect: '/',
       showKaptcha: false, // 是否显示验证码
-      bgUrl: require('../../assets/login_images/bg1.png') // 背景图片
+      bgUrl: require('../../assets/login_images/bg1.png'), // 背景图片
     }
   },
   watch: {
@@ -164,6 +176,55 @@
           return false
         }
       })
+    },
+    handleChangeLoginType() {
+      // 如果是人脸登录方式则打开摄像头
+      const video = document.getElementById('video')
+      if (this.loginType === 'face') {
+        this.openVideo(video)
+      } else {
+        this.closeVideo(video)
+      }
+    },
+    openVideo(video) {
+      navigator.getUserMedia(
+        {
+          video: true,
+          audio: true
+        },
+        (stream)=> {
+          this.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1]
+          //创建video元素
+          // const video = document.getElementById("video")
+          console.log("video", video)
+          //指定src
+          if (window.URL) {
+            console.log("window.URL", window.URL)
+            try {
+              video.src = window.URL.createObjectURL(stream)
+            } catch (e) {
+              video.srcObject = stream
+            }
+          } else {
+            video.src = stream
+          }
+          //视频播放
+          video.play();
+        },
+        (error)=> {
+          console.log("调用摄像头错误error",error)
+        }
+      )
+    },
+    closeVideo(video) {
+      if (!video) return
+      let stream = video.srcObject
+      console.log(stream)
+      let tracks = stream.getTracks()
+      tracks.forEach(track => {
+        track.stop()
+      })
+      video.srcObject = null
     }
   }
 }
@@ -176,6 +237,11 @@
 
 /* reset element-ui css */
 .login-container {
+  .face-outer {
+    border: 2px solid #00ffff;
+    width: 400px;
+    height: 302px;
+  }
   .el-input {
     display: inline-block;
     height: 40px;
@@ -280,7 +346,7 @@
   }
   .login-form {
     max-width: 100%;
-    padding: 15px 15px 5px 15px;
+    padding: 15px 0px;
     margin: auto;
     overflow:hidden;
     .el-form-item{