diff --git a/inventory-web/index.html b/inventory-web/index.html index 62aed23..ce6dbe5 100644 --- a/inventory-web/index.html +++ b/inventory-web/index.html @@ -36,27 +36,41 @@ box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4) !important; } + /* 变成"独立悬浮窗口" */ #dify-chatbot-bubble-window { - width: 28rem !important; - height: 42rem !important; + /* 👇 解除原本锁定在右下角的限制,将其定位在屏幕中间偏左上 */ + top: 15vh !important; + left: 20vw !important; + bottom: auto !important; + right: auto !important; + + /* 设置初始宽高为半个屏幕左右 */ + width: 60vw !important; + height: 70vh !important; + border-radius: 12px !important; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; + box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2) !important; /* 增加超大弥散阴影,浮现感更强 */ - /* 👇 核心:开启拖拽改变大小功能 👇 */ + /* 👇 开启右下角拖拽,并强制留出 16px 的白边给拖拽手柄 */ resize: both !important; - overflow: hidden !important; /* 必须配合 overflow: hidden 才能生效 */ + overflow: hidden !important; + padding-bottom: 16px !important; + padding-right: 16px !important; + background-color: #ffffff !important; - /* 防止缩得太小或拉得太大导致页面崩坏 */ - min-width: 24rem !important; - min-height: 35rem !important; - max-width: 90vw !important; /* 最大不超过屏幕宽度的 90% */ - max-height: 90vh !important; /* 最大不超过屏幕高度的 90% */ + /* 极限尺寸防崩 */ + min-width: 300px !important; + min-height: 400px !important; + max-width: 95vw !important; + max-height: 90vh !important; } - /* 确保内部的网页容器 100% 填满外壳,丝滑缩放 */ + /* 内层 iframe 填满剩余空间,加上圆角更好看 */ #dify-chatbot-bubble-window iframe { width: 100% !important; height: 100% !important; + border: none !important; + border-radius: 8px !important; }