* { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF); } body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; /* 背景图定位 / 背景图尺寸 cover 完全铺满容器 contain 完整显示在容器内 */ background: url(../images/bg.jpg) no-repeat #000; background-size: cover; /* 行高是字体1.15倍 */ line-height: 1.15; } header { position: relative; height: 1rem; background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100%; h1 { font-size: .35rem; color: #fff; text-align: center; line-height: 1rem; font-weight: normal } .filterSec { position: absolute; top: 0; right: 0.375rem; line-height: 0.9375rem; font-size: 0.25rem; color: rgba(255, 255, 255, 0.7); } } .mainbox { min-width: 1024px; max-width: 1920px; padding: 0.125rem 0.125rem 0; } .mainbox .topSection, .mainbox .bottomSection { display: flex } .mainbox .topSection .column { flex: 2; } .mainbox .topSection .column:nth-child(2) { flex: 5; margin: 0 0.125rem; overflow: hidden; } .mainbox .bottomSection .column { flex: 1; } .mainbox .bottomSection .column:nth-child(2) { flex: 1; margin: 0 0.125rem; overflow: hidden; } .panel { position: relative; height: 5.75rem; border: 1px solid rgba(25, 140, 186, 0.5); background: rgba(8,26,50,0.60); padding: 0 .5375rem ; margin-bottom: 0.1875rem; } .panel::before { position: absolute; top: 0; left: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #28BEFC; border-left: 2px solid #28BEFC; } .panel::after { position: absolute; top: 0; right: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #28BEFC; border-right: 2px solid #28BEFC; } .panel .panel-footer { position: absolute; left: 0; bottom: 0; width: 100%; } .panel .panel-footer::before { position: absolute; bottom: 0; left: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #28BEFC; border-left: 2px solid #28BEFC; } .panel .panel-footer::after { position: absolute; bottom: 0; right: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #28BEFC; border-right: 2px solid #28BEFC; } .panel h2 { height: 0.6rem; line-height: 0.6rem; text-align: center; color: #0096FF; font-size: 0.25rem; font-weight: 400; position: relative; } .panel h2 .line { height: 1px; background: rgba(25, 140, 186, 0.5); position: relative; width: 100%; margin: 0 auto } .panel h2 .line:before { content: ''; height: 1px; top: .07rem; left: -0.37rem; width: .375rem; height: 1px; border-bottom: 1px solid rgba(25, 140, 186, 0.5); display: inline-block; transform: rotate(335deg); position: absolute; } .panel h2 .line:after { content: ''; height: 1px; top: .07rem; right: -0.35rem; width: .375rem; height: 1px; border-bottom: 1px solid rgba(25, 140, 186, 0.5); display: inline-block; transform: rotate(25deg); position: absolute; } .panel h2 img { height: .125rem; vertical-align: middle } .panel h2 span { margin: 0 0.1875rem; } .panel .chart { height:calc(100% - 0.6rem); // border:1px solid pink; } @media screen and (max-width: 1024px) { html { font-size: 42px !important; } } @media screen and (min-width: 1920) { html { font-size: 80px !important; } } // 电老化分析 .line.panel { text-align:center; .chart{ height:50%; } .tab-line{ height: .6rem; margin: .25rem 0; display:inline-block; a{ font-size: .175rem; color:#0090F5; padding: .125rem .45rem; display:block; float:left; border: 1px solid #0096ff; text-decoration: none; } a.active{ background:#0096FF; color:#fff } } .summary{ color:#fff; font-size: .175rem; text-align:left; width:100%; margin-top:.1rem; padding: .2rem .2rem .3rem .2rem; background-image:url(../images/summary-bg.png) ; background-size:100% 100%; background-repeat: no-repeat; } } .hotAnalysis.panel .chart{ height:62%; margin-top:.5rem }