pbl-student-table/src/components/checkEnglishVoice new/component/studentDetail.vue

<template>
  <div class="sMesBox">
    <div class="top">
      <div class="left">
        <div class="tx">
          <img
            :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
            alt=""
          />
        </div>
        <div class="sMessage">
          <div>李二妞</div>
          <div>2024-04-01 23:59</div>
        </div>
      </div>
      <div class="right">
        <div>上一步</div>
        <div>下一步</div>
      </div>
    </div>
    <div class="tips">
      本轮对话的预设时间是<span style="color: #3681fc">{{ time }}min</span
      >，该学生<span style="color: #e44">超时{{ maxTime }}min</span>
      ，对话总共用了<span style="color: #3681fc">{{ turn }}</span
      >轮。
    </div>
    <div class="lookWho">
      <div :class="type == 0 ? 'isLook' : ''" @click="type = 0">查看报告</div>
      <div :class="type == 1 ? 'isLook' : ''" @click="type = 1">查看对话</div>
    </div>
    <report v-if="type == 0"></report>
    <talk v-if="type == 1"></talk>
  </div>
</template>

<script>
import report from "./components/report";
import talk from "./components/talk";
export default {
  components: {
    report,
    talk,
  },
  data() {
    return {
      time: "10",
      maxTime: "5",
      turn: "6",
      type: 0,
    };
  },
};
</script>

<style scoped>
.sMesBox {
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 0 0 15px 0;
  border-bottom: 2px solid #e7e7e7;
}

.left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
}
.tx {
  width: 45px;
  height: 45px;
}

.tx > img {
  width: 100%;
  height: 100%;
}

.sMessage {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin: 0 0 0 10px;
  height: 100%;
  justify-content: space-between;
}

.sMessage > div:last-child {
  font-size: 12px;
  color: #757a83;
}

.sMesBox > .top > .right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
}

.sMesBox > .top > .right > div {
  cursor: pointer;
  color: #4c8efc;
}

.sMesBox > .top > .right > div:first-child {
  margin: 0 10px 0 0;
}

.tips {
  margin: 10px 0;
  color: #9d9d9d;
}

.lookWho {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 0 10px 0;
}

.lookWho > div {
  width: 100px;
  height: 35px;
  font-size: 16px;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  margin: 0 10px 0 0;
}

.isLook {
  border-bottom: 2px solid #3681fc;
  color: #4a8dfc;
}
</style>