.test_container { background: #fff; padding-top: 30px; padding-bottom: 44px; .title { font-size: 22px; line-height: 22px; font-weight: 600; color: rgba(0, 153, 255, 1); text-align: center; text-align-last: center; } .sub_title { font-size: 12px; line-height: 12px; font-weight: 300; color: rgba(0, 153, 255, 1); margin: 12px auto 24px; text-align: center; text-align-last: center; } .table_container { width: 358px; margin: 0 auto; .table_head { background: #ffd667; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 4px 4px 0 0; span { display: flex; justify-content: center; align-items: center; width: 50px; height: 32px; &:last-child { width: 308px; border-left: 1px solid #0099ff; } } } .table_body { background: #34AFFF; .stage-item { border-bottom: 1px solid #0099FF; } .stage { height: 38px; font-size: 14px; line-height: 14px; font-weight: 500; color: rgba(255, 255, 255, 1); display: flex; justify-content: center; align-items: center; } .line { display: flex; justify-content: space-between; align-items: center; height: 36px; border-top: 1px solid #0099FF; color: #FFF; font-size: 12px; span { display: flex; justify-content: center; align-items: center; width: 50px; } .test_name { width: 308px; display: flex; justify-content: flex-start; align-items: center; border-left: 1px solid #0099FF; height: 36px; img { width: 20px; height: 20px; border-radius: 5px; margin: 0 10px; } } } } .table_bottom { height: 36px; background: #3DB1FF; div { display: flex; justify-content: center; align-items: center; height: 36px; color: #FFF; font-size: 12px; } img { width: 9px; height: 9px; margin-left: 6px; } } } }