<template> <view class="page"> <u-navbar title="商品" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='40' id="navbar"> </u-navbar> <image src="https://api.ccttiot.com/smartmeter/img/static/umk1caLMk7f1elQ2T78c" mode="" class="imgbj"></image> <view class="list"> <view class="list_item" v-for="(item,index) in 9" :key="index" @click="btndetai"> <image src="https://api.ccttiot.com/smartmeter/img/static/uTULMJ4sf8bCUCI5CaF8" class="shopimg" mode=""></image> <image src="https://api.ccttiot.com/smartmeter/img/static/ugADcnpPR2h6CdweJb36" class="yingshou" mode=""></image> <view class="name"> 大红袍 </view> <view class="price"> <text class="one">¥50</text> <text>剩余:1</text> </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "", }, } }, onLoad() { }, methods: { // 点击跳转到下单页 btndetai(){ uni.navigateTo({ url:'/page_user/xiadanhuogui' }) } } } </script> <style lang="scss"> page { background: #fff; } .list{ margin-top: 18rpx; padding: 0 48rpx; box-sizing: border-box; display: flex; justify-content: space-between; flex-wrap: wrap; height: 87vh; overflow: scroll; padding-bottom: 40rpx; box-sizing: border-box; .list_item{ margin-top: 32rpx; position: relative; width: 314rpx; height: 432rpx; background: #FFFFFF; box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15); border-radius: 18rpx 18rpx 18rpx 18rpx; .name{ font-size: 28rpx; color: #3D3D3D; padding: 0 20rpx; box-sizing: border-box; margin-top: 10rpx; } .price{ padding: 0 20rpx; box-sizing: border-box; display: flex; justify-content: space-between; margin-top: 10rpx; .one{ font-size: 28rpx; color: #FF1818; } text{ font-size: 24rpx; color: #7C7C7C; } } .shopimg{ width: 314rpx; height: 314rpx; } .yingshou{ position: absolute; top: 74rpx; left: 50%; transform: translateX(-50%); width: 212rpx; height: 168rpx; } } } .imgbj { width: 750rpx; height: 424rpx; position: fixed; top: 0; left: 0; z-index: -1; } </style>