ionic2中的订单详情页面

       这个订单详情页面大概长这样子：

  

       html如下：

<ion-header no-shadow>

  <ion-navbar class="page-navbar">
    <ion-title>订单详情</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <section class="order-detail-header">
    <ion-row>
      <ion-col width-33><ion-icon name="paper"></ion-icon></ion-col>
      <ion-col width-67>
        <h4>订单金额：<span>￥395</span></h4>
        <p>订单号：201610260007xxxxxx</p>
      </ion-col>
    </ion-row>
  </section>


  <section class="block-item">
    <section class="block-item-content">
      <section class="block-item-header">
        <ion-icon name="cart"></ion-icon>订单信息
      </section>

      <ion-list>
        <ion-item>
          <ion-row>
            <ion-col width-33>订单号</ion-col>
            <ion-col width-67>201610260007xxxxxx</ion-col>
          </ion-row>
        </ion-item>

        <ion-item>
          <ion-row>
            <ion-col width-33>业务类型</ion-col>
            <ion-col width-67>xxx业务</ion-col>
          </ion-row>
        </ion-item>

        <ion-item>
          <ion-row>
            <ion-col width-33>提交时间</ion-col>
            <ion-col width-67>2016-10-26 16:06:13</ion-col>
          </ion-row>
        </ion-item>

        <ion-item>
          <ion-row>
            <ion-col width-33>付款时间</ion-col>
            <ion-col width-67>未支付</ion-col>
          </ion-row>
        </ion-item>
      </ion-list>
    </section>
  </section>

  <section class="block-item">
    <section class="block-item-content">
      <section class="block-item-header">
        <ion-icon name="card"></ion-icon>支付信息
      </section>

      <ion-list>
        <ion-item>
          <ion-row>
            <ion-col width-33>服务费</ion-col>
            <ion-col width-67>￥120.00</ion-col>
          </ion-row>
        </ion-item>

        <ion-item>
          <ion-row>
            <ion-col width-33>代金券</ion-col>
            <ion-col width-67>￥0.00</ion-col>
          </ion-row>
        </ion-item>

        <ion-item>
          <ion-row>
            <ion-col width-33>订单金额</ion-col>
            <ion-col width-67>￥120.00</ion-col>
          </ion-row>
        </ion-item>

        <ion-item>
          <ion-row>
            <ion-col width-33>支付金额</ion-col>
            <ion-col width-67>￥120.00</ion-col>
          </ion-row>
        </ion-item>
      </ion-list>
    </section>
  </section>

  <div class="order-detail-btn">
    <button ion-button block round color="main-color">支付订单</button>
  </div>

  <div class="order-detail-btn">
    <button ion-button block round color="favorite">取消订单</button>
  </div>

  <div class="page-end-separator"></div>
</ion-content>

      scss文件：

// 定义顶部标题栏样式
.page-navbar {
  padding-left: 1rem;
  padding-right: 0.3rem;
  color: white;
  @extend .one-line-ellipsis;

  // 后退按钮的样式
  .back-button.show-back-button {
    min-width: 0;
    margin-left: 0; padding-left: 0;
    ion-icon {
      margin-left: 0; padding-left: 0;
    }
  }

  .bar-button-icon-right ion-icon {
    padding-left: .2rem;
  }

  .toolbar-background {
    background-color: color('main-color');
  }
  .toolbar-title {
    color: white;
    font-weight: normal;
  }
  &.toolbar {
    //min-height: 4.9rem;
    min-height: 4.6rem;
  }

  span, ion-icon {
    color: white;
  }

  ion-icon {
    font-size: 1.8em;
  }
}
.header-ios { //设置ios标题栏高度
  .page-navbar.toolbar {
    min-height: 4rem;
  }
}

.order-detail-header {
  background-color: #53515c;
  height: 7.5rem;

  ion-row {
    height: 100%;
    @extend .vertical-middle;

    ion-col:first-child {
      text-align: center;
    }
    ion-icon {
      font-size: 3.5rem;
      color: #A8A6B1;
    }

    h4, p {
      margin: 0.4rem 0;
    }
    h4 {
      color: white;
      font-size: 1.7rem;

      span {
        color: #4ecba9;
      }
    }
    p {
      color: #A8A6B1;
    }
  }
}

.block-item {
  margin: 10px 0;

  .block-item-content {
    font-size: 1.4rem;
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    display: block;
    overflow: hidden;

    .block-item-header {
      padding: 16px;
      font-size: 1.6rem;
      color: #222;
      border-left: 5px solid #2eb3fe;
      //border-bottom: 1px solid #dedede;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      ion-icon {
        margin-right: 16px;
      }
    }

    .item:last-child {
      border-bottom: none;
    }

    ion-list ion-col {
      margin: 0; padding: 0;
    }

    ion-col:last-child {
      text-align: right;
      color: #999;
    }
  }
}


// 支付订单或取消订单的按钮
.order-detail-btn {
  padding: 0.4rem 1.8rem;
}