✨ feat: 搜索结果页-产品显示一行4个，图片可以点击

李琛需求

 <!--
 <!--
  * @Date: 2024-10-20 16:57:48
  * @Date: 2024-10-20 16:57:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-28 15:03:14
+ * @LastEditTime: 2024-10-28 15:53:43
  * @FilePath: /hager/src/views/search.vue
  * @FilePath: /hager/src/views/search.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -14,7 +14,7 @@
           <div slot="label" class="customer-label">产品&nbsp;&nbsp;<span>{{ count_product }}</span></div>
           <div slot="label" class="customer-label">产品&nbsp;&nbsp;<span>{{ count_product }}</span></div>
           <div class="search-product-list">
           <div class="search-product-list">
             <div :class="['search-product-item', is_xs ? 'xs' : '']" v-for="(item, index) in product_list" :key="index">
             <div :class="['search-product-item', is_xs ? 'xs' : '']" v-for="(item, index) in product_list" :key="index">
-              <div :class="['search-product-item-img', is_xs ? 'xs' : '']" :style="{ 'background-image': 'url('+ item.cover +')' }">
+              <div @click="goToDetail(item)" :class="['search-product-item-img', is_xs ? 'xs' : '']" :style="{ 'background-image': 'url('+ item.cover +')' }">
               <!-- <div :class="['search-product-item-img', is_xs ? 'xs' : '']"> -->
               <!-- <div :class="['search-product-item-img', is_xs ? 'xs' : '']"> -->
                 <!-- <img style="width: 100%; height: auto;" :src="item.cover"> -->
                 <!-- <img style="width: 100%; height: auto;" :src="item.cover"> -->
               </div>
               </div>
@@ -288,7 +288,7 @@ export default {
       margin-top: 1rem;
       margin-top: 1rem;
     }
     }
     .search-product-item {
     .search-product-item {
-      width: calc(33.54% - 1rem);
+      width: calc(25.25% - 1rem);
       &.xs {
       &.xs {
         width: calc(50% - 1rem);
         width: calc(50% - 1rem);
       }
       }
@@ -313,6 +313,10 @@ export default {
           width: 100%;
           width: 100%;
         }
         }
       }
       }
+
+      &:hover {
+        cursor: pointer;
+      }
     }
     }
     .search-product-item-title {
     .search-product-item-title {
       text-align: left;
       text-align: left;