商品页面显示修正

src/pages/product/ProductPage.vue

@@ -393,23 +393,13 @@ onMounted(() => {
         </div>
 
         <el-row :gutter="20">
-          <!-- 左侧占位（如果需要放置其他内容） -->
-          <el-col :span="6" class="hidden md:block">
-            <!-- 可以放置其他侧边栏内容 -->
-          </el-col>
-
           <!-- 右侧商品列表 -->
-          <el-col :span="24" class="md:col-span-24">
+          <el-col :span="24">
             <!-- 商品列表 -->
             <div class="product-list">
-              <el-row :gutter="20">
+              <el-row :gutter="20" style="row-gap: 24px;">
                 <template v-if="loading">
-                  <el-col
+                  <el-col v-for="n in pageSize" :key="n" :span="8">
-                    v-for="n in pageSize"
-                    :key="n"
-                    :span="24"
-                    class="sm:col-span-12 md:col-span-8 lg:col-span-6 mb-6"
-                  >
                     <el-card class="product-card">
                       <el-skeleton :rows="3" animated />
                     </el-card>
@@ -419,8 +409,7 @@ onMounted(() => {
                   <el-col
                     v-for="product in productList"
                     :key="product.id"
-                    :span="24"
+                    :span="8"
-                    class="sm:col-span-12 md:col-span-8 lg:col-span-6 mb-6"
                   >
                     <!-- 添加点击事件跳转到详情页 -->
                     <el-card