文章字词卡片主题色及注释背景色

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

@@ -1813,6 +1813,7 @@ export default {
     max-width: 100%;
     margin-top: -196px;
     overflow: auto;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
   }
 
   .NNPE-detail-box {

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

@@ -6,12 +6,23 @@
     </div>
     <div class="NPC-notes">
       <div class="NPC-notes-con">
-        <span class="NPC-notes-con-number">{{ item.number }}</span>
-        <span class="NPC-notes-con-text">{{ item.con }}</span>
-      </div>
-      <div class="NPC-notes-trans">
-        {{ item.interpret }}
+        <span
+          class="NPC-notes-con-number"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+          >{{ item.number }}</span
+        >
+        <span
+          class="NPC-notes-con-text"
+          v-html="item.con"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+            fontSize: attrib && attrib.font_size ? attrib.font_size : '',
+          }"
+        ></span>
       </div>
+      <div class="NPC-notes-trans" v-html="item.interpret"></div>
       <div v-if="item.note" class="NPC-notes-note" v-html="item.note"></div>
       <div v-if="item.img_list && item.img_list.length > 0" class="NPC-notes-note-img">
         <div v-for="(imgItem, imgIndex) in item.img_list" :key="'imgList' + imgIndex">
@@ -25,7 +36,7 @@
 <script>
 export default {
   components: {},
-  props: ['item', 'changeCard'],
+  props: ['item', 'changeCard', 'attrib'],
   data() {
     return {};
   },
@@ -54,7 +65,7 @@ export default {
   max-height: 261px;
   padding: 16px;
   overflow-y: auto;
-  background: #fff;
+  background: rgb(236, 238, 243);
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 15%);
 
@@ -134,5 +145,9 @@ export default {
       }
     }
   }
+
+  :deep p {
+    margin: 0;
+  }
 }
 </style>

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

@@ -1401,6 +1401,7 @@ export default {
     padding: 8px;
     margin-top: -130px;
     overflow: auto;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
   }
 
   .multilingual {