wip

public/build/beike/shop/default/css/app.css

@@ -208,6 +208,17 @@ header .header-content .right-btn .nav-link i {
   font-size: 1.1rem;
 }
 
+#offcanvas-right-cart .offcanvas-right-products .product-list {
+  padding: 1rem 0;
+  border-top: 1px solid #eee;
+}
+#offcanvas-right-cart .offcanvas-right-products .product-list .left {
+  width: 100px;
+  margin-right: 10px;
+}
+#offcanvas-right-cart .offcanvas-right-products .product-list .left img {
+  max-height: 100px;
+}
 footer {
   background: #fafafa;
   margin-top: 5rem;

resources/beike/shop/default/css/header.scss

@@ -73,3 +73,27 @@ header {
     }
   }
 }
+
+#offcanvas-right-cart {
+  .offcanvas-right-products {
+    .product-list {
+      padding: 1rem 0;
+      border-top: 1px solid #eee;
+
+      .left {
+        width: 100px;
+        margin-right: 10px;
+
+        img {
+          max-height: 100px;
+        }
+      }
+
+      .right {
+        .name {
+
+        }
+      }
+    }
+  }
+}

themes/default/layout/header.blade.php

@@ -77,10 +77,47 @@
             </ul>
           </li>
           <li class="nav-item">
-            <a href="{{ shop_route('carts.index') }}" class="nav-link"><i class="iconfont">&#xe634;</i></a>
+            {{-- <a href="javascript:vido(0)" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-right-cart" aria-controls="offcanvas-right-cart" class="nav-link"><i class="iconfont">&#xe634;</i></a> --}}
+            <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvas-right-cart" role="button" aria-controls="offcanvasExample">
+              <i class="iconfont">&#xe634;</i>
+            </a>
           </li>
         </ul>
       </div>
     </div>
   </div>
 </header>
+
+<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-right-cart" aria-labelledby="offcanvasRightLabel">
+  <div class="offcanvas-header">
+    <h5 id="offcanvasRightLabel" class="mx-auto mb-0">您的购物车</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <div class="offcanvas-right-products">
+      @for ($i = 0; $i < 20; $i++)
+        <div class="product-list d-flex align-items-center">
+          <div class="left"><img src="https://via.placeholder.com/140x140.png/eeeeee" calss="img-fluid"></div>
+          <div class="right flex-grow-1">
+            <div class="name fs-sm fw-bold mb-2">测试商品名称事实上</div>
+            <div class="price mb-2">22.22</div>
+            <div class="product-bottom d-flex justify-content-between align-items-center">
+              @include('shared.quantity', ['quantity' => '1'])
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      @endfor
+    </div>
+  </div>
+  <div class="offcanvas-footer">
+    <div class="d-flex justify-content-between align-items-center mb-2 p-4 bg-light">
+      <strong>小计</strong>
+      <strong class="ms-auto">2222</strong>
+    </div>
+    <div class="p-4">
+      <a href="{{ shop_route('checkout.index') }}" class="btn w-100 btn-dark">去结账</a>
+      <a href="{{ shop_route('carts.index') }}" class="btn w-100 btn-outline-dark mt-2">查看购物车</a>
+    </div>
+  </div>
+</div>

themes/default/layout/master.blade.php

@@ -9,7 +9,7 @@
   <link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/bootstrap.css') }}">
   <script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
   <script src="{{ asset('vendor/layer/3.5.1/layer.js') }}"></script>
-  <script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.bundle.min.js') }}"></script>
+  {{-- <script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.bundle.min.js') }}"></script> --}}
   <script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.min.js') }}"></script>
   <script src="{{ asset('/build/beike/shop/default/js/app.js') }}"></script>
   <link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/app.css') }}">