拼音字体

src/styles/font/font.css

@@ -2,3 +2,8 @@
   font-family: 'PINYIN-B';
   src: url('GB PINYINOK-B.TTF');
 }
+
+@font-face {
+  font-family: 'League';
+  src: url('ABeeZee-Regular.ttf');
+}

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

@@ -4,89 +4,106 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
-      <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="(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"
+        :class="[data.property.arrange_type === 'horizontal' ? 'content-box-flex' : 'content-box-vertical']"
+      >
+        <div class="first-con">
+          <AudioFill
+            v-if="data.audio_file_id && data.property.audio_position === 'front'"
+            :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>
+                {{ 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>
+          <AudioFill
+            v-if="data.audio_file_id && data.property.audio_position === 'back'"
+            :file-id="data.audio_file_id"
+          />
         </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
+        <div class="tone-box" v-if="data.property.fun_type === 'mark'">
+          <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>
+        <template
+          v-else-if="data.property.fun_type === 'show' && isEnable(data.property.is_enable_voice_answer)"
+        ></template>
       </div>
     </div>
   </div>
@@ -456,6 +473,77 @@ export default {
 .pinyin-preview {
   @include preview-base;
 
+  .content-box {
+    &-flex {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 8px;
+      align-items: center;
+    }
+
+    &-vertical {
+      .tone-box {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .first-con {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+  }
+
+  .option-content {
+    padding: 10px 22px;
+    color: #706f78;
+    background-color: $content-color;
+    border: 1px solid $content-color;
+    border-radius: 40px;
+
+    &.all-right {
+      background-color: $right-bc-color;
+      border-color: $right-bc-color;
+    }
+
+    &.has-error {
+      border-color: $error-color;
+    }
+  }
+
+  .items-hz {
+    margin-right: 4px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: #000;
+  }
+
+  .item-con,
+  .items-con {
+    font-family: 'League';
+    font-weight: 500;
+    color: #000;
+    cursor: pointer;
+
+    &.right {
+      color: $right-color;
+    }
+
+    &.error {
+      color: $error-color;
+    }
+
+    &.active {
+      color: #2f6fec;
+    }
+  }
+
+  .tone-box {
+    display: flex;
+    column-gap: 8px;
+  }
+
   .tone {
     width: 32px;
     height: 32px;