Skip to content

Commit 7881cb8

Browse files
committed
perf: Optimize mobile style
1 parent b6381dc commit 7881cb8

File tree

2 files changed

+45
-48
lines changed

2 files changed

+45
-48
lines changed

src/app/elements/replay/guacamole/guacamole.component.scss

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -294,83 +294,78 @@ input[type="range"]:focus::-ms-fill-upper {
294294
min-height: 35px;
295295
padding: 8px;
296296
flex-wrap: wrap;
297-
gap: 8px;
298-
background: rgba(0, 0, 0, 0.8);
299-
300-
301-
button.btn {
302-
min-width: 40px;
303-
height: 40px;
304-
padding: 0;
305-
border-radius: 4px;
306-
background: rgba(255, 255, 255, 0.1);
307-
308-
i.fa {
309-
font-size: 16px;
310-
color: #fff;
311-
}
312-
313-
&:active {
314-
background: rgba(255, 255, 255, 0.2);
315-
}
316-
}
317297

298+
// 进度条容器
318299
span[class*="range"] {
319300
order: -1;
320301
width: 100%;
321-
padding: 8px 0;
302+
padding: 4px 0;
322303
}
323304

324-
#position, #duration {
325-
color: #fff;
326-
font-size: 12px;
305+
// 基础控制按钮和时间信息保持在同一行
306+
#play-pause,
307+
#position,
308+
#duration {
309+
margin: 4px;
327310
}
328311

329-
#user, #asset, #system_user, #date_start {
312+
// 资产信息换行显示
313+
#user,
314+
#asset,
315+
#system_user,
316+
#date_start,
317+
#download {
330318
width: 100%;
331319
padding: 4px 0 !important;
332-
color: rgba(255, 255, 255, 0.7);
333-
font-size: 12px;
334320
white-space: nowrap;
335321
overflow: hidden;
336322
text-overflow: ellipsis;
337323
}
338-
339-
#download {
340-
padding: 4px 0 !important;
341-
342-
a {
343-
color: #5AF;
344-
text-decoration: none;
345-
}
346-
}
347324
}
348325

349326
#display {
350-
height: calc(100vh - 180px);
327+
height: auto;
328+
min-height: 200px;
329+
padding: 0;
351330

331+
// 隐藏左侧命令列表
352332
as-split-area[order="0"] {
353333
display: none;
354334
}
355335

336+
// 视频区域自适应
356337
as-split-area[order="1"] {
357338
width: 100% !important;
358339
max-width: 100% !important;
359340
min-width: 100% !important;
360341
}
361342

343+
#screen {
344+
width: 100%;
345+
height: calc(100vh - 200px); // 减去控制栏和其他元素的高度
346+
display: flex;
347+
align-items: center;
348+
justify-content: center;
349+
350+
// 确保视频内容居中显示
351+
> * {
352+
max-width: 100%;
353+
max-height: 100%;
354+
margin: auto;
355+
}
356+
}
357+
358+
// 优化 seeking 提示
362359
.seek-notification {
363-
button#cancel-seek {
364-
padding: 8px 16px;
365-
border-radius: 4px;
366-
background: rgba(255, 255, 255, 0.1);
367-
color: #fff;
368-
border: none;
369-
font-size: 14px;
370-
371-
&:active {
372-
background: rgba(255, 255, 255, 0.2);
373-
}
360+
display: flex;
361+
align-items: center;
362+
justify-content: center;
363+
364+
p {
365+
display: flex;
366+
flex-direction: column;
367+
gap: 10px;
368+
align-items: center;
374369
}
375370
}
376371
}

src/app/services/connect-token/acl-dialog/acl-dialog.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,8 @@ export class ElementACLDialogComponent implements OnInit {
201201
const checkMethod = this.connectionToken.from_ticket_info.check_ticket_api.method.toLowerCase();
202202
const checkURL = this.connectionToken.from_ticket_info.check_ticket_api.url;
203203
const ticketAssignees = this.connectionToken.from_ticket_info.assignees.join(', ');
204+
205+
// @ts-ignore
204206
this.timerCheckTicket = setInterval(() => {
205207
this._http[checkMethod](checkURL).subscribe(
206208
async ticket => {

0 commit comments

Comments
 (0)