diff --git a/src/layouts/default/header/components/lock/LockModal.vue b/src/layouts/default/header/components/lock/LockModal.vue
index 409cf30a..fa3feb82 100644
--- a/src/layouts/default/header/components/lock/LockModal.vue
+++ b/src/layouts/default/header/components/lock/LockModal.vue
@@ -52,7 +52,7 @@ const avatar = computed(() => {
 </script>
 
 <template>
-  <BasicModal :footer="null" :title="t('layout.header.lockScreen')" v-bind="$attrs" :class="prefixCls" @register="register">
+  <BasicModal :footer="null" width="25%" :title="t('layout.header.lockScreen')" v-bind="$attrs" :class="prefixCls" @register="register">
     <div :class="`${prefixCls}__entry`">
       <div :class="`${prefixCls}__header`">
         <img :src="avatar" :class="`${prefixCls}__header-img`">
@@ -101,6 +101,7 @@ const avatar = computed(() => {
   }
 
   &__footer {
+    margin-top: 16px;
     text-align: center;
   }
 }
diff --git a/src/views/base/lock/LockPage.vue b/src/views/base/lock/LockPage.vue
index 07156ac8..b337f51a 100644
--- a/src/views/base/lock/LockPage.vue
+++ b/src/views/base/lock/LockPage.vue
@@ -57,13 +57,12 @@ function handleShowForm(show = false) {
 </script>
 
 <template>
-  <div :class="prefixCls" class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center">
+  <div :class="prefixCls" class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center" @click="handleShowForm(false)">
     <!-- eslint-disable max-len -->
     <div
       v-show="showDate"
       :class="`${prefixCls}__unlock`"
       class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl flex-col cursor-pointer transform translate-x-1/2"
-      @click="handleShowForm(false)"
     >
       <LockOutlined />
       <span>{{ t('sys.lock.unlock') }}</span>