生词卡片位置

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

@@ -722,7 +722,14 @@
       <div
         ref="wordcard"
         class="NNPE-wordDetail"
-        :style="{ left: left + 'px' }"
+        :style="{
+          marginLeft:
+            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"
@@ -742,7 +749,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>
@@ -826,7 +836,8 @@ export default {
       highWords: null,
       highWordsArr: [],
       highIndex: 0,
-      activeWord: null
+      activeWord: null,
+      windowWidth: window.innerWidth
     };
   },
   computed: {},
@@ -1536,6 +1547,10 @@ 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/PhraseModelChs.vue

@@ -450,7 +450,14 @@
       <div
         ref="wordcard"
         class="NNPE-wordDetail"
-        :style="{ left: left + 'px' }"
+        :style="{
+          marginLeft:
+            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"
@@ -470,7 +477,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>
@@ -586,7 +596,8 @@ export default {
       highIndex: 0,
       wordbgs: 0,
       wordeds: 0,
-      wordPlayMp3: ""
+      wordPlayMp3: "",
+      windowWidth: window.innerWidth
     };
   },
   computed: {},
@@ -1319,6 +1330,9 @@ export default {
     z-index: 9999;
     top: 50%;
     margin-top: -196px;
+    left: 50%;
+    max-width: 100%;
+    overflow: auto;
   }
 }
 </style>

src/components/Adult/preview/components/Wordcard.vue

@@ -38,48 +38,50 @@
         style="width: 16px"
       /> -->
       </div>
-      <div
-        class="bwc-Strockplay"
-        :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
-        v-if="word.detail.new_word.length < 5"
-      >
+      <div style="overflow-x: auto;">
         <div
-          :key="conindex"
-          class="strockplay"
-          v-for="(conItem, conindex) in word.detail.new_word"
+          class="bwc-Strockplay"
+          :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
+          v-if="word.detail.new_word.length < 5"
         >
-          <Strockplayredline
-            :Book_text="conItem"
-            :playStorkes="true"
-            :targetDiv="'bwcHanziIntp' + conItem + conindex"
-            :wordNum="word.detail.new_word.length"
-            :themeColor="themeColor"
-          />
-          <img
-            :src="
-              themeColor
-                ? themeColor == 'green'
-                  ? require('../../../../assets/icon/Pencil-16-normal-Green.png')
-                  : themeColor == 'brown'
-                  ? require('../../../../assets/icon/Pencil-16-normal-Brown.png')
-                  : require('../../../../assets/icon/Pencil-16-normal-red.png')
-                : require('../../../../assets/icon/Pencil-16-normal-red.png')
-            "
-            class="collect-icon"
-            v-if="word.detail.new_word.length > 1"
-            @click="writeWord(conItem, '', word.detail.new_word.length)"
-          />
           <div
-            class="bwc-line"
-            v-if="conindex < word.detail.new_word.length - 1"
-          ></div>
+            :key="conindex"
+            class="strockplay"
+            v-for="(conItem, conindex) in word.detail.new_word"
+          >
+            <Strockplayredline
+              :Book_text="conItem"
+              :playStorkes="true"
+              :targetDiv="'bwcHanziIntp' + conItem + conindex"
+              :wordNum="word.detail.new_word.length"
+              :themeColor="themeColor"
+            />
+            <img
+              :src="
+                themeColor
+                  ? themeColor == 'green'
+                    ? require('../../../../assets/icon/Pencil-16-normal-Green.png')
+                    : themeColor == 'brown'
+                    ? require('../../../../assets/icon/Pencil-16-normal-Brown.png')
+                    : require('../../../../assets/icon/Pencil-16-normal-red.png')
+                  : require('../../../../assets/icon/Pencil-16-normal-red.png')
+              "
+              class="collect-icon"
+              v-if="word.detail.new_word.length > 1"
+              @click="writeWord(conItem, '', word.detail.new_word.length)"
+            />
+            <div
+              class="bwc-line"
+              v-if="conindex < word.detail.new_word.length - 1"
+            ></div>
+          </div>
         </div>
+        <p v-else class="bwc-tolength">
+          <span v-for="(item, index) in word.detail.new_word" :key="index">{{
+            item
+          }}</span>
+        </p>
       </div>
-      <p v-else class="bwc-tolength">
-        <span v-for="(item, index) in word.detail.new_word" :key="index">{{
-          item
-        }}</span>
-      </p>
       <template v-if="word.detail">
         <!-- <span class="word-ben-def">
           <span