body{ background: #4a4a4a; padding: 10px; margin-top: 15px; box-sizing: border-box; } .bhibtop{ width: 100%; height: 10px; background: #9b9b9b; border-radius: 4px; } .bhibody{ background: #fff; margin: -5px 10px 0; border-top: 2px solid #4a4a4a; padding: 10px 10px 16px; position: relative; } .bhibody .status{ text-align: center; padding: 15px 0; color: #f5a623; } .bhibody .bhType{ width: 100%; text-align: center; padding: 15px 0; } .bhibody .bhType>span{ display: inline-block; height: 30px; line-height: 30px; position: relative; } .bhibody .bhType>span>span{ display: inline-block; position: absolute; left: 10%; width: 80%; height: 100%; border-radius: 50%; top: -1px; border: 3px solid #ffe2e2; z-index: 0; text-align: center; } .bhibody .bhType>span>span>span{ display: inline-block; width: 75%; height: 75%; margin-top: 2%; /*width: 90%; height: 27px;*/ border-radius: 45%; border: 2px solid #ffe2e2; } .bhibody .bhType>span>div{ position: relative; z-index: 2; color: #d0021b; } .bhdata{ margin-top: 15px; } .bhdata .fpinfo p{ padding: 10px 0; } .bhdata .fpinfo table,.bhdata .fpinfo ul li{ font-size: 13px; color: #a4a4a4; } .bhdata .fpinfo table td,.bhdata .fpinfo ul li{ padding: 4px 0; } .bhdata .fpinfo table td:first-child{ width: 91px; } .bhibody .status{ position: relative; } .bhibody .status .bany{ position: absolute; width: 10px; height: 20px; background: #66988c; bottom: -10px; border-radius: 10px 0 0 10px; } .bhibody .status .bany1{ left: -10px; transform: rotate(180deg); } .bhibody .status .bany2{ right: -10px !important; } .bhibody .blsty{ width: 100%; position: absolute; left: 0; bottom: -11px; overflow: hidden; } .bhibody .blsty>span{ display: inline-block; width: 3%; margin-left: 1%; margin-right: 1%; height: 10px; border-radius: 50%; background: #3499b7; }