diff --git a/src/assets/styles/unlock.scss b/src/assets/styles/unlock.scss
new file mode 100644
index 00000000..e66ae073
--- /dev/null
+++ b/src/assets/styles/unlock.scss
@@ -0,0 +1,177 @@
+.unlock-body-con {
+  position: absolute;
+  width: 400px;
+  height: 100px;
+  left: 50%;
+  top: 50%;
+  margin-left: -200px;
+  margin-top: -200px;
+  transform-origin: center center;
+  z-index: 10000;
+  .unlock-avator-con {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 2px solid white;
+    cursor: pointer;
+    transition: all 0.5s;
+    z-index: 12;
+    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
+    .unlock-avator-img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      z-index: 7;
+    }
+    .unlock-avator-cover {
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.6);
+      z-index: 11600;
+      position: absolute;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      transition: opacity 0.2s;
+      color: white;
+      span {
+        display: block;
+        margin: 20px auto 5px;
+        text-align: center;
+      }
+      p {
+        text-align: center;
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
+    &:hover .unlock-avator-cover {
+      opacity: 1;
+      transition: opacity 0.2s;
+    }
+  }
+  .unlock-avator-under-back {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-45px, -50%);
+    box-sizing: border-box;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background:rgb(16, 22, 44);;
+    transition: all 0.5s;
+    z-index: 5;
+  }
+  .unlock-input-con {
+    position: absolute;
+    height: 70px;
+    width: 350px;
+    top: 15px;
+    right: 0px;
+    .unlock-input-overflow-con {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      overflow: hidden;
+      .unlock-overflow-body {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        transition: all 0.5s ease 0.5s;
+        .unlock-input {
+          float: left;
+          display: block;
+          box-sizing: content-box;
+          height: 22px;
+          width: 230px;
+          font-size: 18px;
+          outline: none;
+          padding: 11px 10px 11px 30px;
+          border: 2px solid #e2ddde;
+          margin-top: 10px;
+        }
+        .unlock-btn {
+          float: left;
+          display: block;
+          font-size: 20px;
+          padding: 7px 30px;
+          cursor: pointer;
+          border-radius: 0 25px 25px 0;
+          border: 2px solid #e2ddde;
+          border-left: none;
+          background: #2d8cf0;
+          outline: none;
+          transition: all 0.2s;
+          margin-top: 10px;
+          &:hover {
+            background: #5cadff;
+            box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.2);
+          }
+        }
+        .click-unlock-btn {
+          background: #2b85e4 !important;
+        }
+      }
+    }
+  }
+  .unlock-locking-tip-con {
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    margin-left: -50px;
+    bottom: -50px;
+    color: white;
+    font-size: 18px;
+  }
+}
+@keyframes unlock-in {
+  0% {
+    transform: scale(0);
+  }
+  80% {
+    transform: scale(0);
+  }
+  88% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes unlock-out {
+  0% {
+    transform: scale(1);
+  }
+  60% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+.show-unlock-enter-active {
+  animation: unlock-in 1.4s ease;
+}
+.show-unlock-leave-to {
+  opacity: 0;
+}
+.show-unlock-leave-active {
+  transition: opacity 0.2s;
+}
+.unlock-con {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/components/LockScreen/lock.vue b/src/components/LockScreen/lock.vue
new file mode 100644
index 00000000..1baea736
--- /dev/null
+++ b/src/components/LockScreen/lock.vue
@@ -0,0 +1,69 @@
+<template>
+  <div @click="lockScreen"
+       style="cursor:pointer;">
+    <i class="iconfont iconsuopingmima"
+       v-show="false"
+       @click="lockScreen"
+       style="cursor: pointer;color:white"></i>
+    <span style="font-size:14px;color:white;margin-left:5px"  v-show="false">锁屏</span>
+  </div>
+</template>
+
+<script>
+import Cookies from 'js-cookie';
+const setLockBackSize = () => {
+  let x = document.body.clientWidth;
+  let y = document.body.clientHeight;
+  let r = Math.sqrt(x * x + y * y);
+  return parseInt(r);
+};
+export default {
+  name: 'lockScreen',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    lockScreen () {
+      let lockScreenBack = document.getElementById('lock_screen_back');
+      lockScreenBack.style.transition = 'all 3s';
+      lockScreenBack.style.zIndex = 10000;
+      lockScreenBack.style.boxShadow = '0 0 0 ' + this.lockScreenSize + 'px rgb(16, 22, 44) inset';
+      this.showUnlock = true;
+      Cookies.set('pageRoute', this.$route.path); // 本地存储锁屏之前打开的页面以便解锁后打开
+      setTimeout(() => {
+        lockScreenBack.style.transition = 'all 0s';
+        this.$router.push({
+          name: 'locking'
+        });
+      }, 800);
+      Cookies.set('locking', '1');
+      this.$emit('clearTime')
+    }
+  },
+  mounted () {
+    let lockScreenBack;
+    if (!document.getElementById('lock_screen_back')) {
+      let lockdiv = document.createElement('div');
+      lockdiv.setAttribute('id', 'lock_screen_back');
+      lockdiv.setAttribute('class', 'lock-screen-back');
+      document.body.appendChild(lockdiv);
+      lockScreenBack = document.getElementById('lock_screen_back');
+      window.addEventListener('resize', () => {
+        let size = setLockBackSize();
+        this.lockScreenSize = size;
+        lockScreenBack.style.transition = 'all 0s';
+        lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
+      });
+    } else {
+      lockScreenBack = document.getElementById('lock_screen_back');
+    }
+    let size = setLockBackSize();
+    this.lockScreenSize = size;
+    lockScreenBack.style.transition = 'all 3s';
+    lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
+  }
+};
+</script>
diff --git a/src/components/LockScreen/locking-page.vue b/src/components/LockScreen/locking-page.vue
new file mode 100644
index 00000000..ba2c23bf
--- /dev/null
+++ b/src/components/LockScreen/locking-page.vue
@@ -0,0 +1,66 @@
+<template>
+  <div style="width: 100%;height: 100%;background: rgb(16, 22, 44)">
+    <div class="unlock-con"
+         style="z-index:10000">
+      <unlock :show-unlock="showUnlock"
+              @on-unlock="handleUnlock"
+              @on-unlockFalse="handleUnlockFalse"></unlock>
+    </div>
+  </div>
+</template>
+
+<script>
+import unlock from './unlock.vue';
+import Cookies from 'js-cookie';
+
+export default {
+  components: {
+    unlock
+  },
+  data () {
+    return {
+      showUnlock: false
+    };
+  },
+  methods: {
+    handleUnlock () {
+      let lockScreenBack = document.getElementById('lock_screen_back');
+      this.showUnlock = false;
+      lockScreenBack.style.zIndex = 1005;
+      lockScreenBack.style.boxShadow = '0 0 0 0 #667aa6 inset';
+      this.$router.push({
+        path: Cookies.get('pageRoute') // 解锁之后跳转到锁屏之前的页面
+      });
+    }
+    ,
+    handleUnlockFalse () {
+      let lockScreenBack = document.getElementById('lock_screen_back');
+      this.showUnlock = false;
+      lockScreenBack.style.zIndex = 1005;
+      lockScreenBack.style.boxShadow = '0 0 0 0 #667aa6 inset';
+      sessionStorage.clear()
+      localStorage.clear()
+      this.$router.push({
+        name: 'login'
+      });
+      window.document.title = '登录'
+    }
+  },
+  mounted () {
+    this.showUnlock = true;
+    history.pushState(null, null, document.URL);
+    window.addEventListener('popstate', function () {
+      history.pushState(null, null, document.URL);
+    });
+
+    if (!document.getElementById('lock_screen_back')) {
+      let lockdiv = document.createElement('div');
+      lockdiv.setAttribute('id', 'lock_screen_back');
+      lockdiv.setAttribute('class', 'lock-screen-back');
+      document.body.appendChild(lockdiv);
+    }
+    let lockScreenBack = document.getElementById('lock_screen_back');
+    lockScreenBack.style.zIndex = 1005;
+  }
+}
+</script>
diff --git a/src/components/LockScreen/unlock.vue b/src/components/LockScreen/unlock.vue
new file mode 100644
index 00000000..17a6b117
--- /dev/null
+++ b/src/components/LockScreen/unlock.vue
@@ -0,0 +1,147 @@
+<style lang="scss">
+@import "@/assets/styles/unlock.scss";
+.unlock-btn {
+  height: 50px;
+}
+</style>
+
+<template>
+  <transition name="show-unlock">
+    <div class="unlock-body-con"
+         v-if="showUnlock"
+         @keydown.enter="handleUnlock"
+         style="z-index:10000">
+      <div @click="handleClickAvator"
+           class="unlock-avator-con"
+           :style="{marginLeft: avatorLeft}"
+           style="padding:18px">
+        <img class="unlock-avator-img"
+             :src="headPortrait">
+        <div class="unlock-avator-cover">
+          <span>
+            <i class="el-icon-key"></i>
+          </span>
+          <p>解锁</p>
+        </div>
+      </div>
+      <div class="unlock-avator-under-back"
+           :style="{marginLeft: avatorLeft}"></div>
+      <div class="unlock-input-con">
+        <div class="unlock-input-overflow-con">
+          <div class="unlock-overflow-body"
+               :style="{right: inputLeft}"
+               style="display: flex;align-items: center">
+            <input ref="inputEle"
+                   v-model="password"
+                   autocomplete="new-password"
+                   class="unlock-input"
+                   type="password"
+                   placeholder="密码同登录密码" />
+            <button ref="unlockBtn"
+                    @mousedown="unlockMousedown"
+                    @mouseup="unlockMouseup"
+                    @click="handleUnlock"
+                    class="unlock-btn"
+                    style="display: flex;align-items: center;height:48px">
+              <i class="el-icon-key" style="font-size:25px;color:white;transform:rotate(90deg)"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="unlock-locking-tip-con">已锁定</div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Cookies from 'js-cookie';
+export default {
+  name: 'Unlock',
+  data () {
+    return {
+      avatorLeft: '0px',
+      inputLeft: '400px',
+      password: '',
+      check: null,
+      errorNum: 0,
+      headPortrait:require('@/assets/images/guideLogo.png'),
+      keyLogo:require('@/assets/images/logo/short_logo.png'),
+    };
+  },
+  props: {
+    showUnlock: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(['name'])
+  },
+  methods: {
+    validator () {
+      let params = {
+        username:this.name,
+        password:this.password,
+        rememberMe:false
+      }
+      if(this.isEmpty(this.password)){
+        this.$modal.msgWarning('请输入解锁密码!')
+        return
+      }
+      this.$store.dispatch("Login", params).then(() => {
+        this.avatorLeft = '0px';
+        this.inputLeft = '400px';
+        this.password = '';
+        Cookies.set('locking', '0');
+        this.$emit('on-unlock');
+        let lockScreenBack = document.getElementById('lock_screen_back');
+        lockScreenBack.style.zIndex = -1;
+        this.errorNum = 0;
+        this.$modal.msgSuccess('密码正确，解锁成功');
+      }).catch(err=>{
+
+      })
+    },
+    handleClickAvator () {
+      this.avatorLeft = '-184px';
+      this.inputLeft = '0px';
+      this.$refs.inputEle.focus();
+    },
+    handleUnlock (e) {
+      this.validator()
+      // if (this.password == sessionStorage.loginPwd) {
+      //   this.avatorLeft = '0px';
+      //   this.inputLeft = '400px';
+      //   this.password = '';
+      //   Cookies.set('locking', '0');
+      //   this.$emit('on-unlock');
+      //   let lockScreenBack = document.getElementById('lock_screen_back');
+      //   lockScreenBack.style.zIndex = -1;
+      //   this.errorNum = 0;
+      //   this.$modal.msgSuccess('密码正确，解锁成功');
+      // } else {
+      //   this.errorNum = this.errorNum + 1;
+      //   if (this.errorNum === 3) {
+      //     this.avatorLeft = '0px';
+      //     this.inputLeft = '400px';
+      //     this.password = '';
+      //     Cookies.set('locking', '0');
+      //     this.$emit('on-unlockFalse');
+      //     let lockScreenBack = document.getElementById('lock_screen_back');
+      //     lockScreenBack.style.zIndex = -1;
+      //     this.errorNum = 0;
+      //   } else {
+      //     this.$modal.msgWarning('密码错误' + this.errorNum + '次,连续三次将自动退出！请重新输入');
+      //   }
+      // }
+    },
+    unlockMousedown () {
+      this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn';
+    },
+    unlockMouseup () {
+      this.$refs.unlockBtn.className = 'unlock-btn';
+    }
+  }
+};
+</script>