FE-V2-PC/src/views/secureAccess/studentinfo/index.vue

<!--学生卡信息审核-->
<template>
  <div class="app-container studentinfo">
    <div class="top-big-box">
      <div>
        <p :class="pageType==1?'color_one':'color_99'" @click="tableClick(1)">待审核</p>
        <p :class="{'back_one':pageType==1}"></p>
      </div>
      <div>
        <p :class="pageType==2?'color_one':'color_99'" @click="tableClick(2)">已通过</p>
        <p :class="{'back_one':pageType==2}"></p>
      </div>
      <div>
        <p :class="pageType==3?'color_one':'color_99'" @click="tableClick(3)">未通过</p>
        <p :class="{'back_one':pageType==3}"></p>
      </div>
    </div>
    <pending v-if="pageType==1"></pending>
    <passed v-if="pageType==2"></passed>
    <failed v-if="pageType==3"></failed>
  </div>
</template>

<script>
import pending from "./pending.vue";
import passed from "./passed.vue";
import failed from "./failed.vue";

export default {
  components: {
    pending,
    passed,
    failed
  },
  name: "Studentinfo",
  data() {
    return {
      pageType:1,
    };
  },
  created() {

  },
  methods: {
    //选项卡切换
    tableClick(type){
      if(this.pageType!=type){
        this.pageType = type;
      }
    },
  }
};
</script>

<style scoped lang="scss">
  .studentinfo {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:20px!important;
    .top-big-box{
      display: flex;
      border-bottom:2px solid #E0E0E0;
      margin-bottom:32px;
      div{
        cursor:pointer;
        width:128px;
        p:nth-child(1){
          line-height:58px;
          font-size:18px;
          text-align: center;
          margin:0;
        }
        p:nth-child(2){
          width:60px;
          height:4px;
          margin:0 auto;
          border-radius:1px;
        }
      }
    }
  }
</style>