|
|
@@ -0,0 +1,126 @@
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+li {
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+select,
|
|
|
+input {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+.text-left {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+/* 溢出滚动样式 */
|
|
|
+.summary ::-webkit-scrollbar {
|
|
|
+ height: 7px !important;
|
|
|
+ width: 7px !important;
|
|
|
+}
|
|
|
+/*定义了滚动条滑块的样式*/
|
|
|
+.summary ::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 5px;
|
|
|
+ border-style: dashed;
|
|
|
+ background-color: #28BEFC;
|
|
|
+ border-color: #e2242400;
|
|
|
+ border-width: 1.5px;
|
|
|
+ background-clip: padding-box;
|
|
|
+}
|
|
|
+/*定义了轨道的样式*/
|
|
|
+.summary ::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
|
|
|
+ border-radius: 5px;
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+}
|
|
|
+@font-face {
|
|
|
+ font-family: electronicFont;
|
|
|
+ src: url(../font/DS-DIGIT.TTF);
|
|
|
+}
|
|
|
+@font-face {
|
|
|
+ font-family: IMPACT;
|
|
|
+ src: url(../font/IMPACT.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;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+body .page-container {
|
|
|
+ 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;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+header {
|
|
|
+ position: relative;
|
|
|
+ height: 1rem;
|
|
|
+ background: url(../images/head_bg.png) no-repeat top center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ min-width: 1024px;
|
|
|
+ max-width: 1920px;
|
|
|
+}
|
|
|
+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.225rem 0.225rem 0 0.2625rem;
|
|
|
+}
|
|
|
+.mainbox .topSection,
|
|
|
+.mainbox .bottomSection {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.mainbox.eleFire .topSection .column {
|
|
|
+ flex: 2;
|
|
|
+}
|
|
|
+.mainbox.eleFire .topSection .column:nth-child(2) {
|
|
|
+ flex: 5;
|
|
|
+ margin: 0 0 0 0.275rem;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.mainbox .bottomSection .column {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.mainbox .bottomSection .column:nth-child(2) {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 0 0 0.275rem;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.panel {
|
|
|
+ position: relative;
|
|
|
+ height: 5.9rem;
|
|
|
+ border: 1px solid rgba(25, 140, 186, 0.5);
|
|
|
+ background: rgba(8, 26, 50, 0.6);
|
|
|
+ padding: 0 0.5375rem;
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
+}
|
|
|
+.panel::before {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
