|
|
@@ -1,382 +1,206 @@
|
|
|
<template>
|
|
|
- <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 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>
|
|
|
- <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;"
|
|
|
+ <!-- <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
|
|
|
src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe"></iframe> -->
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import report from "./report.vue";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- report,
|
|
|
- },
|
|
|
- props: {
|
|
|
- checkJson: {
|
|
|
- type: Object,
|
|
|
+ components: {
|
|
|
},
|
|
|
- },
|
|
|
- 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
|
|
|
- // }
|
|
|
- // )
|
|
|
+ props: {
|
|
|
+ checkJson: {
|
|
|
+ type: Object,
|
|
|
+ }
|
|
|
},
|
|
|
- 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}`;
|
|
|
+ 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);
|
|
|
+ watch: {
|
|
|
+ checkJson: {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.setVoiceJson(this.checkJson);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
}
|
|
|
- },
|
|
|
- deep: true,
|
|
|
},
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.currentTime = this.formatDate(new Date());
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.setVoiceJson(this.checkJson);
|
|
|
- },
|
|
|
+
|
|
|
+ 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;
|
|
|
- position: relative;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
|
|
|
-.dialog + .dialog {
|
|
|
- margin-top: 40px;
|
|
|
+.dialog+.dialog {
|
|
|
+ margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.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,
|
|
|
-.dialog > .d_content_message {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.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;
|
|
|
+.dialog>.d_content {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
-.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_right>.d_content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
-.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,
|
|
|
-.dialog_right > .d_content_message > .d_name {
|
|
|
- text-align: right;
|
|
|
+.dialog>.d_content>.d_name {
|
|
|
+ color: #7C7C7C;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
-.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_right>.d_content>.d_name {
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
|
|
|
-.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_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_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_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_voice,
|
|
|
-.dialog > .d_content_message > .d_voice {
|
|
|
- width: 100%;
|
|
|
- max-width: 600px;
|
|
|
+.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;
|
|
|
}
|
|
|
|
|
|
-.audio_class {
|
|
|
- background: #3680fb !important;
|
|
|
- margin: 0 !important;
|
|
|
- width: 100% !important;
|
|
|
- box-sizing: border-box !important;
|
|
|
+.dialog>.d_content>.d_voice {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 600px;
|
|
|
}
|
|
|
|
|
|
-.d_voice >>> .vueAudioBetter span:before {
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.audio_class >>> .slider .process {
|
|
|
- background: #000;
|
|
|
-}
|
|
|
-
|
|
|
-.d_voice >>> .vueAudioBetter .iconfont:active {
|
|
|
- position: unset !important;
|
|
|
+.audio_class {
|
|
|
+ background: #3680fb !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ box-sizing: border-box !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;
|
|
|
+.d_voice>>>.vueAudioBetter span:before {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
-.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;
|
|
|
+.audio_class>>>.slider .process {
|
|
|
+ background: #000;
|
|
|
}
|
|
|
|
|
|
-.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;
|
|
|
+.d_voice>>>.vueAudioBetter .iconfont:active {
|
|
|
+ position: unset !important;
|
|
|
}
|
|
|
</style>
|
|
|
|
