reader/component/hot/hot.wxss

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;
}