null/pages/mang/detail.vue

<template>
	<view class="page">
		<view class="swiper-sec">
			<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(item, idx) in 3" :key="idx" class="swiper-item">
					<view class="img-wrap"><image src="/static/temp/pro.png" mode="aspectFill" class="img"></image></view>
				</swiper-item>
			</swiper>
			<view class="ic-wrap align-center justify-center"><image src="/static/love-full.png" mode="aspectFill" class="ic"></image></view>
		</view>
		<view class="header-sec">
			<view class="flex-col name-wrap">
				<view class="flex-col">
					<view class="flex-row">
						<text class="text_2 clamp">幸福西饼Rice盲盒</text>
						<view class="text-wrapper text_3 clamp">仅剩3份</view>
					</view>
					<image
						src="/static/mangd-rarrow.png"
						class="image_8 image_9"
					/>
				</view>
				<view class="align-center group_10">
					<view class="stars align-center">
						 <image
						  src="/static/mang_star.png"
						  class="image_10"
						  v-for="(item,idx) in 3"
						  :key="idx"
						/>	
					</view>
					<text class="text_4">随机搭配</text>
				</view>
			</view>
			<view class="border-wrap"></view>
			<view class="flex-row time-wrap">
				<text class="text_5">自提时间</text>
				<text class="text_6">今天15:00~22:00</text>
			</view>
			<view class="border-wrap"></view>
			<view class="flex-col loc-wrap">
				<view class="flex-row justify-between items-start">
					<view class="flex-row">
						<image
							src="/static/temp/pro.png"
							class="image_12"
							mode="aspectFill"
						/>
						<view class="flex-col items-start group_15">
							<text class="text_7 clamp">幸福西饼万达店</text>
							<text class="text_8 clamp2">河东区万达广场1F东门入口</text>
						</view>
					</view>
					<view class="flex-row group_16">
						<view class="flex-col items-center image-wrapper">
							<image
								src="/static/mangd-loc.png"
								class="image_13"
								mode="aspectFill"
							/>
						</view>
						<view class="section_5"><!--*--></view>
						<view class="flex-col items-center image-wrapper view_3">
							<image
								src="/static/mang-phone.png"
								class="image_14"
								mode="aspectFill"
							/>
						</view>
					</view>
				</view>
				<view class="group_17">
					<text class="text_9">距离您</text>
			 	<text class="text_10">864m</text>
				</view>
			</view>
		</view>
		<view class="line-wrap"></view>
		<view class="flex-col items-start tips-wrap">
			<text class="title">盲盒内能得到什么</text>
			<text class="text_12">随机获得四拼蛋糕，奶油慕斯蛋糕二选一<br/>精致蛋挞、南瓜蛋糕二选一</text>
		</view>
		<view class="line-wrap"></view>
		<view class="review-sec">
			<view class="title-wrap align-center justify-between">
				<text class="text_14">商品评价</text>
				<view class="flex-row group_21">
					<text class="text_15">查看全部</text>
					<image
						src="/static/mangd-rarrow.png"
						class="image_8 image_15"
						mode="aspectFill"
			 	    />
				</view>
			</view>
			<view class="item-wrap flex-col" v-for="(item, idx) in 3" :key="idx">
				<view class="flex-row justify-between">
					<view class="flex-row">
						<image
							src="/static/temp/pro.png"
							class="image_16 image_22"
							mode="aspectFill"
						/>
						<view class="flex-col items-start group_30">
							<text class="text_20 clamp">甜品大师姐</text>
							<text class="text_21">2022.07.13 10:56</text>
						</view>
					</view>
					<view class="stars align-center">
						 <image
						  src="/static/mang_star.png"
						  class="image_10"
						  v-for="(item,idx) in 3"
						  :key="idx"
						/>	
					</view>
				</view>
				<view class="flex-col group_31">
					<view class="group_32">
						<text class="text_22">这是我吃过的最好吃的一款，强烈推荐，口感细腻，想象不到的美味。太好吃了。</text>
					</view>
					<view class="imgs-wrap align-center">
						<image
							src="/static/temp/pro.png"
							class="image_19 image_24"
							mode="aspectFill"
							v-for="(item,idx) in 6" :key="idx"
							@tap="previewImg(idx)"
						/>	
					</view>
					
				</view>
			</view>
		</view>
		<view class="line-wrap"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods:{
		previewImg(idx){
			let url = [];
			this.$tools.previewImg(url)
		}
	}
};
</script>

<style lang="scss">
.swiper-sec{
	position: relative;
	.swiper{
		width: 750rpx;
		height: 750rpx;
		.img-wrap{
			position: relative;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.4);
			}
		}
		.img{
			width: 750rpx;
			height: 750rpx;
		}
	}
    .ic-wrap{
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		width: 118rpx;
		height: 94rpx;
		.ic{
			width: 54rpx;
			height: 54rpx;
		}
	}
}
.name-wrap {
	padding: 34rpx 31rpx 37rpx;
	.text_2 {
		margin: 7rpx 0 6rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: PingFang;
		letter-spacing: 1.28rpx;
		max-width: 500rpx;
	}
	.text-wrapper {
		margin-left: 10rpx;
		padding: 10rpx 10rpx 11rpx;
		background-color: #92b99c;
		border-radius: 10rpx;
		height: 44rpx;
		max-width: 160rpx;
	}
	.text_3 {
		margin-left: 10rpx;
		margin-right: 5rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang;
		// max-width: 110rpx;
		text-align: center;
	}
	.image_8 {
		width: 11rpx;
		height: 18rpx;
	}
	.image_9 {
		margin-right: 9rpx;
		flex-shrink: 0;
		align-self: flex-end;
	}
	.group_10 {
		margin-top: 6rpx;
	}
	.image_10 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}
	.text_4 {
		margin-left: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
}
.border-wrap{
	margin: 0 auto;
	width: 710rpx;
	height: 2rpx;
	background-color: #eee;
}
.time-wrap {
	padding: 40rpx 33rpx 39rpx;
	.text_5 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.text_6 {
		margin-left: 28rpx;
		margin-top: 3rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
}
.loc-wrap {
	padding: 40rpx 30rpx 41rpx;
	.image_12 {
		margin-top: 5rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 68rpx;
	}
	.group_15 {
		margin-left: 16rpx;
	}
	.text_7 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 420rpx;
	}
	.text_8 {
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		max-width: 420rpx;
		line-height: 36rpx;
	}
	.group_16 {
		margin-right: 20rpx;
		margin-top: 37rpx;
	}
	.image-wrapper {
		align-self: center;
		width: 28rpx;
	}
	.image_13 {
		width: 28rpx;
		height: 33rpx;
	}
	.section_5 {
		margin-left: 41rpx;
		background-color: #0000001a;
		width: 1rpx;
		height: 65rpx;
	}
	.view_3 {
		margin-left: 40rpx;
	}
	.image_14 {
		width: 28rpx;
		height: 28rpx;
	}
	.group_17 {
		margin-left: 3rpx;
		align-self: flex-start;
		line-height: 23rpx;
		margin-top: 10rpx;
	}
	.text_9 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_10 {
		color: #92b99c;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 19rpx;
	}
}
.line-wrap {
	background-color: #0000000f;
	height: 17rpx;
}
.tips-wrap {
	padding: 40rpx 32rpx;
	.title {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
	}
	.text_12 {
		margin-left: 4rpx;
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 36rpx;
	}
}
.review-sec{
	padding-top: 35rpx;
}
.title-wrap {
	height: 37rpx;
	margin-bottom: 10rpx;
	padding: 0 30rpx;
	.text_14 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.group_21 {
		margin-right: 9rpx;
	}
	.text_15 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.image_8 {
		width: 11rpx;
		height: 18rpx;
	}
	.image_15 {
		margin-left: 11rpx;
		margin-bottom: 3rpx;
		flex-shrink: 0;
	}
}
.item-wrap {
	padding: 37rpx 33rpx 40rpx;
	.image_16 {
		width: 54rpx;
		height: 54rpx;
		border-radius: 54rpx;
	}
	.image_22 {
		margin-top: 4rpx;
	}
	.group_30 {
		margin-left: 20rpx;
	}
	.text_20 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		letter-spacing: 1.2rpx;
		max-width: 300rpx;
	}
	.text_21 {
		margin-top: 15rpx;
		color: #999999;
		font-size: 20rpx;
		font-family: PingFang;
	}
	.image_10 {
		width: 28rpx;
		height: 28rpx;
		margin-left: 4rpx;
	}
	.group_31 {
		margin: 13.5rpx 24rpx 0 7rpx;
	}
	.group_32 {
		line-height: 37rpx;
	}
	.text_22 {
		color: #333333;
		font-size: 26rpx;
		font-family: PingFang;
		line-height: 40rpx;
		letter-spacing: 1.04rpx;
	}
	.imgs-wrap{
		flex-wrap: wrap;
		.image_19 {
			width: 180rpx;
			height: 180rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			// &:nth-child(4n){
			// 	margin-right: 0;
			// }
		}
		.image_24 {
			margin-top: 16.5rpx;
			align-self: flex-start;
		}	
	}
	
}
</style>