|
|
@@ -0,0 +1,229 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="strockplayRedInner">
|
|
|
+ <!-- <div
|
|
|
+ @click="playHanzi"
|
|
|
+ :class="[
|
|
|
+ 'strock-play-box',
|
|
|
+ themeColor == 'green'
|
|
|
+ ? 'green-border'
|
|
|
+ : themeColor == 'red'
|
|
|
+ ? 'red-border'
|
|
|
+ : themeColor == 'brown'
|
|
|
+ ? 'brown-border'
|
|
|
+ : 'blue-border',
|
|
|
+ ]"
|
|
|
+ v-if="playStorkes"
|
|
|
+ ></div> -->
|
|
|
+ <template v-if="Book_text != '〇'">
|
|
|
+ <!-- <svg-icon
|
|
|
+ icon-class="play-stroke-icon"
|
|
|
+ :className="tianColor ? 'strock-play-red' : 'strock-play-box'"
|
|
|
+ v-if="playStorkes"
|
|
|
+ @click="playHanzi"
|
|
|
+ /> -->
|
|
|
+ <img
|
|
|
+ class="strock-play-red"
|
|
|
+ src="../../assets/teacherdev/strock-play-red-click-big.png"
|
|
|
+ alt=""
|
|
|
+ @click="playHanzi"
|
|
|
+ />
|
|
|
+ <div :id="targetDiv" class="character-target-div"></div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span class="book-text">{{ Book_text }}</span>
|
|
|
+ </template>
|
|
|
+ <img
|
|
|
+ class="tian-bg"
|
|
|
+ src="../../assets/teacherdev/chinaTianRed.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <!-- <svg-icon
|
|
|
+ icon-class="tian"
|
|
|
+ :className="tianColor ? 'tian-bg-red' : 'tian-bg'"
|
|
|
+ /> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getLogin } from "@/api/api";
|
|
|
+const HanziWriter = require("hanzi-writer");
|
|
|
+export default {
|
|
|
+ name: "Strockplayredline",
|
|
|
+ components: {},
|
|
|
+ props: [
|
|
|
+ "targetDiv",
|
|
|
+ "Book_text",
|
|
|
+ "playStorkes",
|
|
|
+ "strokeColor",
|
|
|
+ "wordNum",
|
|
|
+ "themeColor",
|
|
|
+ "tianColor",
|
|
|
+ "curItem",
|
|
|
+ "type",
|
|
|
+ "judgeAnswer",
|
|
|
+ "isHighlight",
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ writer: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ targetDiv: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ if (val != oldVal) {
|
|
|
+ let _this = this;
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ _this.initHanziwrite();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ initHanziwrite() {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.Book_text == "〇") return false;
|
|
|
+ _this.writer = null;
|
|
|
+ //var ren = require("hanzi-writer-data/国");
|
|
|
+ _this.writer = HanziWriter.default.create(
|
|
|
+ _this.targetDiv,
|
|
|
+ _this.Book_text,
|
|
|
+ {
|
|
|
+ padding: 5,
|
|
|
+ showOutline: true,
|
|
|
+ strokeColor: _this.isHighlight ? "#AAAAAA" : "#000000",
|
|
|
+ radicalColor: _this.isHighlight ? "#000000" : "#AAAAAA",
|
|
|
+ charDataLoader: function (char, onComplete) {
|
|
|
+ if (_this.isHighlight) {
|
|
|
+ let charData = _this.handleData();
|
|
|
+ onComplete(charData);
|
|
|
+ } else {
|
|
|
+ let charData = JSON.parse(JSON.stringify(_this.curItem.hz_json));
|
|
|
+ charData.radStrokes = [];
|
|
|
+ onComplete(charData);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ handleData() {
|
|
|
+ if (this.curItem.hz_json) {
|
|
|
+ let charData = JSON.parse(JSON.stringify(this.curItem.hz_json));
|
|
|
+ charData.radStrokes = [];
|
|
|
+ for (let i = 0; i < this.judgeAnswer; i++) {
|
|
|
+ charData.radStrokes.push(i);
|
|
|
+ }
|
|
|
+ return charData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playHanzi(event) {
|
|
|
+ let _this = this;
|
|
|
+ _this.writer.animateCharacter();
|
|
|
+ event.stopPropagation();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ let _this = this;
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ _this.initHanziwrite();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+// @import "../common.scss";
|
|
|
+.strockplayRedInner {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ width: 128px; //444px
|
|
|
+ height: 128px; //480px
|
|
|
+}
|
|
|
+
|
|
|
+.character-target-div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 99999;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ border: 2px solid #de4444;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.strock-play-box {
|
|
|
+ position: absolute;
|
|
|
+ right: -2px;
|
|
|
+ top: -2px;
|
|
|
+ z-index: 998;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ // color: #346CDA;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.strock-play-red {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ color: #d47064;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.tian-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ stroke: rgba(157, 202, 255, 0.2);
|
|
|
+}
|
|
|
+.tian-bg-red {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ stroke: rgba(212, 112, 100, 0.2);
|
|
|
+}
|
|
|
+.animate-butto {
|
|
|
+ width: 240px;
|
|
|
+ height: 160px;
|
|
|
+ font-size: 28px;
|
|
|
+}
|
|
|
+.book-text {
|
|
|
+ font-size: 96px;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 128px;
|
|
|
+}
|
|
|
+</style>
|
qinpeng
