|
|
@@ -1,9 +1,12 @@
|
|
|
<template>
|
|
|
- <div class="o_box">
|
|
|
+ <div class="o_box" ref="obox">
|
|
|
<div class="o_top">
|
|
|
|
|
|
</div>
|
|
|
<div class="o_content">
|
|
|
+ <div class="type_box" :style="{width: oWidth}">
|
|
|
+ {{ getType(cjson) }}
|
|
|
+ </div>
|
|
|
<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)">
|
|
|
@@ -101,6 +104,7 @@ export default {
|
|
|
isPlayerRecord: false,
|
|
|
isloading: false,
|
|
|
oheight: 'auto',
|
|
|
+ oWidth: '500px',
|
|
|
calcTimer: null,
|
|
|
totalSeconds: 0,
|
|
|
}
|
|
|
@@ -114,6 +118,19 @@ export default {
|
|
|
// var parentHeight = parentElement.offsetHeight;
|
|
|
// return parentHeight + 'px'
|
|
|
// }
|
|
|
+ getType() {
|
|
|
+ return function(json) {
|
|
|
+ if(json.type == 'word'){
|
|
|
+ return '单词/词组'
|
|
|
+ }else if(json.type == 'QA'){
|
|
|
+ return '问答题目'
|
|
|
+ }else if(json.type == 'sentence'){
|
|
|
+ return '句子/短文'
|
|
|
+ }else if(json.type == 'theme'){
|
|
|
+ return '主题陈述'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
Times() {
|
|
|
let min = this.totalSeconds ? Math.floor(this.totalSeconds / 60) : 0
|
|
|
let secode = this.totalSeconds ? this.totalSeconds % 60 : 0
|
|
|
@@ -130,23 +147,23 @@ export default {
|
|
|
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');
|
|
|
+ this.oWidth = '500px'
|
|
|
+ const images = this.$refs['obox'].querySelectorAll('img');
|
|
|
let loadedCount = 0;
|
|
|
|
|
|
- if(images.length){
|
|
|
- Array.from(images).forEach((image) => {
|
|
|
- image.addEventListener('load', () => {
|
|
|
- loadedCount++;
|
|
|
-
|
|
|
- if (loadedCount === images.length) {
|
|
|
- this.calculateParentHeight()
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }else{
|
|
|
+ // if(images.length){
|
|
|
+ // images.forEach((image) => {
|
|
|
+ // image.addEventListener('load', () => {
|
|
|
+ // loadedCount++;
|
|
|
+
|
|
|
+ // if (loadedCount === images.length) {
|
|
|
+ // this.calculateParentHeight()
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }else{
|
|
|
this.calculateParentHeight()
|
|
|
- }
|
|
|
+ // }
|
|
|
|
|
|
},
|
|
|
deep: true,
|
|
|
@@ -348,9 +365,11 @@ export default {
|
|
|
var parentElement = this.$refs['wb'];
|
|
|
|
|
|
// 计算父元素的高度
|
|
|
- var parentHeight = parentElement.offsetHeight + 1;
|
|
|
- this.oheight = parentHeight + 'px'
|
|
|
- }, 1000);
|
|
|
+ // var parentHeight = parentElement.offsetHeight + 1;
|
|
|
+ var parentWidth = parentElement.offsetWidth;
|
|
|
+ // this.oheight = parentHeight + 'px'
|
|
|
+ this.oWidth = parentWidth + 'px'
|
|
|
+ }, 50);
|
|
|
});
|
|
|
},
|
|
|
setSecodes(){
|
|
|
@@ -399,15 +418,20 @@ export default {
|
|
|
|
|
|
.o_bottom {
|
|
|
height: 185px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
.word_box {
|
|
|
min-width: 500px;
|
|
|
- width: 70%;
|
|
|
+ max-width: 70%;
|
|
|
background: #fff;
|
|
|
border-radius: 10px;
|
|
|
position: relative;
|
|
|
- max-height: calc(100% - 40px);
|
|
|
+ /* max-height: calc(100% - 40px); */
|
|
|
+ max-height: calc(100% - 70px);
|
|
|
/* overflow: auto; */
|
|
|
}
|
|
|
.tips_box{
|
|
|
@@ -425,9 +449,9 @@ export default {
|
|
|
.sentence_box {
|
|
|
background: #e0e0e04d;
|
|
|
min-width: 500px;
|
|
|
- width: 70%;
|
|
|
+ max-width: 70%;
|
|
|
border-radius: 15px;
|
|
|
- max-height: 100%;
|
|
|
+ /* max-height: 100%; */
|
|
|
overflow: auto;
|
|
|
padding: 15px;
|
|
|
font-size: 16px;
|
|
|
@@ -435,6 +459,7 @@ export default {
|
|
|
line-height: 20px;
|
|
|
word-break: break-word;
|
|
|
white-space: pre-line;
|
|
|
+ max-height: calc(100% - 80px);
|
|
|
}
|
|
|
|
|
|
.word_box::before {
|
|
|
@@ -443,7 +468,7 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: block;
|
|
|
- box-shadow: 0 0 4px 4px #0000001c;
|
|
|
+ box-shadow: 0 0 4px 4px #1d39830d;
|
|
|
border-radius: 10px;
|
|
|
z-index: 2;
|
|
|
background: #fff;
|
|
|
@@ -456,7 +481,7 @@ export default {
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
display: block;
|
|
|
- box-shadow: 0 0 4px 4px #0000001c;
|
|
|
+ box-shadow: 0 0 4px 4px #1d39830d;
|
|
|
border-radius: 10px;
|
|
|
z-index: 1;
|
|
|
top: 15px;
|
|
|
@@ -468,11 +493,11 @@ export default {
|
|
|
max-height: 300px;
|
|
|
z-index: 999;
|
|
|
position: relative;
|
|
|
- margin: 15px auto 0;
|
|
|
+ margin: 15px auto;
|
|
|
display: block;
|
|
|
border-radius: 10px;
|
|
|
cursor: pointer;
|
|
|
- object-fit: cover;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -499,7 +524,7 @@ export default {
|
|
|
width: calc(100% - 30px);
|
|
|
word-break: break-word;
|
|
|
white-space: pre-line;
|
|
|
- margin-top: 10px;
|
|
|
+ /* margin-top: 10px; */
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -648,4 +673,12 @@ export default {
|
|
|
font-size: 32px;
|
|
|
color: #3581FC;
|
|
|
}
|
|
|
+
|
|
|
+.type_box{
|
|
|
+ min-width: 500px;
|
|
|
+ width: 70%;
|
|
|
+ text-align: right;
|
|
|
+ color: #a5a5a5;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
</style>
|
