feat: 新增全局布局样式并提升组件响应式表现

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式
- 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整
- 在 API 请求中增加 loading 状态管理，改善用户体验
- 优化领券中心与商品详情页，提升功能与 UI 一致性

buyer/src/assets/styles/global-layout.scss

@@ -0,0 +1,22 @@
+// 全局布局工具类（非 scoped，避免子组件继承 class 时宽度失效）
+.width_1200_auto {
+  width: 1200px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+// 首页主体：分类导航 + 楼层装修共用同一 1200px 容器，保证列对齐
+.index-main {
+  width: 1200px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+  position: relative;
+}
+
+// 与 CateNav 商品分类栏、Carousel 左占位一致的列宽
+$index-side-col-width: 263.2px;
+$index-col-gap: 10px;

buyer/src/assets/styles/global.scss

@@ -30,6 +30,7 @@ $dark_content_color: #d5d5d5;
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 2;
+	line-clamp: 2;
 	overflow: hidden;
 }
 /***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/
@@ -305,9 +306,11 @@ li {
 }
 
 .width_1200_auto {
-  width: 1184px;
+  width: 1200px;
+  max-width: 1200px;
   margin: 0 auto;
 
+  box-sizing: border-box;
 }
 
 
@@ -325,18 +328,24 @@ li {
   .goods-list {
     display: flex;
     flex-wrap: wrap;
-    width: 1200px;
+    width: 100%;
     margin: 0 auto;
+    column-gap: 10px;
   }
   .goods-show-info {
-    width: 235px;
+    width: calc(20% - 8px);
     padding: 6px;
-    margin: 10px 0px;
-    margin-left: 5px;
+    margin: 10px 0;
     position: relative;
     border: 1px solid #fff;
     cursor: pointer;
     background-color: #fff;
+    box-sizing: border-box;
+  }
+  .goods-show-img img {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
   }
   .goods-show-info:hover {
     border: 1px solid #ccc;
@@ -368,7 +377,12 @@ li {
     color: $theme_color;
   }
   .goods-page {
-    margin:10px auto ;
-    text-align: right;
-    width: 1200px;
+    margin: 10px 0;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+
+    :deep(.el-pagination) {
+      justify-content: flex-end;
+    }
   }

buyer/src/assets/styles/goodsList.scss

@@ -9,18 +9,24 @@
 .goods-list {
   display: flex;
   flex-wrap: wrap;
-  width: 1200px;
+  width: 100%;
   margin: 0 auto;
+  column-gap: 10px;
 }
 .goods-show-info {
-  width: 235px;
+  width: calc(20% - 8px);
   padding: 6px;
-  margin: 10px 0px;
-  margin-left: 5px;
+  margin: 10px 0;
   position: relative;
   border: 1px solid #fff;
   cursor: pointer;
   background-color: #fff;
+  box-sizing: border-box;
+}
+.goods-show-img img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
 }
 .goods-show-info:hover {
   border: 1px solid #ccc;
@@ -37,6 +43,7 @@
   text-overflow: ellipsis;
   display:-webkit-box;
   -webkit-line-clamp:2;
+  line-clamp: 2;
   -webkit-box-orient:vertical;
   color:#808080;
 }
@@ -62,7 +69,12 @@
   color: $theme_color;
 }
 .goods-page {
-  margin:10px auto ;
-  text-align: right;
-  width: 1200px;
+  margin: 10px 0;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
 }