- App.vue:/embed/** 路由下给 body 置内联 min-width:0(内联优先级高于样式表),
离开嵌入路由 removeProperty 回落到原值;不动全局样式表,管理面零影响
- 根因:isEmbed 只旁路了组件壳(layout / base-wrap-main),管不到全局 CSS——
assets/styles/base/_base.scss:13 的 body{min-width:1200px} 让 740px 的 iframe
仍按 ≥1200px 排版,表现为可见区里所有元素整体右偏、右侧被裁
- 实测(截图 1910x873,DPR 1.25):.diagram-img 外框左边 1540px=1232 CSS,
按 1200 布局反推 1237;开始按钮中心 1749px=1399 CSS,按 1200 反推 1400;
按 740 布局应为 1000 / 370 —— 两条独立测算都落在 6px 内,1200 布局成立
This commit is contained in:
+12
-1
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import { ref, reactive, computed, onMounted, watch, onBeforeUnmount } from "vue";
|
||||
import layout from "./components/layout.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import config from "@/assets/config/host.config";
|
||||
@@ -12,6 +12,17 @@ const isLogin = ref(false);
|
||||
// 嵌入页旁路(/embed/**,iframe 免签嵌入):子应用 Drawer 里打开,带不了本应用 CAS 会话,
|
||||
// 也不该出现菜单壳。判定用路由前缀而非 query 标记——刷新/直链/分享均稳定
|
||||
const isEmbed = computed(() => router.currentRoute.value.path.startsWith("/embed/"));
|
||||
|
||||
// 嵌入页必须旁路全局 body 的 min-width(assets/styles/base/_base.scss 的 1200px):
|
||||
// 上面 isEmbed 只旁路了组件壳,管不到全局 CSS,740px 的 iframe 里页面仍按 ≥1200px 排版,
|
||||
// 表现为整体右偏 + 右侧被裁。用内联样式覆盖(优先级高于样式表),非嵌入态移除内联属性回落到原值
|
||||
function syncEmbedLayout(embed: boolean) {
|
||||
if (embed) document.body.style.minWidth = "0";
|
||||
else document.body.style.removeProperty("min-width");
|
||||
}
|
||||
watch(isEmbed, syncEmbedLayout, { immediate: true });
|
||||
onBeforeUnmount(() => syncEmbedLayout(false));
|
||||
|
||||
const layoutData = reactive({
|
||||
appName: "流程中心",
|
||||
baseHost: config.baseHost,
|
||||
|
||||
Reference in New Issue
Block a user