diff --git a/vue-admin-wonderful-next-images/user/photo.jpg b/vue-admin-wonderful-next-images/user/photo.jpg
new file mode 100644
index 0000000..6c99ab7
Binary files /dev/null and b/vue-admin-wonderful-next-images/user/photo.jpg differ
diff --git a/vue-admin-wonderful-next/index.html b/vue-admin-wonderful-next/index.html
index 92d15bb..7a7a4be 100644
--- a/vue-admin-wonderful-next/index.html
+++ b/vue-admin-wonderful-next/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/loading.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>vue-admin-wonderful</title>
+    <title>demos</title>
   </head>
   <body>
     <div id="app">
diff --git a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue b/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
index 7b7c860..9dd731b 100644
--- a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
@@ -1,18 +1,95 @@
 <template>
-  <div class="layout-lock-screen layout-lock-screen-mask">
+  <div class="layout-lock-screen-mask"></div>
+  <div class="layout-lock-screen-img" :class="{'layout-lock-screen-filter':isShowLoockLogin}"></div>
+  <div class="layout-lock-screen">
     <div class="layout-lock-screen-date">
       <div class="layout-lock-screen-date-box">
         <div class="layout-lock-screen-date-box-time">22:14</div>
         <div class="layout-lock-screen-date-box-info">1月11日，星期一</div>
       </div>
     </div>
+    <transition name="el-zoom-in-center">
+      <div v-show="isShowLoockLogin" class="layout-lock-screen-login">
+        <div class="layout-lock-screen-login-box">
+          <div class="layout-lock-screen-login-box-img">
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
+          </div>
+          <div class="layout-lock-screen-login-box-name">Administrator</div>
+          <div class="layout-lock-screen-login-box-value">
+            <el-input placeholder="密码">
+              <template #append>
+                <el-button icon="el-icon-right"></el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="layout-lock-screen-login-icon">
+          <i class="el-icon-microphone"></i>
+          <i class="el-icon-alarm-clock"></i>
+          <i class="el-icon-switch-button"></i>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script lang="ts">
+import { nextTick, onMounted, reactive, toRefs } from "vue";
 export default {
   name: "layoutLockScreen",
-  setup() {},
+  setup() {
+    const state = reactive({
+      moveDifference: 0,
+      transparency: 1,
+      isShowLoockLogin: false,
+    });
+    const initGetElement = () => {
+      nextTick(() => {
+        const el = document.querySelector(".layout-lock-screen-date");
+        el.onmousedown = (down) => {
+          document.onmousemove = (move) => {
+            let opacitys = (state.transparency -= 1 / 200);
+            state.moveDifference = move.clientY - down.clientY;
+            if (state.moveDifference >= 0) return false;
+            el.setAttribute(
+              "style",
+              `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`
+            );
+            if (state.moveDifference < -400) {
+              el.setAttribute(
+                "style",
+                `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`
+              );
+              state.moveDifference = -el.clientHeight;
+              setTimeout(() => {
+                el.remove();
+              }, 300);
+            }
+            if (state.moveDifference === -el.clientHeight) {
+              state.isShowLoockLogin = true;
+            }
+          };
+          document.onmouseup = (seup) => {
+            state.transparency = 1;
+            if (state.moveDifference >= -400) {
+              el.setAttribute(
+                "style",
+                `top:0px;opacity:1;transition:all 0.3s ease;`
+              );
+            }
+            document.onmousemove = null;
+            document.onmouseup = null;
+          };
+        };
+      });
+    };
+    onMounted(() => {
+      initGetElement();
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
 };
 </script>
 
@@ -24,23 +101,32 @@ export default {
   width: 100%;
   height: 100%;
 }
+.layout-lock-screen-filter {
+  filter: blur(5px);
+}
 .layout-lock-screen-mask {
   background: rgba(255, 255, 255, 1);
   @extend .layout-lock-screen-fixed;
+  z-index: 9999990;
 }
-.layout-lock-screen {
+.layout-lock-screen-img {
   @extend .layout-lock-screen-fixed;
   background-image: url("https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG");
   background-size: 100% 100%;
-  z-index: 9999999;
+  z-index: 9999991;
+}
+.layout-lock-screen {
+  @extend .layout-lock-screen-fixed;
+  z-index: 9999992;
   &-date {
     position: absolute;
     left: 0;
-    bottom: 0;
     top: 0;
-    right: 0;
+    width: 100%;
+    height: 100%;
     color: #ffffff;
-    border: 1px solid red;
+    z-index: 9999993;
+    user-select: none;
     &-box {
       position: absolute;
       left: 30px;
@@ -53,5 +139,56 @@ export default {
       }
     }
   }
+  &-login {
+    position: relative;
+    z-index: 9999994;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #ffffff;
+    &-box {
+      text-align: center;
+      margin: auto;
+      &-img {
+        width: 180px;
+        height: 180px;
+        margin: auto;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 100%;
+        }
+      }
+      &-name {
+        font-size: 26px;
+        margin: 15px 0 30px;
+      }
+    }
+    &-icon {
+      position: absolute;
+      right: 30px;
+      bottom: 30px;
+      i {
+        font-size: 20px;
+        margin-left: 15px;
+        cursor: pointer;
+        opacity: 0.8;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+::v-deep(.el-input-group__append) {
+  background: #ffffff;
+  padding: 0px 15px;
+}
+::v-deep(.el-input__inner) {
+  border-right-color: #f6f6f6;
 }
 </style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
index 7d464df..6e7e47b 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
@@ -222,13 +222,14 @@ export default {
     .layout-navbars-tagsview-ul-li {
       height: 34px !important;
       line-height: 34px !important;
-      border: 1px solid #e6e6e6 !important;
+      border-right: 1px solid #f6f6f6 !important;
       border-top: none !important;
+      border-bottom: none !important;
       border-left: none !important;
       border-radius: 0 !important;
       margin-right: 0 !important;
       &:first-of-type {
-        border-left: 1px solid #e6e6e6 !important;
+        border-left: 1px solid #f6f6f6 !important;
       }
       .layout-icon-active {
         display: none;
@@ -240,8 +241,8 @@ export default {
     .is-active {
       background: white !important;
       color: var(--color-primary) !important;
-      border-bottom: 1px solid !important;
-      border-bottom-color: var(--color-primary) !important;
+      border-top: 1px solid !important;
+      border-top-color: var(--color-primary) !important;
     }
   }
   // 风格4
