注释组件

src/views/book/courseware/create/components/question/notes/Notes.vue

@@ -1,6 +1,13 @@
 <template>
   <ModuleBase :type="data.type">
     <template #content>
+      <label>标题：</label>
+      <RichText
+        v-model="data.title_con"
+        :inline="true"
+        :placeholder="'输入标题'"
+        toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+      />
       <el-table :data="data.option" border style="width: 100%">
         <el-table-column fixed prop="number" label="序号" width="70">
           <template slot-scope="scope">

src/views/book/courseware/create/components/question/notes/NotesSetting.vue

@@ -2,6 +2,13 @@
   <div>
     <el-form :model="property" label-width="72px" label-position="left">
       <SerailNumber :property="property" />
+      <el-form-item label="预览展开">
+        <el-radio-group v-model="property.is_word_show">
+          <el-radio v-for="{ value, label } in wordShowList" :key="value" :label="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -9,7 +16,7 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 
-import { getNotesProperty } from '@/views/book/courseware/data/notes';
+import { getNotesProperty, wordShowList } from '@/views/book/courseware/data/notes';
 
 export default {
   name: 'NotesSetting',
@@ -17,6 +24,7 @@ export default {
   data() {
     return {
       property: getNotesProperty(),
+      wordShowList,
     };
   },
   methods: {},

src/views/book/courseware/data/notes.js

@@ -8,6 +8,12 @@ import {
 } from '@/views/book/courseware/data/common';
 
 export { arrangeTypeList, switchOption, isEnable };
+  
+// 拼音位置
+export const wordShowList = [
+  { value: 'true', label: '是' },
+  { value: 'false', label: '否' },
+];
 
 export function getOption() {
   return {
@@ -24,6 +30,7 @@ export function getNotesProperty() {
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[0].value,
     sn_display_mode: displayList[0].value,
+    is_word_show: wordShowList[1].value
   };
 }
 
@@ -32,6 +39,7 @@ export function getNotesData() {
     type: 'notes',
     title: '注释组件',
     property: getNotesProperty(),
+    title_con:'',
     option: [
       getOption()
     ],

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

@@ -4,29 +4,41 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
-      <el-collapse-transition>
-        <div class="NPC-notes-list" v-show="wordShow">
-          <div class="NPC-notes" v-for="(item, index) in data.option" :key="'NPC-notes' + index">
-            <div class="NPC-notes-con">
-              <span class="NPC-notes-con-number" v-html="item.number"></span>
-              <span class="NPC-notes-con-text" v-html="item.con"></span>
-            </div>
-            <div class="NPC-notes-trans" v-html="item.interpret"></div>
-            <div class="NPC-notes-note" v-if="item.note" v-html="item.note"></div>
-            <div class="NPC-notes-note-img" v-if="item.img_list && item.img_list.length > 0">
-              <div v-for="(imgItem, imgIndex) in item.img_list" :key="'imgList' + imgIndex">
-                <img :src="imgItem.id" class="NPC-notes-img" />
+      <div class="NPC-zhedie">
+        <div class="topTitle">
+          <div class="NPC-top-left">
+            <span class="NPC-topTitle-text" v-html="data.title_con"></span>
+          </div>
+          <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>
+        <el-collapse-transition>
+          <div class="NPC-notes-list" v-show="wordShow">
+            <div class="NPC-notes" v-for="(item, index) in data.option" :key="'NPC-notes' + index">
+              <div class="NPC-notes-con">
+                <span class="NPC-notes-con-number" v-html="item.number"></span>
+                <span class="NPC-notes-con-text" v-html="item.con"></span>
+              </div>
+              <div class="NPC-notes-trans" v-html="item.interpret"></div>
+              <div class="NPC-notes-note" v-if="item.note" v-html="item.note"></div>
+              <div class="NPC-notes-note-img" v-if="item.img_list && item.img_list.length > 0">
+                <div v-for="(imgItem, imgIndex) in item.img_list" :key="'imgList' + imgIndex">
+                  <img :src="imgItem.id" class="NPC-notes-img" />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </el-collapse-transition>
+        </el-collapse-transition>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { getNotesData } from '@/views/book/courseware/data/notes';
+import { getNotesData, isEnable } from '@/views/book/courseware/data/notes';
 
 import PreviewMixin from '../common/PreviewMixin';
 
@@ -37,7 +49,7 @@ export default {
   data() {
     return {
       data: getNotesData(),
-      wordShow: true,
+      wordShow: false,
     };
   },
   computed: {},
@@ -64,19 +76,25 @@ export default {
       display: flex;
       justify-content: space-between;
       width: 100%;
+      height: 48px;
       padding-right: 16px;
       padding-left: 24px;
       overflow: hidden;
+      background: #e35454;
       border: 1px solid rgba(0, 0, 0, 10%);
       border-radius: 8px 8px 0 0;
 
+      :deep p {
+        margin: 0;
+      }
+
       .NPC-top-left {
         display: flex;
         align-items: center;
         justify-content: flex-start;
 
         .NPC-topTitle-text {
-          margin-right: 8px;
+          margin: 0 8px 0 0;
           font-family: 'sourceR';
           font-size: 16px;
           font-weight: bold;
@@ -122,6 +140,10 @@ export default {
         width: 100%;
         margin-bottom: 24px;
 
+        :deep p {
+          margin: 0;
+        }
+
         .NPC-notes-con {
           display: flex;
           align-items: center;