图片模板

src/components/Adult/preview/Picture.vue

@@ -3,6 +3,13 @@
     <div :class="['Big-Book-PictureBox']" v-if="curQue">
         <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
             <li v-for="(items,indexs) in curQue.option" :key="indexs"> 
+                <template v-if="ChildType!='image_gdcy'&& items.hanziSite=='top'">
+                    <div class="hanzi-box hanzi-box-top" v-if="items.pinyin||items.hanzi">
+                        <span v-if="items.pinyin&&(!items.pinyinSite||items.pinyinSite=='top')" class="pinyin">{{items.pinyin}}</span>
+                        <p v-if="items.hanzi">{{items.hanzi}}</p>
+                        <span v-if="items.pinyin&&(items.pinyinSite=='bottom')" class="pinyin">{{items.pinyin}}</span>
+                    </div>
+                </template>
                 <div v-for="(itemss,indexss) in items.img_list" :key="indexss">
                     <el-image
                         :src="itemss.url"
@@ -16,8 +23,11 @@
                 </div>
                 
                 <template v-if="ChildType!='image_gdcy'&&(!items.hanziSite||items.hanziSite=='bottom')">
-                    <span v-if="items.pinyin" class="pinyin">{{items.pinyin}}</span>
-                    <p v-if="items.hanzi">{{items.hanzi}}</p>
+                    <div class="hanzi-box" v-if="items.pinyin||items.hanzi">
+                        <span v-if="items.pinyin&&(!items.pinyinSite||items.pinyinSite=='top')" class="pinyin">{{items.pinyin}}</span>
+                        <p v-if="items.hanzi">{{items.hanzi}}</p>
+                        <span v-if="items.pinyin&&(items.pinyinSite=='bottom')" class="pinyin">{{items.pinyin}}</span>
+                    </div>
                 </template>
                 <template v-if="ChildType=='image_input'||ChildType=='image_input_three'||ChildType=='image_wordInput'">
                     <input class="singleInput" v-model="userAnswer.input" placeholder="输入" @blur="handleInput('input')">
@@ -57,7 +67,7 @@
                     <template v-if="items.mp3_list.length>0">
                         <span :class="['voice',mp3Play]" @click="playmicrophone(items.mp3_list[0].url,'mp3')"></span>
                     </template>
-                    <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" v-if="fn_list_obj.indexOf('image_record')>-1"/>
+                    <Soundrecord @handleWav="handleWav" :type="items.RecordControl?items.RecordControl:'normal'" class="luyin-box" v-if="fn_list_obj.indexOf('image_record')>-1||items.RecordControl"/>
                     <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
                     <span :class="['play',hasMicro]" @click="playmicrophone(wavblob)"></span> -->
                 </div>
@@ -233,23 +243,29 @@ export default {
             border-radius: 8px;
             border: 1px solid rgba(0, 0, 0, 0.1);
             background: #fff;
-            >span.pinyin{
-                display: block;
-                text-align: center;
-                font-family: 'GB-PINYINOK-B';
-                font-size: 14px;
-                line-height: 1.3;
-            }
-            >p{
-                color: #000000;
-                font-size: 16px;
-                line-height: 150%;
-                text-align: center;
-                margin: 0;
-                width: 100%;
+            .hanzi-box{
                 margin-top: 8px;
-                padding: 4px 8px;
-                font-family: 'FZJCGFKTK';
+                &.hanzi-box-top{
+                    margin-top: 0px;
+                    margin-bottom: 8px;
+                }
+                >span.pinyin{
+                    display: block;
+                    text-align: center;
+                    font-family: 'GB-PINYINOK-B';
+                    font-size: 14px;
+                    line-height: 1.3;
+                    color: #000000;
+                }
+                >p{
+                    color: #000000;
+                    font-size: 16px;
+                    line-height: 150%;
+                    text-align: center;
+                    margin: 0;
+                    width: 100%;
+                    font-family: 'FZJCGFKTK';
+                }
             }
             input{
                 flex: 1;