.bg { position: relative; width: 100%; min-height: 100%; background-color: #ffe3dc; } .year { width: 670rpx; margin: 0 auto; background-color: #fff; padding: 0 20rpx; border-radius: 8rpx; } .year-top { position: relative; height: 100rpx; line-height: 100rpx; font-size: 28rpx; color: #4c4c4c; text-align: center; border-bottom: 1rpx solid #dddddd; font-weight: bold; } .year-top__left { position: absolute; left: 0; top: 0; margin-left: 10rpx; font-weight: normal; } .year-top__nolefticon { float: left; width: 36rpx; height: 36rpx; margin-top: 32rpx; background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/right.png'); transform: rotate(180deg); background-size: 100% 100%; } .year-top__lefticon { float: left; width: 36rpx; height: 36rpx; margin-top: 32rpx; background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/left.png'); background-size: 100% 100%; } .year-top__leftyear { float: left; padding-left: 20rpx; color: #4c4c4c; font-size: 28rpx; line-height: 100rpx; } .year-top__right { position: absolute; right: 0; top: 0; margin-right: 10rpx; font-weight: normal; } .year-top__norighticon { float: right; width: 36rpx; height: 36rpx; margin-top: 32rpx; background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/left.png'); transform: rotate(180deg); background-size: 100% 100%; } .year-top__righticon { float: right; width: 36rpx; height: 36rpx; margin-top: 32rpx; background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/right.png'); background-size: 100% 100%; } .year-top__rightyear { float: right; padding-right: 20rpx; color: #4c4c4c; font-size: 28rpx; line-height: 100rpx; } .year-main { padding-bottom: 20rpx; } .year-text { line-height: 24rpx; font-size: 24rpx; color: #999999; text-align: center; padding-top: 40rpx; padding-bottom: 10rpx; } .year-price { text-align: center; padding-top: 20rpx; padding-bottom: 30rpx; font-size: 48rpx; color: #f45656; } .year-about { width: 650rpx; padding: 10rpx; font-size: 24rpx; line-height: 42rpx; background-color: #f1f5f9; color: #999999; } .myself { position: relative; width: 710rpx; color: #eab86a; margin: 20rpx auto 0; padding-bottom: 30rpx; background-color: #fff; border-radius: 8rpx; font-size: 36rpx; } .myself-top { line-height: 120rpx; } .myself-title { float: left; margin-left: 30rpx; font-size: 24rpx; color: #999999; } .myself-rank { float: right; font-size: 36rpx; margin-right: 30rpx; color: #eab86a; } .myself-btn { width: 432rpx; height: 72rpx; line-height: 72rpx; text-align: center; margin: 0 auto; border-radius: 72rpx; color: #ffffff; font-size: 28rpx; background: -webkit-linear-gradient(#ff9b74, #ff5c5c); background: linear-gradient(#ff9b74, #ff5c5c); } .rank { width: 670rpx; margin: 20rpx auto 20rpx; background-color: #fff; padding: 0 20rpx; border-radius: 8rpx; } .rank-top { height: 305rpx; border-bottom: 1rpx solid #dddddd; } .rank-top__title { padding-top: 40rpx; padding-bottom: 30rpx; font-size: 28rpx; line-height: 28rpx; color: #4c4c4c; text-align: center; } .rank-top__head { width: 120rpx; height: 120rpx; display: block; margin: 0 auto; border-radius: 100%; } .rank-top__nohead { position: relative; width: 120rpx; height: 120rpx; display: block; margin: 0 auto; border-radius: 100%; background-color: #eeeeee; } .rank-top__none { position: absolute; left: 35rpx; top: 26rpx; width: 49rpx; height: 69rpx; background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/none.png'); background-size: 100% 100%; } .rank-top__name { line-height: 28rpx; text-align: center; padding: 20rpx 0; color: #999999; font-size: 28rpx; } .rank-title { font-size: 24rpx; color: #999999; padding-bottom: 10rpx; } .rank-title__left { float: left; line-height: 64rpx; } .rank-title__right { float: right; line-height: 64rpx; } .rank-list { padding-bottom: 30rpx; } .rank-list__head { float: left; width: 88rpx; height: 88rpx; display: block; border-radius: 100%; } .rank-list__name { float: left; padding-left: 17rpx; line-height: 88rpx; width: 330rpx; font-size: 28rpx; color: #4c4c4c; } .rank-list__price { float: right; /* line-height: 88rpx; */ font-size: 36rpx; color: #eab86a; } .rank-title__time { float: right; /* line-height: 44rpx; */ font-size: 24rpx; color: #999; }