swiper { margin-top: 10rpx; background: #fff; display: block; width: 100%; height: 312rpx; } .slide-image { display: block; margin: 0 auto; width: 728rpx; height: 312rpx; border-radius: 20rpx; } .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: 10rpx; } .hotSection .title { display: flex; align-items: center; justify-content: space-between; margin: 8rpx 20rpx 20rpx 8rpx; } .hotSection .leftWrapper{ display:flex; align-items:center; } .hotSection .title image { width: 54rpx; height: 60rpx; margin-left: 14rpx; } .hotSection .title .recommendTag { width: 38rpx; height: 34rpx; } .hotSection .title text { width: 224rpx; letter-spacing: 4rpx; height: 40rpx; margin-left: 12rpx; font-size: 32rpx; line-height: 40rpx; font-family: PingFangSC-regular; color: #414141; } .hotSection .title .moreBtn { display: block; float: right; width: 80rpx; height: 38rpx; font-size: 28rpx; color: #6e6e6e; } .hotWares { display: flex; flex-wrap: wrap; } .hotSection .hotWares .hotWareCard { position: relative; overflow: hidden; width: 704rpx; height: 402rpx; /* margin: 0 0 18rpx 16rpx; */ margin: 0 auto 20rpx; /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */ } .hotWareCard .wareCardImg { width: 100%; height: 290rpx; border-radius: 20rpx; } .hotWareCard .wareCardTitle { /* margin: 0 auto; */ width: 100%; height: 46rpx; display: block; /* text-align: left; */ color: #414141; font-size: 32rpx; letter-spacing: 4rpx; font-family: MicrosoftYaHei; } .hotWareCard .bottomData { height: 34rpx; margin-top: 10rpx; display: flex; /* flex-direction: row; */ justify-content: space-between; align-items: center; } .hotWareCard .bottomData .wareCardPlays { width: 100rpx; margin-left: 270rpx; display: flex; flex-direction: row; align-items: center; } .hotWareCard .wareCardTip { width: 178rpx; height: 40rpx; display: block; text-align: center; color: #414141; font-size: 24rpx; } .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; } /** 第一个大图**/ .hotSection .hotWares .hotWareCardFirst { position: relative; overflow: hidden; width: 740rpx; height: 342rpx; margin: 10rpx auto 20rpx; box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); } .hotWareCardFirst .wareCardImg { width: 100%; height: 100%; } .hotWareCardFirst .wrapper { width: 100%; height: 100rpx; background: #fff; position: absolute; bottom: 0; } .hotWareCardFirst .wareCardTitle { margin: 10rpx 20rpx 0; display: block; /* text-align: center; */ color: rgba(16, 16, 16, 1); font-size: 32rpx; } .hotWareCardFirst .wareCardTip { margin: 0 20rpx; width: 178rpx; height: 34rpx; display: block; text-align: center; color: rgba(16, 16, 16, 1); font-size: 28rpx; } .hotWareCardFirst .bottomData { width: 100%; height: 34rpx; margin-top: 5rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .hotWareCardFirst .wareCardPlays { width: 100rpx; margin-left: 230rpx; display: flex; flex-direction: row; align-items: center; } .hotWareCardFirst .wareCardPlays .wareCardPlaysImg { width: 30rpx; height: 30rpx; } .hotWareCardFirst .wareCardPlays text { margin-left: 4rpx; color: #61CA54; font-size: 24rpx; } .hotWareCardFirst .wareCardLikes { width: 100rpx; margin-right: 18rpx; display: flex; flex-direction: row; align-items: center; } .hotWareCardFirst .wareCardLikes .wareCardLikesImg { width: 30rpx; height: 30rpx; } .hotWareCardFirst .wareCardLikes text { margin-left: 4rpx; color: #FF9800; font-size: 24rpx; }