首页新增秒杀模块

components/lf-seckill/lf-seckill.vue

@@ -0,0 +1,101 @@
+<template>
+	<view class="content">
+		<view class="card">
+			<view class="title">秒杀购</view>
+			<view class="desc">低价不等人，快来秒杀啦～</view>
+			<scroll-view class="scroll-view" :scroll-x="true">
+				<view class="lf-flex">
+					<view class="goods-item" v-for="(item, index) in 4" :key="index">
+						<image class="goods-img"></image>
+						<view class="lf-line-1 goods-title">日本sk-ll小灯跑</view>
+						<view class="goods-price">
+							<text>¥888</text>
+							<text>¥888</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		padding: 60rpx 32rpx 0;
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		.card{
+			width: 686rpx;
+			height: 471rpx;
+			background: #F3F8F8;
+			border-radius: 20rpx;
+			padding: 40rpx;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+			.title{
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #15716E;
+			}
+			.desc{
+				width: 317rpx;
+				height: 33rpx;
+				background: #15716E;
+				border-radius: 17rpx;
+				font-size: 24rpx;
+				color: #FFFFFF;
+				text-align: center;
+				line-height: 33rpx;
+				margin-top: 10rpx;
+				margin-bottom: 40rpx;
+			}
+			.scroll-view, .scroll-view>view{
+				width: 100%;
+			}
+			.goods-item{
+				margin-right: 33rpx;
+				width: 180rpx;
+				.goods-img{
+					width: 180rpx;
+					height: 180rpx;
+					border-radius: 10rpx;
+					background-color: #EEEEEE;
+				}
+				.goods-title{
+					font-size: 24rpx;
+					color: #222222;
+					margin-top: 10rpx;
+				}
+				.goods-price>text:nth-child(1n){
+					font-size: 28rpx;
+					font-weight: #F63434;
+				}
+				.goods-price>text:nth-child(2n){
+					font-size: 24rpx;
+					font-weight: #777777;
+					margin-left: 15rpx;
+				}
+			}
+		}
+	}
+</style>

pages/index/index/index.vue

@@ -90,6 +90,10 @@
 					<view class="lf-activity" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length" @click="$msg('活动页入口')">
 						<image src="https://picsum.photos/200" mode="aspectFill"></image>
 					</view>
+					<!-- TODO 新做秒杀模块 -->
+					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
+						<lf-seckill></lf-seckill>
+					</view>
 					<!-- TODO 广告活动模块 -->
 					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
 						<lf-multi-column-ad></lf-multi-column-ad>
@@ -394,6 +398,7 @@
 	import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
 	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
 	import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue';
+	import lfSeckill from '@/components/lf-seckill/lf-seckill.vue';
 	var app = getApp();
     export default {
         data() {
@@ -503,7 +508,8 @@
 			lfIndexShopMatrix,
 			lfShopGoodsCard,
 			lfWaterfall,
-			lfMultiColumnAd
+			lfMultiColumnAd,
+			lfSeckill
         },
 		
 		  onShow(e) {