* { 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%; } header h1 { font-size: 0.35rem; color: #fff; text-align: center; line-height: 1rem; font-weight: normal; } header .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.6); padding: 0 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: ''; top: 0.07rem; left: -0.37rem; width: 0.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: ''; top: 0.07rem; right: -0.35rem; width: 0.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: 0.125rem; vertical-align: middle; } .panel h2 span { margin: 0 0.1875rem; } .panel .chart { height: calc(100% - 0.6rem); } @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; } .line.panel .chart { height: 50%; } .line.panel .tab-line { height: 0.6rem; margin: 0.25rem 0; display: inline-block; } .line.panel .tab-line a { font-size: 0.175rem; color: #0090F5; padding: 0.125rem 0.45rem; display: block; float: left; border: 1px solid #0096ff; text-decoration: none; } .line.panel .tab-line a.active { background: #0096FF; color: #fff; } .line.panel .summary { color: #fff; font-size: 0.175rem; text-align: left; width: 100%; margin-top: 0.1rem; padding: 0.2rem 0.2rem 0.3rem 0.2rem; background-image: url(../images/summary-bg.png); background-size: 100% 100%; background-repeat: no-repeat; } .hotAnalysis.panel .chart { height: 62%; margin-top: 0.5rem; }