style: Migrate global styles to scoped styles and update component st…

…yles
iFwu · Nov 1, 2024 · 1898e03 · 1898e03
1 parent 802fa22
commit 1898e03
Show file tree

Hide file tree

Showing 14 changed files with 622 additions and 647 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+### 2024-11-01
+- 优化 OpenCV.js 加载完成的判断条件
+- 优化全局样式，使用 scoped 样式
+
+### 2024-10-15
+- 使用 Vue 3 重构
+- 改用 `pinia` 管理状态
+- 优化代码结构
+
 ### 2024-10-08
 - 增加 更新日志 显示
 - 棋盘显示优化

diff --git a/src/App.vue b/src/App.vue
@@ -79,3 +79,99 @@
     processUploadedImage(img);
   };
 </script>
+
+<style scoped>
+  .app-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .content-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    box-sizing: border-box;
+  }
+
+  .left-column,
+  .right-column {
+    width: 100%;
+  }
+
+  .loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+
+  .loading-overlay p {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    color: #333;
+  }
+
+  /* 媒体查询 */
+  @media (max-width: 768px) {
+    .content-wrapper {
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .solution-section {
+      order: 1;
+    }
+    .upload-section {
+      order: 0;
+    }
+    .board-result-section {
+      order: 2;
+    }
+    .fen-section {
+      order: 3;
+    }
+    .depth-control-section {
+      order: 4;
+    }
+  }
+
+  @media (min-width: 769px) {
+    .content-wrapper {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .left-column {
+      width: calc(50% - 1rem);
+      position: sticky;
+      top: 1rem;
+      align-self: flex-start;
+    }
+
+    .right-column {
+      width: calc(50% - 1rem);
+    }
+
+    .solution-section {
+      height: calc(100vh - 2rem);
+      overflow-y: auto;
+      order: -1;
+    }
+  }
+</style>