Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

src/components/RichText.vue

@@ -154,6 +154,10 @@ export default {
       editorBeforeInitConfig: {},
       init: {
         content_style: `
+          @font-face {
+            font-family: 'League';
+            src: url('${process.env.BASE_URL}static/font/pinyin.ttf');
+          }
           mjx-container, mjx-container * {
             font-size: 16px !important; /* 强制固定字体 */
             line-height: 1.2 !important; /* 避免行高影响 */

src/views/book/courseware/create/components/base/rich_text/RichText.vue

@@ -584,8 +584,29 @@ export default {
       });
     },
     getBodyStyles() {
-      if (!this.$refs.richText) return {};
-      return this.$refs.richText.getBodyInitialStyles();
+      // 优先从富文本编辑器获取实际渲染的样式
+      if (this.$refs.richText && typeof this.$refs.richText.getBodyInitialStyles === 'function') {
+        const editorStyles = this.$refs.richText.getBodyInitialStyles();
+        if (editorStyles && Object.keys(editorStyles).length > 0) {
+          return editorStyles;
+        }
+      }
+
+      // 如果编辑器未初始化或没有返回样式，则使用教材统一属性
+      const styles = {};
+      const unifiedAttrib = this.data?.unified_attrib || {};
+
+      if (unifiedAttrib.font) {
+        styles['font-family'] = unifiedAttrib.font;
+      }
+      if (unifiedAttrib.font_size) {
+        styles['font-size'] = unifiedAttrib.font_size;
+      }
+      if (unifiedAttrib.text_color) {
+        styles['color'] = unifiedAttrib.text_color;
+      }
+
+      return styles;
     },
   },
 };

src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -862,7 +862,7 @@ export default {
       this.pauseAudio();
       this.pauseVideo();
       this.isFull = true;
-      this.goFullscreen();
+      // this.goFullscreen();
     },
     goFullscreen() {
       let id = `screen-${this.mathNum}`;
@@ -879,15 +879,15 @@ export default {
     },
     exitFullscreen() {
       this.isFull = false;
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      }
+      // if (document.exitFullscreen) {
+      //   document.exitFullscreen();
+      // } else if (document.msExitFullscreen) {
+      //   document.msExitFullscreen();
+      // } else if (document.mozCancelFullScreen) {
+      //   document.mozCancelFullScreen();
+      // } else if (document.webkitExitFullscreen) {
+      //   document.webkitExitFullscreen();
+      // }
     },
     changeIsFull() {
       this.isFull = false;

src/views/book/courseware/preview/components/article/Voicefullscreen.vue

@@ -1,8 +1,14 @@
 <!--  -->
 <template>
-  <div v-if="sentList" :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']">
+  <div
+    v-if="sentList"
+    :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2', isLandscape ? 'voicefull-scape' : '']"
+    :style="{
+      paddingRight: isLandscape ? '100px' : '',
+    }"
+  >
     <div class="voicefull-bottom" @mouseover="setTopShow(true)" @mouseleave="setTopShow(false)">
-      <div :class="[isTopShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden']">
+      <div :class="[isTopShow || isPhone ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden']">
         <div :class="['bottom-left', TaskModel == 'ANSWER' ? 'bottom-left-margin' : '']"></div>
         <div :class="['page-count', bgIndex == 0 ? 'page-count-white' : 'page-count-green']">
           {{ curSentIndex + 1 }}/{{ sentList.length }}
@@ -467,7 +473,7 @@
       </div>
     </div>
     <div class="voicefull-top" @mouseover="setBottomShow(true)" @mouseleave="setBottomShow(false)">
-      <div :class="[isBottomShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
+      <div :class="[isBottomShow || isPhone ? 'voicefull-top-show' : 'voicefull-top-hidden']">
         <div class="top-left">
           <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
             <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
@@ -722,6 +728,8 @@ export default {
       isNoteShow: false,
       oldNoteNum: '',
       windowWidth: window.innerWidth,
+      isLandscape: window.innerWidth < window.innerHeight, // 手机是否为竖屏
+      isPhone: false,
     };
   },
   computed: {
@@ -801,7 +809,10 @@ export default {
     },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     window.addEventListener('resize', this.getScreenHeight);
@@ -820,6 +831,8 @@ export default {
         } else if (e.keyCode === 40) {
           this.nextSentence();
         } else if (e.keyCode === 13) {
+        } else if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27) {
+          this.exitFullScreen();
         }
       }
     });
@@ -1405,12 +1418,36 @@ export default {
 
 <style lang="scss" scoped>
 .voicefull {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100vh;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
   overflow: hidden;
 
+  &-scape {
+    display: flex;
+    flex-direction: column;
+    width: 100vh;
+    height: 100vw;
+    margin-left: 100vw;
+    transform: rotate(90deg);
+    transform-origin: 0% 0%;
+
+    .vc-main {
+      max-height: calc(100vw - 132px) !important;
+    }
+
+    .op-btn {
+      margin-left: 16px !important;
+    }
+  }
+
   .NNPE-wordDetail {
     position: fixed;
     top: 50%;
@@ -1634,6 +1671,7 @@ export default {
   .op-btn {
     box-sizing: border-box;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     width: 56px;
@@ -1892,23 +1930,23 @@ export default {
             }
 
             .active {
-              color: #de4444;
+              color: #de4444 !important;
 
               &-yellow {
-                color: #ffc600;
+                color: #ffc600 !important;
               }
             }
 
             .wordActive {
-              color: #de4444;
+              color: #de4444 !important;
             }
 
             .wordActive-blue {
-              color: #ffc600;
+              color: #ffc600 !important;
             }
 
             .newActive {
-              color: #de4444;
+              color: #de4444 !important;
             }
           }
 
@@ -1979,23 +2017,23 @@ export default {
           }
 
           .active {
-            color: #de4444;
+            color: #de4444 !important;
 
             &-yellow {
-              color: #ffc600;
+              color: #ffc600 !important;
             }
           }
 
           .wordActive {
-            color: #de4444;
+            color: #de4444 !important;
           }
 
           .wordActive-blue {
-            color: #ffc600;
+            color: #ffc600 !important;
           }
 
           .newActive {
-            color: #de4444;
+            color: #de4444 !important;
           }
         }
 

src/views/book/courseware/preview/components/article/index.vue

@@ -467,7 +467,7 @@ export default {
       this.pauseAudio();
       this.pauseVideo();
       this.isFull = true;
-      this.goFullscreen();
+      // this.goFullscreen();
     },
     pauseAudio() {
       let audio = document.getElementsByTagName('audio');
@@ -500,15 +500,15 @@ export default {
     },
     exitFullscreen() {
       this.isFull = false;
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      }
+      // if (document.exitFullscreen) {
+      //   document.exitFullscreen();
+      // } else if (document.msExitFullscreen) {
+      //   document.msExitFullscreen();
+      // } else if (document.mozCancelFullScreen) {
+      //   document.mozCancelFullScreen();
+      // } else if (document.webkitExitFullscreen) {
+      //   document.webkitExitFullscreen();
+      // }
     },
     handleData() {
       if (this.data.new_word_list) {

src/views/book/courseware/preview/components/dialogue_article/Practicechs.vue

@@ -968,7 +968,7 @@ export default {
       this.pauseAudio();
       this.pauseVideo();
       this.isFull = true;
-      this.goFullscreen();
+      // this.goFullscreen();
     },
     goFullscreen() {
       let id = `screen-${this.mathNum}`;
@@ -985,15 +985,15 @@ export default {
     },
     exitFullscreen() {
       this.isFull = false;
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      }
+      // if (document.exitFullscreen) {
+      //   document.exitFullscreen();
+      // } else if (document.msExitFullscreen) {
+      //   document.msExitFullscreen();
+      // } else if (document.mozCancelFullScreen) {
+      //   document.mozCancelFullScreen();
+      // } else if (document.webkitExitFullscreen) {
+      //   document.webkitExitFullscreen();
+      // }
     },
     changeIsFull() {
       this.isFull = false;

src/views/book/courseware/preview/components/dialogue_article/index.vue

@@ -460,7 +460,7 @@ export default {
       this.pauseAudio();
       this.pauseVideo();
       this.isFull = true;
-      this.goFullscreen();
+      // this.goFullscreen();
     },
     pauseAudio() {
       let audio = document.getElementsByTagName('audio');
@@ -493,15 +493,15 @@ export default {
     },
     exitFullscreen() {
       this.isFull = false;
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      }
+      // if (document.exitFullscreen) {
+      //   document.exitFullscreen();
+      // } else if (document.msExitFullscreen) {
+      //   document.msExitFullscreen();
+      // } else if (document.mozCancelFullScreen) {
+      //   document.mozCancelFullScreen();
+      // } else if (document.webkitExitFullscreen) {
+      //   document.webkitExitFullscreen();
+      // }
     },
     handleData() {
       if (this.data.new_word_list) {

src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="imageText-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
-    <div ref="fullscreenElement">
+    <div ref="fullscreenElement" :class="[full_type ? 'full-screen-games' : '']">
       <el-button
         type="primary"
         :class="[full_type ? 'exit-btn' : '']"
@@ -45,6 +45,7 @@ export default {
       data: getH5GamesData(),
       games_url: '',
       full_type: false,
+      scroll_top: 0, // 预览时滚动的高度 切换全屏时使用
     };
   },
   watch: {
@@ -57,7 +58,19 @@ export default {
   created() {
     this.initData();
   },
-  mounted() {},
+  mounted() {
+    document.addEventListener('keyup', (e) => {
+      if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27) {
+        this.full_type = false;
+        this.$nextTick(() => {
+          const div = document.querySelector('.main-container');
+          if (div) {
+            div.scrollTop = this.scroll_top;
+          }
+        });
+      }
+    });
+  },
   methods: {
     initData() {
       this.data.file_list.forEach((item) => {
@@ -72,35 +85,19 @@ export default {
       });
     },
     toggleFullScreen() {
-      const elem = this.$refs.fullscreenElement; // 获取需要全屏的元素
-      if (!document.fullscreenElement) {
-        this.full_type = true;
-        if (elem.requestFullscreen) {
-          elem.requestFullscreen(); // 现代浏览器，如Chrome, Firefox, Opera, Safari等
-        } else if (elem.mozRequestFullScreen) {
-          // Firefox
-          elem.mozRequestFullScreen();
-        } else if (elem.webkitRequestFullscreen) {
-          // Chrome, Safari等
-          elem.webkitRequestFullscreen();
-        } else if (elem.msRequestFullscreen) {
-          // IE/Edge
-          elem.msRequestFullscreen();
+      const div = document.querySelector('.main-container');
+      if (div) {
+        if (this.full_type) {
+          this.full_type = false;
+          this.$nextTick(() => {
+            div.scrollTop = this.scroll_top;
+          });
+        } else {
+          this.scroll_top = div.scrollTop;
+          this.full_type = true;
         }
       } else {
-        this.full_type = false;
-        if (document.exitFullscreen) {
-          document.exitFullscreen(); // 退出全屏模式
-        } else if (document.mozCancelFullScreen) {
-          // Firefox
-          document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-          // Chrome, Safari等
-          document.webkitExitFullscreen();
-        } else if (document.msExitFullscreen) {
-          // IE/Edge
-          document.msExitFullscreen();
-        }
+        this.full_type = !this.full_type;
       }
     },
     /**
@@ -135,4 +132,13 @@ export default {
   top: 10px;
   left: 10px;
 }
+
+.full-screen-games {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  width: 100%;
+  height: 100vh;
+}
 </style>

src/views/book/courseware/preview/components/rich_text/RichTextPreview.vue

@@ -30,6 +30,7 @@
           />
           <span
             class="rich-text"
+            :style="getBodyStyles()"
             @mouseover="handleRichFillClick"
             @mouseleave="onLeave"
             v-html="convertText(sanitizeHTML(data.content))"