1+ * {
2+ margin : 0 ;
3+ padding : 0 ;
4+ box-sizing : border-box;
5+ }
6+
7+ body {
8+ font-family : 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif, 'Microsoft YaHei' ;
9+ background : linear-gradient (135deg , # c7d2fe 0% , # fbcfe8 50% , # a5f3fc 100% );
10+ min-height : 100vh ;
11+ padding : 20px ;
12+ }
13+
14+ .container {
15+ max-width : 1400px ;
16+ margin : 0 auto;
17+ background : rgba (255 , 255 , 255 , 0.96 );
18+ border-radius : 18px ;
19+ box-shadow : 0 18px 45px rgba (148 , 163 , 184 , 0.45 );
20+ overflow : hidden;
21+ }
22+
23+ .header {
24+ position : relative;
25+ padding : 30px ;
26+ color : # 0f172a ;
27+ overflow : hidden;
28+ background : # e0f2ff ;
29+ border-bottom : 1px solid rgba (148 , 163 , 184 , 0.35 );
30+ }
31+
32+ .header h1 ,
33+ .header .info {
34+ position : relative;
35+ z-index : 2 ;
36+ }
37+
38+ .header-bg-text {
39+ position : absolute;
40+ inset : 0 ;
41+ display : flex;
42+ align-items : center;
43+ justify-content : center;
44+ font-size : 92px ;
45+ font-weight : 800 ;
46+ letter-spacing : 0.12em ;
47+ text-transform : uppercase;
48+ color : rgba (30 , 64 , 175 , 0.2 );
49+ filter : blur (2px );
50+ pointer-events : none;
51+ z-index : 1 ;
52+ }
53+
54+ .header h1 {
55+ font-size : 32px ;
56+ margin-bottom : 15px ;
57+ font-weight : 600 ;
58+ text-shadow : 2px 2px 4px rgba (0 , 0 , 0 , 0.2 );
59+ }
60+
61+ .info {
62+ display : flex;
63+ gap : 20px ;
64+ font-size : 14px ;
65+ opacity : 0.95 ;
66+ }
67+
68+ .info span {
69+ background : rgba (255 , 255 , 255 , 0.2 );
70+ padding : 6px 12px ;
71+ border-radius : 6px ;
72+ backdrop-filter : blur (10px );
73+ }
74+
75+ .logs-container {
76+ padding : 20px ;
77+ /* 让截图包含全部日志,不使用内部滚动条 */
78+ overflow : visible;
79+ }
80+
81+ .log-item {
82+ display : flex;
83+ align-items : flex-start;
84+ padding : 12px 16px ;
85+ margin-bottom : 8px ;
86+ border-radius : 8px ;
87+ background : # f9fafb ;
88+ border-left : 4px solid # e5e7eb ;
89+ transition : all 0.2s ease;
90+ font-size : 13px ;
91+ line-height : 1.6 ;
92+ }
93+
94+ .log-item : hover {
95+ transform : translateX (4px );
96+ box-shadow : 0 2px 8px rgba (0 , 0 , 0 , 0.1 );
97+ }
98+
99+ .log-time {
100+ color : # 6c757d ;
101+ font-family : 'Consolas' , 'Monaco' , monospace;
102+ min-width : 100px ;
103+ margin-right : 12px ;
104+ font-weight : 500 ;
105+ }
106+
107+ .log-level {
108+ display : inline-block;
109+ padding : 2px 10px ;
110+ border-radius : 4px ;
111+ font-weight : 600 ;
112+ text-transform : uppercase;
113+ font-size : 11px ;
114+ min-width : 60px ;
115+ text-align : center;
116+ margin-right : 12px ;
117+ }
118+
119+ .level-debug {
120+ background : # 9ca3af ;
121+ color : white;
122+ }
123+
124+ .level-info {
125+ background : # 38bdf8 ;
126+ color : white;
127+ }
128+
129+ .level-mark {
130+ background : # a855f7 ;
131+ color : white;
132+ }
133+
134+ .level-warn {
135+ background : # facc15 ;
136+ color : # 422006 ;
137+ }
138+
139+ .level-error {
140+ background : # ef4444 ;
141+ color : white;
142+ }
143+
144+ .level-fatal {
145+ background : # 000 ;
146+ color : white;
147+ }
148+
149+ .log-message {
150+ flex : 1 ;
151+ word-break : break-all;
152+ color : # 212529 ;
153+ font-family : 'Consolas' , 'Monaco' , monospace;
154+ white-space : pre-wrap;
155+ }
156+
157+ /* 不同日志级别的边框颜色 */
158+ .log-debug {
159+ border-left-color : # d1d5db ;
160+ background : # f9fafb ;
161+ }
162+
163+ .log-info {
164+ border-left-color : # 93c5fd ;
165+ background : # e0f2fe ;
166+ }
167+
168+ .log-mark {
169+ border-left-color : # c4b5fd ;
170+ background : # f3e8ff ;
171+ }
172+
173+ .log-warn {
174+ border-left-color : # fcd34d ;
175+ background : # fef3c7 ;
176+ }
177+
178+ .log-error {
179+ border-left-color : # fca5a5 ;
180+ background : # fee2e2 ;
181+ }
182+
183+ .log-fatal {
184+ border-left-color : # 9ca3af ;
185+ background : # f5f5f5 ;
186+ }
187+
188+ .footer {
189+ background : # f8f9fa ;
190+ padding : 15px 30px ;
191+ text-align : center;
192+ color : # 6c757d ;
193+ font-size : 12px ;
194+ border-top : 1px solid # dee2e6 ;
195+ }
196+
197+ /* 滚动条样式 */
198+ .logs-container ::-webkit-scrollbar {
199+ width : 8px ;
200+ }
201+
202+ .logs-container ::-webkit-scrollbar-track {
203+ background : # f1f1f1 ;
204+ border-radius : 4px ;
205+ }
206+
207+ .logs-container ::-webkit-scrollbar-thumb {
208+ background : # 888 ;
209+ border-radius : 4px ;
210+ }
211+
212+ .logs-container ::-webkit-scrollbar-thumb : hover {
213+ background : # 555 ;
214+ }
0 commit comments