update

src/components/studyStudent.vue

@@ -539,7 +539,7 @@
                           <div v-if="tooC == 4">
                             <img @click="addTools(tooC, toolIndex, taskCount)"
                               src="../assets/icon/thirdToolList/ask.png" alt />
-                            <div style="margin: 5px 0">选择题</div>
+                            <div style="margin: 5px 0">问卷调查</div>
                           </div>
                           <div v-if="tooC == 45">
                             <img @click="addTools(tooC, toolIndex, taskCount)"
@@ -820,7 +820,7 @@
                             alt=""
                           />-->
                           <div class="answerBg">
-                            <div>{{ w.sName }}</div>
+                            <!-- <div>{{ w.sName }}</div> -->
                             <el-tooltip class="item" effect="light" :content="JSON.parse(w.works)[0].answer"
                               placement="top">
                               <div class="answerContent">
@@ -840,6 +840,11 @@
                               v-if="w.userid == userid || tType == 1 || tType == 4" @click.stop="deleteWorks(w.wid)"
                               alt />
                           </div>
+                          <div class="comment">
+                            <div class="worksName">
+                              <div>{{ w.sName }}</div>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1328,7 +1333,7 @@
                           />-->
                           <div class="answerBg" style="border-radius: 15px 15px 0 0"
                             @click="commentOther(w, toolIndex, wIndex)">
-                            <div>{{ w.sName }}</div>
+                            <!-- <div>{{ w.sName }}</div> -->
                             <el-tooltip class="item" effect="light" :content="JSON.parse(w.works)[0].answer"
                               placement="top">
                               <div class="answerContent">
@@ -1349,6 +1354,9 @@
                               alt />
                           </div>
                           <div class="comment">
+                            <div class="worksName">
+                              <div>{{ w.sName }}</div>
+                            </div>
                             <div class="commentList">
                               <div class="commentImg" @click="
                                 isLikes(w.wid, userid, 1, null, w.isLikes)
@@ -2427,7 +2435,7 @@
     <el-dialog :title="noteName != '' ? noteName : '查看问卷'" :visible.sync="dialogVisibleChoice" :append-to-body="true"
       width="1000px" :before-close="handleClose" class="dialog_diy dialog_diy3">
       <div>
-        <div class="a_add_title" style="
+        <!-- <div class="a_add_title" style="
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -2435,7 +2443,7 @@
           ">
           <div style="margin-right: 20px; font-size: 20px">标题:</div>
           <div style="font-size: 20px">{{ testJson.testTitle }}</div>
-        </div>
+        </div> -->
         <div class="a_addBox">
           <div style="font-size: 16px; color: #c7c7c7">题目内容</div>
           <div class="a_add_box" v-for="(item1, index1) in testJson.testCount" :key="index1">
@@ -2656,8 +2664,8 @@
         <div class="drawPBox" v-if="commentDetail.img">
           <span>教师批注</span>
           <img :src="commentDetail.img" alt="" @click="previewImg(commentDetail.img)" />
-          <span class="deleteImg" v-if="tType == 1 || tType == 4"
-            @click.stop="deletePicturePaint(commentDetail.wid)" style="font-size: 14px;width: auto !important;color: #b4b4b4;top: unset;bottom: 0;border: none;padding: 0;height: auto !important;margin: 0;">删除</span>
+          <span class="deleteImg" v-if="tType == 1 || tType == 4" @click.stop="deletePicturePaint(commentDetail.wid)"
+            style="font-size: 14px;width: auto !important;color: #b4b4b4;top: unset;bottom: 0;border: none;padding: 0;height: auto !important;margin: 0;">删除</span>
         </div>
       </div>
       <div class="commentBox">
@@ -8134,8 +8142,8 @@ export default {
 }
 
 .answerBg>div:nth-child(1) {
-  font-size: 22px;
-  padding: 25px 0 10px;
+  /* font-size: 22px;
+  padding: 25px 0 10px; */
 }
 
 .answerContent {
@@ -8143,9 +8151,14 @@ export default {
   height: 60px;
   word-break: break-all;
   text-align: center;
-  white-space: nowrap;
+  /* white-space: nowrap; */
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: 23px 0 0;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  font-size: 15px;
 }
 
 .elist_input_box {
@@ -9340,7 +9353,7 @@ ol {
 .drawPBox {
   display: flex;
   flex-direction: column;
-  position:relative
+  position: relative
 }
 
 .drawPBox span {

src/components/tools/imgDraw/imgDraw.vue

@@ -1,64 +1,25 @@
 <template>
   <div class="imgDraw">
-    <a
-      href="javascript:void(0);"
-      ref="download"
-      download="picture.png"
-      v-show="false"
-    ></a>
+    <a href="javascript:void(0);" ref="download" download="picture.png" v-show="false"></a>
     <el-button type="primary" @click="handleShowCanvas">showCanvas</el-button>
-    <el-dialog
-      destroy-on-close
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-      :visible.sync="show"
-      fullscreen
-    >
+    <el-dialog destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
+      :visible.sync="show" fullscreen>
       <!-- <p slot="title" class="title">Vue-ImagePainter🎨</p> -->
       <div class="d_body">
         <div class="board" ref="board">
           <img id="img1" ref="img1" v-bind:src="baseMap" hidden="hidden" />
-          <canvas
-            id="ctx_front"
-            ref="ctx_front"
-            :style="'cursor:' + cursor"
-          ></canvas>
-          <canvas
-            id="ctx_base"
-            ref="ctx_base"
-            :style="'cursor:' + cursor"
-          ></canvas>
-          <canvas
-            id="ctx_back"
-            ref="ctx_back"
-            :style="'cursor:' + cursor"
-          ></canvas>
-          <input
-            name="text"
-            id="text"
-            @blur="handleTextBlur"
-            @keyup.enter="handleTextBlur"
-            v-model="text"
-            autofocus
-            autocomplete="off"
-            :style="
+          <canvas id="ctx_front" ref="ctx_front" :style="'cursor:' + cursor"></canvas>
+          <canvas id="ctx_base" ref="ctx_base" :style="'cursor:' + cursor"></canvas>
+          <canvas id="ctx_back" ref="ctx_back" :style="'cursor:' + cursor"></canvas>
+          <input name="text" id="text" @blur="handleTextBlur" @keyup.enter="handleTextBlur" v-model="text" autofocus
+            autocomplete="off" :style="
               'font-size:' + (this.slide * 10 + 14) + 'px;color:' + defaultColor
-            "
-          />
+            " />
         </div>
         <div :class="['tools', 'settings', isExpand ? '' : 'noExpand']">
-          <div
-            class="tool_item"
-            v-for="(item, index) in settings"
-            :key="item.icon"
-          >
+          <div class="tool_item" v-for="(item, index) in settings" :key="item.icon">
             <button v-if="index == 0">
-              <svg
-                class="icon"
-                aria-hidden="true"
-                :style="'color:' + defaultColor"
-              >
+              <svg class="icon" aria-hidden="true" :style="'color:' + defaultColor">
                 <use :xlink:href="item.icon" />
               </svg>
               <span :style="'color:' + defaultColor">{{ item.name }}</span>
@@ -68,16 +29,8 @@
               <svg class="icon" aria-hidden="true">
                 <use :xlink:href="item.icon" />
               </svg>
-              <span>{{ item.name }}</span
-              >&emsp;&emsp;
-              <el-slider
-                ref="slide"
-                v-model="slide"
-                :min="1"
-                :max="100"
-                :step="1"
-                style="width: 70px"
-              ></el-slider>
+              <span>{{ item.name }}</span>&emsp;&emsp;
+              <el-slider ref="slide" v-model="slide" :min="1" :max="100" :step="1" style="width: 70px"></el-slider>
             </div>
             <button v-else @click.stop="item.fun">
               <svg class="icon" aria-hidden="true">
@@ -87,23 +40,15 @@
             </button>
           </div>
           <div class="tool_item" v-for="item in btns" :key="item.icon">
-            <button
-              @click.stop="item.fun"
-              v-if="item.name == '上一步'"
-              :disabled="prevDis"
-              :style="prevDis ? 'cursor:not-allowed' : ''"
-            >
+            <button @click.stop="item.fun" v-if="item.name == '上一步'" :disabled="prevDis"
+              :style="prevDis ? 'cursor:not-allowed' : ''">
               <svg class="icon" aria-hidden="true">
                 <use :xlink:href="item.icon" />
               </svg>
               <span>{{ item.name }}</span>
             </button>
-            <button
-              @click.stop="item.fun"
-              v-else-if="item.name == '下一步'"
-              :disabled="nextDis"
-              :style="nextDis ? 'cursor:not-allowed' : ''"
-            >
+            <button @click.stop="item.fun" v-else-if="item.name == '下一步'" :disabled="nextDis"
+              :style="nextDis ? 'cursor:not-allowed' : ''">
               <svg class="icon" aria-hidden="true">
                 <use :xlink:href="item.icon" />
               </svg>
@@ -124,35 +69,16 @@
           </div>
           <div class="pull" v-if="!isExpand">
             <span class="line"></span>
-            <span
-              class="round"
-              title="展开"
-              @click.stop="handleShowOrHide(1)"
-            ></span>
+            <span class="round" title="展开" @click.stop="handleShowOrHide(1)"></span>
           </div>
         </div>
         <div :class="['tools', 'bars', showTools ? '' : 'hideTools']">
-          <div
-            class="el-icon-s-tools arrow"
-            v-if="!showTools"
-            title="展开"
-            @click.stop="handleShowTools(1)"
-          ></div>
-          <div
-            class="el-icon-arrow-right arrow"
-            v-else
-            title="收起"
-            @click.stop="handleShowTools(0)"
-          ></div>
-          <div
-            :class="[
-              'tool_item',
-              activeTool == item.toolType ? 'activeTool' : '',
-            ]"
-            v-for="item in tools"
-            :key="item.toolType"
-            @click.stop="handleChangeToolType(item.toolType)"
-          >
+          <div class="el-icon-s-tools arrow" v-if="!showTools" title="展开" @click.stop="handleShowTools(1)"></div>
+          <div class="el-icon-arrow-right arrow" v-else title="收起" @click.stop="handleShowTools(0)"></div>
+          <div :class="[
+            'tool_item',
+            activeTool == item.toolType ? 'activeTool' : '',
+          ]" v-for="item in tools" :key="item.toolType" @click.stop="handleChangeToolType(item.toolType)">
             <svg class="icon" aria-hidden="true">
               <use :xlink:href="item.icon" />
             </svg>
@@ -329,6 +255,9 @@ export default {
     handleChangeToolType(type) {
       this.activeTool = type;
       switch (type) {
+        case 0:
+          this.cursor = `pointer`;
+          break;
         case 1:
           this.cursor = `url('${cursors.pen}'),auto`;
           break;
@@ -385,7 +314,7 @@ export default {
         let _wWith = window.screen.availWidth - 100
         let _width = parseInt(this.width);
         let _height = parseInt(this.height);
-        let width =  _wWith
+        let width = _wWith
         let height = _height / _width * width
         _this.currentImg.width = width;
         _this.currentImg.height = height;
@@ -474,6 +403,8 @@ export default {
       );
     },
     handleDrawCanvas(type) {
+      // type
+      // const type = this.activeTool
       this.canDraw = false;
       let sx, sy, mx, my;
       let text = document.getElementById("text");
@@ -492,6 +423,7 @@ export default {
         );
         this.ctx_front.moveTo(sx, sy);
         this.canDraw = true;
+
         switch (type) {
           case 1:
             this.ctx_front.beginPath();
@@ -554,7 +486,7 @@ export default {
               // eslint-disable-next-line no-case-declarations
               let rds = Math.sqrt(
                 (sx - 10 - mx) * (sx - 10 - mx) +
-                  (sy - 49 - my) * (sy - 49 - my)
+                (sy - 49 - my) * (sy - 49 - my)
               );
               this.ctx_front.arc(sx - 15, sy - 69, rds, 0, Math.PI * 2, false);
               this.ctx_front.stroke();
@@ -593,18 +525,25 @@ export default {
       this.canvas_front.onmouseup = (e) => mouseup(e);
       this.canvas_front.onmouseout = (e) => mouseup(e);
       this.canvas_front.onmouseleave = (e) => mouseup(e);
-      
-      this.canvas_front.addEventListener("touchstart", (e) => {
-        mousedown(e.touches[0]);
-      });
-      this.canvas_front.addEventListener("touchmove", (e) => {
-        event.preventDefault();
-        mousemove(e.touches[0]);
-      });
-      this.canvas_front.addEventListener("touchend", (e) => {
-        // mousemove(e.touches[0])
-        mouseup(e.touches[0]);
-      });
+
+      const newHandlemousedown = function (e) {
+        mousedown(e.touches[0])
+      }
+      const newHandlemousemove = function (e) {
+        mousemove(e.touches[0])
+      }
+      const newHandlemouseup = function (e) {
+        mouseup(e.touches[0])
+      }
+      // this.canvas_front.removeEventListener("touchstart",newHandlemousedown,true);
+      // this.canvas_front.removeEventListener("touchmove",newHandlemousemove,true);
+      // this.canvas_front.removeEventListener("touchend",newHandlemouseup,true);
+      this.canvas_front.ontouchstart = newHandlemousedown
+      this.canvas_front.ontouchmove = newHandlemousemove
+      this.canvas_front.ontouchend = newHandlemouseup
+      // this.canvas_front.addEventListener("touchstart",newHandlemousedown,false);
+      // this.canvas_front.addEventListener("touchmove",newHandlemousemove,false);
+      // this.canvas_front.addEventListener("touchend",newHandlemouseup,false);
       // this.canvas_front.ontouchstart = (e) => mousedown(e);
       // this.canvas_front.ontouchmove = (e) => mousemove(e);
 
@@ -704,12 +643,103 @@ export default {
       console.log(url);
       this.$emit("addImgDraw", url);
     },
+    //双指
+    doubleFin() {
+      // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
+      let that = this;
+      this.$nextTick(() => {
+        // 获取放大或缩小的区域DOM
+        let matrix_box = document.querySelector(".board");
+        matrix_box.addEventListener("touchstart", function (event) {
+          var touches = event.touches;
+          var events = touches[0];
+          var events2 = touches[1];
+
+          // event.preventDefault();
+
+          // 第一个触摸点的坐标
+          that.displacement.pageX = events.pageX;
+          that.displacement.pageY = events.pageY;
+
+          that.displacement.moveable = true;
+
+          if (events2) {
+            that.displacement.pageX2 = events2.pageX;
+            that.displacement.pageY2 = events2.pageY;
+          }
+
+          that.displacement.originScale = that.displacement.scale || 1;
+          // console.log(that.displacement);
+        });
+        document.addEventListener("touchmove", function (event) {
+          if (!that.displacement.moveable) {
+            return;
+          }
+
+          event.preventDefault();
+
+          var touches = event.touches;
+          var events = touches[0];
+          var events2 = touches[1];
+          // 双指移动
+          if (events2) {
+            // 第2个指头坐标在touchmove时候获取
+            if (!that.displacement.pageX2) {
+              that.displacement.pageX2 = events2.pageX;
+            }
+            if (!that.displacement.pageY2) {
+              that.displacement.pageY2 = events2.pageY;
+            }
+
+            // 双指缩放比例计算
+            var zoom =
+              that.getDistance(
+                {
+                  x: events.pageX,
+                  y: events.pageY
+                },
+                {
+                  x: events2.pageX,
+                  y: events2.pageY
+                }
+              ) /
+              that.getDistance(
+                {
+                  x: that.displacement.pageX,
+                  y: that.displacement.pageY
+                },
+                {
+                  x: that.displacement.pageX2,
+                  y: that.displacement.pageY2
+                }
+              );
+            // 应用在元素上的缩放比例
+            var newScale = that.displacement.originScale * zoom;
+            // 最大缩放比例限制
+            // if (newScale > 1) {
+            //   newScale = 1;
+            // }
+            // 记住使用的缩放值
+            that.displacement.scale = newScale;
+
+            this.currentImg.scale = newScale
+            this.handleDrawImage()
+            // 图像应用缩放效果
+            // console.log(newScale);
+            // matrix_box.style.transform = "scale(" + newScale + ")";
+            // 设置旋转元素的基点位置
+            // matrix_box.style.transformOrigin = "0px 0px 0px";
+          }
+        });
+      });
+    }
   },
   mounted() {
     this.$nextTick(() => {
       this.show = this.drawShow;
       this.handleInitCanvas();
       this.handleChangeToolType(1);
+      this.doubleFin();
     });
   },
   watch: {
@@ -719,7 +749,40 @@ export default {
       this.ctx_front = null;
       this.ctx_back = null;
       this.handleInitCanvas();
-      this.handleChangeToolType(1);
+      if (this.$equipment()) {
+        this.handleChangeToolType(0);
+
+        this.tools = [
+          {
+            icon: "#icon-zhixian_huaban1",
+            name: "移动",
+            toolType: 0,
+          }, {
+            icon: "#icon-huabi_huaban1",
+            name: "画笔",
+            toolType: 1,
+          },
+          {
+            icon: "#icon-wenzi_huaban1",
+            name: "文字",
+            toolType: 6,
+          },
+        ]
+      } else {
+        this.handleChangeToolType(1);
+
+        this.tools = [{
+          icon: "#icon-huabi_huaban1",
+          name: "画笔",
+          toolType: 1,
+        },
+        {
+          icon: "#icon-wenzi_huaban1",
+          name: "文字",
+          toolType: 6,
+        },
+        ]
+      }
     },
   },
 };
@@ -732,6 +795,7 @@ export default {
   padding: 0;
   box-sizing: border-box;
 }
+
 .icon {
   width: 1em;
   height: 1em;
@@ -739,23 +803,28 @@ export default {
   fill: currentColor;
   overflow: hidden;
 }
-.imgDraw >>> .el-dialog {
+
+.imgDraw>>>.el-dialog {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.imgDraw >>> .el-dialog > div {
+
+.imgDraw>>>.el-dialog>div {
   width: 100%;
   box-sizing: border-box;
 }
-.imgDraw >>> .el-dialog .el-dialog__header {
+
+.imgDraw>>>.el-dialog .el-dialog__header {
   padding: 0 20px;
 }
-.imgDraw >>> .el-dialog .el-dialog__header p {
+
+.imgDraw>>>.el-dialog .el-dialog__header p {
   padding: 20px 0;
   border-bottom: 1px solid #bdbdbd;
 }
-.imgDraw >>> .el-dialog .el-dialog__body {
+
+.imgDraw>>>.el-dialog .el-dialog__body {
   padding: 10px 20px;
   flex: 1;
   height: 0;
@@ -763,32 +832,39 @@ export default {
   position: relative;
   overflow: hidden;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body {
   height: 100%;
   overflow-y: auto;
   padding-top: 20px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .board {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .board {
   position: relative;
   min-height: 100%;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .board canvas {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .board canvas {
   position: absolute;
   margin: 0 auto;
   left: 0;
   right: 0;
   top: 0;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .board #ctx_front {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #ctx_front {
   z-index: 5;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .board #ctx_back {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #ctx_back {
   z-index: 3;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .board #ctx_base {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #ctx_base {
   z-index: 1;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .board #text {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #text {
   position: absolute;
   z-index: -1;
   resize: none;
@@ -799,7 +875,8 @@ export default {
   line-height: 30px;
   display: none;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .tools {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .tools {
   width: 100%;
   position: absolute;
   display: flex;
@@ -807,7 +884,8 @@ export default {
   background: #ffffff;
   transition: all 0.2s ease-in-out;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings {
   top: 0;
   left: 50%;
   transform: translateX(-50%);
@@ -819,23 +897,22 @@ export default {
   border-top: 0;
   width: auto;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings .tool_item {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .tool_item {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
 }
-.imgDraw
-  >>> .el-dialog
-  .el-dialog__body
-  .d_body
-  .settings
-  .tool_item:not(:last-of-type) {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .tool_item:not(:last-of-type) {
   margin-right: 25px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings .go_up {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .go_up {
   margin-right: 0 !important;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings button {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -847,75 +924,57 @@ export default {
   position: relative;
   flex-wrap: nowrap;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings button svg {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button svg {
   color: #333333;
   font-size: 18px;
   margin-right: 5px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings button span {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button span {
   white-space: nowrap;
 }
-.imgDraw
-  >>> .el-dialog
-  .el-dialog__body
-  .d_body
-  .settings
-  button
-  >>> .el-color-picker {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button>>>.el-color-picker {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
 }
-.imgDraw
-  >>> .el-dialog
-  .el-dialog__body
-  .d_body
-  .settings
-  button
-  >>> .el-color-picker
-  .el-color-picker__trigger {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button>>>.el-color-picker .el-color-picker__trigger {
   width: 100%;
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings .slide {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide {
   width: 150px;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings .slide svg {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide svg {
   font-size: 18px;
   margin-right: 5px;
 }
-.imgDraw
-  >>> .el-dialog
-  .el-dialog__body
-  .d_body
-  .settings
-  .slide
-  >>> .el-slider {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide>>>.el-slider {
   flex: 1;
   width: 0;
   margin-left: 10px;
 }
-.imgDraw
-  >>> .el-dialog
-  .el-dialog__body
-  .d_body
-  .settings
-  .slide
-  >>> .el-slider
-  .el-slider__button-wrapper
-  .el-slider__button {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide>>>.el-slider .el-slider__button-wrapper .el-slider__button {
   width: 12px;
   height: 12px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings .pull {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .pull {
   position: absolute;
   right: 20px;
   bottom: -45px;
@@ -925,19 +984,22 @@ export default {
   justify-content: flex-start;
   margin-right: 0;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings .pull .line {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .pull .line {
   width: 2px;
   height: 30px;
   background: dodgerblue;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .settings .pull .round {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .pull .round {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: dodgerblue;
   cursor: pointer;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars {
   top: 100px;
   right: 30px;
   z-index: 10;
@@ -949,42 +1011,47 @@ export default {
   display: flex;
   flex-direction: column;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .tool_item {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item {
   cursor: pointer;
 }
-.imgDraw
-  >>> .el-dialog
-  .el-dialog__body
-  .d_body
-  .bars
-  .tool_item:not(:last-of-type) {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item:not(:last-of-type) {
   margin-bottom: 15px;
   border-bottom: 1px solid #dddddd;
   padding-bottom: 10px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .tool_item svg {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item svg {
   font-size: 24px;
   margin-right: 8px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .tool_item span {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item span {
   font-size: 18px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .tool_item:hover svg {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item:hover svg {
   color: dodgerblue;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .tool_item:hover span {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item:hover span {
   color: dodgerblue;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .activeTool {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .activeTool {
   border-color: dodgerblue !important;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .activeTool svg {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .activeTool svg {
   color: dodgerblue;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .activeTool span {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .activeTool span {
   color: dodgerblue;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .arrow {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .arrow {
   width: 20px;
   height: 20px;
   text-align: center;
@@ -999,7 +1066,8 @@ export default {
   transform: translateY(-50%);
   cursor: pointer;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .el-icon-s-tools {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .el-icon-s-tools {
   left: -30px;
   width: 30px;
   height: 30px;
@@ -1008,30 +1076,37 @@ export default {
   color: dodgerblue;
   border-color: dodgerblue;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .bars .el-icon-arrow-right {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .el-icon-arrow-right {
   left: calc(100% - 10px);
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .hideTools {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .hideTools {
   right: -100px;
 }
-.imgDraw >>> .el-dialog .el-dialog__body .d_body .noExpand {
+
+.imgDraw>>>.el-dialog .el-dialog__body .d_body .noExpand {
   top: -50px;
 }
-.imgDraw >>> .el-dialog .el-dialog__footer {
+
+.imgDraw>>>.el-dialog .el-dialog__footer {
   text-align: center !important;
 }
-.imgDraw >>> .el-dialog .el-dialog__footer span button {
+
+.imgDraw>>>.el-dialog .el-dialog__footer span button {
   padding-left: 40px;
   padding-right: 40px;
 }
-.imgDraw >>> .el-dialog .el-dialog__footer span button:first-of-type {
+
+.imgDraw>>>.el-dialog .el-dialog__footer span button:first-of-type {
   margin-right: 50px;
 }
-.imgDraw >>> .el-dialog .el-dialog__footer span button:last-of-type {
+
+.imgDraw>>>.el-dialog .el-dialog__footer span button:last-of-type {
   margin-left: 50px;
 }
 
-div{
+div {
   user-select: none;
 }
 </style>

src/main.js

@@ -19,6 +19,10 @@ Vue.use(VideoPlayer).use(VueCookies).use(hevueImgPreview, {
     clickMaskCLose: true
 })
 Vue.prototype.$echarts = echarts
+Vue.prototype.$equipment=function(){
+    let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+   return flag;
+}
 Vue.config.productionTip = false
 Vue.prototype.$store = store; // 将store实例挂在vue原型上
 Vue.prototype.ajax = ajax