css 信息框所需的特定设计

kjthegm6 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(113)

我有一个文本框的设计，我需要发展。Figma中，设计如下：

目前，我已经开发了以下内容：

<style>.info-box {
  width: 300px;
  margin: 16px;
}

.info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

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

.info-icon {
  margin-left: 8px;
  font-size: 16px;
  color: #2196f3;
}

.info-content {
  font-size: 14px;
}

.info-number-container {
  display: flex;
  flex-direction: column;
}

</style>

<mat-card class="info-box">
  <mat-card-content>
    <div class="info-section">
      <span class="info-header mat-h2 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-content info-number">1245</span>
          <span class="info-pendientes">pendientes para parametrizar</span>
        </div>
      </div>
    </div>
    <hr>
    <div class="info-section">
      <span class="info-header mat-h2 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-content info-number">1242</span>
          <span class="info-pendientes">pendientes para parametrizar</span>
        </div>
      </div>
    </div>
  </mat-card-content>
</mat-card>

正如你所看到的，我没有能够使用Angular Material实现预期的结果。我如何修改这段代码，使它看起来与Figma中的设计完全一样？

css

来源：https://stackoverflow.com/questions/76175656/specific-design-needed-for-an-informative-box

1条答案

按热度按时间

11dmarpk1#

是否需要使用mat-card？如果没有，这将是一个更简单的解决方案：stackblitz demo。
简而言之，您的模板可以是：

<div>
  <ng-container *ngFor="let card of cards; let odd = odd;">
    <div [ngClass]="{ 'div-wrapper-odd': odd, 'div-wrapper-even': !odd }">
      <div class="div-icon">
        <mat-icon class="info-icon">{{ card.icon }}</mat-icon>
      </div>
      <div class="div-content">
        <div class="div-content-top">
          <div class="div-content-top-inside">
            <span class="span-title">{{ card.title }}</span>
          </div>
          <div class="div-content-top-inside">
            <span class="span-number">{{ card.number }}</span>
          </div>
        </div>
        <div class="div-content-bottom">
          <span>{{ card.text }}</span>
        </div>
      </div>
    </div>
  </ng-container>
</div>

你把你的卡片作为一个对象数组：

cards: any = [
    {
      icon: 'info',
      title: 'Equipos',
      number: '1245',
      text: 'Pendientes por parametrizar',
    },
    {
      icon: 'info',
      title: 'Tarifas',
      number: '2451',
      text: 'Pendientes por parametrizar',
    },
  ];

(Or如果有特殊卡类型，请使用它，而不是any）。
你的CSS可以是：

.info-icon {
  font-size: 30px;
  color: #883995;
}

.div-wrapper-odd {
  padding: 10px;
  border: 2px solid #dfdfe0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top: 1px solid #b4b4b4;
  background-color: white;
}

.div-wrapper-even {
  padding: 10px;
  border: 2px solid #dfdfe0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px solid #b4b4b4;
  background-color: white;
}

.div-icon {
  display: inline-block;
  height: 30px;
  margin-right: 15px;
}
.div-content {
  display: inline-block;
  height: 30px;
}

.div-content-top {
  font-size: 16px;
  font-weight: 800;
  height: 22px;
}

.div-content-top-inside {
  width: 80px;
  display: inline-block;
}

.span-number {
  color: #883995;
}

.span-title {
  color: #035dab;
}

.div-content-bottom {
  font-size: 14px;
  font-weight: normal;
  color: #035dab;
}

我保留了类div-wrapper-even和div-wrapper-odd的细节，而不是使用另一个具有重复样式的类，以防您需要“卡片”之间的进一步差异。
当然，您可能需要进一步样式化元素-（更）响应，在容器中以不同的方式定位等。

赞(0）回复(0）举报 2023-05-08

我来回答

css 信息框所需的特定设计

1条答案

相关问题

热门标签

最新问答