bootstrap 布局圆角卡片信息卡

 

.product-container {
      width: 260px;
      margin: 0 auto;
      border-radius: 10px;
      background: #f6f8f7;

      .name {
        border-bottom: 1px solid @gray-light;
        font-size: 20px;
        padding: 2px;
      }
      .interest {
        color: #1da427;
        font-size: 70px;
        font-weight: bold;
        padding: 0px;
        margin-bottom: -30px;

        .percent {
          font-size: 31px;
        }
      }
      .intro {
        padding: 5px;
      }
      .strong {
        padding: 3px;
        font-size: 17px;
        color: @white;
        background: #326c84;
        border-radius: 0 0 10px 10px;
      }
    }

 

<div class="row">
  <div class="col-xs-4 feature">
    <div class="product-container">
    <div class="name">融e富·定盈</div>
    <div class="interest">6<span class="percent">%</span></div>
    <div class="intro">3个月起 100元起投</div>
    <div class="strong">专业选择 积累财富</div>
  </div>
</div>

 

更多实例应用扫码体验：