product/pages/detail/detail.vue

<template>
	<view class="detail">
		<img src="../../static/img/back.png" alt="" class="back" @click="goBack()">
		<img src="../../static/img/top.png" alt="" class="top">
		<view class="bottom">
			<view class='title_box'>
				<img src="../../static/img/title.png" alt="" class="title_img">
			</view>
			<view class="content">
				<img src="https://image.chuliu.cc/jingzhuangdetail.jpg" alt="" v-if="idx==0">
				<img src="https://image.chuliu.cc/gaoyaodetail.jpg" alt="" v-if="idx==1">
				<img src="https://image.chuliu.cc/qingchundetail.jpg" alt="" v-if="idx==2">
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				idx: ''
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		},
		onLoad(ops) {
			this.idx = ops.idx
		}
	}
</script>

<style lang="scss">
	.detail {
		width: 100%;
		height: 100%;
		text-align: center;
		position: relative;

		.back {
			position: fixed;
			top: 42rpx;
			left: 12rpx;
		}

		.top {
			width: 100%;
		}

		.bottom {
			width: 100%;
			background: #cc120d;
			padding: 50rpx 0;
			margin-top: -50rpx;

			.title_box {
				width: 100%;
				text-align: center;

				.title_img {
					width: 520rpx;
				}
			}

			.content {
				width: 100%;
				margin: -40rpx auto 0;

				img {
					width: 690rpx;
					border: 2rpx solid #F9FFC6;
					border-radius: 35rpx;
					padding: 10rpx;
					background: #EB563E;
					box-shadow: 10rpx 10rpx 5rpx #cc120d;
				}
			}
		}
	}
</style>