feat: 相关商品样式调整

src/components/SwipeCards/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <view class="card border-box pb-12 relative">
+  <view class="card border-box pb-12 relative mt-12">
     <view
-      class="card-item"
+      class="card-item absolute overflow-hidden"
       v-for="(card, index) in list"
       :key="card.__uid"
       :style="[itemStyle(index, card), transformStyle(index, card)]"
@@ -12,22 +12,24 @@
       @transitionend="onTransitionEnd(index)"
     >
       <view
-        class="inner-card overflow-hidden"
+        class="inner-card bg-white"
         @click.stop.prevent.capture="placeOrderHandle(card)"
       >
         <!-- 商品大图部分：自适应剩余空间 -->
-        <view class="goods-image-wrapper">
+        <view class="goods-image-wrapper relative">
-          <image
+          <image class="w-full h-full" :src="card.commodityPhoto" />
-            class="goods-image"
+          <view
-            :src="card.commodityPhoto"
+            class="goods-title absolute left-0 right-0 bottom-0 border-box p-12"
-            mode="aspectFill"
+          >
-          />
+            <view class="font-size-14 font-500 color-white ellipsis-1">
-          <view class="goods-title">
+              {{ card.commodityName }}
-            <text class="goods-text">{{ card.commodityName }}</text>
+            </view>
-            <view class="card-price-row">
+            <view class="card-price-row color-white">
-              <text class="card-price-fu">￥</text>
+              <text class="font-size-11">￥</text>
-              <text class="card-price">{{ card.specificationPrice }}</text>
+              <text class="font-size-14 font-bold">
-              <text class="card-unit" v-if="card.stockUnitLabel"
+                {{ card.specificationPrice }}
+              </text>
+              <text class="font-size-11 ml-2" v-if="card.stockUnitLabel"
                 >/{{ card.stockUnitLabel }}</text
               >
             </view>
@@ -35,19 +37,17 @@
         </view>
 
         <!-- 底部相册部分：固定比例或高度 -->
-        <view class="album-row">
+        <view class="border-box p-12 flex flex-justify-between">
           <view
             v-for="(item, index) in card.commodityPhotoList"
             :key="index"
-            class="album-item"
+            class="album-item relative overflow-hidden bg-f5 rounded-10"
           >
-            <view v-if="item" class="album-image-wrapper">
+            <image :src="item.photoUrl" mode="aspectFill" />
-              <image
+            <view
-                class="album-image"
+              class="album-title absolute border-box p-8 left-0 right-0 bottom-0 color-white font-size-14 font-500 ellipsis-1"
-                :src="item.photoUrl"
+            >
-                mode="aspectFill"
+              {{ item.photoName }}
-              />
-              <view class="album-title">{{ item.photoName }}</view>
             </view>
           </view>
         </view>
@@ -73,7 +73,8 @@ const { windowWidth } = uni.getWindowInfo();
 
 let uidCounter = 0;
 // 始终生成全局唯一的 __uid，避免因重复 key 导致后续卡片无法正确重渲染与绑定事件
-const genUid = (item) => `swipe_${item?.commodityId ?? 'unknown'}_${uidCounter++}_${Date.now()}`;
+const genUid = (item) =>
+  `swipe_${item?.commodityId ?? "unknown"}_${uidCounter++}_${Date.now()}`;
 const normalize = (item) => ({
   ...item,
   __uid: genUid(item),
@@ -220,129 +221,6 @@ const placeOrderHandle = (item) => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.card {
+@import "./styles/index.scss";
-  position: relative;
-  height: 320px;
-}
-
-.card-item {
-  position: absolute;
-  inset: 0;
-  will-change: transform, opacity;
-  height: calc(100% - 30px);
-  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.08);
-}
-
-.inner-card {
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  border-radius: 20px;
-  flex-direction: column;
-}
-
-/* 商品大图部分：撑满除相册外的空间 */
-.goods-image-wrapper {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 335 / 200;
-  overflow: hidden;
-}
-
-.goods-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.goods-title {
-  position: absolute;
-  inset: 0;
-  padding: 12px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.goods-text {
-  color: #fff;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-price-fu {
-  color: #fff;
-  font-size: 11px;
-  font-weight: normal;
-}
-
-.card-price {
-  color: #fff;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.card-unit {
-  font-size: 11px;
-  color: #fff;
-  font-weight: normal;
-  margin-left: 2px;
-}
-
-.album-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  aspect-ratio: 335 / 84;
-}
-
-.album-item {
-  width: calc((100% - 24px) / 3);
-  height: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-
-.album-image-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.album-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.album-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
-  color: #fff;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 </style>

src/components/SwipeCards/styles/index.scss

@@ -0,0 +1,43 @@
+.card {
+  height: 320px;
+}
+
+.card-item {
+  inset: 0;
+  will-change: transform, opacity;
+  height: 277px;
+  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
+}
+
+.inner-card {
+  width: 100%;
+  height: 100%;
+}
+
+/* 商品大图部分：撑满除相册外的空间 */
+.goods-image-wrapper {
+  width: 100%;
+  height: 193px;
+}
+
+.goods-title {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+}
+
+.album-item {
+  width: 96px;
+  height: 60px;
+}
+
+.album-title {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+}

src/static/scss/box-sizing.scss

@@ -0,0 +1,3 @@
+.border-box {
+  box-sizing: border-box;
+}

src/static/scss/index.scss

@@ -19,3 +19,4 @@
 @import "./width.scss";
 @import "./z-index.scss";
 @import "./white-space.scss";
+@import "./box-sizing.scss";

src/static/scss/position.scss

@@ -6,3 +6,15 @@
 .absolute {
   position: absolute;
 }
+
+.left-0 {
+  left: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}