pbl-teacher-table/src/components/pages/dataBoardNew/index.vue

<template>
  <div class="body">
    <div class="db_header">
      <!-- <div class="logoTop">Logo</div> -->
      <div class="db_header_title">
        <div v-if="type == 1">综合数据中心</div>
        <div v-if="type == 2">课程数据中心</div>
        <div v-if="type == 3">学生数据中心</div>
        <div v-if="type == 4">教师数据中心</div>
      </div>
      <div class="db_check">
        <div :class="{ active: type == 1 }" @click="setType(1)">综合数据</div>
        <div :class="{ active: type == 2 }" @click="setType(2)">课程数据</div>
        <div :class="{ active: type == 5 }" @click="setType(5)">项目数据</div>
        <div :class="{ active: type == 3 }" @click="setType(3)">学生数据</div>
        <div :class="{ active: type == 4 }" @click="setType(4)">教师数据</div>
      </div>
    </div>
    <div class="db_body">
      <school v-if="type == 1" :oid="oid" :org="org"></school>
      <course v-if="type == 2" :oid="oid" :org="org"></course>
      <project v-if="type == 5" :oid="oid" :org="org"></project>
      <student v-if="type == 3" :oid="oid" :org="org"></student>
      <teacher v-if="type == 4" :oid="oid" :org="org"></teacher>
    </div>
  </div>
</template>

<script>
import school from "./school";
import course from "./course";
import student from "./student";
import teacher from "./teacher";
import project from "./project";
export default {
  components: {
    school,
    course,
    student,
    teacher,
    project,
  },
  data() {
    return {
      type: 1,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
    };
  },
  methods: {
    setType(type) {
      this.type = type;
    },
  },
};
</script>

<style scoped>
.body {
  height: 100%;
  width: 100%;
  min-width: 1200px;
  min-height: 750px;
}

.db_header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  position: relative;
  background: #fff;
  align-items: center;
}

.logoTop {
  position: absolute;
  left: 30px;
}

.db_header_title {
  font-weight: bold;
  font-size: 20px;
}
.db_header_title > div {
  position: relative;
  z-index: 9;
}
.db_header_title > div:after {
  content: "";
  position: absolute;
  width: 250px;
  height: 10px;
  bottom: -30px;
  left: -85px;
  border-top: 20px solid #fff;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  -webkit-transform: skew(20deg);
  transform: skew(359deg);
  z-index: 1;
}

.db_check {
  display: flex;
  align-items: center;
  position: absolute;
  right: 30px;
  height: 100%;
}

.db_check > div {
  padding: 14px 20px;
  cursor: pointer;
}

.db_check > div:hover {
  background: #edf4ff;
}

.db_check > div.active {
  font-weight: 700;
  color: #297bff;
  background: #edf4ff;
  border-top: 2px solid #297bff;
  box-sizing: border-box;
}

/* .db_check > div + div {
  margin-left: 30px;
} */

.db_body {
  height: calc(100% - 50px);
  width: 100%;
  overflow: auto;
  background: rgb(231, 242, 252);
}
</style>