<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>