汉字组件的增加播放笔顺

src/components/Adult/preview/NewWordShow.vue

@@ -3,70 +3,94 @@
   <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <div class="item-box">
-        <div class="item-pre"
-              v-for="(item, index) in curQue.option"
-              :key="index">
-            <div
-                class="item"
-                style="margin-right:20px"
-            >
-                <p v-if="item.pinyin || item.en">
-                    <span>{{ item.pinyin }}</span>
-                    <span>{{ item.en }}</span>
-                </p>
-                <div class="con-box">
-                <template v-if="item.imgOrText == 'text'">
-                    <template v-if="item.con">
-                    <div
-                        :key="conindex"
-                        class="strockplay-newWord"
-                        v-for="(conItem, conindex) in item.con"
-                        @click="writeWord(conItem, item.pinyin)"
-                    >
-                        <Strockplayredline
-                        :Book_text="conItem"
-                        :playStorkes="true"
-                        :targetDiv="
-                            'bwcHanziIntp' + index + conItem + conindex + indexStr
-                        "
-                        />
-                        <div
-                        class="bwc-line"
-                        v-if="conindex < item.con.length - 1"
-                        ></div>
-                    </div>
-                    </template>
-                    <template v-else>
-                    <div class="blank-item" @click="freeWrite('', index, 0)">
-                        <img :src="freeImg[index][0]" v-if="freeImg[index][0]" />
-                    </div>
-                    </template>
-                </template>
-                <template v-else>
-                    <div
-                    class="img-box"
-                    v-for="(imgItem, imgIndex) in item.img_list"
-                    :key="imgIndex"
-                    @click="freeWrite(imgItem.url, imgIndex, 0)"
-                    >
-                    <el-image :src="imgItem.url" 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 class="item-pre" v-for="(item, index) in curQue.option" :key="index">
+        <div class="item" style="margin-right: 20px">
+          <p v-if="item.pinyin || item.en">
+            <span>{{ item.pinyin }}</span>
+            <span>{{ item.en }}</span>
+          </p>
+          <div class="con-box">
+            <template v-if="item.imgOrText == 'text'">
+              <template v-if="item.con">
+                <div
+                  :key="conindex"
+                  class="strockplay-newWord"
+                  v-for="(conItem, conindex) in item.con"
+                  @click="writeWord(conItem, item.pinyin)"
+                >
+                  <Strockplayredline
+                    :Book_text="conItem"
+                    :playStorkes="true"
+                    :targetDiv="
+                      'bwcHanziIntp' + index + conItem + conindex + indexStr
+                    "
+                  />
+                  <div
+                    class="bwc-line"
+                    v-if="conindex < item.con.length - 1"
+                  ></div>
                 </div>
-            </div>
-            <template v-if="item.type&&item.type.indexOf('lm')>-1">
-                <div class="con-box" v-for="indexs in 6" :key="indexs">
-                    <div class="blank-item" @click="freeWrite('', index, indexs+1)">
-                        <img :src="freeImg[index][indexs+1]" v-if="freeImg[index][indexs+1]" />
-                    </div>
+              </template>
+              <template v-else>
+                <div class="blank-item" @click="freeWrite('', index, 0)">
+                  <img :src="freeImg[index][0]" v-if="freeImg[index][0]" />
                 </div>
+              </template>
+            </template>
+            <template v-else>
+              <div
+                class="img-box"
+                v-for="(imgItem, imgIndex) in item.img_list"
+                :key="imgIndex"
+                @click="freeWrite(imgItem.url, imgIndex, 0)"
+              >
+                <el-image :src="imgItem.url" 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>
         </div>
-      
+        <template v-if="item.type && item.type.indexOf('lm') > -1">
+          <div
+            class="con-box"
+            v-for="(items, indexs) in item.imgarr"
+            :key="indexs"
+          >
+            <div
+              class="strockplay-newWord"
+              @click="freeWrite(items, index, indexs + 1)"
+            >
+              <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.strokes_image_url"
+                :src="items.strokes_image_url"
+                alt=""
+              /> -->
+              <FreeWriteQP
+                :id="'cans' + index + indexs"
+                :ref="'cans' + index + indexs"
+                :height="64"
+                :width="64"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
     </div>
     <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
       <Practice
@@ -76,11 +100,16 @@
       />
     </div>
     <div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
-      <FreePaint
+      <FreewriteLettle
         :changePraShow="changePraShow"
-        :cur="curDataImg"
         ref="freePaint"
         :themeColor="themeColor"
+        :currentTreeID="currentTreeID"
+        :currentHz="currentHz"
+        :currenHzData="currenHzData"
+        :rowIndex="activeIndex"
+        :colIndex="activeColIndex"
+        :closeifFreeShow="closeifFreeShow"
       />
     </div>
   </div>
@@ -89,11 +118,12 @@
 <script>
 import Strockplayredline from "../preview/components/Strockplayredline.vue";
 import Practice from "../preview/components/Practice.vue";
-import FreePaint from "../preview/components/FreePaint.vue";
-import { getContentFile } from "@/api/ajax";
+import FreewriteLettle from "../preview/components/FreewriteLettle.vue";
+import { getContentFile, LearnWebSI } from "@/api/ajax";
+import FreeWriteQP from "./components/FreeWriteQP.vue";
 export default {
-  components: { Strockplayredline, Practice, FreePaint },
-  props: ["curQue", "themeColor", "indexStr"],
+  components: { Strockplayredline, Practice, FreewriteLettle, FreeWriteQP },
+  props: ["curQue", "themeColor", "indexStr", "currentTreeID"],
   data() {
     return {
       isPraShow: false,
@@ -102,29 +132,87 @@ export default {
       freeImg: [],
       activeIndex: null,
       activeColIndex: null,
+      currentHz: "", //当前汉字
+      currenHzData: null, //当前汉字数据
+      playStatus: false, //播放状态
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    playHanzi(rowIndex, colIndex, item) {
+      if (this.playStatus) {
+        this.$message.warning("请等待播放完成");
+        return;
+      }
+      this.playStatus = true;
+      console.log(`cans${rowIndex}${colIndex}`);
+      this.$refs[`cans${rowIndex}${colIndex}`].reset();
+
+      let c = document.getElementById(`cans${rowIndex}${colIndex}`);
+      let cxt = document
+        .getElementById(`cans${rowIndex}${colIndex}`)
+        .getContext("2d");
+      cxt.clearRect(0, 0, c.width, c.height);
+      let history = item.history.history;
+      const len = item.history.length;
+      let i = 0;
+      const runner = () => {
+        i++;
+        if (i < len) {
+          this.$refs[`cans${rowIndex}${colIndex}`].draw(
+            null,
+            history[i][0],
+            history[i][1]
+          );
+          requestAnimationFrame(runner);
+        } else {
+          console.log("播放完成");
+          this.playStatus = false;
+        }
+      };
+      requestAnimationFrame(runner);
+    },
     // 处理数据
     handleData() {
       let _this = this;
-      _this.freeImg = [];
-      _this.curQue.option.forEach((item,index) => {
-          let itemImg = ['','','','','','','']
-          _this.$set(_this.freeImg,index,itemImg)
+      let MethodName = "teaching-practice_manager-GetMyHZHandwrittenRecordList";
+      this.curQue.option.forEach((item, index) => {
+        let data = {
+          courseware_id: this.currentTreeID,
+          hz: item.con,
+          search_scope: 1,
+          count_limit: 6,
+        };
+        LearnWebSI(MethodName, data).then((res) => {
+          let imgarr = res.hz_handwritten_record_list;
+          let newimgarr = imgarr.map((it) => {
+            it.history = JSON.parse(it.strokes_content);
+            return it;
+          });
+          if (newimgarr.length < 6) {
+            let num = 6 - newimgarr.length;
+            for (let i = 0; i < num; i++) {
+              newimgarr.push({});
+            }
+          }
+          item.imgarr = newimgarr;
+          if (index == this.curQue.option.length - 1) {
+            this.$forceUpdate();
+          }
+        });
       });
     },
     changePraShow() {
       this.isPraShow = false;
       this.ifFreeShow = false;
-      this.freeImg[this.activeIndex][this.activeColIndex] = this.$refs.freePaint.imgSrc;
+      this.freeImg[this.activeIndex][this.activeColIndex] =
+        this.$refs.freePaint.imgSrc;
     },
     async writeWord(words, pinyin) {
       this.activeIndex = null;
-      this.activeColIndex = null
+      this.activeColIndex = null;
       const MethodName = "tool-ChineseSCConvert";
       const data = {
         text: words,
@@ -143,16 +231,22 @@ export default {
       };
       this.isPraShow = true;
     },
+    closeifFreeShow(data, rowIndex, colIndex) {
+      this.curQue.option[rowIndex][colIndex] = data;
+      this.ifFreeShow = false;
+      this.playHanzi(rowIndex, colIndex, data);
+    },
     freeWrite(imgUrl, index, indexs) {
       this.ifFreeShow = true;
-      this.curDataImg = imgUrl;
-      this.activeIndex = imgUrl ? null : index;
-      this.activeColIndex = imgUrl ? null : indexs;
+      this.activeIndex = index;
+      this.activeColIndex = indexs;
+      this.currentHz = this.curQue.option[index].con;
+      this.currenHzData = imgUrl;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      this.handleData()
+    this.handleData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -183,11 +277,11 @@ export default {
     background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
-    .item-pre{
-        display: flex;
-        flex-flow: wrap;
-        align-items: flex-end;
-        padding: 9px 20px;
+    .item-pre {
+      display: flex;
+      flex-flow: wrap;
+      align-items: flex-end;
+      padding: 9px 20px;
     }
     .item {
       box-sizing: border-box;
@@ -243,16 +337,25 @@ export default {
         }
       }
     }
-    .blank-item {
+    .strockplay-newWord {
+      width: 64px;
+      height: 64px;
+      background: #fff url("../../../assets/NPC/chinaTianRed.png") center
+        no-repeat;
+      background-size: cover;
+      position: relative;
+      .strock-play-box {
+        position: absolute;
+        cursor: pointer;
+      }
+      canvas {
         width: 64px;
         height: 64px;
-        background: #fff url("../../../assets/NPC/chinaTianRed.png") center
-          no-repeat;
-        background-size: cover;
-        img {
-          width: 100%;
-          height: 100%;
-        }
+      }
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
   .practiceBox {

src/components/Adult/preview/components/FreewriteLettle.vue

@@ -0,0 +1,508 @@
+<!--  -->
+<template>
+  <div class="practice practiceSingleNPC">
+    <img
+      @click="changePraShow()"
+      class="close-icon"
+      :src="
+        themeColor
+          ? themeColor == 'green'
+            ? require('../../../../assets/icon/Cross-16-normal-Green.png')
+            : themeColor == 'brown'
+            ? require('../../../../assets/icon/Cross-16-normal-Brown.png')
+            : require('../../../../assets/icon/Cross-16-normal-red.png')
+          : require('../../../../assets/icon/Cross-16-normal-red.png')
+      "
+    />
+    <div class="right-content">
+      <div class="right-strockred">
+        <!-- <Freewrite
+          :cur="cur"
+          :lineColor="hanzicolor"
+          :lineWidth="hanziweight"
+          :themeColor="themeColor"
+          ref="freewrite"
+        /> -->
+        <template v-if="imgOrCans">
+          <img :src="currenHzData.strokes_image_url" alt="" />
+        </template>
+        <template v-else>
+          <FreeWriteQP
+            :bgColor.sync="bgColor"
+            :height="height"
+            :isCrop="isCrop"
+            :lineColor="hanzicolor"
+            :lineWidth="hanziweight"
+            :width="width"
+            class="vueEsign"
+            ref="esign"
+            id="esign"
+          />
+        </template>
+      </div>
+      <ul class="nav-list">
+        <li @click="resetHuahua()">重写</li>
+        <li @click="handleWriteImg">确定</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import Strockplayredline from "./Strockplayredline.vue";
+import Strockred from "./Strockred.vue";
+import FreeWriteQP from "./FreeWriteQP.vue";
+// import ChinaDict from "./ChinaDict";
+// import Audio from "./AudioRed.vue";
+import { LearnWebSI } from "@/api/ajax";
+export default {
+  components: {
+    Strockplayredline,
+    Strockred,
+    FreeWriteQP,
+    // ChinaDict,
+    // Audio,
+  },
+  props: [
+    "cur",
+    "changePraShow",
+    "themeColor",
+    "currentTreeID",
+    "currentHz",
+    "currenHzData",
+    "closeifFreeShow",
+    "rowIndex",
+    "colIndex",
+  ],
+  data() {
+    return {
+      width: 256,
+      height: 256,
+      bgColor: "",
+      isCrop: false,
+      //   learn_mode: "",
+      playStorkes: false,
+      navIndex: 0,
+      colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
+      weightList: [6, 10],
+      colorIndex: 0,
+      penIndex: 0,
+      hanzicolor: "",
+      hanziweight: "",
+      thinpen: require("../../../../assets/common/thin-pen.png"), //细笔
+      thinpenActive: require("../../../../assets/common/thin-pen-active.png"),
+      thickpen: require("../../../../assets/common/thick-pen.png"),
+      thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
+      collectFlag: false, // 是否收藏
+      imgarr: [],
+      imgOrCans: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    changeNav(index) {
+      this.navIndex = index;
+    },
+    changeColor(index) {
+      let _this = this;
+      _this.colorIndex = index;
+      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;
+    },
+    resetHuahua() {
+      this.imgOrCans = false;
+      this.$refs.esign.reset();
+    },
+    handleWriteImg() {
+      this.$refs.esign
+        .generate()
+        .then((res) => {
+          let Book_img = res.replace("data:image/png;base64,", "");
+          let write_img = "data:image/png;base64," + Book_img;
+          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,
+              history: this.$refs.esign.history,
+              strokes_image_url: write_img,
+            };
+            // this.imgarr.push(obj);
+            this.closeifFreeShow(obj,this.rowIndex,this.colIndex);
+          });
+          //console.log(Book_img);
+          // this.textOcr(res.replace("data:image/png;base64,", ""));
+        })
+        .catch((err) => {
+          this.$message.warning("请先书写在保存");
+        });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // console.log(this.cur);
+    let _this = this;
+    let color = _this.colorsList[_this.colorIndex];
+    _this.hanzicolor = color;
+    _this.hanziweight = 6;
+    if (this.currenHzData.strokes_image_url) {
+      this.imgOrCans = true;
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+.practice {
+  width: 320px;
+  max-height: 400px;
+  overflow: auto;
+  margin: 0 auto;
+  background: #f3f3f3;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  position: relative;
+  .clean-btn {
+    width: 16px;
+    height: 16px;
+    margin: 0 4px;
+    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;
+    }
+  }
+  .close-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    cursor: pointer;
+    z-index: 2;
+  }
+  .Book_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+    align-items: flex-start;
+  }
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 144px;
+    .left-content-pra {
+      height: 162px;
+    }
+  }
+  .right-content {
+    position: relative;
+    width: 288px;
+    height: 360px;
+    background: #f3f3f3;
+    border-radius: 16px;
+    box-sizing: border-box;
+    padding: 30px 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0 auto;
+    .nav-list {
+      width: 100%;
+      height: 34px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0;
+      list-style: none;
+      margin-top: 16px;
+      > li {
+        height: 34px;
+        width: 124px;
+        text-align: center;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 34px;
+        color: #fff;
+        cursor: pointer;
+        background: #de4444;
+        border-radius: 8px;
+        &:hover {
+          background: #f76565;
+        }
+        &:active {
+          background: #c43c3c;
+        }
+      }
+    }
+    .right-strockred {
+      width: 256px;
+      height: 256px;
+      background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
+        no-repeat;
+      background-size: 100% 100%;
+    }
+    .footer {
+      position: absolute;
+      bottom: 80px;
+      width: 100%;
+      padding-right: 40px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .pen-colors {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .write-icon-3 {
+          width: 20px;
+          height: 20px;
+          margin-right: 12px;
+        }
+        .colors-list {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin: 0;
+          padding: 0;
+          > li {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #fff;
+            box-sizing: border-box;
+            background: #fff;
+            margin: 0 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50%;
+            cursor: pointer;
+            > 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;
+        justify-content: flex-start;
+        align-items: center;
+        > img {
+          width: 21px;
+          height: 19px;
+          margin-left: 4px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.strockplay {
+  width: 144px;
+  height: 144px;
+  border: 2px solid #de4444;
+  border-radius: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .strockplayRedInner {
+    width: 100%;
+    height: 100%;
+  }
+}
+.left-content .footer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .bg-box {
+    width: 76px;
+    height: 32px;
+    text-align: center;
+    padding: 4px 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 16px;
+    line-height: 150%;
+    color: #000;
+    // &:nth-child(2) {
+    //   margin: 0 24px;
+    // }
+    img {
+      width: 24px;
+      height: 24px;
+      margin: 0;
+    }
+  }
+  .practice-icon {
+    height: 36px;
+    margin-top: 12px;
+  }
+  > span {
+    margin-bottom: 9px;
+    font-weight: 600;
+    font-family: "FZJCGFKTK";
+    font-size: 24px;
+    line-height: 34px;
+    /* identical to box height */
+
+    text-align: center;
+
+    color: #ba7d21;
+  }
+}
+.el-tabs {
+  width: 100%;
+}
+.NPC-Big-Book-preview-green {
+  .practice {
+    .right-content {
+      .nav-list {
+        > li {
+          background: #24b99e;
+          &:hover {
+            background: #3dd4b8;
+          }
+          &:active {
+            background: #1fa189;
+          }
+        }
+      }
+    }
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .practice {
+    .right-content {
+      .nav-list {
+        > li {
+          background: #bd8865;
+          &:hover {
+            background: #d6a687;
+          }
+          &:active {
+            background: #a37557;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.practiceSingleNPC {
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #000;
+  }
+  .el-tabs--border-card
+    > .el-tabs__header
+    .el-tabs__item:not(.is-disabled):hover {
+    color: #000;
+  }
+  .el-tabs__item,
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
+    color: #000;
+    font-size: 16px;
+    line-height: 150%;
+    line-height: 48px;
+    height: 48px;
+    width: 80px;
+    text-align: center;
+    font-weight: normal;
+    border: none;
+  }
+  .el-tabs--border-card > .el-tabs__header {
+    background: #f3f3f3;
+    border: none;
+  }
+  .el-tabs--border-card > .el-tabs__content {
+    padding: 0px;
+  }
+  .el-tab-pane {
+    display: flex;
+  }
+}
+.NPC-Big-Book-preview-green {
+  .strockplay {
+    border-color: #24b99e;
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .strockplay {
+    border-color: #bd8865;
+  }
+}
+</style>