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

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

buyer/src/pages/home/userCenter/Coupons.vue

@@ -133,21 +133,73 @@ export default {
 <style scoped lang="scss">
 @import "../../../assets/styles/coupon.scss";
 .coupon-item {
-  height: 125px;
+  overflow: hidden;
+  height: 145px;
+  margin-left: 0;
+  $claim-width: 55px;
+
   .c-left {
-    padding: 16px;
+    width: calc(100% - #{$claim-width});
+    box-sizing: border-box;
+    padding: 20px;
+
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
+
+  b {
+    right: $claim-width;
+    width: 0;
+    background: none;
+    border-right: 1px dashed #e0e0e0;
+  }
+
   .c-right {
-    padding: 20px 16px;
-    width: 43px;
-    font-size: 14px;
+    width: $claim-width;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    letter-spacing: 4px;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    text-decoration: none;
+    user-select: none;
+
+    &:hover {
+      opacity: 0.9;
+    }
   }
+
   .canot-use {
     color: #999;
     background-color: #eee;
+    cursor: not-allowed;
+
+    &:hover {
+      opacity: 1;
+    }
   }
-  i {
-    right: 34px;
+
+  i.circle-top,
+  i.circle-bottom {
+    right: calc(#{$claim-width} - 9px);
+    width: 18px;
+    height: 18px;
+  }
+
+  i.circle-top {
+    top: -9px;
+  }
+
+  i.circle-bottom {
+    bottom: -9px;
   }
 }