.task_list { padding-top: 40px; background: #fff; } .task_list .content .header { width: 100%; } .task_list .content .header .use-header { background-color: #3b3b4f; padding: 40rpx; position: relative; display: flex; } .task_list .content .header .use-header .img { width: 120rpx; height: 120rpx; border: solid 4rpx #fff; border-radius: 50%; margin-right: 32rpx; overflow: hidden; } .task_list .content .header .use-header .img image { width: 100%; height: 100%; } .task_list .content .header .use-header .ul { text-align: left; } .task_list .content .header .use-header .ul .li { line-height: 56rpx; color: #fff; font-size: 15px; } .task_list .content .header .use-header .ul .name { font-weight: bold; } .task_list .content .header .use-header .button { width: 21%; height: 52rpx; background-color: #fff; border-radius: 26rpx; display: flex; justify-content: space-between; padding: 0 16rpx; position: absolute; margin-top: 34rpx; right: 20rpx; } .task_list .content .header .use-header .button input { border: none; color: #f5ca7f; } .task_list .content .header .use-header .button icon { color: #f5ca7f; font-size: 40rpx; line-height: 52rpx; } .task_list .content .member_time { background-color: rgba(59, 59, 79, 0.8); text-align: left; height: 72rpx; padding: 0 40rpx; } .task_list .content .member_time view { display: inline-block; font-size: 14px; line-height: 72rpx; color: #f5ca7f; } .task_list .content .member_time view .span { font-weight: bold; } .task_list .content .member_time icon { margin-right: 20rpx; } .task_list .content .top { margin-bottom: 20rpx; height: 80rpx; line-height: 80rpx; background-color: #f5d59c; border-radius: 12rpx 12rpx 0 0; color: #333; font-size: 16px; display: flex; padding: 0 20rpx; justify-content: space-between; } .task_list .content .top .right { display: flex; } .task_list .content .top .right icon { font-size: 40rpx; color: #6bc57a; margin-right: 8rpx; } .task_list .content .top .right .icon-service_j { color: #ff9800; } .task_list .content .top .right .icon-submit { color: #6bc57a; } .task_list .content .title-box { display: flex; justify-content: space-between; } .task_list .content .title-box .left { margin-left: 28rpx; width: 32%; height: 2rpx; background-color: #ccc; margin-top: 30rpx; } .task_list .content .title-box .span { font-size: 16px; line-height: 60rpx; } .task_list .content .title-box .right { width: 32%; height: 2rpx; background-color: #ccc; margin-top: 30rpx; margin-right: 28rpx; } .task_list .content .bottom { height: 80rpx; line-height: 80rpx; background-color: #f5d59c; border-radius: 0 0 12rpx 12rpx; color: #333; display: flex; justify-content: flex-end; padding: 0 10px; } .task_list .content .bottom .span { font-size: 15px; } .task_list .content .bottom .span:last-child { color: #8c8c8c; } .task_list .content .task_box .title_box { height: 92rpx; line-height: 92rpx; display: flex; justify-content: center; align-items: center; background: #fafafa; } .task_list .content .task_box .title_box .block_left, .task_list .content .task_box .title_box .block_right { width: 12rpx; height: 12rpx; background: #f5ca7f; transform: rotate(45deg); } .task_list .content .task_box .title_box .h2 { margin: 0 32rpx; font-size: 16px; color: #666; } .task_list .content .task_box .list_box .list { position: relative; display: flex; padding: 20rpx 28rpx; border-bottom: solid 2rpx #ebebeb; } .task_list .content .task_box .list_box .list .text_a { margin-right: 20rpx; } .task_list .content .task_box .list_box .list .text_a icon { font-size: 56rpx; color: #f5ca7f; line-height: 112rpx; } .task_list .content .task_box .list_box .list .text_b { height: 120rpx; line-height: 60rpx; font-size: 16px; text-align: left; } .task_list .content .task_box .list_box .list .text_b .span:last-child { font-size: 14px; color: #f5ca7f; } .task_list .content .task_box .list_box .list .text_c { position: absolute; line-height: 120rpx; right: 28rpx; font-size: 16px; text-align: right; color: #f5ca7f; }