.custom_queue { padding-top: 40px; } .custom_queue .content .header_box { background: #fff; display: flex; padding: 40rpx 28rpx; border-bottom: solid 2rpx #ebebeb; } .custom_queue .content .header_box .img { width: 112rpx; height: 112rpx; border-radius: 56rpx; overflow: hidden; border: solid 2rpx #ebebeb; margin-right: 20rpx; background-color: #f8f8f8; } .custom_queue .content .header_box .img image { width: 100%; height: 100%; } .custom_queue .content .header_box .head_name { text-align: left; } .custom_queue .content .header_box .head_name .span { width: 562rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-size: 32rpx; font-weight: bold; line-height: 96rpx; } .custom_queue .content .header_box .head_name .title { color: #999; font-size: 32rpx; font-weight: normal; } .custom_queue .content .reward_box { background: #fff; display: flex; padding: 24rpx 0; margin-bottom: 20rpx; } .custom_queue .content .reward_box .reward_a, .custom_queue .content .reward_box .reward_b { width: 50%; text-align: center; } .custom_queue .content .reward_box .reward_a .li .span, .custom_queue .content .reward_box .reward_b .li .span { font-size: 28rpx; } .custom_queue .content .reward_box .reward_a .li:first-child, .custom_queue .content .reward_box .reward_b .li:first-child { height: 52rpx; line-height: 52rpx; font-size: 36rpx; font-weight: bold; } .custom_queue .content .reward_box .reward_a .li:last-child, .custom_queue .content .reward_box .reward_b .li:last-child { line-height: 48rpx; color: #8c8c8c; font-size: 28rpx; } .custom_queue .content .reward_box .reward_c { width: 33.33%; line-height: 100rpx; font-size: 32rpx; } .custom_queue .content .reward_box .reward_c .li { display: flex; justify-content: flex-end; padding-right: 28rpx; width: 100%; color: #8c8c8c; } .custom_queue .content .reward_box .reward_c .li icon { font-size: 48rpx; line-height: 100rpx; color: #c9c9c9; margin-left: 20rpx; } .custom_queue .content .queue_box { margin-bottom: 20rpx; background-color: #fff; } .custom_queue .content .queue_box .queue_a { display: flex; justify-content: space-between; padding: 20rpx 28rpx; line-height: 80rpx; font-size: 32rpx; } .custom_queue .content .queue_box .queue_a .span:first-child { font-weight: bold; } .custom_queue .content .queue_box .queue_a .sum { color: #f15353; } .custom_queue .content .queue_box .queue_b .queue_center { display: flex; } .custom_queue .content .queue_box .queue_b .queue_center .ul { width: 33.33%; justify-content: center; } .custom_queue .content .queue_box .queue_b .queue_center .reward_queue_a .li:first-child, .custom_queue .content .queue_box .queue_b .queue_center .reward_queue_b .li:first-child { font-size: 32rpx; height: 52rpx; line-height: 52rpx; font-weight: bold; } .custom_queue .content .queue_box .queue_b .queue_center .reward_queue_a .li:first-child .span, .custom_queue .content .queue_box .queue_b .queue_center .reward_queue_b .li:first-child .span { font-size: 28rpx; } .custom_queue .content .queue_box .queue_b .queue_center .reward_queue_a .li:last-child, .custom_queue .content .queue_box .queue_b .queue_center .reward_queue_b .li:last-child { line-height: 48rpx; color: #8c8c8c; font-size: 28rpx; } .custom_queue .content .queue_box .queue_b .queue_center .reward_queue_c { font-size: 32rpx; color: #f15353; text-align: center; line-height: 100rpx; } .custom_queue .content .queue_box .queue_c { display: flex; justify-content: center; margin-top: 24rpx; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 32rpx; } .custom_queue .content .queue_box .queue_c icon { font-size: 48rpx; color: #666; } .custom_queue .content .queue_box .button_box { padding: 0 28rpx; } .custom_queue .content .queue_box .button_box .button { background: #fff; color: #333; font-size: 28rpx; border: solid 2rpx #ccc; border-radius: 32rpx; height: 52rpx; width: 240rpx; margin: 0 20rpx; } .custom_queue .content .queue_box .queue_c_down { margin-top: 24rpx; border-top: solid 2rpx #ebebeb; padding: 20rpx 0; font-size: 28rpx; } .custom_queue .content .queue_box .queue_c_down .li { display: flex; justify-content: space-between; line-height: 56rpx; } .custom_queue .content .queue_box .queue_bottom { display: flex; justify-content: space-around; margin-top: 20rpx; } .custom_queue .content .queue_box .queue_bottom .button_side { width: 240rpx; height: 60rpx; background-color: #fff; color: #333; font-size: 30rpx; border: solid 2rpx #ebebeb; border-radius: 48rpx; } .custom_queue .content .queue_box .queue_bottom .button_line { width: 616rpx; height: 60rpx; border-radius: 6rpx; border: solid 2rpx #f15353; color: #f15353; font-size: 30rpx; } .custom_queue .content .queue_box .fade-enter-active { transition: 0.5s; } .custom_queue .content .queue_box .fade-enter, .custom_queue .content .queue_box .fade-leave-active { opacity: 0; height: 0; }