From 7c73df4015799e70ae7a68c8abae3e592f08395a Mon Sep 17 00:00:00 2001 From: jack <251108449@qq.com> Date: Thu, 16 Jul 2026 15:53:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/flexible.js | 5 ++--- public/index.html | 56 +++++++++++++++++++++++++++++++++++++++++++++- src/main.js | 4 ++++ 3 files changed, 61 insertions(+), 4 deletions(-) diff --git a/public/flexible.js b/public/flexible.js index 07feb52..1b684f8 100644 --- a/public/flexible.js +++ b/public/flexible.js @@ -1,6 +1,5 @@ (function flexible(window, document) { - // 修 2026-07-16：原本按视口比例缩放导致 1366 笔记本上整个页面被压成 71%。 - // 改成固定 37.5px (1920 设计稿原值)，让所有元素按设计稿尺寸渲染。 - // 副作用：1366 视口下会有横向滚动条，但内容不被压扁。 + // 2026-07-16: 改成固定 37.5px (1920 设计稿原值),不让 rem 跟着视口缩放 + // 避免按视口缩放 rem 导致的"先小后大"问题 document.documentElement.style.fontSize = '37.5px'; })(window, document); diff --git a/public/index.html b/public/index.html index eba7279..42bc6b8 100644 --- a/public/index.html +++ b/public/index.html @@ -19,13 +19,67 @@ body { margin: 0; } + /* 占位 spinner,vue 异步挂载期间显示,挂载完成 (app-mounted 事件) 后淡出 */ + #app-placeholder { + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + } + #app-placeholder .spinner { + width: 48px; + height: 48px; + border: 4px solid #e0e0e0; + border-top-color: #3f2b96; + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + @keyframes spin { to { transform: rotate(360deg); } } + /* vue 挂载后真实内容淡入 */ + .app-fadein { animation: appFadeIn 0.4s ease-out; } + @keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } } -
+
+ +
+ diff --git a/src/main.js b/src/main.js index 22233f7..645141e 100644 --- a/src/main.js +++ b/src/main.js @@ -30,5 +30,9 @@ Vue.config.productionTip = false new Vue({ router, + mounted() { + // 通知 index.html 的占位脚本:vue 真实内容已挂载完成 + document.dispatchEvent(new CustomEvent('app-mounted')); + }, render: h => h(App) }).$mount('#app')