diff --git a/beike/Shop/Http/Controllers/Account/OrderController.php b/beike/Shop/Http/Controllers/Account/OrderController.php
index d4ab9c49..cf8fea5d 100644
--- a/beike/Shop/Http/Controllers/Account/OrderController.php
+++ b/beike/Shop/Http/Controllers/Account/OrderController.php
@@ -46,8 +46,7 @@ class OrderController extends Controller
     {
         $customer = current_customer();
         $order = OrderRepo::getOrderByNumber($number, $customer);
-        dd($order);
-        return view('account/order_show', ['data' => $order]);
+        return view('account/order_info', ['order' => $order]);
     }
 
     public function success(Request $request, $number): View
diff --git a/public/build/beike/admin/css/bootstrap.css b/public/build/beike/admin/css/bootstrap.css
index b35a0b81..79aefd9b 100644
--- a/public/build/beike/admin/css/bootstrap.css
+++ b/public/build/beike/admin/css/bootstrap.css
@@ -9787,7 +9787,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #fd6f33;
   border-color: #fd6727;
-  box-shadow: 0 0 0 0.25rem rgba(215, 73, 13, 0.5);
+  box-shadow: 0 0 0 0 rgba(215, 73, 13, 0.5);
 }
 .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
   color: #000;
@@ -9795,7 +9795,7 @@ textarea.form-control-lg {
   border-color: #fd6727;
 }
 .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(215, 73, 13, 0.5);
+  box-shadow: 0 0 0 0 rgba(215, 73, 13, 0.5);
 }
 .btn-primary:disabled, .btn-primary.disabled {
   color: #000;
@@ -9817,7 +9817,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #5c636a;
   border-color: #565e64;
-  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
 }
 .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
   color: #fff;
@@ -9825,7 +9825,7 @@ textarea.form-control-lg {
   border-color: #51585e;
 }
 .btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
 }
 .btn-secondary:disabled, .btn-secondary.disabled {
   color: #fff;
@@ -9847,7 +9847,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #157347;
   border-color: #146c43;
-  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
+  box-shadow: 0 0 0 0 rgba(60, 153, 110, 0.5);
 }
 .btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
   color: #fff;
@@ -9855,7 +9855,7 @@ textarea.form-control-lg {
   border-color: #13653f;
 }
 .btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
+  box-shadow: 0 0 0 0 rgba(60, 153, 110, 0.5);
 }
 .btn-success:disabled, .btn-success.disabled {
   color: #fff;
@@ -9877,7 +9877,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #31d2f2;
   border-color: #25cff2;
-  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
+  box-shadow: 0 0 0 0 rgba(11, 172, 204, 0.5);
 }
 .btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
   color: #000;
@@ -9885,7 +9885,7 @@ textarea.form-control-lg {
   border-color: #25cff2;
 }
 .btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
+  box-shadow: 0 0 0 0 rgba(11, 172, 204, 0.5);
 }
 .btn-info:disabled, .btn-info.disabled {
   color: #000;
@@ -9907,7 +9907,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #ffca2c;
   border-color: #ffc720;
-  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
+  box-shadow: 0 0 0 0 rgba(217, 164, 6, 0.5);
 }
 .btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
   color: #000;
@@ -9915,7 +9915,7 @@ textarea.form-control-lg {
   border-color: #ffc720;
 }
 .btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
+  box-shadow: 0 0 0 0 rgba(217, 164, 6, 0.5);
 }
 .btn-warning:disabled, .btn-warning.disabled {
   color: #000;
@@ -9937,7 +9937,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #bb2d3b;
   border-color: #b02a37;
-  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
+  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
 }
 .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
   color: #fff;
@@ -9945,7 +9945,7 @@ textarea.form-control-lg {
   border-color: #a52834;
 }
 .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
+  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
 }
 .btn-danger:disabled, .btn-danger.disabled {
   color: #fff;
@@ -9967,7 +9967,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #f9fafb;
   border-color: #f9fafb;
-  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
+  box-shadow: 0 0 0 0 rgba(211, 212, 213, 0.5);
 }
 .btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
   color: #000;
@@ -9975,7 +9975,7 @@ textarea.form-control-lg {
   border-color: #f9fafb;
 }
 .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
+  box-shadow: 0 0 0 0 rgba(211, 212, 213, 0.5);
 }
 .btn-light:disabled, .btn-light.disabled {
   color: #000;
@@ -9997,7 +9997,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #1c1f23;
   border-color: #1a1e21;
-  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
+  box-shadow: 0 0 0 0 rgba(66, 70, 73, 0.5);
 }
 .btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
   color: #fff;
@@ -10005,7 +10005,7 @@ textarea.form-control-lg {
   border-color: #191c1f;
 }
 .btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
+  box-shadow: 0 0 0 0 rgba(66, 70, 73, 0.5);
 }
 .btn-dark:disabled, .btn-dark.disabled {
   color: #fff;
@@ -10023,7 +10023,7 @@ textarea.form-control-lg {
   border-color: #fd560f;
 }
 .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
-  box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.5);
+  box-shadow: 0 0 0 0 rgba(253, 86, 15, 0.5);
 }
 .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
   color: #000;
@@ -10031,7 +10031,7 @@ textarea.form-control-lg {
   border-color: #fd560f;
 }
 .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.5);
+  box-shadow: 0 0 0 0 rgba(253, 86, 15, 0.5);
 }
 .btn-outline-primary:disabled, .btn-outline-primary.disabled {
   color: #fd560f;
@@ -10048,7 +10048,7 @@ textarea.form-control-lg {
   border-color: #6c757d;
 }
 .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
-  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
+  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
 }
 .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
   color: #fff;
@@ -10056,7 +10056,7 @@ textarea.form-control-lg {
   border-color: #6c757d;
 }
 .btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
+  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
 }
 .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
   color: #6c757d;
@@ -10073,7 +10073,7 @@ textarea.form-control-lg {
   border-color: #198754;
 }
 .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
-  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
+  box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
 }
 .btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
   color: #fff;
@@ -10081,7 +10081,7 @@ textarea.form-control-lg {
   border-color: #198754;
 }
 .btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
+  box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
 }
 .btn-outline-success:disabled, .btn-outline-success.disabled {
   color: #198754;
@@ -10098,7 +10098,7 @@ textarea.form-control-lg {
   border-color: #0dcaf0;
 }
 .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
+  box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
 }
 .btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
   color: #000;
@@ -10106,7 +10106,7 @@ textarea.form-control-lg {
   border-color: #0dcaf0;
 }
 .btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
+  box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
 }
 .btn-outline-info:disabled, .btn-outline-info.disabled {
   color: #0dcaf0;
@@ -10123,7 +10123,7 @@ textarea.form-control-lg {
   border-color: #ffc107;
 }
 .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
 }
 .btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
   color: #000;
@@ -10131,7 +10131,7 @@ textarea.form-control-lg {
   border-color: #ffc107;
 }
 .btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
 }
 .btn-outline-warning:disabled, .btn-outline-warning.disabled {
   color: #ffc107;
@@ -10148,7 +10148,7 @@ textarea.form-control-lg {
   border-color: #dc3545;
 }
 .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
 }
 .btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
   color: #fff;
@@ -10156,7 +10156,7 @@ textarea.form-control-lg {
   border-color: #dc3545;
 }
 .btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
 }
 .btn-outline-danger:disabled, .btn-outline-danger.disabled {
   color: #dc3545;
@@ -10173,7 +10173,7 @@ textarea.form-control-lg {
   border-color: #f8f9fa;
 }
 .btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
-  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
+  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
 }
 .btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
   color: #000;
@@ -10181,7 +10181,7 @@ textarea.form-control-lg {
   border-color: #f8f9fa;
 }
 .btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
+  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
 }
 .btn-outline-light:disabled, .btn-outline-light.disabled {
   color: #f8f9fa;
@@ -10198,7 +10198,7 @@ textarea.form-control-lg {
   border-color: #212529;
 }
 .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
-  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+  box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5);
 }
 .btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
   color: #fff;
@@ -10206,7 +10206,7 @@ textarea.form-control-lg {
   border-color: #212529;
 }
 .btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+  box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5);
 }
 .btn-outline-dark:disabled, .btn-outline-dark.disabled {
   color: #212529;
@@ -10844,7 +10844,7 @@ textarea.form-control-lg {
 .navbar-toggler:focus {
   text-decoration: none;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem;
+  box-shadow: 0 0 0 0;
 }
 
 .navbar-toggler-icon {
diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index 993adf51..46a1d81a 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -161,43 +161,6 @@
   color: #fff;
 }
 
-.account-card {
-  border: none;
-}
-.account-card .card-header {
-  border: none;
-  background-color: #fff;
-  padding-top: 1rem;
-}
-.account-card .card-header h6 {
-  border-left: 3px solid #fd560f;
-  padding-left: 6px;
-  font-weight: bold;
-  font-size: 1rem;
-}
-.account-card .card-items > a {
-  width: 25%;
-  color: #444444;
-  text-decoration: none !important;
-}
-.account-card .card-items > a i {
-  font-size: 2rem;
-}
-.account-card .card-items > a span {
-  display: flex;
-}
-.account-card .order-wrap {
-  background-color: #f6f8f9;
-  padding: 2rem 1rem;
-}
-.account-card .order-wrap .icon i {
-  font-size: 4.5rem;
-  color: #777;
-}
-.account-card .order-wrap .text {
-  font-size: 1rem;
-}
-
 header {
   background: #fff;
 }
@@ -374,6 +337,32 @@ body.page-login .card {
 body.page-account {
   background-color: #F7F8FA;
 }
+body.page-account .account-card {
+  border: none;
+}
+body.page-account .account-card .card-items > a {
+  width: 25%;
+  color: #444444;
+  text-decoration: none !important;
+}
+body.page-account .account-card .card-items > a i {
+  font-size: 2rem;
+}
+body.page-account .account-card .card-items > a span {
+  display: flex;
+}
+body.page-account .account-card .order-wrap {
+  background-color: #f6f8f9;
+  padding: 2rem 1rem;
+}
+body.page-account .account-card .order-wrap .icon i {
+  font-size: 4.5rem;
+  color: #777;
+}
+body.page-account .account-card .order-wrap .text {
+  font-size: 1rem;
+}
+
 body.page-product .product-image .left {
   margin-right: 1rem;
 }
@@ -745,3 +734,30 @@ body.page-account-order-list .order-wrap .table .product-info .img {
   width: 60px;
   margin-right: 10px;
 }
+
+body.page-account-order-info {
+  background-color: #F7F8FA;
+}
+body.page-account-order-info .product-list {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+}
+body.page-account-order-info .product-list .left {
+  width: 90px;
+  margin-right: 10px;
+}
+body.page-account-order-info .product-list .right {
+  color: #767676;
+  font-size: 0.9375rem;
+}
+body.page-account-order-info .product-list .right .name {
+  font-weight: bold;
+  margin-bottom: 0.4rem;
+  color: #1a1a1a;
+}
+body.page-account-order-info .product-list .right .price {
+  font-weight: bold;
+}
diff --git a/public/build/beike/shop/default/css/bootstrap.css b/public/build/beike/shop/default/css/bootstrap.css
index 62a67763..6e8f9eea 100644
--- a/public/build/beike/shop/default/css/bootstrap.css
+++ b/public/build/beike/shop/default/css/bootstrap.css
@@ -9782,7 +9782,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #fd6f33;
   border-color: #fd6727;
-  box-shadow: 0 0 0 0.25rem rgba(215, 73, 13, 0.5);
+  box-shadow: 0 0 0 0 rgba(215, 73, 13, 0.5);
 }
 .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
   color: #000;
@@ -9790,7 +9790,7 @@ textarea.form-control-lg {
   border-color: #fd6727;
 }
 .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(215, 73, 13, 0.5);
+  box-shadow: 0 0 0 0 rgba(215, 73, 13, 0.5);
 }
 .btn-primary:disabled, .btn-primary.disabled {
   color: #000;
@@ -9812,7 +9812,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #5c636a;
   border-color: #565e64;
-  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
 }
 .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
   color: #fff;
@@ -9820,7 +9820,7 @@ textarea.form-control-lg {
   border-color: #51585e;
 }
 .btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
 }
 .btn-secondary:disabled, .btn-secondary.disabled {
   color: #fff;
@@ -9842,7 +9842,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #157347;
   border-color: #146c43;
-  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
+  box-shadow: 0 0 0 0 rgba(60, 153, 110, 0.5);
 }
 .btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
   color: #fff;
@@ -9850,7 +9850,7 @@ textarea.form-control-lg {
   border-color: #13653f;
 }
 .btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
+  box-shadow: 0 0 0 0 rgba(60, 153, 110, 0.5);
 }
 .btn-success:disabled, .btn-success.disabled {
   color: #fff;
@@ -9872,7 +9872,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #31d2f2;
   border-color: #25cff2;
-  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
+  box-shadow: 0 0 0 0 rgba(11, 172, 204, 0.5);
 }
 .btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
   color: #000;
@@ -9880,7 +9880,7 @@ textarea.form-control-lg {
   border-color: #25cff2;
 }
 .btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
+  box-shadow: 0 0 0 0 rgba(11, 172, 204, 0.5);
 }
 .btn-info:disabled, .btn-info.disabled {
   color: #000;
@@ -9902,7 +9902,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #ffca2c;
   border-color: #ffc720;
-  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
+  box-shadow: 0 0 0 0 rgba(217, 164, 6, 0.5);
 }
 .btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
   color: #000;
@@ -9910,7 +9910,7 @@ textarea.form-control-lg {
   border-color: #ffc720;
 }
 .btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
+  box-shadow: 0 0 0 0 rgba(217, 164, 6, 0.5);
 }
 .btn-warning:disabled, .btn-warning.disabled {
   color: #000;
@@ -9932,7 +9932,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #bb2d3b;
   border-color: #b02a37;
-  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
+  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
 }
 .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
   color: #fff;
@@ -9940,7 +9940,7 @@ textarea.form-control-lg {
   border-color: #a52834;
 }
 .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
+  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
 }
 .btn-danger:disabled, .btn-danger.disabled {
   color: #fff;
@@ -9962,7 +9962,7 @@ textarea.form-control-lg {
   color: #000;
   background-color: #f9fafb;
   border-color: #f9fafb;
-  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
+  box-shadow: 0 0 0 0 rgba(211, 212, 213, 0.5);
 }
 .btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
   color: #000;
@@ -9970,7 +9970,7 @@ textarea.form-control-lg {
   border-color: #f9fafb;
 }
 .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
+  box-shadow: 0 0 0 0 rgba(211, 212, 213, 0.5);
 }
 .btn-light:disabled, .btn-light.disabled {
   color: #000;
@@ -9992,7 +9992,7 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #1c1f23;
   border-color: #1a1e21;
-  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
+  box-shadow: 0 0 0 0 rgba(66, 70, 73, 0.5);
 }
 .btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
   color: #fff;
@@ -10000,7 +10000,7 @@ textarea.form-control-lg {
   border-color: #191c1f;
 }
 .btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
+  box-shadow: 0 0 0 0 rgba(66, 70, 73, 0.5);
 }
 .btn-dark:disabled, .btn-dark.disabled {
   color: #fff;
@@ -10018,7 +10018,7 @@ textarea.form-control-lg {
   border-color: #fd560f;
 }
 .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
-  box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.5);
+  box-shadow: 0 0 0 0 rgba(253, 86, 15, 0.5);
 }
 .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
   color: #000;
@@ -10026,7 +10026,7 @@ textarea.form-control-lg {
   border-color: #fd560f;
 }
 .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.5);
+  box-shadow: 0 0 0 0 rgba(253, 86, 15, 0.5);
 }
 .btn-outline-primary:disabled, .btn-outline-primary.disabled {
   color: #fd560f;
@@ -10043,7 +10043,7 @@ textarea.form-control-lg {
   border-color: #6c757d;
 }
 .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
-  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
+  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
 }
 .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
   color: #fff;
@@ -10051,7 +10051,7 @@ textarea.form-control-lg {
   border-color: #6c757d;
 }
 .btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
+  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
 }
 .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
   color: #6c757d;
@@ -10068,7 +10068,7 @@ textarea.form-control-lg {
   border-color: #198754;
 }
 .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
-  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
+  box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
 }
 .btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
   color: #fff;
@@ -10076,7 +10076,7 @@ textarea.form-control-lg {
   border-color: #198754;
 }
 .btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
+  box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
 }
 .btn-outline-success:disabled, .btn-outline-success.disabled {
   color: #198754;
@@ -10093,7 +10093,7 @@ textarea.form-control-lg {
   border-color: #0dcaf0;
 }
 .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
+  box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
 }
 .btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
   color: #000;
@@ -10101,7 +10101,7 @@ textarea.form-control-lg {
   border-color: #0dcaf0;
 }
 .btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
+  box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
 }
 .btn-outline-info:disabled, .btn-outline-info.disabled {
   color: #0dcaf0;
@@ -10118,7 +10118,7 @@ textarea.form-control-lg {
   border-color: #ffc107;
 }
 .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
 }
 .btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
   color: #000;
@@ -10126,7 +10126,7 @@ textarea.form-control-lg {
   border-color: #ffc107;
 }
 .btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
 }
 .btn-outline-warning:disabled, .btn-outline-warning.disabled {
   color: #ffc107;
@@ -10143,7 +10143,7 @@ textarea.form-control-lg {
   border-color: #dc3545;
 }
 .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
 }
 .btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
   color: #fff;
@@ -10151,7 +10151,7 @@ textarea.form-control-lg {
   border-color: #dc3545;
 }
 .btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
 }
 .btn-outline-danger:disabled, .btn-outline-danger.disabled {
   color: #dc3545;
@@ -10168,7 +10168,7 @@ textarea.form-control-lg {
   border-color: #f8f9fa;
 }
 .btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
-  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
+  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
 }
 .btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
   color: #000;
@@ -10176,7 +10176,7 @@ textarea.form-control-lg {
   border-color: #f8f9fa;
 }
 .btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
+  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
 }
 .btn-outline-light:disabled, .btn-outline-light.disabled {
   color: #f8f9fa;
@@ -10193,7 +10193,7 @@ textarea.form-control-lg {
   border-color: #212529;
 }
 .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
-  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+  box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5);
 }
 .btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
   color: #fff;
@@ -10201,7 +10201,7 @@ textarea.form-control-lg {
   border-color: #212529;
 }
 .btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+  box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5);
 }
 .btn-outline-dark:disabled, .btn-outline-dark.disabled {
   color: #212529;
@@ -10839,7 +10839,7 @@ textarea.form-control-lg {
 .navbar-toggler:focus {
   text-decoration: none;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem;
+  box-shadow: 0 0 0 0;
 }
 
 .navbar-toggler-icon {
@@ -18036,3 +18036,22 @@ textarea.form-control-lg {
 .table > :not(:first-child) {
   border-top: none;
 }
+
+.card {
+  border: none;
+}
+.card .card-header {
+  padding: 1rem 1rem 0.3rem;
+  background-color: #fff;
+  border-bottom: 0 solid rgba(0, 0, 0, 0.125);
+}
+.card .card-header:first-child {
+  border-radius: 1rem 1rem 0 0;
+}
+.card .card-header .card-title {
+  margin-bottom: 0;
+  padding-left: 10px;
+  border-left: 3px solid #fd560f;
+  line-height: 1;
+  font-size: 14px;
+}
diff --git a/resources/beike/admin/css/bootstrap/bootstrap.scss b/resources/beike/admin/css/bootstrap/bootstrap.scss
index 0ec12551..fb3f605c 100644
--- a/resources/beike/admin/css/bootstrap/bootstrap.scss
+++ b/resources/beike/admin/css/bootstrap/bootstrap.scss
@@ -19,7 +19,7 @@ $form-floating-input-padding-t:   1.325rem;
 $form-floating-input-padding-b:   .625rem;
 $form-floating-padding-y:         .8rem;
 $form-floating-height:        50px;
-
+$btn-focus-width: 0;
 $table-border-color: #e9ecef;
 
 @import './bootstrap-icons';
diff --git a/resources/beike/shop/default/css/account/account.scss b/resources/beike/shop/default/css/account/account.scss
index d0633b84..c5324836 100644
--- a/resources/beike/shop/default/css/account/account.scss
+++ b/resources/beike/shop/default/css/account/account.scss
@@ -3,7 +3,37 @@
 body.page-account {
   background-color: #F7F8FA;
 
-  footer {
-    // background-color: #fff;
+  .account-card {
+    border: none;
+
+    .card-items {
+      > a {
+        width: 25%;
+        color: #444444;
+        text-decoration: none !important;
+        i {
+          font-size: 2rem;
+        }
+
+        span {
+          display: flex;
+        }
+      }
+    }
+
+    .order-wrap {
+      background-color: #f6f8f9;
+      padding: 2rem 1rem;
+      .icon {
+        i {
+          font-size: 4.5rem;
+          color: #777;
+        }
+      }
+
+      .text {
+        font-size: 1rem;
+      }
+    }
   }
 }
diff --git a/resources/beike/shop/default/css/app.scss b/resources/beike/shop/default/css/app.scss
index 23a1b534..0161ce0e 100644
--- a/resources/beike/shop/default/css/app.scss
+++ b/resources/beike/shop/default/css/app.scss
@@ -18,4 +18,4 @@ $primary: #fd560f;
 @import './page-checkout';
 @import './element-ui';
 @import './order-success';
-@import './page-account-order-list';
+@import './page-account-order';
diff --git a/resources/beike/shop/default/css/bootstrap/bootstrap.scss b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
index 677a5ce7..bf217f39 100644
--- a/resources/beike/shop/default/css/bootstrap/bootstrap.scss
+++ b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
@@ -32,15 +32,16 @@ $breadcrumb-bg:                     transparent;
 $border-radius:               0;
 $input-btn-padding-y:         .6rem;
 $input-btn-font-size:         0.9rem;
+$input-btn-focus-box-shadow:  0  0 11px 0 rgba($color: $primary, $alpha: .1);
+
 // $input-btn-padding-x:         .75rem !default;
+$btn-focus-width: 0;
+// $btn-focus-box-shadow: 0  0 11px 0 rgba($color: $primary, $alpha: .1);
 
 $link-decoration: none;
 $link-color: #3480e7;
 $link-hover-color: $primary;
-$btn-focus-box-shadow: 0  0 11px 0 rgba($color: $primary, $alpha: .1);
-$input-btn-focus-box-shadow:  0  0 11px 0 rgba($color: $primary, $alpha: .1);
 $form-select-focus-box-shadow: 0  0 11px 0 rgba($color: $primary, $alpha: .1);
-$btn-focus-box-shadow: 0  0 11px 0 rgba($color: $primary, $alpha: .1);
 
 $form-floating-input-padding-t:   1.325rem;
 $form-floating-input-padding-b:   .625rem;
@@ -72,4 +73,29 @@ $dropdown-item-padding-y: .4rem;
 
 .table > :not(:first-child) {
   border-top: none;
+}
+
+.card {
+  // box-shadow: rgba(0, 0, 0, .1) 0px 1px 4px 0px;
+  border: none;
+
+  .card-header {
+    padding: 1rem 1rem .3rem;
+    background-color: #fff;
+    // font-weight: bold;
+    // font-size: .8rem;
+    border-bottom: 0 solid rgba(0,0,0,.125);
+
+    &:first-child {
+      border-radius: 1rem 1rem 0 0;
+    }
+
+    .card-title {
+      margin-bottom: 0;
+      padding-left: 10px;
+      border-left: 3px solid $primary;
+      line-height: 1;
+      font-size: 14px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/resources/beike/shop/default/css/global.scss b/resources/beike/shop/default/css/global.scss
index e5c2951e..122ff1ac 100644
--- a/resources/beike/shop/default/css/global.scss
+++ b/resources/beike/shop/default/css/global.scss
@@ -171,50 +171,3 @@
     }
   }
 }
-
-.account-card {
-  border: none;
-
-  .card-header {
-    border: none;
-    background-color: #fff;
-    padding-top: 1rem;
-
-    h6 {
-      border-left: 3px solid $primary;
-      padding-left: 6px;
-      font-weight: bold;
-      font-size: 1rem;
-    }
-  }
-
-  .card-items {
-    > a {
-      width: 25%;
-      color: #444444;
-      text-decoration: none !important;
-      i {
-        font-size: 2rem;
-      }
-
-      span {
-        display: flex;
-      }
-    }
-  }
-
-  .order-wrap {
-    background-color: #f6f8f9;
-    padding: 2rem 1rem;
-    .icon {
-      i {
-        font-size: 4.5rem;
-        color: #777;
-      }
-    }
-
-    .text {
-      font-size: 1rem;
-    }
-  }
-}
\ No newline at end of file
diff --git a/resources/beike/shop/default/css/page-account-order-list.scss b/resources/beike/shop/default/css/page-account-order.scss
similarity index 50%
rename from resources/beike/shop/default/css/page-account-order-list.scss
rename to resources/beike/shop/default/css/page-account-order.scss
index e92ff96d..b094cf8e 100644
--- a/resources/beike/shop/default/css/page-account-order-list.scss
+++ b/resources/beike/shop/default/css/page-account-order.scss
@@ -7,7 +7,6 @@ body.page-account-order-list {
     .table {
       .sep-row {
         height: 20px;
-        // border: 0;
 
         td {
           border: 0;
@@ -15,10 +14,8 @@ body.page-account-order-list {
       }
 
       .head-tr {
-        // border: 0;
         background: #f5f5f5;
         td {
-          // border: 0;
           border-bottom-color: #f5f5f5;
         }
       }
@@ -39,9 +36,8 @@ body.page-account-order-list {
 
       .product-info {
         display: flex;
-        align-items: center; // flex-start | center
-        // justify-content: space-between; // flex-end | center | space-between
-        // flex-wrap: wrap;
+        align-items: center;
+
         .img {
           width: 60px;
           margin-right: 10px;
@@ -49,4 +45,41 @@ body.page-account-order-list {
       }
     }
   }
+}
+
+body.page-account-order-info {
+  background-color: #F7F8FA;
+
+  .order-head {
+
+  }
+
+  .product-list {
+    display: flex;
+    align-items: center; // flex-start | center
+    border-bottom: 1px solid #eee;
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+    // justify-content: space-between; // flex-end | center | space-between
+
+    .left {
+      width: 90px;
+      margin-right: 10px;
+    }
+
+    .right {
+      color: #767676;
+      font-size: .9375rem;
+
+      .name {
+        font-weight: bold;
+        margin-bottom: .4rem;
+        color: #1a1a1a;
+      }
+
+      .price {
+        font-weight: bold;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/themes/default/account/account.blade.php b/themes/default/account/account.blade.php
index b4daa0db..dc07e456 100644
--- a/themes/default/account/account.blade.php
+++ b/themes/default/account/account.blade.php
@@ -23,7 +23,7 @@
         @endif
         <div class="card mb-4 account-card">
           <div class="card-header d-flex justify-content-between align-items-center">
-            <h6 class="mb-0">个人中心</h6>
+            <h6 class="card-title">个人中心</h6>
             <a href="http://" class="text-muted">修改休息</a>
           </div>
           <div class="card-body">
@@ -39,7 +39,7 @@
         </div>
         <div class="card account-card">
           <div class="card-header d-flex justify-content-between align-items-center">
-            <h6 class="mb-0">我的订单</h6>
+            <h6 class="card-title">我的订单</h6>
             <a href="http://" class="text-muted">全部订单</a>
           </div>
           <div class="card-body">
diff --git a/themes/default/account/order.blade.php b/themes/default/account/order.blade.php
index 10193d1a..5a180d5b 100644
--- a/themes/default/account/order.blade.php
+++ b/themes/default/account/order.blade.php
@@ -22,11 +22,9 @@
             <h6 class="mb-0">我的订单</h6>
           </div>
           <div class="card-body">
-            {{-- table-bordered --}}
             <table class="table ">
               <thead>
                 <tr>
-                  {{-- <th>订单号</th> --}}
                   <th>订单详情</th>
                   <th>金额</th>
                   <th>状态</th>
@@ -42,7 +40,6 @@
                       <span class="order-number">订单号：{{ $order->number }}</span>
                     </td>
                   </tr>
-                  {{-- {{ dd($order->orderProducts) }} --}}
                   @foreach ($order->orderProducts as $product)
                   <tr class="{{ $loop->first ? 'first-tr' : '' }}">
                     <td>
diff --git a/themes/default/account/order_info.blade.php b/themes/default/account/order_info.blade.php
new file mode 100644
index 00000000..c6c96e49
--- /dev/null
+++ b/themes/default/account/order_info.blade.php
@@ -0,0 +1,76 @@
+@extends('layout.master')
+
+@section('body-class', 'page-account-order-info')
+
+@section('content')
+  <div class="container">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="#">Home</a></li>
+        <li class="breadcrumb-item active" aria-current="page">Library</li>
+      </ol>
+    </nav>
+
+    <div class="row">
+
+      <x-shop-sidebar/>
+      {{-- {{ dd($order) }} --}}
+      <div class="col-12 col-md-9">
+        <div class="card mb-4 order-head">
+          <div class="card-header"><h6 class="card-title">订单详情</h6></div>
+          <div class="card-body">
+            <div class="bg-light p-2">
+              <table class="table table-borderless mb-0">
+                <thead>
+                  <tr>
+                    <th>订单号</th>
+                    <th>下单日期</th>
+                    <th>状态</th>
+                    <th>订单金额</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>{{ $order->number }}</td>
+                    <td>{{ $order->created_at }}</td>
+                    <td>{{ $order->status }}</td>
+                    <td>{{ $order->total }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <div class="card mb-4">
+          <div class="card-header"><h6 class="card-title">订购商品</h6></div>
+          <div class="card-body">
+            @foreach ($order->orderProducts as $product)
+            <div class="product-list">
+              <div class="left"><img src="{{ $product->image }}" class="img-fluid"></div>
+              <div class="right">
+                <div class="name">{{ $product->name }}  x {{ $product->quantity }}</div>
+                <div class="price">{{ $product->price }}</div>
+              </div>
+            </div>
+            @endforeach
+          </div>
+        </div>
+
+        <div class="card mb-4">
+          <div class="card-header"><h6 class="card-title">物流状态</h6></div>
+          <div class="card-body">
+
+          </div>
+        </div>
+
+        <div class="card mb-4">
+          <div class="card-header"><h6 class="card-title">订单状态</h6></div>
+          <div class="card-body">
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection