diff --git a/backend/update_lottery.py b/backend/update_lottery.py
index 25b117d..c0b439d 100644
--- a/backend/update_lottery.py
+++ b/backend/update_lottery.py
@@ -334,21 +334,33 @@ class LotteryUpdater:
                 return None, None
         # 大乐透规则
         else:
-            # 中奖规则（简化版，实际可查官方）
+            # 一等奖：投注号码与当期开奖号码全部相同(顺序不限，下同)，即中奖；
             if red_hit == 5 and blue_hit == 2:
                 return '一等奖', 10000000
+            # 二等奖：投注号码与当期开奖号码中的五个前区号码及任意一个后区号码相同，即中奖；
             elif red_hit == 5 and blue_hit == 1:
                 return '二等奖', 5000000
+            # 三等奖：投注号码与当期开奖号码中的五个前区号码相同，即中奖；
             elif red_hit == 5 and blue_hit == 0:
                 return '三等奖', 3000
+            # 四等奖：投注号码与当期开奖号码中的任意四个前区号码及两个后区号码相同，即中奖；
             elif red_hit == 4 and blue_hit == 2:
                 return '四等奖', 200
+            # 五等奖：投注号码与当期开奖号码中的任意四个前区号码及任意一个后区号码相同，即中奖；
             elif red_hit == 4 and blue_hit == 1:
                 return '五等奖', 10
+            # 六等奖：投注号码与当期开奖号码中的任意三个前区号码及两个后区号码相同，即中奖；
             elif red_hit == 3 and blue_hit == 2:
-                return '五等奖', 10
-            elif (red_hit == 2 and blue_hit == 2) or (red_hit == 1 and blue_hit == 2) or (red_hit == 0 and blue_hit == 2):
                 return '六等奖', 5
+            # 七等奖：投注号码与当期开奖号码中的任意四个前区号码相同，即中奖；
+            elif red_hit == 4 and blue_hit == 0:
+                return '七等奖', 5
+            # 八等奖：投注号码与当期开奖号码中的任意三个前区号码及任意一个后区号码相同，或者任意两个前区号码及两个后区号码相同，即中奖；
+            elif (red_hit == 3 and blue_hit == 1) or (red_hit == 2 and blue_hit == 2):
+                return '八等奖', 5
+            # 九等奖：投注号码与当期开奖号码中的任意三个前区号码相同，或者任意一个前区号码及两个后区号码相同，或者任意两个前区号码及任意一个后区号码相同，或者两个后区号码相同，即中奖。
+            elif (red_hit == 3 and blue_hit == 0) or (red_hit == 1 and blue_hit == 2) or (red_hit == 2 and blue_hit == 1) or (red_hit == 0 and blue_hit == 2):
+                return '九等奖', 5
             else:
                 return None, None
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 31f8794..b517a1a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,15 +2,17 @@
   <div>
     <div class="nav-bar">
       <div class="nav-logo">好运早餐铺</div>
-      <ul class="nav-menu">
-        <li class="nav-item" :class="{active: $route.path === '/'}" @click="handleNav('/')">早点摊</li>
-        <li class="nav-item" :class="{active: $route.path === '/ssq'}" @click="handleNav('/ssq')">红蓝球煎饼</li>
-        <li class="nav-item" :class="{active: $route.path === '/dlt'}" @click="handleNav('/dlt')">大乐斗豆浆</li>
-        <li class="nav-item" :class="{active: $route.path === '/statistics'}" @click="handleNav('/statistics')">数据小菜</li>
-        <li class="nav-item" :class="{active: $route.path === '/advanced-analysis'}" @click="handleNav('/advanced-analysis')">老板推荐</li>
-        <li class="nav-item" :class="{active: $route.path === '/prediction'}" @click="handleNav('/prediction')">灵感早点</li>
-        <li class="nav-item" :class="{active: $route.path === '/number-generator'}" @click="handleNav('/number-generator')">一键下单</li>
-      </ul>
+      <div class="nav-tabs-wrapper">
+        <ul class="nav-tabs">
+          <li class="nav-tab" :class="{active: $route.path === '/'}" @click="handleNav('/')">早点摊</li>
+          <li class="nav-tab" :class="{active: $route.path === '/ssq'}" @click="handleNav('/ssq')">红蓝球煎饼</li>
+          <li class="nav-tab" :class="{active: $route.path === '/dlt'}" @click="handleNav('/dlt')">大乐斗豆浆</li>
+          <li class="nav-tab" :class="{active: $route.path === '/statistics'}" @click="handleNav('/statistics')">数据小菜</li>
+          <li class="nav-tab" :class="{active: $route.path === '/advanced-analysis'}" @click="handleNav('/advanced-analysis')">老板推荐</li>
+          <li class="nav-tab" :class="{active: $route.path === '/prediction'}" @click="handleNav('/prediction')">灵感早点</li>
+          <li class="nav-tab" :class="{active: $route.path === '/number-generator'}" @click="handleNav('/number-generator')">一键下单</li>
+        </ul>
+      </div>
     </div>
     <router-view />
   </div>
@@ -28,7 +30,6 @@ export default {
 </script>
 
 <style>
-/* 只保留必要的全局样式，去除旧的el-menu等样式 */
 .layout-container {
   min-height: 100vh;
   display: flex;
@@ -52,27 +53,136 @@ export default {
   color: #909399;
 }
 
+.nav-bar {
+  background: #f7ecd7;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-logo {
+  font-size: 22px;
+  font-weight: bold;
+  color: #6B4F2B;
+  padding: 16px 16px 0 16px;
+  background: #f7ecd7;
+}
+
+.nav-tabs-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  background: #f7ecd7;
+  box-sizing: border-box;
+  border-bottom: 1.5px solid #e9d8a6;
+  margin-top: 8px;
+}
+
+.nav-tabs {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  min-width: max-content;
+  width: fit-content;
+  margin: 0;
+  padding: 0 8px;
+  list-style: none;
+}
+
+.nav-tab {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  font-size: 16px;
+  padding: 12px 18px 10px 18px;
+  margin: 0 2px;
+  background: transparent;
+  color: #6B4F2B;
+  border: none;
+  border-bottom: 2.5px solid transparent;
+  transition: color 0.18s, border-bottom 0.18s;
+  cursor: pointer;
+  outline: none;
+}
+
+.nav-tab.active,
+.nav-tab:active {
+  color: #4B2E13;
+  font-weight: bold;
+  border-bottom: 2.5px solid #a7c957;
+  background: #f9e3e3;
+}
+
+.nav-tabs::-webkit-scrollbar {
+  height: 4px;
+  background: transparent;
+}
+
+.nav-tabs::-webkit-scrollbar-thumb {
+  background: #e9d8a6;
+  border-radius: 2px;
+}
+
 @media screen and (max-width: 768px) {
   .nav-bar {
-    flex-direction: column;
-    padding: 0 8px;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    background: #f7ecd7;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
   }
   .nav-logo {
     font-size: 22px;
-    margin-bottom: 8px;
+    font-weight: bold;
+    color: #6B4F2B;
+    padding: 16px 16px 0 16px;
+    background: #f7ecd7;
   }
-  .nav-menu {
-    min-width: 0;
-    max-width: 100%;
-    padding: 0 8px;
-    height: 48px;
+  .nav-tabs-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    background: #f7ecd7;
+    box-sizing: border-box;
+    border-bottom: 1.5px solid #e9d8a6;
+    margin-top: 8px;
   }
-  .nav-item {
-    min-width: 60px;
-    font-size: 15px;
+  .nav-tabs {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    min-width: max-content;
+    width: fit-content;
+    margin: 0;
     padding: 0 8px;
+    list-style: none;
+  }
+  .nav-tab {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    font-size: 16px;
+    padding: 12px 18px 10px 18px;
+    margin: 0 2px;
+    background: transparent;
+    color: #6B4F2B;
+    border: none;
+    border-bottom: 2.5px solid transparent;
+    transition: color 0.18s, border-bottom 0.18s;
+    cursor: pointer;
+    outline: none;
+  }
+  .nav-tab.active,
+  .nav-tab:active {
+    color: #4B2E13;
+    font-weight: bold;
+    border-bottom: 2.5px solid #a7c957;
+    background: #f9e3e3;
+  }
+  .nav-tabs::-webkit-scrollbar {
+    height: 4px;
+    background: transparent;
+  }
+  .nav-tabs::-webkit-scrollbar-thumb {
+    background: #e9d8a6;
+    border-radius: 2px;
   }
 }
 </style> 
\ No newline at end of file
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 9302559..896d48d 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -239,19 +239,64 @@ html, body {
 }
 
 @media screen and (max-width: 768px) {
-  .el-col {
+  /* 红蓝球煎饼页面专项修正 */
+  .el-table, .el-table__body, .el-table__header {
+    display: block !important;
     width: 100% !important;
+    overflow-x: auto !important;
+    box-sizing: border-box !important;
   }
-  
-  .el-form-item__label {
-    float: none;
-    display: block;
-    text-align: left;
-    padding: 0 0 8px;
+  .el-table th, .el-table td {
+    white-space: normal !important;
+    word-break: break-all !important;
+    padding: 8px 4px !important;
+    font-size: 14px !important;
   }
-  
-  .el-form-item__content {
-    margin-left: 0 !important;
+  .el-table .el-button,
+  .el-table .button-group {
+    max-width: 100% !important;
+    flex-wrap: wrap !important;
+    white-space: normal !important;
+  }
+  .el-card, .el-table__wrapper {
+    max-width: 100vw !important;
+    overflow-x: auto !important;
+    box-sizing: border-box !important;
+  }
+  .el-form, .el-form-item, .el-form-item__content {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    flex-wrap: wrap !important;
+  }
+  .el-input, .el-select, .el-date-editor, .el-button {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  /* 新鲜出锅一行一栏，仅影响该区域 */
+  .single-col-row {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  .single-col-row > .el-col {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+    float: none !important;
+    box-sizing: border-box !important;
+  }
+  /* 出锅记录表格横向可滚动，内容完整显示 */
+  .el-table__wrapper, .el-card__body {
+    overflow-x: auto !important;
+    padding-bottom: 0 !important;
+  }
+  .el-table {
+    min-width: 600px !important;
+    width: max-content !important;
+  }
+  .el-table th, .el-table td {
+    white-space: nowrap !important;
+    padding: 8px 8px !important;
+    font-size: 14px !important;
   }
 }
 
@@ -548,4 +593,161 @@ body, #app {
   color: #4B2E13;
   font-weight: bold;
   box-shadow: 0 2px 8px 0 rgba(249,227,227,0.08);
+}
+
+/* ======= 移动端适配样式合并自mobile.css ======= */
+@media screen and (max-width: 480px) {
+  :root { --mobile-padding: 12px !important; --mobile-margin: 8px !important; }
+  .nav-logo { font-size: 20px !important; }
+  .nav-item { font-size: 12px !important; padding: 6px 8px !important; min-width: 50px !important; }
+  .ball { width: 20px !important; height: 20px !important; font-size: 10px !important; }
+  .chart { height: 200px !important; }
+  .el-button { font-size: 12px !important; padding: 8px 16px !important; }
+  .generate-btn, .copy-all-btn { font-size: 14px !important; padding: 12px !important; }
+  .el-table { font-size: 10px !important; }
+  .el-table th, .el-table td { padding: 6px 2px !important; }
+}
+
+@media screen and (max-width: 768px) and (orientation: landscape) {
+  .nav-bar { flex-direction: row !important; height: 60px !important; }
+  .nav-logo { margin-bottom: 0 !important; margin-right: 20px !important; }
+  .nav-menu { height: 48px !important; }
+  .chart { height: 200px !important; }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .el-button, .nav-item, .tab-btn { min-height: 44px !important; min-width: 44px !important; }
+  .el-button { padding: 12px 20px !important; }
+  .nav-item { padding: 10px 16px !important; }
+  .tab-btn { padding: 10px 16px !important; }
+  .el-button:active, .nav-item:active, .tab-btn:active { transform: scale(0.95) !important; transition: transform 0.1s !important; }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2) {
+  .ball { border: 1px solid rgba(0, 0, 0, 0.1) !important; }
+  .el-card { border: 0.5px solid #E9D8A6 !important; }
+}
+
+@media (prefers-color-scheme: dark) {
+  /* 如果系统支持深色模式，可以在这里添加深色主题样式 */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
+}
+
+/* 早点补货区域整体布局优化 */
+.update-card .card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 24px;
+  padding-bottom: 0;
+}
+
+.update-card .card-header > span {
+  font-size: 20px;
+  font-weight: bold;
+  color: #6B4F2B;
+  min-width: 100px;
+  margin-top: 6px;
+}
+
+.update-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: flex-start;
+  width: 100%;
+  margin-top: 0;
+}
+
+.update-buttons .el-button {
+  width: 180px;
+  font-size: 16px;
+  font-weight: bold;
+  border-radius: 24px;
+  background: linear-gradient(90deg, #f7e7d5 0%, #f9e3e3 100%);
+  color: #6B4F2B;
+  box-shadow: 0 2px 8px 0 rgba(233, 216, 166, 0.10);
+  margin: 0;
+  transition: background 0.2s, color 0.2s;
+  text-align: left;
+  padding-left: 18px;
+}
+
+.update-buttons .el-button:active {
+  background: #f9e3e3;
+  color: #4B2E13;
+}
+
+@media screen and (max-width: 768px) {
+  .update-card .card-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    padding-bottom: 0;
+  }
+  .update-buttons {
+    width: 100%;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .update-buttons .el-button {
+    width: 100%;
+    font-size: 16px;
+    padding-left: 12px;
+  }
+}
+
+/* 彻底去除el-card底部空白和多余圆角 */
+.update-card,
+.update-card .el-card,
+.update-card .el-card__body {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+  border-radius: 24px !important;
+}
+
+.update-card .el-card__body {
+  min-height: 0 !important;
+  height: auto !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: flex-start !important;
+}
+
+.update-card .el-row,
+.update-card .el-col {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.update-card .el-card__body > :last-child {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+@media screen and (max-width: 768px) {
+  .update-card,
+  .update-card .el-card,
+  .update-card .el-card__body {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+
+.update-message {
+  min-height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.update-card .el-card__body > :last-child {
+  margin-bottom: 0 !important;
+}
+
+/* 如果el-alert未显示，彻底不占位 */
+.update-message:empty {
+  display: none !important;
 } 
\ No newline at end of file
diff --git a/frontend/src/assets/mobile.css b/frontend/src/assets/mobile.css
new file mode 100644
index 0000000..866cfa9
--- /dev/null
+++ b/frontend/src/assets/mobile.css
@@ -0,0 +1,560 @@
+/* 移动端专用样式文件 */
+/* 移动端断点定义 */
+:root {
+  --mobile-breakpoint: 768px;
+  --tablet-breakpoint: 1024px;
+  --mobile-padding: 16px;
+  --mobile-margin: 12px;
+}
+
+/* 移动端基础样式重置 */
+@media screen and (max-width: 768px) {
+  html, body {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  /* 导航栏移动端适配 */
+  .nav-bar {
+    flex-direction: column;
+    padding: 0 var(--mobile-padding);
+    margin-top: 16px;
+    margin-bottom: 16px;
+    height: auto;
+  }
+
+  .nav-logo {
+    font-size: 24px;
+    margin-bottom: 12px;
+    margin-right: 0;
+    text-align: center;
+  }
+
+  .nav-menu {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: thin;
+    scrollbar-color: #E9D8A6 #fff;
+  }
+
+  .nav-item {
+    white-space: nowrap;
+    font-size: 13px;
+    padding: 8px 6px;
+    min-width: 0;
+    flex: 1 1 auto;
+    text-align: center;
+  }
+
+  /* 卡片移动端适配 */
+  .el-card {
+    margin-bottom: var(--mobile-margin);
+    border-radius: 16px;
+  }
+
+  .el-card__header {
+    padding: 16px 20px;
+    font-size: 16px;
+  }
+
+  .el-card__body {
+    padding: 16px 20px;
+  }
+
+  /* 按钮移动端适配 */
+  .el-button {
+    border-radius: 20px;
+    font-size: 14px;
+    padding: 10px 24px;
+    min-width: 80px;
+  }
+
+  .update-buttons {
+    gap: 6px;
+  }
+
+  .update-buttons .el-button {
+    padding: 8px 0;
+    font-size: 14px;
+    min-width: 0;
+    width: 100%;
+    border-radius: 16px;
+  }
+
+  .update-card .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  /* 表格移动端适配 */
+  .el-table {
+    font-size: 12px;
+    border-radius: 12px;
+  }
+
+  .el-table th,
+  .el-table td {
+    padding: 8px 4px;
+  }
+
+  /* 表格内容自动换行 */
+  .el-table .cell {
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 操作按钮组移动端适配 */
+  .button-group {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .button-group .el-button {
+    width: 100%;
+    margin-bottom: 4px;
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+
+  /* 表单移动端适配 */
+  .el-form-item {
+    margin-bottom: 16px;
+  }
+
+  .el-form-item__label {
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  .el-form-item__content {
+    margin-top: 8px;
+  }
+
+  .el-input,
+  .el-select,
+  .el-textarea {
+    font-size: 14px;
+  }
+
+  /* 分页移动端适配 */
+  .el-pagination {
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .el-pagination .el-pager li {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+  }
+
+  /* 标签页移动端适配 */
+  .el-tabs__item {
+    font-size: 14px;
+    padding: 0 12px;
+  }
+
+  /* 对话框移动端适配 */
+  .el-dialog {
+    width: 90% !important;
+    margin: 5vh auto !important;
+    border-radius: 16px;
+  }
+
+  .el-dialog__header {
+    padding: 16px 20px;
+  }
+
+  .el-dialog__body {
+    padding: 16px 20px;
+  }
+
+  .el-dialog__footer {
+    padding: 16px 20px;
+  }
+
+  /* 图表移动端适配 */
+  .chart {
+    height: 300px !important;
+    min-height: 250px;
+  }
+
+  .chart-card {
+    margin-bottom: var(--mobile-margin);
+  }
+
+  /* 号码球移动端适配 */
+  .ball {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    margin: 0 2px;
+  }
+
+  .numbers {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .red-balls,
+  .blue-balls,
+  .front-balls,
+  .back-balls {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  /* 快速操作按钮移动端适配 */
+  .quick-btn {
+    font-size: 14px;
+    padding: 12px 0;
+    margin-bottom: 12px;
+  }
+
+  /* 布局移动端适配 */
+  .el-row {
+    flex-direction: column !important;
+  }
+
+  .el-col {
+    width: 100% !important;
+    max-width: 100% !important;
+    flex: 0 0 100% !important;
+  }
+
+  .data-card {
+    margin-bottom: 16px;
+  }
+
+  /* 卡片头部移动端适配 */
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  /* 状态信息移动端适配 */
+  .status-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    margin-bottom: 12px;
+  }
+
+  .status-label {
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+
+  .status-value,
+  .status-time {
+    font-size: 12px;
+  }
+
+  /* 订单信息移动端适配 */
+  .order-info {
+    text-align: center;
+    margin-bottom: 16px;
+  }
+
+  .order-time,
+  .order-batch {
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  /* 号码显示移动端适配 */
+  .number-display {
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+
+  .number-display.multi {
+    flex-direction: column;
+  }
+
+  .order-index {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  .recommend-type {
+    font-size: 12px;
+    margin-top: 8px;
+  }
+
+  /* 历史记录移动端适配 */
+  .history-header {
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .history-tabs {
+    display: flex;
+    gap: 8px;
+  }
+
+  .tab-btn {
+    flex: 1;
+    font-size: 14px;
+    padding: 8px 12px;
+  }
+
+  .check-win-btn {
+    width: 100%;
+    font-size: 14px;
+    padding: 10px;
+  }
+
+  .history-group {
+    margin-bottom: 20px;
+  }
+
+  .group-header {
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 12px;
+    font-size: 12px;
+  }
+
+  .group-number-item {
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    margin-bottom: 8px;
+  }
+
+  .win-info {
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .win-level {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+
+  .win-amount {
+    display: block;
+    color: #67c23a;
+  }
+
+  /* 生成按钮移动端适配 */
+  .generate-btn,
+  .copy-all-btn {
+    width: 100%;
+    font-size: 16px;
+    padding: 14px;
+    margin-bottom: 12px;
+    border-radius: 20px;
+  }
+
+  /* 高级分析页面移动端适配 */
+  .analysis-container {
+    padding: var(--mobile-padding);
+  }
+
+  .analysis-tabs {
+    margin-bottom: 16px;
+  }
+
+  .analysis-chart {
+    height: 250px;
+    margin-bottom: 16px;
+  }
+
+  .analysis-summary {
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  /* 预测页面移动端适配 */
+  .prediction-container {
+    padding: var(--mobile-padding);
+  }
+
+  .prediction-form {
+    margin-bottom: 20px;
+  }
+
+  .prediction-result {
+    margin-top: 16px;
+  }
+
+  .prediction-numbers {
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  /* 工具提示移动端适配 */
+  .el-tooltip__popper {
+    max-width: 200px;
+    font-size: 12px;
+  }
+
+  /* 加载状态移动端适配 */
+  .el-loading-mask {
+    border-radius: 16px;
+  }
+
+  /* 消息提示移动端适配 */
+  .el-message {
+    min-width: 200px;
+    max-width: 90%;
+    font-size: 14px;
+  }
+
+  /* 确认框移动端适配 */
+  .el-message-box {
+    width: 90% !important;
+    border-radius: 16px;
+  }
+
+  .el-message-box__header {
+    padding: 16px 20px;
+  }
+
+  .el-message-box__content {
+    padding: 16px 20px;
+  }
+
+  .el-message-box__btns {
+    padding: 16px 20px;
+  }
+}
+
+/* 超小屏幕适配 (小于480px) */
+@media screen and (max-width: 480px) {
+  :root {
+    --mobile-padding: 12px;
+    --mobile-margin: 8px;
+  }
+
+  .nav-logo {
+    font-size: 20px;
+  }
+
+  .nav-item {
+    font-size: 12px;
+    padding: 6px 8px;
+    min-width: 50px;
+  }
+
+  .ball {
+    width: 20px;
+    height: 20px;
+    font-size: 10px;
+  }
+
+  .chart {
+    height: 200px !important;
+  }
+
+  .el-button {
+    font-size: 12px;
+    padding: 8px 16px;
+  }
+
+  .generate-btn,
+  .copy-all-btn {
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  .el-table {
+    font-size: 10px;
+  }
+
+  .el-table th,
+  .el-table td {
+    padding: 6px 2px;
+  }
+}
+
+/* 横屏模式适配 */
+@media screen and (max-width: 768px) and (orientation: landscape) {
+  .nav-bar {
+    flex-direction: row;
+    height: 60px;
+  }
+
+  .nav-logo {
+    margin-bottom: 0;
+    margin-right: 20px;
+  }
+
+  .nav-menu {
+    height: 48px;
+  }
+
+  .chart {
+    height: 200px !important;
+  }
+}
+
+/* 触摸优化 */
+@media (hover: none) and (pointer: coarse) {
+  .el-button,
+  .nav-item,
+  .tab-btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  .el-button {
+    padding: 12px 20px;
+  }
+
+  .nav-item {
+    padding: 10px 16px;
+  }
+
+  .tab-btn {
+    padding: 10px 16px;
+  }
+
+  /* 增加触摸反馈 */
+  .el-button:active,
+  .nav-item:active,
+  .tab-btn:active {
+    transform: scale(0.95);
+    transition: transform 0.1s;
+  }
+}
+
+/* 高分辨率屏幕优化 */
+@media screen and (-webkit-min-device-pixel-ratio: 2) {
+  .ball {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .el-card {
+    border: 0.5px solid #E9D8A6;
+  }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  /* 如果系统支持深色模式，可以在这里添加深色主题样式 */
+}
+
+/* 减少动画（用户偏好） */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+} 
\ No newline at end of file
diff --git a/frontend/src/views/DLT.vue b/frontend/src/views/DLT.vue
index 72da03a..67a8b45 100644
--- a/frontend/src/views/DLT.vue
+++ b/frontend/src/views/DLT.vue
@@ -37,9 +37,13 @@
         </div>
       </template>
       <el-table :data="tableData" style="width: 100%" v-loading="loading">
-        <el-table-column prop="issue" label="早点编号" width="100"></el-table-column>
-        <el-table-column prop="open_date" label="出锅日期" width="120"></el-table-column>
-        <el-table-column label="出锅号码">
+        <el-table-column prop="issue" label="早点编号" width="100" align="center"></el-table-column>
+        <el-table-column prop="open_time" label="出锅日期" width="120" align="center">
+          <template #default="{ row }">
+            {{ formatDate(row.open_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="出锅号码" align="center">
           <template #default="{ row }">
             <div class="lottery-numbers">
               <span v-for="i in 5" :key="i" class="front-ball">{{ row[`front_ball_${i}`] }}</span>
@@ -47,7 +51,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="150">
+        <el-table-column label="操作" width="150" align="center">
           <template #default="{ row }">
             <el-button type="text" @click="handleEdit(row)">加料</el-button>
             <el-button type="text" @click="handleDelete(row)">撤单</el-button>
@@ -334,6 +338,12 @@ const handleCurrentChange = (val) => {
   fetchData()
 }
 
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return ''
+  return dayjs(date).format('YYYY-MM-DD')
+}
+
 // 初始化
 onMounted(() => {
   // 然后获取完整列表
@@ -364,19 +374,26 @@ onMounted(() => {
 
 .lottery-numbers {
   display: flex;
-  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  height: 32px;
 }
 
 .front-ball,
 .back-ball {
-  width: 30px;
-  height: 30px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
 }
 
 .front-ball {
@@ -401,4 +418,13 @@ onMounted(() => {
 .upload-demo {
   width: 100%;
 }
+
+.el-table__cell {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  line-height: 32px !important;
+  vertical-align: middle !important;
+}
 </style> 
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 512e655..4636b23 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -50,7 +50,7 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="20">
+    <el-row :gutter="20" class="single-col-row">
       <el-col :span="12">
         <el-card class="data-card">
           <template #header>
@@ -116,14 +116,12 @@
       </el-col>
     </el-row>
     
-    <el-row :gutter="20" class="quick-row">
-      <el-col :xs="24" :sm="12" :md="6" v-for="(item, idx) in quickActions" :key="idx">
-        <el-button type="primary" class="quick-btn" @click="navigateTo(item.route)">
-          <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
-          {{ item.label }}
-        </el-button>
-      </el-col>
-    </el-row>
+    <div class="quick-row">
+      <el-button v-for="(item, idx) in quickActions" :key="idx" class="quick-btn" @click="navigateTo(item.route)">
+        <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
+        {{ item.label }}
+      </el-button>
+    </div>
   </div>
 </template>
 
@@ -382,38 +380,46 @@ onMounted(() => {
 }
 
 .quick-row {
-  margin-top: 20px;
+  margin-top: 24px;
+  display: flex;
+  flex-wrap: wrap;
   justify-content: center;
+  gap: 12px 8px;
 }
 
 .quick-btn {
-  width: 100%;
-  margin-bottom: 16px;
-  border-radius: 12px;
-  font-size: 18px;
-  font-weight: 500;
-  padding: 18px 0;
+  min-width: 110px;
+  height: 40px;
+  border-radius: 20px !important;
+  background: #f8f5f0;
+  color: #a67c52;
+  font-weight: 600;
+  font-size: 16px;
+  box-shadow: 0 2px 8px 0 rgba(166,124,82,0.08);
+  border: none;
+  transition: background 0.2s, color 0.2s;
+  padding: 0 18px;
+  margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
 }
 
-@media screen and (max-width: 900px) {
-  .quick-btn {
-    font-size: 16px;
-    padding: 14px 0;
-  }
-  
-  .update-buttons {
-    flex-direction: column;
-  }
+.quick-btn:hover, .quick-btn:focus {
+  background: #ffe9c6;
+  color: #d4a15a;
 }
 
-@media screen and (max-width: 600px) {
+@media (max-width: 600px) {
+  .quick-row {
+    gap: 8px 0;
+  }
   .quick-btn {
+    min-width: 0;
+    flex: 1 1 45%;
     font-size: 15px;
-    padding: 10px 0;
+    padding: 0 8px;
+    margin-bottom: 0;
   }
 }
 </style> 
\ No newline at end of file
diff --git a/frontend/src/views/NumberGenerator.vue b/frontend/src/views/NumberGenerator.vue
index fd76afd..322873c 100644
--- a/frontend/src/views/NumberGenerator.vue
+++ b/frontend/src/views/NumberGenerator.vue
@@ -557,22 +557,24 @@ export default {
   margin-right: 8px;
 }
 .ball {
-  display: inline-block;
-  width: 36px;
-  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
-  text-align: center;
-  line-height: 36px;
+  font-size: 18px;
   font-weight: bold;
-  font-size: 1.1rem;
-  color: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin: 0 2px;
+  line-height: 1;
+  background: #ff4757;
 }
-.ball.red {
-  background: linear-gradient(135deg, #e74c3c, #c0392b);
+.red-ball, .ball.red {
+  background: #f56c6c !important;
 }
-.ball.blue {
-  background: linear-gradient(135deg, #3498db, #2980b9);
+.blue-ball, .ball.blue {
+  background: #409eff !important;
 }
 .separator {
   font-size: 1.5rem;
@@ -794,6 +796,15 @@ export default {
   color: #aaa;
   font-size: 0.98rem;
 }
+.red-balls,
+.blue-balls {
+  overflow-x: auto;
+  white-space: nowrap;
+  min-width: 0;
+  flex-wrap: nowrap !important;
+  display: flex;
+  align-items: center;
+}
 @media (max-width: 768px) {
   .number-generator {
     padding: 10px;
diff --git a/frontend/src/views/Prediction.vue b/frontend/src/views/Prediction.vue
index 46ac720..0b08d54 100644
--- a/frontend/src/views/Prediction.vue
+++ b/frontend/src/views/Prediction.vue
@@ -162,7 +162,7 @@
         <!-- 预测操作按钮区域 -->
         <div class="prediction-actions">
           <el-row :gutter="20" justify="center" align="middle">
-            <el-col :span="6">
+            <el-col :span="8" :xs="24">
               <el-button 
                 type="primary" 
                 @click="predictML" 
@@ -172,7 +172,7 @@
                 {{ modelStatus && modelStatus.type !== 'error' ? 'AI灵感煎饼' : 'AI和面中' }}
               </el-button>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8" :xs="24">
               <el-button 
                 type="warning" 
                 @click="predictPattern" 
@@ -182,7 +182,7 @@
                 老板经验豆浆
               </el-button>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8" :xs="24">
               <el-button 
                 type="info" 
                 @click="predictEnsemble" 
@@ -612,6 +612,33 @@ export default {
   justify-content: center;
 }
 
+.prediction-actions .el-button {
+  width: 100%;
+  height: 40px;
+  border-radius: 20px !important;
+  background: #f8f5f0;
+  color: #a67c52;
+  font-weight: 600;
+  font-size: 16px;
+  box-shadow: 0 2px 8px 0 rgba(166,124,82,0.08);
+  border: none;
+  transition: background 0.2s, color 0.2s;
+  margin-bottom: 12px;
+}
+
+.prediction-actions .el-button:hover, 
+.prediction-actions .el-button:focus {
+  background: #ffe9c6;
+  color: #d4a15a;
+}
+
+@media (max-width: 600px) {
+  .prediction-actions .el-button {
+    font-size: 15px;
+    margin-bottom: 10px;
+  }
+}
+
 .prediction-history {
   margin-top: 30px;
 }
diff --git a/frontend/src/views/SSQ.vue b/frontend/src/views/SSQ.vue
index 2dda401..e158db7 100644
--- a/frontend/src/views/SSQ.vue
+++ b/frontend/src/views/SSQ.vue
@@ -37,9 +37,13 @@
         </div>
       </template>
       <el-table :data="tableData" style="width: 100%" v-loading="loading">
-        <el-table-column prop="issue" label="早点编号" width="100"></el-table-column>
-        <el-table-column prop="open_date" label="出锅日期" width="120"></el-table-column>
-        <el-table-column prop="numbers" label="出锅号码">
+        <el-table-column prop="issue" label="早点编号" width="100" align="center"></el-table-column>
+        <el-table-column prop="open_time" label="出锅日期" width="120" align="center">
+          <template #default="{ row }">
+            {{ formatDate(row.open_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="numbers" label="出锅号码" align="center">
           <template #default="{ row }">
             <div class="lottery-numbers">
               <span v-for="i in 6" :key="i" class="red-ball">{{ row[`red_ball_${i}`] }}</span>
@@ -47,7 +51,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="150">
+        <el-table-column label="操作" width="150" align="center">
           <template #default="{ row }">
             <el-button type="text" @click="handleEdit(row)">加料</el-button>
             <el-button type="text" @click="handleDelete(row)">撤单</el-button>
@@ -332,6 +336,12 @@ const handleCurrentChange = (val) => {
   fetchData()
 }
 
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return ''
+  return dayjs(date).format('YYYY-MM-DD')
+}
+
 // 初始化
 onMounted(() => {
   fetchData()
@@ -361,19 +371,26 @@ onMounted(() => {
 
 .lottery-numbers {
   display: flex;
-  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  height: 32px;
 }
 
 .red-ball,
 .blue-ball {
-  width: 30px;
-  height: 30px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
 }
 
 .red-ball {
@@ -398,4 +415,13 @@ onMounted(() => {
 .upload-demo {
   width: 100%;
 }
+
+.el-table__cell {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  line-height: 32px !important;
+  vertical-align: middle !important;
+}
 </style> 
\ No newline at end of file
diff --git a/frontend/src/views/Statistics.vue b/frontend/src/views/Statistics.vue
index a5b3dbc..e8d7f69 100644
--- a/frontend/src/views/Statistics.vue
+++ b/frontend/src/views/Statistics.vue
@@ -3,7 +3,7 @@
     <el-tabs v-model="activeTab">
       <el-tab-pane label="红蓝球煎饼" name="ssq">
         <el-row :gutter="20">
-          <el-col :span="12">
+          <el-col :span="12" :xs="24">
             <el-card class="chart-card">
               <template #header>
                 <div class="card-header">
@@ -13,7 +13,7 @@
               <div ref="ssqRedChart" class="chart"></div>
             </el-card>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="12" :xs="24">
             <el-card class="chart-card">
               <template #header>
                 <div class="card-header">
@@ -28,7 +28,7 @@
       
       <el-tab-pane label="大乐斗豆浆" name="dlt">
         <el-row :gutter="20">
-          <el-col :span="12">
+          <el-col :span="12" :xs="24">
             <el-card class="chart-card">
               <template #header>
                 <div class="card-header">
@@ -38,7 +38,7 @@
               <div ref="dltFrontChart" class="chart"></div>
             </el-card>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="12" :xs="24">
             <el-card class="chart-card">
               <template #header>
                 <div class="card-header">