feat: 时间卡片适配移动端

2025-03-11 14:00:58 +08:00
parent f86f004181
commit d22f39bae2
5 changed files with 197 additions and 40 deletions
--- a/frontend/src/components/ApiConfigPanel.vue
+++ b/frontend/src/components/ApiConfigPanel.vue
@@ -465,8 +465,9 @@ onMounted(() => {

 <style scoped>
 .api-config-section {
-  margin-bottom: 1.5rem;
+  margin-bottom: 2rem;
  position: relative;
+  padding-bottom: 10px;
 }

 .toggle-button {
@@ -487,12 +488,14 @@ onMounted(() => {
 }

 .api-config-card {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: linear-gradient(to bottom, rgba(240, 240, 245, 0.5), rgba(250, 250, 252, 0.8));
  padding: 16px;
  transition: all 0.3s ease;
+  overflow: visible;
+  min-height: 100px;
 }

 .api-info-alert {
@@ -680,13 +683,16 @@ onMounted(() => {

@media (max-width: 480px) {
  .api-config-section {
-    margin-bottom: 0.75rem;
+    margin-bottom: 1.5rem;
    width: 100%;
+    padding-bottom: 15px;
  }
  
  .api-config-card {
    padding: 0.5rem;
    border-radius: 0.625rem !important;
+    margin-bottom: 1rem;
+    min-height: 80px;
  }
  
  .api-buttons {
--- a/frontend/src/components/MarketTimeDisplay.vue
+++ b/frontend/src/components/MarketTimeDisplay.vue
@@ -250,6 +250,18 @@ onBeforeUnmount(() => {
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: linear-gradient(to bottom, rgba(250, 250, 252, 0.8), rgba(245, 245, 250, 0.5));
+  min-height: 200px; /* 确保卡片有最小高度 */
+}
+
+/* 确保网格布局在各种屏幕尺寸下正确显示 */
+:deep(.n-grid) {
+  justify-content: center;
+  width: 100%;
+}
+
+:deep(.n-grid-item) {
+  display: flex;
+  justify-content: center;
 }

 .time-block {
@@ -262,17 +274,24 @@ onBeforeUnmount(() => {
  transition: all 0.3s ease;
  height: 100%;
  box-sizing: border-box;
+  max-width: 100%; /* 确保不超过父容器宽度 */
 }

 .current-time-block {
  background-color: rgba(32, 128, 240, 0.05);
  border: 1px solid rgba(32, 128, 240, 0.1);
+  max-width: 360px; /* 限制当前时间块的最大宽度 */
+  width: 100%; /* 确保响应式 */
+  margin: 0 auto; /* 居中显示 */
 }

 .market-block {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
+  max-width: 360px; /* 限制市场块的最大宽度 */
+  width: 100%; /* 确保响应式 */
+  margin: 0 auto; /* 居中显示 */
 }

 .market-open-block {
@@ -305,6 +324,7 @@ onBeforeUnmount(() => {
  justify-content: center;
  min-height: 36px;
  width: 100%;
+  flex-wrap: wrap; /* 允许内容在必要时换行 */
 }

 .status-tag {
@@ -315,6 +335,7 @@ onBeforeUnmount(() => {
  align-items: center;
  justify-content: center;
  min-width: 100px;
+  max-width: 100%; /* 确保不超过父容器宽度 */
 }

 .market-status :deep(.n-tag__icon) {
@@ -336,6 +357,11 @@ onBeforeUnmount(() => {
  font-size: 0.875rem;
  color: var(--n-text-color-3);
  margin-top: 0.5rem;
+  width: 100%; /* 确保文本容器占满宽度 */
+  text-align: center; /* 文本居中 */
+  white-space: nowrap; /* 防止文本换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
 }

 /* 进度条样式 */
@@ -349,6 +375,7 @@ onBeforeUnmount(() => {
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(200, 200, 200, 0.4);
+  max-width: 100%; /* 确保不超过父容器宽度 */
 }

 .market-progress-bar {
@@ -398,6 +425,7 @@ onBeforeUnmount(() => {
  padding: 0 2px;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
+  box-sizing: border-box; /* 确保内边距不会增加宽度 */
 }

 /* 反向标记（休市状态） */
@@ -407,6 +435,10 @@ onBeforeUnmount(() => {

 .progress-marker {
  position: relative;
+  white-space: nowrap; /* 防止文本换行 */
+  max-width: 45%; /* 限制宽度，防止重叠 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
 }

@keyframes shimmer {
@@ -435,11 +467,12 @@ onBeforeUnmount(() => {
  .market-time-card {
    padding: 0.5rem;
    margin-bottom: 1rem;
+    min-height: 180px; /* 移动端下的最小高度 */
  }
  
  .time-block {
    padding: 0.625rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem; /* 增加底部外边距 */
  }
  
  .current-time {
@@ -452,8 +485,14 @@ onBeforeUnmount(() => {
  }
  
  .status-tag {
-    min-width: 120px;
-    height: 40px !important;
+    min-width: 100px; /* 减小移动端下的最小宽度 */
+    height: 36px !important;
+    font-size: 0.875rem; /* 减小字体大小 */
+  }
+  
+  .time-counter {
+    font-size: 0.75rem; /* 减小字体大小 */
+    margin-top: 0.375rem;
  }
  
  /* 增强视觉层次 */
@@ -486,10 +525,14 @@ onBeforeUnmount(() => {
  }
  
  .progress-markers {
-    top: -20px;
+    top: -18px; /* 调整位置 */
    font-size: 0.6875rem;
  }
  
+  .progress-marker {
+    max-width: 40%; /* 移动端下进一步限制宽度 */
+  }
+  
  .progress-marker.start::before,
  .progress-marker.end::before {
    top: -10px;
@@ -506,16 +549,26 @@ onBeforeUnmount(() => {
    background-color: rgba(90, 90, 90, 0.9);
    box-shadow: 0 0 4px rgba(90, 90, 90, 0.5);
  }
+  
+  .current-time-block {
+    max-width: 360px; /* 移动端下的最大宽度 */
+  }
+  
+  .market-block {
+    max-width: 360px; /* 移动端下的最大宽度 */
+  }
 }

 /* 小屏幕手机适配 */
@media (max-width: 480px) {
  .market-time-card {
    padding: 0.375rem;
+    min-height: 160px; /* 小屏幕下的最小高度 */
  }
  
  .time-block {
    padding: 0.5rem;
+    margin-bottom: 1rem; /* 增加小屏幕下的底部外边距 */
  }
  
  .current-time {
@@ -531,8 +584,9 @@ onBeforeUnmount(() => {
  }
  
  .status-tag {
-    min-width: 100px;
-    font-size: 0.875rem;
+    min-width: 90px; /* 进一步减小最小宽度 */
+    font-size: 0.8125rem;
+    padding: 0 12px !important; /* 减小内边距 */
  }
  
  /* 确保边框在小屏幕上清晰可见 */
@@ -547,10 +601,14 @@ onBeforeUnmount(() => {
  }
  
  .progress-markers {
-    top: -20px;
+    top: -16px; /* 调整位置 */
    font-size: 0.625rem;
  }
  
+  .progress-marker {
+    max-width: 35%; /* 小屏幕下进一步限制宽度 */
+  }
+  
  .progress-marker.start::before,
  .progress-marker.end::before {
    top: -8px;
@@ -565,5 +623,19 @@ onBeforeUnmount(() => {
  .progress-open, .progress-closed {
    border-width: 0;
  }
+  
+  .current-time-block {
+    max-width: 300px; /* 小屏幕下的最大宽度 */
+  }
+  
+  .market-block {
+    max-width: 300px; /* 小屏幕下的最大宽度 */
+  }
+}
+
+/* 确保API配置面板有足够的空间 */
+.n-collapse {
+  margin-bottom: 16px; /* 添加底部间距 */
+  padding-bottom: 8px; /* 增加内边距底部 */
 }
 </style>
--- a/frontend/src/components/SafeAreaBottom.vue
+++ b/frontend/src/components/SafeAreaBottom.vue
@@ -1,24 +0,0 @@
-<template>
-  <div class="safe-area-bottom"></div>
-</template>
-
-<script setup lang="ts">
-// 底部安全区域组件，用于解决底部背景显示问题
-</script>
-
-<style scoped>
-.safe-area-bottom {
-  width: 100%;
-  height: env(safe-area-inset-bottom, 0);
-  min-height: 10px; /* 确保在不支持env()的浏览器上也有一定的空间 */
-  background-color: inherit;
-  position: relative;
-  z-index: 1;
-}
-
-@media (max-width: 768px) {
-  .safe-area-bottom {
-    min-height: 20px;
-  }
-}
-</style> 
--- a/frontend/src/components/StockAnalysisApp.vue
+++ b/frontend/src/components/StockAnalysisApp.vue
@@ -143,9 +143,7 @@
            </n-grid-item>
          </n-grid>
        </n-card>
-        
-        <!-- 底部安全区域 -->
-        <SafeAreaBottom />
+
      </n-layout-content>
    </n-layout>
  </div>
@@ -182,7 +180,6 @@ import MarketTimeDisplay from './MarketTimeDisplay.vue';
 import ApiConfigPanel from './ApiConfigPanel.vue';
 import StockSearch from './StockSearch.vue';
 import StockCard from './StockCard.vue';
-import SafeAreaBottom from './SafeAreaBottom.vue';
 import AnnouncementBanner from './AnnouncementBanner.vue';

 import { apiService } from '@/services/api';
@@ -974,6 +971,8 @@ function handleAnnouncementClose() {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
+  padding-bottom: 20px; /* 增加底部内边距 */
+  box-sizing: border-box;
 }

 .main-layout {
@@ -981,6 +980,7 @@ function handleAnnouncementClose() {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
+  min-height: calc(100vh - 20px); /* 确保至少占满视口高度减去底部空间 */
 }

 .main-content {
@@ -1084,6 +1084,10 @@ function handleAnnouncementClose() {
    width: 100% !important;
    max-width: 100% !important;
  }
+  
+  .app-container {
+    padding-bottom: 30px; /* 增加移动端底部内边距 */
+  }
 }

 /* 小屏幕手机适配 */
@@ -1116,5 +1120,9 @@ function handleAnnouncementClose() {
  :deep(.n-dropdown-menu) {
    max-width: 90vw;
  }
+  
+  .app-container {
+    padding-bottom: 40px; /* 增加小屏幕底部内边距 */
+  }
 }
 </style>
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -24,10 +24,9 @@ a:hover {

 body {
  margin: 0;
-  display: flex;
-  place-items: center;
  min-width: 320px;
  min-height: 100vh;
+  background-color: #f5f5f7;
 }

 h1 {
@@ -63,6 +62,8 @@ button:focus-visible {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
+  width: 100%;
+  box-sizing: border-box;
  text-align: center;
 }

@@ -113,3 +114,97 @@ input::-moz-focus-inner {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
 }
+/* 组件宽度统一规范 */
+.component-container {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+.form-container {
+  width: 100%;
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+.control-container {
+  width: 100%;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  body {
+    background-color: #f5f5f7;
+    overflow-x: hidden;
+    padding: 0;
+    margin: 0;
+  }
+  
+  #app {
+    width: 100%;
+    overflow-x: hidden;
+    padding: 1rem;
+    margin: 0 auto;
+  }
+  
+  .component-container {
+    width: calc(100% - 20px);
+    max-width: 560px;
+  }
+  
+  .form-container {
+    width: calc(100% - 20px);
+    max-width: 480px;
+  }
+  
+  .control-container {
+    width: calc(100% - 16px);
+    max-width: 440px;
+  }
+}
+
+@media (max-width: 480px) {
+  #app {
+    padding: 0.5rem;
+  }
+  
+  .component-container {
+    width: calc(100% - 16px);
+    max-width: 360px;
+  }
+  
+  .form-container {
+    width: calc(100% - 12px);
+    max-width: 320px;
+  }
+  
+  .control-container {
+    width: calc(100% - 8px);
+    max-width: 300px;
+  }
+}
+
+/* 表单控件统一样式 */
+.uniform-input,
+.uniform-select,
+.uniform-button {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+  justify-content: center;
+}
+