SparksFly/Frpilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 将卡片和弹窗改为透明磨砂玻璃效果

Browse Source 
修改服务器、隧道、Frpc列表卡片及对应弹窗的背景为透明磨砂玻璃样式，同时调整弹窗高度限制为窗口的80%，优化滚动行为。
This commit is contained in:
Yuhang Wu
2026-10-14 09:42:53 +08:00
parent 58ac7931c8
commit cdc9507209
5 changed files with 60 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/main.css
+51 -1
View File
@@ -85,7 +85,39 @@ body {
}
/*
* 表单弹窗通用布局：
* 透明磨砂玻璃卡片（服务器 / 隧道 / Frpc 列表卡片）
* 叠加在 .glass-panel 之上，用 .ant-card 提升优先级，
* 覆盖 Antd 运行时注入的卡片背景与边框（需 !important 才能稳定生效）。
*/
.glass-card.ant-card {
border: 1px solid rgba(255, 255, 255, 0.5) !important;
background: rgba(255, 255, 255, 0.5) !important;
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08) !important;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.glass-card.ant-card:hover {
border-color: rgba(99, 102, 241, 0.45) !important;
background: rgba(255, 255, 255, 0.62) !important;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
}
.dark .glass-card.ant-card {
border-color: rgba(255, 255, 255, 0.1) !important;
background: rgba(30, 41, 59, 0.5) !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
}
.dark .glass-card.ant-card:hover {
border-color: rgba(129, 140, 248, 0.5) !important;
background: rgba(30, 41, 59, 0.62) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}
/*
* 表单弹窗通用布局 + 透明磨砂玻璃背景：
* 1. 弹窗整体高度不超过窗口的 80%；
* 2. 内容过多时仅弹窗主体（body）滚动，标题与底部按钮固定可见；
* 3. 只保留纵向滚动条，避免出现横向滚动条。
@@ -99,11 +131,29 @@ body {
flex-direction: column;
max-height: 80vh;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.62) !important;
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
}
.form-modal-wrap .ant-modal-header,
.form-modal-wrap .ant-modal-footer {
flex: 0 0 auto;
border-color: rgba(15, 23, 42, 0.06);
background: transparent !important;
}
.dark .form-modal-wrap .ant-modal-content {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(30, 41, 59, 0.62) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}
.dark .form-modal-wrap .ant-modal-header,
.dark .form-modal-wrap .ant-modal-footer {
border-color: rgba(255, 255, 255, 0.08);
}
.form-modal-wrap .ant-modal-body {