<template>
  <div class="cardBox">
    <van-tabs v-model="tabsName" @change="tabsChange">
      <van-tab title="小学"></van-tab>
      <van-tab title="初中"></van-tab>
      <van-tab title="高中"></van-tab>
    </van-tabs>

    <div class="schoolCss">
      <div
        class="school-one"
        v-for="(v, i) in schoolList"
        :key="i"
        @click="toActive"
      >
        {{ v.schoolName }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabsName: 0,
      schoolList: [
        { schoolName: "柯桥区实验小学" },
      ],
    };
  },
  watch: {
    tabsName(val) {
      console.log(val);
      this.schoolList = [];
      if (val == 0) {
        this.getList();
      } else if (val == 1) {
        
      } else if (val == 2) {
      }
    },
  },
  methods: {
    //详情新闻
    toDetails() {
      this.$router.push({ name: "pageDetails" });
    },
    toActive() {
      this.$router.push({ name: "achievementsOne" });
    },
    //切换
    tabsChange() {},
    getList() {
      this.schoolList = [
        { schoolName: "柯桥区实验小学" },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.cardBox {
  padding: 2vw 0;
  box-sizing: border-box;

  .schoolCss {
    font-size: 4.5vw;
    margin: 5vw;

    .school-one {
      margin: 4vw 0;
      letter-spacing: 0.3vw;
      color: #666;
      font-size: 4.3vw;
    }
  }
}
</style>