单选

src/components/Adult/Preview.vue

@@ -13,7 +13,7 @@
         <h2 v-if="item.title_z">{{ item.title_z }}</h2>
         <h3 v-if="item.title_f">{{ item.title_f }}</h3>
         <div
-          :class="['NNPE-tableList', item.Isbg ? 'NNPE-tableList-hasBg' : '']"
+          :class="['NNPE-tableList', item.is_bg ? 'NNPE-tableList-hasBg' : '']"
         >
           <div
             class="NNPE-tableList-tr"
@@ -79,6 +79,9 @@
                 <template v-if="itemss.type == 'sudoku_chs'">
                   <Soduko :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.type == 'single_chs'">
+                  <Single :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -103,6 +106,7 @@ import SentenceInput from "./preview/SentenceInput.vue"; // 输入选项
 import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue" // 数字组合
 import SelectTone from './preview/SelectTone.vue' // 选择声调
 import Soduko from './preview/Soduko.vue' // 数独
+import Single from './preview/Single.vue' // 单选
 export default {
   name: "preview",
   components: {
@@ -120,6 +124,7 @@ export default {
     NumberSelectHasRecord,
     SelectTone,
     Soduko,
+    Single,
   },
   props: ["context", "fatherName"],
   data() {
@@ -293,7 +298,10 @@ export default {
       border-radius: 8px;
       padding: 12px 8px;
       &.NNPE-tableList-hasBg {
-        background: #f3f3f3;
+        background: #F7F7F7;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
       }
       .NNPE-tableList-tr {
         display: flex;

src/components/Adult/preview/Single.vue

@@ -1,68 +1,83 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes" v-if="curQue">
-    <p v-if="curQue.con" v-html="curQue.con"></p>
-    <p v-if="curQue.con" v-html="curQue.english"></p>
+  <div class="Big-Book-prev-Textdes NNPE-single" v-if="curQue">
+    <div class="stem-box">
+        <b v-if="curQue.topicNumber">{{curQue.topicNumber}}.</b>
+        <p v-if="curQue.title" v-html="curQue.title" :class="[/^[\u4e00-\u9fa5]/.test(curQue.title)?'hasCn':'']"></p>
+        <Audio
+            :mp3="
+            curQue.topic.mp3_list.length > 0 ? curQue.topic.mp3_list[0].url : ''"
+            class="audio-play"
+        />
+        <div v-for="(itemss,indexss) in curQue.topic.img_list" :key="indexss">
+            <el-image
+                :src="itemss.url"
+                fit="scale-down"
+                class="img_url"
+            >
+                <div slot="placeholder" class="image-slot">
+                    <img src="../../../assets/common/icon-imgloading.png" />
+                </div>
+            </el-image>
+        </div>
+    </div>
     <ul v-if="curQue.option">
-      <li v-for="(item, index) in curQue.option" :key="item.id">
-        <template v-if="curQue.type == 'single'">
+      <li v-for="(item, index) in curQue.option" :key="index" :class="['option'+curQue.numberList.con,single===index?'active':'']">
           <el-radio
-            v-model="item.isAnswer"
+            v-model="single"
             :label="index"
             style="margin-right: 0"
           >
-            {{ item.con }}
+            <span v-if="item.number">{{item.number}}.</span>
+            <p :class="[/^[\u4e00-\u9fa5]/.test(item.con)?'hasCn':'']">{{ item.con }}</p>
           </el-radio>
-        </template>
-        <template v-if="curQue.type == 'checkbox'">
-          <el-checkbox v-model="item.isAnswer" :label="index">
+        <!-- <template v-if="curQue.type == 'checkbox'">
+          <el-checkbox v-model="single" :label="index">
             {{ item.con }}
           </el-checkbox>
-        </template>
-        <ul v-if="item.img_list && item.img_list.length > 0" class="imglist">
-          <li v-for="it in item.img_list" :key="it.id">
-            <img :src="it.url" class="img" />
-          </li>
-        </ul>
-        <ul v-if="item.mp3_list && item.mp3_list.length > 0" class="audioList">
-          <li
-            v-for="(it, itindex) in item.mp3_list"
-            :key="it.id + itindex"
-            @click="playAudio(it, index)"
-          >
-            <img src="../../../assets/adult/Dialogue-audio.png" alt="" />
-            <span>3s</span>
-            <audio
-              :id="it.name + itindex"
-              v-if="item.mp3_list.length > 0"
-              :src="it.url"
-            ></audio>
-          </li>
-        </ul>
+        </template> -->
       </li>
     </ul>
-
+    <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" v-if="curQue.IsRecord"/>
   </div>
 </template>
 
 <script>
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+import Audio from "../preview/components/AudioRed.vue"; // 音频播放
 export default {
-  components: {},
+  components: {Soundrecord, Audio},
   props: ["curQue"],
   data() {
-    return {};
+    return {
+        single:''
+    };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
-    playAudio(item, index) {
-      let audio = document.getElementById(`${item.name}${index}`);
-      audio.play();
+    // 处理数据
+    handleData(){
+        
+    },
+    handleWav(data) {
+        
+    },
+    //判断是不是汉语
+    checkCh(str) {
+      var RegExp = new RegExp("[\\u4E00-\\u9FFF]", "g");
+      return RegExp.test(str);
+    },
+    checkEn(str) {
+      var RegExp = /^[a-zA-Z]+$/;
+      return RegExp.test(str);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+      this.handleData()
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -79,38 +94,99 @@ export default {
 ul {
   list-style: none;
   margin: 0;
-  li {
-    margin-bottom: 10px;
-  }
-}
-.imglist {
   display: flex;
-  img {
-    margin-left: 2px;
+  justify-content: start;
+  flex-flow: wrap;
+  li {
+    padding: 8px 16px;
+    border-radius: 4px;
+    &:hover,&.active{
+        background: #fff;
+    }
+    &.option1{
+        width: 100%;
+    }
+    &.option2{
+        width: 50%;
+    }
+    &.option3{
+        width: 33.33%;
+    }
+    &.option4{
+        width: 25%;
+    }
+    .el-radio{
+        width: 100%;
+    }
   }
 }
-.audioList {
-  display: flex;
-  > li {
-    width: 144px;
-    height: 40px;
-    background: #ffffff;
+.Big-Book-prev-Textdes{
+    width: 100%;
+    background: #F7F7F7;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    border-radius: 4px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 8px;
-    img {
-      width: 24px;
-      height: 24px;
+    padding: 24px;
+    border-radius: 8px;
+    .stem-box{
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        margin-bottom: 8px;
+        .audio-play{
+            width: 24px;
+            margin-left: 4px;
+        }
+        b{
+            font-size: 16px;
+            font-weight: normal;
+            line-height: 24px;
+        }
+        p{
+            margin: 0 0 16px 0;
+            color: #000000;
+            font-size: 16px;
+            line-height: 150%;
+        }
+    }
+    .hasCn{
+        font-family: 'FZJCGFKTK';
     }
-    cursor: pointer;
-    margin-right: 10px;
-  }
 }
-.img {
-  width: 200px;
+</style>
+<style lang="scss">
+.NNPE-single{
+    .el-radio{
+        display: flex;
+        align-items: flex-start;
+    }
+    .el-radio__label{
+        color: #000;
+        font-size: 16px;
+        line-height: 150%;
+        font-weight: normal;
+        display: flex;
+        align-items: flex-start;
+    }
+    .el-radio__input.is-checked+.el-radio__label{
+        color: #000;
+    }
+    .el-radio__inner::after{
+        width: 8px;
+        height: 8px;
+    }
+    .el-radio__label{
+        span{
+            font-family: 'FZJCGFKTK';
+            margin-right: 4px;
+        }
+        p{
+            margin: 0;
+        }
+    }
+    .el-radio__inner{
+        width: 16px;
+        height: 16px;
+        margin-top: 4px;
+        margin-right: 2px;
+    }
 }
 </style>