|
|
@@ -4,14 +4,26 @@
|
|
|
|
|
|
</div>
|
|
|
<div class="o_content">
|
|
|
- <div class="word_box" v-if="cjson.type == 'word' || cjson.type == 'QA'">
|
|
|
- <img class="word_img" :src="cjson.img" alt="" v-if="cjson.img" @click="previewImg(cjson.img)">
|
|
|
- <div class="word_content">
|
|
|
- {{ cjson.content }}
|
|
|
+ <div class="word_box" v-if="cjson.type == 'word' || cjson.type == 'QA'" ref="wb">
|
|
|
+ <div class="word_bbox" :style="{maxHeight: oheight}">
|
|
|
+ <img class="word_img" :src="cjson.img" alt="" v-if="cjson.img" @click="previewImg(cjson.img)">
|
|
|
+ <div class="word_content" v-html="cjson.content">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="sentence_box" v-if="cjson.type == 'sentence'">
|
|
|
- <span>{{ cjson.content }}</span>
|
|
|
+ <div class="sentence_box" v-if="cjson.type == 'sentence'" ref="wb">
|
|
|
+ <span v-html="cjson.content"></span>
|
|
|
+ </div>
|
|
|
+ <div class="word_box" v-if="cjson.type == 'theme'" ref="wb" style="max-height: calc(100% - 95px);">
|
|
|
+ <div class="word_bbox" :style="{maxHeight: oheight}">
|
|
|
+ <div class="word_content" v-html="cjson.content"></div>
|
|
|
+ <div class="word_content2" v-html="cjson.content2" v-if="cjson.content2"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tips_box" v-if="cjson.type == 'theme' && !isRecord && !LuAudioUrl">提示：准备完成后，点击话筒开始录音</div>
|
|
|
+ <div class="time_box" v-if="cjson.type == 'theme' && isRecord">
|
|
|
+ <span>倒计时</span>
|
|
|
+ <span>{{ Times.min }}:{{ Times.secode }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="o_bottom" v-loading="isloading">
|
|
|
@@ -88,13 +100,54 @@ export default {
|
|
|
isRecord: false,
|
|
|
isPlayerRecord: false,
|
|
|
isloading: false,
|
|
|
+ oheight: 'auto',
|
|
|
+ calcTimer: null,
|
|
|
+ totalSeconds: 0,
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ // oheight: function() {
|
|
|
+ // // 获取父元素
|
|
|
+ // var parentElement = this.$refs['wb'];
|
|
|
+
|
|
|
+ // // 计算父元素的高度
|
|
|
+ // var parentHeight = parentElement.offsetHeight;
|
|
|
+ // return parentHeight + 'px'
|
|
|
+ // }
|
|
|
+ Times() {
|
|
|
+ let min = this.totalSeconds ? Math.floor(this.totalSeconds / 60) : 0
|
|
|
+ let secode = this.totalSeconds ? this.totalSeconds % 60 : 0
|
|
|
+ let time = {
|
|
|
+ min: min >= 10 ? min : '0' + min,
|
|
|
+ secode: secode >= 10 ? secode : '0' + secode
|
|
|
+ }
|
|
|
+ return time;
|
|
|
+ },
|
|
|
+ },
|
|
|
watch: {
|
|
|
checkType: {
|
|
|
handler: function (newVal, oldVal) {
|
|
|
this.cjson = JSON.parse(JSON.stringify(this.checkJson[newVal]));
|
|
|
this.LuAudioUrl = this.work[newVal] ? JSON.parse(JSON.stringify(this.work[newVal])) : ''
|
|
|
+ this.oheight = 'auto'
|
|
|
+
|
|
|
+ const images = document.querySelectorAll('img');
|
|
|
+ let loadedCount = 0;
|
|
|
+
|
|
|
+ if(images.length){
|
|
|
+ Array.from(images).forEach((image) => {
|
|
|
+ image.addEventListener('load', () => {
|
|
|
+ loadedCount++;
|
|
|
+
|
|
|
+ if (loadedCount === images.length) {
|
|
|
+ this.calculateParentHeight()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.calculateParentHeight()
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
@@ -128,6 +181,9 @@ export default {
|
|
|
if (!_this.isRecord) {
|
|
|
recorder.destroy(); // 销毁录音
|
|
|
_this.isRecord = true;
|
|
|
+ if(this.cjson.type == 'theme'){
|
|
|
+ this.setSecodes()
|
|
|
+ }
|
|
|
recorder.start().then(
|
|
|
() => { },
|
|
|
(error) => {
|
|
|
@@ -136,9 +192,18 @@ export default {
|
|
|
_this.$message.error(`没有找到可使用的麦克风，或者您没有允许此网页使用麦克风`);
|
|
|
// 出错了
|
|
|
console.log(`${error.name} : ${error.message}`);
|
|
|
+ if(_this.calcTimer){
|
|
|
+ clearInterval(_this.calcTimer)
|
|
|
+ _this.calcTimer = null;
|
|
|
+ }
|
|
|
}
|
|
|
);
|
|
|
+
|
|
|
} else {
|
|
|
+ if(_this.calcTimer){
|
|
|
+ clearInterval(_this.calcTimer)
|
|
|
+ _this.calcTimer = null;
|
|
|
+ }
|
|
|
_this.isRecord = false;
|
|
|
recorder.stop(); // 结束录音
|
|
|
this.getMp3Data()
|
|
|
@@ -276,6 +341,32 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ calculateParentHeight() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ // 获取父元素
|
|
|
+ var parentElement = this.$refs['wb'];
|
|
|
+
|
|
|
+ // 计算父元素的高度
|
|
|
+ var parentHeight = parentElement.offsetHeight + 1;
|
|
|
+ this.oheight = parentHeight + 'px'
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setSecodes(){
|
|
|
+ this.totalSeconds = this.checkJson[this.checkType].oTime * 60
|
|
|
+ // this.totalSeconds = 10
|
|
|
+ this.calcTimer = setInterval(() => {
|
|
|
+ if (this.totalSeconds > 0) {
|
|
|
+ this.totalSeconds--;
|
|
|
+ } else {
|
|
|
+ clearInterval(this.calcTimer);
|
|
|
+ this.calcTimer = null
|
|
|
+ this.startRecorder()
|
|
|
+ console.log("倒计时结束"); // 输出日志
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.cjson = JSON.parse(JSON.stringify(this.checkJson[this.checkType]));
|
|
|
@@ -303,6 +394,7 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
overflow: hidden;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.o_bottom {
|
|
|
@@ -310,15 +402,30 @@ export default {
|
|
|
}
|
|
|
|
|
|
.word_box {
|
|
|
- width: 500px;
|
|
|
+ min-width: 500px;
|
|
|
+ width: 70%;
|
|
|
background: #fff;
|
|
|
border-radius: 10px;
|
|
|
position: relative;
|
|
|
+ max-height: calc(100% - 40px);
|
|
|
+ /* overflow: auto; */
|
|
|
+}
|
|
|
+.tips_box{
|
|
|
+ margin-top: 30px;
|
|
|
+ color: #727272;
|
|
|
+}
|
|
|
+.word_box > .word_bbox {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+ max-height: 100%;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
.sentence_box {
|
|
|
background: #e0e0e04d;
|
|
|
- width: 500px;
|
|
|
+ min-width: 500px;
|
|
|
+ width: 70%;
|
|
|
border-radius: 15px;
|
|
|
max-height: 100%;
|
|
|
overflow: auto;
|
|
|
@@ -356,7 +463,7 @@ export default {
|
|
|
left: 15px;
|
|
|
}
|
|
|
|
|
|
-.word_box>.word_img {
|
|
|
+.word_box > .word_bbox>.word_img {
|
|
|
width: calc(100% - 30px);
|
|
|
max-height: 300px;
|
|
|
z-index: 999;
|
|
|
@@ -369,7 +476,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
|
|
|
-.word_box>.word_content {
|
|
|
+.word_box > .word_bbox>.word_content {
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
text-align: center;
|
|
|
@@ -378,8 +485,22 @@ export default {
|
|
|
font-weight: bold;
|
|
|
color: #000;
|
|
|
width: calc(100% - 30px);
|
|
|
+ word-break: break-word;
|
|
|
+ white-space: pre-line;
|
|
|
}
|
|
|
|
|
|
+.word_box > .word_bbox>.word_content2 {
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 15px;
|
|
|
+ color: #727272;
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ word-break: break-word;
|
|
|
+ white-space: pre-line;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
|
|
|
|
|
|
.o_bottom .audio {
|
|
|
@@ -508,4 +629,23 @@ export default {
|
|
|
}
|
|
|
.audio_b >>> .vueAudioBetter .iconfont:active{
|
|
|
position: unset !important;
|
|
|
-}</style>
|
|
|
+}
|
|
|
+
|
|
|
+.time_box{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.time_box > span:nth-child(1){
|
|
|
+ color: #727272;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.time_box > span:nth-child(2){
|
|
|
+ /* margin-top: 10px; */
|
|
|
+ font-size: 32px;
|
|
|
+ color: #3581FC;
|
|
|
+}
|
|
|
+</style>
|
