预览修改

src/components/PinyinText.vue

@@ -17,7 +17,12 @@
           class="pinyin-sentence"
           :style="[{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }, block.sentenceStyle]"
         >
-          <span v-for="(word, wIndex) in block.word_list" :key="wIndex" class="pinyin-text" :style="block.styleObj">
+          <span
+            v-for="(word, wIndex) in block.word_list"
+            :key="wIndex"
+            :class="['pinyin-text', { spacing: isShowPinyin }]"
+            :style="block.styleObj"
+          >
             <span
               :title="isPreview ? '' : '点击校对'"
               :style="{
@@ -128,7 +133,7 @@
           class="pinyin-sentence"
           :style="{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }"
         >
-          <span v-for="(word, wIndex) in sentence" :key="wIndex" class="pinyin-text">
+          <span v-for="(word, wIndex) in sentence" :key="wIndex" :class="['pinyin-text', { spacing: isShowPinyin }]">
             <span
               :title="isPreview ? '' : '点击校对'"
               :style="{
@@ -791,11 +796,11 @@ export default {
         const letterSpacingValue = parseFloat(letterSpacing) || 0;
 
         baseStyle['border-bottom'] = 'none';
-        baseStyle['background-image'] = 'radial-gradient(circle at center, currentColor 0.15em, transparent 0.16em)';
+        baseStyle['background-image'] = 'radial-gradient(circle at center, currentColor 0.08em, transparent 0.09em)';
         baseStyle['background-repeat'] = 'repeat-x';
         baseStyle['background-position'] = `${letterSpacingValue * -0.5}em 100%`;
-        baseStyle['background-size'] = `${1 + letterSpacingValue}em 0.3em`;
-        baseStyle['padding-bottom'] = '0.3em';
+        baseStyle['background-size'] = `${1 + letterSpacingValue}em 0.15em`;
+        baseStyle['padding-bottom'] = '0.15em';
         baseStyle['display'] = 'inline';
       }
 
@@ -1016,10 +1021,13 @@ export default {
 
   .pinyin-text {
     display: inline-flex;
-    padding: 0 2px;
     text-wrap: pretty;
     hanging-punctuation: allow-end;
 
+    &.spacing {
+      padding: 0 2px;
+    }
+
     > span {
       display: inline-flex;
     }

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

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="strockplayInner" :class="className">
-    <div v-if="playStorkes" class="strock-play-box" @click="playHanzi">
+    <div v-if="playStorkes" class="eep-strock-play-box" @click="playHanzi">
       <!-- <img class="strock-play" src="../../assets/common/strock-play.png"> -->
     </div>
     <div :id="targetDiv" :class="wordNum == '2' ? 'morewords' : ''" class="character-target-div"></div>

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

@@ -4,7 +4,7 @@
     <div
       v-if="playStorkes"
       :class="[
-        'strock-play-box',
+        'eep-strock-play-box',
         themeColor == 'green'
           ? 'green-border'
           : themeColor == 'red'
@@ -103,7 +103,7 @@ export default {
   background-size: 100% 100%;
 }
 
-.strock-play-box {
+.eep-strock-play-box {
   position: absolute;
   top: 0;
   right: 0;

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

@@ -2,7 +2,7 @@
 <template>
   <div class="strockredBox">
     <div class="strockred">
-      <div v-if="1 == 2" class="strock-play-box" @click="resetHanzi">
+      <div v-if="1 == 2" class="eep-strock-play-box" @click="resetHanzi">
         <!-- <img src="../../assets/common/strock-play.png" class="strock-play" /> -->
       </div>
       <div :id="targetDiv" :class="wordNum == '2' ? 'character-target-div_220' : ''" class="character-target-div"></div>

src/views/book/courseware/preview/components/character_base/components/Strockplayredline.vue

@@ -4,7 +4,7 @@
     class="strockplay-redInner"
     :style="{ borderColor: playColor, borderWidth: bgType === 'none' ? '0px' : '1px' }"
   >
-    <div v-if="playStorkes" :class="['strock-play-box']" :style="{ color: playColor }" @click="playHanzi">
+    <div v-if="playStorkes" :class="['eep-strock-play-box']" :style="{ color: playColor }" @click="playHanzi">
       <SvgIcon icon-class="hanzi-strock-play" class="strock-play-btn" />
     </div>
     <div class="character-target-box">
@@ -140,7 +140,7 @@ export default {
   color: #dedede;
 }
 
-.strock-play-box {
+.eep-strock-play-box {
   position: absolute;
   top: 0;
   right: 0;

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -19,7 +19,7 @@
       <svg-icon
         v-if="playStorkes"
         icon-class="play-stroke-icon"
-        :class-name="tianColor ? 'strock-play-red' : 'strock-play-box'"
+        :class-name="tianColor ? 'strock-play-red' : 'eep-strock-play-box'"
         :style="{ color: playColor ? playColor : '' }"
         @click="playHanzi"
       />
@@ -182,7 +182,7 @@ export default {
 }
 
 .strockplayRedInner {
-  .strock-play-box {
+  .eep-strock-play-box {
     position: absolute;
     top: -2px;
     right: -2px;

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

@@ -7,7 +7,7 @@
     />
 
     <main v-if="data" ref="newWordMain" class="main">
-      <div class="NPC-zhedie" :style="{ width: width + 'px' }">
+      <div class="EEP-zhedie" :style="{ width: width + 'px' }">
         <!-- :style="{
             backgroundColor:
               data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -2064,7 +2064,7 @@ export default {
 .newWord-preview {
   @include preview-base;
 
-  .NPC-zhedie {
+  .EEP-zhedie {
     // width: 1000px;
 
     // width: 780px;
@@ -2576,7 +2576,7 @@ export default {
             width: 40px;
             height: 40px;
 
-            .strock-play-box,
+            .eep-strock-play-box,
             .playStorkes-btn {
               z-index: 2 !important; // 1时点不了 所以只能为2
               width: 9px !important;
@@ -2855,7 +2855,7 @@ export default {
   }
 }
 
-.NPC-zhedie {
+.EEP-zhedie {
   .topTitle {
     display: flex;
     justify-content: space-between;

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

@@ -1,6 +1,11 @@
 <template>
   <div class="strockplayInner" :class="className">
-    <div v-if="playStorkes" class="strock-play-box" :style="{ width: palyWidth, height: palyWidth }" @click="playHanzi">
+    <div
+      v-if="playStorkes"
+      class="eep-strock-play-box"
+      :style="{ width: palyWidth, height: palyWidth }"
+      @click="playHanzi"
+    >
       <svg-icon
         v-if="playStorkes"
         icon-class="playStorkes"
@@ -105,7 +110,7 @@ export default {
   height: 100%; // 480px
   margin: 0 auto;
 
-  .strock-play-box {
+  .eep-strock-play-box {
     position: absolute;
     top: 0;
     right: 0;

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

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="strockplay-redInner">
-    <div v-if="playStorkes" :class="['strock-play-box']" @click="playHanzi">
+    <div v-if="playStorkes" :class="['eep-strock-play-box']" @click="playHanzi">
       <SvgIcon
         icon-class="hanzi-strock-play"
         class="strock-play-btn"
@@ -121,7 +121,7 @@ export default {
   color: #dedede;
 }
 
-.strock-play-box {
+.eep-strock-play-box {
   position: absolute;
   top: 0;
   right: 0;

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

@@ -707,7 +707,7 @@ export default {
         width: 98px;
         height: 98px;
 
-        :deep .strock-play-box {
+        :deep .eep-strock-play-box {
           width: 18px !important;
           height: 18px !important;
         }
@@ -721,7 +721,7 @@ export default {
           width: 62px;
           height: 62px;
 
-          :deep .strock-play-box {
+          :deep .eep-strock-play-box {
             width: 11px !important;
             height: 11px !important;
           }

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -7,7 +7,7 @@
     />
 
     <div class="main">
-      <div class="NPC-zhedie">
+      <div class="EEP-zhedie">
         <!-- :style="{
             backgroundColor:
               data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -272,7 +272,7 @@ export default {
 .notes-preview {
   @include preview-base;
 
-  .NPC-zhedie {
+  .EEP-zhedie {
     // margin-bottom: 24px;
 
     .topTitle-note {

src/views/book/courseware/preview/components/picture/PicturePreview.vue

@@ -80,7 +80,6 @@
 <script>
 import { getPictureData } from '@/views/book/courseware/data/picture';
 import PreviewMixin from '../common/PreviewMixin';
-import { getRandomNumber } from '@/utils';
 
 export default {
   name: 'PicturePreview',