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 class="backClassCss" @click="backClaBtn">返回</div>
    </div>
    <div class="i_body_contant">
      <Diary
        v-if="type == 1"
        :oid="oid"
        :userid="userid"
        :org="org"
        :cid="cid"
      ></Diary>
      <Score
        v-if="type == 2"
        :oid="oid"
        :userid="userid"
        :org="org"
        :cid="cid"
      ></Score>
      <Report v-if="type == 3" :oid="oid" :userid="userid" :org="org"></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
    },
    org: {
      type: String
    },
    cid: {
      type: String
    }
  },
  components: {
    Diary,
    Score,
    Report
  },
  data() {
    return {
      type: 1,
      role: ""
    };
  },
  methods: {
    checkType(type) {
      this.type = type;
    },
    backClaBtn() {
      this.$router.push(
        `/studentEva?userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.cid}&role=${this.role}`
      );
    }
  },
  mounted() {
    this.role = this.$route.query.role;
    // console.log('this.$route.query',this.$route.query);
  }
};
</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;
  box-sizing: border-box;
  width: calc(100% - 25px);
  padding-right: 45px;
}
.i_body_title > .title_box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.i_body_title > .backClassCss {
  background-color: #3681fc;
  font-size: 16px;
  color: #fff;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
}
.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;
  border-radius: 10px 10px 0 0;
}

.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: 0 10px 10px 10px;
  overflow: hidden;
}
</style>