.container{ display: flex; flex-direction: column; padding: 10rpx 16rpx; background-color:#576b95; border-bottom-left-radius: 16rpx; border-bottom-right-radius: 16rpx; } .search{ display: flex; height: 60rpx; border: 1px solid white; padding-left: 20rpx; color: #666; border-radius: 30rpx; margin: 10rpx 0; font-size: 22rpx; background-color: white; } swiper{ width: 100%; height: 260rpx; } swiper image{ width: 100%; border-radius: 16rpx; height: 258rpx; } /* 菜单 */ .nav{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; background-color: #eee; border-radius: 16rpx; padding: 0 20rpx; margin-top: 10rpx; } .nav .menu{ display: flex; flex-direction: column; width: 25%; justify-content: center; align-items: center; margin-bottom: 10rpx; } .menu text{ font-size: 22rpx; color: #666; margin-top: 10rpx; } .menu image{ width:60rpx; height: 60rpx; border-radius: 50%; margin-top: 16rpx; } .hot{ display: block; text-align: center; margin: 10rpx 0; } /* 产品列表 */ .wrap{ display: flex; flex-direction: row; flex-wrap: wrap; background-color: #576b95; justify-content: center; } .wrap .product{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 46%; margin: 6rpx 10rpx; background-color: #666; border-bottom-left-radius: 16rpx; border-bottom-right-radius: 16rpx; } .product image{ border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; width: 100%; } .info{ padding: 0 10rpx; width: 100%; display: flex; flex-direction: row; justify-content: space-around; } .name{ color: white; } .info .price{ color: red; }