diff --git a/public/build/beike/admin/css/app.css b/public/build/beike/admin/css/app.css
index 5b492b2d..c528d89a 100644
--- a/public/build/beike/admin/css/app.css
+++ b/public/build/beike/admin/css/app.css
@@ -447,3 +447,47 @@ table.table.table-striped > tbody > tr:nth-of-type(2n) {
 .el-tabs__item {
   padding: 0 10px;
 }
+
+body.page-login {
+  background-image: url("/image/login-bg.svg");
+  background-size: cover;
+  background-position: 50%;
+}
+body.page-login .form-text.text-danger {
+  font-size: 0.8rem;
+}
+body.page-login.seller-register .form-group, body.page-login.password-reset .form-group {
+  margin-bottom: 1.5rem;
+}
+body.page-login.seller-register .form-group label, body.page-login.password-reset .form-group label {
+  display: none;
+}
+body.page-login .card {
+  box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
+  border: none;
+  border-radius: 0.85rem;
+  overflow: hidden;
+  align-items: center;
+  flex-wrap: wrap;
+}
+@media (min-width: 768px) {
+  body.page-login .card .w-480 {
+    width: 420px;
+    margin: 2rem 0;
+  }
+}
+body.page-login button[type=submit] {
+  font-size: 1rem;
+  background-image: linear-gradient(310deg, #fd560f, #fdb504);
+  border: none;
+}
+body.page-login .btn:not(.btn-link) {
+  padding: 0.7rem 1rem;
+  border-radius: 0.5rem;
+  transition: all 0.15s ease-in;
+  box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
+}
+body.page-login .btn:not(.btn-link):hover {
+  transform: scale(1.02);
+  color: #fff;
+}
diff --git a/public/build/beike/admin/css/bootstrap.css b/public/build/beike/admin/css/bootstrap.css
index aeefa01b..9260f93c 100644
--- a/public/build/beike/admin/css/bootstrap.css
+++ b/public/build/beike/admin/css/bootstrap.css
@@ -9409,7 +9409,7 @@ textarea.form-control-lg {
 }
 .form-floating > .form-control,
 .form-floating > .form-select {
-  height: calc(3.5rem + 2px);
+  height: 50px;
   line-height: 1.25;
 }
 .form-floating > label {
@@ -9417,7 +9417,7 @@ textarea.form-control-lg {
   top: 0;
   left: 0;
   height: 100%;
-  padding: 1rem 0.75rem;
+  padding: 0.8rem 0.75rem;
   pointer-events: none;
   border: 1px solid transparent;
   transform-origin: 0 0;
@@ -9429,7 +9429,7 @@ textarea.form-control-lg {
   }
 }
 .form-floating > .form-control {
-  padding: 1rem 0.75rem;
+  padding: 0.8rem 0.75rem;
 }
 .form-floating > .form-control::-moz-placeholder {
   color: transparent;
@@ -9441,23 +9441,23 @@ textarea.form-control-lg {
   color: transparent;
 }
 .form-floating > .form-control:not(:-moz-placeholder-shown) {
-  padding-top: 1.625rem;
+  padding-top: 1.325rem;
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-control:not(:-ms-input-placeholder) {
-  padding-top: 1.625rem;
+  padding-top: 1.325rem;
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
-  padding-top: 1.625rem;
+  padding-top: 1.325rem;
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-control:-webkit-autofill {
-  padding-top: 1.625rem;
+  padding-top: 1.325rem;
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-select {
-  padding-top: 1.625rem;
+  padding-top: 1.325rem;
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
diff --git a/public/image/login-bg.svg b/public/image/login-bg.svg
new file mode 100644
index 00000000..c20c6304
--- /dev/null
+++ b/public/image/login-bg.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 800 800'><g fill-opacity='0.22'><circle fill='#ffffff' cx='400' cy='400' r='600'/><circle fill='#edf1ff' cx='400' cy='400' r='500'/><circle fill='#c8d4ff' cx='400' cy='400' r='300'/><circle fill='#b4c5ff' cx='400' cy='400' r='200'/><circle fill='#9ab0ff' cx='400' cy='400' r='100'/></g></svg>
\ No newline at end of file
diff --git a/resources/beike/admin/css/app.scss b/resources/beike/admin/css/app.scss
index 8ae97908..f5ca35ef 100644
--- a/resources/beike/admin/css/app.scss
+++ b/resources/beike/admin/css/app.scss
@@ -20,3 +20,4 @@ $main_color: #fd560f;
 @import 'subscription';
 @import 'form';
 @import 'element-ui';
+@import 'login';
diff --git a/resources/beike/admin/css/bootstrap/bootstrap.scss b/resources/beike/admin/css/bootstrap/bootstrap.scss
index 43c44de1..c1294541 100644
--- a/resources/beike/admin/css/bootstrap/bootstrap.scss
+++ b/resources/beike/admin/css/bootstrap/bootstrap.scss
@@ -14,6 +14,10 @@ $form-check-input-width: 1.2em;
 $form-switch-width: 2.6em;
 $link-decoration: none;
 $link-color: #1890ff;
+$form-floating-input-padding-t:   1.325rem;
+$form-floating-input-padding-b:   .625rem;
+$form-floating-padding-y:         .8rem;
+$form-floating-height:        50px;
 
 @import './bootstrap-icons';
 @import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
diff --git a/resources/beike/admin/css/login.scss b/resources/beike/admin/css/login.scss
index 52b5635c..54b04fbf 100644
--- a/resources/beike/admin/css/login.scss
+++ b/resources/beike/admin/css/login.scss
@@ -8,14 +8,12 @@
 // @modified         2021-08-24 15:07:05
 //
 
-$main_color: #fd560f;
+body.page-login {
+  .form-text.text-danger {
+    font-size: 0.8rem;
+  }
 
-.form-text.text-danger {
-  font-size: 0.8rem;
-}
-
-body {
-  background-image: url("/images/login-bg.svg");
+  background-image: url("/image/login-bg.svg");
   background-size: cover;
   background-position: 50%;
 
@@ -28,93 +26,59 @@ body {
       }
     }
   }
-}
 
 
+  .card {
+    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
+    border: none;
+    border-radius: .85rem;
+    overflow: hidden;
+    align-items: center;
+    flex-wrap: wrap;
 
-.card {
-  box-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
-  border: none;
-  border-radius: .85rem;
-  overflow: hidden;
-}
+    .w-480 {
+      @media (min-width: 768px) {
+        width: 420px;
+        margin: 2rem 0;
+      }
+    }
 
-.card-header {
-  border-bottom: none;
-  background: #fff;
-  font-size: 17px;
-  padding-top: 40px;
+    .card-body {
+      // padding: 1rem 1.7rem;
+    }
 
-  h5 {
-    color: #344767;
-    font-weight: 400;
-    margin-bottom: 0;
+    .card-header {
+      // max-width: 450px;
+      // padding-left: 1.7rem;
+      // padding-right: 1.7rem;
+    }
   }
-}
 
+  button[type="submit"] {
+    font-size: 1rem;
+    background-image: linear-gradient(310deg, $main_color, #fdb504);
+    // background-image: linear-gradient(310deg, $main_color, #fdb504);
+    border: none;
+  }
 
-button[type="submit"] {
-  background-image: linear-gradient(310deg, $main_color, #fdb504);
-  // background-image: linear-gradient(310deg, $main_color, #fdb504);
-  border: none;
-}
-
-.form-group {
-  margin-bottom: 2rem;
-
-  input.form-control {
-    border: 1px solid #d2d6da;
+  .btn:not(.btn-link) {
+    // padding: .50rem 1.5rem;
+    padding: 0.7rem 1rem;
     border-radius: .5rem;
-    font-size: .875rem;
-    font-weight: 400;
-    color: #495057;
-    line-height: 1.4rem;
-    padding: .5rem .75rem;
-    height: 40px;
+    transition: all .15s ease-in;
+    box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
+
+    &:hover {
+      transform: scale(1.02);
+      color: #fff;
+    }
   }
-}
-
-.partition {
-  font-size: 12px;
-
-  &:after, &:before {
-    content: "";
-    display: inline-block;
-    width: 30%;
-    height: 1px;
-    position: relative;
-    vertical-align: middle;
-  }
-
-  &:after {
-    left: .5em;
-    margin-right: -50%;
-    background: linear-gradient(90deg,rgba(117, 117, 117, .40),rgb(117, 117, 117, .40), transparent);
-  }
-
-  &:before {
-    background: linear-gradient(90deg,transparent,rgba(117, 117, 117, .40),rgb(117, 117, 117, .40));
-    right: .5em;
-    margin-left: -50%;
-  }
-}
-
-.btn:not(.btn-link) {
-  padding: .50rem 1.5rem;
-  border-radius: .5rem;
-  transition: all .15s ease-in;
-  box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
-
-  &:hover {
-    transform: scale(1.02);
-    color: #fff;
-  }
-}
-
-
-.bg-gradient-dark {
-  background-image: linear-gradient(310deg,#141727,#3a416f);
-  background-color: #344767;
-  border: none;
-  color: #fff;
+
+
+  // .bg-gradient-dark {
+  //   background-image: linear-gradient(310deg,#141727,#3a416f);
+  //   background-color: #344767;
+  //   border: none;
+  //   color: #fff;
+  // }
 }
diff --git a/resources/beike/admin/views/pages/login/login.blade.php b/resources/beike/admin/views/pages/login/login.blade.php
index 84b5b956..8c2a72a7 100644
--- a/resources/beike/admin/views/pages/login/login.blade.php
+++ b/resources/beike/admin/views/pages/login/login.blade.php
@@ -2,44 +2,57 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+  <link href="{{ mix('/build/beike/admin/css/bootstrap.css') }}" rel="stylesheet">
+  {{-- <link href="{{ mix('build/css/admin/login.css') }}" rel="stylesheet"> --}}
+  <link href="{{ mix('build/beike/admin/css/app.css') }}" rel="stylesheet">
+  <title>admin login</title>
 </head>
-<body>
-  <form action="{{ admin_route('login.store') }}" method="post">
-    @csrf
+<body class="page-login">
+  <div class="d-flex align-items-center vh-100 pt-2 pt-sm-5 pb-4 pb-sm-5">
+    <div class="container">
+      <div class="justify-content-center row">
+        <div class="col-xl-5 col-lg-5 col-md-6 mx-auto">
+          <div class="card">
+            <div class="w-480">
+              <div class="card-header mt-3 mb-4">
+                <h4 class="fw-bold">登录到 beikeshop 后台</h4>
+                <div class="text-muted fw-normal">登录到 beikeshop 后台</div>
+              </div>
 
-    <div class="form-group">
-      <div class="input-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text" id="email">邮箱</span>
+              <div class="card-body">
+                <form action="{{ admin_route('login.store') }}" method="post">
+                  @csrf
+
+                  <div class="form-floating mb-4">
+                    <input type="text" name="email" class="form-control" id="email-input" value="{{ old('email') }}" placeholder="邮箱地址">
+                    <label for="email-input">邮箱地址</label>
+                    @error('email')
+                      <x-admin::form.error :message="$message" />
+                    @enderror
+                  </div>
+
+                  <div class="form-floating mb-5">
+                    <input type="password" name="password" class="form-control" id="password-input" placeholder="密码">
+                    <label for="password-input">密码</label>
+                    @error('password')
+                      <x-admin::form.error :message="$message" />
+                    @enderror
+                  </div>
+
+                  @if (session('error'))
+                    <div class="alert alert-success">
+                      {{ session('error') }}
+                    </div>
+                  @endif
+
+                  <div class="d-grid mb-4"><button type="submit" class="btn btn-lg btn-primary">登录</button></div>
+                </form>
+              </div>
+            </div>
         </div>
-        <input type="text" name="email" class="form-control" value="{{ old('email') }}" placeholder="邮箱地址">
       </div>
-      @error('email')
-        <x-admin::form.error :message="$message" />
-      @enderror
     </div>
-
-    <div class="form-group">
-      <div class="input-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text" id="password">密码</span>
-        </div>
-        <input type="password" name="password" class="form-control" placeholder="密码">
-      </div>
-      @error('password')
-        <x-admin::form.error :message="$message" />
-      @enderror
-    </div>
-
-    @if (session('error'))
-      <div class="alert alert-success">
-        {{ session('error') }}
-      </div>
-    @endif
-
-    <button type="submit" class="btn btn-primary btn-block mb-4">登录</button>
-  </form>
+  </div>
 </body>
 </html>