page{ background-color: #F5F5F5; } .swiper-banner{ width: 750rpx; height: 560rpx; } .swiper-view{ width: 750rpx; height: 560rpx; } .product-list{ width: 750rpx; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; } .product-view{ display: flex; flex-direction: column; width: 346rpx; height: auto; background: #FFFFFF; border-radius: 4px; margin: 20rpx 0 0 20rpx; } .product-view>image:nth-child(1){ width: 346rpx; height: 346rpx; border-radius: 4px 4px 0px 0px; } .product-view>text:nth-child(2){ width: 314rpx; padding: 16rpx; padding-bottom: 8rpx; height: 88rpx; font-size: 30rpx; font-weight: 400; color: rgba(0, 0, 0, 0.87); line-height: 44rpx; } .product-view>text:nth-child(3){ width: 314rpx; padding: 0 16rpx 16rpx; height: 32rpx; font-size: 24rpx; font-weight: 400; color: rgba(0, 0, 0, 0.4); line-height: 32rpx; } .product-price{ width: 314rpx; padding: 0 16rpx 16rpx; height: 48rpx; font-weight: 500; color: rgba(0, 0, 0, 0.87); line-height: 48rpx; color: rgb(251, 110, 0); } .product-price>text:nth-child(3){ font-size: 26rpx; margin-left: 20rpx; text-decoration : line-through; color: rgba(0, 0, 0, 0.4); } .slogn{ width: 750rpx; height: 32rpx; line-height: 32rpx; font-weight: 400; color: rgba(0, 0, 0, 0.24); font-size: 26rpx; text-align: center; padding-top: 68rpx; margin-bottom: 34rpx; padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ }