修复后台首屏无样式闪烁并保留空白页兜底
变更项: - 恢复 app-container 初始 opacity 为 0,避免页面在样式未就绪时先渲染无样式内容 - 新增 DOMContentLoaded 延迟兜底脚本:若 Vue mounted 未执行则自动补加 loaded,避免整页空白 - 保持现有导航与业务逻辑不变,仅修复页面首屏加载体验
This commit is contained in:
@@ -63,7 +63,7 @@
|
|||||||
|
|
||||||
.app-container {
|
.app-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
opacity: 1;
|
opacity: 0;
|
||||||
transition: opacity .24s ease;
|
transition: opacity .24s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1203,6 +1203,20 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 页面显示兜底逻辑:
|
||||||
|
// 1) 正常情况下由 Vue mounted 时给 .app-container 增加 loaded,页面平滑显示;
|
||||||
|
// 2) 若脚本中途报错导致 mounted 未执行,这里在 DOM 就绪后做一次延迟兜底,避免“整页空白”。
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
var app = document.querySelector('.app-container');
|
||||||
|
if (app && !app.classList.contains('loaded')) {
|
||||||
|
app.classList.add('loaded');
|
||||||
|
}
|
||||||
|
}, 1200);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
{% block scripts %}{% endblock %}
|
{% block scripts %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user