打包上传的2.0版本

zhandianxinxi/光谱数据监控/src/App.vue

@@ -1,34 +1,59 @@
-<!--App.vue-->
 <template>
-  <router-view></router-view>
+  <div class="app-container">
+    <main class="main-content">
+      <router-view></router-view>
+    </main>
+
+    <footer class="version-footer">
+      2.0版本 © 2026 Device Monitor
+    </footer>
+  </div>
 </template>
 
 <script setup>
-// App.vue 作为顶层入口，通常不需要写业务逻辑
-// 逻辑都分散在各个 views (Dashboard.vue 等) 中了
+// App.vue 保持简洁
 </script>
 
 <style>
 /* --- 全局样式 --- */
-
-/* 1. 去除浏览器默认的 8px 边距，确保页面贴边 */
 body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
-  /* 设置全局背景色，防止页面切换时出现白底闪烁 */
   background-color: #f5f7fa;
-  /* 统一字体，防止不同系统显示差异过大 */
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  overflow-x: hidden; /* 防止 iOS 橡皮筋效果 */
 }
 
-/* 2. 确保 #app 容器也是全屏的 */
 #app {
   width: 100%;
   min-height: 100vh;
 }
 
-/* 3. 如果你也使用了 Element Plus 的暗黑模式或其他全局配置，可以在这里补充 */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  max-width: 100vw; /* 强制不超过屏幕宽 */
+}
+
+/* ✅ 关键：内容区滚动控制 */
+.main-content {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: auto; /* 允许横向滚动 */
+  -webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
+}
+
+.version-footer {
+  text-align: center;
+  padding: 15px 0;
+  color: #c0c4cc;
+  font-size: 12px;
+  background-color: #f5f7fa;
+  flex-shrink: 0; /* 防止被压缩 */
+}
 </style>