生词卡片全屏模式

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -1009,7 +1009,13 @@
       </div>
     </main>
     <el-dialog title="" :visible.sync="showCard" width="100%" class="wordCard-dialog" top="0">
-      <i class="el-icon-arrow-left" :class="[showIndex === 0 ? 'disabled' : '']" @click="changeShowIndex('-')"></i>
+      <i
+        class="el-icon-arrow-left"
+        :class="[showIndex === 0 ? 'disabled' : '']"
+        @click="changeShowIndex('-')"
+        v-if="!isMobile"
+      ></i>
+
       <writeTableZoom
         ref="writeTableZoom"
         :edit-cardflag="false"
@@ -1020,14 +1026,41 @@
         :filt-cardflag="false"
         :attrib="data.unified_attrib"
         :url="data.audio_data.url"
+        :isMobile="isMobile"
       />
-      <p style="width: 100%; font-size: 20px; color: #fff; text-align: center">
-        {{ showIndex + 1 }} / {{ data.new_word_list.length }}
+      <p
+        style="
+          display: flex;
+          gap: 20px;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          font-size: 20px;
+          color: #fff;
+        "
+      >
+        <i
+          class="el-icon-arrow-left"
+          :class="[showIndex === 0 ? 'disabled' : '', isMobile ? 'el-icon-arrow-left-phone' : '']"
+          @click="changeShowIndex('-')"
+          v-if="isMobile"
+        ></i>
+        {{ showIndex + 1 }} / {{ data.new_word_list.length
+        }}<i
+          class="el-icon-arrow-right"
+          :class="[
+            showIndex === data.new_word_list.length - 1 ? 'disabled' : '',
+            isMobile ? 'el-icon-arrow-right-phone' : '',
+          ]"
+          @click="changeShowIndex('+')"
+          v-if="isMobile"
+        ></i>
       </p>
       <i
         class="el-icon-arrow-right"
         :class="[showIndex === data.new_word_list.length - 1 ? 'disabled' : '']"
         @click="changeShowIndex('+')"
+        v-if="!isMobile"
       ></i>
     </el-dialog>
   </div>
@@ -2112,6 +2145,13 @@ export default {
     left: auto;
   }
 
+  .el-icon-arrow-left-phone,
+  .el-icon-arrow-right-phone {
+    position: initial;
+    margin-top: 0;
+    font-size: 30px;
+  }
+
   :deep .el-dialog__headerbtn {
     position: fixed;
     top: 20px;

src/views/book/courseware/preview/components/new_word/components/writeTableZoom.vue

@@ -1,5 +1,12 @@
 <template>
-  <div v-if="data" :class="['writeTable', editCardflag ? '' : 'writeTable-preview writeTable-preview-' + totalNumber]">
+  <div
+    v-if="data"
+    :class="[
+      'writeTable',
+      editCardflag ? '' : 'writeTable-preview writeTable-preview-' + totalNumber,
+      isMobile ? 'writeTable-preview-phone' : '',
+    ]"
+  >
     <div class="writeTop" :class="{ flipped: isFlipped }">
       <div
         v-if="(isPreview && showLeft) || !isPreview"
@@ -228,6 +235,7 @@ export default {
     'filtCardflag',
     'attrib',
     'url',
+    'isMobile',
   ],
   data() {
     // 这里存放数据
@@ -311,6 +319,10 @@ export default {
 
   &-preview {
     width: 600px;
+
+    &-phone {
+      width: 100%;
+    }
   }
 
   .writeTop {
@@ -833,6 +845,32 @@ export default {
     transform: rotateY(180deg);
   }
 }
+
+.writeTable-preview-phone {
+  .writeTop {
+    min-height: 350px !important;
+  }
+
+  .right-preview {
+    padding: 20px 10px !important;
+  }
+
+  :deep .audio-wrapper {
+    width: 40px !important;
+    height: 40px !important;
+    padding: 10px !important;
+
+    .voice-play {
+      width: 20px !important;
+      height: 20px !important;
+    }
+  }
+
+  .strockplayInner {
+    width: 78px !important;
+    height: 78px !important;
+  }
+}
 </style>
 <style lang="scss">
 .writeTable {