swiper { /* margin-top: 10rpx; */ padding-top: 20rpx; 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: 518rpx; height: 56rpx; border-radius: 10rpx; background: #F0F1F5; color: #717171; font-size: 28rpx; margin-left: 14rpx; padding-left: 25rpx; } .searchSection .searchBtn { /* background: #fff; */ position: absolute; z-index: 2; right: 220rpx; width: 56rpx; height: 56rpx; border: 1rpx solid rgba(255, 255, 255, 0); } .searchSection .searchBtn image { display: block; width: 34rpx; height: 34rpx; margin: 10rpx auto; } .searchSection .allBooks { font-size: 32rpx; color: #41bb32; /* font-family: PingFangSC-regular; */ width: 166rpx; text-align: center; margin-left: 20rpx; background: #F0F1F5; height: 56rpx; line-height: 56rpx; border-radius: 10rpx; } .hotSection { width: 100%; /* height: 50rpx; */ /* background: #fff; */ background: rgba(240, 241, 245, 1); margin-top: 10rpx; } .hotSection .title { display: flex; align-items: center; justify-content: space-between; padding: 10rpx 22rpx 20rpx; } .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: 16rpx; font-size: 32rpx; line-height: 40rpx; /* font-family: PingFangSC-regular; */ color: #444; } .hotSection .title .moreBtn { display: flex; flex-direction: row; float: right; width: 100rpx; height: 38rpx; font-size: 28rpx; color: #444; align-items: center; } .title .moreBtn image { width: 16rpx; height: 28rpx; } .hotWares { display: flex; flex-wrap: wrap; /* background: #e8e8e8; */ } .hotSection .hotWares .hotWareCard { position: relative; overflow: hidden; width: 720rpx; height: 374rpx; background: #fff; /* padding: 26rpx; */ border-radius: 12rpx; /* margin: 0 0 18rpx 16rpx; */ margin: 0 auto 20rpx; /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */ } .hotWareCard .wareCardImg { display: block; width: 662rpx; height: 272rpx; margin: 26rpx auto 0; border-radius: 20rpx; } .hotWareCard .titleSummary { display: flex; justify-content: space-between; margin-top: 12rpx; } .hotWareCard .wareCardTitle { /* margin: 0 auto; */ width: 80%; height: 46rpx; display: block; /* text-align: left; */ color: #414141; font-size: 32rpx; /* letter-spacing: 4rpx; */ margin-left: 28rpx; /* 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: left; color: #444; font-size: 24rpx; line-height: 41rpx; } .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-reverse; 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; } /* // 热门推荐 */ .recommdSection { width: 100%; /* height: 50rpx; */ /* background: #fff; */ background: rgba(240, 241, 245, 1); /* margin-top: 10rpx; */ } .recommdSection .title { display: flex; align-items: center; justify-content: space-between; padding: 0 22rpx 20rpx; } .recommdSection .leftWrapper { display: flex; align-items: center; } .recommdSection .title image { width: 38rpx; height: 44rpx; margin-left: 14rpx; } .recommdSection .title .recommendTag { width: 38rpx; height: 34rpx; } .recommdSection .title text { width: 224rpx; /* letter-spacing: 4rpx; */ height: 40rpx; margin-left: 16rpx; font-size: 32rpx; line-height: 40rpx; /* font-family: PingFangSC-regular; */ color: #444; } .recommdSection .title .moreBtn { display: block; float: right; width: 80rpx; height: 38rpx; font-size: 28rpx; color: #6e6e6e; } .hotWares { display: flex; flex-wrap: wrap; /* background: #e8e8e8; */ } .recommdSection .hotWares .worksCard { position: relative; overflow: hidden; width: 720rpx; height: 476rpx; background: #fff; /* padding: 26rpx; */ border-radius: 12rpx; /* margin: 0 0 18rpx 16rpx; */ margin: 0 auto 20rpx; /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */ } .worksCard .wareCardImg { display: block; width: 662rpx; height: 272rpx; margin: 14rpx auto 0; border-radius: 20rpx; } .worksCard .titleSummary { display: flex; justify-content: space-between; margin-top: 12rpx; } .worksCard .wareCardTitle { /* margin: 0 auto; */ width: 80%; height: 46rpx; display: block; /* text-align: left; */ color: #444; font-size: 32rpx; /* letter-spacing: 4rpx; */ margin-left: 28rpx; font-family: MicrosoftYaHei; } .worksCard .topData { height: 92rpx; margin-top: 14rpx; display: flex; flex-direction: row; /* justify-content: space-between; */ align-items: center; } .worksLeft { display: flex; flex-direction: row; flex: 1; margin-left: 10rpx; } .worksLeft .worksInfo .authorName { color: #444444; font-size: 32rpx; margin-top: 8rpx; } .worksLeft .worksInfo .time { color: #686868; font-size: 28rpx; } .worksCard .topData .wareCardPlays { width: 100rpx; /* margin-left: 270rpx; */ display: flex; flex-direction: row-reverse; align-items: center; padding-right: 35rpx; } .worksCard .topData .authorAvatar { width: 92rpx; height: 92rpx; margin: 0 22rpx 0 22rpx; display: block; border: 4rpx solid #61CA54; border-radius: 50%; } .worksCard .topData .profession { width: 68rpx; height: 24rpx; background: rgba(97, 202, 84, 1); border-radius: 166rpx; border: 2rpx solid rgba(255, 255, 255, 1); font-size: 16rpx; /* font-family: PingFangSC-Medium; */ font-weight: 500; color: rgba(255, 255, 255, 1); line-height: 24rpx; text-align: center; position: absolute; bottom: -7rpx; left: 37rpx; } .topData .numberInfo { display: flex; flex-direction: column; } .worksCard .wareCardTip { width: 178rpx; height: 40rpx; display: block; text-align: left; color: #444; font-size: 24rpx; line-height: 44rpx; } .worksCard .wareCardPlays .wareCardPlaysImg { width: 26rpx; height: 26rpx; margin-right: 6rpx; float: right; } .worksCard .wareCardPlays text { margin-left: 4rpx; color: #5e5e5e; font-size: 22rpx; text-align: right; /* width:57%; */ float: right; } .worksCard .wareCardLikes { width: 100rpx; margin-right: 18rpx; display: flex; flex-direction: row-reverse; align-items: center; } .worksCard .wareCardLikes .wareCardLikesImg { width: 26rpx; height: 24rpx; margin-right: 6rpx; } .worksCard .wareCardLikes text { margin-left: 4rpx; color: #FF9800; font-size: 24rpx; }