|
|
@@ -1,8 +1,9 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="practice practiceSingleNPC">
|
|
|
- <img class="close-icon" @click="changePraShow()" />
|
|
|
+ <i class="el-icon-close close-icon" @click="changePraShow()"></i>
|
|
|
<div class="right-content">
|
|
|
+ <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
|
|
|
<div class="right-strockred">
|
|
|
<template v-if="!hasPlay && data && data.strokes_image_url">
|
|
|
<img class="img" :src="data.strokes_image_url" alt="" />
|
|
|
@@ -18,7 +19,9 @@
|
|
|
:width="width"
|
|
|
class="vueEsign"
|
|
|
/>
|
|
|
- <a class="clean-btn" @click="resetHuahua"></a>
|
|
|
+ <a class="clean-btn" @click="resetHuahua">
|
|
|
+ <SvgIcon icon-class="reset" class="reset-btn" />
|
|
|
+ </a>
|
|
|
</div>
|
|
|
<ul class="nav-list">
|
|
|
<li :class="currenHzData && currenHzData.history ? '' : 'disabled'" @click="play()">播放</li>
|
|
|
@@ -34,7 +37,6 @@ export default {
|
|
|
components: {
|
|
|
FreeWriteQP,
|
|
|
},
|
|
|
- // props: ['currentTreeID', 'currentHz', 'currenHzData', 'closeifFreeShow', 'rowIndex', 'colIndex'],
|
|
|
props: {
|
|
|
currentTreeID: {
|
|
|
type: String,
|
|
|
@@ -106,7 +108,7 @@ export default {
|
|
|
methods: {
|
|
|
play() {
|
|
|
let _this = this;
|
|
|
- if (this.currenHzData.history) {
|
|
|
+ if (this.currenHzData && this.currenHzData.history) {
|
|
|
if (this.hasPlay) {
|
|
|
this.$message.warning('请等待播放完成');
|
|
|
return;
|
|
|
@@ -142,11 +144,6 @@ export default {
|
|
|
let color = _this.colorsList[index];
|
|
|
_this.hanzicolor = color;
|
|
|
},
|
|
|
- // changePen(index) {
|
|
|
- // let _this = this;
|
|
|
- // _this.penIndex = index;
|
|
|
- // _this.hanziweight = _this.weightList[_this.penIndex];
|
|
|
- // },
|
|
|
changeLearnMode(mode) {
|
|
|
this.learn_mode = mode;
|
|
|
},
|
|
|
@@ -180,6 +177,7 @@ export default {
|
|
|
},
|
|
|
// 不保存到记录列表
|
|
|
handleWriteImg() {
|
|
|
+ if (this.$refs.esign.history.length === 0) return;
|
|
|
this.$refs.esign.generate().then((res) => {
|
|
|
let Book_img = res.replace('data:image/png;base64,', '');
|
|
|
let write_img = `data:image/png;base64,${Book_img}`;
|
|
|
@@ -213,14 +211,6 @@ export default {
|
|
|
};
|
|
|
this.$emit('changeCurQue', answer, this.colIndex);
|
|
|
|
|
|
- // let data = {
|
|
|
- // courseware_id: this.currentTreeID,
|
|
|
- // hz: this.currentHz,
|
|
|
- // strokes_content: JSON.stringify(this.$refs.esign.history),
|
|
|
- // strokes_image_base64: Book_img,
|
|
|
- // };
|
|
|
- // let MethodName = 'teaching-practice_manager-SaveMyHZHandwrittenRecord';
|
|
|
- // LearnWebSI(MethodName, data).then((res) => {
|
|
|
this.$message.success('保存成功！');
|
|
|
let obj = {
|
|
|
hz_handwritten_record_id: res.hz_handwritten_record_id,
|
|
|
@@ -228,7 +218,6 @@ export default {
|
|
|
strokes_image_url: write_img,
|
|
|
};
|
|
|
this.$emit('closeIfFreeShow', obj, this.rowIndex, this.colIndex);
|
|
|
- // });
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.$message.warning('请先书写在保存');
|
|
|
@@ -257,15 +246,12 @@ export default {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin: 0 4px;
|
|
|
+ color: $text-color;
|
|
|
cursor: pointer;
|
|
|
|
|
|
- // background: url('../../../../assets/icon/Undo-16-disable-Black.png') center no-repeat;
|
|
|
- // background-size: cover;
|
|
|
- // display: block;
|
|
|
- // &:hover {
|
|
|
- // background: url('../../../../assets/icon/Undo-16-normal-Black.png') center no-repeat;
|
|
|
- // background-size: cover;
|
|
|
- // }
|
|
|
+ &:hover {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.close-icon {
|
|
|
@@ -354,33 +340,25 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .character-target-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ left: 16px;
|
|
|
+ width: 256px;
|
|
|
+ height: 250px;
|
|
|
+ color: #dedede;
|
|
|
+ }
|
|
|
+
|
|
|
.right-strockred {
|
|
|
position: relative;
|
|
|
width: 256px;
|
|
|
height: 256px;
|
|
|
overflow: hidden;
|
|
|
-
|
|
|
- // background: #fff url('../../../../assets/NPC/chinaTianRed.png') center no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
border-radius: 8px;
|
|
|
|
|
|
.img {
|
|
|
position: absolute;
|
|
|
}
|
|
|
-
|
|
|
- // .strock-play-box {
|
|
|
- // position: absolute;
|
|
|
- // width: 32px;
|
|
|
- // height: 32px;
|
|
|
- // background: #fff
|
|
|
- // url("../../../../assets/NPC/strock-play-red-click-big.png") center
|
|
|
- // no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // cursor: pointer;
|
|
|
- // right: 0;
|
|
|
- // top: 0;
|
|
|
- // z-index: 2;
|
|
|
- // }
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
|
@@ -391,99 +369,6 @@ export default {
|
|
|
justify-content: flex-end;
|
|
|
width: 100%;
|
|
|
padding-right: 40px;
|
|
|
-
|
|
|
- .pen-colors {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- .write-icon-3 {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .colors-list {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
-
|
|
|
- > li {
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin: 0 4px;
|
|
|
- cursor: pointer;
|
|
|
- background: #fff;
|
|
|
- border: 2px solid #fff;
|
|
|
- border-radius: 50%;
|
|
|
-
|
|
|
- > span {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- border-radius: 100%;
|
|
|
-
|
|
|
- &.color-item0 {
|
|
|
- background: #404040;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item1 {
|
|
|
- background: #f65d4d;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item2 {
|
|
|
- background: #19b068;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item3 {
|
|
|
- background: #52a1ea;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item4 {
|
|
|
- background: #ff8c49;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item-active0 {
|
|
|
- border: 2px solid #404040;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item-active1 {
|
|
|
- border: 2px solid #f65d4d;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item-active2 {
|
|
|
- border: 2px solid #19b068;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item-active3 {
|
|
|
- border: 2px solid #52a1ea;
|
|
|
- }
|
|
|
-
|
|
|
- &.color-item-active4 {
|
|
|
- border: 2px solid #ff8c49;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pen {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- > img {
|
|
|
- width: 21px;
|
|
|
- height: 19px;
|
|
|
- margin-left: 4px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -524,9 +409,6 @@ export default {
|
|
|
border: 1px solid rgba(0, 0, 0, 10%);
|
|
|
border-radius: 4px;
|
|
|
|
|
|
- // &:nth-child(2) {
|
|
|
- // margin: 0 24px;
|
|
|
- // }
|
|
|
img {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
@@ -546,9 +428,6 @@ export default {
|
|
|
font-weight: 600;
|
|
|
line-height: 34px;
|
|
|
color: #ba7d21;
|
|
|
-
|
|
|
- /* identical to box height */
|
|
|
-
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
natasha
