fix ui

src/App.vue

@@ -30,7 +30,7 @@
     </div>
 
     <!-- 结果显示区域 -->
-    <div class="dashboard fade-in">
+    <div v-if="report.hardware" class="dashboard fade-in">
       
       <!-- 1. 硬件概览 -->
       <div v-if="report.hardware" class="card summary slide-up">
@@ -316,32 +316,18 @@ onUnmounted(() => {
 });
 </script>
 
+<!-- 全局样式：解决滚动条问题 -->
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #f0f2f5; /* 背景色移到这里，铺满全屏 */
+  overflow-y: scroll; /* 始终显示滚动条轨道（防止跳动）或者设为 auto */
+}
+</style>
+
 <style scoped>
-/* 保持原有的样式，只增加动画 */
-/* ... (之前的样式代码省略，下面是新增的) ... */
-
-@keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.slide-up {
-  animation: slideUp 0.5s ease-out forwards;
-}
-
-.success-box {
-  margin-top: 10px;
-  padding: 12px 20px;
-  background-color: #eafaf1;
-  color: #27ae60;
-  border: 1px solid #d4efdf;
-  border-radius: 8px;
-  font-weight: 600;
-  text-align: center;
-  animation: slideUp 0.3s ease-out;
-}
-
-/* --- 必须包含原来的所有样式，为了完整性我把它们复制回来 --- */
+/* 基础布局 */
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -349,13 +335,19 @@ onUnmounted(() => {
   box-sizing: border-box; 
   font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   color: #2c3e50;
-  background-color: #f0f2f5;
-  min-height: 100vh;
+  /* 移除 min-height: 100vh 和背景色，让它自然伸缩，背景由 body 接管 */
+  /* 这样内容少时高度不够 100vh 就不会触发滚动条 */
 }
 
 .header { text-align: center; margin-bottom: 30px; }
-h1 { font-size: 2rem; margin-bottom: 8px; color: #2c3e50; letter-spacing: -0.5px; }
-.subtitle { color: #7f8c8d; font-size: 1rem; }
+h1 { 
+  font-size: 2rem; 
+  margin-bottom: 8px; 
+  margin-top: 0; /* 关键：防止margin合并导致的滚动条 */
+  color: #2c3e50; 
+  letter-spacing: -0.5px; 
+}
+.subtitle { color: #7f8c8d; font-size: 1rem; margin-top: 0; /* 同样防止margin合并 */ }
 
 .actions { display: flex; flex-direction: column; align-items: center; margin-bottom: 35px; gap: 15px; }
 .secondary-actions { display: flex; gap: 15px; }
@@ -444,4 +436,23 @@ h2 { font-size: 1.2rem; margin: 0; font-weight: 600; }
 .event-time { margin-left: auto; }
 .content-box { padding: 5px 0; }
 .main-text { font-weight: 500; color: #2c3e50; margin-bottom: 10px; }
+
+/* 动画部分 */
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.slide-up { animation: slideUp 0.5s ease-out forwards; }
+
+.success-box {
+  margin-top: 10px;
+  padding: 12px 20px;
+  background-color: #eafaf1;
+  color: #27ae60;
+  border: 1px solid #d4efdf;
+  border-radius: 8px;
+  font-weight: 600;
+  text-align: center;
+  animation: slideUp 0.3s ease-out;
+}
 </style>