From 172199d84e17b2285aef2c1112fbed3c6f25f27c Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 26 六月 2024 19:51:22 +0800
Subject: [PATCH] 涂色题

---
 src/books/artAndDance/view/components/chapter006.vue         |    5 
 src/assets/images/rubber.png                                 |    0 
 src/components/dragQuestion/index.vue                        |  258 ++++++++++++++++++----------
 src/assets/images/brush.png                                  |    0 
 src/books/childHealth/view/content/index.vue                 |    2 
 src/books/mathBook/view/components/chapter001.vue            |    8 
 /dev/null                                                    |   61 ------
 src/components/graffiti/components/toolBtns.vue              |   57 +++++-
 src/books/childHealth/view/content/components/chapter007.vue |    2 
 src/books/artAndDrama/view/components/chapter002.vue         |    4 
 src/components/graffiti/index.vue                            |   62 ++++--
 src/components/graffiti/components/brushSize.vue             |   20 ++
 src/assets/images/scrub.png                                  |    0 
 src/books/artAndDance/view/components/index.vue              |    2 
 src/assets/images/revoke.png                                 |    0 
 src/assets/images/save.png                                   |    0 
 16 files changed, 281 insertions(+), 200 deletions(-)

diff --git a/src/assets/images/brush.png b/src/assets/images/brush.png
new file mode 100644
index 0000000..5f23599
--- /dev/null
+++ b/src/assets/images/brush.png
Binary files differ
diff --git a/src/assets/images/revoke.png b/src/assets/images/revoke.png
new file mode 100644
index 0000000..97c4e20
--- /dev/null
+++ b/src/assets/images/revoke.png
Binary files differ
diff --git a/src/assets/images/rubber.png b/src/assets/images/rubber.png
new file mode 100644
index 0000000..bf9955c
--- /dev/null
+++ b/src/assets/images/rubber.png
Binary files differ
diff --git a/src/assets/images/save.png b/src/assets/images/save.png
new file mode 100644
index 0000000..f7b2421
--- /dev/null
+++ b/src/assets/images/save.png
Binary files differ
diff --git a/src/assets/images/scrub.png b/src/assets/images/scrub.png
new file mode 100644
index 0000000..2ef004c
--- /dev/null
+++ b/src/assets/images/scrub.png
Binary files differ
diff --git a/src/books/artAndDance/view/components/chapter006.vue b/src/books/artAndDance/view/components/chapter006.vue
index 765ae71..5ae1e73 100644
--- a/src/books/artAndDance/view/components/chapter006.vue
+++ b/src/books/artAndDance/view/components/chapter006.vue
@@ -311,10 +311,14 @@
         </ul>
       </div>
     </div>
+    <!-- <div class="page-box" page="30">
+        <giffiti :page="30" :bcImg="'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF'" />
+    </div> -->
   </div>
 </template>
 
 <script>
+import giffiti from '@/components/graffiti/index.vue'
 export default {
   name: "chapterSix",
   props: {
@@ -322,6 +326,7 @@
       type: Array,
     },
   },
+  components:{giffiti}
 };
 </script>
 
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
index 6678a4d..9893475 100644
--- a/src/books/artAndDance/view/components/index.vue
+++ b/src/books/artAndDance/view/components/index.vue
@@ -194,7 +194,7 @@
 
     // 娴嬭瘯椤甸潰璺宠浆
     // setTimeout(() => {
-    //   this.gotoPage(6, 26);
+    //   this.gotoPage(6, 30);
     //   setTimeout(() => {
     //     this.renderSign("Highlight", {
     //       id: "2ACA9359",
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 44e8754..b104e7a 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -96,7 +96,7 @@
               class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />銆�</p>
           <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
               src="../../assets/images/czysj.jpg" /></h3>
-          <p class="text"><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p>
+          <!-- <p class="text"><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p> -->
           <drag  :question="dragQuestion" :page="16" class="drag-text"/> 
           <!-- <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice> -->
           <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
@@ -501,7 +501,7 @@
   background-color: red;
 }
 .drag-text {
-  margin: 0 6%;
+  margin: 0 4%;
   font-family: "STKaiti";
   font-size: 19px;
 }
diff --git a/src/books/childHealth/view/content/components/chapter007.vue b/src/books/childHealth/view/content/components/chapter007.vue
index 61d378d..e61b2d2 100644
--- a/src/books/childHealth/view/content/components/chapter007.vue
+++ b/src/books/childHealth/view/content/components/chapter007.vue
@@ -3834,7 +3834,7 @@
       this.pathThree = await getResourcePath("79aa2ccd431dcc000dbe2962ded4397c");
       this.pathFour = await getResourcePath("94654e3d22604a815f9f4558616d8f39");
       this.pathFive = await getResourcePath("2373520e42d1be7bb70fbd5729d2f860");
-      this.pathSix = await getResourcePath("bf7cabfb18771490b5cbb2eebdf424a3");
+      this.pathSix = await getResourcePath("dac5587e1f5e51b67f221773b04c1aed");
       this.pathSeven = await getResourcePath("99a137c537d757a6ee39e6888218ca7c");
       this.pathEight = await getResourcePath("9a1e8e3374e3bdf82a5066ead76398ef");
       this.pathNine = await getResourcePath("7ae6133d91e84c4ea5c96d5d4ac62fb9");
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index cc40f13..d18a39c 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -238,7 +238,7 @@
 
     // 娴嬭瘯椤甸潰璺宠浆
     // setTimeout(() => {
-    // this.gotoPage(1,10);
+    // this.gotoPage(7,182);
     //   setTimeout(() => {
     //     this.renderSign("Highlight", {
     //       id: "2ACA9359",
diff --git a/src/books/mathBook/view/components/chapter001.vue b/src/books/mathBook/view/components/chapter001.vue
index 13c1ab5..a7f9230 100644
--- a/src/books/mathBook/view/components/chapter001.vue
+++ b/src/books/mathBook/view/components/chapter001.vue
@@ -575,10 +575,6 @@
         </div>
       </div>
     </div>
-    <!-- <div class="page-box padding-116" page="10">
-      <drag :question="dragQuestion" :page="10"/> 
-        <graffiti style="width:100%" />
-    </div> -->
     <!-- 鍑芥暟鎺т欢寮圭獥 -->
     <el-dialog
       :visible.sync="dialogVisible"
@@ -823,11 +819,9 @@
 import examinations from "@/components/examinations/index.vue";
 import { getResourcePath } from "@/assets/methods/resources";
 import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
-import drag from '@/components/dragQuestion/index.vue'
-import graffiti from "@/components/graffiti/index.vue"
 export default {
   name: "chapter-one",
-  components: { examinations,drag,graffiti },
+  components: { examinations },
   props: {
     showPageList: {
       type: Array,
diff --git a/src/components/dragQuestion/index.vue b/src/components/dragQuestion/index.vue
index f3d8d04..d1e4169 100644
--- a/src/components/dragQuestion/index.vue
+++ b/src/components/dragQuestion/index.vue
@@ -1,5 +1,29 @@
 <template>
-  <div class="drag-box">
+  <div class="drag-box" :style="{ borderColor: bcColor }">
+    <div class="title-box">
+      <p class="text"><span class="hs1">鈼�</span>{{ titileText }}</p>
+      <span class="svg-btn t0">
+        <el-tooltip class="item" effect="dark" content="璇锋嫋鎷界瓟妗堝埌鎷彿閲屽惂" placement="top-start">
+          <svg
+          t="1719309984490"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="6316"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          width="20"
+          height="20"
+        >
+          <path
+            d="M510.66571776 2.32285525c281.13999758 0.03143566 510.59693795 229.62226973 510.04273323 510.34079346-0.55769771 281.76056661-229.64788451 510.68426013-510.37339307 509.99849074-281.55681565-0.68693447-509.37908565-228.64309817-509.75166009-510.05321216C0.20965945 231.71226624 229.53852701 2.29141959 510.66571776 2.32285525zM972.54389419 512.41565298C972.50314354 258.01834837 766.47298389 51.25351879 510.91837042 50.72958578c-254.73844338-0.52160398-461.85256163 206.22576071-462.11918507 461.70003911-0.26545949 254.42175431 206.44814165 460.98865493 461.56614428 461.71517497C764.4715611 974.86899086 972.5846437 766.95849529 972.54389419 512.41565298zM539.07335282 677.31941831c-21.78046749 0-42.9799515 0-64.78370475 0 0-12.93997511-0.69159139-25.64243456 0.14553657-38.24359993 1.68939179-25.44566841 7.57490347-49.85162069 20.87115321-72.0221275 10.34708992-17.25368889 23.52341675-32.14269326 38.16209863-45.82548935 18.18046691-16.99288633 36.5774939-33.76688469 54.39702926-51.13118151 10.49262649-10.22367517 19.81863026-21.62794496 24.66675485-35.82070101 11.61384277-34.00090851 4.18913394-64.36339485-18.43079054-91.405312-37.56481536-44.90802403-100.39250489-46.44605838-138.86663567-23.96934258-24.24993792 14.16597845-38.78965362 35.84282283-47.27736433 61.9113893-3.80491662 11.68719417-6.43273045 23.75744057-9.84295083 36.5856438-22.35912192-2.65459257-45.24566983-5.3720576-68.99030357-8.19081558 0.88602851-5.92276935 1.52056946-11.49159197 2.57425635-16.9800795 5.91229042-30.78861824 16.59935403-59.50246343 36.69741568-84.13079666 24.48396061-30.00271872 56.38215225-47.47180259 93.95744654-54.68344547 39.22044359-7.527168 78.41527125-6.71448974 116.55641316 5.67360967 48.83402752 15.86002717 84.96908857 46.85006848 101.39030641 96.21501497 15.76571904 47.39379427 8.01966421 92.16443165-23.01345564 132.15913187-19.68590051 25.37115307-44.16869717 45.98383275-67.17633194 68.0751673-10.12121714 9.71837099-20.36119211 19.49728541-29.15278394 30.3741292-13.05873294 16.15459442-18.04308025 35.69262933-19.61720718 56.12134969C540.4507136 653.56547072 539.84644437 665.12226418 539.07335282 677.31941831zM470.0818853 814.35345351c0-25.59353401 0-50.94023737 0-76.69910073 25.64359851 0 50.98447986 0 76.7526582 0 0 25.51552569 0 50.86921501 0 76.69910073C521.33997454 814.35345351 495.85239154 814.35345351 470.0818853 814.35345351z"
+            p-id="6317"
+          ></path>
+        </svg>
+    </el-tooltip>
+
+      </span>
+    </div>
     <div
       v-for="(item, index) in drageQuestion"
       :key="item.id"
@@ -18,41 +42,41 @@
             {{ item.userAnswer[ditem.num].txt }}
             <span>
               <svg
-                    v-if="getItemRight(index,ditem.num)"
-                    t="1716986419862"
-                    class="icon"
-                    viewBox="0 0 1820 1024"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    p-id="18767"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    width="40"
-                    height="20"
-                  >
-                    <path
-                      d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                      fill="#1AFA29"
-                      p-id="18768"
-                    ></path>
-                  </svg>
-                  <svg
-                    v-if="getItemRight(index,ditem.num) == false"
-                    t="1716987085767"
-                    class="icon"
-                    viewBox="0 0 1024 1024"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    p-id="25745"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    width="20"
-                    height="20"
-                  >
-                    <path
-                      d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                      fill="#d81e06"
-                      p-id="25746"
-                    ></path>
-                  </svg>
+                v-if="getItemRight(index, ditem.num)"
+                t="1716986419862"
+                class="icon"
+                viewBox="0 0 1820 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="18767"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="40"
+                height="20"
+              >
+                <path
+                  d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                  fill="#1AFA29"
+                  p-id="18768"
+                ></path>
+              </svg>
+              <svg
+                v-if="getItemRight(index, ditem.num) == false"
+                t="1716987085767"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="25745"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="20"
+                height="20"
+              >
+                <path
+                  d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                  fill="#d81e06"
+                  p-id="25746"
+                ></path>
+              </svg>
             </span>
           </span>
         </span>
@@ -61,7 +85,14 @@
       <!-- 閫夐」 -->
       <ul class="option-box">
         <li v-for="(citem, cindex) in item.option" :key="cindex">
-          <span class="drag-option" @mousedown="mousedown" v-show="item.userAnswer.findIndex(eitem => eitem.value == citem.value) == -1"
+          <span
+            class="drag-option"
+            @mousedown="mousedown"
+            v-show="
+              item.userAnswer.findIndex(
+                (eitem) => eitem.value == citem.value
+              ) == -1
+            "
             >{{ citem.value }}銆亄{ citem.txt }}</span
           >
         </li>
@@ -94,14 +125,20 @@
                     style="margin-left: 20px"
                   >
                     <span>鎮ㄧ殑绛旀锛�</span>
-                    <span
-                      class="errorBox"
-                      v-if="item.userAnswer.length"
+                    <span class="errorBox" v-if="item.userAnswer.length">
+                      <span
+                        v-for="(answerItem, answerIdnex) in item.userAnswer"
+                        :key="answerIdnex"
+                        >{{ answerItem.value
+                        }}<span
+                          v-if="
+                            answerIdnex !== item.userAnswer.length - 1 &&
+                            answerItem.value
+                          "
+                          >,</span
+                        ></span
                       >
-                      <span v-for="(answerItem,answerIdnex) in item.userAnswer" :key="answerIdnex">{{answerItem.value}}<span v-if="answerIdnex !== item.userAnswer.length - 1 && answerItem.value">,</span></span>
-                      
-                      </span
-                    >
+                    </span>
                   </p>
                 </div>
                 <p class="difficulty" v-if="item.difficulty">
@@ -192,6 +229,14 @@
     page: {
       type: Number,
     },
+    bcColor: {
+      type: String,
+      default: "#8fae34",
+    },
+    titileText: {
+      type: String,
+      default: "闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��",
+    },
   },
   watch: {
     question: {
@@ -200,7 +245,7 @@
           this.config.activeBook.name + "-drag-" + this.page
         );
         if (oldAnswer) {
-          this.submitState = true
+          this.submitState = true;
           oldAnswer = JSON.parse(oldAnswer);
           for (let index = 0; index < newValue.length; index++) {
             // 鏃х瓟妗堣祴鍊�
@@ -232,24 +277,23 @@
       maxX: null,
       maxY: null,
       spaceList: [],
-      submitState:false,
-      isLift:false
+      submitState: false,
+      isLift: false,
     };
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     // 1.閫夐」鎷栨嫿
     // 2.闄愬埗鎷栨嫿绉诲姩鍙兘鍦ㄩ鑼冨洿鍐�
     // 3.闄愬埗榧犳爣鏉惧紑瑕佸湪绌烘牸鐨勮寖鍥村唴
     mousedown(e) {
       e.preventDefault();
-      if(this.submitState) return false
-      this.isLift = false
+      if (this.submitState) return false;
+      this.isLift = false;
       this.moveDom = e.toElement;
       this.parentDom = this.getParentWithClass(e.toElement, "question-box");
       this.questionIndex = this.parentDom.getAttribute("num");
-      if(!this.spaceList.length) this.getSpaceInfo(this.parentDom);
+      if (!this.spaceList.length) this.getSpaceInfo(this.parentDom);
       const parentInfo = this.parentDom.getBoundingClientRect();
       this.parentX = parentInfo.x;
       this.parentY = parentInfo.y;
@@ -263,14 +307,14 @@
       // 闄愬埗鍦ㄦ棰樿寖鍥村唴鎷栧姩
       if (e.x <= this.maxX && e.y < this.maxY) {
         const moveX = e.x - this.parentX;
-        const moveY = e.y - this.parentY;
+        const moveY = e.y - this.parentY + 40;
         this.moveDom.style.left = moveX + "px";
         this.moveDom.style.top = moveY + "px";
         // 濡傛灉杩樻湁鏈夌┖鏍�
         if (this.spaceList.length) {
           for (let index = 0; index < this.spaceList.length; index++) {
             let item = this.spaceList[index];
-            if(!item) return false
+            if (!item) return false;
             if (
               e.x >= item.minX &&
               e.x <= item.maxX &&
@@ -278,22 +322,22 @@
               e.y <= item.maxY
             ) {
               // 濡傛灉绉诲姩鍒扮┖鏍艰寖鍥村唴,涓旈紶鏍囨姮璧峰悗,灏嗙瓟妗堝~鍏ョ┖鏍�,骞跺皢璇ョ┖鏍肩殑鏁版嵁娓呯┖(绌烘牸涓嶈兘鍒犻櫎,鍙兘娓呯┖,鍚﹀垯瀵艰嚧鏁扮粍绱㈠紩鏀瑰彉,涓嶈兘姝g‘鍐欏叆鍒版寚瀹氱┖鏍间腑)
-              if(!this.isLift) return false
+              if (!this.isLift) return false;
               this.$set(
                 this.drageQuestion[this.questionIndex].userAnswer,
                 index,
                 {
-                  value:this.moveDom.textContent.charAt(0),
-                  txt:this.moveDom.textContent.slice(2)
+                  value: this.moveDom.textContent.charAt(0),
+                  txt: this.moveDom.textContent.slice(2),
                 }
               );
-              if(this.drageQuestion[this.questionIndex].userAnswer[index]) {
+              if (this.drageQuestion[this.questionIndex].userAnswer[index]) {
                 this.moveDom.style.display = "none";
                 this.moveDom = null;
-                this.$set(this.spaceList,index,{})
+                this.$set(this.spaceList, index, {});
               }
             } else {
-              if(this.isLift && this.moveDom) {
+              if (this.isLift && this.moveDom) {
                 // 鍦ㄩ潪绌烘牸鍖哄煙鎶捣榧犳爣
                 this.moveDom.style.position = "";
                 this.moveDom.style.left = "0px";
@@ -308,22 +352,20 @@
     mouseup(e) {
       if (this.moveDom) {
         // this.moveDom = null;
-        
       }
-      this.isLift = true
-    
+      this.isLift = true;
     },
     // 鑾峰彇棰樼洰绌烘牸鍧愭爣
     getSpaceInfo(parentDom) {
       let arr = [];
       const list = parentDom.querySelectorAll(".space");
-      
+
       for (let index = 0; index < list.length; index++) {
         const itemInfo = list[index].getBoundingClientRect();
         arr.push({
           minX: itemInfo.x,
           maxX: itemInfo.x + itemInfo.width,
-          minY: itemInfo.y + 3 ,
+          minY: itemInfo.y + 3,
           maxY: itemInfo.y + itemInfo.height,
         });
       }
@@ -355,51 +397,49 @@
     },
     // 鎻愪氦
     submitData() {
-      this.submitState = true
+      this.submitState = true;
       let arr = [];
       const data = this.drageQuestion;
       for (let index = 0; index < data.length; index++) {
         const item = data[index];
         for (let cindex = 0; cindex < item.userAnswer.length; cindex++) {
           let citem = item.userAnswer[cindex];
-          arr[cindex] = citem.value
+          arr[cindex] = citem.value;
         }
-        item.isRight = JSON.stringify(arr)  == JSON.stringify(item.answer)
-        item.isComplete = true
+        item.isRight = JSON.stringify(arr) == JSON.stringify(item.answer);
+        item.isComplete = true;
       }
     },
     redio() {
-      this.submitState = false
+      this.submitState = false;
       localStorage.removeItem(
         this.config.activeBook.name + "-drag-" + this.page
       );
-      let arr = []
+      let arr = [];
       // const data = []
       for (let index = 0; index < this.drageQuestion.length; index++) {
         const item = this.drageQuestion[index];
-        item.isComplete = false
-        item.isRight = null
+        item.isComplete = false;
+        item.isRight = null;
         for (let cindex = 0; cindex < item.option.length; cindex++) {
           const citem = item.option[cindex];
-          arr.push(
-            {
-              txt:'',
-              value:''
-            }
-          )
+          arr.push({
+            txt: "",
+            value: "",
+          });
         }
-        item.userAnswer = arr
+        item.userAnswer = arr;
       }
       const optionList = (
         this.container ? this.container : document
       ).querySelectorAll(".drag-option");
       for (let index = 0; index < optionList.length; index++) {
         const item = optionList[index];
-        item.style.position = null
-        item.style.top = null
-        item.style.left = null
+        item.style.position = null;
+        item.style.top = null;
+        item.style.left = null;
       }
-      this.spaceList = []
+      this.spaceList = [];
     },
     seeAnswer() {
       for (let index = 0; index < this.drageQuestion.length; index++) {
@@ -439,18 +479,18 @@
       }
     },
     // 鏄剧ず瀵归敊鏂规硶
-    getItemRight(num,number) {
-      if(!this.submitState) return null
-      let flag = null
-      const item = this.question[num]
-      console.log(item,num,number);
-      const answer = item.answer[number]
-      const userAns = item.userAnswer[number].value
-      if(answer && userAns) {
-        flag = answer == userAns
-      } 
-      return flag
-    }
+    getItemRight(num, number) {
+      if (!this.submitState) return null;
+      let flag = null;
+      const item = this.question[num];
+      console.log(item, num, number);
+      const answer = item.answer[number];
+      const userAns = item.userAnswer[number].value;
+      if (answer && userAns) {
+        flag = answer == userAns;
+      }
+      return flag;
+    },
   },
 };
 </script>
@@ -460,7 +500,11 @@
   text-indent: 0 !important;
 }
 .drag-box {
+  box-sizing: border-box;
   position: relative;
+  border: 1px solid;
+  padding: 10px;
+  border-radius: 10px;
 }
 .space {
   display: inline-block;
@@ -510,6 +554,28 @@
 .el-collapse {
   width: 100%;
 }
+.svg-btn {
+  margin-left: 5px;
+  cursor: pointer;
+  display: flex;
+  padding: 3px;
+  fill: #fff;
+  border: 1px solid #8fae34;
+  border-radius: 5px;
+  background-color: #8fae34;
+  &:hover {
+    fill: #8fae34;
+    background-color: #fff;
+  }
+}
+.title-box {
+  display: flex;
+  margin-bottom: 20px;
+  p {
+    margin: 0;
+    text-indent: 2em !important;
+  }
+}
 /** 瑙f瀽 */
 .objective {
   /deep/ .el-collapse-item__header {
diff --git a/src/components/graffiti/components/brushSize.vue b/src/components/graffiti/components/brushSize.vue
index 9c47a7c..52d103b 100644
--- a/src/components/graffiti/components/brushSize.vue
+++ b/src/components/graffiti/components/brushSize.vue
@@ -9,6 +9,7 @@
       title="璋冩暣绗斿埛绮楃粏"
       @change="(event) => $emit('change-size', +event.target.value)"
     />
+    <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker>
   </div>
 </template>
 
@@ -24,12 +25,29 @@
     brushSize() {
       return this.size
     }
+  },
+  data() {
+    return  {
+      checkColor:"#000000"
+    }
+  },
+  methods:{
+    onChangeColor(color) {
+      this.$emit("change-color", color);
+    },
   }
 };
 
 // const brushSize = computed(() => props.size);
 </script>
-<style scoped>
+<style lang="less" scoped>
+.wrap-range {
+  display: flex;
+  align-items: center;
+  .el-color-picker {
+    margin-left: 20px;
+  }
+}
 .wrap-range input {
   width: 150px;
   height: 20px;
diff --git a/src/components/graffiti/components/colorPicker.vue b/src/components/graffiti/components/colorPicker.vue
deleted file mode 100644
index 4cde0de..0000000
--- a/src/components/graffiti/components/colorPicker.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div>
-    <span
-      v-for="(color, index) of colorList"
-      class="color-item"
-      :class="{ active: colorSelected === color }"
-      :style="{ backgroundColor: color }"
-      :key="index"
-      @click="onChangeColor(color)"
-    ></span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    color: {
-      type: String,
-    },
-  },
-  computed:{
-    colorSelected() {
-      return this.color
-    }
-  },
-  data() {
-    return {
-      colorList: [
-        "#000000",
-        "#808080",
-        "#FF3333",
-        "#0066FF",
-        "#FFFF33",
-        "#33CC66",
-      ],
-    };
-  },
-  methods: {
-    onChangeColor(color) {
-      this.$emit("change-color", color);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.color-item {
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  margin: 0 4px;
-  box-sizing: border-box;
-  border: 4px solid white;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  transition: 0.3s;
-}
-.color-item.active {
-  box-shadow: 0 0 15px #00ccff;
-}
-</style>
diff --git a/src/components/graffiti/components/toolBtns.vue b/src/components/graffiti/components/toolBtns.vue
index aad1a3f..83e91d7 100644
--- a/src/components/graffiti/components/toolBtns.vue
+++ b/src/components/graffiti/components/toolBtns.vue
@@ -5,9 +5,15 @@
       :key="index"
       :class="{ active: toolSelected === item.name }"
       :title="item.title"
-      @click="onChangeTool(item.name)"
+      @click="onChangeTool(item.name, index)"
+      :style="{ boxShadow: index == num ? '0 0 15px #00ccff' : '' }"
     >
-      <i :class="['iconfont', item.icon]"></i>
+      <img
+        :src="item.icon"
+        alt=""
+        class="giaffiti-btn"
+        :style="{ width: index == 0 ? '18px' : '' }"
+      />
     </button>
   </div>
 </template>
@@ -20,24 +26,46 @@
       default: "brush",
     },
   },
-  computed:{
+  computed: {
     toolSelected() {
-      return this.tool
-    }
+      return this.tool;
+    },
   },
   data() {
     return {
       toolList: [
-        { name: "brush", title: "鐢荤瑪", icon: "icon-qianbi" },
-        { name: "eraser", title: "姗$毊鎿�", icon: "icon-xiangpi" },
-        { name: "clear", title: "娓呯┖", icon: "icon-qingchu" },
-        { name: "undo", title: "鎾ら攢", icon: "icon-chexiao" },
-        { name: "save", title: "淇濆瓨", icon: "icon-fuzhi" },
+        {
+          name: "brush",
+          title: "鐢荤瑪",
+          icon: require("@/assets/images/brush.png"),
+        },
+        {
+          name: "eraser",
+          title: "姗$毊鎿�",
+          icon: require("@/assets/images/rubber.png"),
+        },
+        {
+          name: "clear",
+          title: "娓呯┖",
+          icon: require("@/assets/images/scrub.png"),
+        },
+        {
+          name: "undo",
+          title: "鎾ら攢",
+          icon: require("@/assets/images/revoke.png"),
+        },
+        {
+          name: "save",
+          title: "淇濆瓨",
+          icon: require("@/assets/images/save.png"),
+        },
       ],
+      num: 0,
     };
   },
   methods: {
-    onChangeTool(tool) {
+    onChangeTool(tool, index) {
+      if (index == 0 || index == 1) this.num = index;
       this.$emit("change-tool", tool);
     },
   },
@@ -45,6 +73,10 @@
 </script>
 
 <style scoped>
+.tools {
+  display: flex;
+  align-items: center;
+}
 .tools button {
   /* border-radius: 50%; */
   width: 32px;
@@ -71,4 +103,7 @@
 .tools button i {
   font-size: 20px;
 }
+.giaffiti-btn {
+  width: 24px;
+}
 </style>
diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue
index 8980a01..de1beef 100644
--- a/src/components/graffiti/index.vue
+++ b/src/components/graffiti/index.vue
@@ -14,8 +14,7 @@
       </div>
     </div>
     <div class="footer">
-      <BrushSize :size="brushSize" @change-size="onChangeSize" />
-      <ColorPicker :color="brushColor" @change-color="onChangeColor" />
+      <BrushSize :size="brushSize" @change-size="onChangeSize"  @change-color="onChangeColor" />
       <ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
     </div>
   </div>
@@ -23,11 +22,18 @@
 
 <script>
 import BrushSize from "./components/brushSize.vue";
-import ColorPicker from "./components/colorPicker.vue";
 import ToolBtns from "./components/toolBtns.vue";
 export default {
   name: "graffiti",
-  components: { BrushSize, ColorPicker, ToolBtns },
+  components: { BrushSize, ToolBtns },
+  props:{
+    page:{
+      type:Number
+    },
+    bcImg:{
+      type:String
+    }
+  },
   data() {
     return {
       canvas: null,
@@ -42,16 +48,17 @@
         top: 0,
       },
       backgroundImage:
-        "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
+        "",
     };
   },
   mounted() {
+    this.backgroundImage = this.bcImg
     this.canvas = document.getElementById("canvas");
     if (this.canvas.getContext) {
       this.context = this.canvas.getContext("2d", { willReadFrequently: true });
       this.initCanvas();
       // window.addEventListener('resize', updateCanvasPosition);
-      window.addEventListener("scroll", this.updateCanvasOffset); // 娣诲姞婊氬姩鏉℃粴鍔ㄤ簨浠剁洃鍚櫒
+      window.addEventListener("scroll",this.updateCanvasOffset,true); // 娣诲姞婊氬姩鏉℃粴鍔ㄤ簨浠剁洃鍚櫒
       this.getCanvasOffset();
       this.context.lineGap = "round";
       this.context.lineJoin = "round";
@@ -61,6 +68,10 @@
       this.canvas.addEventListener("mouseleave", this.closePaint);
     }
     this.toolClear();
+    const oldData = localStorage.getItem('graffiti-data')
+    if(oldData) {
+      this.backgroundImage = oldData
+    }
   },
   methods: {
     changeBackground(imgUrl) {
@@ -143,6 +154,7 @@
     },
     onChangeTool(tool) {
       this.brushTool = tool;
+      console.log(tool);
       switch (tool) {
         case "clear":
           this.toolClear();
@@ -159,18 +171,30 @@
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
       this.resetToolActive();
     },
+    // 鍘熶繚瀛樻柟娉�
     toolSave() {
-      const imageDataUrl = this.canvas.toDataURL("image/png");
-      console.log(imageDataUrl);
-      // const imgUrl = canvas.toDataURL('image/png');
-      // const el = document.createElement('a');
-      // el.setAttribute('href', imgUrl);
-      // el.setAttribute('target', '_blank');
-      // el.setAttribute('download', `graffiti-${Date.now()}`);
-      // document.body.appendChild(el);
-      // el.click();
-      // document.body.removeChild(el);
-      // resetToolActive();
+      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:800,});
+      localStorage.setItem('graffiti-data',imgData)
+    },
+    // 淇濆瓨鏂规硶锛屼繚瀛樹负涓�寮犲浘鐗囧苟涓嬭浇
+    saveImgData() {
+      var link = document.createElement("a");
+      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
+      var strDataURI = imgData.substr(22, imgData.length);
+      var blob = dataURLtoBlob(imgData);
+      var objurl = URL.createObjectURL(blob);
+      link.download = "grid1.png";
+      link.href = objurl;
+      link.click();
+    
+      function  dataURLtoBlob(dataurl) {
+        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+        while(n--){
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], {type:mime});
+      }
     },
     toolUndo() {
       if (this.historyData.length <= 0) {
@@ -180,13 +204,13 @@
       const lastIndex = this.historyData.length - 1;
       this.context.putImageData(this.historyData[lastIndex], 0, 0);
       this.historyData.pop();
-
       this.resetToolActive();
     },
     // 瀛樺偍鏁版嵁
     saveData(data) {
       this.historyData.length >= 50 && this.historyData.shift(); // 璁剧疆鍌ㄥ瓨涓婇檺涓�50姝�
       this.historyData.push(data);
+      console.log('鏁版嵁',this.historyData);
     },
     // 娓呴櫎銆佹挙閿�銆佷繚瀛樼姸鎬佷笉闇�瑕佷繚鎸侊紝鎿嶄綔瀹屽悗鎭㈠绗斿埛鐘舵��
     resetToolActive() {
@@ -202,7 +226,7 @@
 .page {
   display: flex;
   flex-direction: column;
-  width: 1038px;
+  width:100%;
   height: 866px;
 }
 

--
Gitblit v1.9.1