xt_pad/src/pages/main/dialysis/DialysisTab.vue

<template>
  <div class="fixedBox">
    <div class="nav">
      <ul>
        <li
          v-for="(item, i) in [
            '长期透析处方',
            '透析记录',
            '排班信息',
            '宣教信息'
          ]"
          :key="i"
          :class="index == i ? 'active' : ''"
          @click="ClickTab(i)"
        >
          {{ item }}
        </li>
      </ul>
    </div>

    <div class="tab-content">
      <long-table v-show="index == 0" title="长期透析处方"></long-table>
      <record-table v-show="index == 1" title="透析记录"></record-table>
      <!--<advice-table v-show="index==2" title="医嘱信息"></advice-table>-->
      <schedul-table v-show="index == 2" class="排班信息"></schedul-table>
      <mission-table v-show="index == 3" class="宣教信息"></mission-table>
    </div>
  </div>
</template>

<script>
import LongTable from "./LongTable";
import SchedulTable from "./SchedulTable";
import RecordTable from "./RecordTable";
import AdviceTable from "./AdviceTable";
import MissionTable from "./MissionTable";
export default {
  name: "DialysisTab",
  data() {
    return {
      index: 0
    };
  },
  components: {
    LongTable,
    SchedulTable,
    RecordTable,
    AdviceTable,
    MissionTable
  },
  methods: {
    ClickTab: function(tabIndex) {
      this.index = tabIndex;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.fixedBox {
  padding-top: 38px;
  // background: #fff;
  min-height: calc(100vh - 64px);
  // @media only screen and (min-width: 376px) and (max-width: 737px) {
  //   padding-top: 46px;
  // }
  @media only screen and (min-width: 500px) {
    padding-top: 82px;
  }
  // @media only screen and (min-width: 813px) and (max-width: 1024px) {
  //   padding-top: 74px;
  // }
  .nav {
    border-bottom: 1px #e5e5e5 solid;
    position: fixed;
    top: 40px;
    @media only screen and (min-width: 500px) {
      top: 63px;
    }
    // @media only screen and (min-width: 813px) and (max-width: 1024px) {
    //   top: 64px;
    // }
    // @media only screen and (min-width: 376px) and (max-width: 668px) {
    //   top: 50px;
    // }
    right: 0;
    z-index: 66;
    left: 0;
    background: #fff;
    ul {
      width: 80%;
      margin: 0 auto;
      @include box-sizing;
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      li {
        font-size: 0.45rem;
        float: left;
        color: $pgh-color;
        padding: 0.3rem 0;
        cursor: pointer;
      }
      .active {
        position: relative;
        &::before {
          width: 100%;
          height: 2px;
          color: $main-color;
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          background: $main-color;
        }
      }
    }
  }
}
</style>