github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 09:38:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 简化css动画以降低gpu占用高问题

Browse Source
This commit is contained in:
shaw
2025-09-11 22:22:05 +08:00
parent 7c4feec5aa
commit 009f7c84f6
3 changed files with 69 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/admin-spa/src/assets/styles/components.css
View File

@@ -1,22 +1,24 @@
/* Glass效果 */
/* Glass效果 - 优化版 */
.glass {
background: var(--glass-color);
backdrop-filter: blur(20px);
/* 降低模糊强度 */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border-color);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.glass-strong {
background: var(--surface-color);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.3);
/* 降低模糊强度 */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
/* 标签按钮 */
@@ -216,13 +218,13 @@
/* 表单输入 */
.form-input {
background: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 8px 12px;
font-size: 14px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
transition: all 0.2s ease;
/* 移除模糊效果，使用纯色背景 */
}
.form-input:focus {
@@ -255,18 +257,18 @@
/* 模态框 */
.modal {
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.4);
/* 移除模糊，使用半透明背景 */
background: rgba(0, 0, 0, 0.6);
}
.modal-content {
background: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.98);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 10px 25px -5px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
/* 移除模糊效果 */
}
/* 弹窗滚动内容样式 */

40
web/admin-spa/src/assets/styles/global.css
View File

@@ -108,13 +108,13 @@ body::before {
.glass {
background: var(--glass-color);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* 降低模糊强度 */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border-color);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition:
background-color 0.3s ease,
border-color 0.3s ease;
@@ -129,13 +129,12 @@ body::before {
.glass-strong {
background: var(--glass-strong-color);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
/* 降低模糊强度 */
/* 移除模糊效果 */
border: 1px solid var(--border-color);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
transition:
background-color 0.3s ease,
border-color 0.3s ease;
@@ -269,8 +268,7 @@ body::before {
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* 移除模糊效果 */
}
.form-input:focus {
@@ -461,8 +459,7 @@ body::before {
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* 移除模糊效果 */
}
.form-input:focus {
@@ -511,8 +508,7 @@ body::before {
}
.modal {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* 移除模糊效果 */
background: var(--modal-bg);
transition: background-color 0.3s ease;
}
@@ -522,10 +518,9 @@ body::before {
border-radius: 24px;
border: 1px solid rgba(229, 231, 235, 0.8);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 10px 25px -5px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* 移除模糊效果 */
transition:
background-color 0.3s ease,
border-color 0.3s ease;
@@ -730,7 +725,12 @@ body::before {
}
.animate-pulse {
animation: pulse 2s infinite;
/* 移除无限脉冲动画，改为 hover 效果 */
transition: transform 0.2s ease;
}
.animate-pulse:hover {
animation: pulse 0.3s ease;
}
/* 用户菜单下拉框优化 */