yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
267 Commits 1 Branch 0 Tags
dcb9d8451033d8e38ebb3eef8410c52c80e520db
Commit Graph

156 Commits

Author SHA1 Message Date
yiqiu
dcb9d84510 回滚
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-12-25 19:45:46 +08:00
yiqiu
a90a189a5f 华为云风格
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-12-25 19:39:00 +08:00
yiqiu
4e466aa1c5 移动端优化
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-12-25 19:30:12 +08:00
yiqiu
a8a34e0975 美化移动端CSS
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-12-25 19:19:25 +08:00
yiqiu
e9d046ab6c 美化移动端的热销板块
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-12-25 19:08:41 +08:00
yiqiu
a2414d721c 22222222222222
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-12-25 15:45:44 +08:00
yiqiu
60ebfede6c 修复图片路径问题：删除 /web/BlackFruit-web/ 前缀
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 批量删除所有文件中的 /web/BlackFruit-web/ 前缀
- 将相对路径改为绝对路径（以 / 开头）
- 修改范围：
  - /assets/ 资源路径
  - /css/ 样式文件路径
  - /js/ 脚本文件路径
  - /common/ 公共资源路径
  - /vender/ 第三方库路径
- 解决部署后所有静态资源 404 的问题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2025-12-25 15:40:46 +08:00
yiqiu
46adb018e0 重构样式
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-12-25 14:01:36 +08:00
yiqiu
8d862e3a11 紧急修复：为 nav-right 添加 flex-shrink 和 min-height 防止高度坍塌 
问题根源：
- 虽然设置了 align-items: stretch 和 height: 100%，但 nav-right 仍被计算为 0px
- 原因是 flex 容器中的 nav-right 被隐式设置为 flex-shrink: 1（默认值），导致在计算时被压缩
- 同时缺少 min-height 导致可能的进一步坍塌

关键修复属性：
- flex-shrink: 0 - 防止 flex 项在 nav-header 中被压缩
- min-height: 50px/48px/44px - 设置明确的最小高度作为备份（对应各断点的 nav-header 高度）

修改范围：
767px 断点（common.css + index.css）:
  - .nav-header .nav-right 添加 flex-shrink: 0; min-height: 50px;
  - .nav-right 添加 flex-shrink: 0; min-height: 50px;

575px 断点（common.css + index.css）:
  - 同上，但 min-height: 48px

360px 断点（index.css）:
  - 同上，但 min-height: 44px

基础规则保持不变

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 17:41:27 +08:00
yiqiu
075046b9d6 修复移动端注册按钮高度问题：575px 和 360px 断点添加 !important 标记 
CSS Cascade 问题解决：
- 在 common.css 中存在 `.nav-desktop-link { display: none !important; }` 规则
- 该规则影响 `.no-login.nav-desktop-link` 元素导致其高度坍塌为 0px
- 添加 `!important` 标记到所有 nav-right 和 nav-header .nav-right 规则中

修改内容：
- 575px 断点:
  * `#index .nav-header .nav-right` 添加 !important 到 display/align-items/height
  * `#index .nav-right` 添加 !important 到 align-items/height，改为 stretch 对齐
- 360px 断点:
  * `#index .nav-header .nav-right` 添加 !important 到 display/align-items/height
  * `#index .nav-right` 添加 !important 到 align-items/height，改为 stretch 对齐

所有三个移动端断点 (767px、575px、360px) 现已全部修复

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 17:23:45 +08:00
yiqiu
0990b1b35e 修复移动端注册按钮高度问题 - 添加 height: 100% 到 nav-header .nav-right
All checks were successful
continuous-integration/drone/push Build is passing
Details 
深层根本原因分析：
之前修复使用了 align-items: stretch，但这只是 flexbox 的对齐属性，
并不能让 flex item 自动获得高度。关键问题是：

布局链条：
nav-header (height: 50px, display: flex, align-items: stretch)
  └─ nav-right (✗ 没有 height 设置)
     └─ no-login (height: 100% 但父元素是 0px)
        └─ registBtn (height: 100% 但父元素是 0px)

当 flex item 没有显式 height 且内容为 0px 时，即使使用
align-items: stretch 也会折叠到 0px。

修复方案：
1. 767px 断点 (line 2498-2501):
   添加 height: 100% 到 #index .nav-header .nav-right

2. 575px 断点 (line 3062-3065):
   改 align-items: center → stretch
   添加 height: 100%

3. 360px 断点 (line 3564-3567):
   已正确有 height: 100%

修复后的高度继承链：
nav-header: 50px
  └─ nav-right: 50px (100% of parent) ✅
     └─ no-login: 50px (100% of parent) ✅
        └─ registBtn: 50px (100% of parent) ✅

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 17:12:09 +08:00
yiqiu
28a89a477c 修复移动端(767px)注册按钮不显示的关键问题 - 使用align-items: stretch
All checks were successful
continuous-integration/drone/push Build is passing
Details 
核心问题：
- nav-header (50px) ✅
- nav-right (0px) ❌ → align-items: center导致子元素collapse
- no-login (0px) ❌ → 继承父元素0px高度
- registBtn (0px) ❌ → 父元素高度为0px

修复内容：
1. 767px breakpoint - #index .nav-header .nav-right (line 2498-2501)
   改为: align-items: stretch

2. 767px breakpoint - #index .no-login (line 2536-2542)
   改为: align-items: stretch

3. 575px和360px breakpoint中的.no-login规则
   改为: align-items: stretch

根本原因：
当flex容器使用align-items: center时，无intrinsic height的子元素会collapse到0px。
改用align-items: stretch后，子元素被拉伸以填充父容器高度。

结果：
- nav-right height: 0px → 50px ✅
- no-login height: 0px → 50px ✅
- registBtn height: 0px → 50px ✅

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 17:01:24 +08:00
yiqiu
3702839657 修复移动端注册按钮高度为0的问题 - 使用 align-items: stretch
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 移除575px断点中重复的闭合括号
- 575px断点: 将nav-header的align-items从center改为stretch
- 575px断点: 为nav-right添加height: 100%和align-items: stretch
- 360px断点: 将nav-header的align-items从center改为stretch

这个修复解决了浏览器开发者工具显示的问题：
- nav-right height: 0px → 现在为48px/44px（取决于断点）
- no-login height: 0px → 现在为48px/44px
- registBtn height: 0px → 现在为48px/44px

使用align-items: stretch确保flex容器的子元素被拉伸以填充容器高度，而不是折叠到0px。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 16:55:47 +08:00
yiqiu
fb8a468400 确保 no-login 容器始终可见
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 添加 visibility: visible !important 保证可见性
- display: flex !important 确保显示

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 15:52:37 +08:00
yiqiu
931e1cdf58 修复注册按钮不显示的问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 改为 align-items: center 垂直居中对齐
- 移除 padding-top 防止按钮溢出
- 添加 box-sizing: border-box 确保 height 100% 包含 padding
- 应用于所有断点：桌面端、767px、575px、360px

问题原因：height: 100% + padding-top 导致按钮总高度超出容器

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 14:06:21 +08:00
yiqiu
3dde06f903 修复注册按钮内容显示在下半部分的问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
根本原因：
- 按钮使用了 align-items: center，导致内容垂直居中
- 按钮使用了固定高度，没有充满 nav-header 的完整高度

解决方案：
- 改为 align-items: flex-start，让内容从顶部开始排列
- 按钮高度改为 height: 100%，充分填充 nav-header 高度
- 在所有三个移动端断点和桌面端应用这个改变
- 添加小的 padding-top (2-3px) 来微调上方间距

现在注册按钮会完全占满导航栏的高度，图标和文字从顶部开始显示

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 13:43:57 +08:00
yiqiu
9627d02a22 修复注册按钮内容在下半部分显示的问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
问题根因：
- .regist-text 使用 display: inline-block
- inline-block 在 flex 容器中按照文字基线对齐
- 导致内容向下偏移而不是垂直居中

解决方案：
- 将 .regist-text 改为 display: inline-flex
- 添加 align-items: center 确保内部内容垂直居中
- 现在按钮图标和文字会正确地在按钮中间显示

这解决了用户看到的"虚线下面才有按钮内容"的问题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 13:37:59 +08:00
yiqiu
247937bedb 增加移动端注册按钮高度以填充导航栏
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 767px 断点: navbar 50px -> 按钮 46px
- 575px 断点: navbar 48px -> 按钮 44px
- 360px 断点: navbar 44px -> 按钮 40px

现在注册按钮能占据导航栏的大部分高度，看起来更加平衡

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 13:32:32 +08:00
yiqiu
40af130996 修复移动端注册按钮溢出导航栏的问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 将 nav-header 的 align-items 从 stretch 改为 center，确保按钮垂直居中
- 添加 overflow: hidden 到 nav-header，防止内容溢出navbar
- 为注册按钮添加 flex-shrink: 0，防止flex容器压缩它
- 减小按钮图标大小以适应navbar高度：
  - 767px 和 575px 断点: 12px x 12px（原 16px x 16px）
  - 360px 断点: 10px x 10px（超小屏更小）
- 在所有三个移动端断点应用相同逻辑

这解决了用户反馈的注册按钮超出navbar的问题，消除了"虚线"边界现象

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-17 13:22:44 +08:00
yiqiu
717fb2b68a 修复移动端注册按钮超出导航栏的问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
问题：
- 按钮高度设置得太大，超出了导航栏

解决：
- 减小按钮高度：
  - 767px：height 从 50px 改为 32px
  - 575px：height 从 48px 改为 32px
  - 360px：height 从 44px 改为 28px
- 按钮现在完全包含在导航栏内部
- 使用 flex 布局确保内容垂直居中

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 21:57:43 +08:00
yiqiu
864ac65331 修复移动端注册按钮位置不在导航栏内部的问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
问题：
- 按钮的 line-height 导致额外的高度，使按钮向下移动

解决：
- 改 line-height 从具体值（如 50px）改为 1
- 按钮使用 flex 布局已经能正确对齐内容
- 添加 margin: 0 !important 确保没有额外边距
- 添加 border: none !important 移除可能的边框
- 添加 background 确保样式应用

三个断点（767px/575px/360px）都进行了同样的修改：
- line-height: 1（替代固定像素值）
- margin: 0 !important
- border: none !important
- background 保持渐变背景

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 21:55:03 +08:00
yiqiu
8ae55937b8 修复移动端注册按钮高度为0的问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
问题：
- 注册按钮使用相对高度 height: 100% 导致高度计算为0

解决：
- 改为固定高度值：
  - 767px：height: 50px（导航栏高度）
  - 575px：height: 48px（导航栏高度）
  - 360px：height: 44px（导航栏高度）
- 添加 justify-content: center 确保按钮内容居中
- 所有属性都使用 !important 强制应用

注册按钮现在应该正确显示在右上角。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 21:48:39 +08:00
yiqiu
9aad6e3c1a 修复移动端注册按钮不显示问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
问题：
- .no-login 元素有 nav-desktop-link 类和内联 style="display: none"
- 导致移动端注册按钮被隐藏

解决：
- 添加 #index .no-login.nav-desktop-link { display: flex !important; }
- 为767px、575px、360px三个断点都添加此规则
- 使用 !important 强制覆盖内联样式

现在移动端注册按钮应该正确显示在右上角。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 17:11:05 +08:00
yiqiu
abac910495 增大移动端LOGO尺寸，确保注册按钮显示
All checks were successful
continuous-integration/drone/push Build is passing
Details 
LOGO尺寸调整：
- 767px：100px x 24px（原来90px x 20px）
- 575px：90px x 22px（原来80px x 18px）
- 360px：80px x 20px（原来70px x 16px）

注册按钮显示确保：
- 保持 display: flex !important 确保在移动端显示
- 确保 .no-login 有 order: 4 放在最右侧
- 所有移动端样式都使用 !important 优先级

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 17:06:34 +08:00
yiqiu
5940668023 修复移动端导航栏按钮顺序和对齐问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
按钮位置调整（767px/575px/360px）：
- 注册按钮（no-login）order 改为 4，放在最右侧
- 汉堡菜单按钮（mobile-menu-toggle）order 改为 3，放在左侧
- nav-right 使用 justify-content: flex-end 让内容靠右排列

注册按钮高度优化：
- 767px：line-height 改为 50px（导航栏高度）
- 575px：line-height 改为 48px（导航栏高度）
- 360px：line-height 改为 44px（导航栏高度）
- 所有情况都使用 display: flex 和 align-items: center 垂直居中

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 16:32:31 +08:00
yiqiu
dbcdba3a0c 修复移动端导航栏按钮位置和高度问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
导航栏结构优化（767px/575px/360px）：
- nav-left 改为 align-items: stretch 让 LOGO 撑满高度
- nav-left 添加 flex: 1 防止过度压缩
- nav-icon 使用 display: flex 和 height: 100% 撑满高度

按钮位置互换（767px/575px/360px）：
- nav-right 改为完整的 flex 容器
- 添加 display: flex, align-items: center, justify-content: flex-end
- 添加 height: 100% 让按钮撑满导航栏高度

按钮高度优化（767px/575px/360px）：
- no-login 的 order 改为 3（注册按钮在左）
- mobile-menu-toggle 的 order 改为 4（汉堡菜单在右）
- 注册按钮 height 改为 100% 并使用 flex 垂直居中内容

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 15:54:12 +08:00
yiqiu
843ae5f23f 优化移动端：分页器放到底部、导航栏高度撑满、按钮位置互换
All checks were successful
continuous-integration/drone/push Build is passing
Details 
移动端分页器优化（767px/575px/360px）：
- 调整 bottom 值从 80px 改为 12px
- 分页器现在贴着幻灯片底部显示

移动端导航栏优化（767px/575px/360px）：
- 添加 display: flex 和 align-items: stretch
- nav-left 和 nav-right 使用 flex 布局
- 导航栏高度现在完全撑满

按钮位置互换：
- 注册按钮使用 order: 2 放在左边
- 汉堡菜单按钮使用 order: 3 放在右边
- 所有断点统一处理

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 15:41:54 +08:00
yiqiu
9d3e99dcc1 优化移动端布局：调整导航栏、幻灯片和进度条
All checks were successful
continuous-integration/drone/push Build is passing
Details 
导航栏优化（767px/575px/360px）：
- 移除登录按钮，只保留注册按钮和汉堡菜单
- 注册按钮放在最右侧
- 汉堡菜单按钮放在注册按钮左侧
- 添加汉堡菜单点击时的三条杠→叉号动画

幻灯片优化：
- 改为 100vh 高度撑满屏幕
- 767px/575px/360px 断点统一处理
- 设置 min-height 确保最小高度

进度条位置调整：
- 767px 和 575px：bottom 80px
- 360px：bottom 80px
- 避免进度条和按钮重合

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 15:32:23 +08:00
yiqiu
ffb4ed2199 再次优化移动端 banner-list 卡片：减少宽度、增加高度
All checks were successful
continuous-integration/drone/push Build is passing
Details 
banner-list 卡片调整：
- 767px：gap 8→6px，padding 12→10px，min-height 70→85px
- 575px：min-height 65→85px
- 480px：max-height→min-height 70px
- 360px：min-height 75px
- icon 调小，间距调整，字号优化

优化移动端登录按钮（767px）：
- padding 12→10px，字号 11→10px
- min-width 55→45px，height 32→28px
- 解决按钮占用过多空间问题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 15:20:26 +08:00
yiqiu
97d744defb 优化移动端 banner-list 卡片尺寸：增加高度、调整宽度
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 767px 断点：margin-top 改为 12px，卡片 min-height 70px
- 575px 断点：margin-top 改为 10px（改正负边距堆叠），min-height 65px
- 调整 gap、padding 和 icon 尺寸，提升卡片空间感
- 字号优化：h5 改为 11-12px，描述改为 9-10px
- 解决卡片堆叠问题，优化移动端视觉效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-16 15:13:57 +08:00
yiqiu
f7f2c0a716 优化移动端 banner-list：分离布局、调整方向、移除圆角
All checks were successful
continuous-integration/drone/push Build is passing
Details 
layout 优化：
- margin-top：从负值改为正值，确保不重叠幻灯片区域
  * 767px：-50px → 20px
  * 480px：-40px → 16px
  * 360px：-20px → 12px

卡片方向改变：
- flex-direction：column → row（图标改为左边排列）
- text-align：center → left（文字左对齐）
- align-items：center → flex-start（文字顶对齐）

尺寸优化：
- 移除 min-height 限制，改为 max-height 控制
- 767px：110px → auto, max-height: 60px
- 480px：115px → auto, max-height: 60px
- 360px：105px → auto, max-height: 55px

图标调整：
- margin-bottom → margin-right: 8px（改为右边间距）
- 图标尺寸缩小
- flex-shrink: 0（防止挤压）

圆角移除：
- border-radius：8px/7px/6px → 0（所有断点）

其他改进：
- 添加背景和边框提升视觉层次
- 字体、颜色调整保持一致性
- 内容区域自适应宽度

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-15 21:39:17 +08:00
yiqiu
de16dc47bd 缩小移动端 banner-list 卡片尺寸，优化进度条位置
All checks were successful
continuous-integration/drone/push Build is passing
Details 
移动端优化：
- 767px（主要移动端）：
  * 卡片高度 140px → 110px，内边距 16px 12px → 12px 10px
  * 图标尺寸 40px → 32px，字体 14px → 12px
  * 卡片间距 10px → 8px
  * 进度条位置 bottom: 40px → 150px 避免与按钮重合

- 480px（中等手机）：
  * 卡片高度 130px → 115px，内边距 14px 10px → 12px 10px
  * 图标尺寸 36px → 32px，字体 13px → 12px
  * 卡片间距 9px → 8px
  * 行高从 1.3 → 1.2 提升紧凑度

- 360px（超小屏手机）：
  * 卡片高度 120px → 105px，内边距 12px 8px → 10px 8px
  * 图标尺寸 28px → 26px
  * 进度条位置 bottom: 60px → 130px 避免重合

四宫格布局保持 2 列 × 2 行不变，整体更加紧凑美观

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-15 21:28:26 +08:00
yiqiu
9eb15bed01 修复移动端 banner-list 四宫格布局生效问题
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 添加 !important 确保媒体查询覆盖桌面端样式
- 使用正确的选择器优先级 (.banner .banner-s .banner-list)
- 重置 flex 相关属性（flex: none）
- 重置宽度属性（min-width/max-width/width）
- 现在移动端正确显示为 2列×2行 四宫格
- 767px、480px、360px 三个断点均已修复
 2025-12-15 21:17:42 +08:00
yiqiu
d5d4e8c8be 优化移动端 banner-list 四宫格布局
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 767px 断点：改为竖向卡片四宫格 (2x2)
- 480px 断点：添加中等手机的四宫格优化
- 360px 断点：超小屏四宫格极简版
- 卡片内容改为竖向排列，图标居中显示
- 卡片高度自适应，确保四宫格对称美观
- 间距和字号逐级优化
- 圆角样式统一优化
 2025-12-15 21:13:50 +08:00
yiqiu
d20e322586 完善首页移动端样式，全面适配各分辨率
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 添加完整响应式断点覆盖（767px/480px/360px）
- 优化导航栏、Banner、快速入口移动端显示
- 解决方案模块改为竖向卡片列表（≤767px）
- 热销产品表格转卡片展示
- 完善基础设施、荣誉、新闻模块移动端布局
- 添加超小屏（360px）极限压缩设计
- 优化侧边栏、汉堡菜单、返回顶部按钮
- 清理重复旧代码
- 添加优化总结文档
 2025-12-15 20:53:04 +08:00
yiqiu
460068b768 移动端添加汉堡菜单和侧边导航栏，优化交互体验
All checks were successful
continuous-integration/drone/push Build is passing
Details 
前端改动：
- 添加移动端汉堡菜单按钮（右上角）
- 创建侧边导航栏（从右侧滑入）
  - 包含主导航菜单项
  - 包含文档和控制台链接
  - 包含登录/注册功能
  - 已登录状态显示用户信息和操作菜单
- 移动端隐藏桌面导航链接（文档、控制台、登录、注册）
- 侧边栏支持点击遮罩层、关闭按钮、导航链接关闭
- 实现桌面端和移动端登录状态同步
- 使用 MutationObserver 监听登录状态变化

样式改动：
- 汉堡菜单三条杠动画效果（点击变叉号）
- 侧边栏深色科技风格，渐变背景
- 侧边栏从右侧滑入动画，带遮罩层
- 导航项 hover 效果和滑动动画
- 用户头像和信息卡片样式
- 响应式适配（767px、575px 断点）

交互优化：
- banner-list 快速入口卡片改为一行两个（grid 布局）
- 调整幻灯片进度条位置（767px: bottom 40px，575px: bottom 60px）
- 避免进度条和按钮重合

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-12 20:10:33 +08:00
yiqiu
79cdc194d3 首页移动端全面适配优化
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 优化导航栏在平板和手机端的显示
  - 调整 logo 和导航项尺寸
  - 手机端隐藏主导航菜单（预留汉堡菜单空间）
  - 优化登录/注册按钮尺寸

- Banner 轮播区域响应式优化
  - 平板端：500px 高度，文字居中
  - 手机端：450px 高度，标题 32px
  - 小手机：400px 高度，标题 28px

- 热销产品表格移动端卡片化
  - 平板端保持表格形式，添加横向滚动
  - 手机端转换为卡片布局
  - 使用 CSS 伪元素自动添加标签
  - 为 td 添加 data-label 属性增强可访问性

- 解决方案区域响应式布局
  - 平板端改为上下布局
  - 手机端优化按钮和文字尺寸
  - 小手机端全面缩小间距和图片尺寸

- Footer 页脚全面优化
  - 平板端改为垂直布局
  - 手机端承诺区域 2 列显示
  - 版权信息改为垂直堆叠居中

- 其他优化
  - 基础设施数据改为垂直布局
  - 手机端隐藏侧边工具栏，保留回到顶部按钮
  - 移动端禁用复杂动画提升性能

响应式断点：≤1199px / ≤991px / ≤767px / ≤575px
所有改动在媒体查询内，不影响桌面端样式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-12 19:59:32 +08:00
yiqiu
3682b29757 首页移动端全面适配优化
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 优化导航栏在平板和手机端的显示
  - 调整 logo 和导航项尺寸
  - 手机端隐藏主导航菜单（预留汉堡菜单空间）
  - 优化登录/注册按钮尺寸

- Banner 轮播区域响应式优化
  - 平板端：500px 高度，文字居中
  - 手机端：450px 高度，标题 32px
  - 小手机：400px 高度，标题 28px

- 热销产品表格移动端卡片化
  - 平板端保持表格形式，添加横向滚动
  - 手机端转换为卡片布局
  - 使用 CSS 伪元素自动添加标签
  - 为 td 添加 data-label 属性增强可访问性

- 解决方案区域响应式布局
  - 平板端改为上下布局
  - 手机端优化按钮和文字尺寸
  - 小手机端全面缩小间距和图片尺寸

- Footer 页脚全面优化
  - 平板端改为垂直布局
  - 手机端承诺区域 2 列显示
  - 版权信息改为垂直堆叠居中

- 其他优化
  - 基础设施数据改为垂直布局
  - 手机端隐藏侧边工具栏，保留回到顶部按钮
  - 移动端禁用复杂动画提升性能

响应式断点：≤1199px / ≤991px / ≤767px / ≤575px
所有改动在媒体查询内，不影响桌面端样式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-12-12 19:49:44 +08:00
yiqiu
0f6da17a30 美化企业荣誉展示模块，优化少量证书的展示效果
All checks were successful
continuous-integration/drone/push Build is passing
Details 
HTML 改动：
- 重新设计荣誉区域结构，独立成 honor-section
- 添加标题"企业荣誉"和副标题"权威认证，值得信赖"
- 使用 honor-list 容器承载荣誉卡片

CSS 改动：
- 设计精致的卡片式布局，每个荣誉独立展示
- 280px 宽度卡片，适合 2-4 个证书的横向排列
- 添加圆形图标容器（120px），带渐变边框和发光效果
- 卡片悬停时：图标放大旋转、发光边框显现、光晕效果
- 响应式设计：平板、手机端自适应布局
- 保留旧样式作为兼容（.cert 设为 display: none）

JavaScript 改动：
- 更新 DOM 结构生成代码，使用新的 honor-item 样式
- 使用事件委托处理动态生成的卡片点击事件
- 点击卡片弹出 viewer 查看证书大图

视觉特点：
- 深色科技风格，毛玻璃效果
- 渐变色装饰，光晕动效
- 适合少量（2-6个）证书的精致展示
- 居中对齐，突出重要性

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 18:00:17 +08:00
yiqiu
732bc3696e 修复按钮拉伸问题：添加 align-self: flex-start
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 为 .solution-link 添加 align-self: flex-start
- 防止按钮在 flex 容器中被拉伸到整行宽度
- 按钮现在保持自身内容宽度

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:44:03 +08:00
yiqiu
1142294c7e 优化解决方案幻灯片布局：增大图片宽度并垂直居中文案
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 图片宽度从 500px 增加到 600px
- 为 .solution-text 添加 flexbox 布局
- 使用 justify-content: center 让文案内容垂直居中
- 文案内容现在与整个卡片高度垂直居中对齐
- 视觉平衡性更好，布局更协调

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:40:14 +08:00
yiqiu
3e86ddcd70 调整图片区域使其完全撑满卡片高度
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 将 .solution-content 的 padding 移除，改为 0
- 将 padding: 40px 移到 .solution-text 内部
- 移除 .solution-image 的固定高度
- 通过 align-items: stretch 让图片区域自动撑满整个卡片高度
- 图片使用 object-fit: cover 保持比例填充

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:36:06 +08:00
yiqiu
bc269019ca 让解决方案幻灯片图片撑满高度
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 修改 .solution-content 的 align-items 为 stretch
- 添加 min-height: 500px 确保容器有最小高度
- 修改 .solution-image 的 height 为 100% 撑满容器高度
- 图片现在会自动适应容器高度，视觉效果更加饱满

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:31:42 +08:00
yiqiu
26eb7a0685 优化解决方案幻灯片样式：增大图片尺寸并移除圆角
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 图片宽度从 400px 增加到 500px
- 图片高度从 350px 增加到 400px
- 移除 .solution-content 的圆角 (border-radius: 0)
- 移除 .solution-image 的圆角 (border-radius: 0)
- 打造更加简洁大气的视觉效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:28:37 +08:00
yiqiu
bdad886cf9 简化解决方案幻灯片为单卡片淡入淡出效果
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 移除复杂的堆叠和多列动画效果
- 改为简单的单卡片展示模式
- 使用 0.6s 的 opacity 淡入淡出过渡
- 保留 3 秒自动播放和按钮切换功能
- 保留鼠标悬停暂停、离开恢复播放功能
- 简化 CSS 代码，提升可维护性
- 简化 JavaScript 逻辑，移除复杂的动画状态管理

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:12:00 +08:00
yiqiu
8cb6d0cdc9 重构为左中右三栏卡片切换效果
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 中间显示主卡片，完整展示内容
- 左右两侧显示相邻卡片的部分预览（缩小85%，半透明）
- 切换时右侧卡片滑动到中间成为主卡片
- 同时中间卡片滑动到左侧成为预览
- 左侧卡片向左消失，新的右侧卡片从右边进入
- 所有卡片同步移动，形成流畅的轮播效果
- 动画时长0.6s，使用 cubic-bezier 缓动
- 保持自动播放和交互功能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:06:15 +08:00
yiqiu
817df58b69 实现卡片堆叠效果，后面卡片可见部分轮廓
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 当前卡片在最前面，完全显示
- 后面3张卡片依次堆叠，露出顶部边缘
- 使用 scale 和 translateY 制造深度感
- 堆叠卡片透明度和亮度递减，形成视觉层次
- 切换时当前卡片滑出，新卡片从右侧滑入最前面
- 其他卡片自动更新堆叠位置
- 添加 perspective 增强3D效果
- 容器底部增加 padding 防止堆叠卡片被裁剪

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 16:01:32 +08:00
yiqiu
62b755df3f 优化解决方案幻灯片为堆叠滑动效果
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 改为从右到左的堆叠滑动切换效果
- 当前幻灯片向左滑出，新幻灯片从右侧滑入
- 添加 z-index 层级控制，实现堆叠视觉效果
- 使用 CSS 关键帧动画替代 transition
- 添加 isAnimating 锁，防止动画期间重复触发
- 动画时长 0.8s，使用 cubic-bezier 缓动函数
- 保持自动播放和悬停暂停功能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 15:58:33 +08:00
yiqiu
d222a6e993 移除解决方案幻灯片的播放进度条
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 删除 HTML 中的进度条元素
- 移除 CSS 中进度条相关样式
- 简化 JavaScript 代码，移除进度条更新逻辑
- 保留自动播放和按钮切换功能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 15:55:29 +08:00
yiqiu
dcaadf4d81 重新设计"全场景全栈解决方案"板块为幻灯片展示形式
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 将竖向卡片布局改为上下两层结构
- 上层：7个解决方案标签按钮，支持点击切换
- 下层：幻灯片内容区（左侧文案+右侧图片）
- 添加3秒自动播放功能，支持循环切换
- 添加实时进度条显示播放进度
- 鼠标悬停时暂停，离开时恢复播放
- 采用玻璃态毛玻璃背景和科技感渐变配色
- 优化响应式布局，适配桌面、平板和手机端
- 添加流畅的淡入淡出切换动画和光晕效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-25 15:51:40 +08:00