优化品牌列表 ui

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';

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;
       }
     }
   }
-}
+
+  .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;
+      }
+    }
+  }
+}

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">