项目初始化

pages/index/components/first-one.vue

@@ -0,0 +1,26 @@
+<!-- 分类展示：first-one 风格  -->
+<template>
+  <view class="ss-flex-col">
+    <view class="goods-box" v-for="item in pagination.list" :key="item.id">
+      <s-goods-column
+        size="sl"
+        :data="item"
+        @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    pagination: Object,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-box {
+    width: 100%;
+  }
+</style>

pages/index/components/first-two.vue

@@ -0,0 +1,66 @@
+<!-- 分类展示：first-two 风格  -->
+<template>
+  <view>
+    <view class="ss-flex flex-wrap">
+      <view class="goods-box" v-for="item in pagination?.list" :key="item.id">
+        <view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
+          <view class="goods-img">
+            <image class="goods-img" :src="item.picUrl" mode="aspectFit" />
+          </view>
+          <view class="goods-content">
+            <view class="goods-title ss-line-1 ss-m-b-28">{{ item.title }}</view>
+            <view class="goods-price">￥{{ fen2yuan(item.price) }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+
+  const props = defineProps({
+    pagination: Object,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-box {
+    width: calc((100% - 20rpx) / 2);
+    margin-bottom: 20rpx;
+
+    .goods-img {
+      width: 100%;
+      height: 246rpx;
+      border-radius: 10rpx 10rpx 0px 0px;
+    }
+
+    .goods-content {
+      width: 100%;
+      background: #ffffff;
+      box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
+      padding: 20rpx 0 32rpx 16rpx;
+      box-sizing: border-box;
+      border-radius: 0 0 10rpx 10rpx;
+
+      .goods-title {
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #333333;
+      }
+
+      .goods-price {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #e1212b;
+      }
+    }
+
+    &:nth-child(2n + 1) {
+      margin-right: 20rpx;
+    }
+  }
+</style>

pages/index/components/second-one.vue

@@ -0,0 +1,80 @@
+<!-- 分类展示：second-one 风格  -->
+<template>
+  <view>
+    <!-- 一级分类的名字 -->
+    <view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
+      <view class="title-line-left" />
+      <view class="title-text ss-p-x-20">{{ props.data[activeMenu].name }}</view>
+      <view class="title-line-right" />
+    </view>
+    <!-- 二级分类的名字 -->
+    <view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
+      <view
+        class="goods-item"
+        v-for="item in props.data[activeMenu].children"
+        :key="item.id"
+        @tap="
+          sheep.$router.go('/pages/goods/list', {
+            categoryId: item.id,
+          })
+        "
+      >
+        <image class="goods-img" :src="item.picUrl" mode="aspectFill" />
+        <view class="ss-p-10">
+          <view class="goods-title ss-line-1">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    activeMenu: [Number, String],
+  });
+</script>
+
+<style lang="scss" scoped>
+  .title-box {
+    .title-line-left,
+    .title-line-right {
+      width: 15px;
+      height: 1px;
+      background: #d2d2d2;
+    }
+  }
+
+  .goods-item {
+    width: calc((100% - 20px) / 3);
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    &:nth-of-type(3n) {
+      margin-right: 0;
+    }
+
+    .goods-img {
+      width: calc((100vw - 140px) / 3);
+      height: calc((100vw - 140px) / 3);
+    }
+
+    .goods-title {
+      font-size: 26rpx;
+      font-weight: bold;
+      color: #333333;
+      line-height: 40rpx;
+      text-align: center;
+    }
+
+    .goods-price {
+      color: $red;
+      line-height: 40rpx;
+    }
+  }
+</style>