zh_order_food_xcx/pages-buy/group.vue

<template>
	<view class="group-box iPhone-bottom box-border-box">
		<Nav title='团购专区'></Nav>
		
		<image class="head-img" src="@/static/img/buy/group-bg.png" mode="scaleToFill"></image>
		
		<view class="box-border-box p-24">
			<view class="box-card box-border-box p-24 mb-20" v-for="(item,i) in 10" :key="i">
				<image class="goods-img mb-16" src="@/static/img/my/lqzx-bg.png" mode="scaleToFill"></image>
				<view class="text-overflow-ellipsis fs-36 fw-600 mb-20 w-100100">
					[畅销款]奥尔1良烤肉牛油拌饭11[畅销款11 ]奥尔1良烤肉牛油拌饭11[畅销款]奥尔1良烤肉牛油拌饭11[畅销款11 ]奥尔1良烤肉牛油拌饭11
				</view>
				<view class="mb-40">
					
				</view>
				
				<view class="info-box display-flex">
					<view class="flex-1">
						<span class="fs-28 fc-FB3D03 fw-400">团购价￥</span>
						<span class="fs-40 fc-FB3D03 fw-600">15.9</span>
					</view>
					<view class="info-box-qiang">
						<image class="qiang-img" src="@/static/img/buy/qiang.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style scoped lang="scss">
	.group-box{
		background-color: #EF2864;
		.head-img{
			width: 100%;
			height: 422rpx;
		}
		.box-card{
			width: 100%;
			min-height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(51,51,51,0.1);
			border-radius: 20rpx;
			.goods-img{
				width: 100%;
				height: 452rpx;
				border-radius: 20rpx;
			}
			.info-box{
				width: 100%;
				height: 72rpx;
				background: #FEE0E0;
				border-radius: 20rpx;
				line-height: 72rpx;
				padding-left: 14rpx;
				box-sizing: border-box;
				.info-box-qiang{
					width: 148rpx;
					height: 72rpx;
					background: #F63E36;
					border-radius: 0rpx 20rpx 20rpx 0rpx;
					.qiang-img{
						
					}
				}
			}
		}
	}
</style>