pbl-teacher-table/src/components/pages/kindStudentEva/test/index.vue

<template>
  <div class="i_body">
    <div class="i_body_title">
      <div class="title_box">
        <div
          @click="checkType(1)"
          :class="{ active: type == 1 }"
          class="title_item"
        >
          <div></div>
          <div>观察日记</div>
        </div>
        <div
          @click="checkType(2)"
          :class="{ active: type == 2 }"
          class="title_item"
        >
          <div></div>
          <div>期末打分</div>
        </div>
        <div
          @click="checkType(3)"
          :class="{ active: type == 3 }"
          class="title_item"
        >
          <div></div>
          <div>期末打分</div>
        </div>
      </div>
    </div>
    <div class="i_body_contant">
      <Diary v-if="type == 1" :oid="oid" :userid="userid"></Diary>
      <Score v-if="type == 2" :oid="oid" :userid="userid"></Score>
      <Report v-if="type == 3" :oid="oid" :userid="userid"></Report>
    </div>
  </div>
</template>

<script>
import Diary from "./diary.vue";
import Score from "./score.vue";
import Report from "./report.vue";
export default {
  props: {
    userid: {
      type: String,
    },
    oid: {
      type: String,
    },
  },
  components: {
    Diary,
    Score,
    Report,
  },
  data() {
    return {
      type: 1,
    };
  },
  methods: {
    checkType(type) {
      this.type = type;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.i_body {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 20px 10px 0 10px;
}

.i_body_title {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 20px;
}
.i_body_title > .title_box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.i_body_title > .title_box > .title_item {
  cursor: pointer;
  color: #666666;
  background: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 70px;
  border-radius: 10px;
}

.i_body_title > .title_box > .title_item > div:last-child {
  margin-left: 10px;
}

.i_body_title > .title_box > .title_item:nth-child(1) div:first-child,
.i_body_title > .title_box > .active:nth-child(1) div:first-child {
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/diary.png");
}
.i_body_title > .title_box > .title_item:nth-child(2) div:first-child,
.i_body_title > .title_box > .active:nth-child(2) div:first-child {
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/score.png");
}
.i_body_title > .title_box > .title_item:nth-child(3) div:first-child,
.i_body_title > .title_box > .active:nth-child(3) div:first-child {
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/report.png");
}
.i_body_title > .title_box > .active {
  background: #f8fafe;
}

.i_body_title > .title_box > .active:nth-child(1) div:first-child {
  background-image: url("../../../../assets/icon/studentEva/isDiary.png") !important;
}
.i_body_title > .title_box > .active:nth-child(2) div:first-child {
  background-image: url("../../../../assets/icon/studentEva/isScore.png") !important;
}
.i_body_title > .title_box > .active:nth-child(3) div:first-child {
  background-image: url("../../../../assets/icon/studentEva/isReport.png") !important;
}
.i_body_title > .title_box > .active > div:last-child {
  color: #4288fc;
}
.i_body_contant {
  margin: 0 auto;
  width: calc(100% - 40px);
  height: calc(100% - 90px);
  background: #f8fafe;
  border-radius: 10px;
}
</style>