|
|
@@ -1,24 +1,30 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
+ <view class="words-bei-box">
|
|
|
<!-- 单词区 -->
|
|
|
- <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
|
|
|
+ <!-- <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue> -->
|
|
|
<!-- 显示区 -->
|
|
|
<selectTypesVue activeSelect="5"></selectTypesVue>
|
|
|
<!-- 输入区 -->
|
|
|
- <view>{{data.answer}}</view>
|
|
|
- <!-- 解释区 -->
|
|
|
- <view>
|
|
|
- {{activeWord.jianyi.join(';')}}
|
|
|
- </view>
|
|
|
- <!-- 音标区 -->
|
|
|
- <view></view>
|
|
|
- <!-- 清理区 -->
|
|
|
- <view @click="handleReset('all')">
|
|
|
- reset
|
|
|
+ <view class="words-answer-box">{{data.answer}}</view>
|
|
|
+ <!-- 清空和提示互斥 需要分成多行 大哥看这里 -->
|
|
|
+ <!-- 清空按钮 -->
|
|
|
+ <view class="clean-btn" @click="handleReset('all')"></view>
|
|
|
+ <!-- 提示 -->
|
|
|
+ <view class="pin-tip">提示：请点击页面下方键盘，输入正确字母。</view>
|
|
|
+
|
|
|
+ <!-- 解释区 需要分成多行 大哥看这里-->
|
|
|
+ <view class="pin-words-explain-box">
|
|
|
+ <view class="words-explain-item">{{activeWord.jianyi.join(';')}}</view>
|
|
|
</view>
|
|
|
+ <!-- 播放和待播放需要写个切换 大哥看这里 -->
|
|
|
+ <!-- 待播放 -->
|
|
|
+ <view class="audio-play-btn"></view>
|
|
|
+ <!-- 播放中 -->
|
|
|
+ <view class="audio-playing-btn" v-if="false"></view>
|
|
|
+
|
|
|
<!-- 浮层输入区 -->
|
|
|
- <view>
|
|
|
- <view>
|
|
|
+ <view class="words-keyboard-box">
|
|
|
+ <view class="keyboard-row">
|
|
|
<btnTxtVue @text-select="handleSelect('a')">a</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('b')">b</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('c')">c</btnTxtVue>
|
|
|
@@ -30,7 +36,7 @@
|
|
|
<btnTxtVue @text-select="handleSelect('i')">i</btnTxtVue>
|
|
|
|
|
|
</view>
|
|
|
- <view>
|
|
|
+ <view class="keyboard-row">
|
|
|
<btnTxtVue @text-select="handleSelect('j')">j</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('k')">k</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('l')">l</btnTxtVue>
|
|
|
@@ -41,7 +47,7 @@
|
|
|
<btnTxtVue @text-select="handleSelect('q')">q</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('r')">r</btnTxtVue>
|
|
|
</view>
|
|
|
- <view>
|
|
|
+ <view class="keyboard-row">
|
|
|
<btnTxtVue @text-select="handleSelect('s')">s</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('t')">t</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('u')">u</btnTxtVue>
|
|
|
@@ -50,11 +56,9 @@
|
|
|
<btnTxtVue @text-select="handleSelect('x')">x</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('y')">y</btnTxtVue>
|
|
|
<btnTxtVue @text-select="handleSelect('z')">z</btnTxtVue>
|
|
|
- <btnTxtVue @text-select="handleReset">x</btnTxtVue>
|
|
|
+ <btnTxtVue @text-select="handleReset" class="del-btn"></btnTxtVue>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
- <view>确定</view>
|
|
|
+ <view class="bei-confirm-btn"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
tanxue