样式修改

2026-07-16 15:53:22 +08:00
parent f7cca2d5a7
commit 7c73df4015
3 changed files with 61 additions and 4 deletions
@@ -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);
@@ -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; } }
    </style>
  </head>
  <body>
    <noscript>
      <strong>WithMind 官网需要启用 JavaScript 才能正常运行，请开启后继续访问。</strong>
    </noscript>
-    <div id="app"></div>
+    <div id="app">
+      <div id="app-placeholder" aria-hidden="true">
+        <div class="spinner"></div>
+      </div>
+    </div>
+    <script>
+      // 等 main.js 里的 mounted() 钩子派发 app-mounted 事件,然后占位淡出 + 真实内容淡入
+      (function(){
+        var app = document.getElementById('app');
+        var placeholder = document.getElementById('app-placeholder');
+        if (!app || !placeholder) return;
+        var done = false;
+        function onMounted() {
+          if (done) return;
+          done = true;
+          document.removeEventListener('app-mounted', onMounted);
+          // 占位淡出
+          placeholder.style.transition = 'opacity 0.4s';
+          placeholder.style.opacity = '0';
+          // 真实内容淡入
+          app.classList.add('app-fadein');
+          // 0.45s 后移除占位 DOM
+          setTimeout(function(){
+            if (placeholder.parentNode) placeholder.parentNode.removeChild(placeholder);
+          }, 450);
+        }
+        document.addEventListener('app-mounted', onMounted);
+        // 兜底: 5 秒后强制收尾 (防止 vue 异常时占位永远停留)
+        setTimeout(onMounted, 5000);
+      })();
+    </script>
    <!-- built files will be auto injected -->
  </body>
 </html>
@@ -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')