连线 移动端

src/components/Adult/phonePreview/Ligature.vue

@@ -10,11 +10,18 @@
     "
   >
     <div class="main">
-      <div style="text-align: center">{{ curQue.title }}</div>
+      <div :style="{ textAlign: center, fontSize: baseSizePhone + 2 + 'px' }">
+        {{ curQue.title }}
+      </div>
       <div :id="'container' + number" class="container">
         <div class="left">
           <ul>
-            <div>{{ curQue.conTitle }}</div>
+            <div
+              v-if="curQue.conTitle"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+            >
+              {{ curQue.conTitle }}
+            </div>
             <li
               :class="[judgeAnswer + 'left' + index + number]"
               v-for="(item, index) in curQue.con"
@@ -41,12 +48,25 @@
                   class="text"
                   :class="[
                     'left' + index,
-                    YouranswerClass(index, 'left', item),
+                    YouranswerClass(index, 'left', item)
                   ]"
                   v-if="
                     item.detail.wordsList.length > 0 || item.detail.sentence
                   "
-                  :style="{fontFamily:item.detail.sentence&&item.detail.wordsList.length===0&&/^[\u4e00-\u9fa5]/.test(item.detail.sentence)?'FZJCGFKTK':'',fontSize:item.detail.sentence&&item.detail.wordsList.length===0&&/^[\u4e00-\u9fa5]/.test(item.detail.sentence)?'20px':''}"
+                  :style="{
+                    fontFamily:
+                      item.detail.sentence &&
+                      item.detail.wordsList.length === 0 &&
+                      /^[\u4e00-\u9fa5]/.test(item.detail.sentence)
+                        ? 'FZJCGFKTK'
+                        : '',
+                    fontSize:
+                      item.detail.sentence &&
+                      item.detail.wordsList.length === 0 &&
+                      /^[\u4e00-\u9fa5]/.test(item.detail.sentence)
+                        ? baseSizePhone + 6 + 'px'
+                        : ''
+                  }"
                 >
                   <!-- 大于0就说明分词了 -->
                   <template v-if="item.detail.wordsList.length > 0">
@@ -56,63 +76,59 @@
                     >
                       <template v-if="item.detail.pyPosition == 'top'">
                         <p
-                          style="
-                            font-family: 'GB-PINYINOK-B';
-                            font-size: 14px;
-                            line-height: 20px;
-                          "
+                          :style="{
+                            fontFamily: 'GB-PINYINOK-B',
+                            fontSize: baseSizePhone + 'px',
+                            lineHeight: '1.4'
+                          }"
                           v-html="it.pinyin"
-                        >
-                        </p>
+                        ></p>
                         <p
                           :style="{
-                            fontSize: it.fontSize? it.fontSize: '20px',
-                            color: it.fontColor?it.fontColor:'#606266',
-                            fontFamily: it.fontFamily?it.fontFamily:'FZJCGFKTK',
-                            'line-height':'150%'
+                            fontSize: baseSizePhone + 6 + 'px',
+                            color: it.fontColor ? it.fontColor : '#606266',
+                            fontFamily: it.fontFamily
+                              ? it.fontFamily
+                              : 'FZJCGFKTK',
+                            'line-height': '150%'
                           }"
                           :class="[
-                            it.wordPadding.indexOf('left') > -1
-                            ? 'dleft'
-                            : '',
+                            it.wordPadding.indexOf('left') > -1 ? 'dleft' : '',
                             it.wordPadding.indexOf('right') > -1
-                            ? 'dright'
-                            : '',
+                              ? 'dright'
+                              : '',
                             it.underLine ? 'underline' : ''
                           ]"
                           v-html="it.chs"
-                        >
-                        </p>
+                        ></p>
                       </template>
                       <template v-else>
                         <p
                           :style="{
-                            fontSize: it.fontSize? it.fontSize: '20px',
-                            color: it.fontColor?it.fontColor:'#606266',
-                            fontFamily: it.fontFamily?it.fontFamily:'FZJCGFKTK',
-                            'line-height':'150%'
+                            fontSize: baseSizePhone + 6 + 'px',
+                            color: it.fontColor ? it.fontColor : '#606266',
+                            fontFamily: it.fontFamily
+                              ? it.fontFamily
+                              : 'FZJCGFKTK',
+                            'line-height': '150%'
                           }"
                           :class="[
-                            it.wordPadding.indexOf('left') > -1
-                            ? 'dleft'
-                            : '',
+                            it.wordPadding.indexOf('left') > -1 ? 'dleft' : '',
                             it.wordPadding.indexOf('right') > -1
-                            ? 'dright'
-                            : '',
+                              ? 'dright'
+                              : '',
                             it.underLine ? 'underline' : ''
                           ]"
                           v-html="it.chs"
-                        >
-                        </p>
+                        ></p>
                         <p
-                          style="
-                            font-family: 'GB-PINYINOK-B';
-                            font-size: 14px;
-                            line-height: 20px;
-                          "
+                          :style="{
+                            fontFamily: 'GB-PINYINOK-B',
+                            fontSize: baseSizePhone + 'px',
+                            lineHeight: '1.4'
+                          }"
                           v-html="it.pinyin"
-                        >
-                        </p>
+                        ></p>
                       </template>
                     </div>
                   </template>
@@ -121,7 +137,13 @@
                   </template>
                 </div>
               </div>
-              <span v-if="item.Number">{{ item.Number }}</span>
+              <span
+                v-if="item.Number"
+                :style="{
+                  fontSize: baseSizePhone + 2 + 'px'
+                }"
+                >{{ item.Number }}</span
+              >
               <img
                 v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
                 name="source"
@@ -141,7 +163,12 @@
         </div>
         <div class="right">
           <ul>
-            <div>{{ curQue.optionTitle }}</div>
+            <div
+              v-if="curQue.optionTitle"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+            >
+              {{ curQue.optionTitle }}
+            </div>
             <li
               :class="[judgeAnswer + 'right' + index + number]"
               v-for="(item, index) in curQue.option"
@@ -167,7 +194,13 @@
                 src="../../../assets/adult/LineImg-select.png"
                 alt=""
               />
-              <span v-if="item.Number">{{ item.Number }}</span>
+              <span
+                v-if="item.Number"
+                :style="{
+                  fontSize: baseSizePhone + 2 + 'px'
+                }"
+                >{{ item.Number }}</span
+              >
               <div>
                 <img
                   v-if="item.img_list.length > 0"
@@ -183,12 +216,25 @@
                   class="text"
                   :class="[
                     'right' + index,
-                    YouranswerClass(index, 'right', item),
+                    YouranswerClass(index, 'right', item)
                   ]"
                   v-if="
                     item.detail.wordsList.length > 0 || item.detail.sentence
                   "
-                  :style="{fontFamily:item.detail.sentence&&item.detail.wordsList.length===0&&/^[\u4e00-\u9fa5]/.test(item.detail.sentence)?'FZJCGFKTK':'',fontSize:item.detail.sentence&&item.detail.wordsList.length===0&&/^[\u4e00-\u9fa5]/.test(item.detail.sentence)?'20px':''}"
+                  :style="{
+                    fontFamily:
+                      item.detail.sentence &&
+                      item.detail.wordsList.length === 0 &&
+                      /^[\u4e00-\u9fa5]/.test(item.detail.sentence)
+                        ? 'FZJCGFKTK'
+                        : '',
+                    fontSize:
+                      item.detail.sentence &&
+                      item.detail.wordsList.length === 0 &&
+                      /^[\u4e00-\u9fa5]/.test(item.detail.sentence)
+                        ? baseSizePhone + 6 + 'px'
+                        : ''
+                  }"
                 >
                   <!-- 大于0就说明分词了 -->
                   <template v-if="item.detail.wordsList.length > 0">
@@ -198,63 +244,59 @@
                     >
                       <template v-if="item.detail.pyPosition == 'top'">
                         <p
-                          style="
-                            font-family: 'GB-PINYINOK-B';
-                            font-size: 14px;
-                            line-height: 20px;
-                          "
+                          :style="{
+                            fontFamily: 'GB-PINYINOK-B',
+                            fontSize: baseSizePhone + 'px',
+                            lineHeight: '1.4'
+                          }"
                           v-html="it.pinyin"
-                        >
-                        </p>
+                        ></p>
                         <p
                           :style="{
-                            fontSize: it.fontSize? it.fontSize: '20px',
-                            color: it.fontColor?it.fontColor:'#606266',
-                            fontFamily: it.fontFamily?it.fontFamily:'FZJCGFKTK',
-                            'line-height':'150%'
+                            fontSize: baseSizePhone + 6 + 'px',
+                            color: it.fontColor ? it.fontColor : '#606266',
+                            fontFamily: it.fontFamily
+                              ? it.fontFamily
+                              : 'FZJCGFKTK',
+                            'line-height': '150%'
                           }"
                           :class="[
-                            it.wordPadding.indexOf('left') > -1
-                            ? 'dleft'
-                            : '',
+                            it.wordPadding.indexOf('left') > -1 ? 'dleft' : '',
                             it.wordPadding.indexOf('right') > -1
-                            ? 'dright'
-                            : '',
+                              ? 'dright'
+                              : '',
                             it.underLine ? 'underline' : ''
                           ]"
                           v-html="it.chs"
-                        >
-                        </p>
+                        ></p>
                       </template>
                       <template v-else>
                         <p
                           :style="{
-                            fontSize: it.fontSize? it.fontSize: '20px',
-                            color: it.fontColor?it.fontColor:'#606266',
-                            fontFamily: it.fontFamily?it.fontFamily:'FZJCGFKTK',
-                            'line-height':'150%'
+                            fontSize: baseSizePhone + 6 + 'px',
+                            color: it.fontColor ? it.fontColor : '#606266',
+                            fontFamily: it.fontFamily
+                              ? it.fontFamily
+                              : 'FZJCGFKTK',
+                            'line-height': '150%'
                           }"
                           :class="[
-                            it.wordPadding.indexOf('left') > -1
-                            ? 'dleft'
-                            : '',
+                            it.wordPadding.indexOf('left') > -1 ? 'dleft' : '',
                             it.wordPadding.indexOf('right') > -1
-                            ? 'dright'
-                            : '',
-                            it.underLine ? 'underline' : '',
+                              ? 'dright'
+                              : '',
+                            it.underLine ? 'underline' : ''
                           ]"
                           v-html="it.chs"
-                        >
-                        </p>
+                        ></p>
                         <p
-                          style="
-                            font-family: 'GB-PINYINOK-B';
-                            font-size: 14px;
-                            line-height: 20px;
-                          "
+                          :style="{
+                            fontFamily: 'GB-PINYINOK-B',
+                            fontSize: baseSizePhone + 'px',
+                            lineHeight: '1.4'
+                          }"
                           v-html="it.pinyin"
-                        >
-                        </p>
+                        ></p>
                       </template>
                     </div>
                   </template>
@@ -286,18 +328,18 @@ import AnswerTitle from "../preview/components/AnswerTitle.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
-    AnswerTitle,
+    AnswerTitle
   },
-  props: ["curQue", "TaskModel", "number", "judgeAnswer"],
+  props: ["curQue", "TaskModel", "number", "judgeAnswer", "baseSizePhone"],
   data() {
     //这里存放数据
     return {
       data: {
         userAnswerJudge: "",
-        data: [],
+        data: []
       },
       allimgnumber: 0,
-      lodimgnumber: 0,
+      lodimgnumber: 0
     };
   },
   //计算属性 类似于data概念
@@ -306,7 +348,7 @@ export default {
   watch: {
     curQue(val, oldval) {
       this.$forceUpdate(); //触发更新函数更新高度
-    },
+    }
   },
   //方法集合
   methods: {
@@ -329,7 +371,7 @@ export default {
             }
           }
         } else {
-          this.curQue.con.forEach((itemss) => {
+          this.curQue.con.forEach(itemss => {
             if (
               Object.prototype.toString
                 .call(itemss.AnswerList)
@@ -366,7 +408,7 @@ export default {
         return;
       }
       if (!this.TaskModel || this.TaskModel != "ANSWER") {
-        this.data.data.forEach((item) => {
+        this.data.data.forEach(item => {
           if (item.source) {
             if (item.source.indexOf("Isexample") == -1) {
               item.source = null;
@@ -382,10 +424,10 @@ export default {
           JSON.parse(JSON.stringify(this.data))
         );
 
-        this.data.data.forEach((item) => {
+        this.data.data.forEach(item => {
           this.jsPlumb.connect({
             source: item.source,
-            target: item.target,
+            target: item.target
           });
         });
       }
@@ -396,7 +438,7 @@ export default {
         EndpointStyle: { radius: 1, fill: "#74B5CA" }, // 端点样式
         PaintStyle: {
           stroke: "#DE4444",
-          strokeWidth: 2,
+          strokeWidth: 2
         }, // 绘画样式，默认8px线宽  #456
         HoverPaintStyle: { stroke: "#18A0FB", strokeWidth: null }, // 默认悬停样式  默认为null
         ConnectionOverlays: [
@@ -428,7 +470,7 @@ export default {
           //   ],
         ],
         Connector: ["Straight"], // 要使用的默认连接器的类型：直线，折线，曲线等
-        DrapOptions: { cursor: "crosshair", zIndex: 2000 },
+        DrapOptions: { cursor: "crosshair", zIndex: 2000 }
       });
       this.jsPlumb.batch(() => {
         if (!this.TaskModel || this.TaskModel != "ANSWER") {
@@ -473,7 +515,7 @@ export default {
         //连线时触发
         this.jsPlumb.bind("connection", (conn, originalEvent) => {
           let fig = false;
-          this.data.data.forEach((item) => {
+          this.data.data.forEach(item => {
             if (item.source == conn.sourceId && item.target == conn.targetId) {
               fig = true;
             }
@@ -509,13 +551,13 @@ export default {
         ins.makeSource(elem, {
           anchor: [1, 0.5, 0.5, 0.5], // 左 上 右 下  数字我调不太准确 可改成left right
           allowLoopback: false, //允许回连
-          maxConnections: 1, //最大连接数（-1表示不限制）
+          maxConnections: 1 //最大连接数（-1表示不限制）
         });
       } else {
         ins.makeTarget(elem, {
           anchor: [0, 0.5, 0, 0],
           allowLoopback: false,
-          maxConnections: 1,
+          maxConnections: 1
         });
       }
     },
@@ -552,10 +594,10 @@ export default {
 
       this.$forceUpdate();
       if (this.data.data.length > 0) {
-        this.data.data.forEach((item) => {
+        this.data.data.forEach(item => {
           this.jsPlumb.connect({
             source: item.source,
-            target: item.target,
+            target: item.target
           });
         });
       }
@@ -563,8 +605,8 @@ export default {
     // 判断是否全对
     changeAllCorrect() {
       let flag = true;
-      this.data.data.forEach((item) => {
-        this.curQue.con.forEach((items) => {
+      this.data.data.forEach(item => {
+        this.curQue.con.forEach(items => {
           if (item.source && item.target) {
             if (item.source == items.nodeId) {
               if (
@@ -595,7 +637,7 @@ export default {
         this.data.userAnswerJudge = "[JUDGE##T##JUDGE]";
       } else {
         let isanswer = false;
-        this.curQue.con.forEach((con) => {
+        this.curQue.con.forEach(con => {
           if (
             Object.prototype.toString.call(con.AnswerList).indexOf("Number") !=
             -1
@@ -609,7 +651,7 @@ export default {
           this.data.userAnswerJudge = "";
         }
       }
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -619,7 +661,7 @@ export default {
       flag = true;
       // sData = JSON.parse(sessionStorage.getItem("LineData"));
       let isanswer = false;
-      this.curQue.con.forEach((con) => {
+      this.curQue.con.forEach(con => {
         if (
           Object.prototype.toString.call(con.AnswerList).indexOf("Number") != -1
         ) {
@@ -649,7 +691,7 @@ export default {
             source: item.nodeId,
             target: "right_" + item.AnswerList + this.number + this.judgeAnswer,
             index: i,
-            answer: item.AnswerList,
+            answer: item.AnswerList
           });
         }
       }
@@ -670,7 +712,7 @@ export default {
             answer: item.AnswerList,
             index: i,
             source: null,
-            target: null,
+            target: null
             // userAnswerJudge:
             //   Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
             //   -1
@@ -698,7 +740,7 @@ export default {
               target:
                 "right_" + item.AnswerList + this.number + this.judgeAnswer,
               index: i,
-              answer: item.AnswerList,
+              answer: item.AnswerList
             });
           }
         }
@@ -733,7 +775,7 @@ export default {
         }
       }
     }
-    this.data.data.forEach((item) => {
+    this.data.data.forEach(item => {
       if (item.source && item.target) {
         item.source = item.source + this.judgeAnswer;
         item.target = item.target + this.judgeAnswer;
@@ -741,7 +783,7 @@ export default {
     });
     if (this.judgeAnswer == "standardAnswer") {
       this.data.data = [];
-      this.curQue.con.forEach((item) => {
+      this.curQue.con.forEach(item => {
         if (
           Object.prototype.toString.call(item.AnswerList).indexOf("Number") !=
           -1
@@ -750,13 +792,13 @@ export default {
             source: item.nodeId,
             target: this.curQue.option[item.AnswerList].nodeId,
             correct: true,
-            Isexample: item.Isexample,
+            Isexample: item.Isexample
           });
         } else {
           this.data.data.push({
             source: null,
             target: null,
-            Isexample: item.Isexample,
+            Isexample: item.Isexample
           });
         }
       });
@@ -767,7 +809,7 @@ export default {
       this.data.data.forEach((item, index) => {
         item.Isexample = this.curQue.con[index].Isexample;
         if (item.source) {
-          this.curQue.con.forEach((con) => {
+          this.curQue.con.forEach(con => {
             if (item.source == con.nodeId) {
               if (
                 Object.prototype.toString
@@ -795,10 +837,10 @@ export default {
       });
     }
     if (this.data.data.length > 0) {
-      this.data.data.forEach((item) => {
+      this.data.data.forEach(item => {
         this.jsPlumb.connect({
           source: item.source,
-          target: item.target,
+          target: item.target
         });
       });
     }
@@ -816,7 +858,7 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {}
 };
 </script>
 <style lang="scss" scoped>
@@ -839,11 +881,11 @@ export default {
 .JoinLine {
   width: 100%;
   .main {
-    background: #f7f7f7;
+    // background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    padding: 24px 40px;
+    padding: 10px;
   }
   .container {
     position: relative;
@@ -858,7 +900,7 @@ export default {
         // border: 1px solid rgba(0, 0, 0, 0.1);
         // box-sizing: border-box;
         // border-radius: 8px;
-        margin-bottom: 16px;
+        // margin-bottom: 16px;
         display: flex;
         align-items: center;
         > img {
@@ -868,7 +910,7 @@ export default {
       }
     }
     .left {
-      width: 50%;
+      width: 45%;
       ul {
         > div {
           text-align: center;
@@ -876,7 +918,7 @@ export default {
           font-size: 16px;
           line-height: 150%;
           color: #000000;
-          margin-bottom: 16px;
+          // margin-bottom: 16px;
         }
         li {
           padding: 8px 0;
@@ -893,8 +935,8 @@ export default {
             .text {
               max-width: 200px;
               width: 100%;
-              padding: 8px 16px;
-              background: #ffffff;
+              padding: 5px 10px;
+              // background: #ffffff;
               border: 1px solid rgba(0, 0, 0, 0.1);
               box-sizing: border-box;
               border-radius: 8px;
@@ -905,16 +947,16 @@ export default {
               p {
                 margin: 0;
                 &.dleft {
-                    padding-left: 4px;
+                  padding-left: 4px;
                 }
-                &.dright{
-                    padding-right: 4px;
+                &.dright {
+                  padding-right: 4px;
                 }
-                &.underline{
-                    text-decoration: underline;
+                &.underline {
+                  text-decoration: underline;
                 }
               }
-              >div{
+              > div {
                 padding: 0 2px;
               }
             }
@@ -944,7 +986,7 @@ export default {
     }
     .right {
       width: 50%;
-      margin-left: 88px;
+      margin-left: 25px;
       ul {
         > div {
           width: 334px;
@@ -953,7 +995,7 @@ export default {
           font-size: 16px;
           line-height: 150%;
           color: #000000;
-          margin-bottom: 16px;
+          // margin-bottom: 16px;
         }
         li {
           padding: 8px 0;
@@ -987,8 +1029,8 @@ export default {
             }
             .text {
               max-width: 200px;
-              padding: 8px 16px;
-              background: #ffffff;
+              padding: 5px 10px;
+              // background: #ffffff;
               border: 1px solid rgba(0, 0, 0, 0.1);
               box-sizing: border-box;
               border-radius: 8px;
@@ -1000,16 +1042,16 @@ export default {
               p {
                 margin: 0;
                 &.dleft {
-                    padding-left: 4px;
+                  padding-left: 4px;
                 }
-                &.dright{
-                    padding-right: 4px;
+                &.dright {
+                  padding-right: 4px;
                 }
-                &.underline{
-                    text-decoration: underline;
+                &.underline {
+                  text-decoration: underline;
                 }
               }
-              >div{
+              > div {
                 padding: 0 2px;
               }
             }
@@ -1030,7 +1072,7 @@ export default {
       float: right;
       width: 80px;
       height: 40px;
-      background: #ffffff;
+      // background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
       border-radius: 8px;
@@ -1059,4 +1101,4 @@ export default {
     cursor: pointer;
   }
 }
-</style>
+</style>

src/components/Adult/phonePreview/NewWordShow.vue

@@ -549,6 +549,11 @@ export default {
       .img-box {
         background: url("../../../assets/NPC/chinaTianRed.png") center no-repeat;
         background-size: cover;
+        border: 1px solid #de4444;
+        border-radius: 8px;
+        overflow: hidden;
+        width: 66px;
+        height: 66px;
         .img_url {
           width: 64px;
           height: 64px;
@@ -617,7 +622,8 @@ export default {
           background-size: cover;
         }
       }
-      .strockplay-newWord {
+      .strockplay-newWord,
+      .img-box {
         border: 1px solid #bf875e;
       }
     }
@@ -642,7 +648,8 @@ export default {
             no-repeat;
           background-size: cover;
         }
-        .strockplay-newWord {
+        .strockplay-newWord,
+        .img-box {
           border: 1px solid #24b99e;
         }
       }