修改连线的样式

src/components/Adult/Preview.vue

@@ -482,6 +482,8 @@ export default {
               });
             } else {
               _this.changeId(this.idArr[i - 1]);
+              _this.$forceUpdate()
+
             }
           }
         });
@@ -523,6 +525,7 @@ export default {
               });
             } else {
               _this.changeId(this.idArr[i + 1]);
+              _this.$forceUpdate()
             }
           }
         });

src/components/Adult/preview/Ligature.vue

@@ -4,11 +4,7 @@
       <div class="left">
         <ul>
           <div>{{ curQue.conTitle }}</div>
-          <li
-            :class="'left' + index"
-            v-for="(item, index) in curQue.con"
-            :key="'left' + index"
-          >
+          <li v-for="(item, index) in curQue.con" :key="'left' + index">
             <!--             :style="{
               background:
                 JSON.stringify(data).indexOf(item.nodeId) != -1
@@ -21,7 +17,7 @@
                 :src="item.img_list[0].url"
                 alt=""
               />
-              <div class="text">
+              <div class="text" :class="'left' + index">
                 <!-- 大于0就说明分词了 -->
                 <template v-if="item.detail.wordsList.length > 0">
                   <div
@@ -96,11 +92,7 @@
       <div class="right">
         <ul>
           <div>{{ curQue.optionTitle }}</div>
-          <li
-            :class="'right' + index"
-            v-for="(item, index) in curQue.option"
-            :key="'right' + index"
-          >
+          <li v-for="(item, index) in curQue.option" :key="'right' + index">
             <!--             :style="{
               background:
                 JSON.stringify(data).indexOf(item.nodeId) != -1
@@ -128,7 +120,7 @@
                 :src="item.img_list[0].url"
                 alt=""
               />
-              <div class="text">
+              <div class="text" :class="'right' + index">
                 <!-- 大于0就说明分词了 -->
                 <template v-if="item.detail.wordsList.length > 0">
                   <div
@@ -390,18 +382,20 @@ export default {
   mounted() {
     this.showPlumb();
     // 根据记录自动连起来
-    setTimeout(() => {
-      for (let i = 0; i < this.curQue.con.length; i++) {
-        let nodeleft = document.getElementsByClassName(`left${i}`)[0];
-        let noderight = document.getElementsByClassName(`right${i}`)[0];
-        if (nodeleft && noderight) {
-          if (nodeleft.offsetHeight > noderight.offsetHeight) {
-            noderight.style.height = nodeleft.offsetHeight + "px";
-          } else {
-            nodeleft.style.height = noderight.offsetHeight + "px";
-          }
+    for (let i = 0; i < this.curQue.con.length; i++) {
+      let nodeleft = document.getElementsByClassName(`left${i}`)[0];
+      let noderight = document.getElementsByClassName(`right${i}`)[0];
+      if (nodeleft && noderight) {
+        console.log(nodeleft);
+        console.log(noderight);
+        if (nodeleft.offsetHeight > noderight.offsetHeight) {
+          noderight.style.height = nodeleft.offsetHeight + "px";
+        } else {
+          nodeleft.style.height = noderight.offsetHeight + "px";
         }
       }
+    }
+    setTimeout(() => {
       if (this.data.length > 0) {
         this.data.forEach((item) => {
           this.jsPlumb.connect({
@@ -494,7 +488,7 @@ export default {
               height: 158px;
             }
             .text {
-              max-width: 330px;
+              max-width: 200px;
               width: 100%;
               padding: 8px 16px;
               background: #ffffff;
@@ -572,12 +566,14 @@ export default {
               height: 158px;
             }
             .text {
+              max-width: 200px;
               padding: 8px 16px;
               background: #ffffff;
               border: 1px solid rgba(0, 0, 0, 0.1);
               box-sizing: border-box;
               border-radius: 8px;
               display: flex;
+              align-items: center;
               flex-wrap: wrap;
               p {
                 margin: 0;