product/pages/index/index.vue

<template>
	<!-- 	<view class="product">
		<view class="img_box">
			<img src="http://image.chuliu.cc/jingzhuangprice.jpg" @click="toDetail(0)">
			<img src="http://image.chuliu.cc/gaoyaoprice.jpg" @click="toDetail(1)">
			<img src="http://image.chuliu.cc/qingchunprice.jpg" @click="toDetail(2)">
		</view>
	</view> -->
	<view class="product">
		<img src="../../static/img/bg.png" alt="" class="bg">
		<view class="out">
			<view class="img_box">
				<img src="http://image.chuliu.cc/jingzhuangprice.jpg" @click="toDetail(0)">
				<img src="http://image.chuliu.cc/gaoyaoprice.jpg" @click="toDetail(1)">
				<img src="http://image.chuliu.cc/qingchunprice.jpg" @click="toDetail(2)">
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {},
		methods: {
			toDetail(idx) {
				uni.navigateTo({
					url: '../detail/detail?idx=' + idx
				});
			}
		}
	}
</script>

<style lang="scss">
	html,
	body {
		overflow: hidden;
	}

	.product {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		background: #cc120d;
		padding-bottom:30rpx;

		.bg {
			width: 100vw;
			height: auto;
		}

		.out {
			margin:-570rpx auto 0;
			background: #EB563E;
			padding:10rpx;
			border-radius: 16rpx;
			border: 2rpx solid #F9FFC6;
			.img_box {
				width: 650rpx;
				background: #fff;
				border-radius: 16rpx;
				margin:0 auto;
				text-align: center;
				padding-bottom:20rpx;
				img {
					width: 595rpx;
					height: 311rpx;
					border-radius: 16rpx;
					margin-top: 24rpx;
				}
			}
		}
	}

	// .product {
	// 	width: 100vw;
	// 	height: 100vh;
	// 	text-align: center;
	// 	position: relative;
	// 	background: url('../../static/img/bg.png') no-repeat;
	// 	background-size: 100% 100%;
	// 	position: relative;
	// 	overflow: hidden;
	// }

	// .img_box {
	// 	position: absolute;
	// 	left:0vw;
	// 	top: 21vh;
	// }

	// 	img {
	// 	width: 595rpx;
	// 	height: 311rpx;
	// 	border-radius: 16rpx;
	// 	margin-top: 10rpx;
	// }
</style>