feat: 时间卡片适配移动端

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;
+}
+