适配页面数据

beike/Shop/Repositories/ProductRepo.php

@@ -26,7 +26,6 @@ class ProductRepo
             $product = Product::query()->findOrFail($product);
         }
         $product->load('description', 'skus', 'master_sku');
-        dd($product);
         return $product;
     }
 

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

@@ -430,3 +430,8 @@ body.page-cart .total-wrap .card-header {
   border-bottom: none;
   background-color: transparent;
 }
+body.page-cart .total-wrap .list-group li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

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

@@ -229,7 +229,7 @@ a {
   text-decoration: none;
 }
 a:hover {
-  color: #fd560f;
+  color: #191919;
 }
 
 a:not([href]):not([class]), a:not([href]):not([class]):hover {
@@ -3463,7 +3463,7 @@ textarea.form-control-lg {
   text-decoration: none;
 }
 .btn-link:hover {
-  color: #fd560f;
+  color: #191919;
 }
 .btn-link:disabled, .btn-link.disabled {
   color: #6c757d;
@@ -3939,7 +3939,7 @@ textarea.form-control-lg {
   }
 }
 .nav-link:hover, .nav-link:focus {
-  color: #fd560f;
+  color: #191919;
 }
 .nav-link.disabled {
   color: #6c757d;
@@ -4802,13 +4802,13 @@ textarea.form-control-lg {
 }
 .page-link:hover {
   z-index: 2;
-  color: #fd560f;
+  color: #191919;
   background-color: #e9ecef;
   border-color: #dee2e6;
 }
 .page-link:focus {
   z-index: 3;
-  color: #fd560f;
+  color: #191919;
   background-color: #e9ecef;
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);

resources/beike/shop/default/bootstrap/bootstrap.scss

@@ -33,7 +33,7 @@ $input-btn-font-size:         0.9rem;
 
 $link-decoration: none;
 $link-color: #1f1f1f;
-$link-hover-color: $primary;
+// $link-hover-color: $primary;
 
 @import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
 @import './bootstrap-icons';

resources/beike/shop/default/cart.scss

@@ -75,5 +75,13 @@ body.page-cart {
       border-bottom: none;
       background-color: transparent;
     }
+
+    .list-group {
+      li {
+        display: flex;
+        align-items: center; // flex-start | center
+        justify-content: space-between; // flex-end | center | space-between
+      }
+    }
   }
 }

resources/beike/shop/default/page-categories.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+body.page-categories {
+
+}

themes/default/account.blade.php

@@ -1,12 +1,84 @@
 @extends('layout.master')
 
-@section('content')
-    <div class="container">
-        <h1>Account</h1>
-        尊敬的会员 {{ $email }}， 欢迎您回来。
-        <br/>
-        <br/>
-        <a href="{{ route('shop.logout') }}">退出</a>
-    </div>
+@section('body-class', 'page-account')
 
+@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">
+      <div class="col-12 col-md-3">
+        <div class="account-info">
+          <div class="head">
+            <div class="portrait"><img src="http://fpoimg.com/120x120" class="img-fluid"></div>
+            <div class="account-name">Pu shuo</div>
+            <div class="account-email">{{ $email }}</div>
+          </div>
+          <nav class="list-group account-links">
+            <a class="list-group-item d-flex justify-content-between align-items-center active" href="">
+              <span>个人中心</span></a>
+            <a class="list-group-item d-flex justify-content-between align-items-center" href="">
+              <span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
+            <a class="list-group-item d-flex justify-content-between align-items-center" href="">
+              <span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
+            <a class="list-group-item d-flex justify-content-between align-items-center" href="">
+              <span>我的收藏</span></a>
+            <a class="list-group-item d-flex justify-content-between align-items-center" href="">
+              <span>我的收藏</span></a>
+            <a class="list-group-item d-flex justify-content-between align-items-center" href="">
+              <span>我的收藏</span></a>
+            <a class="list-group-item d-flex justify-content-between align-items-center" href="">
+              <span>我的收藏</span></a>
+          </nav>
+        </div>
+      </div>
+      <div class="col-12 col-md-9">
+        <div class="card mb-4 account-card">
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <h6 class="mb-0">个人中心</h6>
+            <a href="http://" class="text-muted">修改休息</a>
+          </div>
+          <div class="card-body">
+            <div class="d-flex flex-nowrap card-items py-2">
+              <a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xe77f;</i><span
+                  class="text-muted">收藏</span></a>
+              <a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xe6a3;</i><span
+                  class="text-muted">优惠券</span></a>
+              <a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xe6a3;</i><span
+                  class="text-muted">优惠券</span></a>
+            </div>
+          </div>
+        </div>
+        <div class="card account-card">
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <h6 class="mb-0">我的订单</h6>
+            <a href="http://" class="text-muted">全部订单</a>
+          </div>
+          <div class="card-body">
+            <div class="d-flex flex-nowrap card-items mb-4 py-2">
+              <a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xf12f;</i><span
+                  class="text-muted">待付款</span></a>
+              <a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xf130;</i><span
+                  class="text-muted">待发货</span></a>
+              <a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xf131;</i><span
+                  class="text-muted">待收货</span></a>
+              <a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xf132;</i><span
+                  class="text-muted">售后</span></a>
+            </div>
+            <div class="order-wrap">
+              <div class="no-order d-flex flex-column align-items-center">
+                <div class="icon mb-2"><i class="iconfont">&#xe60b;</i></div>
+                <div class="text mb-3 text-muted">您还没有订单！<a href="">去下单</a></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 @endsection

themes/default/category.blade.php

@@ -1,11 +1,20 @@
 @extends('layout.master')
+@section('body-class', 'page-categories')
 
 @section('content')
-  @foreach ($products as $product)
-    <a href="{{ shop_route('products.show', $product) }}">
-      <img src="{{ thumbnail($product->image) }}" alt="{{ $product->description->name }}">
-      {{ $product->description->name }}
-    </a>
-  @endforeach
+<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">
+      @foreach ($products as $product)
+      <div class="col-6 col-md-3">@include('layout.product')</div>
+      @endforeach
+    </div>
+</div>
 
 @endsection

themes/default/pages/cart.blade.php

@@ -73,7 +73,7 @@
             <ul class="list-group list-group-flush">
               <li class="list-group-item"><span>总数</span><span>20</span></li>
               <li class="list-group-item"><span>总价</span><span>¥223.33</span></li>
-              <li class="list-group-item"></li>
+              <li class="list-group-item d-grid"><button class="btn btn-primary">去结账</button></li>
             </ul>
           </div>
         </div>

themes/default/product.blade.php

@@ -1,29 +1,94 @@
 @extends('layout.master')
 
-@section('content')
-<p>{{ $product->description->name }}</p>
+@section('body-class', 'page-product')
 
-    <h2>SKUs</h2>
-    <table>
-        <thead>
-            <tr>
-                <th>#</th>
-                <th>model</th>
-                <th>sku</th>
-                <th>price</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach ($product->skus as $sku)
+@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 mb-5">
+      <div class="col-12 col-md-6">
+        <div class="product-image d-flex">
+          <div class="left">
+            @for ($i = 0; $i < 5; $i++)
+              <div class=""><img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid"></div>
+            @endfor
+          </div>
+          <div class="right"><img src="{{ $product->image }}" class="img-fluid"></div>
+        </div>
+      </div>
+      <div class="ps-lg-5 col-xl-5 col-lg-6 order-lg-2">
+        <div class="peoduct-info">
+          <h1>{{ $product->description->name }}</h1>
+          <div class="rating-wrap d-flex">
+            <div class="rating">
+              @for ($i = 0; $i < 5; $i++)
+              <i class="iconfont">&#xe628;</i>
+              @endfor
+            </div>
+            <span class="text-muted">132 reviews</span>
+          </div>
+          <div class="price-wrap d-flex align-items-end">
+            <div class="new-price">{{ $product->master_sku->price }}</div>
+            <div class="old-price text-muted text-decoration-line-through">{{ $product->master_sku->origin_price }}</div>
+          </div>
+          <div class="attribute-wrap">
+            <table class="table table-striped table-borderless">
+              <tbody>
                 <tr>
-                    <td>{{ $loop->iteration }}</td>
-                    <td>{{ $sku->model }}</td>
-                    <td>{{ $sku->sku }}</td>
-                    <td>{{ $sku->price }}</td>
-                    <td><a href="{{ route('shop.carts.store', ['sku_id' => $sku->id]) }}">Add to cart</a></td>
+                  <td>型号</td>
+                  <td>{{ $product->master_sku->model }}</td>
                 </tr>
-            @endforeach
-        </tbody>
-    </table>
+                <tr>
+                  <td>Sku</td>
+                  <td>{{ $product->master_sku->sku }}</td>
+                </tr>
+{{--                 <tr>
+                  <td>型号</td>
+                  <td>product-222</td>
+                </tr> --}}
+              </tbody>
+            </table>
+          </div>
+
+          <div class="quantity-wrap d-flex">
+            <div class="quantity-wrap">
+              <input  class="form-control quantity-input" type="number" value="1">
+            </div>
+            <button class="btn btn-outline-secondary ms-3"><i class="bi bi-cart-fill me-1"></i>加入购物车</button>
+            <button class="btn btn-dark ms-3"><i class="bi bi-bag-fill me-1"></i>立即购买</button>
+          </div>
+          <div class="add-wishlist">
+            <button class="btn btn-link ps-0"><i class="bi bi-suit-heart-fill me-1"></i>加入收藏夹</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="product-description">
+      <div class="nav nav-tabs nav-overflow justify-content-start justify-content-md-center border-bottom">
+        <a class="nav-link active" data-bs-toggle="tab" href="#product-description">
+          Description
+        </a>
+        <a class="nav-link" data-bs-toggle="tab" href="#description-1">
+          Size &amp; Fit
+        </a>
+        <a class="nav-link" data-bs-toggle="tab" href="#description-2">
+          Shipping &amp; Return
+        </a>
+      </div>
+      <div class="tab-content">
+        <div class="tab-pane fade show active" id="product-description" role="tabpanel" aria-labelledby="pills-home-tab">111</div>
+        <div class="tab-pane fade" id="description-1" role="tabpanel" aria-labelledby="pills-profile-tab">222</div>
+        <div class="tab-pane fade" id="description-2" role="tabpanel" aria-labelledby="pills-contact-tab">333</div>
+      </div>
+    </div>
+  </div>
 @endsection
+