lirenGO_uniapp/integralMall/pages/pro/detail.vue

<template>
	<view class="detailPage">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class="swiper-img" src="@/integralMall/static/test/test3.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="body">
			<view class="countBox">
				<image class="countBG" src="/integralMall/static/miaoshaBG.png" mode="widthFix"></image>
				<view class="countdown">
					<text>距结束</text>
					<uni-countdown class="countdown1" :day="1" :hour="2" :minute="30" :second="0" color="#3A71FF" splitorColor="#3A71FF" background-color="#FFFFFF" />
				</view>
			</view>
			<view class="detail">
				<view class="priceBox">
					<view class="new">
						<image class="coin" src="@/integralMall/static/coin.png" mode="aspectFill"></image>
						<text>20000</text>
						<image class="miaoshaImg" src="/integralMall/static/miao.png" mode="widthFix"></image>
					</view>
					<view class="old">
						<text>原价</text>
						<text class="oldNum">3200积分</text>
					</view>
				</view>
				<view class="proName">
					<text>索尼丨索尼A7M4全画幅微单数码相机套装ILCE-7M4高清旅游摄影拍照</text>
				</view>
				<view class="specsBox">
					<text>规格</text>
					<view class="specsItem">
						<text>已选：</text>
						<text>【秒杀装】黑色单机</text>
					</view>
					<uni-icons type="right" color="#A4A5A5" size="24"></uni-icons>
				</view>
				
			</view>
			<view class="proDetail">
				<view class="title">
					<text>商品详情</text>
				</view>
				<view class="">
					<image src="@/integralMall/static/test/test4.png" mode="widthFix"></image>
					<image src="@/integralMall/static/test/test5.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="" style="height: 180rpx;"></view>
			<view class="btnBox">
				<button>立即兑换</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';	
</script>

<style lang="scss" scoped>
.detailPage{
	position: relative;
	.swiper{
		width: 100%;
		height: 750rpx;
		.swiper-item{
			width: 100%;
			height: 100%;
			.swiper-img{
				width: 100%;
				height: 100%;
			}
		}
	}
}
.body{
	position: relative;
	z-index: 3;
	margin-top: -50rpx;
	.countBox{
		width: 100%;
		position: relative;
		@include flexBox(end,end);
		.countBG{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
			z-index: -1;
		}
		.countdown{
			box-sizing: border-box;
			padding: 20rpx 26rpx 16rpx;
			@include fontStyle(34rpx,#FFFFFF,right,400,44rpx);
			@include flexBox(center,center);
			.countdown1{
				margin-left: 16rpx;
			}
		}
	}
	.detail{
		width: 100%;
		background: rgba(253,253,253,0.9);
		border-radius: 46rpx 46rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 26rpx;
		.priceBox{
			@include flexBox(start,center);
			.new{
				@include fontStyle(58rpx,#3A71FF,left,800,62rpx);
				@include flexBox(start,center);
				.coin{
					width: 28rpx;
					height: 28rpx;
					margin-right: 16rpx;
					margin-top: 16rpx;
				}
				.miaoshaImg{
					width: 96rpx;
					height: auto;
					margin-left: 26rpx;
				}
			}
			.old{
				margin-left: 26rpx;
				@include fontStyle(28rpx,#999999,left,400,38rpx);
				.oldNum{
					text-decoration: line-through;
					padding-left: 16rpx;
				}
			}
		}
		.proName{
			margin: 32rpx 0;
			@include fontStyle(34rpx,#333333,left,bold,46rpx);
		}
		.specsBox{
			width: 100%;
			background: #F2FAFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			box-sizing: border-box;
			padding: 26rpx;
			@include flexBox(between,ccenter);
			@include fontStyle(28rpx,#666666,left,500,38rpx);
			.specsItem{
				margin-left: 16rpx;
				flex: 1;
				@include fontStyle(28rpx,#333333,left,500,38rpx);
			}
		}
	}
	.proDetail{
		width: 100%;
		background: #F5F5F5;
		.title{
			padding: 26rpx;
			@include fontStyle(28rpx,#333333,left,500,38rpx);
		}
		image{
			width: 100%;
			height: auto;
			display: block;
		}
	}
}
.bottom{
	.btnBox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 168rpx;
		z-index: 30;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(0,0,0,0.08);
		button{
			width: 544rpx;
			height: 80rpx;
			background: #3A71FF;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			@include flexBox();
			margin-top: 30rpx;
		}
	}
}
</style>