|
@@ -1,25 +1,31 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="Big-Book-prev-Textdes" v-if="curQue">
|
|
|
- <h2 v-if="curQue.title">{{curQue.title}}</h2>
|
|
|
+ <h2 v-if="curQue.title">{{ curQue.title }}</h2>
|
|
|
<ul>
|
|
|
<li v-for="(items, indexs) in curQue.option" :key="indexs">
|
|
|
- <Audio
|
|
|
- :mp3="items.mp3_list.length > 0 ? items.mp3_list[0].url : ''"
|
|
|
- :themeColor="themeColor"
|
|
|
- class="audio-play"
|
|
|
- />
|
|
|
- <b v-if="items.number">{{ items.number }}</b>
|
|
|
- <span class="item-con" :class="[items.font]" v-if="items.con">{{items.con}}</span>
|
|
|
- <input
|
|
|
- @input="handleInput"
|
|
|
- :class="['item-input']"
|
|
|
- v-model="curQue.Bookanswer[indexs]"
|
|
|
- placeholder="输入"
|
|
|
- >
|
|
|
- <template v-if="items.IsRecord">
|
|
|
- <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box"/>
|
|
|
- </template>
|
|
|
+ <Audio
|
|
|
+ :mp3="items.mp3_list.length > 0 ? items.mp3_list[0].url : ''"
|
|
|
+ :themeColor="themeColor"
|
|
|
+ class="audio-play"
|
|
|
+ />
|
|
|
+ <b v-if="items.number">{{ items.number }}</b>
|
|
|
+ <span
|
|
|
+ :style="{ width: items.con ? '260px' : '' }"
|
|
|
+ class="item-con"
|
|
|
+ :class="[items.font]"
|
|
|
+ v-if="items.con"
|
|
|
+ >{{ items.con }}</span
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ @input="handleInput"
|
|
|
+ :class="['item-input']"
|
|
|
+ v-model="curQue.Bookanswer[indexs]"
|
|
|
+ placeholder="输入"
|
|
|
+ />
|
|
|
+ <template v-if="items.IsRecord">
|
|
|
+ <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
|
|
|
+ </template>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
@@ -29,41 +35,37 @@
|
|
|
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
|
|
|
import Audio from "../preview/components/AudioRed.vue"; // 音频播放
|
|
|
export default {
|
|
|
- components: {Soundrecord,Audio},
|
|
|
- props: ["curQue","themeColor"],
|
|
|
+ components: { Soundrecord, Audio },
|
|
|
+ props: ["curQue", "themeColor"],
|
|
|
data() {
|
|
|
- return {
|
|
|
- };
|
|
|
+ return {};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- // input 输入时
|
|
|
- handleInput (e) {
|
|
|
- e.target.value = e.target.value ? e.target.value.trim() : '';
|
|
|
- },
|
|
|
- // 处理数据
|
|
|
- handleData(){
|
|
|
- // if(!this.curQue.Bookanswer){
|
|
|
- let curCorrect = [];
|
|
|
- this.curQue.option.forEach(item => {
|
|
|
- curCorrect.push('')
|
|
|
- });
|
|
|
- this.$set(this.curQue, "Bookanswer", curCorrect);
|
|
|
- // }
|
|
|
- },
|
|
|
- handleWav(data) {
|
|
|
-
|
|
|
- },
|
|
|
+ // input 输入时
|
|
|
+ handleInput(e) {
|
|
|
+ e.target.value = e.target.value ? e.target.value.trim() : "";
|
|
|
+ },
|
|
|
+ // 处理数据
|
|
|
+ handleData() {
|
|
|
+ // if(!this.curQue.Bookanswer){
|
|
|
+ let curCorrect = [];
|
|
|
+ this.curQue.option.forEach((item) => {
|
|
|
+ curCorrect.push("");
|
|
|
+ });
|
|
|
+ this.$set(this.curQue, "Bookanswer", curCorrect);
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ handleWav(data) {},
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
|
- this.handleData()
|
|
|
+ this.handleData();
|
|
|
},
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted() {
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
@@ -75,82 +77,82 @@ export default {
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
-.Big-Book-prev-Textdes{
|
|
|
- width: 100%;
|
|
|
- // margin-top: 16px;
|
|
|
- h2{
|
|
|
- font-weight: normal;
|
|
|
+.Big-Book-prev-Textdes {
|
|
|
+ width: 100%;
|
|
|
+ // margin-top: 16px;
|
|
|
+ h2 {
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin: 0 2px 8px 2px;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: start;
|
|
|
+ list-style: none;
|
|
|
+ li {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 8px 8px 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .audio-play {
|
|
|
+ width: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ > b {
|
|
|
+ width: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ }
|
|
|
+ .item-con {
|
|
|
+ min-width: 80px;
|
|
|
font-size: 16px;
|
|
|
line-height: 150%;
|
|
|
color: #000000;
|
|
|
- margin: 0 2px 8px 2px;
|
|
|
- }
|
|
|
- ul{
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- justify-content: start;
|
|
|
- list-style: none;
|
|
|
- li{
|
|
|
- width: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 8px 8px 8px 16px;
|
|
|
- margin-bottom: 8px;
|
|
|
- .audio-play{
|
|
|
- width: 16px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- >b{
|
|
|
- width: 24px;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- text-align: right;
|
|
|
- margin-right: 8px;
|
|
|
- font-weight: 400;
|
|
|
- color: #000000;
|
|
|
- font-family: 'FZJCGFKTK';
|
|
|
- }
|
|
|
- .item-con{
|
|
|
- min-width: 80px;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- margin-right: 8px;
|
|
|
- word-break: break-word;
|
|
|
- font-family: 'FZJCGFKTK';
|
|
|
- &.py{
|
|
|
- font-family: 'GB-PINYINOK-B';
|
|
|
- }
|
|
|
- &.en{
|
|
|
- font-family: 'robot';
|
|
|
- }
|
|
|
- }
|
|
|
- input{
|
|
|
- flex: 1;
|
|
|
- min-width: 150px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8px;
|
|
|
- outline: none;
|
|
|
- height: 40px;
|
|
|
- padding: 8px;
|
|
|
- color: #000000;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- }
|
|
|
- .luyin-box{
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 8px;
|
|
|
- width: 280px;
|
|
|
- height: 40px;
|
|
|
- margin-left: 8px;
|
|
|
- padding: 0 12px;
|
|
|
- }
|
|
|
+ margin-right: 8px;
|
|
|
+ word-break: break-word;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ &.py {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
}
|
|
|
+ &.en {
|
|
|
+ font-family: "robot";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 150px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ outline: none;
|
|
|
+ height: 40px;
|
|
|
+ padding: 8px;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ }
|
|
|
+ .luyin-box {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 280px;
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 8px;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|