yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页移动端全面适配优化
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 优化导航栏在平板和手机端的显示
  - 调整 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>
This commit is contained in:
yiqiu
2025-12-12 19:49:44 +08:00
parent 0f6da17a30
commit 3682b29757
3 changed files with 490 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@@ -154,80 +154,80 @@
</thead>
<tbody>
<tr>
<td>
<td data-label="产品名称">
<div class="product-name">
<span>香港弹性云</span>
<span class="product-tag">热销</span>
</div>
</td>
<td>2核</td>
<td>2G</td>
<td>3M</td>
<td>50G SSD</td>
<td>
<td data-label="CPU">2核</td>
<td data-label="内存">2G</td>
<td data-label="带宽">3M</td>
<td data-label="系统盘">50G SSD</td>
<td data-label="价格">
<div class="product-price">
29.9<span class="unit">/月</span>
</div>
</td>
<td class="product-action">
<td class="product-action" data-label="操作">
<a href="./cloud.html" class="btn-buy">立即购买</a>
</td>
</tr>
<tr>
<td>
<td data-label="产品名称">
<div class="product-name">
<span>美国高防云</span>
</div>
</td>
<td>4核</td>
<td>4G</td>
<td>5M</td>
<td>80G SSD</td>
<td>
<td data-label="CPU">4核</td>
<td data-label="内存">4G</td>
<td data-label="带宽">5M</td>
<td data-label="系统盘">80G SSD</td>
<td data-label="价格">
<div class="product-price">
59.9<span class="unit">/月</span>
</div>
</td>
<td class="product-action">
<td class="product-action" data-label="操作">
<a href="./cloud.html" class="btn-buy">立即购买</a>
</td>
</tr>
<tr>
<td>
<td data-label="产品名称">
<div class="product-name">
<span>新加坡CN2云</span>
<span class="product-tag">推荐</span>
</div>
</td>
<td>4核</td>
<td>8G</td>
<td>10M</td>
<td>100G SSD</td>
<td>
<td data-label="CPU">4核</td>
<td data-label="内存">8G</td>
<td data-label="带宽">10M</td>
<td data-label="系统盘">100G SSD</td>
<td data-label="价格">
<div class="product-price">
99.9<span class="unit">/月</span>
</div>
</td>
<td class="product-action">
<td class="product-action" data-label="操作">
<a href="./cloud.html" class="btn-buy">立即购买</a>
</td>
</tr>
<tr>
<td>
<td data-label="产品名称">
<div class="product-name">
<span>日本BGP云</span>
</div>
</td>
<td>8核</td>
<td>16G</td>
<td>20M</td>
<td>200G SSD</td>
<td>
<td data-label="CPU">8核</td>
<td data-label="内存">16G</td>
<td data-label="带宽">20M</td>
<td data-label="系统盘">200G SSD</td>
<td data-label="价格">
<div class="product-price">
199.9<span class="unit">/月</span>
</div>
</td>
<td class="product-action">
<td class="product-action" data-label="操作">
<a href="./cloud.html" class="btn-buy">立即购买</a>
</td>
</tr>