feat: 订单详情功能完善

pages/order/components/GoodsInfo/styles/index.scss

@@ -1,77 +1,154 @@
-.goods-info {
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 12px 16px 20px;
-}
+// ===== SASS变量定义 =====
+// 颜色系统
+$color-white: #fff;
+$color-primary: #333;
+$color-secondary: #666;
+$color-placeholder: pink;
 
-.hotel-header {
+// 字体大小
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+
+// 字体粗细
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+
+// 间距系统
+$spacing-xs: 8px;
+$spacing-sm: 10px;
+$spacing-md: 12px;
+$spacing-lg: 15px;
+$spacing-xl: 16px;
+$spacing-xxl: 20px;
+
+// 圆角
+$border-radius-sm: 8px;
+$border-radius-md: 10px;
+
+// 尺寸
+$icon-size-sm: 24px;
+$image-size-md: 65px;
+
+// ===== SASS混合器 =====
+@mixin flex-center {
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
 }
 
-.hotel-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-}
-
-.hotel-name {
-  color: #333;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.goods-detail {
-  display: flex;
-  margin-bottom: 20px;
-}
-
-.goods-image {
-  background-color: pink;
-  width: 65px;
-  height: 65px;
-  border-radius: 8px;
-  margin-right: 15px;
-}
-
-.goods-description {
-  flex: 1;
-}
-
-.goods-title {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.goods-date {
-  font-size: 12px;
-  color: #666;
-}
-
-.included-services {
-  margin-top: 10px;
-}
-
-.services-title {
-  display: block;
-  font-size: 12px;
-  margin-bottom: 12px;
-}
-
-.service-item {
+@mixin flex-between {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
 }
 
-.service-name {
-  font-size: 14px;
+@mixin text-style($size, $color: $color-primary, $weight: $font-weight-normal) {
+  font-size: $size;
+  color: $color;
+  font-weight: $weight;
 }
 
-.service-quantity {
-  font-size: 12px;
-  color: #666;
+@mixin card-container {
+  background-color: $color-white;
+  border-radius: $border-radius-md;
+  padding: $spacing-md $spacing-xl $spacing-xxl;
+}
+
+// ===== 主要样式 =====
+.goods-info {
+  @include card-container;
+
+  // 酒店头部信息
+  .hotel-header {
+    @include flex-center;
+    margin-bottom: $spacing-sm;
+
+    .hotel-icon {
+      width: $icon-size-sm;
+      height: $icon-size-sm;
+      margin-right: $spacing-xs;
+    }
+
+    .hotel-name {
+      @include text-style($font-size-xs, $color-primary, $font-weight-medium);
+    }
+  }
+
+  // 商品详情区域
+  .goods-detail {
+    display: flex;
+    margin-bottom: $spacing-xxl;
+
+    .goods-image {
+      background-color: $color-placeholder;
+      width: $image-size-md;
+      height: $image-size-md;
+      border-radius: $border-radius-sm;
+      margin-right: $spacing-lg;
+      flex-shrink: 0;
+    }
+
+    .goods-description {
+      flex: 1;
+      min-width: 0; // 防止flex子项溢出
+
+      .goods-title {
+        display: block;
+        @include text-style($font-size-sm, $color-primary, $font-weight-medium);
+        margin-bottom: $spacing-xs;
+        line-height: 1.4;
+      }
+
+      .store-address {
+        @include flex-center;
+        @include text-style($font-size-xs, $color-primary);
+
+        text {
+          flex: 1;
+          padding: 0 6px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      .in-date,
+      .out-date {
+        @include text-style($font-size-xs, $color-secondary);
+        margin-top: 8px;
+      }
+    }
+  }
+
+  // 包含服务区域
+  .included-services {
+    margin-top: $spacing-sm;
+
+    .services-title {
+      display: block;
+      @include text-style($font-size-xs, $color-primary, $font-weight-medium);
+      margin-bottom: $spacing-md;
+    }
+
+    .service-item {
+      @include flex-between;
+      align-items: center;
+      margin-bottom: $spacing-sm;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .service-name {
+        @include text-style($font-size-sm, $color-primary);
+        flex: 1;
+      }
+
+      .service-quantity {
+        @include text-style($font-size-xs, $color-secondary);
+        flex-shrink: 0;
+        margin-left: $spacing-xs;
+      }
+    }
+  }
 }