diff --git a/beike/Admin/Http/Controllers/BrandController.php b/beike/Admin/Http/Controllers/BrandController.php
index bd67f9db..9cf3aaf0 100644
--- a/beike/Admin/Http/Controllers/BrandController.php
+++ b/beike/Admin/Http/Controllers/BrandController.php
@@ -23,6 +23,10 @@ class BrandController extends Controller
             'brands' => $brands,
         ];
 
+        if ($request->expectsJson()) {
+            return json_success('成功', $data);
+        }
+
         return view('admin::pages.brands.index', $data);
     }
 
diff --git a/beike/Models/Brand.php b/beike/Models/Brand.php
index 5ff054fa..84559d4f 100644
--- a/beike/Models/Brand.php
+++ b/beike/Models/Brand.php
@@ -18,7 +18,7 @@ class Brand extends Base
 {
     use HasFactory;
 
-    protected $fillable = ['name', 'country_id', 'code', 'sort_order', 'status'];
+    protected $fillable = ['name', 'country_id', 'first', 'logo', 'code', 'sort_order', 'status'];
 
     public function products() :HasMany
     {
diff --git a/public/build/beike/admin/js/app.js b/public/build/beike/admin/js/app.js
index 4b41e279..6036edd2 100644
--- a/public/build/beike/admin/js/app.js
+++ b/public/build/beike/admin/js/app.js
@@ -2066,6 +2066,7 @@ __webpack_require__.r(__webpack_exports__);
 
 window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"];
 var base = document.querySelector('base').href;
+var asset = document.querySelector('meta[name="asset"]').content;
 $(document).on('click', '.open-file-manager', function (event) {
   var $this = $(this);
   layer.open({
@@ -2088,6 +2089,18 @@ $(document).on('click', '.open-file-manager', function (event) {
     }
   });
 });
+
+if (typeof Vue != 'undefined') {
+  Vue.prototype.thumbnail = function thumbnail(image, width, height) {
+    // 判断 image 是否以 http 开头
+    if (image.indexOf('http') === 0) {
+      return image;
+    }
+
+    return asset + image;
+  };
+}
+
 $(document).ready(function ($) {
   $.ajaxSetup({
     headers: {
diff --git a/resources/beike/admin/js/app.js b/resources/beike/admin/js/app.js
index 4396bf00..0a39e8d6 100644
--- a/resources/beike/admin/js/app.js
+++ b/resources/beike/admin/js/app.js
@@ -1,6 +1,7 @@
 import http from "../../../js/http";
 window.$http = http;
 const base = document.querySelector('base').href;
+const asset = document.querySelector('meta[name="asset"]').content;
 
 $(document).on('click', '.open-file-manager', function(event) {
   const $this = $(this);
@@ -25,6 +26,16 @@ $(document).on('click', '.open-file-manager', function(event) {
   });
 });
 
+if (typeof Vue != 'undefined') {
+  Vue.prototype.thumbnail = function thumbnail(image, width, height) {
+    // 判断 image 是否以 http 开头
+    if (image.indexOf('http') === 0) {
+      return image;
+    }
+
+    return asset + image;
+  };
+}
 
 $(document).ready(function ($) {
   $.ajaxSetup({
diff --git a/resources/beike/admin/views/layouts/master.blade.php b/resources/beike/admin/views/layouts/master.blade.php
index e364e03b..22f4ad47 100644
--- a/resources/beike/admin/views/layouts/master.blade.php
+++ b/resources/beike/admin/views/layouts/master.blade.php
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
     <base href="{{ $admin_base_url }}">
     <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="asset" content="{{ asset('/') }}">
     <script src="{{ asset('vendor/vue/2.6.12/vue.js') }}"></script>
     <script src="{{ asset('vendor/element-ui/2.6.2/js.js') }}"></script>
     <script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
diff --git a/resources/beike/admin/views/pages/brands/index.blade.php b/resources/beike/admin/views/pages/brands/index.blade.php
index 3b519a7b..739e07ce 100644
--- a/resources/beike/admin/views/pages/brands/index.blade.php
+++ b/resources/beike/admin/views/pages/brands/index.blade.php
@@ -3,7 +3,7 @@
 @section('title', '品牌管理')
 
 @section('content')
-  <div id="customer-app" class="card" v-cloak>
+  <div id="customer-app" class="card h-min-600" v-cloak>
     <div class="card-body">
       <div class="d-flex justify-content-between mb-4">
         <button type="button" class="btn btn-primary" @click="checkedCreate('add', null)">创建品牌</button>
@@ -15,16 +15,18 @@
             <th>名称</th>
             <th>图标</th>
             <th>排序</th>
+            <th>首字母</th>
             <th>状态</th>
             <th>操作</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="brand, index in brands" :key="index">
+          <tr v-for="brand, index in brands.data" :key="index">
             <td>@{{ brand.id }}</td>
             <td>@{{ brand.name }}</td>
-            <td>@{{ brand.logo }}</td>
+            <td><div class="wh-70"><img :src="thumbnail(brand.logo)" class="img-fluid"></div></td>
             <td>@{{ brand.sort_order }}</td>
+            <td>@{{ brand.first }}</td>
             <td>@{{ brand.status }}</td>
             <td>
               <button class="btn btn-outline-secondary btn-sm" @click="checkedCreate('edit', index)">编辑</button>
@@ -37,7 +39,7 @@
       {{-- {{ $brands->links('admin::vendor/pagination/bootstrap-4') }} --}}
     </div>
 
-    <el-dialog title="创建用户组" :visible.sync="dialog.show" width="600px"
+    <el-dialog title="品牌" :visible.sync="dialog.show" width="600px"
       @close="closeDialog('form')" :close-on-click-modal="false">
 
       <el-form ref="form" :rules="rules" :model="dialog.form" label-width="100px">
@@ -49,6 +51,10 @@
           <vue-image v-model="dialog.form.logo"></vue-image>
         </el-form-item>
 
+        <el-form-item label="首字母">
+          <el-input class="mb-0" v-model="dialog.form.first" placeholder="首字母"></el-input>
+        </el-form-item>
+
         <el-form-item label="排序">
           <el-input class="mb-0" type="number" v-model="dialog.form.sort_order" placeholder="排序"></el-input>
         </el-form-item>
@@ -67,6 +73,7 @@
 @endsection
 
 
+
 @push('footer')
   @include('admin::shared.vue-image')
   <script>
@@ -74,7 +81,7 @@
       el: '#customer-app',
 
       data: {
-        brands: @json($brands->data ?? []),
+        brands: @json($brands ?? []),
 
         source: {
           // languages: ['zh-ck','en-gb']
@@ -89,6 +96,7 @@
             id: null,
             name: '',
             logo: '',
+            first: '',
             sort_order: '',
             status: '',
           },
@@ -99,6 +107,12 @@
         }
       },
 
+      mounted() {
+        // $http.get('brands?page=1').then((res) => {
+        //   console.log(res)
+        // })
+      },
+
       methods: {
         checkedCreate(type, index) {
           this.dialog.show = true
@@ -106,13 +120,14 @@
           this.dialog.index = index
 
           if (type == 'edit') {
-            let brand = this.brands[index];
+            let brand = this.brands.data[index];
 
             this.dialog.form = {
               id: brand.id,
               name: brand.name,
               logo: brand.logo,
-              sort_order: brand.sort_order,
+              logo: brand.logo,
+              first: brand.first,
               status: brand.status,
             }
           }
diff --git a/resources/beike/admin/views/shared/vue-image.blade.php b/resources/beike/admin/views/shared/vue-image.blade.php
index 8999f07c..ac28d1d7 100644
--- a/resources/beike/admin/views/shared/vue-image.blade.php
+++ b/resources/beike/admin/views/shared/vue-image.blade.php
@@ -43,13 +43,4 @@ Vue.component('vue-image', {
 
   }
 });
-
-Vue.prototype.thumbnail = function thumbnail(image, width, height) {
-  // 判断 image 是否以 http 开头
-  if (image.indexOf('http') === 0) {
-    return image;
-  }
-
-  return '{{ asset('/') }}' + image;
-};
 </script>