Browse Source

句子模板 移动端

natasha 5 months ago
parent
commit
add1ab7722

+ 4 - 4
src/components/Adult/phonePreview/SentenceInput.vue

@@ -304,13 +304,13 @@
 </template>
 
 <script>
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
-import EditDiv from "../preview/EditDiv.vue";
-import AnswerTitle from "../preview/components/AnswerTitle.vue";
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
+import EditDiv from "../phonePreview/EditDiv.vue";
+import AnswerTitle from "../phonePreview/components/AnswerTitle.vue";
 
 export default {
   components: { Soundrecord, EditDiv, AnswerTitle },
-  props: ["curQue", "TaskModel", "judgeAnswer", "type"],
+  props: ["curQue", "TaskModel", "judgeAnswer", "type", "baseSizePhone"],
   data() {
     return {
       audio: new Audio(),

+ 91 - 47
src/components/Adult/phonePreview/SentenceListenRead.vue

@@ -31,18 +31,32 @@
             curTime < curQue.wordTime[index].ed &&
             stopAudio
               ? 'active'
-              : '',
+              : ''
           ]"
-          @click="handleChangeTime(curQue.wordTime[index].bg,curQue.wordTime[index].ed)"
+          @click="
+            handleChangeTime(
+              curQue.wordTime[index].bg,
+              curQue.wordTime[index].ed
+            )
+          "
         ></a>
-        <b v-if="items.number">{{ items.number }}</b>
+        <b
+          v-if="items.number"
+          :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+          >{{ items.number }}</b
+        >
         <div class="content-box">
           <template v-if="items.detail.wordsList.length == 0">
             <p
               :class="[
                 'content-con',
-                items.font?items.font:/^[\u4e00-\u9fa5]/.test(items.detail.sentence) ? '' : 'hasPy',
+                items.font
+                  ? items.font
+                  : /^[\u4e00-\u9fa5]/.test(items.detail.sentence)
+                  ? ''
+                  : 'hasPy'
               ]"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
               v-if="items.detail.sentence"
             >
               {{ items.detail.sentence }}
@@ -59,10 +73,10 @@
                 <template
                   v-if="
                     items.detail.wordsList[indexCon + 1] &&
-                    items.detail.wordsList[indexCon + 1].chs &&
-                    chsFhList.indexOf(
-                      items.detail.wordsList[indexCon + 1].chs
-                    ) > -1
+                      items.detail.wordsList[indexCon + 1].chs &&
+                      chsFhList.indexOf(
+                        items.detail.wordsList[indexCon + 1].chs
+                      ) > -1
                   "
                 >
                   <div class="synthesis-box">
@@ -70,12 +84,18 @@
                       <span
                         class="pinyin"
                         :class="[
-                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         v-if="itemCon.pinyin"
                         >{{ itemCon.pinyin }}</span
                       >
-                      <span class="hanzi content-con" :class="[itemCon.fontFamily]">{{ itemCon.chs }}</span>
+                      <span
+                        class="hanzi content-con"
+                        :class="[itemCon.fontFamily]"
+                        :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                        >{{ itemCon.chs }}</span
+                      >
                     </div>
                     <div style="text-align: left">
                       <span
@@ -85,14 +105,20 @@
                             items.detail.wordsList[indexCon + 1].pinyin
                           ) > -1
                             ? 'noFont'
-                            : '',
+                            : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         v-if="items.detail.wordsList[indexCon + 1].pinyin"
                         >{{ items.detail.wordsList[indexCon + 1].pinyin }}</span
                       >
-                      <span class="hanzi content-con" :class="[items.detail.wordsList[indexCon + 1].fontFamily]">{{
-                        items.detail.wordsList[indexCon + 1].chs
-                      }}</span>
+                      <span
+                        class="hanzi content-con"
+                        :class="[
+                          items.detail.wordsList[indexCon + 1].fontFamily
+                        ]"
+                        :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                        >{{ items.detail.wordsList[indexCon + 1].chs }}</span
+                      >
                     </div>
                   </div>
                 </template>
@@ -100,37 +126,56 @@
                   <span
                     class="pinyin"
                     :class="[
-                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                     ]"
+                    :style="{ fontSize: baseSizePhone + 'px' }"
                     v-if="itemCon.pinyin"
                     >{{ itemCon.pinyin }}</span
                   >
-                  <span class="hanzi content-con" :class="[itemCon.fontFamily]">{{ itemCon.chs }}</span>
+                  <span
+                    class="hanzi content-con"
+                    :class="[itemCon.fontFamily]"
+                    :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                    >{{ itemCon.chs }}</span
+                  >
                 </template>
               </div>
             </div>
           </template>
-          <b class="content-en" v-if="items.en">{{ items.en }}</b>
+          <b
+            class="content-en"
+            v-if="items.en"
+            :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+            >{{ items.en }}</b
+          >
         </div>
-        <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" :answerRecordList="curQue.Bookanswer[index].recordList" :tmIndex="index" :TaskModel="TaskModel" />
+        <Soundrecord
+          @handleWav="handleWav"
+          type="normal"
+          class="luyin-box"
+          :answerRecordList="curQue.Bookanswer[index].recordList"
+          :tmIndex="index"
+          :TaskModel="TaskModel"
+          :baseSizePhone="baseSizePhone"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import AudioLine from "../preview/AudioLine.vue";
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+import AudioLine from "../phonePreview/AudioLine.vue";
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
 export default {
   components: { AudioLine, Soundrecord },
-  props: ["curQue", "themeColor", "TaskModel"],
+  props: ["curQue", "themeColor", "TaskModel", "baseSizePhone"],
   data() {
     return {
       curTime: 0,
       chsFhList: [",", "。", "“", ":", "》", "?", "!", ";"],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
       stopAudio: false,
-      ed:null,
+      ed: null
     };
   },
   computed: {},
@@ -143,14 +188,14 @@ export default {
       this.dataType = [];
       if (!this.curQue.Bookanswer) {
         let curCorrect = [];
-        this.curQue.option.forEach((item) => {
+        this.curQue.option.forEach(item => {
           curCorrect.push({
-              recordList: []
+            recordList: []
           });
         });
         this.$set(this.curQue, "Bookanswer", curCorrect);
       }
-      this.curQue.fn_list.forEach((item) => {
+      this.curQue.fn_list.forEach(item => {
         if (item.isFn) {
           _this.dataType.push(item.type);
         }
@@ -163,7 +208,7 @@ export default {
           let obj = {
             pinyin: sItem.pinyin,
             chs: sItem.chs,
-            isShow: sItem.isShow,
+            isShow: sItem.isShow
           };
           paraArr.push(obj);
         });
@@ -185,22 +230,22 @@ export default {
       this.curTime = curTime * 1000;
     },
     handleWav(list, tmIndex) {
-        tmIndex = tmIndex ? tmIndex : 0;
-        this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
+      tmIndex = tmIndex ? tmIndex : 0;
+      this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
     },
     //点击播放某个句子
-    handleChangeTime(time,edTime) {
+    handleChangeTime(time, edTime) {
       let _this = this;
       _this.curTime = time;
-      _this.stopAudio = true
+      _this.stopAudio = true;
       _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
-      _this.ed = edTime
+      _this.ed = edTime;
     },
     handleListenRead(playFlag) {
       this.stopAudio = playFlag;
     },
-    emptyEd(){
-        this.ed = null;
+    emptyEd() {
+      this.ed = null;
     }
   },
   //生命周期 - 创建完成(可以访问当前this实例)
@@ -215,33 +260,33 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .SentenceListenRead {
-  background: #f7f7f7;
+  // background: #f7f7f7;
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   border-radius: 8px;
   overflow: hidden;
   // margin-top: 16px;
   .aduioLine-box {
-    background: #f7f7f7;
+    // background: #f7f7f7;
   }
   .item-box {
-    padding: 16px 24px;
+    padding: 10px;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     .item {
-      padding: 8px 12px;
+      padding: 10px;
       display: flex;
       align-items: center;
-      background: #ffffff;
+      // background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
       border-radius: 8px;
-      margin: 8px 0;
+      margin: 5px 0;
       b {
         background: #de4444;
         text-align: center;
@@ -273,10 +318,10 @@ export default {
           color: #000000;
           font-family: "FZJCGFKTK";
           margin: 0;
-          &.en{
+          &.en {
             font-family: "robot";
           }
-          &.py{
+          &.py {
             font-family: "GB-PINYINOK-B";
           }
           &.hasPy {
@@ -322,8 +367,8 @@ export default {
       .luyin-box {
         // border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 8px;
-        width: 128px;
-        padding: 0 12px;
+        min-width: 98px;
+        padding: 0;
       }
     }
   }
@@ -366,5 +411,4 @@ export default {
     }
   }
 }
-
-</style>
+</style>

+ 20 - 7
src/components/Adult/phonePreview/SentenceModule.vue

@@ -281,6 +281,7 @@
                         :TaskModel="TaskModel"
                         :is_short_auto="items.fn_check_list.is_short_auto"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 判断 -->
@@ -301,6 +302,7 @@
                         :Isexample="items.Isexample"
                         :judgeCorrectAnswer="items.correct.judge"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 多选题 -->
@@ -328,6 +330,7 @@
                         :items="items"
                         :judgeAnswer="judgeAnswer"
                         :correctAnswer="items.correct"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 单选题 -->
@@ -355,6 +358,7 @@
                         :curQue="curQue"
                         :items="items"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 录音 -->
@@ -383,6 +387,7 @@
                         :TaskModel="TaskModel"
                         :tmIndex="sdIndex"
                         :answerRecordList="[]"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                   </div>
@@ -404,6 +409,7 @@
                     :curQue="curQue"
                     :items="items"
                     :judgeAnswer="judgeAnswer"
+                    :baseSizePhone="baseSizePhone"
                   />
                 </div>
                 <!-- 单选题 -->
@@ -681,6 +687,7 @@
                         :TaskModel="TaskModel"
                         :is_short_auto="items.fn_check_list.is_short_auto"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 判断 -->
@@ -701,6 +708,7 @@
                         :Isexample="items.Isexample"
                         :judgeCorrectAnswer="items.correct.judge"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 多选题 -->
@@ -728,6 +736,7 @@
                         :items="items"
                         :judgeAnswer="judgeAnswer"
                         :correctAnswer="items.correct"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 单选题 -->
@@ -755,6 +764,7 @@
                         :curQue="curQue"
                         :items="items"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 录音 -->
@@ -789,6 +799,7 @@
                         :indexs="indexs"
                         :modelType="curQue.type"
                         @handleWav="handleWav"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                   </div>
@@ -810,6 +821,7 @@
                     :curQue="curQue"
                     :items="items"
                     :judgeAnswer="judgeAnswer"
+                    :baseSizePhone="baseSizePhone"
                   />
                 </div>
                 <!-- 单选题 -->
@@ -827,6 +839,7 @@
                     :curQue="curQue"
                     :items="items"
                     :judgeAnswer="judgeAnswer"
+                    :baseSizePhone="baseSizePhone"
                   />
                 </div>
               </div>
@@ -856,14 +869,14 @@
 </template>
 
 <script>
-import AudioLine from "../preview/AudioLine.vue";
+import AudioLine from "../phonePreview/AudioLine.vue";
 import AudioItem from "./components/AudioItem.vue";
 import OneSentenceTemp from "../phonePreview/components/OneSentenceTemp.vue";
 import JudgeTemp from "./components/JudgeTemp.vue";
 import ShortInputTemp from "./components/ShortInputTemp.vue";
 import NumberStyle from "./components/NumberStyle.vue";
-import EditDiv from "../preview/EditDiv.vue";
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+import EditDiv from "../phonePreview/EditDiv.vue";
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
 import OptionTemp from "./components/OptionTemp.vue";
 export default {
   components: {
@@ -1487,7 +1500,7 @@ export default {
   border-radius: 8px;
   overflow: hidden;
   .out-audioLine-box {
-    background: #f7f7f7;
+    // background: #f7f7f7;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   .container-box {
@@ -1511,7 +1524,7 @@ export default {
     flex: 1;
     padding: 0;
     box-sizing: border-box;
-
+    padding: 10px;
     &.ul-flex {
       display: flex;
       flex-wrap: wrap;
@@ -1552,7 +1565,7 @@ export default {
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       margin: 8px 0;
-      padding: 8px 0;
+      padding: 8px;
       .number-box {
         width: 16px;
         height: 30px;
@@ -1718,7 +1731,7 @@ export default {
       }
     }
     &.sentence-control {
-      background: #f7f7f7;
+      // background: #f7f7f7;
       border: 1px solid rgba(0, 0, 0, 0.1);
     }
   }

+ 5 - 0
src/components/Adult/phonePreview/SentenceMulModule.vue

@@ -205,6 +205,7 @@
                           :TaskModel="TaskModel"
                           :tmIndex="sdIndex"
                           :answerRecordList="[]"
+                          :baseSizePhone="baseSizePhone"
                         />
                       </div>
                     </div>
@@ -353,6 +354,7 @@
                         :TaskModel="TaskModel"
                         :tmIndex="sdIndex"
                         :answerRecordList="[]"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                   </div>
@@ -613,6 +615,7 @@
                             :indexs="indexs"
                             :modelType="curQue.type"
                             @handleWav="handleWav"
+                            :baseSizePhone="baseSizePhone"
                           />
                         </div>
                       </div>
@@ -719,6 +722,7 @@
                             :sddIndex="sdIndex"
                             :modelType="curQue.type"
                             @handleWav="handleWav"
+                            :baseSizePhone="baseSizePhone"
                           />
                         </div>
                       </div>
@@ -873,6 +877,7 @@
                           :sddIndex="sdIndex"
                           :modelType="curQue.type"
                           @handleWav="handleWav"
+                          :baseSizePhone="baseSizePhone"
                         />
                       </div>
                     </div>

+ 15 - 6
src/components/Adult/phonePreview/UploadControlView.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
+  <div class="Big-Book-prev-Textdes uploadContralView" v-if="curQue">
     <div
       class="main"
       :style="{ display: type == 'upload_control_chs' ? 'flex' : 'block' }"
@@ -131,8 +131,8 @@
       :close-on-click-modal="false"
       :modal-append-to-body="true"
       :append-to-body="true"
-      width="1000px"
-      class="login-dialog"
+      width="100%"
+      class="login-dialog-uploadContral"
       v-if="showIframe"
     >
       <iframe
@@ -140,6 +140,7 @@
         id="ifms"
         width="100%"
         height="600px"
+        border="none"
       ></iframe>
     </el-dialog>
   </div>
@@ -304,7 +305,7 @@ export default {
 //@import url(); 引入公共css类
 .Big-Book-prev-Textdes {
   width: 100%;
-  padding: 15px 0 15px 15px;
+  padding: 0;
   // background: #f7f7f7;
   // border: 1px solid rgba(0, 0, 0, 0.1);
   .dv {
@@ -350,13 +351,14 @@ export default {
     color: #000000;
     cursor: pointer;
     margin-top: 8px;
+    background: transparent;
     img {
       margin-right: 13px;
     }
   }
   .main {
-    margin-top: 23px;
-    width: 477px;
+    // margin-top: 23px;
+    // width: 477px;
     // height: 292px;
     // background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
@@ -384,3 +386,10 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.login-dialog-uploadContral {
+  .el-dialog__body {
+    padding: 10px;
+  }
+}
+</style>