From 54e81ac0ea016698f4a6ffb6e47896fdd838f75b Mon Sep 17 00:00:00 2001 From: root <13910913995@163.com> Date: Mon, 8 Sep 2025 08:50:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E7=AE=80=E6=98=93?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/devices/utils/config.ini | 2 +- frontend/src/renderer/src/style.css | 287 +++--------------- frontend/src/renderer/src/views/Detection.vue | 10 + 3 files changed, 54 insertions(+), 245 deletions(-) diff --git a/backend/devices/utils/config.ini b/backend/devices/utils/config.ini index 747069ab..89b6a562 100644 --- a/backend/devices/utils/config.ini +++ b/backend/devices/utils/config.ini @@ -34,7 +34,7 @@ synchronized_images_only = False [DEVICES] imu_device_type = real -imu_port = COM8 +imu_port = COM9 imu_baudrate = 9600 pressure_device_type = real pressure_use_mock = False diff --git a/frontend/src/renderer/src/style.css b/frontend/src/renderer/src/style.css index 67d667cc..5347ea2a 100644 --- a/frontend/src/renderer/src/style.css +++ b/frontend/src/renderer/src/style.css @@ -1,4 +1,5 @@ -/* 全局样式重置 */ +/* Global styles for BodyBalanceEvaluation frontend */ + * { margin: 0; padding: 0; @@ -6,72 +7,40 @@ } body { - font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif; - background-color: #f5f7fa; - color: #303133; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f5f5f5; + color: #333; line-height: 1.6; } -/* 滚动条样式 */ -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: #f1f1f1; - border-radius: 4px; -} - -::-webkit-scrollbar-thumb { - background: #c1c1c1; - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: #a8a8a8; -} - -/* 布局容器 */ -.app-container { - display: flex; +#app { + width: 100%; height: 100vh; - overflow: hidden; } -.sidebar { - width: 250px; - background: #304156; - color: white; - overflow-y: auto; - transition: width 0.3s; -} - -.sidebar.collapsed { - width: 64px; -} - -.main-content { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.header { - height: 60px; - border-bottom: 1px solid #e4e7ed; - display: flex; - align-items: center; - padding: 0 20px; - box-shadow: 0 1px 4px rgba(0,21,41,.08); -} - -.content { - flex: 1; +/* 通用样式 */ +.container { + max-width: 1200px; + margin: 0 auto; padding: 20px; - overflow-y: auto; - background: #f5f7fa; +} + +/* 按钮样式 */ +.btn { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-primary { + background-color: #409eff; + color: white; +} + +.btn-primary:hover { + background-color: #66b1ff; } /* 卡片样式 */ @@ -83,201 +52,31 @@ body { margin-bottom: 20px; } -.card-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - padding-bottom: 15px; -} - -.card-title { - font-size: 18px; - font-weight: 600; - color: #303133; -} - -/* 状态指示器 */ -.status-indicator { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - margin-right: 8px; -} - -.status-online { - background-color: #67c23a; -} - -.status-offline { - background-color: #f56c6c; -} - -.status-warning { - background-color: #e6a23c; -} - -/* 数据展示 */ -.data-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; - margin-bottom: 20px; -} - -.data-item { - background: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - text-align: center; -} - -.data-value { - font-size: 32px; - font-weight: bold; - color: #409eff; - margin-bottom: 8px; -} - -.data-label { - font-size: 14px; - color: #909399; -} - -/* 按钮组 */ -.button-group { - display: flex; - gap: 10px; - margin-bottom: 20px; -} - -/* 表单样式 */ -.form-container { - /* max-width: 600px; */ - margin: 0 auto; -} - -.form-row { - display: flex; - gap: 20px; - margin-bottom: 20px; -} - -.form-item { - flex: 1; -} - -/* 图表容器 */ -.chart-container { - height: 400px; - margin: 20px 0; -} - -/* 视频容器 */ -.video-container { - position: relative; - background: #000; - border-radius: 8px; - overflow: hidden; -} - -.video-player { - width: 100%; - height: 100%; - object-fit: cover; -} - -.video-controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(transparent, rgba(0,0,0,0.7)); - padding: 20px; - display: flex; - align-items: center; - gap: 15px; -} - /* 响应式设计 */ @media (max-width: 768px) { - .sidebar { - width: 100%; - position: fixed; - top: 0; - left: -100%; - z-index: 1000; - transition: left 0.3s; + .container { + padding: 10px; } - .sidebar.open { - left: 0; - } - - .main-content { - margin-left: 0; - } - - .data-grid { - grid-template-columns: 1fr; - } - - .form-row { - flex-direction: column; + .card { + padding: 15px; } } -/* 动画效果 */ -.fade-enter-active, -.fade-leave-active { - transition: opacity 0.3s; +/* 滚动条样式 */ +::-webkit-scrollbar { + width: 8px; } -.fade-enter-from, -.fade-leave-to { - opacity: 0; +::-webkit-scrollbar-track { + background: #f1f1f1; } -.slide-enter-active, -.slide-leave-active { - transition: transform 0.3s; +::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 4px; } -.slide-enter-from { - transform: translateX(-100%); -} - -.slide-leave-to { - transform: translateX(100%); -} - -/* 工具类 */ -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - -.mb-20 { - margin-bottom: 20px; -} - -.mt-20 { - margin-top: 20px; -} - -.p-20 { - padding: 20px; -} - -.full-width { - width: 100%; -} - -.full-height { - height: 100%; +::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; } \ No newline at end of file diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue index 8953e133..7a12bc8c 100644 --- a/frontend/src/renderer/src/views/Detection.vue +++ b/frontend/src/renderer/src/views/Detection.vue @@ -535,6 +535,16 @@ + + + + + + + + + +