.BoxBg{ min-height: 100vh; } .logoBox{ position: relative; width: 100%; } .logo{ width: 100%; height: 480rpx; border-radius: 10rpx; background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/leaderboard_bnt.png'); background-size: 100% 480rpx; background-position: 0 -1500rpx; } .logoText{ position: absolute; width: 187rpx; height: 58rpx; border-radius: 29rpx; background: #07E881; border-radius: 29rpx; color: #ffffff; text-align: center; top: 200rpx; left: 30rpx; z-index: 100000; font-size: 30rpx; font-family: PingFang SC; font-weight: 500; line-height: 58rpx; } .courseBoxAll{ width: 100%; position: absolute; overflow: hidden; margin-top: -160rpx; background-color: #0E1119; z-index: 1000000; } .courseBox{ margin: 20rpx 0; position: relative; } .cover{ width: 250rpx; height: 162rpx; float: left; border-radius: 10rpx; /* background-color: cornflowerblue; */ margin-right: 20rpx; margin-left: 20rpx; } .courseItem{ width: 380rpx; float: left; } .courseName{ height: 50rpx; line-height: 50rpx; font-size: 30rpx; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; color: #ffffff; font-family: PingFang SC; font-weight: 500; color: #FEFEFE; } .headImg{ float: left; width: 50rpx; height: 50rpx; border-radius: 50%; } .annotation{ width: 168rpx; border-radius: 50rpx; height: 50rpx; background-color: #333; text-align: center; line-height: 50rpx; color: #9999cc; } .incomeBox{ margin-top: 10rpx; } .money{ float: left; color: #ff3366; font-size: 28rpx; } .py{ font-size: 24rpx; float: left; color: #ff3366; } .moodsImg{ float: right; width: 30rpx; height: 30rpx; margin-top: 8rpx; /* background-color: cornflowerblue; */ } .moodsText{ float: right; color: #ffffff; margin: 0 10rpx; font-size: 22rpx; margin-top: 6rpx; } .moodsNum{ float: right; color: #00cc99; } .sortNumBj_0{ position: absolute; width: 52rpx; height: 65rpx; background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_1.png'); background-size:52rpx 65rpx; color: #ffffff; text-align: center; line-height: 46rpx; top: 0rpx; left: 20rpx; } .sortNumBj_1{ position: absolute; width: 52rpx; height: 65rpx; background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_2.png'); background-size:52rpx 65rpx; color: #ffffff; text-align: center; line-height: 46rpx; top: 0rpx; left: 20rpx; } .sortNumBj_2{ position: absolute; width: 52rpx; height: 65rpx; background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_3.png'); background-size:52rpx 65rpx; color: #ffffff; text-align: center; line-height: 46rpx; top: 0rpx; left: 20rpx; } .sortNumBj_3{ position: absolute; width: 52rpx; height: 65rpx; background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_4.png'); background-size:52rpx 65rpx; color: #ffffff; text-align: center; line-height: 46rpx; top: 0rpx; left: 20rpx; }