|
|
@@ -1,14 +1,23 @@
|
|
|
<template>
|
|
|
- <div class="TableView" v-if="curQue&&curQue.Bookanswer">
|
|
|
+ <div class="TableView-phone" v-if="curQue && curQue.Bookanswer">
|
|
|
<!-- 表格 -->
|
|
|
<div class="table">
|
|
|
- <table>
|
|
|
+ <table
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ curQue.option[0] && curQue.option[0].length > 5 ? '860px' : '100%'
|
|
|
+ }"
|
|
|
+ >
|
|
|
<template v-if="curQue.isHeader">
|
|
|
<tr>
|
|
|
<th
|
|
|
v-for="(item, headIndex) in curQue.headerList"
|
|
|
:key="'header' + headIndex"
|
|
|
- :style="{ width: curQue.colWidthList[headIndex].width + '%',textAlign:(curQue.align?curQue.align:'center') }"
|
|
|
+ :style="{
|
|
|
+ width: curQue.colWidthList[headIndex].width + '%',
|
|
|
+ textAlign: curQue.align ? curQue.align : 'center',
|
|
|
+ fontSize: baseSizePhone + 2 + 'px'
|
|
|
+ }"
|
|
|
>
|
|
|
{{ item.con }}
|
|
|
</th>
|
|
|
@@ -18,39 +27,59 @@
|
|
|
<td
|
|
|
v-for="(col, colIndex) in row"
|
|
|
:key="'col' + colIndex"
|
|
|
- :style="{ width: curQue.colWidthList[colIndex].width + '%',textAlign:(curQue.align?curQue.align:'center') }"
|
|
|
+ :style="{
|
|
|
+ width: curQue.colWidthList[colIndex].width + '%',
|
|
|
+ textAlign: curQue.align ? curQue.align : 'center',
|
|
|
+ fontSize: baseSizePhone + 2 + 'px'
|
|
|
+ }"
|
|
|
>
|
|
|
<template v-if="!col.isNull">
|
|
|
{{ col.con }}
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <!-- <div v-html="curQue.Bookanswer.curCorrect[rowIndex][colIndex]" contenteditable="true" placeholder="输入" class="input" @input="handleMaxlength" ></div> -->
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- autosize
|
|
|
- placeholder=""
|
|
|
- v-model="curQue.Bookanswer.curCorrect[rowIndex][colIndex]"
|
|
|
- :readonly="TaskModel=='ANSWER'"
|
|
|
- maxlength="200">
|
|
|
- </el-input>
|
|
|
+ <!-- <div v-html="curQue.Bookanswer.curCorrect[rowIndex][colIndex]" contenteditable="true" placeholder="输入" class="input" @input="handleMaxlength" ></div> -->
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ autosize
|
|
|
+ placeholder=""
|
|
|
+ v-model="curQue.Bookanswer.curCorrect[rowIndex][colIndex]"
|
|
|
+ :readonly="TaskModel == 'ANSWER'"
|
|
|
+ maxlength="200"
|
|
|
+ :style="{ 'font-size': baseSizePhone + 2 + 'px' }"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
</template>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<!-- 提示语 -->
|
|
|
- <div class="hint" v-if="curQue.hintOtion.length>0&&curQue.hintOtion[0].con">
|
|
|
- <p>{{ curQue.hintTitle }}</p>
|
|
|
+ <div
|
|
|
+ class="hint"
|
|
|
+ v-if="curQue.hintOtion.length > 0 && curQue.hintOtion[0].con"
|
|
|
+ >
|
|
|
+ <p :style="{ fontSize: baseSizePhone + 2 + 'px' }">
|
|
|
+ {{ curQue.hintTitle }}
|
|
|
+ </p>
|
|
|
<div>
|
|
|
<div v-for="(item, i) in curQue.hintOtion" :key="'hint' + i">
|
|
|
- <p>{{ item.pinyin }}</p>
|
|
|
- <p>{{ item.con }}</p>
|
|
|
+ <p :style="{ fontSize: baseSizePhone + 2 + 'px' }">
|
|
|
+ {{ item.pinyin }}
|
|
|
+ </p>
|
|
|
+ <p :style="{ fontSize: baseSizePhone + 6 + 'px' }">{{ item.con }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 录音 -->
|
|
|
<div class="record">
|
|
|
- <Soundrecord :answerRecordList="curQue.Bookanswer.recordList" @handleWav="handleWav" :TaskModel="TaskModel" type="pro-plus" class="luyin-box" />
|
|
|
+ <Soundrecord
|
|
|
+ :answerRecordList="curQue.Bookanswer.recordList"
|
|
|
+ @handleWav="handleWav"
|
|
|
+ :TaskModel="TaskModel"
|
|
|
+ type="normal"
|
|
|
+ class="luyin-box"
|
|
|
+ :baseSizePhone="baseSizePhone"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -58,14 +87,14 @@
|
|
|
<script>
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
|
|
|
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {
|
|
|
- Soundrecord,
|
|
|
+ Soundrecord
|
|
|
},
|
|
|
- props: ["curQue","TaskModel"],
|
|
|
+ props: ["curQue", "TaskModel", "baseSizePhone"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {};
|
|
|
@@ -80,35 +109,35 @@ export default {
|
|
|
tmIndex = tmIndex ? tmIndex : 0;
|
|
|
this.$set(this.curQue.Bookanswer, "recordList", list);
|
|
|
},
|
|
|
- handleMaxlength(e){
|
|
|
- if(e.target.innerHTML.length>200){
|
|
|
- e.target.innerHTML = e.target.innerHTML.substring(0, 200);
|
|
|
- }
|
|
|
- this.$forceUpdate()
|
|
|
- },
|
|
|
+ handleMaxlength(e) {
|
|
|
+ if (e.target.innerHTML.length > 200) {
|
|
|
+ e.target.innerHTML = e.target.innerHTML.substring(0, 200);
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- let curCorrect = [];
|
|
|
- this.curQue.option.forEach((item) => {
|
|
|
- let curCorrectItem = []
|
|
|
- item.forEach((it)=>{
|
|
|
- if (it.con == "") {
|
|
|
- curCorrectItem.push('')
|
|
|
- it.isNull = true
|
|
|
- }else{
|
|
|
- curCorrectItem.push(null)
|
|
|
- }
|
|
|
- })
|
|
|
- curCorrect.push(curCorrectItem)
|
|
|
- });
|
|
|
- if (!this.curQue.Bookanswer) {
|
|
|
- let bookanswer = {
|
|
|
- curCorrect : curCorrect,
|
|
|
- recordList: [],
|
|
|
+ let curCorrect = [];
|
|
|
+ this.curQue.option.forEach(item => {
|
|
|
+ let curCorrectItem = [];
|
|
|
+ item.forEach(it => {
|
|
|
+ if (it.con == "") {
|
|
|
+ curCorrectItem.push("");
|
|
|
+ it.isNull = true;
|
|
|
+ } else {
|
|
|
+ curCorrectItem.push(null);
|
|
|
}
|
|
|
- this.$set(this.curQue, "Bookanswer", bookanswer);
|
|
|
- }
|
|
|
+ });
|
|
|
+ curCorrect.push(curCorrectItem);
|
|
|
+ });
|
|
|
+ if (!this.curQue.Bookanswer) {
|
|
|
+ let bookanswer = {
|
|
|
+ curCorrect: curCorrect,
|
|
|
+ recordList: []
|
|
|
+ };
|
|
|
+ this.$set(this.curQue, "Bookanswer", bookanswer);
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
@@ -125,12 +154,12 @@ export default {
|
|
|
//生命周期-销毁完成
|
|
|
destoryed() {},
|
|
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() {},
|
|
|
+ activated() {}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
-.TableView {
|
|
|
+.TableView-phone {
|
|
|
width: 100%;
|
|
|
margin-bottom: 16px;
|
|
|
.hint {
|
|
|
@@ -145,13 +174,14 @@ export default {
|
|
|
}
|
|
|
> div {
|
|
|
display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ gap: 5px;
|
|
|
> div {
|
|
|
min-width: 82px;
|
|
|
min-height: 70px;
|
|
|
padding: 8px 16px;
|
|
|
background: #f7f7f7;
|
|
|
border-radius: 8px;
|
|
|
- margin-right: 8px;
|
|
|
p {
|
|
|
margin: 0;
|
|
|
}
|
|
|
@@ -178,7 +208,7 @@ export default {
|
|
|
}
|
|
|
.record {
|
|
|
margin-top: 11px;
|
|
|
- width: 292px;
|
|
|
+ width: max-content;
|
|
|
height: 40px;
|
|
|
padding: 0 12px;
|
|
|
display: flex;
|
|
|
@@ -190,6 +220,7 @@ export default {
|
|
|
}
|
|
|
.table {
|
|
|
width: 100%;
|
|
|
+ overflow: auto;
|
|
|
table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse; //取消单元格之间的间距
|
|
|
@@ -212,10 +243,10 @@ export default {
|
|
|
text-align: center;
|
|
|
color: #000000;
|
|
|
font-size: 16px;
|
|
|
- padding: 6px 16px;
|
|
|
- .input{
|
|
|
+ padding: 6px;
|
|
|
+ .input {
|
|
|
width: 100%;
|
|
|
- min-height:24px;
|
|
|
+ min-height: 24px;
|
|
|
margin: 0 auto;
|
|
|
font-size: 16px;
|
|
|
line-height: 1.5;
|
|
|
@@ -231,18 +262,21 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
-.NPC-Big-Book-preview{
|
|
|
- .el-textarea__inner{
|
|
|
- resize: none;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- width: 100%;
|
|
|
- min-height:24px;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 1.5;
|
|
|
- color: #000000;
|
|
|
- overflow:hidden;
|
|
|
- }
|
|
|
+.TableView-phone {
|
|
|
+ .el-textarea__inner {
|
|
|
+ resize: none;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 24px;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: auto;
|
|
|
+ line-height: 1.5;
|
|
|
+ color: #000000;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
natasha