body { background: #000d4a url(../images/bg.png) center top; background-size: cover; color: #666; font-size: 0.1rem; } .center { position: absolute; width: 100px; height: 100px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } .head { height: 1.05rem; background: url(../images/topTitle.png) no-repeat center center; background-size: 100% 100%; position: relative; z-index: 100; } .head h1 { color: #fff; text-align: center; font-size: 0.4rem; line-height: 0.4rem; } .head h1 img { width: 1.5rem; display: inline-block; vertical-align: middle; margin-right: 0.2rem; } .container { padding: 0.1rem 0.1rem 0rem 0.1rem; } .container > ul > li { float: left; padding: 0 0.1rem; } .container > ul > li { width: 30%; } .container > ul > li:nth-child(2) { width: 40%; padding: 0; } .circle { height: 4.8rem; margin-bottom: 0.15rem; } .box { height: 4.2rem; padding: 0 0.2rem 0.2rem 0.15rem; position: relative; margin-bottom: 0.15rem; z-index: 10; } .count { font-size: 0.2rem; color: #ffffff; font-weight: 600; position: absolute; } .mo_total { top: 2.2rem; left: 0.8rem; } .mo_store { top: 2.2rem; left: 2.5rem; } .mo_line { top: 2.2rem; left: 4.4rem; } .gauge_total { top: 4.2rem; left: 0.8rem; } .gauge_store { top: 4.2rem; left: 2.5rem; } .gauge_line { top: 4.2rem; left: 4.4rem; } .title { font-size: 0.2rem; color: #2fd5ff; text-align: center; line-height: 0.5rem; width: 2.4rem; position: absolute; font-weight: 600; } .malfunction { margin-top: 0.88rem; } .outIn { margin-top: 0.66rem; margin-left: 1.3rem; } .aging { margin-top: 0.3rem; margin-left: 1.4rem; } .chart { width: 5.8rem; height: 3rem; margin-top: 1.6rem; } .count_box { width: 2rem; position: absolute; text-align: center; font-size: 0.4rem; color: #ffffff; } .total1 { top: 0.74rem; left: 0.26rem; } .store1 { top: 0.74rem; left: 2.12rem; } .line1 { top: 0.74rem; left: 3.98rem; } .total2 { top: 2.8rem; left: 0.26rem; } .store2 { top: 2.8rem; left: 2.12rem; } .line2 { top: 2.8rem; left: 3.98rem; }