.Box{ min-height: 100vh; position: relative; } .backImg{ width: 100%; height: 400rpx; } .headImg{ position: absolute; border: 1rpx solid #07E881; width: 200rpx; height: 200rpx; border-radius: 50%; top: 480rpx; left: 50rpx; } .category{ position: absolute; top: 560rpx; left: 300rpx; padding: 20rpx; border-radius: 10rpx; background-color: #222735; text-align: center; line-height: 32rpx; } .nameBox{ margin-top: 180rpx; } .userName{ height: 50rpx; font-size: 40rpx; font-family: PingFang SC; font-weight: 800; color: #FFFFFF; text-align:center; float: left; margin-left: 20px; } .text{ width: 90%; margin: 20rpx auto; height: 120rpx; overflow: hidden; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #666D80; line-height: 36rpx; } .classifyBox{ height: 120rpx; background: #121620; } .singleBox{ float: left; margin-left: 30rpx; } .multiBox{ float: left; text-align: center; } .singleXian{ width: 60rpx; height: 2rpx; background-color: #07E881; margin-left: 20rpx; } .singleText{ font-size: 30rpx; font-family: OPPOSans; font-weight: 500; color: #97A1BD; line-height: 35rpx; padding: 10px 0; margin-left: 20rpx; } .singleText_a{ font-size: 30rpx; font-family: OPPOSans; font-weight: bold; color: #FFFFFF; line-height: 35rpx; padding: 10px 0; margin-left: 20rpx; } .classBox{ margin: 20rpx; } .classImg{ float: left; width: 300rpx; height: 200rpx; border-radius: 12rpx; } .textBox{ float: left; margin-left: 10px; } .titile{ width: 350rpx; height: 40rpx; line-height: 40rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 500; color: #FEFEFE; margin-bottom: 19rpx; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1 } .cont{ width: 360rpx; height: 30rpx; line-height: 30rpx; font-size: 26rpx; font-family: PingFang SC; font-weight: 400; color: #6E768A; font-weight: 560; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .moreBox{ margin-top: 20rpx; position: relative; } .user{ float: left; width: 50rpx; height: 50rpx; border-radius: 50%; background-color: beige; } .userText{ width: 200rpx; text-align: center; height: 50rpx; line-height: 50rpx; background: #222735; border-radius: 50rpx; font-family: PingFang SC; font-weight: 500; font-size: 26rpx; color: #8790A8; } .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; }