代码提交

2023-11-14 17:21:03 +08:00
parent d0b337c596
commit dcab74274f
567 changed files with 22414 additions and 7375 deletions
--- a/pages/index/components/public/ScrollGoodRow.vue
+++ b/pages/index/components/public/ScrollGoodRow.vue
@ -0,0 +1,107 @@
+<!--
+    @name: ScrollGoodRow
+    @author: kahu4
+    @date: 2023-11-01 15:56
+    @description：ScrollGoodRow
+    @update: 2023-11-01 15:56
+-->
+<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>
+  <scroll-view
+      scroll-x
+      class="scroll-view"
+  >
+    <view
+        class="scroll-inner"
+    >
+
+      <template
+          v-for="good in props.products"
+          :key="good.id"
+      >
+        <Goods
+            class="scroll-item"
+            info-padding="15rpx 20rpx"
+            :goods="good"
+        >
+          <template #options>
+            <Options
+                :goods="good"
+                show-btn
+            ></Options>
+          </template>
+        </Goods>
+      </template>
+    </view>
+  </scroll-view>
+
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.scroll-view {
+  width: 100%;
+  overflow: hidden;
+
+  .scroll-inner {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 20rpx;
+
+    .scroll-item {
+      flex-shrink: 0;
+      max-width: 290rpx;
+      background: #fff;
+      border-radius: 15rpx;
+      overflow: hidden;
+
+      .good-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 20rpx;
+
+        .price {
+          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>