mnsx/pages/index/discount.vue

<template>
	<view class="discount">
		<view class="discount-top">
			<view class="seckill border-index" @click="loadMore('/pages/product/seckill')">
				<view class="image">
					<image src="../../static/icon/seckill.png" mode=""></image>
				</view>
				<view class="idt">
					<b>限时秒杀</b><br>
					<text>挑战全网最低价格</text>
				</view>
			</view>
			<view class="exchange-certificate border-index" @click="loadMore('/pages/product/exchange')">
				<view class="image">
					<image src="../../static/icon/exchange-certificate.png" mode=""></image>
				</view>
				<view class="idt">
					<b>兑换券</b><br>
					<text>超值兑换</text>
				</view>
			</view>
		</view>
		<view class="exchange-certificate border-index" @click="loadMore('/pages/product/pointsExchange')" style="width: 690rpx;height: 110rpx;margin: 0 auto;">
			<view class="image">
				<image src="../../static/icon/collage.png" mode=""></image>
			</view>
			<view class="idt">
				<b>积分兑换</b><br>
				<text>超值兑换</text>
			</view>
		</view>
		<view class="collage border-index"  @click="loadMore('/pages/product/groupBooking/index')" v-if="combinationList.list.length > 0">
			<view class="">
				<view class="image">
					<image src="../../static/icon/collage.png" mode=""></image>
				</view>
				<view class="idt">
					<b>超值拼团</b><br>
					<text>拼团专场</text>
				</view>
				<view class="collage-d">
					<span>美食拼团专场 · · ·</span>
				</view>
			</view>
				<view class="collage-r">
					<view class="cr" v-for="(item,index) in combinationList.list">
						<image :src="item.image"></image>
						<view class="crt">{{item.title}}</view>
					</view>
					<!-- <view class="cr">
						<image src="../../static/img/hpb.png"></image>
						<view class="crt">88</view>
					</view><view class="cr">
						<image src="../../static/img/hpb.png"></image>
						<view class="crt">88</view>
					</view> -->
					<!-- <view class="" v-for="c in combinationList.list" :key="c.id"> -->
					<!-- </view> -->
				</view>
		</view>
		<view class="" style="height: 20rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		props: ["combinationList"],
		data() {
			return {
			}
		},
		onShow() {
			
		},
		methods: {
			loadMore(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.discount {
		display: grid;
		
		b {
			font-family: PingFang-SC-Medium;
			color: #333333;
			font-size: 32rpx;
		}
		
		text {
			font-size: 21rpx;
			color: #989B9F;
		}
	}
	
	.image {
		float: left;
		margin: 20rpx;
  
		image {
			width: 66rpx;
			height: 66rpx;
		}
	}
	
	.idt {
		margin-top: 20rpx;
	}
	
	.seckill {
		// flex: 1;
		width: 337rpx;
		margin: 27rpx;
		height: 130rpx;
	}
	
	.exchange-certificate {
		flex: 1;
		margin: 27rpx;
		height: 130rpx;
		margin-left: 0;
	}
	
	.discount-top {
		width: 100%;
		display: flex;
		// margin-bottom: -27rpx;
	}
	
	.collage {
		margin: 27rpx;
		margin-top: -12rpx;
		height: 198rpx;
		display: flex;
		
		.collage-d {
			height: 50rpx;
			padding: 10rpx 0;
			margin-top: 10rpx;
			margin-left: 20rpx;
			width: 279rpx;
			background-color: #DCB876;
			border-radius: 10px;
			text-align: center;
			color: #FFFFFF;
			font-size: 26rpx;
			
		}
		
		.collage-r {
			display: flex;
			margin: 15rpx 0 0 50rpx;
			
			.cr {
				text-align: center;
				margin: 40rpx;
				margin-left: 0;
				
				.crt {
					color: #989B9F;
					font-size: 19rpx;
				}
			}
			image {
				width: 74rpx;
				height: 74rpx;
			}
		}
	}
</style>