|
@@ -20,12 +20,12 @@
|
|
|
pic_list[option_list[active_index].picture_file_id]
|
|
|
"
|
|
|
:src="pic_list[option_list[active_index].picture_file_id]"
|
|
|
- fit="contain"
|
|
|
+ fit="cover"
|
|
|
/>
|
|
|
<div class="words-right">
|
|
|
<template v-for="(item, index) in option_list">
|
|
|
<div v-if="index === active_index" :key="index" class="strock-box">
|
|
|
- <div class="pinyin-box">
|
|
|
+ <div class="pinyin-box" v-if="item.audio_file_id || item.pinyin">
|
|
|
<AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
|
|
|
<span class="pinyin">{{ item.pinyin }}</span>
|
|
|
</div>
|
|
@@ -170,11 +170,11 @@ export default {
|
|
|
|
|
|
label {
|
|
|
display: block;
|
|
|
- padding: 4px 16px;
|
|
|
+ padding: 8px 16px;
|
|
|
margin-bottom: 4px;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 18px;
|
|
|
font-weight: 400;
|
|
|
- line-height: 24px;
|
|
|
+ line-height: 26px;
|
|
|
color: rgba(0, 0, 0, 30%);
|
|
|
cursor: pointer;
|
|
|
border-radius: 20px;
|
|
@@ -194,7 +194,14 @@ export default {
|
|
|
}
|
|
|
|
|
|
.strock-chinese {
|
|
|
+ width: 96px;
|
|
|
+ height: 96px;
|
|
|
border: 1px solid #e81b1b;
|
|
|
+
|
|
|
+ :deep .strock-play-box {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.border-right-none {
|
|
@@ -233,22 +240,22 @@ export default {
|
|
|
.tips {
|
|
|
display: block;
|
|
|
margin-bottom: 8px;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
+ line-height: 24px;
|
|
|
color: rgba(0, 0, 0, 40%);
|
|
|
}
|
|
|
|
|
|
.example-sentence {
|
|
|
margin: 0;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
.sound-box {
|
|
|
width: max-content;
|
|
|
- padding: 4px;
|
|
|
+ padding: 8px;
|
|
|
background: $content-color;
|
|
|
border-radius: 40px;
|
|
|
}
|