|
|
@@ -2,198 +2,110 @@
|
|
|
<template>
|
|
|
<div
|
|
|
v-if="curQue"
|
|
|
- class="Big-Book-prev-Textdes NewWordShow"
|
|
|
- :class="[isPhone ? 'NewWordShow-phone' : '']"
|
|
|
+ class="Big-Book-prev-Textdes NewWordShow NewWordShow-phone"
|
|
|
>
|
|
|
<h2 v-if="curQue.title">{{ curQue.title }}</h2>
|
|
|
<div class="item-box">
|
|
|
<div v-for="(item, index) in curQue.option" :key="index" class="item-pre">
|
|
|
- <template v-if="isPhone">
|
|
|
- <div class="item-info">
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ :style="{
|
|
|
+ alignItems:
|
|
|
+ item.pinyin && item.en
|
|
|
+ ? 'center'
|
|
|
+ : !item.pinyin && item.en
|
|
|
+ ? 'flex-start'
|
|
|
+ : item.pinyin && !item.en
|
|
|
+ ? 'flex-end'
|
|
|
+ : ''
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="con-box"
|
|
|
+ v-if="
|
|
|
+ (item.imgOrText && item.imgOrText == 'text' && item.con) ||
|
|
|
+ (item.imgOrText == 'image' && item.img_list.length > 0)
|
|
|
+ "
|
|
|
+ >
|
|
|
<template v-if="item.pinyin">
|
|
|
- <span class="pinyin" :style="{ width: pinyinWidth + 'px' }">{{
|
|
|
- item.pinyin
|
|
|
- }}</span>
|
|
|
+ <span
|
|
|
+ class="pinyin"
|
|
|
+ :style="{ fontSize: baseSizePhone + 2 + 'px' }"
|
|
|
+ >{{ item.pinyin }}</span
|
|
|
+ >
|
|
|
</template>
|
|
|
- <div
|
|
|
- class="con-box"
|
|
|
- v-if="
|
|
|
- (item.imgOrText && item.imgOrText == 'text' && item.con) ||
|
|
|
- (item.imgOrText == 'image' && item.img_list.length > 0)
|
|
|
- "
|
|
|
- >
|
|
|
- <template v-if="item.imgOrText == 'text'">
|
|
|
- <template v-if="item.con">
|
|
|
- <div
|
|
|
- v-for="(conItem, conindex) in item.con"
|
|
|
- :key="conindex"
|
|
|
- class="strockplay-newWord"
|
|
|
- @click="writeWord(conItem, item.pinyin)"
|
|
|
- >
|
|
|
- <Strockplayredline
|
|
|
- :Book_text="conItem"
|
|
|
- :play-storkes="true"
|
|
|
- :target-div="
|
|
|
- 'bwcHanziIntp' +
|
|
|
- index +
|
|
|
- conItem +
|
|
|
- conindex +
|
|
|
- indexStr +
|
|
|
- judgeAnswer
|
|
|
- "
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="conindex < item.con.length - 1"
|
|
|
- class="bwc-line"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="blank-item" @click="freeWrite('', index, 0)">
|
|
|
- <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <template v-if="item.imgOrText == 'text'">
|
|
|
+ <template v-if="item.con">
|
|
|
+ <div
|
|
|
+ v-for="(conItem, conindex) in item.con"
|
|
|
+ :key="conindex"
|
|
|
+ class="strockplay-newWord"
|
|
|
+ @click="writeWord(conItem, item.pinyin)"
|
|
|
+ :style="{ marginBottom: item.en ? '20px' : '' }"
|
|
|
+ >
|
|
|
+ <Strockplayredline
|
|
|
+ :Book_text="conItem"
|
|
|
+ :play-storkes="true"
|
|
|
+ :target-div="
|
|
|
+ 'bwcHanziIntp' +
|
|
|
+ index +
|
|
|
+ conItem +
|
|
|
+ conindex +
|
|
|
+ indexStr +
|
|
|
+ judgeAnswer
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div v-if="conindex < item.con.length - 1" class="bwc-line" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- <template v-else-if="item.imgOrText == 'image'">
|
|
|
+ <template v-else>
|
|
|
<div
|
|
|
- v-for="(imgItem, imgIndex) in item.img_list"
|
|
|
- :key="imgIndex"
|
|
|
- class="img-box"
|
|
|
- @click="freeWrite(imgItem.id, imgIndex, 0)"
|
|
|
+ class="blank-item"
|
|
|
+ @click="freeWrite('', index, 0)"
|
|
|
+ :style="{ marginBottom: item.en ? '22px' : '' }"
|
|
|
>
|
|
|
- <el-image :src="imgItem.id" fit="scale-down" class="img_url">
|
|
|
- <div slot="placeholder" class="image-slot">
|
|
|
- <img src="../../../assets/common/icon-imgloading.png" />
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
+ <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
|
|
|
</div>
|
|
|
</template>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.imgOrText == 'image'">
|
|
|
+ <div
|
|
|
+ v-for="(imgItem, imgIndex) in item.img_list"
|
|
|
+ :key="imgIndex"
|
|
|
+ class="img-box"
|
|
|
+ @click="freeWrite(imgItem.id, imgIndex, 0)"
|
|
|
+ >
|
|
|
+ <el-image :src="imgItem.id" fit="scale-down" class="img_url">
|
|
|
+ <div slot="placeholder" class="image-slot">
|
|
|
+ <img src="../../../assets/common/icon-imgloading.png" />
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<span
|
|
|
v-if="item.en"
|
|
|
class="en"
|
|
|
:style="{
|
|
|
marginLeft: item.en.length < 12 ? '' : enMargin + 'px',
|
|
|
textAlign: item.en.length < 12 ? 'center' : 'left',
|
|
|
- width: item.en.length < 12 ? '66px' : ''
|
|
|
+ width: item.en.length < 12 ? '66px' : '',
|
|
|
+ fontSize: baseSizePhone + 'px'
|
|
|
}"
|
|
|
>{{ item.en }}</span
|
|
|
>
|
|
|
</div>
|
|
|
|
|
|
- <div class="item">
|
|
|
- <template v-if="item.type && item.type.indexOf('lm') > -1">
|
|
|
- <div
|
|
|
- v-for="(items, indexs) in item.imgarr"
|
|
|
- :key="indexs"
|
|
|
- class="con-box"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="strockplay-newWord"
|
|
|
- @click="freeWrite(items, index, indexs)"
|
|
|
- >
|
|
|
- <!-- <div
|
|
|
- @click.stop="playHanzi(index, indexs, items)"
|
|
|
- :class="[
|
|
|
- 'strock-play-box',
|
|
|
- themeColor == 'green'
|
|
|
- ? 'green-border'
|
|
|
- : themeColor == 'red'
|
|
|
- ? 'red-border'
|
|
|
- : themeColor == 'brown'
|
|
|
- ? 'brown-border'
|
|
|
- : 'red-border',
|
|
|
- ]"
|
|
|
- ></div> -->
|
|
|
- <img
|
|
|
- v-if="!playStatus && items && items.strokes_image_url"
|
|
|
- :src="items.strokes_image_url"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <!-- <FreeWriteQP
|
|
|
- :id="'cans' + index + indexs"
|
|
|
- :ref="'cans'"
|
|
|
- :height="256"
|
|
|
- :width="256"
|
|
|
- /> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <template v-if="item.pinyin">
|
|
|
- <span class="pinyin" :style="{ width: pinyinWidth + 'px' }">{{
|
|
|
- item.pinyin
|
|
|
- }}</span>
|
|
|
- </template>
|
|
|
- <div class="item" style="margin-right: 20px">
|
|
|
+ <template v-if="item.type && item.type.indexOf('lm') > -1">
|
|
|
<div
|
|
|
+ v-for="(items, indexs) in item.imgarr"
|
|
|
+ :key="indexs"
|
|
|
class="con-box"
|
|
|
- v-if="
|
|
|
- (item.imgOrText && item.imgOrText == 'text' && item.con) ||
|
|
|
- (item.imgOrText == 'image' && item.img_list.length > 0)
|
|
|
- "
|
|
|
>
|
|
|
- <template v-if="item.imgOrText == 'text'">
|
|
|
- <template v-if="item.con">
|
|
|
- <div
|
|
|
- v-for="(conItem, conindex) in item.con"
|
|
|
- :key="conindex"
|
|
|
- class="strockplay-newWord"
|
|
|
- @click="writeWord(conItem, item.pinyin)"
|
|
|
- >
|
|
|
- <Strockplayredline
|
|
|
- :Book_text="conItem"
|
|
|
- :play-storkes="true"
|
|
|
- :target-div="
|
|
|
- 'bwcHanziIntp' +
|
|
|
- index +
|
|
|
- conItem +
|
|
|
- conindex +
|
|
|
- indexStr +
|
|
|
- judgeAnswer
|
|
|
- "
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="conindex < item.con.length - 1"
|
|
|
- class="bwc-line"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="blank-item" @click="freeWrite('', index, 0)">
|
|
|
- <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-else-if="item.imgOrText == 'image'">
|
|
|
- <div
|
|
|
- v-for="(imgItem, imgIndex) in item.img_list"
|
|
|
- :key="imgIndex"
|
|
|
- class="img-box"
|
|
|
- @click="freeWrite(imgItem.id, imgIndex, 0)"
|
|
|
- >
|
|
|
- <el-image :src="imgItem.id" fit="scale-down" class="img_url">
|
|
|
- <div slot="placeholder" class="image-slot">
|
|
|
- <img src="../../../assets/common/icon-imgloading.png" />
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <template v-if="item.type && item.type.indexOf('lm') > -1">
|
|
|
<div
|
|
|
- v-for="(items, indexs) in item.imgarr"
|
|
|
- :key="indexs"
|
|
|
- class="con-box"
|
|
|
+ class="strockplay-newWord"
|
|
|
+ @click="freeWrite(items, index, indexs)"
|
|
|
>
|
|
|
- <div
|
|
|
- class="strockplay-newWord"
|
|
|
- @click="freeWrite(items, index, indexs)"
|
|
|
- >
|
|
|
- <!-- <div
|
|
|
+ <!-- <div
|
|
|
@click.stop="playHanzi(index, indexs, items)"
|
|
|
:class="[
|
|
|
'strock-play-box',
|
|
|
@@ -206,32 +118,21 @@
|
|
|
: 'red-border',
|
|
|
]"
|
|
|
></div> -->
|
|
|
- <img
|
|
|
- v-if="!playStatus && items && items.strokes_image_url"
|
|
|
- :src="items.strokes_image_url"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <!-- <FreeWriteQP
|
|
|
+ <img
|
|
|
+ v-if="!playStatus && items && items.strokes_image_url"
|
|
|
+ :src="items.strokes_image_url"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <!-- <FreeWriteQP
|
|
|
:id="'cans' + index + indexs"
|
|
|
:ref="'cans'"
|
|
|
:height="256"
|
|
|
:width="256"
|
|
|
/> -->
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <span
|
|
|
- v-if="item.en"
|
|
|
- class="en"
|
|
|
- :style="{
|
|
|
- marginLeft: item.en.length < 12 ? '' : enMargin + 'px',
|
|
|
- textAlign: item.en.length < 12 ? 'center' : 'left',
|
|
|
- width: item.en.length < 12 ? pinyinWidth + 'px' : ''
|
|
|
- }"
|
|
|
- >{{ item.en }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
@@ -241,7 +142,7 @@
|
|
|
:modal-append-to-body="true"
|
|
|
:append-to-body="true"
|
|
|
:lock-scroll="true"
|
|
|
- :width="isPhone ? '100%' : '504px'"
|
|
|
+ :width="'100%'"
|
|
|
class="practiceBox practiceBoxStrock"
|
|
|
v-if="isPraShow"
|
|
|
>
|
|
|
@@ -305,9 +206,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Strockplayredline from "../preview/components/Strockplayredline.vue";
|
|
|
-import Practice from "../preview/components/Practice.vue";
|
|
|
-import FreewriteLettle from "../preview/components/FreewriteLettle.vue";
|
|
|
+import Strockplayredline from "../phonePreview/components/Strockplayredline.vue";
|
|
|
+import Practice from "../phonePreview/components/Practice.vue";
|
|
|
+import FreewriteLettle from "../phonePreview/components/FreewriteLettle.vue";
|
|
|
import { getContentFile, LearnWebSI } from "../../../api/ajax";
|
|
|
import FreeWriteQP from "./components/FreewriteWord.vue";
|
|
|
export default {
|
|
|
@@ -319,7 +220,7 @@ export default {
|
|
|
"currentTreeID",
|
|
|
"TaskModel",
|
|
|
"judgeAnswer",
|
|
|
- "isPhone"
|
|
|
+ "baseSizePhone"
|
|
|
],
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -570,23 +471,30 @@ export default {
|
|
|
.item-box {
|
|
|
padding-bottom: 8px;
|
|
|
padding: 0 4px;
|
|
|
- background: #f7f7f7;
|
|
|
+ // background: #f7f7f7;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 8px;
|
|
|
.item-pre {
|
|
|
- padding: 9px 20px;
|
|
|
+ padding: 15px;
|
|
|
}
|
|
|
.pinyin {
|
|
|
text-align: center;
|
|
|
display: block;
|
|
|
- margin-bottom: 4px;
|
|
|
+ margin-bottom: 2px;
|
|
|
font-family: Sans-GBNPC;
|
|
|
color: #000;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
.en {
|
|
|
display: block;
|
|
|
- margin-top: 4px;
|
|
|
font-family: robot, "alabo";
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -2px;
|
|
|
+ left: 0;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
.item {
|
|
|
box-sizing: border-box;
|
|
|
@@ -595,6 +503,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-flow: wrap;
|
|
|
align-items: flex-end;
|
|
|
+ gap: 8px;
|
|
|
> p {
|
|
|
white-space: nowrap;
|
|
|
:nth-child(1) {
|
|
|
@@ -630,15 +539,12 @@ export default {
|
|
|
}
|
|
|
.con-box {
|
|
|
width: 66px;
|
|
|
- height: 66px;
|
|
|
- display: flex;
|
|
|
- border: 1px solid #de4444;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- margin: 0 auto;
|
|
|
+ // height: 66px;
|
|
|
+ // display: flex;
|
|
|
+ // margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
.img-box {
|
|
|
- background: #fff url("../../../assets/NPC/chinaTianRed.png") center
|
|
|
- no-repeat;
|
|
|
+ background: url("../../../assets/NPC/chinaTianRed.png") center no-repeat;
|
|
|
background-size: cover;
|
|
|
.img_url {
|
|
|
width: 64px;
|
|
|
@@ -647,10 +553,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.strockplay-newWord {
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
- background: #fff url("../../../assets/NPC/chinaTianRed.png") center
|
|
|
- no-repeat;
|
|
|
+ border: 1px solid #de4444;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 66px;
|
|
|
+ height: 66px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: url("../../../assets/NPC/chinaTianRed.png") center no-repeat;
|
|
|
background-size: cover;
|
|
|
position: relative;
|
|
|
.strock-play-box {
|
|
|
@@ -685,26 +593,6 @@ export default {
|
|
|
padding-top: 0px;
|
|
|
}
|
|
|
}
|
|
|
- &-phone {
|
|
|
- .item-box {
|
|
|
- .item-pre {
|
|
|
- padding: 10px 4px;
|
|
|
- }
|
|
|
- .item-info {
|
|
|
- .pinyin {
|
|
|
- width: 66px !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .con-box {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .item {
|
|
|
- margin-top: 10px;
|
|
|
- gap: 10px;
|
|
|
- justify-content: start;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.NPC-Big-Book-preview-brown {
|
|
|
.NewWordShow {
|
|
|
@@ -715,18 +603,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.con-box {
|
|
|
- border: 1px solid #bf875e;
|
|
|
.img-box {
|
|
|
- background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
|
|
|
+ background: url("../../../assets/NPC/chinaTianYellow.png") center
|
|
|
no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
.blank-item {
|
|
|
- background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
|
|
|
+ background: url("../../../assets/NPC/chinaTianYellow.png") center
|
|
|
no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
}
|
|
|
+ .strockplay-newWord {
|
|
|
+ border: 1px solid #bf875e;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -739,17 +629,19 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.con-box {
|
|
|
- border: 1px solid #24b99e;
|
|
|
.img-box {
|
|
|
- background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
|
|
|
+ background: url("../../../assets/NPC/chinaTianGreen.png") center
|
|
|
no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
.blank-item {
|
|
|
- background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
|
|
|
+ background: url("../../../assets/NPC/chinaTianGreen.png") center
|
|
|
no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
+ .strockplay-newWord {
|
|
|
+ border: 1px solid #24b99e;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -757,50 +649,56 @@ export default {
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.NPC-Big-Book-preview-red {
|
|
|
- .strockplay-newWord {
|
|
|
- .strock-play-box {
|
|
|
- width: 16px !important;
|
|
|
- height: 16px !important;
|
|
|
- right: -1px;
|
|
|
- top: 0;
|
|
|
- background: url("../../../assets/NPC/strock-play-red-click.png") center
|
|
|
- no-repeat;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- .character-target-div {
|
|
|
- // background-color: initial;
|
|
|
+ .NewWordShow-phone {
|
|
|
+ .strockplay-newWord {
|
|
|
+ .strock-play-box {
|
|
|
+ width: 20px !important;
|
|
|
+ height: 20px !important;
|
|
|
+ right: -1px;
|
|
|
+ top: 0;
|
|
|
+ background: url("../../../assets/NPC/strock-play-red-click.png") right
|
|
|
+ top no-repeat;
|
|
|
+ background-size: 16px;
|
|
|
+ }
|
|
|
+ .character-target-div {
|
|
|
+ // background-color: initial;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.NPC-Big-Book-preview-green {
|
|
|
- .strockplay-newWord {
|
|
|
- .strock-play-box {
|
|
|
- width: 16px !important;
|
|
|
- height: 16px !important;
|
|
|
- right: -1px;
|
|
|
- top: 0;
|
|
|
- background: url("../../../assets/NPC/strock-play-green-click.png") center
|
|
|
- no-repeat;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- .character-target-div {
|
|
|
- // background-color: initial;
|
|
|
+ .NewWordShow-phone {
|
|
|
+ .strockplay-newWord {
|
|
|
+ .strock-play-box {
|
|
|
+ width: 16px !important;
|
|
|
+ height: 16px !important;
|
|
|
+ right: -1px;
|
|
|
+ top: 0;
|
|
|
+ background: url("../../../assets/NPC/strock-play-green-click.png")
|
|
|
+ center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .character-target-div {
|
|
|
+ // background-color: initial;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.NPC-Big-Book-preview-brown {
|
|
|
- .strockplay-newWord {
|
|
|
- .strock-play-box {
|
|
|
- width: 16px !important;
|
|
|
- height: 16px !important;
|
|
|
- right: -1px;
|
|
|
- top: 0;
|
|
|
- background: url("../../../assets/NPC/strock-play-yellow-click.png") center
|
|
|
- no-repeat;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- .character-target-div {
|
|
|
- // background-color: initial;
|
|
|
+ .NewWordShow-phone {
|
|
|
+ .strockplay-newWord {
|
|
|
+ .strock-play-box {
|
|
|
+ width: 16px !important;
|
|
|
+ height: 16px !important;
|
|
|
+ right: -1px;
|
|
|
+ top: 0;
|
|
|
+ background: url("../../../assets/NPC/strock-play-yellow-click.png")
|
|
|
+ center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .character-target-div {
|
|
|
+ // background-color: initial;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
natasha