.container{ background-color: #F4F4F4; width: 100vw; height: 100vh; } .top{ width: 92vw; margin: 50rpx auto 0 auto; background-color: #3CC7C0; height: 150rpx; border-radius: 20rpx; color: #ffffff; } .top_txt{ display: flex; align-items: center; height: 110rpx; padding-left: 20rpx; } .data_list{ width: 92vw; margin: -40rpx auto 0 auto; } .data_item{ display: flex; flex-direction: column; margin-bottom: 50rpx; height: 200rpx; background-color: #ffffff; border-radius: 20rpx; padding: 20rpx 0 0 0; } .data_item_top{ flex: 2; display: flex; border-bottom: 1px solid #E7E7E7; } .data_item_top_icon{ flex: 1; text-align: center; height: 70%; align-self: start; } .data_item_top_content{ flex: 3; display: flex; flex-direction: column; } .name{ font-size: 32rpx; color: #333333; flex: 1; } .date{ flex: 1; font-size: 28rpx; color: #999999; } .data_item_top_num{ flex: 2; display: flex; flex-direction: column; justify-content: space-between; text-align: center; } .jine{ color: #FF0000; font-size: 34rpx; } .status_box{ display: flex; justify-content: center; } .status{ border-radius: 10px; font-size: 24rpx; padding: 10rpx 40rpx; margin-bottom: 20rpx; } .status_ing{ background-color: #FFF2E8; color: #FA541C; } .status_end{ background-color: #C5C5C5; color: #FFFFFF; } .data_item_bottom{ flex: 1; display: flex; align-items: center; justify-content: flex-end; margin-right: 20rpx; color: #666; }