|
@@ -27,6 +27,20 @@
|
|
|
<div class="words-right">
|
|
|
<template v-for="(item, index) in option_list">
|
|
|
<div v-if="index === active_index" :key="index" class="strock-box">
|
|
|
+ <div
|
|
|
+ v-if="item.audio_file_id"
|
|
|
+ class="pinyin-box"
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ item.hz_strokes_list && item.hz_strokes_list.length < 6
|
|
|
+ ? 96 * item.hz_strokes_list.length + 'px'
|
|
|
+ : '576px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="pinyin-inner">
|
|
|
+ <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div v-if="item.hz_strokes_list && item.hz_strokes_list.length > 0" class="strock-left">
|
|
|
<div v-for="(items, indexs) in item.hz_strokes_list" :key="indexs + '_' + index">
|
|
|
<span class="pinyin">{{
|
|
@@ -41,9 +55,6 @@
|
|
|
:class="['strock-chinese', indexs !== item.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div v-if="item.audio_file_id" class="pinyin-box">
|
|
|
- <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -235,14 +246,19 @@ export default {
|
|
|
|
|
|
.pinyin-box {
|
|
|
display: flex;
|
|
|
- gap: 4px;
|
|
|
- align-items: center;
|
|
|
- width: max-content;
|
|
|
- height: 36px;
|
|
|
- padding: 4px 8px;
|
|
|
- margin-left: 16px;
|
|
|
- background: rgba(47, 111, 236, 100%);
|
|
|
- border-radius: 40px;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .pinyin-inner {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+ align-items: center;
|
|
|
+ width: max-content;
|
|
|
+ height: 36px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ background: rgba(47, 111, 236, 100%);
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
|
|
|
:deep .audio-play {
|
|
|
width: auto;
|