注释

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

@@ -114,3 +114,8 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.tox .tox-editor-header {
+  z-index: 3 !important;
+}
+</style>

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

@@ -1,9 +1,27 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="select-preview" :style="getAreaStyle()">
+  <div class="notes-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div class="main">预览开发中</div>
+    <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>
+            </div>
+          </div>
+        </div>
+      </el-collapse-transition>
+    </div>
   </div>
 </template>
 
@@ -19,85 +37,167 @@ export default {
   data() {
     return {
       data: getNotesData(),
+      wordShow: true,
     };
   },
   computed: {},
-  created() {
-    // this.answer.answer_list = this.data.model_essay
-    //   .map((item) => {
-    //     return item
-    //       .map(({ type, content, mark }) => {
-    //         if (type === 'input') {
-    //           return {
-    //             value: content,
-    //             mark,
-    //           };
-    //         }
-    //       })
-    //       .filter((item) => item);
-    //   })
-    //   .flat();
+  created() {},
+  methods: {
+    handleChangeTab() {
+      this.wordShow = !this.wordShow;
+    },
   },
-  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
-.select-preview {
+.notes-preview {
   @include preview-base;
 
-  .main {
-    display: grid;
-    align-items: center;
-  }
+  .NPC-zhedie {
+    width: 780px;
+    margin-bottom: 24px;
+
+    .topTitle {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding-right: 16px;
+      padding-left: 24px;
+      overflow: hidden;
+      border: 1px solid rgba(0, 0, 0, 10%);
+      border-radius: 8px 8px 0 0;
+
+      .NPC-top-left {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        .NPC-topTitle-text {
+          margin-right: 8px;
+          font-family: 'sourceR';
+          font-size: 16px;
+          font-weight: bold;
+          color: #fff;
+        }
+      }
 
-  .fill-wrapper {
-    grid-area: fill;
-    font-size: 16pt;
+      .NPC-top-right {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        cursor: pointer;
+
+        &-text {
+          font-size: 14px;
+          font-weight: normal;
+          line-height: 16px;
+          color: #fff;
+        }
+
+        img {
+          width: 16px;
+          height: 16px;
+          margin-left: 4px;
+        }
+      }
 
-    p {
-      margin: 0;
+      .rotate {
+        animation-name: firstrotate;
+        animation-timing-function: linear;
+        animation-direction: 2s;
+        animation-fill-mode: both;
+      }
     }
 
-    .el-input {
-      display: inline-flex;
-      align-items: center;
-      width: 120px;
-      margin: 0 2px;
-
-      &.pinyin :deep input.el-input__inner {
-        font-family: 'PINYIN-B', sans-serif;
+    .NPC-notes-list {
+      padding: 24px 24px 5px;
+      border: 1px solid rgba(0, 0, 0, 10%);
+      border-top: none;
+      border-radius: 0 0 8px 8px;
+
+      .NPC-notes {
+        width: 100%;
+        margin-bottom: 24px;
+
+        .NPC-notes-con {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          margin-bottom: 12px;
+
+          > span {
+            font-size: 14px;
+            font-style: normal;
+            font-weight: normal;
+            line-height: 150%;
+            color: #e35454;
+
+            &.NPC-notes-con-number {
+              font-family: 'robot';
+            }
+
+            &.NPC-notes-con-text {
+              flex: 1;
+              margin-left: 5px;
+            }
+          }
+        }
+
+        .NPC-notes-trans {
+          padding-left: 27px;
+          margin-bottom: 12px;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: bold;
+          line-height: 150%;
+          color: #000;
+        }
+
+        .NPC-notes-note {
+          font-size: 14px;
+          font-style: normal;
+          font-weight: normal;
+          line-height: 150%;
+          color: #000;
+          text-indent: 27px;
+          word-break: break-word;
+        }
       }
+    }
 
-      &.chinese :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
-      }
+    .NPC-notes-note-img {
+      width: 100%;
 
-      &.english :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
-      }
+      > div {
+        width: 100%;
 
-      :deep input.el-input__inner {
-        padding: 0;
-        font-size: 16pt;
-        color: $font-color;
-        text-align: center;
-        background-color: #fff;
-        border-width: 0;
-        border-bottom: 1px solid $font-color;
-        border-radius: 0;
+        > img {
+          max-width: 100%;
+        }
       }
     }
   }
 
-  .record-box {
-    padding: 6px 12px;
-    background-color: $fill-color;
+  @keyframes firstrotate {
+    0% {
+      transform: rotateZ(0deg);
+    }
+
+    100% {
+      transform: rotateZ(180deg);
+    }
+  }
+
+  @keyframes huifuRotate {
+    0% {
+      transform: rotateZ(180deg);
+    }
 
-    :deep .record-time {
-      width: 100px;
+    100% {
+      transform: rotateZ(0deg);
     }
   }
 }