生词卡片调整

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

@@ -29,6 +29,9 @@
               'bwc-Strockplay',
               themeColor == 'green' ? 'green-border' : themeColor == 'red' ? 'red-border' : 'brown-border',
             ]"
+            :style="{
+              borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
+            }"
           >
             <div v-for="(conItem, conindex) in data.new_word_str" :key="'new_word_' + conindex" class="strockplay">
               <Strockplayredline
@@ -38,10 +41,14 @@
                 :target-div="'bwcHanziIntp' + conItem + detailIndex + conindex"
                 :word-num="data.new_word_str.length"
                 :theme-color="themeColor"
+                :attrib="attrib"
               />
               <div
                 v-if="conindex < data.new_word_str.length - 1"
                 :class="['bwc-line', themeColor == 'green' ? 'green-bg' : themeColor == 'red' ? 'red-bg' : 'brown-bg']"
+                :style="{
+                  background: attrib && attrib.topic_color ? attrib.topic_color : '',
+                }"
               ></div>
             </div>
           </div>
@@ -51,6 +58,9 @@
               'bwc-tolength',
               themeColor == 'green' ? 'green-border' : themeColor == 'red' ? 'red-border' : 'brown-border',
             ]"
+            :style="{
+              borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
+            }"
           >
             <span v-for="(item, index) in data.new_word_str" :key="index">{{ item }}</span>
           </p>
@@ -248,6 +258,7 @@ export default {
     'type',
     'bg',
     'ed',
+    'attrib',
   ],
   data() {
     // 这里存放数据

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

@@ -5,13 +5,11 @@
 
     <div v-if="data" class="main">
       <div class="NPC-zhedie" :style="{ width: width }">
-        <div
-          class="topTitle"
-          :style="{
+        <!-- :style="{
             backgroundColor:
               data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
-          }"
-        >
+          }" -->
+        <div class="topTitle">
           <div class="NPC-top-left">
             <span class="NPC-topTitle-text" v-html="data.title_con"></span>
             <span v-if="showLang" class="NPC-topTitle-text">
@@ -20,13 +18,31 @@
           </div>
 
           <div class="NPC-top-right">
-            <SvgIcon v-if="is_list" icon-class="icon-card" size="24" @click="is_list = false" />
+            <SvgIcon
+              v-if="is_list"
+              icon-class="icon-card"
+              size="24"
+              @click="is_list = false"
+              :style="{
+                color:
+                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#de4444',
+              }"
+            />
             <!-- <img v-if="is_list" src="@/assets/newWord_list.png" alt="" @click="is_list = false" /> -->
             <!-- <img v-else src="@/assets/newWord_tile.png" alt="" @click="is_list = true" /> -->
-            <SvgIcon v-else icon-class="icon-park" size="24" @click="is_list = true" />
-            <span class="NPC-top-right-text" @click="handleChangeTab">{{ wordShow ? '收起' : '展开' }}</span>
+            <SvgIcon
+              v-else
+              icon-class="icon-park"
+              size="24"
+              @click="is_list = true"
+              :style="{
+                color:
+                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#de4444',
+              }"
+            />
+            <!-- <span class="NPC-top-right-text" @click="handleChangeTab">{{ wordShow ? '收起' : '展开' }}</span>
             <img v-if="wordShow" src="@/assets/down.png" alt="" @click="handleChangeTab" />
-            <img v-else class="rotate" src="@/assets/down.png" alt="" @click="handleChangeTab" />
+            <img v-else class="rotate" src="@/assets/down.png" alt="" @click="handleChangeTab" /> -->
           </div>
         </div>
         <el-collapse-transition>
@@ -86,6 +102,7 @@
                       <SvgIcon
                         v-else
                         icon-class="play-btn"
+                        size="24"
                         :style="{
                           color:
                             data.unified_attrib && data.unified_attrib.topic_color
@@ -114,6 +131,7 @@
                         <SvgIcon
                           v-else
                           icon-class="play-btn"
+                          size="24"
                           :style="{
                             color:
                               data.unified_attrib && data.unified_attrib.topic_color
@@ -138,6 +156,10 @@
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
+                            marginTop:
+                              data.unified_attrib && data.unified_attrib.font_size
+                                ? (((data.unified_attrib.font_size.replace('pt', '') * 1.5) / 3) * 4 - 16) / 2 + 'px'
+                                : '',
                           }"
                           >{{ index + 1 }}</b
                         >
@@ -385,6 +407,18 @@
           </template>
           <template v-else>
             <div v-if="data.new_word_list && data.new_word_list.length > 0" v-show="wordShow" class="NPC-word-tile">
+              <div v-if="data.audio_data.file_id" class="aduioLine-box" style="height: 0; margin: 0; overflow: hidden">
+                <AudioLine
+                  ref="audioLine"
+                  :audio-id="'newWordAudio' + indexStr"
+                  :mp3="data.audio_data.url"
+                  :get-cur-time="getCurTime"
+                  :ed="ed"
+                  type="audioLine"
+                  :attrib="data.unified_attrib"
+                  @handleListenRead="handleListenRead"
+                />
+              </div>
               <div v-for="(item, index) in data.new_word_list" :key="index" class="NPC-word-tile-item">
                 <div class="writeTop" :class="{ flipped: item.isFlipped }">
                   <div
@@ -474,8 +508,43 @@
                                 ? data.unified_attrib.topic_color
                                 : '',
                           }"
-                          :file-id="item.mp3_list"
+                          :file-id="item.mp3_list_url"
                         />
+                        <template v-else-if="item.bg || item.ed">
+                          <div
+                            class="audio-wrapper"
+                            :style="{
+                              background:
+                                data.unified_attrib && data.unified_attrib.topic_color
+                                  ? data.unified_attrib.topic_color
+                                  : '',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }"
+                            @click="handleChangeTime(item.bg, item.ed)"
+                          >
+                            <SvgIcon
+                              v-if="curTime >= item.bg && curTime < item.ed && stopAudioS"
+                              icon-class="animated"
+                              size="14"
+                              :style="{
+                                color: '#fff',
+                              }"
+                            />
+                            <SvgIcon
+                              v-else
+                              icon-class="play-btn"
+                              size="14"
+                              :style="{
+                                color: '#fff',
+                                width: '14px',
+                                height: '14px',
+                              }"
+                            />
+                          </div>
+                        </template>
+
                         <p
                           v-if="item.pinyin && item.pinyin.split(' ').length === 1"
                           :style="{
@@ -483,10 +552,6 @@
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
-                            fontSize:
-                              data.unified_attrib && data.unified_attrib.pinyin_size
-                                ? data.unified_attrib.pinyin_size
-                                : '',
                           }"
                           class="pinyin-box"
                         >
@@ -501,10 +566,6 @@
                                   data.unified_attrib && data.unified_attrib.topic_color
                                     ? data.unified_attrib.topic_color
                                     : '',
-                                fontSize:
-                                  data.unified_attrib && data.unified_attrib.pinyin_size
-                                    ? data.unified_attrib.pinyin_size
-                                    : '',
                               }"
                             >
                               {{ item.pinyin.split(' ')[indexh] ? item.pinyin.split(' ')[indexh] : '' }}
@@ -554,14 +615,15 @@
                         </div>
                       </div>
                     </div>
+                    <!-- width:
+                          !(item.collocation || item.liju_list) && item.new_word.length < 4
+                            ? item.hz_info.length * 86 + 'px'
+                            : '', -->
                     <div
                       v-if="item.collocation || item.liju_list || item.definition_list || item.cixing"
                       class="definition_list-box"
                       :style="{
-                        width:
-                          !(item.collocation || item.liju_list) && item.new_word.length < 4
-                            ? item.hz_info.length * 86 + 'px'
-                            : '',
+                        width: !(item.collocation || item.liju_list) && item.new_word.length < 4 ? '160px' : '',
                         margin:
                           !(item.collocation || item.liju_list) && item.new_word.length < 4 ? '16px auto 0 auto' : '',
                       }"
@@ -1010,8 +1072,7 @@ export default {
   .NPC-word-list {
     padding: 20px 24px;
     border: 1px solid rgba(0, 0, 0, 10%);
-    border-top: none;
-    border-radius: 0 0 8px 8px;
+    border-radius: 8px;
   }
 
   .detail-icon {
@@ -1224,7 +1285,6 @@ export default {
     display: flex;
     flex-flow: wrap;
     gap: 20px;
-    padding: 20px 0;
   }
 
   .writeTop {
@@ -1459,9 +1519,9 @@ export default {
           }
 
           p {
-            margin: 0 0 8px;
+            margin: 0;
             font-family: 'League';
-            font-size: 18px;
+            font-size: 14px;
             font-feature-settings: 'cv01' on;
             line-height: 120%;
             color: #de4444;
@@ -1471,17 +1531,16 @@ export default {
 
       :deep .audio-wrapper {
         box-sizing: border-box;
-        width: 50px;
-        height: 50px;
-        padding: 13px;
+        width: 24px;
+        height: 24px;
         margin: 0 auto 8px;
         cursor: pointer;
         background: #f3f3f3;
         border-radius: 40px;
 
         .voice-play {
-          width: 24px;
-          height: 24px;
+          width: 14px;
+          height: 14px;
         }
       }
 
@@ -1508,7 +1567,8 @@ export default {
 
           p {
             flex: 1;
-            line-height: 0;
+
+            // line-height: 0;
             word-break: break-word;
             white-space: pre-wrap;
           }
@@ -1517,7 +1577,13 @@ export default {
 
       :deep p {
         margin: 0;
-        line-height: 1.2;
+
+        span,
+        b,
+        p {
+          font-size: 14px !important;
+          text-align: left !important; // 有的富文本里设置了居中对齐
+        }
       }
     }
 
@@ -1647,8 +1713,8 @@ export default {
     padding-right: 16px;
     padding-left: 24px;
     overflow: hidden;
-    background: #e35454;
-    border: 1px solid rgba(0, 0, 0, 10%);
+
+    // background: #e35454;
     border-radius: 8px 8px 0 0;
 
     .NPC-top-left {

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

@@ -6,7 +6,7 @@
         class="voice-play"
       />
     </span>
-    <audio :id="fileId" :ref="fileId" :src="url" preload="metadata"></audio>
+    <audio :id="fileId" :ref="fileId" :src="fileId" preload="metadata"></audio>
   </div>
 </template>
 

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

@@ -5,24 +5,22 @@
 
     <div class="main">
       <div class="NPC-zhedie">
-        <div
-          class="topTitle"
-          :style="{
+        <!-- :style="{
             backgroundColor:
               data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
-          }"
-        >
+          }" -->
+        <div class="topTitle-note" v-if="data.title_con">
           <div class="NPC-top-left">
             <span class="NPC-topTitle-text" v-html="data.title_con"></span>
             <span v-if="showLang" class="NPC-topTitle-text">
               {{ titleTrans[getLang()] }}
             </span>
           </div>
-          <div class="NPC-top-right" @click="handleChangeTab">
+          <!-- <div class="NPC-top-right" @click="handleChangeTab">
             <span class="NPC-top-right-text">{{ wordShow ? '收起' : '展开' }}</span>
             <img v-if="wordShow" src="@/assets/down.png" alt="" />
             <img v-else class="rotate" src="@/assets/down.png" alt="" />
-          </div>
+          </div> -->
         </div>
         <el-collapse-transition>
           <div v-show="wordShow" class="NPC-notes-list">
@@ -222,7 +220,7 @@ export default {
   .NPC-zhedie {
     // margin-bottom: 24px;
 
-    .topTitle {
+    .topTitle-note {
       display: flex;
       justify-content: space-between;
       width: 100%;
@@ -230,9 +228,10 @@ export default {
       padding-right: 16px;
       padding-left: 24px;
       overflow: hidden;
-      background: #e35454;
-      border: 1px solid rgba(0, 0, 0, 10%);
-      border-radius: 8px 8px 0 0;
+
+      // background: #e35454;
+      // border: 1px solid rgba(0, 0, 0, 10%);
+      // border-radius: 8px 8px 0 0;
 
       :deep p {
         margin: 0;
@@ -283,8 +282,7 @@ export default {
     .NPC-notes-list {
       padding: 24px 24px 5px;
       border: 1px solid rgba(0, 0, 0, 10%);
-      border-top: none;
-      border-radius: 0 0 8px 8px;
+      border-radius: 8px;
 
       .NPC-notes {
         width: 100%;