moxuan_takeaway_user/my/qinglv/xiang.vue

<template>
	<view class="content">
		<view style="height: 100%;">
			<swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true" style="width: 100%; z-index: 1; height: 319rpx">
				<swiper-item v-for="(item, index) in 2" :key="index">
					<image src="https://mxys.chuanghai-tech.com/wmfile/20240904/05af7c5442bb4a8baa1f5f3071ca2302.jpg" mode="scaleToFill" style="width: 100%"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="title">月度套餐</view>
		<view class="beizhu">先囤后用·随时退·过期自动退·可部分退</view>
		<!-- 套餐内容 -->
		<view class="neirong">
			<view class="title title1">套餐内容</view>
			<view class="title title2" style="margin-top: 10rpx;">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx;">例假周期关怀</view>
			</view>
			<view class="title title2" style="margin-top: 23rpx;">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx;">创海便利店（二食堂1楼)    13267827921</view>
			</view>
			<view class="xiangnei" v-for="(item,index) in 2" :key="index">
				<view>例假期每天一杯红糖姜茶 x1</view>
				<view style="color: #000000;">¥25</view>
			</view>
			<!-- 菜品图片 -->
			<view class="shop_zheng">
				<view class="image-container">
					<image v-for="(item, index) in 5" :key="index" class="image" src="https://mxys.chuanghai-tech.com/wmfile/20240904/05af7c5442bb4a8baa1f5f3071ca2302.jpg" style="margin-left: 20px" @click="clickImg(item)"></image>
				</view>
			</view>
		</view>
		<!-- 购买须知 -->
		<view class="xuzhi">
			<view class="title title1">购买须知</view>
			<view class="title title2" style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx;">此套餐仅限用于女生，如男生请选其他合适的套餐</view>
			</view>
		</view>
		<!-- 购买 -->
		<view class="goorder">
			<view class="goods_price">¥98.00</view>
			<view class="goorder_but" @click="toGou">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			
		},
		methods:{
			//立即购买
			toGou(){
				uni.navigateTo({
					url: '/my/qinglv/orderX'
				})
			},
			//图片点击放大
			clickImg(img) {
				uni.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function (res) {},
					fail: function (res) {},
					complete: function (res) {}
				})
			},
		},
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100%;
		background-color: #F2F2F2;
	}
	.title{
		margin: 13rpx 0 0 23rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
	.beizhu{
		margin: 23rpx 0 0 22rpx;
		width: 518rpx;
		height: 77rpx;
		background-size: 100%;
		background-image: url('https://mxys.chuanghai-tech.com/wmfile/20250812/7b77b0772b6e4c2cb8c0d3a012c7722b.png');
		font-size: 24rpx;
		font-weight: 400;
		line-height: 77rpx;
		text-align: center;
		color: rgba(255, 87, 51, 1);
	}
	/* //套餐内容 */
	.neirong{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.title1{
		margin: 14rpx 0 0 19rpx;
	}
	.cicle{
		margin: 12rpx 0 0 0;
		width: 10rpx;
		height: 10rpx;
		background: #CCCCCC;
		border-radius: 50%;
	}
	.title2{
		display: flex;
		font-size: 28rpx;
	}
	.xiangnei{
		width: 633rpx;
		display: flex;
		/* 让子元素两端对齐，价格居左，按钮居右 */
		justify-content: space-between; 
		/* 垂直方向居中（可选，根据需求调整） */
		margin: 0 0 0 45rpx;
		padding-bottom: 10rpx;
		font-size: 24rpx;
		color: rgba(102, 102, 102, 1);
	}
	/* 菜品图片 */
	.shop_zheng {
		background-color: rgba(255, 255, 255, 1);
		width: 100%;
		margin-left: 20rpx;
		margin-top: 8px;
		height: 100%;
		overflow: hidden;
	}
	.image-container {
		width: 350px;
		overflow-x: auto;
		padding: 10rpx 0 10rpx 0;
		white-space: nowrap;
		 /* transition: transform 0.3s; /* 可以添加平滑滑动的效果 */ 
	}
	
	.image {
		display: inline-block;
		width: 166rpx; /* 三张图片平分宽度 */
		height: 133rpx;
	}
	/* 购买须知 */
	.xuzhi{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	/* 购买 */
	.goorder {
		display: flex;
		/* 让子元素两端对齐，价格居左，按钮居右 */
		justify-content: space-between; 
		/* 垂直方向居中（可选，根据需求调整） */
		align-items: center; 
		height: 123rpx;
		opacity: 1;
		box-shadow: 0px 0px 17px  #000000;
		width: 100%;
		padding: 2% 3%;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		z-index: 999;
	}
	.goods_price{
		font-size: 40rpx;
		font-weight: 500;
		color: rgba(255, 91, 26, 1);
	}
	.goorder_but {
		width: 224rpx;
		height: 76rpx;
		opacity: 1;
		border-radius: 104rpx;
		background: linear-gradient(90deg, #FCB147 0%, #FF9029 100%);
		line-height: 76rpx;
		text-align: center;
		font-weight: 700;
	}
</style>