cashier_wx/groupBuying/my/my.vue

<template>
	<view class="min-page bg-f7 u-font-28">
		<up-navbar bg-color="transparent" :placeholder="false" title="拼团特惠" left-icon-color="#fff"
			title-color="#fff"></up-navbar>
		<view class="top" :style="topStyle">
			<view class="u-flex info u-col-center">
				<image :src="imgs.map" class="map"></image>
				<view class="u-line-1 u-m-l-20">这里是店铺名称</view>
			</view>
		</view>
		<view class="steps">
			<view class="step" v-for="(item,index) in steps" :key="index">
				<text class="index">{{index+1}}</text>
				<text class="text">{{item}}</text>
				<template v-if="index<steps.length-1">
					<text class="icon">
						{{'>'}}
					</text>
					<text class="icon icon1">
						{{'>'}}
					</text>
				</template>

			</view>
			<view class="step"></view>
			<view class="step"></view>
		</view>

		<view class="lists">
			<view class="item" v-for="(item,index) in 10" :key="index">

				<up-image width="218rpx" radius="16rpx" height="218rpx"></up-image>
				<view class="u-flex-1 u-p-l-16">
					<view class="u-flex u-col-center">
						<text class="numbers">3人团</text>
						<text class="u-line-1 font-bold u-m-l-18 name">这里是商品名称啊啊嗷嗷啊啊</text>
					</view>
					<view class="members">已团：9999</view>
					<view class="info">
						<view class="left">
							<view class="">
								<text class="u-font-24">拼团到手</text>
								<text class="u-font-32 font-bold"> ¥333</text>
							</view>
							<view  style="opacity: 0.84;">
								<text class="u-font-24">原价</text>
								<text class=""> ¥333</text>
							</view>
						</view>
						<view class="right">
							<image class="pin" :src="imgs.pin"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const imgs = {
		bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
		bg1: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png',
		map: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/0a293f6e1a6a4e7b956379a5b6701104.png',
		pin:'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/a9a4f8f59a6d4a46abf91141df3531fb.png'
	}

	const steps = ['发起拼团', '邀请好友', '成团优惠']

	const topStyle = {
		backgroundImage: 'url(' + imgs.bg + ')'
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 422rpx;
		background-size: cover;

		.info {
			padding: 190rpx 30rpx 0 30rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 700;
		}

		.map {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.steps {
		display: flex;
		padding: 20rpx 20rpx;
		gap: 20rpx;
		border-radius: 14rpx 14rpx 0 0;
		background: linear-gradient(90deg, #FFF5E6 0%, #FFD2CA 100%);
		transform: translateY(-20rpx);

		.step {
			display: flex;
		}

		.index {
			border-radius: 60rpx;
			color: #fff;
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			background: #E55626;
		}

		.text {
			color: #5A352F;
			margin-left: 10rpx;
			margin-right: 22rpx;
			white-space: nowrap;
		}

		.icon {
			color: rgba(90, 53, 47, 0.42);
		}

		.icon1 {
			color: #5A352F;
		}
	}

	.lists {
		padding: 18rpx 10rpx;

		.item {
			display: flex;
			padding: 32rpx 16rpx;
			border-radius: 32rpx;
			background: #FFF;
			margin-bottom: 14rpx;

			.numbers {
				background: #4C2828;
				padding: 8rpx 18rpx;
				border-radius: 10rpx;
				font-weight: 700;
				color: #FAEAC6;
				white-space: nowrap;
			}

			.name {
				max-width: 334rpx;
			}

			.members {
				margin-top: 26rpx;
				background: #FDF1CB;
				padding: 4rpx 18rpx;
				border-radius: 10rpx 10rpx 10rpx 0;
				width: fit-content;
				font-size: 24rpx;
				font-weight: 700;
				color: #ED5A2E;
			}

			.info {
				background-image: url(https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png);
				width: 410rpx;
				height: 102rpx;
				background-size: cover;
				transform: translateY(-10rpx);
				display: flex;
				.left {
					width: 306rpx;
					color: #fff;
					padding: 16rpx 22rpx;
				}
				.right{
					padding-left: 16rpx;
					margin-top: 30rpx;
					.pin{
						width: 76rpx;
						height: 54rpx;
					}
				}
			}
		}
	}
</style>