From cdc9507209f8bcf1478eebf77c96d34c73aa8579 Mon Sep 17 00:00:00 2001 From: Yuhang Wu Date: Wed, 14 Oct 2026 09:42:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E5=8D=A1=E7=89=87=E5=92=8C?= =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=94=B9=E4=B8=BA=E9=80=8F=E6=98=8E=E7=A3=A8?= =?UTF-8?q?=E7=A0=82=E7=8E=BB=E7=92=83=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修改服务器、隧道、Frpc列表卡片及对应弹窗的背景为透明磨砂玻璃样式，同时调整弹窗高度限制为窗口的80%，优化滚动行为。 --- docs/Frpilot开发提示词.md | 6 ++++ src/assets/main.css | 52 +++++++++++++++++++++++++++- src/components/frp/FrpCard.vue | 13 +------ src/components/server/ServerCard.vue | 13 +------ src/components/tunnel/TunnelCard.vue | 13 +------ 5 files changed, 60 insertions(+), 37 deletions(-) diff --git a/docs/Frpilot开发提示词.md b/docs/Frpilot开发提示词.md index ea129db..bbbbb5b 100644 --- a/docs/Frpilot开发提示词.md +++ b/docs/Frpilot开发提示词.md @@ -49,6 +49,12 @@ Layout布局content区域的磨砂玻璃卡片圆角样式我要改动一下： 现在的弹窗里面内容比较多的时候会出现弹窗高度超出窗口高度，然后整个弹窗可以滚动，我想要改成弹窗高度不能超过窗口高度的80%，然后弹窗内容较多的时候，滚动仅限于弹窗里面可以进行滚动，按照我的要求修改一下 +#### 2.4 弹窗、卡片效果修改 + +- 服务器列表卡片、新增服务器弹窗的背景效果都改成透明磨砂玻璃效果 +- 隧道列表卡片、新建隧道弹窗的背景效果都改成透明磨砂玻璃效果 +- Frpc下载列表卡片的背景效果都改成透明磨砂玻璃效果 + ### 3. 功能开发 #### 3.1 开发服务器配置功能 diff --git a/src/assets/main.css b/src/assets/main.css index 36c392c..93d8564 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -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 { diff --git a/src/components/frp/FrpCard.vue b/src/components/frp/FrpCard.vue index 852abe7..cccb8c7 100644 --- a/src/components/frp/FrpCard.vue +++ b/src/components/frp/FrpCard.vue @@ -1,5 +1,5 @@