feat: 商品卡片组件的样式调整

src/components/SwipeCards/index.vue

@@ -15,38 +15,24 @@
         <!-- 商品大图部分：自适应剩余空间 -->
         <view class="goods-image-wrapper relative">
           <image class="w-full h-full" :src="card.commodityPhoto" mode="aspectFill"/>
-          <view
-            class="goods-title absolute left-0 right-0 bottom-0 border-box p-12"
-          >
-            <view class="font-size-14 font-500 color-white ellipsis-1">
-              {{ card.commodityName }}
-            </view>
-            <view class="card-price-row color-white">
-              <text class="font-size-11">￥</text>
-              <text class="font-size-14 font-bold">
-                {{ card.specificationPrice }}
-              </text>
-              <text class="font-size-11 ml-2" v-if="card.stockUnitLabel"
-                >/{{ card.stockUnitLabel }}</text
-              >
-            </view>
-          </view>
         </view>
 
-        <!-- 底部相册部分：固定比例或高度 -->
+        <!-- 底部：价格 + 购买按钮 -->
-        <view class="border-box p-12 flex flex-justify-between">
+        <view class="card-footer border-box p-12 flex flex-justify-between flex-items-center">
-          <view
+          <view class="border-box">
-            v-for="(item, index) in card.commodityPhotoList"
+            <view class="font-size-14 font-500 color-333 ellipsis-1">
-            :key="index"
+              {{ card.commodityName }}
-            class="album-item relative overflow-hidden bg-f5 rounded-10"
+            </view>
-          >
+            <view class="card-price-row color-333">
-            <image :src="item.photoUrl" mode="aspectFill" />
+              <text class="font-size-11">￥</text>
-            <view
+              <text class="font-size-24 font-bold">
-              class="album-title absolute left-0 right-0 bottom-0 color-white font-size-11 font-500 ellipsis-1 flex flex-items-center flex-justify-center"
+                {{ card.specificationPrice }}
-            >
+              </text>
-              {{ item.photoName }}
+              <text class="font-size-11 ml-2" v-if="card.stockUnitLabel">/{{ card.stockUnitLabel }}</text>
             </view>
           </view>
+
+          <view class="buy-btn" @click.stop="placeOrderHandle(card)">购买</view>
         </view>
       </view>
     </view>

src/components/SwipeCards/styles/index.scss

@@ -21,13 +21,6 @@
   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;
@@ -38,3 +31,31 @@
   background: rgba(0, 0, 0, 0.5);
   height: 20px;
 }
+
+/* 底部价格与购买按钮 */
+.card-footer {
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
+
+.card-footer .price-left {
+  display: flex;
+  align-items: baseline;
+  color: #171717;
+}
+
+.buy-btn {
+  background-color: $theme-color-500;
+  color: #fff;
+  margin-top: 12px;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.buy-btn:active {
+  opacity: 0.9;
+}