|
|
@@ -1,77 +1,145 @@
|
|
|
<template>
|
|
|
<div class="writeTable" v-if="data">
|
|
|
<div class="writeTop">
|
|
|
- <div class="writeTop-row" v-for="(itemR,indexR) in data" :key="indexR" :style="{marginBottom:dataConfig.marginBottom}">
|
|
|
- <div class="writeTop-item" :class="[indexI!==0?'writeTop-item-noLeft':'']" v-for="(itemI,indexI) in itemR" :key="indexI" :style="{width:dataConfig.width,height:dataConfig.width,borderColor:dataConfig.borderColor}">
|
|
|
- <template v-if="itemI&&itemI.con&&!itemI.write&&!itemI.answer&&!itemI.miaoRed">
|
|
|
- <Strockplay
|
|
|
- v-if="'writeTop-item-' + pageNumber + '-' + indexR + '-' + indexI + type"
|
|
|
- className="adult-strockplay"
|
|
|
- :strokePlayColor="dataConfig.borderColor"
|
|
|
- :Book_text="itemI.con"
|
|
|
- :playStorkes="dataConfig.playStorkes"
|
|
|
- :strokeColor="dataConfig.fontColor"
|
|
|
- :palyWidth="dataConfig.playWidth"
|
|
|
- :BoxbgType="dataConfig.BoxbgType"
|
|
|
- :targetDiv="'writeTop-item-' + pageNumber + '-' + indexR + '-' + indexI + type"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else-if="itemI&&itemI.answer">
|
|
|
- <StrockplayredlineTable
|
|
|
- :Book_text="itemI.con"
|
|
|
- :playStorkes="false"
|
|
|
- :strokeColorgray="dataConfig.miaoRedBgcolor"
|
|
|
- :strokeColor="dataConfig.fontColor"
|
|
|
- :strokeNumber="itemI.answer"
|
|
|
- :curItem="itemI.hzDetail"
|
|
|
- :BoxbgType="dataConfig.BoxbgType"
|
|
|
- :targetDiv="
|
|
|
- 'write-item-miaohong-' +
|
|
|
- pageNumber + '-' + indexR + '-' + indexI + type + itemI.con
|
|
|
- "
|
|
|
- :targetDivGray="'write-item-miaohong-gray-'+
|
|
|
- pageNumber + '-' + indexR + '-' + indexI + type + itemI.con"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else-if="itemI&&itemI.miaoRed">
|
|
|
- <Strockred
|
|
|
- v-if="'write-item-' + pageNumber + '-' + indexR + '-' + indexI + type"
|
|
|
- className="adult-strockplay"
|
|
|
- :strokePlayColor="dataConfig.borderColor"
|
|
|
- :Book_text="itemI.con"
|
|
|
- :curItem="itemI.hzDetail"
|
|
|
- :hanzicolor="dataConfig.miaoRedBgcolor"
|
|
|
- :drawingColor="dataConfig.writeColor"
|
|
|
- :BoxbgType="dataConfig.BoxbgType"
|
|
|
- :targetDiv="'write-item-' + pageNumber + '-' + indexR + '-' + indexI + type + itemI.con"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <div v-else-if="itemI" class="tian-div" @click="freeWrite(itemI,indexR,indexI)">
|
|
|
- <svg-icon
|
|
|
- icon-class="tian"
|
|
|
- className="tian"
|
|
|
- v-if="dataConfig.BoxbgType==0"
|
|
|
- :style="{color:'#DEDEDE'}"
|
|
|
- />
|
|
|
- <svg-icon
|
|
|
- icon-class="mi"
|
|
|
- className="tian"
|
|
|
- v-if="dataConfig.BoxbgType==1"
|
|
|
- :style="{color:'#DEDEDE'}"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="itemI&&itemI.strokes_image_url"
|
|
|
- :src="itemI.strokes_image_url"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="writeTop-row"
|
|
|
+ v-for="(itemR, indexR) in data"
|
|
|
+ :key="indexR"
|
|
|
+ :style="{ marginBottom: dataConfig.marginBottom }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="writeTop-item"
|
|
|
+ :class="[indexI !== 0 ? 'writeTop-item-noLeft' : '']"
|
|
|
+ v-for="(itemI, indexI) in itemR"
|
|
|
+ :key="indexI"
|
|
|
+ :style="{
|
|
|
+ width: dataConfig.width,
|
|
|
+ height: dataConfig.width,
|
|
|
+ borderColor: dataConfig.borderColor,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ itemI &&
|
|
|
+ itemI.con &&
|
|
|
+ !itemI.write &&
|
|
|
+ !itemI.answer &&
|
|
|
+ !itemI.miaoRed
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <Strockplay
|
|
|
+ v-if="
|
|
|
+ 'writeTop-item-' +
|
|
|
+ pageNumber +
|
|
|
+ '-' +
|
|
|
+ indexR +
|
|
|
+ '-' +
|
|
|
+ indexI +
|
|
|
+ type
|
|
|
+ "
|
|
|
+ className="adult-strockplay"
|
|
|
+ :strokePlayColor="dataConfig.borderColor"
|
|
|
+ :Book_text="itemI.con"
|
|
|
+ :playStorkes="dataConfig.playStorkes"
|
|
|
+ :strokeColor="dataConfig.fontColor"
|
|
|
+ :palyWidth="dataConfig.playWidth"
|
|
|
+ :BoxbgType="dataConfig.BoxbgType"
|
|
|
+ :targetDiv="
|
|
|
+ 'writeTop-item-' +
|
|
|
+ pageNumber +
|
|
|
+ '-' +
|
|
|
+ indexR +
|
|
|
+ '-' +
|
|
|
+ indexI +
|
|
|
+ type
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="itemI && itemI.answer">
|
|
|
+ <StrockplayredlineTable
|
|
|
+ :Book_text="itemI.con"
|
|
|
+ :playStorkes="false"
|
|
|
+ :strokeColorgray="dataConfig.miaoRedBgcolor"
|
|
|
+ :strokeColor="dataConfig.fontColor"
|
|
|
+ :strokeNumber="itemI.answer"
|
|
|
+ :curItem="itemI.hzDetail"
|
|
|
+ :BoxbgType="dataConfig.BoxbgType"
|
|
|
+ :targetDiv="
|
|
|
+ 'write-item-miaohong-' +
|
|
|
+ pageNumber +
|
|
|
+ '-' +
|
|
|
+ indexR +
|
|
|
+ '-' +
|
|
|
+ indexI +
|
|
|
+ type +
|
|
|
+ itemI.con
|
|
|
+ "
|
|
|
+ :targetDivGray="
|
|
|
+ 'write-item-miaohong-gray-' +
|
|
|
+ pageNumber +
|
|
|
+ '-' +
|
|
|
+ indexR +
|
|
|
+ '-' +
|
|
|
+ indexI +
|
|
|
+ type +
|
|
|
+ itemI.con
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="itemI && itemI.miaoRed">
|
|
|
+ <Strockred
|
|
|
+ v-if="
|
|
|
+ 'write-item-' + pageNumber + '-' + indexR + '-' + indexI + type
|
|
|
+ "
|
|
|
+ className="adult-strockplay"
|
|
|
+ :strokePlayColor="dataConfig.borderColor"
|
|
|
+ :Book_text="itemI.con"
|
|
|
+ :curItem="itemI.hzDetail"
|
|
|
+ :hanzicolor="dataConfig.miaoRedBgcolor"
|
|
|
+ :drawingColor="dataConfig.writeColor"
|
|
|
+ :BoxbgType="dataConfig.BoxbgType"
|
|
|
+ :targetDiv="
|
|
|
+ 'write-item-' +
|
|
|
+ pageNumber +
|
|
|
+ '-' +
|
|
|
+ indexR +
|
|
|
+ '-' +
|
|
|
+ indexI +
|
|
|
+ type +
|
|
|
+ itemI.con
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ v-else-if="itemI"
|
|
|
+ class="tian-div"
|
|
|
+ @click="freeWrite(itemI, indexR, indexI)"
|
|
|
+ >
|
|
|
+ <svg-icon
|
|
|
+ icon-class="tian"
|
|
|
+ className="tian"
|
|
|
+ v-if="dataConfig.BoxbgType == 0"
|
|
|
+ :style="{ color: '#DEDEDE' }"
|
|
|
+ />
|
|
|
+ <svg-icon
|
|
|
+ icon-class="mi"
|
|
|
+ className="tian"
|
|
|
+ v-if="dataConfig.BoxbgType == 1"
|
|
|
+ :style="{ color: '#DEDEDE' }"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="itemI && itemI.strokes_image_url"
|
|
|
+ :src="itemI.strokes_image_url"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="writeBottom">
|
|
|
- <span>BLCUP 全球国际中文教学云平台</span>
|
|
|
- <b>{{pageNumber + '/' + totalNumber}}</b>
|
|
|
- <a>www.chinesedu.com</a>
|
|
|
+ <span>BLCUP 全球国际中文教学云平台</span>
|
|
|
+ <b>{{ pageNumber + "/" + totalNumber }}</b>
|
|
|
+ <a>www.chinesedu.com</a>
|
|
|
</div>
|
|
|
<div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
|
|
|
<FreewriteLettle
|
|
|
@@ -91,9 +159,9 @@
|
|
|
<script>
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
import StrockplayredlineTable from "../../components/corpus/StrockplayredlineTable.vue";
|
|
|
-import Strockplay from "../../components/corpus/Strockplay.vue"
|
|
|
-import Strockred from "../../components/corpus/Strockred.vue"
|
|
|
-import FreewriteLettle from "../../components/corpus/FreewriteLettle.vue"
|
|
|
+import Strockplay from "../../components/corpus/Strockplay.vue";
|
|
|
+import Strockred from "../../components/corpus/Strockred.vue";
|
|
|
+import FreewriteLettle from "../../components/corpus/FreewriteLettle.vue";
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -101,21 +169,15 @@ export default {
|
|
|
StrockplayredlineTable,
|
|
|
Strockplay,
|
|
|
Strockred,
|
|
|
- FreewriteLettle
|
|
|
+ FreewriteLettle,
|
|
|
},
|
|
|
- props: [
|
|
|
- "dataConfig",
|
|
|
- "data",
|
|
|
- "pageNumber",
|
|
|
- "totalNumber",
|
|
|
- "type"
|
|
|
- ],
|
|
|
+ props: ["dataConfig", "data", "pageNumber", "totalNumber", "type"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- ifFreeShow: false,
|
|
|
- activeIndex: null,
|
|
|
- activeColIndex: null,
|
|
|
+ ifFreeShow: false,
|
|
|
+ activeIndex: null,
|
|
|
+ activeColIndex: null,
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -135,28 +197,26 @@ export default {
|
|
|
this.ifFreeShow = true;
|
|
|
this.activeIndex = row;
|
|
|
this.activeColIndex = col;
|
|
|
- // this.currentHz = this.curQue.option[indexs].rightOption[rightindex].con;
|
|
|
- if(item){
|
|
|
+ // this.currentHz = this.curQue.option[indexs].rightOption[rightindex].con;
|
|
|
+ if (item) {
|
|
|
this.currenHzData = item;
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.currenHzData = {};
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
- ExerciseChangeCurQue(answer, rowIndex, colIndex ) {
|
|
|
+ ExerciseChangeCurQue(answer, rowIndex, colIndex) {
|
|
|
if (answer) {
|
|
|
- this.data[rowIndex][colIndex].strokes_image_url = answer.strokes_image_url;
|
|
|
- this.data[rowIndex][colIndex].history = answer.history
|
|
|
+ this.data[rowIndex][colIndex].strokes_image_url =
|
|
|
+ answer.strokes_image_url;
|
|
|
+ this.data[rowIndex][colIndex].history = answer.history;
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {
|
|
|
- },
|
|
|
+ created() {},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
//生命周期-创建之前
|
|
|
beforeCreated() {},
|
|
|
//生命周期-挂载之前
|
|
|
@@ -174,93 +234,93 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.writeTable{
|
|
|
- background: #FFFFFF;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
- width: 595px;
|
|
|
- height: 842px;
|
|
|
- box-sizing: border-box;
|
|
|
- .writeTop{
|
|
|
- height: 732px;
|
|
|
- padding-top: 48px;
|
|
|
- .writeTop-row{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- .writeTop-item{
|
|
|
- border: 1px solid #DE4444;
|
|
|
- &.writeTop-item-noLeft{
|
|
|
- border-left: none;
|
|
|
- }
|
|
|
- }
|
|
|
+.writeTable {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ width: 595px;
|
|
|
+ height: 842px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .writeTop {
|
|
|
+ height: 732px;
|
|
|
+ padding-top: 48px;
|
|
|
+ .writeTop-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .writeTop-item {
|
|
|
+ border: 1px solid #de4444;
|
|
|
+ &.writeTop-item-noLeft {
|
|
|
+ border-left: none;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- .writeBottom{
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 38px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- span{
|
|
|
- font-weight: 500;
|
|
|
- font-size: 10px;
|
|
|
- line-height: 14px;
|
|
|
- color: #000000;
|
|
|
- opacity: 0.2;
|
|
|
- }
|
|
|
- b{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 14px;
|
|
|
- color: #000000;
|
|
|
- width: 60px;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- margin-left: -30px;
|
|
|
- top: 0px;
|
|
|
- }
|
|
|
- a{
|
|
|
- font-weight: 500;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 14px;
|
|
|
- color: #000000;
|
|
|
- opacity: 0.2;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .writeBottom {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 38px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 0.2;
|
|
|
}
|
|
|
- .tian-div{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- .tian{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
+ b {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #000000;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -30px;
|
|
|
+ top: 0px;
|
|
|
}
|
|
|
- .practiceBox {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 100100;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background: rgba(0, 0, 0, 0.19);
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- &.practiceBoxStrock {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding-top: 0px;
|
|
|
- }
|
|
|
+ a {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tian-div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .tian {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .practiceBox {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100100;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.19);
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ &.practiceBoxStrock {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 0px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
gcj