wx-qhb/pageA/productdetails.vue

<template>
	<view>
		<scroll-view ref="scrollView" scroll-y="true" style="min-height: 100%;">
			<!-- 页面内容 -->

			<!-- 自定义导航栏 -->
			<u-navbar :safeAreaInsetTop="true" :placeholder='true'>
				<view class="u-nav-slot u-flex" slot="left" style="display: flex;">
					<view class="u-flex">
						<u-icon name="arrow-left" size="19" @click="navigateBack()"></u-icon>
						<u-tabs duration='0' @click="click" :list="list1" lineColor='#fff'
							:activeStyle=" {color:'#FF1515'}" :inactiveStyle="{
						color:' #666666' }"></u-tabs>
					</view>
					<!-- 				<view class="" style="margin-left: 184rpx;" @click="share = true">
					<image src="static/images/share.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
				</view> -->
				</view>
				<view class="u-nav-slot u-flex" slot="right" style="display: flex;">
					<view class="" style="margin-left: 184rpx;" @click="share = true">
						<image src="static/images/share.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
					</view>
					<view class="" style="width: 180rpx;"></view>
				</view>
			</u-navbar>
			<!-- 商品图片 -->
			<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" style="width: 750rpx;height: 750rpx;" mode="">
			</image>
			<view class="back">
				<!-- 折扣 -->
				<view class="discount">
					<view class="top">
						<text class='count'>{{i18n.Discounted}}</text>
						<text class='money'>¥</text>
						<text class='money' style="font-size: 48rpx;">258</text>
						<text class='money'>.00</text>
						<text class='right'>¥328.5</text>
					</view>
					<view class="bottom">
						<text class="tabs">{{i18n.sametype}}</text>
						<view class="title">
							<text class="title" selectable @longpress="onLongPress">
								布兰德低温烘焙猫粮全价通用高端鲜肉成猫幼
							</text>
						</view>
					</view>
				</view>
				<!-- 服务 -->
				<view class="serve" style="margin-top: 20rpx;">
					<view class="top u-flex u-row-between">
						<view class="u-flex">
							<view class="change">{{i18n.Sele}}</view>
							<view class="" style="margin-left: 20rpx;">{{i18n.Netcontent}}</view>
						</view>
						<view class="">
							<u-icon name="arrow-right" size='16'></u-icon>
						</view>
					</view>
					<view class="top u-flex u-row-between" style="margin-top: 36rpx;" @click="serve=true">
						<view class="u-flex">
							<view class="change">{{i18n.service}}</view>
							<view class="" style="margin-left: 20rpx;">正品保障 · 极速退款 · 7天无理由退</view>
						</view>
						<view class="">
							<u-icon name="arrow-right" size='16'></u-icon>
						</view>
					</view>
				</view>
				<!-- 评论 -->
				<view class="comment" ref="targetPosition">
					<view class="u-flex u-row-between">
						<text class="ping">{{i18n.review}}</text>
						<view class="u-flex">
							<text class="strip">5000+{{i18n.article + i18n.review}}</text>
							<u-icon name="arrow-right" size='16'></u-icon>
						</view>
					</view>
					<view class="uesr u-flex u-row-between" style="margin-top: 36rpx;">
						<view class="u-flex">
							<image src="../static/images/logo.png" style="width: 52rpx;height: 52rpx;" mode=""></image>
							<text class="name">有**钱</text>
						</view>
						<text class="strip">2023.11.23</text>
					</view>
					<view class="content">
						回购了不知道第几次了，家里猫还没吃腻呢，
					</view>
				</view>
				<!-- 店铺 -->
				<view class="store u-flex u-row-between">
					<view class="u-flex">
						<image src='../static/images/logo.png' style="width: 112rpx;height: 112rpx;" mode=""></image>
						<view class="" style="margin-left: 20rpx;">
							<view class="title">小萌优选🔥（每天0元秒杀）</view>
							<view class="" style='margin-top:20rpx'></view>
							<view class="u-flex" style='margin-top:20rpx'>
								<text class='num'>{{i18n.Salesvolume}} 2384w+</text>
								<view class="line"></view>
								<text class='num'>{{i18n.Salesvolume}} 2384w+</text>
							</view>
						</view>
					</view>
					<view class="goshop">{{i18n.stroll}}</view>
				</view>
				<!-- 推荐 -->
				<view class="recommend">
					<view class="title">
						{{i18n.Recommended}}
					</view>
					<view class="">
						<swiper style="height: 400rpx;" class="swiper" circular :indicator-dots="true" :autoplay="true">
							<swiper-item v-for="(parent,index) in 4" :key="index">
								<view class="u-flex  swiper-item u-row-between">
									<view class="" v-for="child in 3" @click="toinfo(child.id)">
										<image src="/static/images/logo.png" style="width: 214rpx;height: 214rpx;"
											mode="">
										</image>
										<view class="u-line-1"
											style="width: 214rpx;margin-top: 14rpx;font-style: normal;font-size: 26rpx;">
											布兰德烘焙猫粮预售鲜肉乌骨鸡囤货</view>
										<view class="">
											<span
												style="color:rgba(204, 51, 0, 1) ;margin-top: 12rpx;font-size: 26rpx;">¥{{child.price||235.55}}</span>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="recommend">
					<view class="title">{{i18n.Productdetails}}</view>
					<view class="" style="margin-top: 32rpx;margin-bottom:28rpx">{{i18n.Specification}}</view>
					<view class="specification">
						<view class="item u-flex" style='margin-bottom:28rpx'>
							<view style='width:150rpx;'>{{i18n.material}}</view>
							<text style='margin-left:58rpx'>保鲜鸡肉，鸡心，鸡肝</text>
						</view>
						<view class="item u-flex" style='margin-bottom:28rpx'>
							<view style='width:150rpx;'>{{i18n.specification}}</view>
							<text style='margin-left:58rpx'>300g</text>
						</view>
						<view class="item u-flex" style='margin-bottom:28rpx'>
							<view style='width:150rpx;'>{{i18n.Shelflife}}</view>
							<text style='margin-left:58rpx'>12个月</text>
						</view>
						<view class="item u-flex">
							<view style='width:150rpx;'>{{i18n.Suitableobject}}</view>
							<text style='margin-left:58rpx'>3个月以上的全猫种</text>
						</view>
					</view>
				</view>
				<view class="">
					<image src="../static/images/logo.png" style="width: 710rpx;height: 580rpx;" mode=""></image>
				</view>
				<view class="" style="height: 158rpx;"></view>
				<view class="fix u-flex u-row-between">
					<view class="u-flex" style="column-gap: 35rpx;">
						<view class="u-flex" style="justify-content: center;flex-direction: column;">
							<image src="../static/images/index/service.png" style='width:40rpx;height:40rpx' mode="">
							</image>
							<view class="ke">{{i18n.Customer}}</view>
						</view>
						<view class="u-flex" style="justify-content: center;flex-direction: column;" @click="join">
							<image src="../static/cart1.png" style='width:40rpx;height:40rpx' mode=""></image>
							<view class="ke">{{i18n.Shopping}}</view>
						</view>
						<view class="u-flex" style="justify-content: center;flex-direction: column;">
							<image src="../static/images/index/attention.png" style='width:40rpx;height:40rpx' mode="">
							</image>
							<view class="ke">{{i18n.follow}}</view>
						</view>
					</view>
					<view class="join" @click="join">加入购物车</view>
					<view class="pin" @click="order">立即拼团</view>
					<!-- 				<view class="tongzhi" @click="inform">
					{{i18n.notification}}
				</view> -->
				</view>
			</view>
		</scroll-view>
		<!-- 加入购物车 -->
		<u-popup :round="10" :show="show">
			<view style="padding:48rpx 28rpx;box-sizing: border-box;position: relative;">
				<view class="u-flex">
					<image src="../static/images/logo.png" style="width: 192rpx;height: 192rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="">
							<text class="read">¥</text>
							<text class="read" style="font-size: 40rpx;">168</text>
							<text class="read">.00</text>
						</view>
						<text class="guige">已选：鸡肉；2kg【单包装】</text>
					</view>
				</view>
				<view class="" style="position: absolute;top: 48rpx;right: 28rpx;">
					<u-icon name="close" @click="show==false" color="#000" size="28"></u-icon>
				</view>
				<view class="title1" style="margin-top: 40rpx;margin-bottom: 32rpx;">
					食品口味
				</view>
				<view class="u-flex" style="column-gap: 18rpx;flex-wrap: wrap;">
					<view class="" :class="idx==actab?'acttab':'tabs'" v-for="(item,idx) in 4" :key="idx"
						@click="actabs(idx)">
						鸡肉
					</view>
				</view>
				<view class="title1" style="margin-top: 40rpx;margin-bottom: 32rpx;">
					净含量
				</view>
				<view class="u-flex" style="column-gap: 18rpx;flex-wrap: wrap;">
					<view class="tabs">
						鸡肉
					</view>
				</view>
				<view class="u-flex u-row-between" style="margin-top: 30rpx;">
					<text class="title1">数量</text>
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
				<view class="" style="height: 200rpx;"></view>
				<view class="bottoma">
					<view class="btn" @click="joincart">
						加入购物车
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="serve">
			<view style="padding:48rpx 24rpx;box-sizing: border-box;background-color: #FFF3E7;position: relative;">
				<view class="u-flex" style="flex-direction: column;justify-content: center;">
					<image src="../static/images/index/serve.png" style="width: 138rpx;height: 34rpx;" mode=""></image>
					<text class="info">
						售前售后 安心无忧购物
					</text>
				</view>
				<view class="" style="position: absolute;top: 48rpx;right:24rpx;" @click="serve = false">
					<u-icon name="close" style="width: 22rpx;height: 22rpx;"></u-icon>
				</view>
				<view class="contenta">
					<view class="">
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
					<view class="" style='margin-top:36rpx'>
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
					<view class="" style='margin-top:36rpx'>
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
				</view>
				<view class="button" @click="serve = false">
					{{i18n.know}}
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :show="share" bgColor=' rgba(244, 244, 244, 1);'>
			<view
				style="padding:48rpx 24rpx;box-sizing: border-box;background-color: rgba(244, 244, 244, 1);border-radius: 10px 10px 0 0 ;">
				<view class="u-flex u-row-between" style="">
					<view class="" style="width: 28px;height: 28px;"></view>
					<text class="info" style="font-size: 32rpx;">
						{{i18n.shar}}
					</text>
					<image src="../static/images/index/bottom2.png" style="width: 40rpx;height: 40rpx;">
				</view>
				<!-- 				<view class="" style="position: absolute;top: 48rpx;right:24rpx;">
					
				</view> -->
				<view class="u-flex u-row-between" style="margin-top: 82rpx;padding:  0 140rpx;">
					<view class="">
						<image src="../static/images/index/link.png" style="width: 108rpx;height: 108rpx;" mode="">
						</image>
						<view class="link">{{i18n.Copylink}}</view>
					</view>
					<view class="" @click="builder">
						<image src="../static/images/index/image.png" style="width: 108rpx;height: 108rpx;" mode="">
						</image>
						<view class="link">{{i18n.Generatepicture}}</view>
					</view>
				</view>
				<view class="button" @click="share = false" style="background: #fff;color: #555555;margin-top: 58rpx;">
					{{i18n.Cancel}}
				</view>
			</view>
		</u-popup>
		<u-popup :show="imagea" bgColor=' rgba(244, 244, 244, 0);' mode='center' :customStyle="{alignItems: 'center'}">
			<view class="u-fle" style="display: flex; justify-content: flex-end;width: 100%;">
				<u-icon name="close" @click="imagea==false" color="#fff" size="28"></u-icon>
			</view>
			<view
				style="padding:48rpx 24rpx;box-sizing: border-box;background-color: rgba(255, 255, 255, 1);border-radius: 16rpx;width: 538rpx;">
				<view class="" style="">
					<image src="../static/images/index/bottom2.png" style="width: 490rpx;height: 490rpx;">
				</view>
				<view class="money">
					<span>¥</span>
					<span style="font-size: 36rpx;">258</span>
					<span>00</span>
				</view>
				<view class="title">布兰德低温烘焙猫粮全价通用高端鲜肉成猫幼</view>
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 44rpx;">
					<image src="../static/images/logo.png" style="width: 132rpx;height: 132rpx;" mode=""></image>
					<view class="view">长按识别查看</view>
				</view>
			</view>
			<view class="button" style="width: 658rpx;">保存到相册</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagea: false,
				list1: [{
					name: '商品',
				}, {
					name: '评价',
				}, {
					name: '详情'
				}, ],
				current: 0,
				// 购物车
				show: false,
				//服务
				serve: false,
				//分享
				share: false,
				value: 0, //步进器的值
				swiptlist: [],
				actab: 0
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			scrollToPosition() {
				console.log(111);
				// 使用$refs获取目标位置的DOM元素
				const targetElement = this.$refs.targetPosition;
				// 调用scrollToView方法滚动到目标位置
				this.$refs.scrollView.scrollToView('targetPosition');
			},
			actabs(idx) {
				this.actab = idx
			},
			order() {
				uni.navigateTo({
					url: '/pageA/order'
				})
			},
			//生成图片弹窗
			builder() {
				this.imagea = true
				this.share = false
			},
			//获取推荐
			getSeriesBooks() {
				this.swiptlist = res.data.reduce((a, b) => {
					let lastIndex = a.length - 1
					if (a[lastIndex].length < 3) {
						a[lastIndex].push(b)
					} else {
						a.push([b])
					}
					return a
				}, [
					[]
				])
			},
			//加入购物车
			joincart() {
				this.show = false
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			navigateBack() {
				uni.navigateBack()
			},
			click(item) {
				this.current = item
				console.log(item);
				if (item.index == 1) {
					this.scrollToPosition()
				}
			},
			join() {
				this.show = true
			},
			//通知
			inform() {
				uni.showToast({
					title: this.i18n.shelves,
					icon: 'none',
					duration: 2000
				});
			},
			//复制
			onLongPress(e) {
				// 获取长按的文本内容
				let text = e.target.innerText;
				console.log(e);
				// 执行复制操作
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: this.i18n.Copiedpaste,
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: this.i18n.Replicationfailure,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.acttab {
		height: 68rpx;
		padding: 14rpx 30rpx;
		text-align: center;
		box-sizing: border-box;
		display: inline;
		background: rgba(248, 50, 36, 0.06);
		border-radius: 6rpx;
		border: 2rpx solid #F83224;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #F83224;
		line-height: 40rpx;
	}

	.read {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 26rpx;
		color: #F83224;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
	}

	// ::v-deep .u-popup__content{
	// 	background-color: rgba(0,0,0,0) !important;
	// }
	.money {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 20rpx;
		color: #F83224;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
	}

	.title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-top: 16rpx;
	}

	.view {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #777777;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-top: 12rpx;
	}

	.actabs {
		width: 116rpx;
		height: 68rpx;
		background: rgba(248, 50, 36, 0.06);
		border-radius: 6rpx;
		border: 2rpx solid #F83224;
	}

	.bottoma {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		padding: 16rpx 44rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;

		.btn {
			width: 662rpx;
			height: 84rpx;
			background: #F83224;
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.title1 {
		font-family: PingFangSC, PingFang SC;
		font-weight: 550;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}

	.tabs {
		// width: 276rpx;
		height: 68rpx;
		padding: 14rpx 30rpx;
		text-align: center;
		background: #F4F4F4;
		border-radius: 6rpx;
		box-sizing: border-box;
		display: inline;
		// line-height: 68rpx;
	}

	.link {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #555555;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-top: 16rpx;
	}

	.tongzhi {
		width: 422rpx;
		height: 76rpx;
		background: #FFB515;
		border-radius: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 76rpx;
		text-align: center;
		font-style: normal;
	}

	.info {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #222222;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-top: 18rpx;
	}

	.button {
		// width: 662rpx;
		height: 88rpx;
		background: #F83224;
		border-radius: 44rpx;
		margin-top: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
	}

	.contenta {
		width: 702rpx;
		// height: 590rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 26rpx;
		padding: 28rpx 24rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}

		.content {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #222222;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-top: 20rpx;
		}
	}

	.back {
		background-color: #F4F4F4;
		padding: 20rpx;
		box-sizing: border-box;

		.guige {}

		.fix {
			width: 750rpx;
			height: 158rpx;
			background: #FFFFFF;
			padding: 14rpx 28rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;

			.ke {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.join {
				width: 208rpx;
				height: 76rpx;
				border-radius: 40rpx;
				border: 1rpx solid #FF1515;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #F83224;
				line-height: 76rpx;
				text-align: left;
				font-style: normal;
				text-align: center;
			}

			.pin {
				width: 208rpx;
				height: 76rpx;
				background: #F83224;
				border-radius: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 76rpx;
				text-align: center;
				font-style: normal;
			}
		}

		// 规格
		.specification {
			width: 670rpx;
			// height: 280rpx;
			background: #F4F4F4;
			padding: 24rpx 22rpx;
			box-sizing: border-box;

			.item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}

		// 推荐
		.recommend {
			width: 710rpx;
			// height: 476rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 550;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}

		//店铺
		.store {
			width: 710rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.line {
				background: rgba(151, 151, 151, 1);
				width: 4rpx;
				height: 20rpx;
				margin: 0 18rpx;
			}

			.num {
				font-family: SFPro, SFPro;
				font-weight: 400;
				font-size: 20rpx;
				color: #777777;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
			}

			.goshop {
				// width: 108rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 1rpx solid #FF1515;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F83224;
				line-height: 52rpx;
				text-align: center;
				font-style: normal;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}

		// 评论
		.comment {
			width: 710rpx;
			height: 356rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;

			.content {
				margin-top: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #444444;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				height: 112rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: wrap;
				-webkit-line-clamp: 3
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				margin-left: 16rpx;
			}

			.ping {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.strip {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #444444;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}

		//服务
		.serve {
			width: 710rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 20rpx;
			box-sizing: border-box;

			.top {
				.change {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		//折扣
		.discount {
			position: relative;
			height: 312rpx;

			.top {
				width: 710rpx;
				height: 124rpx;
				background: linear-gradient(295deg, #FB6662 0%, #FD403B 100%);
				border-radius: 16rpx 16rpx 0 0;
				padding: 20rpx;
				box-sizing: border-box;
				line-height: 98rpx;

				.count {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
				}

				.money {
					font-size: 20rpx;
					font-family: HarmonyOS_Sans_Medium;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					margin-left: 8rpx
				}

				.right {
					font-family: HarmonyOS_Sans;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					text-decoration-line: line-through;
					margin-left: 16rpx
				}
			}

			.bottom {
				width: 710rpx;
				height: 208rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				position: absolute;
				top: 104rpx;
				z-index: 2;
				padding: 28rpx 20rpx;
				box-sizing: border-box;

				.title {
					margin-top: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 550;
					font-size: 32rpx;
					color: #222222;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.tabs {
				// width: 104rpx;
				height: 40rpx;
				background: rgba(255, 21, 21, 0.1);
				border-radius: 4rpx;
				padding: 4rpx 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF1515;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}

	::v-deep .u-popup__content data-v-17becaea {
		align-items: center !important;
	}
</style>