单选题

src/components/Adult/preview/Single.vue

@@ -1,44 +1,47 @@
 <!--  -->
 <template>
   <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 v-for="(itemI,indexI) in curQue" :key="indexI">
+        <div class="stem-box">
+            <b v-if="itemI.topicNumber">{{itemI.topicNumber}}.</b>
+            <p v-if="itemI.topic.con" :class="[/^[\u4e00-\u9fa5]/.test(itemI.topic.con)?'hasCn':'']">{{itemI.topic.con}}</p>
+            <Audio
+                :mp3="
+                itemI.topic.mp3_list.length > 0 ? itemI.topic.mp3_list[0].url : ''"
+                class="audio-play"
+            />
+            <div v-for="(itemss,indexss) in itemI.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="itemI.option">
+        <li v-for="(item, index) in itemI.option" :key="index" :class="['option'+itemI.numberList.con,single[indexI]===index?'active':'']">
+            <el-radio
+                v-model="single[indexI]"
+                :label="index"
+                style="margin-right: 0"
+            >
+                <span v-if="item.number">{{item.number}}.</span>
+                <p :class="[/^[\u4e00-\u9fa5]/.test(item.con)?'hasCn':'',/^[a-zA-Z]/.test(item.con)?'hasEn':'',/^[(b|p|m|f|d|t|n|l|g|k|h|j|q|x|zh|ch|sh|r|z|c|s|y|w)(a|o|e|i|u|ao|iu|ei|ui|ou|iu|ie|an|en|un|ang|eng|ing|ong)/i]/.test(item.con)?'hasPinyin':'']">{{ item.con }}</p>
+            </el-radio>
+            <!-- <template v-if="curQue.type == 'checkbox'">
+            <el-checkbox v-model="single" :label="index">
+                {{ item.con }}
+            </el-checkbox>
+            </template> -->
+        </li>
+        </ul>
+        <Soundrecord @handleWav="handleWav" type="pro" class="luyin-box" v-if="itemI.IsRecord"/>
     </div>
-    <ul v-if="curQue.option">
-      <li v-for="(item, index) in curQue.option" :key="index" :class="['option'+curQue.numberList.con,single===index?'active':'']">
-          <el-radio
-            v-model="single"
-            :label="index"
-            style="margin-right: 0"
-          >
-            <span v-if="item.number">{{item.number}}.</span>
-            <p :class="[/^[\u4e00-\u9fa5]/.test(item.con)?'hasCn':'']">{{ item.con }}</p>
-          </el-radio>
-        <!-- <template v-if="curQue.type == 'checkbox'">
-          <el-checkbox v-model="single" :label="index">
-            {{ item.con }}
-          </el-checkbox>
-        </template> -->
-      </li>
-    </ul>
-    <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" v-if="curQue.IsRecord"/>
+    
   </div>
 </template>
 
@@ -50,7 +53,7 @@ export default {
   props: ["curQue"],
   data() {
     return {
-        single:''
+        single:[]
     };
   },
   computed: {},
@@ -59,20 +62,14 @@ export default {
   methods: {
     // 处理数据
     handleData(){
-        
+        let _this = this
+        _this.curQue.forEach(item => {
+            _this.single.push(null)
+        });
     },
     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() {
@@ -126,6 +123,9 @@ ul {
     border: 1px solid rgba(0, 0, 0, 0.1);
     padding: 24px;
     border-radius: 8px;
+    >div{
+        margin-bottom: 16px;
+    }
     .stem-box{
         display: flex;
         align-items: flex-start;
@@ -141,7 +141,7 @@ ul {
             line-height: 24px;
         }
         p{
-            margin: 0 0 16px 0;
+            margin: 0;
             color: #000000;
             font-size: 16px;
             line-height: 150%;
@@ -150,6 +150,31 @@ ul {
     .hasCn{
         font-family: 'FZJCGFKTK';
     }
+    .hasPinyin{
+        font-family: 'GB-PINYINOK-B';
+    }
+    .hasEn{
+        font-family: 'robot';
+    }
+    .luyin-box{
+        width: 178px;
+        height: 32px;
+        background: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: 8px;
+        margin-top: 16px;
+    }
+    .img_url{
+        width: 380px;
+        height: 265px;
+        background: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+        margin-left: 24px;
+    }
 }
 </style>
 <style lang="scss">