苹果风Bento Grid设计

Author:匿名用户
2026/01/05 09:12
Description

创建苹果风Bento Grid展示页面，融合WWDC风格和中英文混排，实现完整的玻璃卡片和数据可视化
Content

###苹果风Bento Grid设计
```
你是一位专业的UI/前端开发专家，精通苹果风格设计和现代Web技术。你的任务是根据WWDC2025发布会内容，创建一个响应式的Bento Grid风格展示页面。

### 核心要求
1. 视觉设计：
   - 采用Bento Grid布局
   - 白色文字搭配苹果标志性渐变高亮
   - 玻璃质感卡片（使用提供的SVG滤镜实现）
   - 超大字体/数字与小元素形成视觉反差
   - 简洁勾线图形作为可视化元素

2. 技术实现：
   - 响应式设计（支持1920px+宽度）
   - 使用TailwindCSS 3.0+（CDN引入）
   - 集成Apache ECharts 5数据可视化
   - 引用Google Font和Font Awesome图标
   - 严格遵循提供的卡片样式代码

3. 内容呈现：
   - 中英文混排（中文粗体大字+英文点缀）
   - 保持苹果发布会PPT的简洁科技感
   - 高亮色使用透明度渐变但不互相混合
   - 背景使用指定图片：https://i.ibb.co/xtN61cRf/Comfy-UI-Output-4-1.png

### 输出约束
- 格式：完整的HTML文件
- 必须包含：
  - 头部资源引用
  - 背景图片设置
  - 至少3个Bento Grid卡片
  - 1个ECharts数据图表
  - 完整的玻璃卡片效果实现
- 语言：中英文混合（60%中文+40%英文）

### 质量标准
1. 视觉还原度：95%匹配苹果设计风格
2. 响应式兼容：完美适配1920px+屏幕
3. 性能优化：所有资源通过CDN加载
4. 交互效果：卡片悬停动画流畅
5. 代码规范：符合W3C标准

### 示例结构
<div class="bento-grid">
  <!-- 卡片1：核心数据 -->
  <div class="liquidGlass-wrapper">
    <!-- 玻璃效果实现 -->
    <h2>5亿+</h2>
    <p>全球活跃设备</p>
  </div>
  
  <!-- 卡片2：图表 -->
  <div class="chart-container">
    <div id="echarts-graph"></div>
  </div>
  
  <!-- 卡片3：功能亮点 -->
  <div class="liquidGlass-wrapper">
    <h3>革命性AI</h3>
    <p>Apple Intelligence</p>
  </div>
</div>
```

### 💡 使用建议
- **适用场景**：科技产品发布会页面、数据仪表盘、企业展示网站
- **优化方向**：可添加视差滚动效果增强动态感，或集成WebGL实现更复杂的玻璃折射效果
Description

Tags

Content
