文章卡片位置

src/components/Adult/preview/ArticleViewChs/NormalModelChs.vue

@@ -1106,7 +1106,10 @@
       <div
         ref="notecard"
         class="NNPE-noteDetail"
-        :style="{ top: top + 'px', left: left + 'px' }"
+        :style="{
+          marginLeft: windowWidth > 642 ? '-321px' : '0px',
+          left: windowWidth > 642 ? '' : '0px'
+        }"
       >
         <Notecard :item="curNoteCon" :changeCard="changeCard" />
       </div>
@@ -1176,7 +1179,8 @@ export default {
       isNoteShow: false,
       oldNoteNum: "",
       clientY: 0,
-      contentWidth: 732
+      contentWidth: 732,
+      windowWidth: window.innerWidth
     };
   },
   computed: {
@@ -1735,6 +1739,11 @@ export default {
   .NNPE-noteDetail {
     position: fixed;
     z-index: 9999;
+    max-width: 100%;
+    overflow: auto;
+    top: 50%;
+    margin-top: -196px;
+    left: 50%;
   }
   .NNPE-detail-box {
     width: 100%;

src/components/Adult/preview/ArticleViewChs/PhraseModelChs.vue

@@ -724,7 +724,9 @@
         class="NNPE-wordDetail"
         :style="{
           marginLeft:
-            windowWidth > word.detail.new_word.length * 126 + 48
+            word.detail.new_word.length === 1
+              ? '-152px'
+              : windowWidth > word.detail.new_word.length * 126 + 48
               ? '-' + (word.detail.new_word.length * 63 + 24) + 'px'
               : '0px',
           left:

src/components/Adult/preview/ArticleViewChs/WordModelChs.vue

@@ -650,7 +650,16 @@
       <div
         ref="wordcard"
         class="NNPE-wordDetail"
-        :style="{ left: left + 'px' }"
+        :style="{
+          marginLeft:
+            word.detail.new_word.length === 1
+              ? '-152px'
+              : windowWidth > word.detail.new_word.length * 126 + 48
+              ? '-' + (word.detail.new_word.length * 63 + 24) + 'px'
+              : '0px',
+          left:
+            windowWidth > word.detail.new_word.length * 126 + 48 ? '' : '0px'
+        }"
       >
         <Wordcard
           :word="word"
@@ -731,7 +740,8 @@ export default {
       sentIndex: -1,
       wordIndex: -1,
       screenHeight: 0,
-      cardHeight: 0
+      cardHeight: 0,
+      windowWidth: window.innerWidth
     };
   },
   computed: {},
@@ -1248,6 +1258,9 @@ export default {
   z-index: 9999;
   top: 50%;
   margin-top: -196px;
+  left: 50%;
+  max-width: 100%;
+  overflow: auto;
   //   width: 260px;
   //   height: 200px;
   //   background: #cc0;

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

@@ -624,7 +624,10 @@
       <div
         ref="notecard"
         class="NNPE-noteDetail"
-        :style="{ top: top + 'px', left: left + 'px' }"
+        :style="{
+          marginLeft: windowWidth > 642 ? '-321px' : '0px',
+          left: windowWidth > 642 ? '' : '0px'
+        }"
       >
         <Notecard :item="curNoteCon" :changeCard="changeCard" />
       </div>
@@ -723,7 +726,8 @@ export default {
       curNoteCon: null,
       screenHeight: 0,
       contentWidth: 732,
-      ed: undefined
+      ed: undefined,
+      windowWidth: window.innerWidth
     };
   },
   computed: {
@@ -1313,6 +1317,11 @@ export default {
   .NNPE-noteDetail {
     position: fixed;
     z-index: 9999;
+    max-width: 100%;
+    overflow: auto;
+    top: 50%;
+    margin-top: -196px;
+    left: 50%;
   }
 }
 </style>

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

@@ -452,7 +452,9 @@
         class="NNPE-wordDetail"
         :style="{
           marginLeft:
-            windowWidth > word.detail.new_word.length * 126 + 48
+            word.detail.new_word.length === 1
+              ? '-152px'
+              : windowWidth > word.detail.new_word.length * 126 + 48
               ? '-' + (word.detail.new_word.length * 63 + 24) + 'px'
               : '0px',
           left:

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

@@ -406,7 +406,16 @@
       <div
         ref="wordcard"
         class="NNPE-wordDetail"
-        :style="{ left: left + 'px' }"
+        :style="{
+          marginLeft:
+            word.detail.new_word.length === 1
+              ? '-152px'
+              : windowWidth > word.detail.new_word.length * 128 + 48
+              ? '-' + (word.detail.new_word.length * 64 + 24) + 'px'
+              : '0px',
+          left:
+            windowWidth > word.detail.new_word.length * 128 + 48 ? '' : '0px'
+        }"
       >
         <Wordcard
           :word="word"
@@ -423,7 +432,10 @@
       <div
         ref="notecard"
         class="NNPE-wordDetail"
-        :style="{ top: top + 'px', left: left + 'px' }"
+        :style="{
+          marginLeft: windowWidth > 642 ? '-321px' : '0px',
+          left: windowWidth > 642 ? '' : '0px'
+        }"
       >
         <Notecard :item="curNoteCon" :changeCard="changeCard" />
       </div>
@@ -534,7 +546,8 @@ export default {
       noteNum: "",
       oldNoteNum: "",
       curNoteCon: null,
-      newWordList: []
+      newWordList: [],
+      windowWidth: window.innerWidth
     };
   },
   computed: {},
@@ -1177,6 +1190,9 @@ export default {
   z-index: 9999;
   top: 50%;
   margin-top: -196px;
+  left: 50%;
+  max-width: 100%;
+  overflow: auto;
   //   width: 260px;
   //   height: 200px;
   //   background: #cc0;