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" @click="todet(item)">
				<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 flex-justify-space align-items-center">
					<view class="jd-f">
						<view class="jd-1"></view>
						<view class="jd-2" :style="{width:setWidth(182,92)+'rpx'}"></view>
					</view>
					<view class="">
						<span class="fs-24 fc-9">已团</span>
						<span class="fs-24 ">92件</span>
						<span class="fs-24 fc-9">/剩</span>
						<span class="fs-24 ">90</span>
					</view>
				</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 class="jiang-box fc-65420c fs-24 fw-600">直降</view>
						<view class="jiang-box-1 fs-24 fc-65420c fw-600">￥399</view>
						<image class="jiang-img" src="@/static/img/buy/x-jt.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		onShow() {
			
		},
		methods:{
			setWidth(total,num){
				let w  = 0
				let tH = 434;
				w = (tH/total * num).toFixed(0)
				console.log(w);
				return w
			},
			todet(item){
				uni.navigateTo({
					url:'/pages-buy/group-det'
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.jd-f{
		position: relative;
		width: 434rpx;
		height: 18rpx;
		.jd-1{
			position: absolute;
			top: 0;
			left: 0;
			width: 434rpx;
			height: 18rpx;
			background: #FEE0E0;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			z-index: 10;
		}
		.jd-2{
			position: absolute;
			top: 0;
			left: 0;
			height: 18rpx;
			// background: linear-gradient( 90deg, #3FF9F9 0%, #E0FEA4 100%);
			background-color: #FF2652;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			z-index: 12;
		}
	}
	
	
	.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;
					position: relative;
					.qiang-img{
						width: 60rpx;
						height: 60rpx;
						margin: 6rpx 22rpx 0 auto;
					}
					.jiang-box{
						position: absolute;
						top: -30rpx;
						left: -22rpx;
						z-index: 20;
					}
					.jiang-box-1{
						position: absolute;
						top: 0rpx;
						left: -30rpx;
						z-index: 20;
					}
					.jiang-img{
						position: absolute;
						width: 120rpx;
						height: 90rpx;
						left: -60rpx;
						bottom: 0;
						z-index: 11;
					}
				}
			}
		}
	}
</style>