首页瀑布流制作

order-app/src/pages/index/index.vue

@@ -1,12 +1,53 @@
 <template>
-	<u-swiper border-radius='1' :duration='duration' :interval='interval' :height="height" :list="swiperList"></u-swiper>
+	<u-swiper border-radius='1' :duration='duration' :interval='interval' :height="height"
+		:list="swiperList"></u-swiper>
 	<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">热门推荐</u-divider>
+	<view class="wrap">
+		<u-waterfall v-model="flowList" ref="uWaterfall1">
+			<template v-slot:left="{leftList}">
+				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<view class="demo-title">
+						{{item.title}}
+					</view>
+					<view class="price-item">
+						<view class="demo-price">
+							{{item.price}}元
+						</view>
+						<view class="demo-title">
+							/份
+						</view>
+						<image class="carimg" :src="carimg"></image>
+					</view>
+				</view>
+			</template>
+			<template v-slot:right="{rightList}">
+				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<view class="demo-title">
+						{{item.title}}
+					</view>
+					<view class="price-item">
+						<view class="demo-price">
+							{{item.price}}元
+						</view>
+						<view class="demo-title">
+							/份
+						</view>
+						<image class="carimg" :src="carimg"></image>
+					</view>
+				</view>
+			</template>
+		</u-waterfall>
+	</view>
 </template>
 
 <script setup>
 	import {
 		ref
 	} from 'vue';
+	//购物车图片
+	const carimg = ref('/static/goodscar.png')
 	//轮播图高度
 	const height = ref('400')
 	//是否显示面板指示点
@@ -25,6 +66,38 @@
 	}, {
 		image: '/static/swiper_3.png'
 	}])
+	//瀑布流数据
+	const flowList = ref([{
+			price: 75,
+			title: '小炒肉盖饭',
+			image: '/static/swiper_1.png'
+		},
+		{
+			price: 385,
+			title: '手拉面',
+			image: '/static/swiper_1.png'
+		},
+		{
+			price: 784,
+			title: '小笼包',
+			image: '/static/swiper_1.png'
+		},
+		{
+			price: 7891,
+			title: '馄饨',
+			image: '/static/swiper_1.png'
+		},
+		{
+			price: 2341,
+			title: '香菇肉片盖饭',
+			image: '/static/swiper_1.png'
+		},
+		{
+			price: 2342,
+			title: '番茄鸡蛋盖饭',
+			image: '/static/swiper_1.png'
+		}
+	])
 </script>
 
 <style>
@@ -53,4 +126,86 @@
 		font-size: 36rpx;
 		color: #8f8f94;
 	}
+
+	.wrap {
+		padding: 0px 5px;
+	}
+
+	.demo-warter {
+		border-radius: 8px;
+		margin: 5px;
+		background-color: #ffffff;
+		padding: 5px;
+		position: relative;
+	}
+
+	.u-close {
+		position: absolute;
+		top: 32rpx;
+		right: 32rpx;
+	}
+
+	.demo-image {
+		width: 100%;
+		border-radius: 4px;
+	}
+
+	.demo-title {
+		font-size: 30rpx;
+		margin-top: 5px;
+		color: $u-main-color;
+	}
+
+	.demo-tag {
+		display: flex;
+		margin-top: 5px;
+	}
+
+	.demo-tag-owner {
+		background-color: $u-type-error;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		padding: 4rpx 14rpx;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+		line-height: 1;
+	}
+
+	.demo-tag-text {
+		border: 1px solid $u-type-primary;
+		color: $u-type-primary;
+		margin-left: 10px;
+		border-radius: 50rpx;
+		line-height: 1;
+		padding: 4rpx 14rpx;
+		display: flex;
+		align-items: center;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+	}
+
+	.demo-price {
+		font-size: 30rpx;
+		color: #FF7670;
+		margin-top: 5px;
+	}
+
+	.demo-shop {
+		font-size: 22rpx;
+		color: $u-tips-color;
+		margin-top: 5px;
+	}
+
+	.price-item {
+		display: flex;
+		align-items: center;
+	}
+
+	.carimg {
+		height: 50rpx;
+		width: 50rpx;
+		margin-top: 5rpx;
+		margin-left: 8px;
+	}
 </style>