<template>
  <view>
    <div class="tableHead">
      <div class="td t1">序号</div>
      <div class="td t2">库水位(m)</div>
      <div class="td t3">库容(万m³)</div>
    </div>
    <div class="tableBody">
      <div v-for="(item, index) in tableData" class="tableRow">
        <div class="td t1">{{ index + 1 }}</div>
        <div class="td t2">{{ item.rz ? item.rz : "" }}</div>
        <div class="td t3">{{ item.w}}</div>
      </div>
      <div :style="{ height: '80px' }">
      </div>
    </div>
  </view>
    
</template>

<script>
  import moment from "moment"
   export default {
     props:{
       tableData:{
         type:Array,
         default:[],
       }
     },
   }
</script>

<style lang="scss" scoped>
 .tableHead {
    width: 100%;
    margin-top: 5px;
    height: 50px;
    background-color: #e4f2fe;
    display: flex;
    color: #208FEE;
  }

  .tableBody {
    width: 100%;
    height: calc(60vh - 200px);
    // background-color: #f7f7f7; //#ffffff;
    overflow-y: scroll;
  }

  .tableRow {
    width: 100%;
    height: 46px;
    display: flex;
    border-bottom: 1px solid #eee;
    background-color: #ffffff;
  }

  .td {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }

  .t1 {
    width: 25%;
  }

  .t2 {
    width: 50%;
  }

  .t3 {
    width: 25%;
  }
</style>