代码提交

pages/index/components/public/TwoRowGoodRow.vue

@@ -0,0 +1,96 @@
+<!--
+    @name: 两行商品
+    @author: kahu4
+    @date: 2023-11-01 16:49
+    @description：TwoRowGoodROw
+    @update: 2023-11-01 16:49
+-->
+<script setup>
+import Goods from "@/components/goodsComponents/Goods.vue";
+import Options from "@/components/goodsComponents/components/Options.vue";
+
+const props = defineProps({
+  products: {
+    type: Array
+  }
+})
+</script>
+
+<template>
+  <view
+      class="two-row"
+      v-if=" props.products"
+  >
+    <template v-for="item in props.products.slice(0,2)">
+      <view class="row-item">
+        <Goods
+            row
+            :goods="item"
+            img-width="220rpx"
+            info-padding="20rpx 20rpx"
+        >
+          <template #options>
+            <Options
+                style="width: 100%;"
+                :goods="item"
+                btn-text="立即抢购"
+                show-btn
+            ></Options>
+          </template>
+        </Goods>
+      </view>
+    </template>
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.two-row {
+  width: 100%;
+
+  .row-item {
+    @include usePadding(15, 14);
+    background: #fff;
+    margin: 20rpx 0;
+    border-radius: 15rpx;
+  }
+
+  .good-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 20rpx;
+
+    .price {
+      display: flex;
+      align-items: center;
+      color: #EE6D46;
+      font-size: 30rpx;
+
+      .tip {
+        color: #999999;
+        font-size: 24rpx;
+      }
+    }
+
+    .sale {
+      color: #999999;
+    }
+
+    .btn {
+      background: #ee6d46;
+      color: #fff;
+      font-size: 24rpx;
+      padding: 10rpx 24rpx;
+      transition: all .3s;
+
+      &:active {
+        transform-origin: right bottom;
+        scale: .9;
+      }
+    }
+  }
+}
+</style>