Merge branch 'NPC-lhd'

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"
@@ -95,6 +95,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>
@@ -117,9 +120,10 @@ import Ligature from "./preview/Ligature.vue";
 import InputHasRecord from "./preview/InputHasRecord.vue"; // 输入加录音
 import TextInputRecord from "./preview/TextInputRecord.vue"; // 文本+输入+录音
 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 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: {
@@ -138,6 +142,7 @@ export default {
     NumberSelectHasRecord,
     SelectTone,
     Soduko,
+    Single,
   },
   props: ["context", "fatherName"],
   data() {
@@ -311,7 +316,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/ArticleViewChs/Practicechs.vue

@@ -464,9 +464,9 @@ export default {
     }
   }
   .luyin-box {
-    width: 178px;
+    width: 200px;
     margin: 8px 0 8px 0px;
-    padding: 0 8px;
+    padding: 0 12px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     background: #ffffff;

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -464,9 +464,9 @@ export default {
     }
   }
   .luyin-box {
-    width: 178px;
+    width: 200px;
     margin: 8px 0 8px 0px;
-    padding: 0 8px;
+    padding: 0 12px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     background: #ffffff;

src/components/Adult/preview/InputHasRecord.vue

@@ -68,7 +68,7 @@ export default {
     }
     .luyin-box{
         justify-content: start;
-        padding: 4px 8px;
+        padding: 4px 12px;
         height: 40px;
         width: 280px;
         justify-content: flex-start;

src/components/Adult/preview/NumberSelectHasRecord.vue

@@ -175,7 +175,7 @@ export default {
                 font-family: 'FZJCGFKTK';
             }
             .luyin-box{
-                width: 68px;
+                width: 64px;
                 height: 32px;
                 border: 1px solid rgba(0, 0, 0, 0.1);
                 border-radius: 8px;

src/components/Adult/preview/Picture.vue

@@ -300,7 +300,7 @@ export default {
                 .luyin-box{
                     flex: 1;
                     justify-content: start;
-                    padding-left: 8px;
+                    padding-left: 12px;
                     border: 1px solid rgba(0, 0, 0, 0.1);
                     border-radius: 8px;
                 }

src/components/Adult/preview/SentenceInput.vue

@@ -5,11 +5,47 @@
     {{dataType}}
     <ul>
       <li v-for="(items, indexs) in curQue.option" :key="indexs">
+          <b v-if="items.number">{{ items.number }}.</b>
           <p :class="[oldsrc==items.mp3_list[0].url?palyClass:'']" @click="handlePlayVoice(items.mp3_list[0].url)" v-if="items.mp3_list&&items.mp3_list.length>0">
           </p>
-          <b v-if="items.number">{{ items.number }}.</b>
-          <span class="item-con">{{items.con}}</span>
-          <template v-if="curQue.ChildType=='sentence_answer'">
+          <!-- 句子内容 -->
+          <div class="item-content">
+              <!-- 如果不是填空题 不替换 -->
+              <template v-if="dataType.indexOf('sentence_input_chs')==-1">
+                  <template v-if="items.detail.wordsList.length==0">
+                      <p :class="['content-con',items.en?'':'content-con-small']" v-if="items.detail.sentence">{{items.detail.sentence}}</p>
+                  </template>
+                  <template v-else>
+                      <div class="con-box">
+                          <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in items.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
+                              <template v-if="items.detail.wordsList[indexCon + 1] && items.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(items.detail.wordsList[indexCon + 1].chs) > -1">
+                                  <div class="synthesis-box">
+                                      <div>
+                                            <span class="pinyin">{{itemCon.pinyin}}</span>
+                                            <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                        </div>
+                                        <div style="text-align: left">
+                                            <span class="pinyin">{{items.detail.wordsList[indexCon + 1].pinyin}}</span>
+                                            <span class="hanzi content-con">{{items.detail.wordsList[indexCon + 1].chs}}</span>
+                                        </div>
+                                  </div>
+                                  
+                              </template>
+                              <template v-else>
+                                    <span class="pinyin">{{itemCon.pinyin}}</span>
+                                    <span class="hanzi content-con">{{itemCon.chs}}</span>
+                              </template>
+                          </div>
+                      </div>
+                  </template>
+                  <b class="content-en" v-if="items.en">{{items.en}}</b>
+              </template>
+              <template v-else>
+                  
+                  
+              </template>
+          </div>
+          <template v-if="dataType.indexOf('sentence_answer_chs')>-1">
             <input
                     @input="handleInput"
                     :class="['item-input']"
@@ -17,17 +53,22 @@
                     placeholder="输入"
                 >
           </template>
-          <template v-if="curQue.ChildType=='sentence_judge'">
+          <template v-if="dataType.indexOf('sentence_judge_chs')>-1">
             <div class="judge-box">
                 <a :class="['right-btn',curQue.Bookanswer[indexs]=='right'?'active':'']" @click="handleSelectJudge('right',indexs)"></a>
                 <a :class="['error-btn',curQue.Bookanswer[indexs]=='error'?'active':'']" @click="handleSelectJudge('error',indexs)"></a>
             </div>
           </template>
-          <template v-if="curQue.ChildType=='sentence_Record'">
-              <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box"/>
+          <template v-if="dataType.indexOf('sentence_record_chs')>-1">
+              <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box" v-if="items.IsRecord"/>
           </template>
       </li>
     </ul>
+
+                <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box" style="width:64px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
+                <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" style="width:129px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
+                <Soundrecord @handleWav="handleWav" type="pro" class="luyin-box" style="width:200px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
+                <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" style="width:280px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;padding:0 12px;"/>
   </div>
 </template>
 
@@ -42,6 +83,7 @@ export default {
         oldsrc: '', // 存储播放音频的src 用来比对是否点击的是同一个音频
         palyClass: '',
         dataType: [], // 题型
+        chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
     };
   },
   computed: {},
@@ -86,12 +128,52 @@ export default {
                     _this.dataType.push(item.type)
                 }
             })
+            let curQue = JSON.parse(JSON.stringify(this.curQue));
+            curQue.option.forEach((dItem, dIndex) => {
+                let paraArr = []
+                dItem.detail.wordsList.forEach((sItem, sIndex) => {
+                    this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
+                    let obj = {
+                        pinyin: sItem.pinyin,
+                        chs: sItem.chs,
+                        isShow: sItem.isShow,
+                    };
+                    paraArr.push(obj);
+                })
+                this.$set(_this.curQue.option[dIndex].detail,'resArr',paraArr)
+                if(paraArr.length==0){
+                    let str = '就那天___'
+                    let arrs = str.split(/_{2,}/g)
+                    
+                }
+            })
+        },
+        //词和标点合一起
+        mergeWordSymbol(sItem, wItem, curIndex) {
+            let leg = sItem.length;
+            if (curIndex < leg - 1) {
+                if (this.chsFhList.indexOf(wItem.chs) > -1) {
+                    wItem.isShow = false;
+                } else {
+                    wItem.isShow = true;
+                }
+            }
         },
         // 判断题选择
         handleSelectJudge(obj,index){
             this.$set(this.curQue.Bookanswer, index, obj);
         },
+        handleWav(data) {
         
+        },
+        handleDatas (str, type) {
+            str = str.trim();
+            str = str.replace(/_{2,}/g, "^ ");
+            str =
+                type == "hanzi" ? str.replace(/\s+/g, "") : str.replace(/\s+/g, " ");
+            let resArr = type == "hanzi" ? str.split("") : str.split(/\s+/);
+            return resArr;
+        },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -168,15 +250,50 @@ export default {
                     background-size: 24px;
                 }
             }
-            .item-con{
+            .item-content{
                 flex: 1;
-                font-size: 16px;
-                line-height: 150%;
-                color: #000000;
-                margin-right: 8px;
-                word-break: break-word;
-                // margin-top: 4px;
-                font-family: 'FZJCGFKTK';
+                .content-con{
+                    font-size: 20px;
+                    line-height: 150%;
+                    color: #000000;
+                    font-family: 'FZJCGFKTK';
+                    margin: 0;
+                    &.content-con-small{
+                        font-size: 16px;
+                    }
+                }
+                .content-en{
+                    font-weight: normal;
+                    font-size: 16px;
+                    line-height: 150%;
+                    color: #000000;
+                    font-family: 'robot';
+                }
+                .con-box{
+                    display: flex;
+                    flex-flow: wrap;
+                    .con-item{
+                        text-align: center;
+                        padding: 0 3px;
+                        &.con-item-0{
+                            text-align: left;
+                            padding-left: 0;
+                        }
+                    }
+                    span{
+                        display: block;
+                    }
+                    .pinyin{
+                        font-family: 'GB-PINYINOK-B';
+                        font-size: 14px;
+                        line-height: 130%;
+                        color: #000000;
+                        height: 18px;
+                    }
+                    .synthesis-box{
+                        display: flex;
+                    }
+                }
             }
             input{
                 width: 68px;
@@ -219,7 +336,7 @@ export default {
             .luyin-box{
                 border: 1px solid rgba(0, 0, 0, 0.1);
                 border-radius: 8px;
-                width: 68px;
+                width: 64px;
             }
         }
     }

src/components/Adult/preview/Single.vue

@@ -1,68 +1,91 @@
 <!--  -->
 <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>
-    <ul v-if="curQue.option">
-      <li v-for="(item, index) in curQue.option" :key="item.id">
-        <template v-if="curQue.type == 'single'">
-          <el-radio
-            v-model="item.isAnswer"
-            :label="index"
-            style="margin-right: 0"
-          >
-            {{ item.con }}
-          </el-radio>
-        </template>
-        <template v-if="curQue.type == 'checkbox'">
-          <el-checkbox v-model="item.isAnswer" :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>
+  <div class="Big-Book-prev-Textdes NNPE-single" v-if="curQue">
+    <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="[item.font=='py'?'hasPinyin':item.font=='en'?'hasEn':item.font=='cn'?'hasCn':'']">{{ item.con }}</p>
+                <div v-for="(itemss,indexss) in item.img_list" :key="indexss">
+                    <el-image
+                        :src="itemss.url"
+                        fit="scale-down"
+                        class="img_urls"
+                    >
+                        <div slot="placeholder" class="image-slot">
+                            <img src="../../../assets/common/icon-imgloading.png" />
+                        </div>
+                    </el-image>
+                </div>
+            </el-radio>
+            <!-- <template v-if="curQue.type == 'checkbox'">
+            <el-checkbox v-model="single" :label="index">
+                {{ item.con }}
+            </el-checkbox>
+            </template> -->
+        </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>
-      </li>
-    </ul>
-
+        <Soundrecord @handleWav="handleWav" type="pro" class="luyin-box" v-if="itemI.IsRecord"/>
+    </div>
+    
   </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(){
+        let _this = this
+        _this.curQue.forEach(item => {
+            _this.single.push(null)
+        });
+    },
+    handleWav(data) {
+        
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+      this.handleData()
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -79,38 +102,136 @@ 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;
-    }
-    cursor: pointer;
-    margin-right: 10px;
-  }
+    padding: 24px;
+    border-radius: 8px;
+    >div{
+        margin-bottom: 16px;
+    }
+    .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 0 8px;
+            color: #000000;
+            font-size: 16px;
+            line-height: 24px;
+        }
+    }
+    .hasCn{
+        font-family: 'FZJCGFKTK';
+    }
+    .hasPinyin{
+        font-family: 'GB-PINYINOK-B';
+    }
+    .hasEn{
+        font-family: 'robot';
+    }
+    .luyin-box{
+        width: 200px;
+        height: 32px;
+        background: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: 8px 12px;
+        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;
+    }
+    .img_urls{
+        margin-left: 5px;
+        width: 100%;
+        height: 221px;
+        background: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+    }
 }
-.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>

src/components/Adult/preview/Soduko.vue

@@ -5,7 +5,7 @@
           <div class="item-box">
             <div :class="['item']" v-for="(item,index) in curQue.option" :key="index">
                 <div v-for="(items,indexs) in item" :key="indexs" 
-                    :class="[indexs%3==2?'noBorder':'',indexs>5?'noBorder-bottom':'',index==seletcItem[0]&&indexs==seletcItem[1]?'active':'',styleList[index][indexs]]">
+                    :class="[indexs%3==2?'noBorder':'',indexs>5?'noBorder-bottom':'',index==seletcItem[0]&&indexs==seletcItem[1]?'active':'',styleList[index][indexs],items.isHint?'notClick':'canClick']">
                     <span v-if="items.isHint">
                         {{items.value}}
                     </span>
@@ -48,6 +48,7 @@ export default {
       handleData(){
           let _this = this
           _this.soduko = []
+          _this.seletcItem = []
           _this.styleList = []
           _this.curQue.option.forEach(item => {
               let arr = []
@@ -155,12 +156,12 @@ export default {
                     // border-bottom: none;
                     margin-bottom: 0px;
                 }
-                &.active{
-                    border-color: #0086FF;
-                }
-                &:hover{
+                &.canClick:hover{
                     border-color: #737373;
                 }
+                &.canClick.active{
+                    border-color: #0086FF;
+                }
                 &.right{
                     background: #F5FFF9;
                     border-color: #F5FFF9;
@@ -193,7 +194,7 @@ export default {
                     background: initial;
                     line-height: 58px;
                     margin: 0;
-                    
+                    cursor: pointer;
                 }
             }
         }

src/components/Adult/preview/Soundrecord.vue

@@ -11,6 +11,7 @@
           'record-time',
           microphoneStatus ? 'record-ing' : '',
           selectIndex || selectIndex == 0 ? 'record-black' : '',
+          type && type == 'normal'?'record-time-flex':''
         ]"
         v-if="type && type == 'normal'"
         >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
@@ -272,9 +273,15 @@ export default {
       if (this.selectIndex || this.selectIndex == 0) {
         this.recordList.splice(this.selectIndex, 1);
         this.selectIndex =
-          this.recordList.length > 1 ? this.recordList.length - 1 : null;
-        this.hasMicro = "";
-        this.recordtime = 0;
+        this.recordList.length > 0 ? this.recordList.length - 1 : null;
+        this.hasMicro = this.recordList.length > 0 ? "normal" :"";
+        this.recordtime = this.recordList.length > 0 ? this.recordList[this.selectIndex].toltime :0;
+        this.audio.pause()
+        this.audio = new window.Audio()
+        this.wavblob = this.recordList.length > 0 ? this.recordList[this.selectIndex].wavData : null;
+        this.oldIndex = null;
+        this.isPlaying = false;
+        clearInterval(this.timer);
       }
     },
   },
@@ -323,9 +330,9 @@ export default {
   // border: 1px solid rgba(0, 0, 0, 0.1);
   // border-radius: 8px;
   .playBack {
-    width: 24px;
-    height: 24px;
-    margin-left: 4px;
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
     background: url("../../../assets/newImage/common/luyin-play.png") center
       no-repeat;
     background-size: 100%;
@@ -349,8 +356,8 @@ export default {
     margin-left: 8px;
   }
   .record {
-    width: 24px;
-    height: 24px;
+    width: 16px;
+    height: 16px;
     background: url("../../../assets/newImage/common/luyin.png") center
       no-repeat;
     background-size: 100%;
@@ -358,33 +365,37 @@ export default {
     &.active {
       background: url("../../../assets/newImage/common/luyin-active.png") center
         no-repeat;
-      background-size: 16px;
+      background-size: 100%;
     }
     &.active:hover {
       background: url("../../../assets/newImage/common/luyin-stop.png") center
         no-repeat;
-      background-size: 16px;
+      background-size: 100%;
     }
   }
   .record-time {
     color: rgba(0, 0, 0, 0.3);
     font-size: 16px;
     line-height: 150%;
-    margin-left: 4px;
+    margin-left: 8px;
+    font-family: 'robot';
     &.record-black {
       color: #000000;
     }
     &.record-ing {
       color: #de4444;
     }
+    &.record-time-flex{
+        flex: 1;
+    }
   }
   .el-select {
     margin-left: 8px;
   }
   .record-delete {
-    width: 24px;
-    height: 24px;
-    // margin-left: 4px;
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
     background: url("../../../assets/newImage/common/luyin-delete.png") center
       no-repeat;
     background-size: 100%;

src/components/Adult/preview/TextInputRecord.vue

@@ -129,10 +129,10 @@ export default {
             .luyin-box{
                 border: 1px solid rgba(0, 0, 0, 0.1);
                 border-radius: 8px;
-                width: 292px;
+                width: 280px;
                 height: 40px;
                 margin-left: 8px;
-                padding: 0 8px;
+                padding: 0 12px;
             }
         }
     }