school_uni/package1/order/pendGroup.vue

<template>
	<!-- 拼团待成团页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view class="box1">
			<view class="ziqu-xuanfu">
				外卖配送
			</view>
			<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;">
				竹仔园牛仔农庄(第六分店)
			</view>
			<view style="display: flex;padding: 20rpx 0;background: #eee;border-radius: 20rpx;">
				<view class="goods-img">
					<img src="/static/images/img/shangpintu.png" alt="">
				</view>
				<view class="goods-content">
					<view class="goods-name">
						牛仔农庄(医专店)
					</view>
					<view class="goods-content-center">
						<view>
							打分；不要啦
						</view>
					</view>
					<view class="goods-content-bottom">
						<view style="width: 45%;">
							X1
						</view>
						<view class="pintuan-left-price">
							￥90.00
							<view
								style="background: rgba(255, 57, 57, 0.2);padding: 0px 12rpx;border-radius: 20rpx;margin-left: 20rpx;">
								<text>拼团</text>
								<text style="color: red;">￥59.9</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box1" style="position: absolute;top: 800rpx;left: 2.5%;">
			<view class="kaituan1">
				<view class="kaituan1-title">
					差1人即可成团
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/21b403bd13414ce79ad73cf1c8e3de98.png" alt="" style="width: 120rpx;height: 22rpx;position: absolute;bottom: 0;right: 30rpx;" />
				</view>
				<view class="kaituan1-title1">
					快呼唤小伙伴参加吧！
				</view>
			</view>
			<view class="kaituan2">
				<view class="kaituan22">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" style="width: 90rpx;height: 90rpx;border-radius: 90rpx;margin: 0 auto;display: block;" />
				</view>
				<view class="kaituan22">
					<view class="weipincheng">
						+
					</view>
				</view>
				<view class="kaituan22">
					<view class="weipincheng">
						+
					</view>
				</view>
			</view>
			<view class="kaituan3">
				剩余<text style="font-size: 32rpx;font-weight: 700;padding: 0 20rpx;color: red;">23:59:23</text>结束
			</view>
			<view class="kaituan4">
				分享至微信 <uni-icons type="weixin" size="15"></uni-icons>
			</view>
			<view class="kaituan5">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c1f1b45c98fa4db1a1e5f98b3a0573c2.png" alt="" style="width: 520rpx;height: 150rpx;margin: 0 auto;display: block;" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {}
			}
		},
		onLoad(option) {

		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/69c894452e924bedbb5a24bf978f47c7.png') no-repeat;
		width: 100%;
		height: 30%;
		background-size: 100%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.box1 {
		width: 95%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		position: absolute;top: 450rpx;left: 2.5%;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;

		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}

	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}

	.goods-content-center {
		display: flex;
		margin: 16rpx 0;
		color: #777;
	}

	.pintuan-left-price {
		width: 55%;
		text-align: right;
		font-weight: 700;
		color: #000;
		display: flex;
	}

	.goods-content-bottom {
		display: flex;
		line-height: 56rpx;
		color: #777;
	}

	.ziqu-xuanfu {
		position: absolute;
		top: 0;
		right: 0;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		font-weight: 700;
		font-size: 20rpx;
		height: 56rpx;
		width: 120rpx;
		text-align: center;
		line-height: 56rpx;
	}

	.weipincheng {
		width: 90rpx;
		height: 90rpx;
		background: #a6ffea;
		border-radius: 90rpx;
		text-align: center;
		font-size: 60rpx;
		font-weight: 700;
		margin-left: -6rpx;
		z-index: 97;
		color: #02fbdd;
		border: 1px solid #a6ffea;
		line-height: 80rpx;
		    margin: 0 auto;
	}
	.kaituan1{
		display: flex;
		    height: 70rpx;
		    font-size: 44rpx;
		    font-weight: 700;
		    margin-top: 20rpx;
	}
	.kaituan1-title{
		position: relative;
		    margin-left: 20rpx;
	}
	.kaituan1-title1{
		    font-size: 24rpx;
		    background: rgba(224, 255, 222, 0.65);
		    border: 1px solid rgba(166, 255, 234, 1);
		    border-radius: 20rpx;
		    height: 44rpx;
		    line-height: 38rpx;
		    width: 280rpx;
		    text-align: center;
		    margin: 10rpx 0 0 20rpx;
	}
	.kaituan2{
		display: flex;
		    width: 90%;
		    margin: 40rpx auto;
	}
	.kaituan22{
		    flex: 1;
	}
	.kaituan3{
		height: 80rpx;
		    line-height: 80rpx;
		    text-align: center;
		    color: #777;
	}
	.kaituan4{
		    width: 95%;
		    height: 100rpx;
		    background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		    border-radius: 100rpx;
		    text-align: center;
		    line-height: 100rpx;
		    font-size: 30rpx;
		    font-weight: 700;
		    margin: 20rpx auto;
	}
	.kaituan5{
		margin: 80rpx 0 40rpx;
	}
</style>