Skip to content
This repository was archived by the owner on May 5, 2023. It is now read-only.

Commit c992390

Browse files
leafcoderleafcoder
committed
feat: add big screen data demo
1 parent 3d34227 commit c992390

19 files changed

+914
-0
lines changed

‎demo/css/app.css

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
@charset "utf-8";
2+
3+
/* global */
4+
* {margin:0;padding:0;box-sizing:border-box;}
5+
html, body {
6+
width:100%;
7+
height:100%;
8+
min-width:1200px;
9+
min-height:600px;
10+
overflow:hidden;
11+
}
12+
body {
13+
position:relative;
14+
font-family:"Microsoft Yahei", Arial, sans-serif;
15+
background:rgb(40, 30, 47) url("../img/bg.png") 0 0 / 100% 100% no-repeat;
16+
}
17+
18+
/* layout */
19+
#header {
20+
position:relative;
21+
height:72px;
22+
background:url("../img/header.png") 0 0 / 100% 100% no-repeat;
23+
overflow:hidden;
24+
}
25+
.header-title {line-height:64px;text-align:center;font-size:34px;font-weight:400;color:#fff;}
26+
.header-info {position:absolute;top:32px;font-size:18px;color:#73aae5;}
27+
.header-info-l {left:20px;}
28+
.header-info-r {right:20px;}
29+
#footer {
30+
position:absolute;
31+
bottom:0;
32+
left:0;
33+
right:0;
34+
height:28px;
35+
background:url("../img/footer.png") 0 0 / 100% 100% no-repeat;
36+
}
37+
#container {position:absolute;top:72px;bottom:22px;left:0;right:0;}
38+
39+
#flexCon {
40+
height:100%;
41+
display:-webkit-flex;
42+
display:-ms-flexbox;
43+
display:flex;
44+
-webkit-flex-direction:column;
45+
-ms-flex-direction:column;
46+
flex-direction:column;
47+
}
48+
.flex-row {
49+
-webkit-flex:1;
50+
-ms-flex:1;
51+
flex:1;
52+
display:-webkit-flex;
53+
display:-ms-flexbox;
54+
display:flex;
55+
}
56+
.flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;}
57+
.flex-cell-l,
58+
.flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;}
59+
.flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;}
60+
.flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;}
61+
62+
.chart-wrapper {position:relative;height:100%;}
63+
.chart-title {height:32px;font-size:22px;font-weight:normal;color:#9aa8d4;}
64+
.chart-div {position:absolute;top:32px;bottom:0;left:0;right:0;}
65+
66+
.data-t {table-layout:fixed;width:100%;height:100%;border-collapse:collapse;}
67+
.data-t th,
68+
.data-t td {min-height:48px;}
69+
.data-t th {width:60px;text-align:center;background:url("../img/icon-bg.png") center / 100% no-repeat;}
70+
.data-t th img {width:30px;height:30px;}
71+
.data-t td {padding-left:15px;}
72+
.data-t p {margin:5px 0;line-height:1;font-size:14px;color:#b0c2f9;}
73+
.data-t p span {font-size:32px;font-weight:bold;color:#fff;}
74+
75+
/* media query */
76+
@media (max-width:1900px) {
77+
#header {height:48px;}
78+
.header-title {line-height:42px;font-size:24px;}
79+
.header-info {top:17px;font-size:14px;}
80+
.header-info-l {left:15px;}
81+
.header-info-r {right:15px;}
82+
.flex-cell {padding:10px;}
83+
.chart-title {height:24px;font-size:18px;}
84+
.chart-div {top:24px;}
85+
.data-t p span {font-size:24px;}
86+
#footer {height:16px;}
87+
#container {top:48px;bottom:12px;}
88+
}
89+
90+
/* chart-loader */
91+
.chart-loader {
92+
position:absolute;
93+
top:0;
94+
left:0;
95+
z-index:99;
96+
width:100%;
97+
height:100%;
98+
background:rgba(255, 255, 255, 0);
99+
transition:all .8s;
100+
}
101+
.chart-loader .loader {
102+
position:absolute;
103+
left:50%;
104+
top:50%;
105+
width:60px;
106+
height:60px;
107+
margin:-30px 0 0 -30px;
108+
border:3px solid transparent;
109+
border-top-color:#3498db;
110+
border-radius:50% !important;
111+
-webkit-animation:spin 2s linear infinite;
112+
animation:spin 2s linear infinite;
113+
}
114+
.chart-loader .loader:before {
115+
content:"";
116+
position:absolute;
117+
top:3px;
118+
left:5px;
119+
right:5px;
120+
bottom:5px;
121+
border:3px solid transparent;
122+
border-top-color:#e74c3c;
123+
border-radius:50% !important;
124+
-webkit-animation:spin 3s linear infinite;
125+
animation:spin 3s linear infinite;
126+
}
127+
.chart-loader .loader:after {
128+
content:"";
129+
position:absolute;
130+
top:9px;
131+
left:10px;
132+
right:10px;
133+
bottom:10px;
134+
border:3px solid transparent;
135+
border-top-color:#f9c922;
136+
border-radius:50% !important;
137+
-webkit-animation:spin 1.5s linear infinite;
138+
animation:spin 1.5s linear infinite;
139+
}
140+
.chart-done .chart-loader {display:none;}
141+
@-webkit-keyframes spin {
142+
0% {
143+
-webkit-transform: rotate(0deg);
144+
-ms-transform: rotate(0deg);
145+
transform: rotate(0deg)
146+
}
147+
100% {
148+
-webkit-transform: rotate(360deg);
149+
-ms-transform: rotate(360deg);
150+
transform: rotate(360deg)
151+
}
152+
}
153+
@keyframes spin {
154+
0% {
155+
-webkit-transform: rotate(0deg);
156+
-ms-transform: rotate(0deg);
157+
transform: rotate(0deg)
158+
}
159+
100% {
160+
-webkit-transform: rotate(360deg);
161+
-ms-transform: rotate(360deg);
162+
transform: rotate(360deg)
163+
}
164+
}

‎demo/img/bg.png

1.32 MB
Loading

‎demo/img/footer.png

5.56 KB
Loading

‎demo/img/header.png

10.9 KB
Loading

‎demo/img/icon-01.png

1.68 KB
Loading

‎demo/img/icon-02.png

621 Bytes
Loading

‎demo/img/icon-03.png

1.41 KB
Loading

‎demo/img/icon-04.png

2.54 KB
Loading

‎demo/img/icon-05.png

815 Bytes
Loading

‎demo/img/icon-06.png

1.58 KB
Loading

‎demo/img/icon-07.png

631 Bytes
Loading

‎demo/img/icon-bg.png

1.78 KB
Loading

‎demo/img/thumb.jpg

144 KB
Loading

0 commit comments

Comments
 (0)