学生端英语口语页面

src/components/EnglishVoice2/component/report.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="reportBox"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.reportBox {
+  background: #fff;
+  width: 800px;
+  height: 300px;
+  position: absolute;
+  bottom: -320px;
+  right: 45px;
+}
+</style>

src/components/EnglishVoice2/component/testRole jiu.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="d_box" v-loading="isloading">
+        <div class="dialog" v-for="(item, index) in answerArray" :key="index" :class="{ dialog_right: item.isY }">
+            <div class="d_img">
+                <img :src="item.img ? item.img : require('../../../assets/icon/englishVoice/icon_portal.png')" alt="">
+            </div>
+            <div class="d_content">
+                <div class="d_name" v-if="item.name">{{ item.name }}</div>
+                <div class="d_voice" v-if="item.voice">
+                    <mini-audio :audio-source="item.voice" class="audio_class"></mini-audio>
+                </div>
+                <div :class="{d_log: !item.isY, d_log2: item.isY}" v-if="item.content">{{ item.content }}</div>
+            </div>
+        </div>
+        <!-- <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
+                src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe"></iframe> -->
+    </div>
+</template>
+    
+<script>
+export default {
+    components: {
+    },
+    props: {
+        checkJson: {
+            type: Object,
+        }
+    },
+    data() {
+        return {
+            json: [],
+            answerArray: [],
+            isRecord: false,
+            isPlayerRecord: false,
+            isloading: false,
+        };
+    },
+    methods: {
+        setVoiceJson(val) {
+            let a = JSON.parse(JSON.stringify(val));
+            // this.json = a;
+            this.answerArray = a
+            // this.answerArray.push(
+            //     {
+            //         isY: false,
+            //         content: a.content3,
+            //         name: a.content,
+            //         img: a.img
+            //     }
+            // )
+
+        },
+    },
+    watch: {
+        checkJson: {
+            handler: function (newVal, oldVal) {
+                if (newVal) {
+                    this.setVoiceJson(this.checkJson);
+                }
+            },
+            deep: true
+        }
+    },
+
+    mounted() {
+        this.setVoiceJson(this.checkJson);
+    }
+};
+</script>
+    
+<style scoped>
+.d_box {
+    width: 100%;
+    height: 100%;
+    /* background: #000; */
+    padding: 25px 50px;
+    box-sizing: border-box;
+    overflow: auto;
+}
+
+.dialog_answer>img {
+    height: 100%;
+    margin-left: auto;
+    cursor: pointer;
+}
+
+
+.dialog {
+    display: flex;
+}
+
+.dialog+.dialog {
+    margin-top: 15px;
+}
+
+.dialog_right {
+    flex-direction: row-reverse;
+}
+
+.dialog>.d_img {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    overflow: hidden;
+    border-radius: 50%;
+    margin-right: 5px;
+}
+
+.dialog>.d_img>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.dialog_right>.d_img {
+    margin-right: 0;
+    margin-left: 5px;
+}
+
+.dialog>.d_content {
+    width: 100%;
+}
+.dialog_right>.d_content{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+
+.dialog>.d_content>.d_name {
+    color: #7C7C7C;
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+
+.dialog_right>.d_content>.d_name {
+    text-align: right;
+}
+
+.dialog>.d_content>.d_log {
+    color: #000;
+    font-size: 16px;
+    background: #fff;
+    width: 100%;
+    max-width: 800px;
+    border: 2px solid #e05d63;
+    border-radius: 40px;
+    line-height: 26px;
+    padding: 20px 35px;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.dialog>.d_content>.d_log::before{
+    content: '';
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+    position: absolute;
+    border: 1px dashed #e05d63;
+    box-sizing: border-box;
+    top: 50%;
+    left: 50%;
+    border-radius: 30px;
+    transform: translate(-50%, -50%);
+}
+
+.dialog>.d_content>.d_log2 {
+    color: #000;
+    font-size: 14px;
+    background: #fff;
+    width: 100%;
+    max-width: 800px;
+    border: 1px dashed #0f94ce;
+    border-radius: 5px;
+    line-height: 26px;
+    padding: 10px;
+    box-sizing: border-box;
+    position: relative;
+    margin-top:10px;
+}
+
+.dialog>.d_content>.d_voice {
+    width: 100%;
+    max-width: 600px;
+}
+
+.audio_class {
+    background: #3680fb !important;
+    margin: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+.d_voice>>>.vueAudioBetter span:before {
+    color: #fff;
+}
+
+.audio_class>>>.slider .process {
+    background: #000;
+}
+
+.d_voice>>>.vueAudioBetter .iconfont:active {
+    position: unset !important;
+}
+</style>
+    

src/components/EnglishVoice2/component/testRole.vue

@@ -1,206 +1,382 @@
 <template>
-    <div class="d_box" v-loading="isloading">
-        <div class="dialog" v-for="(item, index) in answerArray" :key="index" :class="{ dialog_right: item.isY }">
-            <div class="d_img">
-                <img :src="item.img ? item.img : require('../../../assets/icon/englishVoice/icon_portal.png')" alt="">
-            </div>
-            <div class="d_content">
-                <div class="d_name" v-if="item.name">{{ item.name }}</div>
-                <div class="d_voice" v-if="item.voice">
-                    <mini-audio :audio-source="item.voice" class="audio_class"></mini-audio>
-                </div>
-                <div :class="{d_log: !item.isY, d_log2: item.isY}" v-if="item.content">{{ item.content }}</div>
-            </div>
+  <div class="d_box" v-loading="isloading">
+    <div class="dialog">
+      <div class="d_img">
+        <img
+          :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
+          alt=""
+        />
+      </div>
+      <div class="d_content_message">
+        <div>Hello,以下是我们这次口语练习的要求：</div>
+        <div class="d_name" v-if="answerArray.time">
+          练习时长：{{
+            answerArray.time == "all" ? "不限时" : answerArray.time + "min"
+          }}
         </div>
-        <!-- <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
-                src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe"></iframe> -->
+        <div class="d_name" v-if="answerArray.difficulty">
+          设置难度：{{
+            answerArray.difficulty == 0
+              ? "简单"
+              : answerArray.difficulty == 1
+              ? "一般"
+              : "困难"
+          }}
+        </div>
+        <div
+          class="d_name"
+          v-if="fName && sName"
+          style="
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            width: 100%;
+          "
+        >
+          <div style="min-width: 60px">对话主题：</div>
+          <div style="width: calc(100% - 80px)">
+            {{ fName - sName }}
+          </div>
+        </div>
+        <div class="gotoTalk">我已了解，开始对话</div>
+        <div class="nowTime">{{ currentTime }}</div>
+      </div>
     </div>
+    <div class="dialog">
+      <div class="d_img">
+        <img
+          :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
+          alt=""
+        />
+      </div>
+      <div class="d_content">
+        <div class="d_voice">
+          <mini-audio :audio-source="voice" class="audio_class"></mini-audio>
+        </div>
+        <div class="d_log">
+          {{ content }}
+        </div>
+      </div>
+      <div class="nowTime" style="margin: 0 0 0 50px">
+        {{ currentTime }}
+      </div>
+    </div>
+    <div class="dialog dialog_right">
+      <div class="d_img">
+        <img
+          :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
+          alt=""
+        />
+      </div>
+      <div class="d_content">
+        <div class="d_voice">
+          <mini-audio :audio-source="voice" class="audio_class"></mini-audio>
+        </div>
+        <div class="d_log2">
+          {{ content }}
+        </div>
+      </div>
+      <report v-if="lookReport"></report>
+      <div
+        @click="lookReport = true"
+        class="reportButton"
+        :style="{ bottom: lookReport ? '-360px' : '-35px' }"
+      >
+        查看报告
+      </div>
+      <div
+        class="nowTime"
+        style="margin: 0 50px 0 0; bottom: -60px"
+        :style="{ bottom: lookReport ? '-390px' : '-60px' }"
+      >
+        {{ currentTime }}
+      </div>
+    </div>
+    <!-- <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
+                src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe"></iframe> -->
+  </div>
 </template>
     
 <script>
+import report from "./report.vue";
 export default {
-    components: {
+  components: {
+    report,
+  },
+  props: {
+    checkJson: {
+      type: Object,
     },
-    props: {
-        checkJson: {
-            type: Object,
-        }
-    },
-    data() {
-        return {
-            json: [],
-            answerArray: [],
-            isRecord: false,
-            isPlayerRecord: false,
-            isloading: false,
-        };
+  },
+  data() {
+    return {
+      json: [],
+      answerArray: [],
+      isRecord: false,
+      isPlayerRecord: false,
+      isloading: false,
+      fName: "",
+      sName: "",
+      currentTime: "",
+      lookReport: false,
+      content:
+        "Read the following text aloud.A Car Accident I saw a car accident this morning. A boy wanted to cross the road but he did not look carefully. He just ran out into the road. A car was coming and the driver stopped at once. Luckily, the boy was not hurt. However, there was a bus behind the car. It could not stop and hit the back of the car. Someone called the police and they arrived quickly.",
+    };
+  },
+  methods: {
+    setVoiceJson(val) {
+      let a = JSON.parse(JSON.stringify(val));
+      // this.json = a;
+      this.answerArray = a;
+      // this.answerArray.push(
+      //     {
+      //         isY: false,
+      //         content: a.content3,
+      //         name: a.content,
+      //         img: a.img
+      //     }
+      // )
     },
-    methods: {
-        setVoiceJson(val) {
-            let a = JSON.parse(JSON.stringify(val));
-            // this.json = a;
-            this.answerArray = a
-            // this.answerArray.push(
-            //     {
-            //         isY: false,
-            //         content: a.content3,
-            //         name: a.content,
-            //         img: a.img
-            //     }
-            // )
-
-        },
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const day = date.getDate().toString().padStart(2, "0");
+      const hours = date.getHours().toString().padStart(2, "0");
+      const minutes = date.getMinutes().toString().padStart(2, "0");
+      const seconds = date.getSeconds().toString().padStart(2, "0");
+
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
-    watch: {
-        checkJson: {
-            handler: function (newVal, oldVal) {
-                if (newVal) {
-                    this.setVoiceJson(this.checkJson);
-                }
-            },
-            deep: true
+  },
+  watch: {
+    checkJson: {
+      handler: function (newVal, oldVal) {
+        if (newVal) {
+          this.setVoiceJson(this.checkJson);
         }
+      },
+      deep: true,
     },
-
-    mounted() {
-        this.setVoiceJson(this.checkJson);
-    }
+  },
+  created() {
+    this.currentTime = this.formatDate(new Date());
+  },
+  mounted() {
+    this.setVoiceJson(this.checkJson);
+  },
 };
 </script>
     
 <style scoped>
 .d_box {
-    width: 100%;
-    height: 100%;
-    /* background: #000; */
-    padding: 25px 50px;
-    box-sizing: border-box;
-    overflow: auto;
+  width: 100%;
+  height: 100%;
+  /* background: #000; */
+  padding: 25px 50px;
+  box-sizing: border-box;
+  overflow: auto;
 }
 
-.dialog_answer>img {
-    height: 100%;
-    margin-left: auto;
-    cursor: pointer;
+.dialog_answer > img {
+  height: 100%;
+  margin-left: auto;
+  cursor: pointer;
 }
 
-
 .dialog {
-    display: flex;
+  display: flex;
+  position: relative;
 }
 
-.dialog+.dialog {
-    margin-top: 15px;
+.dialog + .dialog {
+  margin-top: 40px;
 }
 
 .dialog_right {
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
-.dialog>.d_img {
-    width: 40px;
-    height: 40px;
-    min-width: 40px;
-    overflow: hidden;
-    border-radius: 50%;
-    margin-right: 5px;
+.dialog > .d_img {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  overflow: hidden;
+  border-radius: 50%;
+  margin-right: 5px;
 }
 
-.dialog>.d_img>img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.dialog > .d_img > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.dialog_right>.d_img {
-    margin-right: 0;
-    margin-left: 5px;
+.dialog_right > .d_img {
+  margin-right: 0;
+  margin-left: 5px;
 }
 
-.dialog>.d_content {
-    width: 100%;
+.dialog > .d_content,
+.dialog > .d_content_message {
+  width: 100%;
 }
-.dialog_right>.d_content{
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+.dialog > .d_content_message {
+  display: flex;
+  width: 300px;
+  background: #f6f9ff;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  border-radius: 10px;
+  margin: 0 0 0 10px;
+  position: relative;
+}
+.dialog > .d_content_message > div {
+  padding: 5px;
+}
+.nowTime {
+  position: absolute;
+  bottom: -30px;
+  color: #9c9d9f;
+  font-size: 12px;
+}
+.dialog_right > .d_content,
+.dialog_right > .d_content_message {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 }
 
-
-.dialog>.d_content>.d_name {
-    color: #7C7C7C;
-    font-size: 12px;
-    margin-bottom: 5px;
+.dialog > .d_content > .d_name,
+.dialog > .d_content_message > .d_name {
+  color: #7c7c7c;
+  font-size: 12px;
+  margin-bottom: 5px;
 }
 
-.dialog_right>.d_content>.d_name {
-    text-align: right;
+.dialog_right > .d_content > .d_name,
+.dialog_right > .d_content_message > .d_name {
+  text-align: right;
 }
 
-.dialog>.d_content>.d_log {
-    color: #000;
-    font-size: 16px;
-    background: #fff;
-    width: 100%;
-    max-width: 800px;
-    border: 2px solid #e05d63;
-    border-radius: 40px;
-    line-height: 26px;
-    padding: 20px 35px;
-    box-sizing: border-box;
-    position: relative;
+.dialog > .d_content > .d_log,
+.dialog > .d_content_message > .d_log {
+  color: #000;
+  font-size: 16px;
+  background: #fff;
+  width: 100%;
+  max-width: 800px;
+  border: 2px solid #e05d63;
+  border-radius: 40px;
+  line-height: 26px;
+  padding: 20px 35px;
+  box-sizing: border-box;
+  position: relative;
 }
 
-.dialog>.d_content>.d_log::before{
-    content: '';
-    width: calc(100% - 20px);
-    height: calc(100% - 20px);
-    position: absolute;
-    border: 1px dashed #e05d63;
-    box-sizing: border-box;
-    top: 50%;
-    left: 50%;
-    border-radius: 30px;
-    transform: translate(-50%, -50%);
+.dialog > .d_content > .d_log::before,
+.dialog > .d_content_message > .d_log::before {
+  content: "";
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  position: absolute;
+  border: 1px dashed #e05d63;
+  box-sizing: border-box;
+  top: 50%;
+  left: 50%;
+  border-radius: 30px;
+  transform: translate(-50%, -50%);
 }
 
-.dialog>.d_content>.d_log2 {
-    color: #000;
-    font-size: 14px;
-    background: #fff;
-    width: 100%;
-    max-width: 800px;
-    border: 1px dashed #0f94ce;
-    border-radius: 5px;
-    line-height: 26px;
-    padding: 10px;
-    box-sizing: border-box;
-    position: relative;
-    margin-top:10px;
+.dialog > .d_content > .d_log2,
+.dialog > .d_content_message > .d_log2 {
+  color: #000;
+  font-size: 14px;
+  background: #fff;
+  width: 100%;
+  max-width: 800px;
+  border: 1px dashed #0f94ce;
+  border-radius: 5px;
+  line-height: 26px;
+  padding: 10px;
+  box-sizing: border-box;
+  position: relative;
+  margin-top: 10px;
 }
 
-.dialog>.d_content>.d_voice {
-    width: 100%;
-    max-width: 600px;
+.dialog > .d_content > .d_voice,
+.dialog > .d_content_message > .d_voice {
+  width: 100%;
+  max-width: 600px;
 }
 
 .audio_class {
-    background: #3680fb !important;
-    margin: 0 !important;
-    width: 100% !important;
-    box-sizing: border-box !important;
+  background: #3680fb !important;
+  margin: 0 !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
 }
 
-.d_voice>>>.vueAudioBetter span:before {
-    color: #fff;
+.d_voice >>> .vueAudioBetter span:before {
+  color: #fff;
 }
 
-.audio_class>>>.slider .process {
-    background: #000;
+.audio_class >>> .slider .process {
+  background: #000;
+}
+
+.d_voice >>> .vueAudioBetter .iconfont:active {
+  position: unset !important;
+}
+
+.gotoTalk {
+  margin: 0 5px 10px 5px;
+  background: #3681fc;
+  color: #fff;
+  text-align: center;
+  width: calc(100% - 20px);
+  height: 30px;
+  line-height: 30px;
+  padding: 0 !important;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.checkFooter {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+.checkFooter > div {
+  min-width: 100px;
+  width: 100px;
+  text-align: center;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #3681fc;
+  border: 1px solid #3681fc;
+  height: 35px;
+  line-height: 35px;
+  margin-right: 10px;
+  font-size: 12px;
+  cursor: pointer;
 }
 
-.d_voice>>>.vueAudioBetter .iconfont:active {
-    position: unset !important;
+.reportButton {
+  position: absolute;
+  bottom: -35px;
+  right: 50px;
+  background: #16c267;
+  color: #fff;
+  width: 70px;
+  height: 25px;
+  text-align: center;
+  line-height: 25px;
+  cursor: pointer;
+  border-radius: 5px;
 }
 </style>
     

src/components/checkEnglishVoice new/component/components/report.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="rBox"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.rBox {
+  width: 100%;
+  height: calc(100% - 150px);
+  background: #ccc;
+}
+</style>

src/components/checkEnglishVoice new/component/components/talk.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="tBox"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.tBox {
+  width: 100%;
+  height: calc(100% - 150px);
+  background: #ccc;
+}
+</style>

src/components/checkEnglishVoice new/component/studentDetail.vue

@@ -0,0 +1,150 @@
+<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>

src/components/checkEnglishVoice new/component/studentWorkList.vue

@@ -0,0 +1,176 @@
+<template>
+  <div :class="isShowList == false ? 'notEvaBox' : 'tEvaBox'">
+    <div class="top">
+      <div @click="isShowList = !isShowList">
+        <img src="../../../assets/icon/englishVoice/all.png" alt="" />
+      </div>
+      <div>提交列表( {{ numList }} )</div>
+    </div>
+    <div class="studentList">
+      <div
+        v-for="(item, index) in studentList"
+        :key="index"
+        :class="sid == item.id ? 'isSItem' : 'sItem'"
+        @click="sid = item.id"
+      >
+        <div class="tx">
+          <img
+            :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
+            alt=""
+          />
+        </div>
+        <!-- <div class="tx"><img :src="item.tx" alt="" /></div> 后面数据直接传头像就行 -->
+        <div class="sMessage">
+          <div>{{ item.name }}</div>
+          <div>{{ item.time }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isShowList: true,
+      numList: 13,
+      studentList: [
+        {
+          id: "0",
+          tx: "",
+          name: "李二妞",
+          time: "2024-04-01 23:59",
+        },
+        {
+          id: "1",
+          tx: "",
+          name: "王麻子",
+          time: "2024-04-01 23:59",
+        },
+        {
+          id: "2",
+          tx: "",
+          name: "陈陈子",
+          time: "2024-04-01 23:59",
+        },
+        {
+          id: "3",
+          tx: "",
+          name: "陈陈子",
+          time: "2024-04-01 23:59",
+        },
+        {
+          id: "4",
+          tx: "",
+          name: "陈陈子",
+          time: "2024-04-01 23:59",
+        },
+        {
+          id: "5",
+          tx: "",
+          name: "陈陈子",
+          time: "2024-04-01 23:59",
+        },
+      ], //学生列表
+      sid: "",
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tEvaBox,
+.notEvaBox {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+}
+
+.notEvaBox {
+  height: 25px;
+  overflow: hidden;
+}
+.tEvaBox > div,
+.notEvaBox > div {
+  margin: 0 0 10px 0;
+}
+.tEvaBox > .top,
+.notEvaBox > .top {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.top > div:first-child {
+  width: 15px;
+  height: 15px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.top > div:first-child > img {
+  width: 100%;
+  height: 100%;
+}
+
+.studentList {
+  width: 100%;
+  height: 340px;
+  overflow: auto;
+}
+
+.sItem,
+.isSItem {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 95%;
+  height: 70px;
+  padding: 10px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.studentList > div:not(:last-child) {
+  margin: 0 0 10px 0;
+}
+
+.isSItem {
+  background: #e0eafb;
+  border: 1px solid #69a0fb;
+  box-sizing: border-box;
+}
+
+.sItem > .tx,
+.isSItem > .tx {
+  width: 50px;
+  height: 50px;
+}
+
+.sItem > .tx > img,
+.isSItem > .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;
+}
+</style>

src/components/checkEnglishVoice new/component/teacherEva.vue

@@ -0,0 +1,113 @@
+<template>
+  <div :class="isShow == false ? 'notEvaBox' : 'tEvaBox'">
+    <div class="top">
+      <div @click="isShow = !isShow">
+        <img src="../../../assets/icon/englishVoice/all.png" alt="" />
+      </div>
+      <div>教师评价</div>
+    </div>
+    <div class="scoreShow">
+      <div v-if="scoreType == 0">
+        <el-input v-model="score" placeholder="评分"></el-input>
+      </div>
+      <div v-if="scoreType == 1"><el-rate v-model="score1"></el-rate></div>
+    </div>
+    <div class="sContent">
+      <el-input
+        type="textarea"
+        placeholder="您可在此输入评语"
+        v-model="text"
+        resize="none"
+        :rows="3"
+      >
+      </el-input>
+    </div>
+    <div class="evaButton" @click="sucNotice">
+      <div><img src="../../../assets/icon/englishVoice/beauty.png" alt="" /></div>
+      <div>智能评价</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      score: "",
+      score1: "",
+      scoreType: 0, //根据教师端选择评分制度显示，目前没有传值，我就先用一个type显示，后面直接获取数据中的type就行，这个删掉
+      text: "",
+      isShow: true,
+    };
+  },
+  methods: {
+    sucNotice() {
+      this.$emit("setNotice", true);
+      this.$forceUpdate();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tEvaBox,
+.notEvaBox {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  width: 100%;
+  height: 210px;
+}
+
+.notEvaBox {
+  height: 25px;
+  overflow: hidden;
+}
+.tEvaBox > div,
+.notEvaBox > div {
+  margin: 0 0 10px 0;
+}
+.tEvaBox > .top,
+.notEvaBox > .top {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.top > div:first-child,
+.evaButton > div:first-child {
+  width: 15px;
+  height: 15px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.top > div:first-child > img,
+.evaButton > div:first-child > img {
+  width: 100%;
+  height: 100%;
+}
+
+.scoreShow {
+  width: 50%;
+}
+
+.sContent {
+  width: 90%;
+}
+
+.evaButton {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  background: #3681fc;
+  color: #fff;
+  width: 110px;
+  height: 30px;
+  justify-content: center;
+  border-radius: 5px;
+  cursor: pointer;
+}
+</style>

src/components/checkEnglishVoice new/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <el-dialog
+    title="完成情况"
+    :visible.sync="dialogVisibleENScore"
+    width="1000px"
+    :before-close="handleClose"
+    class="dialog_diy"
+    :show-close="false"
+    :class="{ fullStyle: full }"
+  >
+    <div slot="title" class="header-title">
+      <div>完成情况</div>
+      <div style="position: absolute; top: 19px; right: 10px">
+        <img
+          src="../../assets/icon/full.png"
+          style="height: 16px; margin-right: 10px; cursor: pointer"
+          alt=""
+          @click="fullTools"
+        />
+        <img
+          src="../../assets/icon/close1.png"
+          style="height: 16px; cursor: pointer"
+          alt=""
+          @click="close"
+        />
+      </div>
+    </div>
+    <div class="evaBox">
+      <div class="left" v-if="showBtn == true">
+        <teacherEva @setNotice="setNotice"></teacherEva>
+        <studentWorkList></studentWorkList>
+        <div class="showImg" @click="showBtn = !showBtn">
+          <img src="../../assets/mlBtn1.png" alt="" />
+        </div>
+      </div>
+      <div v-else class="noCLeft">
+        <div class="noShowImg" @click="showBtn = !showBtn">
+          <img src="../../assets/mlBtn1.png" alt="" />
+        </div>
+      </div>
+      <div :class="showBtn == false ? 'allRight' : 'right'">
+        <studentDetail></studentDetail>
+      </div>
+      <div v-if="sNotice == true" class="noticeBox">
+        <div class="top">
+          <div class="sucLeft">
+            <div class="successImg">
+              <img src="../../assets/icon/englishVoice/success.png" alt="" />
+            </div>
+            <div>成功通知</div>
+          </div>
+          <div style="font-size: 16px">2024.02.02</div>
+        </div>
+        <div style="margin: 10px 0 0 35px">评价内容已自动保存成功</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import studentDetail from "./component/studentDetail";
+import studentWorkList from "./component/studentWorkList";
+import teacherEva from "./component/teacherEva";
+export default {
+  components: {
+    studentDetail,
+    studentWorkList,
+    teacherEva,
+  },
+  props: {
+    dialogVisibleENScore: {
+      type: Boolean,
+      default: false,
+    },
+    englishVoiceJson: {
+      type: Object,
+    },
+    userid: {
+      type: String,
+    },
+    commentDetail: {
+      type: Object,
+    },
+    courseDetail: {
+      type: Object,
+    },
+    wScore: {
+      type: Number,
+    },
+    scoreDetail: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      checkJson: [],
+      checkJson2: {},
+      title: "",
+      detail: "",
+      checkType: 0,
+      work: [],
+      wScore2: 0,
+      scoreDetail2: "",
+      dataDialog: false,
+      full: false,
+      showBtn: true,
+      sNotice: false,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.close();
+      done();
+    },
+    setNotice(val) {
+      this.sNotice = val;
+      setTimeout(() => {
+        this.sNotice = false;
+      }, 3000);
+    },
+    fullTools() {
+      this.full = !this.full;
+    },
+    close() {
+      this.$emit("update:dialogVisibleENScore", false);
+    },
+    close2() {
+      this.$emit("update:dialogVisibleENScore", false);
+    },
+    confirm() {
+      this.close2();
+    },
+    setJson(val) {
+      this.checkJson = val;
+      this.$forceUpdate();
+    },
+    setVoiceJson(val) {
+      let a = JSON.parse(JSON.stringify(val));
+      this.checkJson2 = JSON.parse(JSON.stringify(a));
+      this.title = a.title;
+      this.detail = a.detail;
+      this.checkJson = a.array;
+      this.checkType = 0;
+      this.work.length = a.array.length;
+      this.wScore2 = JSON.parse(JSON.stringify(this.wScore));
+      this.scoreDetail2 = JSON.parse(JSON.stringify(this.scoreDetail));
+      let works = JSON.parse(
+        JSON.parse(JSON.stringify(this.commentDetail.works))
+      );
+      for (var i = 0; i < this.work.length; i++) {
+        if (i > works.length - 1) {
+          break;
+        }
+        this.work[i] = works[i];
+      }
+    },
+  },
+  watch: {
+    dialogVisibleENScore: {
+      handler: function (newVal, oldVal) {
+        if (newVal) {
+          this.setVoiceJson(this.englishVoiceJson);
+        }
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.setVoiceJson(this.englishVoiceJson);
+  },
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog__header {
+  background: #fff !important;
+  padding: 15px 20px;
+  border-radius: 10px 10px 0 0;
+  border-bottom: 1px solid #e7e7e7;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.dialog_diy >>> .el-dialog__body {
+  height: 100%;
+  border-radius: 10px;
+  background: #fff;
+  padding: 0 !important;
+}
+.dialog_diy >>> .el-dialog {
+  height: 600px !important;
+  border-radius: 10px;
+}
+.fullStyle >>> .el-dialog__body {
+  height: 100% !important;
+}
+
+.fullStyle >>> .el-dialog,
+.fullStyle {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+}
+.header-title {
+  display: flex;
+  align-items: center;
+}
+
+.evaBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  position: relative;
+}
+
+.evaBox > .left,
+.evaBox > .noCLeft {
+  width: 30%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  border-right: 1px solid #e7e7e7;
+  padding: 15px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.evaBox > .noCLeft {
+  width: 10%;
+}
+
+.evaBox > .right,
+.evaBox > .allRight {
+  width: calc(100% - 30%);
+  height: 100%;
+}
+.evaBox > .allRight {
+  width: calc(100% - 10%);
+}
+.showImg,
+.noShowImg {
+  position: absolute;
+  top: 15px;
+  right: 0;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  border: 1px solid #f0f2f5;
+  border-radius: 45% 0 0 45%;
+  padding: 8px 10px;
+}
+
+.noShowImg {
+  top: 20px;
+  right: 25px;
+  border: none;
+}
+
+.showImg > img,
+.noShowImg > img {
+  width: 100%;
+  height: 100%;
+}
+
+.noticeBox {
+  position: absolute;
+  top: 40%;
+  left: 30%;
+  width: 400px;
+  height: 50px;
+  background: #fff;
+  padding: 30px;
+  border-radius: 10px;
+  border: 1px solid #e6e6e6;
+  z-index: 99;
+  box-shadow: 0px 1px 5px 2px #e6e6e6;
+}
+
+.top {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sucLeft {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.successImg {
+  width: 25px;
+  height: 25px;
+  margin: 0 10px 0 0;
+}
+
+.successImg > img {
+  width: 100%;
+  height: 100%;
+}
+</style>