<template>
  <div>
    <div class="menuTab clearfix">
      <ul>
        <li
          v-for="(item, i) in menuList"
          :class="index == i ? 'active' : ''"
          :key="i"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <table class="table">
      <tr>
        <th width="9%">序号</th>
        <th width="15.4%">采样日期</th>
        <th width="42%">检查名称</th>
        <th width="16.6%">XX</th>
        <th width="16.6%">XX</th>
      </tr>
      <tr v-for="(item, index) in tableDate" :key="index" :value="item.value">
        <td>{{ item.num }}</td>
        <td>{{ item.data }}</td>
        <td>{{ item.results }}</td>
        <td>{{ item.not1 }}</td>
        <td>{{ item.not2 }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "CaseHistory",
  data() {
    return {
      index: 0,
      menuList: [
        { value: "1", label: "首页" },
        { value: "2", label: " 检验" },
        { value: "3", label: " 检查" }
      ],
      tableTit: [
        {
          num: "序号",
          data: "采样日期 ",
          results: "检查名称",
          not1: "XX",
          not2: "XX"
        }
      ],
      tableDate: [
        {
          num: "1",
          data: "2018-20-15 ",
          results: "XX",
          not1: "XX",
          not2: "XX"
        },
        {
          num: "1",
          data: "2018-20-15 ",
          results: "XX",
          not1: "XX",
          not2: "XX"
        },
        {
          num: "1",
          data: "2018-20-15 ",
          results: "XX",
          not1: "XX",
          not2: "XX"
        },
        {
          num: "1",
          data: "2018-20-15 ",
          results: "XX",
          not1: "XX",
          not2: "XX"
        }
      ]
    };
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.menuTab {
  background: $text-color;
  padding: 0.25rem 0 0 0;
  color: $text-color;
  font-size: 0.3rem;
  @include box-sizing;
  ul {
    @include text-align;
    margin: 0 3.6rem;
    li {
      border-radius: 50px;
      padding: 0.16rem 0;
      width: 1.96rem;
      margin: 0 0.32rem 0.29rem 0.32rem;
      border: 1px #7b8a97 solid;
      color: #7b8a97;
      font-size: 0.28rem;
      float: left;
      &.active {
        background: $main-color;
        color: $text-color;
        border: 1px $main-color solid;
      }
    }
  }
}
.table {
  width: 100%;
  overflow: hidden;
  font-size: 0.3rem;
  text-align: center;
  border: $border-color;
  background: $text-color;
  padding: 0.28rem 0;
  margin: 0.3rem 0 0 0;
  tr {
    padding: 0;
    margin: 0;
    padding: 0.1rem 0;
    th {
      background: $main-color;
      border: none;
      color: #fff;
      padding: 0;
      margin: 0;
      height: 0.88rem;
      line-height: 0.88rem;
      font-weight: normal;
    }
  }
}
</style>
