.top { display: flex; align-items: center; justify-content: space-between; padding: 50rpx 25rpx; margin-bottom: 15rpx; } .top .title { color: #000000; font-weight: 600; font-size: 32rpx; } .top .searchBtn { display: inline-block; color: #ffffff; background-color: #52a0fd; border-radius: 15rpx; padding: 10rpx; } .content { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 20rpx; } .content .item { width: 33%; height: 200rpx; /* background-color: red; */ text-align: center; margin-bottom: 40rpx; } .content .item .imgBox { width: 30%; height: 35%; background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%); margin: auto; margin-bottom: 20rpx; padding: 25rpx; border-radius: 15rpx; } .content .item .imgBox image { width: 100%; height: 100%; } /* .content .item .imgBox.bill { background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } .content .item .imgBox.over { background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); } .content .item .imgBox.near { background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); } .content .item .imgBox.report { background-image: linear-gradient(to top, #0fd850 0%, #f9f047 100%); } .content .item .imgBox.shop { background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%); } .content .item .imgBox.sell { background-image: linear-gradient(to top, #88d3ce 0%, #6e45e2 100%); } .content .item .imgBox.meter { background-image: linear-gradient(to right, #d7d2cc 0%, #304352 100%); } */