如何基于Angular Material实现Figma中的信息框设计？

以下是针对你的代码的具体调整方案，覆盖常见的Figma与Angular Material实现差异：

核心调整点 #

• 图标与文本间距修正: 原代码中图标使用margin-left会导致图标与标题文本分离，改为margin-right实现正确的左右排列。
• 文本层级强化: 针对标题、数字、辅助文本设置符合Figma的字体大小、权重与颜色。
• 分隔线样式统一: 替换默认<hr>为Angular Material的mat-divider，并调整样式匹配设计。
• 卡片内边距与布局优化: 修正卡片内容的内边距，确保各元素间距与Figma一致。
• 数字文本突出显示: 增大数字字体尺寸并设置加粗，强化视觉重点。

修改后的完整代码 #

CSS样式 #

.info-box {
  width: 300px;
  margin: 16px;
  border-radius: 8px; /* 匹配Figma圆角 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 自定义阴影 */
}

.info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0; /* 调整上下内边距 */
}

.info-header {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.info-icon {
  margin-right: 8px; /* 修正图标间距 */
  font-size: 20px; /* 匹配Figma图标大小 */
  color: #2196f3;
}

.info-number {
  font-size: 24px; /* 增大数字尺寸 */
  font-weight: bold;
  color: #333; /* 数字颜色 */
}

.info-pendientes {
  font-size: 12px; /* 辅助文本大小 */
  color: #666; /* 辅助文本颜色 */
  text-align: right; /* 右对齐辅助文本 */
}

.info-number-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右侧内容整体右对齐 */
}

/* 覆盖Mat-Card默认内边距 */
mat-card-content {
  padding: 16px;
}

HTML结构 #

<mat-card class="info-box">
  <mat-card-content>
    <div class="info-section">
      <span class="info-header mat-primary">
        <mat-icon class="info-icon mat-icon-rtl-mirror">info</mat-icon>
        Equipos
      </span>
      <div class="info-details">
        <div class="info-number-container">
          <span class="info-number">1245</span>
          <span class="info-pendientes">pendientes para parametrizar</span>
        </div>
      </div>
    </div>
    <mat-divider></mat-divider> <!-- 使用Angular Material分隔线 -->
    <div class="info-section">
      <span class="info-header mat-primary">
        <mat-icon class="info-icon mat-icon-rtl-mirror">info</mat-icon>
        Tarifas
      </span>
      <div class="info-details">
        <div class="info-number-container">
          <span class="info-number">1242</span>
          <span class="info-pendientes">pendientes para parametrizar</span>
        </div>
      </div>
    </div>
  </mat-card-content>
</mat-card>

额外适配建议 #

• 如果Figma设计中有特定的颜色值，直接替换CSS中的颜色代码（如#2196f3）。
• 调整border-radius和box-shadow参数以匹配设计中的卡片样式。
• 若字体家族有要求，添加font-family属性到对应文本类。

内容的提问来源于stack exchange，提问作者christian alvarez