feat 首页页面完善

assets/style/global.scss

@@ -257,6 +257,7 @@ view{
 .h-all {
   height: 100%;
 }
+
 .relative {
   position: relative;
 }
@@ -318,7 +319,9 @@ view{
 .inline-block {
   display: inline-block;
 }
-
+.m-auto {
+  margin:0 auto;
+}
 
 
 /*  (-500 to 1000px, all numbers, auto convert to rpx: px * 2 = rpx) */
@@ -633,7 +636,8 @@ $colors: (
   'A71E2A', '6E001D', 'FFC107', 'E0A800', 'D39E00', 'B8860B',
   '6C5600', '17A2B8', '138496', '117A8B', '0C5460', '062B36',
   'F5F7FA', 'EEEEEE', '02B176', 'FA341E', 'D46C0D', 'FFA599',
-  'FF4B33', '38D97D',
+  'FF4B33', '38D97D', 'C39760', 'ED4B17', 'F9B71B', 'FFE600',
+  'FFF4E8'
 );
 
 // 文字颜色类 - 标准化格式
@@ -721,6 +725,10 @@ $colors: (
 .bg-white {
   background-color: #ffffff;
 }
+.bg-img{
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: opacity 0.3s ease-in-out;// 图片加载过渡效果
+}
 
 /* 透明度类 */
 @for $i from 1 through 9 {

assets/style/index.scss

@@ -53,7 +53,7 @@
 }
 
 //文本2行
-.text-two-line {
+.text-ellipsis-2 {
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;

components/public/scs-helang-waterfall.vue

@@ -0,0 +1,106 @@
+<template>
+    <!--
+ * @Author: jmy
+ * @Date: 2026-01-09 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-01-09 15:02:20
+ * @Description: helang瀑布流组件
+-->
+    <view class="px-12 mt-14 flex  justify-between gap-11">
+        <view class="flex-1" :style="{ gap: gapValue + 'px' }" v-for="(column, columnIndex) in columnCount"
+            :key="columnIndex">
+            <view v-for="(item, index) in getColumnwaterfallList(columnIndex)" :key="item.id || index"
+                class="w-all relative rounded-8 overflow-hidden prodoct-item mb-11">
+                <slot name="special"></slot>
+                <view class="w-all h-171 relative rounded-t-8 overflow-hidden">
+                    <image class="w-all h-171 bg-img" :src="item.image" lazy-load @load="handleImageLoad(item.id)"
+                        :class="{ 'opacity-10': isImageLoaded(item.id), 'opacity-0': !isImageLoaded(item.id) }"
+                        mode="aspectFill"></image>
+                    <!-- 加载中显示占位符 -->
+                    <view v-if="!isImageLoaded(item.id)"
+                        class="w-all h-171 absolute top-0 left-0 flex items-center justify-center bg-gray-100">
+                        <text class="scroll-loading scroll-rotate"></text>
+                    </view>
+                </view>
+                <slot name="default" :item="item"></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        waterfallList: {
+            type: Array,
+            default: () => [
+                {
+                    id: 1,
+                    image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+                    title: '云南白药EGER每瓶重50g保险液每测试',
+                },
+                {
+                    id: 2,
+                    image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+                    title: '云南白药EGER每瓶重50g保险液每测试',
+                },
+            ]
+        },
+        calcGap: {
+            type: Number,
+            default: 11
+        },
+        columnCount: {
+            type: Number,
+            default: 2
+        }
+    },
+    data() {
+        return {
+            // 默认示例数据
+            defaultwaterfallList: [
+
+            ],
+            // 图片加载状态管理
+            imageLoadingStatus: {}
+        }
+    },
+    computed: {
+        gapValue() {
+            return this.calcGap / this.columnCount
+        }
+    },
+    methods: {
+        // 检查图片是否已加载
+        isImageLoaded(id) {
+            // 特殊项（本地图片）默认已加载
+            if (!id) return true;
+            return this.imageLoadingStatus[id] === true;
+        },
+
+        // 处理图片加载完成事件
+        handleImageLoad(id) {
+            if (id) {
+                this.$set(this.imageLoadingStatus, id, true);
+            }
+        },
+
+        // 按列分配数据项
+        getColumnwaterfallList(columnIndex) {
+            const waterfallList = [];
+            const columnCount = 2;
+
+            // 将数据项分配到不同列
+            this.waterfallList.forEach((item, index) => {
+                if (index % columnCount === columnIndex) {
+                    waterfallList.push(item);
+                }
+            });
+
+            return waterfallList;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

pages/home/components/home-goods.vue → pages/home/components/home-goods-item.vue

@@ -1,6 +1,5 @@
 <template>
-    <view class="px-12 mt-14">
-        <view class="bg-white  pb-10 rounded-8 overflow-hidden">
+      <view class="bg-white  pb-10 rounded-8 overflow-hidden">
             <image class="w-all h-195"
                 src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422">
             </image>
@@ -46,7 +45,6 @@
                 </view>
             </view>
         </view>
-    </view>
 </template>
 <style scoped lang="scss">
 .goods-count {

pages/home/components/home-more-item.vue

@@ -0,0 +1,42 @@
+<template>
+    <view class="bg-white py-6 px-10">
+        <view class="fw-400 fs-14 text-333333 text-ellipsis-2">{{ item.title }}</view>
+        <view class="fw-400 fs-11 text-D46C0D mt-4">肌肉酸疼、扭伤拉伤</view>
+        <view class="fw-400 fs-11 text-999999 flex items-center gap-5 mt-4">
+            <text>已售 5485</text>
+            <text class="inline-block w-1 h-9 bg-CCCCCC"></text>
+            <text>惊艳度 98%</text>
+        </view>
+        <view class="flex items-center gap-4 text-FF4B33 fs-11 mt-5">
+            <view class="px-4 ph-2 border border-FFA599 rounded-2 ">9.5折</view>
+            <view class="px-4 ph-2 border border-FFA599 rounded-2 ">限购1份</view>
+        </view>
+        <view class="flex items-center justify-between mt-8">
+            <view class="text-FA341E">
+                <text class="fs-10 fw-600">¥</text>
+                <text class="fs-18 fw-600">10</text>
+                <text class="fs-13 fw-600">.36</text>
+            </view>
+            <image class="w-20 h-20" src="/static/images/home/add_car_icon20@2x.png"></image>
+        </view>
+        <view class="w-all h-18 bg-FFF4E8 flex items-center justify-between mt-10 py-3 px-5">
+            <view class="flex items-center gap-2">
+                <image class="w-12 h-12" src="/static/images/home/ranking_icon12@2x.png">
+                </image>
+                <text class="text-4D4D4D fs-10 fw-400">健康新品热销榜</text>
+                <image class="w-34 h-11" src="/static/images/home/TOP.2@2x.png"></image>
+            </view>
+            <image class="w-8 h-8" src="/static/images/home/purple_right_arrow_right_icon12@2x_1.png"></image>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    props: {
+        itemData: {
+            type: Object,
+            default: () => ({})
+        }
+    }
+}
+</script>

pages/home/components/home-sales.vue

@@ -0,0 +1,56 @@
+<template>
+    <view class="w-all h-250 relative mb-11 rounded-8 overflow-hidden">
+        <image class="w-all h-250 bg-img" src="/static/images/home/sales_ranking_bg@2x.png" mode="aspectFill"></image>
+        <view class="absolute top-0 left-0 w-all h-all zi-10 ">
+            <view class="fw-500 fs-16 text-333333 mt-9 ml-10 flex items-center">
+                <text>实时销量榜</text>
+                <image class="w-12 h-12 mt-2" src="/static/images/home/sales_ranking_arrow_right_icon12@2x.png"></image>
+            </view>
+            <view class="fw-400 fs-11 text-D46C0D mt-3 ml-10">
+                今日销量2.8万件
+            </view>
+            <view class="p-8 rounded-8 bg-white mt-7 flex flex-column gap-4 w-167 m-auto">
+                <view class="flex gap-6" v-for="(item, index) in 3" :key="item.id">
+                    <view class="w-52 h-52 rounded-4 overflow-hidden bg-img relative">
+                        <image class="w-52 h-52"
+                            src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422">
+                        </image>
+                        <view
+                            class="w-12 h-12  rounded-4 absolute top-0 left-0 flex items-center justify-center text-white fs-10"
+                            :class="bgColor[index + 1]">
+                            {{ index + 1 }}</view>
+                    </view>
+                    <view class="flex-1 flex flex-column justify-between">
+                        <view class="fs-10 text-333333 fw-400 text-ellipsis-2">
+                            乌灵胶SAKJDFHAJKSD囊81粒养心安神失眠健忘改善</view>
+                        <view class="flex items-center justify-between mt-4">
+                            <view class="text-FA341E">
+                                <text class="fs-10 fw-600">¥</text>
+                                <text class="fs-18 fw-600">10</text>
+                                <text class="fs-13 fw-600">.36</text>
+                            </view>
+                            <image class="w-20 h-20" src="/static/images/home/add_car_icon20@2x.png"></image>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+
+</template>
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+            bgColor: {
+                1: 'bg-ED4B17',
+                2: 'bg-0069D9',
+                3: 'bg-28A745',
+            }
+        }
+    }
+}
+</script>

pages/home/index.vue

@@ -54,8 +54,18 @@
 							@tabChange="tabProductChange" />
 					</view>
 					<!-- 商品列表 -->
-					<HomeGoods />
-
+					<view class="px-12 mt-14">
+						<HomeGoodsItem />
+					</view>
+					<!-- 更多列表 -->
+					<ScsHelangWaterfall :waterfallList="waterfallList">
+						<template v-slot:special>
+							<HomeSalesItem />
+						</template>
+						<template v-slot:default="{ item }">
+							<HomeMoreItem :itemData="item" :itemIndex="index" :key="item.id" />
+						</template>
+					</ScsHelangWaterfall>
 					<u-gap height="15"></u-gap>
 				</template>
 			</ScsScrollView>
@@ -74,7 +84,12 @@
 import HomeMenu from './components/home-menu.vue'
 import HomeProduct from './components/home-product.vue'
 import HomeSearch from './components/home-search.vue'
-import HomeGoods from './components/home-goods.vue'
+import HomeGoodsItem from './components/home-goods-item.vue'
+import HomeSalesItem from './components/home-sales.vue'
+import HomeMoreItem from './components/home-more-item.vue'
+import ScsHelangWaterfall from '@/components/public/scs-helang-waterfall.vue'
+
+
 import {
 	getMenu,
 	getCanvas,
@@ -89,7 +104,10 @@ export default {
 		HomeMenu,
 		HomeProduct,
 		HomeSearch,
-		HomeGoods,
+		HomeGoodsItem,
+		HomeSalesItem,
+		HomeMoreItem,
+		ScsHelangWaterfall,
 	},
 	data() {
 		return {
@@ -110,6 +128,37 @@ export default {
 			tabsProductIndex: 0,
 			goodList: [1, 2],
 			isShowToTop: false,
+			waterfallList: [
+				{
+					id: 2,
+					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+					title: '云南白药EGER每瓶重50g保险液每测试',
+				},
+				{
+					id: 3,
+					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+					title: '云南白药EGER每瓶重50g保险液每测试',
+				},
+				{
+					id: 4,
+					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+					title: '云南白药EGER每瓶重50g保险液每测试',
+				},
+				{
+					id: 5,
+					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+					title: '云南白药EGER每瓶重50g保险液每测试',
+				},
+				{
+					id: 4,
+					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+					title: '云南白药EGER每瓶重50g保险液每测试',
+				},
+				{
+					id: 5,
+					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
+					title: '云南白药EGER每瓶重50g保险液每测试',
+				}],
 		}
 	},
 	onLoad() {
@@ -182,5 +231,4 @@ export default {
 	}
 
 }
-
 </style>