swiper { background: red; display: block; width: 100%; height: 318rpx; } .slide-image { display: block; width: 100%; height: 100%; } .searchSection { width: 748rpx; height: 84rpx; display: flex; align-items: center; background: #fff } .searchSection input { display: flex; width: 536rpx; height: 56rpx; border-radius: 10rpx; background: #F0F1F5; color: #717171; font-size: 28rpx; margin-left: 14rpx; text-indent: 20rpx; } .searchSection .searchBtn { /* background: #fff; */ position: absolute; z-index: 2; right: 200rpx; width: 56rpx; height: 56rpx; border: 1rpx solid rgba(255, 255, 255, 0); } .searchSection .searchBtn icon { position: absolute; top: 10rpx; right: 15rpx; } .searchSection .allBooks{ font-size: 28rpx; color:#61ca54; font-family: PingFangSC-regular; width: 112rpx; margin-left: 56rpx; } .hotSection{ width: 100%; /* height: 50rpx; */ background: #fff; margin-top: 8rpx; } .hotSection .title{ display: flex; align-items: center; margin: 20rpx 0 20rpx 20rpx; } .hotSection .title image { /* margin-left: 24rpx; */ width: 34rpx; height: 38rpx; } .hotSection .title text{ width: 112rpx; height: 40rpx; margin-left: 12rpx; font-size: 28rpx; line-height: 50rpx; font-family: PingFangSC-regular; color:#101010 } .hotWares{ display: flex; flex-wrap: wrap; } .hotSection .hotWares .hotWareCard{ position: relative; overflow: hidden; width: 352rpx; height: 322rpx; margin: 0 0 18rpx 16rpx; box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); } .hotWareCard .wareCardImg{ width: 100%; height: 200rpx; } .hotWareCard .wareCardTitle{ margin: 0 auto; width: 320rpx; height: 46rpx; display:block; text-align: center; color: rgba(16,16,16,1); font-size: 32rpx; } .hotWareCard .wareCardTip{ position: absolute; top: 10rpx; right: 4rpx; z-index: 2; width: 178rpx; height: 40rpx; display:block; text-align: center; color: rgba(16,16,16,1); font-size: 28rpx; } .bottomData{ height: 34rpx; margin-top: 10rpx; display: flex; /* flex-direction: row; */ justify-content:space-between; align-items: center; } .hotWareCard .wareCardPlays{ width: 100rpx; margin-left: 18rpx; display: flex; flex-direction: row; align-items: center; } .hotWareCard .wareCardPlays .wareCardPlaysImg{ width: 30rpx; height: 30rpx; } .hotWareCard .wareCardPlays text { margin-left: 4rpx; color: #61CA54; font-size: 24rpx; } .hotWareCard .wareCardLikes{ width: 100rpx; margin-right: 18rpx; display: flex; flex-direction: row; align-items: center; } .hotWareCard .wareCardLikes .wareCardLikesImg{ width: 30rpx; height: 30rpx; } .hotWareCard .wareCardLikes text { margin-left: 4rpx; color: #FF9800; font-size: 24rpx; }