school_uni/package1/goods/goodsDetail.vue

<template>
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="goods-top">
				<view class="goods-content">
					<view class="goods-name">
						牛仔农庄(医专店)
					</view>
					<view class="goods-content-center">
						<view class="goods-deal1">
							<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
								￥90.00
							</view>
							<view class="pintuan-left-price">
								拼团<text style="color: red;">￥59.90</text>
							</view>
						</view>
						<view class="goods-tag">
							月售 <text> 100+</text>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-center">
				<view class="pintuan-right">
					<view class="pintuan-right-img">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
							alt="" />
						<view class="weipincheng">+</view>
					</view>
					<view class="pintuan-right-cha">
						差<text style="color: red;">1人</text>拼成
					</view>
				</view>
				<view class="goods-btn">
					拼团
				</view>
			</view>
			<view class="goods-bottom">
				<view class="detail1">
					商品详情
				</view>
				<view class="detail2">
					老北京鸡肉卷是一款融合传统京味与现代快餐便捷性的经典美食，以薄韧面饼包裹鲜嫩鸡肉与清爽配菜，搭配浓郁甜面酱，层次丰富，咸香适口，是早餐、午餐、下午茶及宵夜的理想选择。肯德基原创经典款已成为国民记忆，市面亦有众多速冻即食版本，满足不同消费场景需求。
					门店现制款
					单份重量：约 170g
					参考价格：15-17 元 / 份
					套餐搭配：OK 三件套（含鸡肉卷 + 中薯条 + 中可乐）约 19.9 元，工作日特惠
					供应时间：9:15-22:44（具体以门店为准）
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-left">
				<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png"
						alt="" />
					<view class="bottom-dot">1</view>
				</view>
				<view class="bottom-price">￥18.00</view>
			</view>
			<view class="bottom-right">
				<view class="bottom-btn" style="border-bottom-left-radius: 100rpx;border-top-left-radius: 100rpx;">
					直接购买
				</view>
				<view class="bottom-btn"
					style="border-bottom-right-radius: 100rpx;border-top-right-radius: 100rpx;background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">
					拼团买￥15.00
				</view>
			</view>
		</view>
	</view>
</template>

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

		},
		onLoad() {

		},
		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/9362dfb66c0f426789584cabb3977ccc.png') no-repeat;
		width: 100%;
		height: 700rpx;
		background-size: 100%;
		position: fixed;
		top: 0;
		z-index: -1;
	}

	.title-sreach {
		width: 75%;
		display: flex;
		height: 200rpx;
	}

	.back-btn {
		padding-top: 110rpx;
	}

	.content {
		margin-top: 700rpx;
		background: #fff;
		overflow: hidden;
		height: 100%;
	}

	.goods-top {
		padding: 20rpx;
		display: flex;
	}

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

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

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

	.goods-deal1 {
		width: 60%;
		display: flex;
	}

	.goods-tag {
		margin: 0;
		width: 40%;
		text-align: right;
	}

	.pintuan-left-price {
		display: inline;
		padding: 10rpx;
		background: rgba(255, 57, 57, 0.1);
		border-radius: 10rpx;
	}

	.goods-btn {
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		width: 130rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 40rpx;
	}

	.pintuan-right {
		display: flex;
		width: 30%;
		padding: 30rpx;
		flex: 1;
	}

	.pintuan-right-img {
		height: 80rpx;
		display: flex;

		img {
			width: 80rpx;
			height: 80rpx;
			z-index: 98;
			background-size: 100%;
		}
	}

	.weipincheng {
		width: 80rpx;
		height: 80rpx;
		background: #a6ffea;
		border-radius: 80rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: -6rpx;
		z-index: 97;
		line-height: 80rpx;
	}

	.goods-center {
		width: 95%;
		margin: 0 auto 20rpx;
		background: #f5f8f5;
		height: 140rpx;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
	}

	.pintuan-right-cha {
		line-height: 80rpx;
		margin-left: 20rpx;
	}

	.goods-bottom {
		width: 95%;
		margin: 0 auto;
	}

	.detail1 {
		height: 48rpx;
		font-size: 30rpx;
		font-weight: 700;
	}

	.detail2 {
		line-height: 52rpx;
		font-size: 28rpx;
		padding-bottom: 80rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		background: #fff;
		z-index: 99;
		box-shadow: 0 -20rpx 30rpx rgba(0, 0, 0, 0.3);
	}

	.bottom-left {
		flex: 1;
		display: flex;
		padding: 20rpx;

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

	.bottom-price {
		margin-left: 40rpx;
		font-size: 40rpx;
		color: red;
		font-weight: 700;
		line-height: 110rpx;
	}

	.bottom-right {
		padding-top: 20rpx;
		flex: 1;
		display: flex;

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

	.bottom-dot {
		position: absolute;
		top: 0;
		right: -20rpx;
		background: red;
		color: #fff;
		width: 32rpx;
		height: 32rpx;
		border-radius: 32rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.bottom-btn {
		width: 240rpx;
		height: 100rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		font-size: 26rpx;
		font-weight: 700;
		line-height: 100rpx;
		text-align: center;
	}
</style>