no message

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -4,88 +4,90 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
-      <AudioFill v-if="data.audio_file_id" :file-id="data.audio_file_id" />
-      <div
-        class="option-content"
-        :class="[isJudgingRightWrong ? (con_preview[0].all_right ? 'all-right' : 'has-error') : '']"
-      >
-        <span v-if="data.content_hz" class="items-hz">{{ data.content_hz }}</span>
-        <template v-if="data.property.answer_mode === 'select'">
-          <span
-            v-for="(itemc, indexc) in con_preview[0].item_con"
-            :key="indexc"
-            :class="[
-              'item-con',
-              active_index_str === 0 + '-' + indexc ? 'active' : '',
-              isJudgingRightWrong && !con_preview[0].user_answer[indexc].is_right ? 'error' : '',
-            ]"
-            @click="
-              con_preview[0].item_active_index = indexc;
-              active_index_str = 0 + '-' + indexc;
-            "
-          >
-            {{ itemc }}
-          </span>
-        </template>
-        <template v-else>
-          <span v-for="(itemc, indexc) in con_preview[0].item_con" :key="indexc" class="items-box">
+      <div class="content-box">
+        <AudioFill v-if="data.audio_file_id" :file-id="data.audio_file_id" />
+        <div
+          class="option-content"
+          :class="[isJudgingRightWrong ? (con_preview[0].all_right ? 'all-right' : 'has-error') : '']"
+        >
+          <span v-if="data.content_hz" class="items-hz">{{ data.content_hz }}</span>
+          <template v-if="data.property.answer_mode === 'select'">
             <span
-              v-for="(itemi, indexi) in itemc"
-              :key="indexi"
+              v-for="(itemc, indexc) in con_preview[0].item_con"
+              :key="indexc"
               :class="[
-                'items-con',
-                active_index_str === 0 + '-' + indexc + '-' + indexi ? 'active' : '',
-                isJudgingRightWrong &&
-                !con_preview[0].user_answer[indexc].is_right &&
-                con_preview[0].user_answer[indexc].select_index_submit === indexi
-                  ? 'error'
-                  : '',
-                isJudgingRightWrong &&
-                !con_preview[0].user_answer[indexc].is_right &&
-                con_preview[0].user_answer[indexc].right_index === indexi
-                  ? 'right'
-                  : '',
+                'item-con',
+                active_index_str === 0 + '-' + indexc ? 'active' : '',
+                isJudgingRightWrong && !con_preview[0].user_answer[indexc].is_right ? 'error' : '',
               ]"
-              @click="handleSelectItemTone(0, indexc, indexi, con_preview[0].item_con_yuan[indexc][indexi])"
-              >{{ itemi }}</span
+              @click="
+                con_preview[0].item_active_index = indexc;
+                active_index_str = 0 + '-' + indexc;
+              "
             >
-          </span>
-        </template>
-      </div>
-      <span
-        v-for="({ img, value }, j) in toneList"
-        :key="j"
-        :class="[
-          'tone',
-          data.property.answer_mode === 'select' &&
-          con_preview[0].user_answer[con_preview[0].item_active_index] &&
-          con_preview[0].user_answer[con_preview[0].item_active_index].select_tone === value
-            ? 'active'
-            : data.property.answer_mode === 'label' &&
-                con_preview[0].user_answer[con_preview[0].item_active_index] &&
-                con_preview[0].user_answer[con_preview[0].item_active_index].select_tone === value &&
-                con_preview[0].user_answer[con_preview[0].item_active_index].select_letter === active_letter &&
-                select_item_index === 0
+              {{ itemc }}
+            </span>
+          </template>
+          <template v-else>
+            <span v-for="(itemc, indexc) in con_preview[0].item_con" :key="indexc" class="items-box">
+              <span
+                v-for="(itemi, indexi) in itemc"
+                :key="indexi"
+                :class="[
+                  'items-con',
+                  active_index_str === 0 + '-' + indexc + '-' + indexi ? 'active' : '',
+                  isJudgingRightWrong &&
+                  !con_preview[0].user_answer[indexc].is_right &&
+                  con_preview[0].user_answer[indexc].select_index_submit === indexi
+                    ? 'error'
+                    : '',
+                  isJudgingRightWrong &&
+                  !con_preview[0].user_answer[indexc].is_right &&
+                  con_preview[0].user_answer[indexc].right_index === indexi
+                    ? 'right'
+                    : '',
+                ]"
+                @click="handleSelectItemTone(0, indexc, indexi, con_preview[0].item_con_yuan[indexc][indexi])"
+                >{{ itemi }}</span
+              >
+            </span>
+          </template>
+        </div>
+        <span
+          v-for="({ img, value }, j) in toneList"
+          :key="j"
+          :class="[
+            'tone',
+            data.property.answer_mode === 'select' &&
+            con_preview[0].user_answer[con_preview[0].item_active_index] &&
+            con_preview[0].user_answer[con_preview[0].item_active_index].select_tone === value
               ? 'active'
+              : data.property.answer_mode === 'label' &&
+                  con_preview[0].user_answer[con_preview[0].item_active_index] &&
+                  con_preview[0].user_answer[con_preview[0].item_active_index].select_tone === value &&
+                  con_preview[0].user_answer[con_preview[0].item_active_index].select_letter === active_letter &&
+                  select_item_index === 0
+                ? 'active'
+                : '',
+            (isJudgingRightWrong &&
+              con_preview[0].user_answer[con_preview[0].item_active_index].right_answer === value &&
+              con_preview[0].user_answer[con_preview[0].item_active_index].select_index_submit !==
+                con_preview[0].user_answer[con_preview[0].item_active_index].right_answer &&
+              data.property.answer_mode === 'select') ||
+            (isJudgingRightWrong &&
+              data.property.answer_mode === 'label' &&
+              con_preview[0].user_answer[con_preview[0].item_active_index].right_answer === value &&
+              con_preview[0].user_answer[con_preview[0].item_active_index].right_index ===
+                con_preview[0].user_answer[con_preview[0].item_active_index].select_index &&
+              select_item_index === 0)
+              ? 'right'
               : '',
-          (isJudgingRightWrong &&
-            con_preview[0].user_answer[con_preview[0].item_active_index].right_answer === value &&
-            con_preview[0].user_answer[con_preview[0].item_active_index].select_index_submit !==
-              con_preview[0].user_answer[con_preview[0].item_active_index].right_answer &&
-            data.property.answer_mode === 'select') ||
-          (isJudgingRightWrong &&
-            data.property.answer_mode === 'label' &&
-            con_preview[0].user_answer[con_preview[0].item_active_index].right_answer === value &&
-            con_preview[0].user_answer[con_preview[0].item_active_index].right_index ===
-              con_preview[0].user_answer[con_preview[0].item_active_index].select_index &&
-            select_item_index === 0)
-            ? 'right'
-            : '',
-        ]"
-        @click="chooseTone(con_preview[0], value)"
-      >
-        <SvgIcon :icon-class="img" />
-      </span>
+          ]"
+          @click="chooseTone(con_preview[0], value)"
+        >
+          <SvgIcon :icon-class="img" />
+        </span>
+      </div>
     </div>
   </div>
 </template>
@@ -454,56 +456,25 @@ export default {
 .pinyin-preview {
   @include preview-base;
 
-  .main {
-    display: grid;
-    align-items: center;
-  }
-
-  .fill-wrapper {
-    grid-area: fill;
-    font-size: 16pt;
-
-    p {
-      margin: 0;
-    }
-
-    .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;
-      }
-
-      &.chinese :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
-      }
-
-      &.english :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
-      }
+  .tone {
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    font-size: 0;
+    color: #9f9f9f;
+    text-align: center;
+    cursor: pointer;
 
-      :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;
-      }
+    &.right {
+      color: $right-color;
+      background-color: $right-bc-color;
+      border-radius: 16px;
     }
-  }
-
-  .record-box {
-    padding: 6px 12px;
-    background-color: $fill-color;
 
-    :deep .record-time {
-      width: 100px;
+    &.active {
+      color: #2f6fec;
+      background: #dfe9fd;
+      border-radius: 16px;
     }
   }
 }