完善首页移动端样式，全面适配各分辨率

- 添加完整响应式断点覆盖（767px/480px/360px）
- 优化导航栏、Banner、快速入口移动端显示
- 解决方案模块改为竖向卡片列表（≤767px）
- 热销产品表格转卡片展示
- 完善基础设施、荣誉、新闻模块移动端布局
- 添加超小屏（360px）极限压缩设计
- 优化侧边栏、汉堡菜单、返回顶部按钮
- 清理重复旧代码
- 添加优化总结文档

MOBILE_OPTIMIZATION_SUMMARY.md

@@ -0,0 +1,169 @@
+# 首页移动端样式完善总结
+
+## 📱 完成内容
+
+### 1. 响应式断点优化
+已为首页添加了完整的移动端样式覆盖，包括以下断点：
+
+| 断点 | 设备类型 | 应用场景 |
+|------|---------|--------|
+| **≤1199px** | 平板/小屏笔记本 | 基础响应式调整 |
+| **≤991px** | iPad 竖屏 | 两列布局改单列 |
+| **≤767px** | iPad 竖屏/大屏手机 | 主要移动端适配 |
+| **361px~480px** | 中等手机 | 小屏手机过渡层 |
+| **≤360px** | 小屏手机 | 极限压缩设计 |
+
+### 2. 关键组件移动端优化
+
+#### 🎯 导航栏（Header）
+- ✅ 高度从 70px 逐步缩小到 44px（超小屏）
+- ✅ Logo 宽度自适应缩放
+- ✅ 登录/注册按钮在超小屏隐藏分隔符
+- ✅ 汉堡菜单和侧边栏完全支持
+
+#### 🎪 Banner 轮播区域
+- ✅ 高度自适应：650px → 280px（767px） → 240px（360px）
+- ✅ 标题字号自动调整：58px → 24px → 16px
+- ✅ 描述文本行数限制，超小屏显示 1 行
+- ✅ 标签（tag）尺寸自适应
+
+#### ⚡ 快速入口卡片（Banner-list）
+- ✅ 改为 2 列网格布局
+- ✅ 间距和内边距逐级压缩
+- ✅ 图标和文字尺寸自适应
+- ✅ 移动端隐藏额外装饰
+
+#### 📊 热销产品表格
+- ✅ 桌面端：横向表格显示
+- ✅ 平板端：保持表格，添加横向滚动
+- ✅ 手机端：转换为卡片布局
+- ✅ 超小屏：最小化卡片，仅显示关键信息
+
+#### 🏢 解决方案模块（重点优化）
+**桌面端**：幻灯片 + 按钮导航切换模式
+**移动端（≤767px）**：
+- ✅ 隐藏按钮导航，全部显示为竖向卡片列表
+- ✅ 卡片背景：半透明毛玻璃效果
+- ✅ 图片在上方，文案在下方
+- ✅ 超小屏（≤360px）：仅显示第 1 段文案
+- ✅ 卡片间距和内边距逐级减小
+
+#### 🏛️ 基础设施 + 荣誉模块
+- ✅ 竖向布局：左侧数字移到上方
+- ✅ 地图图片响应式缩放
+- ✅ 荣誉卡片改为 2 列（手机端）
+- ✅ 图标和文字尺寸自适应
+
+#### 📰 新闻模块
+- ✅ 公告和资讯改为竖向堆叠（超小屏）
+- ✅ 新闻项目高度自适应
+- ✅ 时间戳隐藏或缩小
+
+#### 🎨 侧边栏工具条 + 返回顶部
+- ✅ 首页特化样式：深色科技风格
+- ✅ 移动端侧边栏导航完全适配
+- ✅ 返回顶部按钮优化
+- ✅ 用户头像和菜单美观展示
+
+### 3. 性能优化
+- ✅ 移动端禁用复杂伪元素和动画
+- ✅ 移除渐变遮罩和光晕效果
+- ✅ 简化 hover 效果
+
+### 4. 代码清理
+- ✅ 移除了重复的旧媒体查询代码
+- ✅ 统一样式结构，便于维护
+
+---
+
+## 🧪 测试建议
+
+### 快速测试（使用浏览器开发者工具）
+
+1. **打开首页**
+   ```
+   http://localhost/index.html
+   ```
+
+2. **检查各断点**（F12 打开开发者工具，选择设备模拟）
+   - **iPhone 12** (390px)：验证快速入口、解决方案卡片
+   - **iPhone SE** (375px)：验证超小屏适配
+   - **iPhone 8 Plus** (414px)：验证中等手机样式
+   - **iPad** (768px)：验证平板布局
+   - **iPad Pro** (1024px)：验证平板优化
+   - **Desktop** (1440px)：验证桌面端显示
+
+3. **关键检查点**
+   - [ ] 导航栏高度和按钮尺寸合理
+   - [ ] Banner 高度自适应，文字清晰可读
+   - [ ] 快速入口卡片 2 列排列
+   - [ ] 解决方案改为卡片列表（≤767px）
+   - [ ] 热销产品表格转为卡片（≤767px）
+   - [ ] 新闻模块竖向排列（≤360px）
+   - [ ] 所有交互元素可点击且尺寸合理
+   - [ ] 没有横向滚动条（除非必要）
+   - [ ] 文字清晰易读，不会被裁剪
+
+4. **性能测试**
+   - 在低端手机上检查页面流畅度
+   - 使用 Chrome DevTools Lighthouse 评分
+
+### 实际设备测试
+
+建议使用以下真实设备或模拟器测试：
+- Android 5.0+ 设备
+- iOS 12+ 设备
+- 各种屏幕尺寸和分辨率
+
+---
+
+## 📝 修改的文件
+
+### `/mnt/e/code/BlackFruit-UI/css/index.css`
+**修改内容**：
+- ✅ 优化了 `@media (max-width: 767px)` 中的解决方案样式（第 2699-2781 行）
+- ✅ 添加了 `@media (max-width: 480px)` 的中等手机优化（第 3217-3265 行）
+- ✅ 添加了 `@media (max-width: 360px)` 的超小屏完整覆盖（第 3267-3547 行）
+- ✅ 添加了移动端侧边栏首页特化样式（第 4063-4114 行）
+- ✅ 清理了重复的旧媒体查询代码
+
+**关键改进**：
+1. 解决方案模块：从幻灯片改为竖向卡片列表
+2. 超小屏适配：全面覆盖 360px 及以下
+3. 过渡层优化：新增 480px 断点
+4. 代码质量：移除重复代码，提升可维护性
+
+---
+
+## 🔧 未来改进建议
+
+1. **Footer 移动端优化**
+   - 可继续优化 footer 在各断点下的布局
+   - 承诺项改为 1 列或更紧凑的布局
+
+2. **其他页面适配**
+   - 为 cloud.html、about.html 等产品页添加类似的移动端样式
+
+3. **性能进一步优化**
+   - 考虑使用 CSS Grid 的 auto-fit/auto-fill 进一步简化媒体查询
+   - 添加 prefers-reduced-motion 支持
+
+4. **无障碍增强**
+   - 添加更好的触摸目标尺寸（最小 48x48px）
+   - 添加焦点指示器，便于键盘导航
+
+---
+
+## 📚 相关资源
+
+- **CSS 媒体查询文档**：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
+- **响应式设计最佳实践**：https://web.dev/responsive-web-design-basics/
+- **移动端测试指南**：https://developers.google.com/web/tools/chrome-devtools
+
+---
+
+## ✅ 完成日期
+
+**2025-12-15**
+
+**所有移动端样式优化已完成！** 🎉

css/index.css

@@ -2696,32 +2696,42 @@ html {
     bottom: -6px;
   }
 
-  /* ===== 解决方案 - 极简版 ===== */
+  /* ===== 解决方案 - 竖向卡片列表 ===== */
   .solution-wrapper {
     margin-top: 20px;
   }
 
+  /* 隐藏按钮导航，改用卡片模式 */
   .solution-tabs {
-    gap: 6px;
+    display: none;
-    margin-bottom: 20px;
-    padding: 0 8px;
-  }
-
-  .solution-tab {
-    padding: 6px 12px;
-    font-size: 11px;
-    border-radius: 20px;
   }
 
   .solution-slider {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
     min-height: auto;
   }
 
+  /* 显示所有幻灯片作为普通卡片 */
+  .solution-slide {
+    display: block !important;
+    opacity: 1 !important;
+  }
+
   .solution-content {
     min-height: auto;
-    padding: 16px !important;
+    padding: 14px 12px !important;
-    gap: 20px;
+    gap: 12px;
     flex-direction: column;
+    border-radius: 8px;
+    background: rgba(30, 41, 59, 0.6);
+    border: 1px solid rgba(148, 163, 184, 0.1);
+  }
+
+  .solution-content:hover {
+    background: rgba(30, 41, 59, 0.8);
+    border-color: rgba(56, 189, 248, 0.2);
   }
 
   .solution-text {
@@ -2729,41 +2739,44 @@ html {
   }
 
   .solution-text h3 {
-    font-size: 18px;
+    font-size: 16px;
-    margin-bottom: 6px;
+    margin-bottom: 4px;
+    color: #E5E7EB;
   }
 
   .solution-subtitle {
-    font-size: 11px;
+    font-size: 10px;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
+    color: rgba(148, 163, 184, 0.8);
   }
 
   .solution-desc {
-    margin-bottom: 16px;
+    margin-bottom: 10px;
   }
 
   .solution-desc p {
-    font-size: 11px;
+    font-size: 10px;
-    line-height: 1.6;
+    line-height: 1.5;
-    margin-bottom: 6px;
+    margin-bottom: 4px;
-    display: -webkit-box;
+    color: rgba(203, 213, 225, 0.8);
-    -webkit-line-clamp: 2; /* 只显示2行 */
+    display: block;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
   }
 
-  .solution-desc p:nth-child(n+3) {
+  .solution-desc p:nth-child(n+2) {
-    display: none; /* 隐藏第3段及以后的内容 */
+    display: none; /* 小屏只显示第1段 */
   }
 
   .solution-link {
-    padding: 8px 20px;
+    padding: 6px 16px;
-    font-size: 11px;
+    font-size: 10px;
+    align-self: flex-start;
   }
 
   .solution-image {
     width: 100%;
-    height: 180px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 4px;
     order: -1; /* 图片移到上方 */
   }
 
@@ -3201,6 +3214,388 @@ html {
   }
 }
 
+/* 小屏手机优化（480px） */
+@media (max-width: 480px) and (min-width: 361px) {
+  /* ===== 导航栏 ===== */
+  #index .nav-header {
+    height: 46px !important;
+  }
+
+  #index .nav-header .nav-left .nav-icon img {
+    width: 75px;
+    height: 17px;
+  }
+
+  #index .nav-right .nav-text-link {
+    font-size: 10px;
+    padding: 0 5px;
+  }
+
+  /* ===== Banner ===== */
+  .banner-cont .swiper-slide {
+    height: 220px !important;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 18px !important;
+  }
+
+  .banner-cont .banner-desc {
+    font-size: 11px !important;
+    -webkit-line-clamp: 1;
+  }
+
+  /* ===== 快速入口 ===== */
+  .banner-s .banner-list .banner-item h5 {
+    font-size: 13px !important;
+  }
+
+  /* ===== 解决方案 ===== */
+  .solution-content {
+    padding: 12px 10px !important;
+  }
+
+  .solution-text h3 {
+    font-size: 15px;
+  }
+
+  .solution-image {
+    height: 110px;
+  }
+}
+
+/* 超小屏适配（320px） */
+@media (max-width: 360px) {
+  /* ===== 导航栏 - 极限压缩 ===== */
+  #index .nav-header {
+    padding: 0 8px;
+    height: 44px !important;
+  }
+
+  #index .nav-header .nav-left .nav-icon img {
+    width: 70px;
+    height: 16px;
+  }
+
+  #index .nav-right .nav-text-link {
+    font-size: 9px;
+    padding: 0 4px;
+    margin: 0 2px;
+  }
+
+  #index .nav-right .nav-divider {
+    display: none;
+    margin: 0;
+  }
+
+  #index .no-login .btn.btn-normal-light.mr-10#loginBtn,
+  #index .no-login .btn.btn-normal#registBtn {
+    padding: 0 8px !important;
+    font-size: 9px !important;
+    min-width: 45px !important;
+    height: 26px !important;
+    line-height: 26px !important;
+  }
+
+  #index .no-login .btn.btn-normal#registBtn::before {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* ===== Banner - 极简 ===== */
+  .banner-cont .swiper-slide {
+    height: 200px !important;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 16px !important;
+    line-height: 1.2;
+    margin-bottom: 6px;
+  }
+
+  .banner-cont .banner-desc {
+    font-size: 10px !important;
+    margin-top: 6px !important;
+    margin-bottom: 12px !important;
+    -webkit-line-clamp: 1; /* 只显示1行 */
+    max-height: 20px;
+  }
+
+  .banner-tag-pill {
+    font-size: 8px;
+    padding: 2px 6px;
+  }
+
+  .banner-cont .btn2 {
+    padding: 5px 14px !important;
+    font-size: 10px !important;
+  }
+
+  .banner-cont .swiper-pagination {
+    bottom: 60px !important;
+  }
+
+  /* ===== 快速入口 - 2列 ===== */
+  .banner .banner-s {
+    margin-top: -20px;
+    padding: 8px 0;
+  }
+
+  .banner-s .banner-list {
+    gap: 6px;
+    padding: 0 8px;
+  }
+
+  .banner-s .banner-list .banner-item {
+    padding: 8px 10px !important;
+    gap: 8px;
+  }
+
+  .banner-s .banner-list .banner-item .banner-item-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .banner-s .banner-list .banner-item h5 {
+    font-size: 12px !important;
+    margin-bottom: 2px;
+    line-height: 1.3;
+  }
+
+  .banner-s .banner-list .banner-item .title-desc {
+    font-size: 8px !important;
+  }
+
+  /* ===== 热销产品 - 紧凑 ===== */
+  .hot-products {
+    margin-top: -20px;
+    padding: 14px 0 20px !important;
+  }
+
+  .hot-products-title h3 {
+    font-size: 16px;
+    margin-bottom: 4px;
+  }
+
+  .hot-products-title .subtitle {
+    font-size: 9px;
+  }
+
+  .products-table-wrapper {
+    padding: 0 8px;
+  }
+
+  .products-table tbody tr {
+    margin-bottom: 8px;
+    padding: 10px;
+  }
+
+  .products-table tbody td {
+    padding: 5px 0 5px 65px;
+    font-size: 10px;
+  }
+
+  .products-table tbody td::before {
+    left: 10px;
+    font-size: 9px;
+  }
+
+  .products-table .product-name {
+    font-size: 11px;
+  }
+
+  .products-table .product-tag {
+    font-size: 8px;
+    padding: 0 4px;
+  }
+
+  .products-table .product-price {
+    font-size: 14px;
+  }
+
+  .products-table .product-price .unit {
+    font-size: 9px;
+  }
+
+  .products-table .btn-buy {
+    padding: 4px 12px;
+    font-size: 9px;
+  }
+
+  /* ===== Section 通用 - 极致压缩 ===== */
+  .section {
+    padding: 20px 0 !important;
+  }
+
+  .section-content {
+    padding: 20px 8px !important;
+  }
+
+  .section-title h2 {
+    font-size: 16px;
+    margin-bottom: 4px;
+  }
+
+  .section-title .section-desc {
+    font-size: 9px;
+  }
+
+  .section-title h2::after {
+    width: 25px;
+  }
+
+  /* ===== 解决方案 - 卡片列表 ===== */
+  .solution-wrapper {
+    margin-top: 12px;
+  }
+
+  .solution-slider {
+    gap: 8px;
+  }
+
+  .solution-content {
+    padding: 10px 8px !important;
+    gap: 8px;
+  }
+
+  .solution-text h3 {
+    font-size: 14px;
+    margin-bottom: 2px;
+  }
+
+  .solution-subtitle {
+    font-size: 9px;
+    margin-bottom: 4px;
+  }
+
+  .solution-desc p {
+    font-size: 9px;
+  }
+
+  .solution-link {
+    padding: 5px 12px;
+    font-size: 9px;
+  }
+
+  .solution-image {
+    height: 100px;
+  }
+
+  /* ===== 基础设施 - 简化 ===== */
+  .section-base {
+    padding: 18px 0 !important;
+  }
+
+  .base .base-content {
+    margin-top: 12px;
+    margin-bottom: 16px;
+  }
+
+  .base .base-content .fboxRow {
+    margin-bottom: 8px;
+  }
+
+  .base .base-content h2 {
+    font-size: 24px;
+  }
+
+  .base .base-content .title-desc {
+    font-size: 9px;
+  }
+
+  .section-base .base img {
+    width: 100%;
+    max-width: 280px;
+    margin: 12px auto 0;
+  }
+
+  /* ===== 荣誉 - 极简 ===== */
+  .honor-section {
+    margin-top: 16px;
+    padding: 16px 0;
+  }
+
+  .honor-title h3 {
+    font-size: 16px;
+    margin-bottom: 4px;
+  }
+
+  .honor-subtitle {
+    font-size: 9px;
+  }
+
+  .honor-list {
+    gap: 8px;
+    padding: 0 8px;
+  }
+
+  .honor-item {
+    width: calc(50% - 4px);
+    padding: 12px 8px;
+    padding-bottom: 8px;
+  }
+
+  .honor-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 6px;
+  }
+
+  .honor-icon img {
+    width: 35px;
+    height: 35px;
+  }
+
+  .honor-name {
+    font-size: 10px;
+    line-height: 1.2;
+  }
+
+  /* ===== 新闻 - 极简 ===== */
+  .section.news {
+    padding: 18px 0 !important;
+  }
+
+  .news-content {
+    margin-top: 12px;
+    gap: 12px;
+    flex-direction: column;
+  }
+
+  .news-content .news-cont {
+    padding: 12px;
+  }
+
+  .news-content .news-head .news-title {
+    font-size: 14px;
+  }
+
+  .news-content .news-head .news-more {
+    font-size: 9px;
+  }
+
+  .news-content .news-item {
+    line-height: 26px;
+    padding: 6px 0;
+  }
+
+  .news-content .news-item .number {
+    min-width: 14px;
+    height: 14px;
+    font-size: 8px;
+    margin-right: 4px;
+  }
+
+  .news-content .news-item .title {
+    font-size: 10px;
+  }
+
+  .news-content .news-item .time {
+    font-size: 8px;
+    min-width: 55px;
+  }
+}
+
 /* 性能优化提示 */
 @media (max-width: 768px) {
   /* 在移动设备上禁用一些复杂动画以提升性能 */
@@ -3665,80 +4060,55 @@ html {
   opacity: 1;
 }
 
-/* 响应式设计 */
+/* ============================================
-@media (max-width: 1199px) {
+   移动端侧边栏首页优化
-  .solution-content {
+   ============================================ */
-    gap: 40px;
-    padding: 32px;
-  }
 
-  .solution-image {
+/* 移动端侧边栏背景优化 */
-    width: 350px;
+#index .mobile-sidebar-content {
-    height: 300px;
+  background: linear-gradient(180deg, #020617 0%, #0F172A 100%);
-  }
-
-  .solution-text h3 {
-    font-size: 28px;
-  }
 }
 
-@media (max-width: 991px) {
+#index .mobile-sidebar-header {
-  .solution-content {
+  background: rgba(15, 23, 42, 0.95);
-    flex-direction: column;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
-    gap: 30px;
-  }
-
-  .solution-image {
-    width: 100%;
-    max-width: 500px;
-    height: 300px;
-  }
-
-  .solution-tabs {
-    gap: 12px;
-  }
-
-  .solution-tab {
-    padding: 10px 24px;
-    font-size: 14px;
-  }
 }
 
-@media (max-width: 767px) {
+#index .mobile-nav-link {
-  .solution-wrapper {
+  color: #E5E7EB;
-    margin-top: 40px;
+  transition: all 0.3s ease;
-  }
+}
-
+
-  .solution-content {
+#index .mobile-nav-link:hover {
-    padding: 24px;
+  color: #38BDF8;
-  }
+}
-
+
-  .solution-text h3 {
+#index .mobile-user-info {
-    font-size: 24px;
+  background: rgba(30, 41, 59, 0.6);
-  }
+  border: 1px solid rgba(148, 163, 184, 0.1);
-
+  border-radius: 8px;
-  .solution-subtitle {
+  padding: 12px;
-    font-size: 14px;
+  margin-bottom: 12px;
-  }
+}
-
+
-  .solution-desc p {
+#index .mobile-user-avatar {
-    font-size: 14px;
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
-  }
+  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
-
+}
-  .solution-image {
+
-    height: 250px;
+#index .mobile-user-name {
-  }
+  color: #E5E7EB;
-
+}
-  .solution-slider {
+
-    min-height: auto;
+/* 返回顶部按钮优化 */
-  }
+#index .back-top-wrapper {
-
+  background: rgba(56, 189, 248, 0.15);
-  .solution-tabs {
+  border: 1px solid rgba(56, 189, 248, 0.3);
-    gap: 8px;
+  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
-  }
+  transition: all 0.3s ease;
-
+}
-  .solution-tab {
+
-    padding: 8px 20px;
+#index .back-top-wrapper:hover {
-    font-size: 13px;
+  background: rgba(56, 189, 248, 0.3);
-  }
+  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
 }