From d35952fe5c6cf4917fd7d3ae5c960394c2ba2805 Mon Sep 17 00:00:00 2001
From: pushuo <pushuo@guangda.work>
Date: Mon, 16 Jan 2023 14:28:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=93=81=E7=89=8C=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/beike/shop/default/css/app.scss     |  2 +-
 .../css/{page-list.scss => page-brands.scss}  | 59 ++++++++++++-------
 themes/default/brand/list.blade.php           | 19 +++---
 3 files changed, 47 insertions(+), 33 deletions(-)
 rename resources/beike/shop/default/css/{page-list.scss => page-brands.scss} (65%)

diff --git a/resources/beike/shop/default/css/app.scss b/resources/beike/shop/default/css/app.scss
index e4fe994f..cb0c0bf6 100644
--- a/resources/beike/shop/default/css/app.scss
+++ b/resources/beike/shop/default/css/app.scss
@@ -26,7 +26,7 @@ $primary: #fd560f;
 @import './order-success';
 @import './page-account-order';
 @import './page-account-address';
-@import './page-list';
+@import './page-brands';
 @import './home';
 @import './module/module-image-plus';
 @import './module/module-brand';
diff --git a/resources/beike/shop/default/css/page-list.scss b/resources/beike/shop/default/css/page-brands.scss
similarity index 65%
rename from resources/beike/shop/default/css/page-list.scss
rename to resources/beike/shop/default/css/page-brands.scss
index 8538ecd9..cf5c9d3f 100644
--- a/resources/beike/shop/default/css/page-list.scss
+++ b/resources/beike/shop/default/css/page-brands.scss
@@ -8,7 +8,7 @@
  * @LastEditTime  2022-09-16 20:56:17
  */
 
-body.page-list {
+body.page-brands {
   .brand-item {
     display: flex;
     align-items: center; // flex-start | center
@@ -23,28 +23,45 @@ body.page-list {
     }
   }
 
-  li {
-    list-style: none;
+  .brand-list {
+    li {
+      list-style: none;
 
-    a{
-      color: #242424;
-      text-decoration: none;
-    }
-  }
-
-  .curser {
-    cursor: pointer;
-
-    >li>a {
-      display: block;
-      color: #242424;
-      transition: all .5s;
-      margin: 0 auto;
-
-      &:hover {
+      a {
+        color: #242424;
         text-decoration: none;
-        background-color: #eee;
       }
     }
   }
-}
\ No newline at end of file
+
+  .curser-list {
+    cursor: pointer;
+
+    @media (max-width: 768px) {
+      display: block;
+
+      li {
+        display: inline-block;
+        margin-bottom: 6px;
+
+        & + .list-group-item {
+          border-left: 1px solid #e4e4e4;
+        }
+      }
+    }
+
+    >li>a {
+      color: #242424;
+      transition: all .3s;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #eee;
+      }
+
+      &:active {
+        background-color: #aaa;
+      }
+    }
+  }
+}
diff --git a/themes/default/brand/list.blade.php b/themes/default/brand/list.blade.php
index f8d23da1..e2fea4e1 100644
--- a/themes/default/brand/list.blade.php
+++ b/themes/default/brand/list.blade.php
@@ -1,26 +1,23 @@
 @extends('layout.master')
-@section('body-class', 'page-list')
+@section('body-class', 'page-brands')
 
 @section('content')
 <div class="container">
 
-  <x-shop-breadcrumb type="static" value="brands.index" /> 
+  <x-shop-breadcrumb type="static" value="brands.index" />
+  <p class="fw-bold fs-3 d-flex justify-content-center mb-4">{{ __('shop/brands.index') }}</p>
 
-  <div>
-    <p class="fw-bold fs-3 d-flex justify-content-center mt-5 mb-4">{{ __('shop/brands.index') }}</p>
-  </div>
-
-  <ul class="d-flex justify-content-start mt-3 align-items-baseline mb-3 curser flex-wrap">
+  <ul class="list-group list-group-horizontal mb-5 curser-list">
     @foreach ($brands as $brand)
-      <li class="fs-6 border align-content-center text-center">
-        <a href="brands#{{ $brand['0']['first'] }}" class="py-2 px-3">{{ $brand['0']['first'] }}</a>
+      <li class="list-group-item p-0 flex-grow-1">
+        <a href="brands#{{ $brand['0']['first'] }}" class="py-2 px-3 text-center fw-bold d-block">{{ $brand['0']['first'] }}</a>
       </li>
     @endforeach
   </ul>
 
-  <ul>
+  <ul class="brand-list ps-0">
     @foreach ($brands as $brand)
-    <li class="d-flex border-top py-2">
+    <li class="d-flex border-top py-3">
       <p class="px-2 fs-5 mt-4 fw-bold py-5" id="{{ $brand['0']['first'] }}">{{ $brand['0']['first'] }}</p>
       <div class="container">
         <div class="row">