0908

office-site/assets/css/style.css

@@ -74,6 +74,32 @@ ul { list-style: none; }
 
 .header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
 
+/* 移动端汉堡按钮 */
+.nav-toggle {
+  display: none;
+  order: 3;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid var(--border);
+  background: #fff;
+  border-radius: 8px;
+  cursor: pointer;
+  flex: none;
+}
+.nav-toggle span {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background: var(--text);
+  margin: 3.5px auto;
+  border-radius: 2px;
+  transition: transform .25s, opacity .2s;
+}
+.nav-toggle.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
+.nav-toggle.active span:nth-child(2) { opacity: 0; }
+.nav-toggle.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
+
 /* 按钮 */
 .btn {
   display: inline-flex;
@@ -301,6 +327,10 @@ table.result-table th { background: var(--bg-soft); color: var(--text-sub); font
 .footer-bottom a { color: var(--text-light); transition: color .2s; }
 .footer-bottom a:hover { color: var(--mi-orange); }
 
+/* 表格横向滚动容器 */
+.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.table-wrap table { min-width: 520px; }
+
 /* ============ 响应式 ============ */
 @media (max-width: 1080px) {
   .container { width: 100%; }
@@ -310,12 +340,85 @@ table.result-table th { background: var(--bg-soft); color: var(--text-sub); font
   .grid-3 { grid-template-columns: repeat(2, 1fr); }
   .stats { grid-template-columns: repeat(2, 1fr); }
   .stats .item:nth-child(2) { border-right: none; }
+  .stats .item:nth-child(3) { border-top: 1px solid var(--border); }
+  .stats .item:nth-child(4) { border-top: 1px solid var(--border); }
   .chat-layout { grid-template-columns: 1fr; }
   .footer-cols { grid-template-columns: repeat(2, 1fr); }
 }
-@media (max-width: 720px) {
-  .nav { gap: 18px; overflow-x: auto; }
-  .hero h1 { font-size: 34px; }
-  .grid-3, .chapter-list { grid-template-columns: 1fr; }
-  .section { padding: 48px 0; }
+
+/* 平板 / 手机：切换为汉堡菜单 */
+@media (max-width: 900px) {
+  .header-inner { gap: 12px; justify-content: space-between; }
+  .logo { flex: 1; }
+  .logo span { font-size: 18px; }
+  .nav-toggle { display: block; }
+  .nav {
+    display: none;
+    position: absolute;
+    top: var(--header-h);
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    gap: 0;
+    padding: 4px 16px 12px;
+    background: #fff;
+    border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow);
+  }
+  .nav.open { display: flex; }
+  .nav a {
+    padding: 14px 2px;
+    font-size: 16px;
+    border-bottom: 1px solid #f2f2f2;
+  }
+  .nav a:last-child { border-bottom: none; }
+  .nav a.active::after { display: none; }
+}
+
+@media (max-width: 720px) {
+  .container { padding: 0 14px; }
+  .hero { padding: 40px 0 48px; }
+  .hero h1 { font-size: 30px; }
+  .hero p { font-size: 15px; }
+  .hero-tag { font-size: 12px; padding: 5px 12px; }
+  .hero-actions { flex-direction: column; align-items: stretch; }
+  .hero-actions .btn { width: 100%; }
+  .hero-img img { max-width: 320px; }
+
+  .section { padding: 40px 0; }
+  .section-head { margin-bottom: 28px; }
+  .section-head h2 { font-size: 24px; }
+
+  .grid-3 { grid-template-columns: 1fr; gap: 16px; }
+  .chapter-list { grid-template-columns: 1fr; gap: 14px; }
+  .card { padding: 24px 20px; }
+  .card .icon { width: 72px; height: 72px; }
+  .card p { min-height: 0; }
+
+  .page-banner { padding: 32px 0; }
+  .page-banner h1 { font-size: 26px; }
+  .page-banner p { font-size: 14px; }
+
+  .panel { padding: 20px; }
+  .panel h2 { font-size: 19px; }
+
+  .form-row { flex-direction: column; }
+  .form-row .input { min-width: 0; width: 100%; }
+  .form-row .btn { width: 100%; }
+
+  .chat-body { height: 320px; padding: 16px; }
+  .bubble { max-width: 88%; font-size: 14px; }
+
+  .stats .item { padding: 22px 10px; }
+  .stats .num { font-size: 26px; }
+  .placeholder.tall { min-height: 200px; padding: 28px 16px; }
+
+  .footer { padding: 36px 0 20px; }
+  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 20px; }
+  .footer-bottom { font-size: 11px; line-height: 1.8; }
+}
+
+@media (max-width: 400px) {
+  .footer-cols { grid-template-columns: 1fr; }
+  .header-actions .btn { padding: 0 14px; font-size: 13px; }
 }