|  | @@ -1,13 +1,18 @@
 | 
	
		
			
				|  |  |  <!--  -->
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  |    <div class="strockplayInner" :class="className">
 | 
	
		
			
				|  |  | -    <div @click="playHanzi" class="strock-play-box" :style="{width:palyWidth,height:palyWidth}" v-if="playStorkes">
 | 
	
		
			
				|  |  | +    <div
 | 
	
		
			
				|  |  | +      @click="playHanzi"
 | 
	
		
			
				|  |  | +      class="strock-play-box"
 | 
	
		
			
				|  |  | +      :style="{ width: palyWidth, height: palyWidth }"
 | 
	
		
			
				|  |  | +      v-if="playStorkes"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  |        <svg-icon
 | 
	
		
			
				|  |  |          icon-class="playStorkes"
 | 
	
		
			
				|  |  |          className="playStorkes-btn"
 | 
	
		
			
				|  |  |          v-if="playStorkes"
 | 
	
		
			
				|  |  |          @click="playHanzi"
 | 
	
		
			
				|  |  | -        :style="{color:strokePlayColor,width:palyWidth,height:palyWidth}"
 | 
	
		
			
				|  |  | +        :style="{ color: strokePlayColor, width: palyWidth, height: palyWidth }"
 | 
	
		
			
				|  |  |        />
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |      <div
 | 
	
	
		
			
				|  | @@ -15,18 +20,18 @@
 | 
	
		
			
				|  |  |        :id="targetDiv"
 | 
	
		
			
				|  |  |        class="character-target-div"
 | 
	
		
			
				|  |  |      >
 | 
	
		
			
				|  |  | -        <svg-icon
 | 
	
		
			
				|  |  | -            icon-class="tian"
 | 
	
		
			
				|  |  | -            className="tian-bg"
 | 
	
		
			
				|  |  | -            v-if="BoxbgType==0"
 | 
	
		
			
				|  |  | -            :style="{color:'#DEDEDE'}"
 | 
	
		
			
				|  |  | -        />
 | 
	
		
			
				|  |  | -        <svg-icon
 | 
	
		
			
				|  |  | -            icon-class="mi"
 | 
	
		
			
				|  |  | -            className="tian-bg"
 | 
	
		
			
				|  |  | -            v-if="BoxbgType==1"
 | 
	
		
			
				|  |  | -            :style="{color:'#DEDEDE'}"
 | 
	
		
			
				|  |  | -        />
 | 
	
		
			
				|  |  | +      <svg-icon
 | 
	
		
			
				|  |  | +        icon-class="tian"
 | 
	
		
			
				|  |  | +        className="tian-bg"
 | 
	
		
			
				|  |  | +        v-if="BoxbgType == 0"
 | 
	
		
			
				|  |  | +        :style="{ color: '#DEDEDE' }"
 | 
	
		
			
				|  |  | +      />
 | 
	
		
			
				|  |  | +      <svg-icon
 | 
	
		
			
				|  |  | +        icon-class="mi"
 | 
	
		
			
				|  |  | +        className="tian-bg"
 | 
	
		
			
				|  |  | +        v-if="BoxbgType == 1"
 | 
	
		
			
				|  |  | +        :style="{ color: '#DEDEDE' }"
 | 
	
		
			
				|  |  | +      />
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |    </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
	
		
			
				|  | @@ -45,7 +50,7 @@ export default {
 | 
	
		
			
				|  |  |      "className",
 | 
	
		
			
				|  |  |      "strokePlayColor",
 | 
	
		
			
				|  |  |      "palyWidth",
 | 
	
		
			
				|  |  | -    "BoxbgType"
 | 
	
		
			
				|  |  | +    "BoxbgType",
 | 
	
		
			
				|  |  |    ],
 | 
	
		
			
				|  |  |    data() {
 | 
	
		
			
				|  |  |      return {
 | 
	
	
		
			
				|  | @@ -71,6 +76,10 @@ export default {
 | 
	
		
			
				|  |  |    methods: {
 | 
	
		
			
				|  |  |      initHanziwrite() {
 | 
	
		
			
				|  |  |        let _this = this;
 | 
	
		
			
				|  |  | +      let node = document.getElementById(`${_this.targetDiv}`);
 | 
	
		
			
				|  |  | +      if (node.children.length > 1) {
 | 
	
		
			
				|  |  | +        node.removeChild(node.children[1]);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |        //var ren = require("hanzi-writer-data/国");
 | 
	
		
			
				|  |  |        _this.writer = HanziWriter.default.create(
 | 
	
		
			
				|  |  |          _this.targetDiv,
 | 
	
	
		
			
				|  | @@ -122,7 +131,7 @@ export default {
 | 
	
		
			
				|  |  |    margin: 0 auto;
 | 
	
		
			
				|  |  |    width: 100%; //444px
 | 
	
		
			
				|  |  |    height: 100%; //480px
 | 
	
		
			
				|  |  | -  .strock-play-box{
 | 
	
		
			
				|  |  | +  .strock-play-box {
 | 
	
		
			
				|  |  |      position: absolute;
 | 
	
		
			
				|  |  |      top: 0;
 | 
	
		
			
				|  |  |      right: 0;
 | 
	
	
		
			
				|  | @@ -132,8 +141,8 @@ export default {
 | 
	
		
			
				|  |  |  .character-target-div {
 | 
	
		
			
				|  |  |    width: 100%; //444px
 | 
	
		
			
				|  |  |    height: 100%; //480px
 | 
	
		
			
				|  |  | -//   background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
 | 
	
		
			
				|  |  | -//     no-repeat;
 | 
	
		
			
				|  |  | +  //   background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
 | 
	
		
			
				|  |  | +  //     no-repeat;
 | 
	
		
			
				|  |  |    background-size: 100% 100%;
 | 
	
		
			
				|  |  |    border-radius: 24px;
 | 
	
		
			
				|  |  |    display: flex;
 | 
	
	
		
			
				|  | @@ -159,9 +168,9 @@ export default {
 | 
	
		
			
				|  |  |    height: 160px;
 | 
	
		
			
				|  |  |    font-size: 28px;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | -.playStorkes-btn{
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    top: 0;
 | 
	
		
			
				|  |  | -    right: 0;
 | 
	
		
			
				|  |  | +.playStorkes-btn {
 | 
	
		
			
				|  |  | +  position: absolute;
 | 
	
		
			
				|  |  | +  top: 0;
 | 
	
		
			
				|  |  | +  right: 0;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  </style>
 |