wip

public/build/beike/admin/css/app.css

@@ -150,6 +150,46 @@ body {
   min-height: 1000px;
 }
 
+.hp-100 {
+  height: 100px;
+}
+
+.hp-200 {
+  height: 200px;
+}
+
+.hp-300 {
+  height: 300px;
+}
+
+.hp-400 {
+  height: 400px;
+}
+
+.hp-500 {
+  height: 500px;
+}
+
+.hp-600 {
+  height: 600px;
+}
+
+.hp-700 {
+  height: 700px;
+}
+
+.hp-800 {
+  height: 800px;
+}
+
+.hp-900 {
+  height: 900px;
+}
+
+.hp-1000 {
+  height: 1000px;
+}
+
 .font-size-12 {
   font-size: 12px;
 }

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

@@ -25,6 +25,166 @@ body[class^=page-account-] {
   min-height: 500px;
 }
 
+.wp-100 {
+  width: 100px;
+}
+
+.wp-200 {
+  width: 200px;
+}
+
+.wp-300 {
+  width: 300px;
+}
+
+.wp-400 {
+  width: 400px;
+}
+
+.wp-500 {
+  width: 500px;
+}
+
+.wp-600 {
+  width: 600px;
+}
+
+.wp-700 {
+  width: 700px;
+}
+
+.wp-800 {
+  width: 800px;
+}
+
+.wp-900 {
+  width: 900px;
+}
+
+.wp-1000 {
+  width: 1000px;
+}
+
+.wp-100- {
+  width: calc(100% - 100px);
+}
+
+.wp-200- {
+  width: calc(100% - 200px);
+}
+
+.wp-300- {
+  width: calc(100% - 300px);
+}
+
+.wp-400- {
+  width: calc(100% - 400px);
+}
+
+.wp-500- {
+  width: calc(100% - 500px);
+}
+
+.wp-600- {
+  width: calc(100% - 600px);
+}
+
+.wp-700- {
+  width: calc(100% - 700px);
+}
+
+.wp-800- {
+  width: calc(100% - 800px);
+}
+
+.wp-900- {
+  width: calc(100% - 900px);
+}
+
+.wp-1000- {
+  width: calc(100% - 1000px);
+}
+
+.h-min-100 {
+  min-height: 100px;
+}
+
+.h-min-200 {
+  min-height: 200px;
+}
+
+.h-min-300 {
+  min-height: 300px;
+}
+
+.h-min-400 {
+  min-height: 400px;
+}
+
+.h-min-500 {
+  min-height: 500px;
+}
+
+.h-min-600 {
+  min-height: 600px;
+}
+
+.h-min-700 {
+  min-height: 700px;
+}
+
+.h-min-800 {
+  min-height: 800px;
+}
+
+.h-min-900 {
+  min-height: 900px;
+}
+
+.h-min-1000 {
+  min-height: 1000px;
+}
+
+.hp-100 {
+  height: 100px;
+}
+
+.hp-200 {
+  height: 200px;
+}
+
+.hp-300 {
+  height: 300px;
+}
+
+.hp-400 {
+  height: 400px;
+}
+
+.hp-500 {
+  height: 500px;
+}
+
+.hp-600 {
+  height: 600px;
+}
+
+.hp-700 {
+  height: 700px;
+}
+
+.hp-800 {
+  height: 800px;
+}
+
+.hp-900 {
+  height: 900px;
+}
+
+.hp-1000 {
+  height: 1000px;
+}
+
 .module-title {
   font-size: 1.5rem;
   text-align: center;

resources/beike/admin/css/_global.scss

@@ -43,6 +43,13 @@ body {
   }
 }
 
+// 生成 100 200 300 ... 1000 的高度
+@for $i from 1 through 10 {
+  .hp-#{$i}00 {
+    height: #{$i}00px;
+  }
+}
+
 .font-size-12 {
   font-size: 12px;
 }

resources/beike/admin/views/components/header.blade.php

@@ -1,7 +1,7 @@
 <div class="header-wrap">
   <div class="header-left">
     <div class="logo">
-      <img src="{{ asset('image/logo.png') }}" class="img-fluid">
+      <a href=""><img src="{{ asset('image/logo.png') }}" class="img-fluid"></a>
       {{-- <div class="text-center"><h5 class="mb-0">beike admin</h5></div> --}}
     </div>
   </div>

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

@@ -12,6 +12,33 @@ body[class^="page-account-"] {
   min-height: 500px;
 }
 
+// 生成 100 200 300 ... 1000 的宽度
+@for $i from 1 through 10 {
+  .wp-#{$i}00 {
+    width: #{$i}00px;
+  }
+}
+// clac(100% - #{$i}00px)
+@for $i from 1 through 10 {
+  .wp-#{$i}00- {
+    width: calc(100% - #{$i}00px);
+  }
+}
+
+// 生成 100 200 300 ... 1000 的最小高度
+@for $i from 1 through 10 {
+  .h-min-#{$i}00 {
+    min-height: #{$i}00px;
+  }
+}
+
+// 生成 100 200 300 ... 1000 的高度
+@for $i from 1 through 10 {
+  .hp-#{$i}00 {
+    height: #{$i}00px;
+  }
+}
+
 .module-title {
   font-size: 1.5rem;
   text-align: center;

themes/default/account/wishlist.blade.php

@@ -15,26 +15,39 @@
       <x-shop-sidebar/>
 
       <div class="col-12 col-md-9">
-        <div class="card mb-4 account-card order-wrap">
+        <div class="card mb-4 account-card">
           <div class="card-header d-flex justify-content-between align-items-center">
-            <h5 class="mb-0">我的订单</h5>
+            <h5 class="card-title">我的收藏</h5>
           </div>
           <div class="card-body">
             <table class="table ">
               <thead>
                 <tr>
-                  <th>订单详情</th>
-                  <th>金额</th>
-                  <th>状态</th>
-                  <th class="text-end">操作</th>
+                  <th width="120px"></th>
+                  <th>产品</th>
+                  <th>价格</th>
+                  <th class="text-end"></th>
                 </tr>
               </thead>
               <tbody>
-
+                @foreach ($wishlist as $item)
+                <tr>
+                  <td><div class="wp-100 hp-100"><img src="{{ $item['image'] }}" class="img-fluid"></div></td>
+                  <td>{{ $item['product_name'] }}</td>
+                  <td>{{ $item['price'] }}</td>
+                  <td class="text-end">
+                    <div class="">
+                      <button class="btn btn-outline-danger btn-sm">删除</button>
+                      <button class="btn btn-outline-dark btn-sm">加购物车</button>
+                    </div>
+                  </td>
+                </tr>
+                @endforeach
               </tbody>
             </table>
           </div>
         </div>
+        </div>
       </div>
     </div>
   </div>