dashboard 优化

public/build/beike/admin/css/bootstrap.css

@@ -6782,7 +6782,7 @@
   --bs-primary: #fd560f;
   --bs-secondary: #6c757d;
   --bs-success: #198754;
-  --bs-info: #0dcaf0;
+  --bs-info: #1a8eff;
   --bs-warning: #ffc107;
   --bs-danger: #dc3545;
   --bs-light: #f8f9fa;
@@ -6790,7 +6790,7 @@
   --bs-primary-rgb: 253, 86, 15;
   --bs-secondary-rgb: 108, 117, 125;
   --bs-success-rgb: 25, 135, 84;
-  --bs-info-rgb: 13, 202, 240;
+  --bs-info-rgb: 26, 142, 255;
   --bs-warning-rgb: 255, 193, 7;
   --bs-danger-rgb: 220, 53, 69;
   --bs-light-rgb: 248, 249, 250;
@@ -8582,15 +8582,15 @@ progress {
 }
 
 .table-info {
-  --bs-table-bg: #cff4fc;
+  --bs-table-bg: #d1e8ff;
-  --bs-table-striped-bg: #c5e8ef;
+  --bs-table-striped-bg: #c7dcf2;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #badce3;
+  --bs-table-active-bg: #bcd1e6;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bfe2e9;
+  --bs-table-hover-bg: #c1d7ec;
   --bs-table-hover-color: #000;
   color: #000;
-  border-color: #badce3;
+  border-color: #bcd1e6;
 }
 
 .table-warning {
@@ -9624,32 +9624,32 @@ textarea.form-control-lg {
 
 .btn-info {
   color: #000;
-  background-color: #0dcaf0;
+  background-color: #1a8eff;
-  border-color: #0dcaf0;
+  border-color: #1a8eff;
 }
 .btn-info:hover {
   color: #000;
-  background-color: #31d2f2;
+  background-color: #3c9fff;
-  border-color: #25cff2;
+  border-color: #3199ff;
 }
 .btn-check:focus + .btn-info, .btn-info:focus {
   color: #000;
-  background-color: #31d2f2;
+  background-color: #3c9fff;
-  border-color: #25cff2;
+  border-color: #3199ff;
-  box-shadow: 0 0 0 0 rgba(11, 172, 204, 0.5);
+  box-shadow: 0 0 0 0 rgba(22, 121, 217, 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;
-  background-color: #3dd5f3;
+  background-color: #48a5ff;
-  border-color: #25cff2;
+  border-color: #3199ff;
 }
 .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 rgba(11, 172, 204, 0.5);
+  box-shadow: 0 0 0 0 rgba(22, 121, 217, 0.5);
 }
 .btn-info:disabled, .btn-info.disabled {
   color: #000;
-  background-color: #0dcaf0;
+  background-color: #1a8eff;
-  border-color: #0dcaf0;
+  border-color: #1a8eff;
 }
 
 .btn-warning {
@@ -9848,27 +9848,27 @@ textarea.form-control-lg {
 }
 
 .btn-outline-info {
-  color: #0dcaf0;
+  color: #1a8eff;
-  border-color: #0dcaf0;
+  border-color: #1a8eff;
 }
 .btn-outline-info:hover {
   color: #000;
-  background-color: #0dcaf0;
+  background-color: #1a8eff;
-  border-color: #0dcaf0;
+  border-color: #1a8eff;
 }
 .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
-  box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
+  box-shadow: 0 0 0 0 rgba(26, 142, 255, 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;
-  background-color: #0dcaf0;
+  background-color: #1a8eff;
-  border-color: #0dcaf0;
+  border-color: #1a8eff;
 }
 .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 rgba(13, 202, 240, 0.5);
+  box-shadow: 0 0 0 0 rgba(26, 142, 255, 0.5);
 }
 .btn-outline-info:disabled, .btn-outline-info.disabled {
-  color: #0dcaf0;
+  color: #1a8eff;
   background-color: transparent;
 }
 
@@ -11454,12 +11454,12 @@ textarea.form-control-lg {
 }
 
 .alert-info {
-  color: #055160;
+  color: #105599;
-  background-color: #cff4fc;
+  background-color: #d1e8ff;
-  border-color: #b6effb;
+  border-color: #baddff;
 }
 .alert-info .alert-link {
-  color: #04414d;
+  color: #0d447a;
 }
 
 .alert-warning {
@@ -11815,17 +11815,17 @@ textarea.form-control-lg {
 }
 
 .list-group-item-info {
-  color: #055160;
+  color: #105599;
-  background-color: #cff4fc;
+  background-color: #d1e8ff;
 }
 .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
-  color: #055160;
+  color: #105599;
-  background-color: #badce3;
+  background-color: #bcd1e6;
 }
 .list-group-item-info.list-group-item-action.active {
   color: #fff;
-  background-color: #055160;
+  background-color: #105599;
-  border-color: #055160;
+  border-color: #105599;
 }
 
 .list-group-item-warning {
@@ -12944,10 +12944,10 @@ textarea.form-control-lg {
 }
 
 .link-info {
-  color: #0dcaf0;
+  color: #1a8eff;
 }
 .link-info:hover, .link-info:focus {
-  color: #3dd5f3;
+  color: #48a5ff;
 }
 
 .link-warning {
@@ -13388,7 +13388,7 @@ textarea.form-control-lg {
 }
 
 .border-info {
-  border-color: #0dcaf0 !important;
+  border-color: #1a8eff !important;
 }
 
 .border-warning {

resources/beike/admin/css/bootstrap/bootstrap.scss

@@ -9,6 +9,8 @@
 //
 
 $primary: #fd560f;
+$info: #1a8eff;
+
 $border-radius:  0;
 $font-size-base: 0.82rem;
 $form-check-input-width: 1.2em;

resources/beike/admin/views/pages/home.blade.php

@@ -83,9 +83,18 @@
   </div>
 
   <div class="card mb-4">
-    <div class="card-header">订单统计</div>
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <div>订单统计</div>
+      <div class="orders-right">
+        <div class="btn-group" role="group" aria-label="Basic outlined example">
+          <button type="button" class="btn btn-sm btn-outline-info btn-info text-white" data-type="30">一个月</button>
+          <button type="button" class="btn btn-sm btn-outline-info" data-type="7">一周</button>
+          <button type="button" class="btn btn-sm btn-outline-info" data-type="12">一年</button>
+        </div>
+      </div>
+    </div>
     <div class="card-body">
-      <canvas id="orders-chart" style="max-height: 420px"></canvas>
+      <canvas id="orders-chart" style="max-height: 380px"></canvas>
     </div>
   </div>
 
@@ -94,7 +103,7 @@
       <div class="card mb-4">
         <div class="card-header">客户统计</div>
         <div class="card-body">
-          <canvas id="customer-chart" style="max-height: 420px"></canvas>
+          <canvas id="customer-chart" style="max-height: 380px"></canvas>
         </div>
       </div>
     </div>
@@ -102,7 +111,7 @@
       <div class="card mb-4">
         <div class="card-header">客户统计</div>
         <div class="card-body">
-          <canvas id="customer-chart-1" style="max-height: 420px"></canvas>
+          <canvas id="customer-chart-1" style="max-height: 380px"></canvas>
         </div>
       </div>
     </div>
@@ -116,6 +125,7 @@
     const ctx = document.getElementById('customer-chart').getContext('2d');
     const ctx1 = document.getElementById('customer-chart-1').getContext('2d');
     const orders = document.getElementById('orders-chart').getContext('2d');
+
     const myChart = new Chart(ctx, {
       type: 'bar',
       data: {
@@ -181,7 +191,7 @@
     });
 
 
-  const gradient = ctx.createLinearGradient(0, 0, 0, 420);
+    const gradient = ctx.createLinearGradient(0, 0, 0, 380);
           gradient.addColorStop(0, 'rgba(180,223,253,1)');
           gradient.addColorStop(1, 'rgba(180,223,253,0)');
 
@@ -241,5 +251,21 @@
         },
       }
     });
+    // console.log(ordersChart)
+
+    function upDate(chart, label, data) {
+      chart.data.labels = label;
+      chart.data.datasets[0].data = data;
+      chart.update();
+    }
+
+    $('.orders-right .btn-group > .btn').on('click', function() {
+      const day = $(this).data('type'); // 天数
+      const labels = Array.from({length: day}, (v, k) => k + 1);
+      const data = Array.from({length: day}, () => Math.floor(Math.random() * 123.7));
+      $(this).addClass('btn-info text-white').siblings().removeClass('btn-info text-white');
+
+      upDate(ordersChart, labels, data);
+    });
   </script>
 @endpush

themes/default/account/edit.blade.php

@@ -26,7 +26,6 @@
             <h5 class="card-title">修改个人信息</h5>
           </div>
           <div class="card-body h-600">
-            <form>
             <div class="bg-light rounded-3 p-4 mb-4" style="background: #f6f9fc;">
               <div class="d-flex align-items-center">
                 <img class="rounded-3" id="avatar" src="{{ image_resize($customer->avatar, 200, 200) }}" width="90">
@@ -39,6 +38,8 @@
                 </div>
               </div>
             </div>
+            <form action="{{ shop_route('account.edit.index') }}" method="POST">
+              @csrf
               <div class="row gx-4 gy-3">
                 <div class="col-sm-6">
                   <label class="form-label">名称</label>
@@ -53,7 +54,7 @@
                   <input class="form-control" type="password" placeholder="留空则保持原密码不变" name="password" value="">
                 </div>
                 <div class="col-12 mt-4">
-                  <button class="btn btn-primary mt-sm-0" type="button">提交</button>
+                  <button class="btn btn-primary mt-sm-0" type="submit">提交</button>
                 </div>
               </div>
             </form>