排名应用 - 带有原创风格的Figma设计
这是一个React.js应用程序，它忠实复刻了Figma的设计，使用了设计库中的确切样式。该应用程序以现代且响应式的移动界面展示智能手机排名，遵循原始设计系统。
✨ 特点
- 🎨 与Figma一致的设计使用库中的精确设计变量
- 🌙 暗模式实现原始设计的深色主题
- 📱 移动优先设计针对移动设备优化（宽度390px）
- ⚛️ 模块化组件由可重用组件组成的结构
- 🎯 一致的设计系统精确的颜色、字体和间距
- 🔄 热重载开发过程中的实时更改
- 📊 动态排名智能手机的真实数据，信息详尽
🎨 设计系统
主色
- 主背景：
#000000（系统背景为深色） - 主要文本：
#f5f7fc(文本颜色 主色) - 次要文本：
#a9bcce（文字颜色 辅助色） - 成功的色彩:
#00d689(成功默认) - “Neutros”在中文中并没有一个直接对应的、广泛认知的翻译，因为它可能是一个特定领域或语境下的术语，或者是某个特定名称、品牌或概念的一部分。如果“Neutros”是一个品牌或产品名称，那么它的翻译可能需要根据该品牌或产品在中文中的官方名称来确定。如果它是一个技术术语或专业词汇，那么可能需要查阅相关领域的专业资料或咨询专业人士来获取准确的翻译。在没有具体上下文的情况下，我们只能将其直译为“中性（或中性态）”，但这可能并不准确或完全符合原意。因此，建议在具体使用时，根据上下文和专业背景来确定最合适的翻译：
#1a2935，#24394b，#142029，#101920
字体排印学
- 主要来源Satoshi 变量
- 移动尺寸12像素，14像素，16像素，20像素，24像素
- 比索（或译为“墨西哥比索”，根据上下文确定具体含义）常规（400），中等（500），半粗（600），粗体（700）
间隔
- 原子4像素，8像素，16像素
- 分子20像素，24像素，32像素
- 图标12像素，16像素，32像素
🚀 安装与执行
- 安装依赖项：
npm install- 运行应用程序：
npm start
# O usar el script personalizado:
./start.sh- 在浏览器中打开：
http://localhost:3000📁 项目结构
src/
├── styles/
│ └── variables.css # Variables de diseño de Figma
├── components/
│ ├── TopBar.js/.css # Barra superior con estilos iOS
│ ├── Header.js/.css # Encabezado con navegación y tags
│ ├── RankingCard.js/.css # Tarjetas del ranking
│ ├── AdBanner.js/.css # Banners publicitarios
│ ├── ContentSection.js/.css # Sección de contenido relacionado
│ └── BottomBar.js/.css # Barra inferior con navegación
├── App.js/.css # Componente principal
├── index.js/.css # Punto de entrada
└── README.md # Documentación🎯 已实施的组件
顶部栏
- 带有时间和图标的iOS状态栏
- 使用返回按钮和操作按钮进行导航
- 设计中的精确颜色和间距
头球
- 带有成功色彩的标志（
#00d689） - 带圆角边框的分类徽章
- 使用Satoshi可变字体的主标题
- 使用辅助颜色进行描述
排名卡
- 绿色背景的排名数字
- 叠加的化身用于投票
- 缩略图轮播
- 悬停状态的按钮
- 位置和功能图标
广告横幅
- 带点状边框的横幅
- 右上角标签“AD”
- 系统的中性色
内容部分
- 可滑动的水平卡片
- 半透明标签
- 带图标的统计数据
- 隐藏的水平滚动条
底部栏
- 居中放置的品牌颜色标志
- 按行组织的链接
- 底部导航栏，带有图标
- 交互式悬浮状态
📁 项目结构
src/
├── components/ # Componentes React
│ ├── TopBar.js # Barra superior
│ ├── Header.js # Encabezado principal
│ ├── RankingCard.js # Tarjeta de ranking
│ ├── AdBanner.js # Banner publicitario
│ ├── ContentSection.js # Sección de contenido
│ └── BottomBar.js # Barra inferior
├── styles/
│ └── variables.css # Variables de diseño
├── App.js # Componente principal
├── App.css # Estilos principales
├── index.js # Punto de entrada
└── index.css # Estilos globales
public/
└── assets/ # Assets de Figma
├── *.png # Imágenes
└── *.svg # Iconos vectoriales🔧 使用的技术
- React 18 - 主要框架
- CSS3 - 使用CSS变量的样式
- HTML5 - 语义结构
- JavaScript ES6+（或称为JavaScript 2015及更高版本） - 现代逻辑
- Node.js - 运行环境
📱 响应式设计
- 手机390像素宽（主设计）
- 药片，平板自动适配，带圆角边框
- 桌面居中对齐，带阴影，边框圆角
🎨 设计变量
所有变量均已定义在 src/styles/variables.css 并且包括：
- 设计系统的颜色
- 移动字体
- 原子间和分子间的间距
- 图标大小
- 线路高度
- 圆角边框
🔗 原创设计
基于Figma的设计：https://www.figma.com/design/15U0jR5MwlhYM2YhV9lvxh/Untitled?node-id=1-8014&t=pbJKRR6gXMw59buv-4
📝 开发笔记
- 该应用程序使用热重载进行快速开发
- 所有风格均遵循Figma的设计系统
- 组件完全模块化且可重复使用
- Satoshi 可变字体自动加载
- 在整个应用程序中，颜色和间距保持一致