xt_pad/src/pages/waitingRoom/components/pastData.vue

<template>
   <div class="plate-box">
    <h2 class="title"><span class="line"></span><p>{{title}}</p><span class="line"></span> </h2> 
    <div class="tableTit " >   
        <ul>
             <li v-for="(item,index) in tableTit" :key="index" :value="item.value" >{{item}}</li>
        </ul>
    </div>
    <div class="tableDate" >   
        <ul>
             <li v-for="(item,index) in tableDate" :key="index" :value="item.value" >
               <span>{{item.data}}</span>
               <span>{{item.model}}</span>
               <span>{{item.weightBefore}}</span>
               <span>{{item.weightafter}}</span>
               <span>{{item.set}}</span>
               <span>{{item.actual}}</span>
             </li>
        </ul>
    </div>
    
  </div>    
</template>

<script>
export default {
  name: "pastData",
  data() {
    return {
      title: "往期数据 ",
      tableTit: [
        "日期",
        "透析模式",
        "透前体重(kg)",
        "透后体重(kg)",
        "设定脱水(L)",
        "实际脱水(L)"
      ],
      tableDate: [
        {
          value: "1",
          data: "05-18 ",
          model: "HD",
          weightBefore: "10",
          weightafter: "30",
          set: "20",
          actual: "3"
        },
        {
          value: "1",
          data: "05-18 ",
          model: "HD",
          weightBefore: "10",
          weightafter: "30",
          set: "20",
          actual: "3"
        },
        {
          value: "1",
          data: "05-18 ",
          model: "HD",
          weightBefore: "10",
          weightafter: "30",
          set: "20",
          actual: "3"
        },
        {
          value: "1",
          data: "05-18 ",
          model: "HD",
          weightBefore: "10",
          weightafter: "30",
          set: "20",
          actual: "3"
        }
      ]
    };
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tableTit {
  background: $main-color;
  color: $text-color;
  @include box-sizing;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-center;
    li {
      @include flex;
      border-right: 2px #fff solid;
      font-size: 0.3rem;
      height: 0.88rem;
      line-height: 0.88rem;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.tableDate {
  background: $text-color;
  color: $pgh-color;
  @include box-sizing;
  ul {
    li {
      font-size: 0.3rem;
      height: 0.88rem;
      line-height: 0.88rem;
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-center;
      span {
        @include flex;
        border-right: 2px #fff solid;
        border-bottom: 2px #fff solid;
        background: #ecf5ff;
        display: inline-block;
        height: 0.88rem;
        line-height: 0.88rem;
      }
    }
    &:last-child {
      border-right: none;
    }
  }
}
</style>