/* ===================================================================== front.css — 已发布前台的独立页面样式通过自定义入口地址访问（如 http://127.0.0.1:5173/accept）注意：Vue 挂在 #app 上，所以这里必须匹配 #app （曾经写成 #front-app，导致整段布局规则失效、iframe 塌成 300px 宽）发布模式由 front-page.js 在 / 上加 .dsh-front 标记，这样这些全局规则就不会影响后台界面。 ===================================================================== */ html.dsh-front, body.dsh-front { height: 100%; margin: 0; /* 发布页不允许外层滚动：滚动交给 iframe 里的页面自己，否则外层一旦出现滚动条就会挤掉 iframe 十几像素宽度。（这里不能加 scrollbar-gutter: stable —— 在 overflow:hidden 上它会硬占一条槽） */ overflow: hidden; } body.dsh-front { background: #f5f7fb; } body.dsh-front #app { display: block; height: 100vh; overflow: hidden; } .front-wrap { display: flex; flex-direction: column; width: 100%; height: 100vh; overflow: hidden; } /* 页面主体（iframe 渲染发布内容） */ .front-frame { flex: 1 1 auto; display: block; width: 100%; min-width: 0; min-height: 0; height: calc(100vh - 34px); border: none; background: #fff; } .front-frame.is-full { height: 100vh; } /* 底部状态条 */ .front-bar { flex: none; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #ffffff; border-top: 1px solid #eef0f3; font-size: 12.5px; color: #909399; position: sticky; bottom: 0; z-index: 5; } .front-bar__brand { display: inline-flex; align-items: center; gap: 6px; color: #606266; font-weight: 600; } .front-bar__brand img { width: 16px; height: 16px; border-radius: 4px; } .front-bar__spacer { flex: 1; } .front-bar__path { font-family: Consolas, Monaco, monospace; color: #409eff; background: #ecf5ff; border-radius: 4px; padding: 2px 8px; } .front-bar__item { white-space: nowrap; } .front-bar__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #67c23a; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.18); } /* 未找到 / 未发布 */ .front-missing { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px; text-align: center; color: #606266; } .front-missing h1 { font-size: 22px; margin: 0; color: #303133; } .front-missing p { margin: 0; font-size: 14px; line-height: 1.9; color: #909399; max-width: 520px; } .front-missing__list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: 13px; } .front-missing__list a { color: #409eff; text-decoration: none; } .front-missing__list a:hover { text-decoration: underline; } /* 提交成功提示（前端页内轻提示容器） */ .front-toasts { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .front-toast { padding: 10px 16px; border-radius: 6px; background: #f0f9eb; border: 1px solid #e1f3d8; color: #529b2e; font-size: 13.5px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } .front-toast--error { background: #fef0f0; border-color: #fde2e2; color: #f56c6c; }