pbl-student-table/src/components/classRoomHelper/index.vue

<template>
  <div class="ch_box" ref="ch_box">
    <div class="ch_content_box" v-if="type == 1">
      <searchArea v-show="itemType == 1" />
      <taskArea v-show="itemType == 2" />
      <dialogArea v-show="itemType == 3" />
    </div>
    <div class="ch_nav_box">
      <div class="ch_nav_box_top">
        <div @click="$emit('backPage')">
          <el-tooltip class="item" effect="dark" content="返回" placement="top">
            <img :src="require('../../assets/icon/course/return.png')" alt="" />
          </el-tooltip>
        </div>

        <div @click="$emit('refresh')">
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <img
              :src="require('../../assets/icon/course/refresh.png')"
              alt=""
            />
          </el-tooltip>
        </div>

        <div @click="$emit('authority')">
          <el-tooltip class="item" effect="dark" content="权限" placement="top">
            <img
              :src="require('../../assets/icon/course/setting.png')"
              alt=""
            />
          </el-tooltip>
        </div>
      </div>
      <div class="ch_nav_box_middle">
        <div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 1 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(1)"
        >
          <img
            v-if="itemType == 1"
            :src="require('../../assets/icon/course/up_active.png')"
          />
          <img
            v-if="itemType != 1"
            :src="require('../../assets/icon/course/up.png')"
          />
          <!-- <span :style="`background:url(${itemType==1?require('../../assets/icon/course/up_active.png'):require('../../assets/icon/course/up.png')});`"></span> -->
          <div>搜索</div>
        </div>
        <div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 2 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(2)"
        >
          <img
            v-if="itemType == 2"
            :src="require('../../assets/icon/course/task_active.png')"
          />
          <img
            v-if="itemType != 2"
            :src="require('../../assets/icon/course/task.png')"
          />
          <!-- <span :style="`background:url(${itemType==2?require('../../assets/icon/course/task_active.png'):require('../../assets/icon/course/task.png')});`"></span> -->
          <div>任务</div>
        </div>
        <div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 3 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(3)"
        >
          <img
            v-if="itemType == 3"
            :src="require('../../assets/icon/course/dialog_active.png')"
          />
          <img
            v-if="itemType != 3"
            :src="require('../../assets/icon/course/dialog.png')"
          />
          <!-- <span :style="`background:url(${itemType==3?require('../../assets/icon/course/dialog_active.png'):require('../../assets/icon/course/dialog.png')});`"></span> -->
          <div>对话</div>
        </div>
      </div>
      <div class="ch_nav_box_bottom">
        <div @click.stop="$emit('goStep', 0)">
          <el-tooltip
            class="item"
            effect="dark"
            content="上一步"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/last.png')" />
          </el-tooltip>
        </div>

        <div @click.stop="$emit('goStep', 1)">
          <el-tooltip
            class="item"
            effect="dark"
            content="下一步"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/next.png')" />
          </el-tooltip>
        </div>

        <div @click="openSetting">
          <el-tooltip
            class="item"
            effect="dark"
            :content="type == 0 ? '展开' : '折叠'"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/menu.png')" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import searchArea from "./component/searchArea.vue";
import taskArea from "./component/taskArea.vue";
import dialogArea from "./component/dialogArea.vue";
export default {
  emits: ["refresh", "goStep", "backPage","authority"],
  components: {
    searchArea,
    taskArea,
    dialogArea
  },
  data() {
    return {
      type: 0,
      itemType: 0 //0--无  1-搜索  2-任务 3-对话
    };
  },
  mounted() {
    this.setWidth();
  },
  methods: {
    setWidth() {
      let w = this.$refs.ch_box;
      let w2 = w.offsetWidth + 30 + "px";
      this.$emit("setWidth", w2);
    },
    openSetting() {
      this.type = this.type == 1 ? 0 : 1;
      this.$nextTick(() => {
        this.setWidth();
      });
    },
    changeItemType(type) {
      this.type = 0;
      this.openSetting();
      this.itemType = type;
    }
  }
};
</script>

<style scoped>
.ch_box {
  width: auto;
  background: rgb(255, 255, 255);
  position: fixed;
  height: calc(100% - 40px);
  border-radius: 10px;
  box-sizing: border-box;
  right: 20px;
  overflow: hidden;
  display: flex;
}

.ch_nav_box {
  height: 100%;
  width: 65px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.ch_content_box {
  width: 400px;
  height: 100%;
  border-right: 2px solid #e7e7e7;
}

.ch_nav_box_bottom {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-top: solid 1px #eaeaea;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ch_nav_box_middle {
  width: 100%;
  height: auto;
  display: flex;
  box-sizing: border-box;
  border-top: solid 1px #eaeaea;
  flex-direction: column;
  justify-content: space-between;
}

.ch_nav_box_middle_item {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
}

/* .ch_nav_box_middle_item:hover{
			background-color: rgb(195, 215, 247);
		} */

.ch_nav_box_middle_item_active {
  background-color: #3681fc;
  color: white;
}

.ch_nav_box_middle_item > img {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

/* .ch_nav_box_middle_item>span{
			width: 24px;
			height: 24px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		} */

.ch_nav_box_bottom > div {
  width: 100%;
  height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ch_nav_box_bottom > div > img {
  width: 24px;
  height: 24px;
}

.ch_nav_box_top {
  width: 100%;
  height: auto;
}
.ch_nav_box_top > div {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ch_nav_box_top > div > img {
  width: 24px;
  height: 24px;
}
</style>