焦点区域切换

src/components/ImageEd.scss

@@ -709,7 +709,7 @@ div {
       left: 680px;
       width: 64px;
       height: 32px;
-      background: #FFFFFF;
+      background: #ffffff;
       box-shadow: 0px 2px 6px 0px rgba(0, 21, 51, 0.2);
       border-radius: 4px;
       display: flex;
@@ -722,7 +722,7 @@ div {
       left: 608px;
       width: 64px;
       height: 32px;
-      background: #FFFFFF;
+      background: #ffffff;
       box-shadow: 0px 2px 6px 0px rgba(0, 21, 51, 0.2);
       border-radius: 4px;
       display: flex;
@@ -1249,6 +1249,15 @@ div {
     border: 2px solid $sourceB;
     display: flex;
     flex-direction: column;
+    .shade_source {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0);
+      z-index: 999;
+    }
     .preview-source {
       z-index: 9999;
       position: absolute;
@@ -1308,6 +1317,15 @@ div {
     border: 2px solid $targetB;
     display: flex;
     flex-direction: column;
+    .shade_target {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0);
+      z-index: 999;
+    }
     .preview-target {
       z-index: 9999;
       position: absolute;
@@ -1387,7 +1405,6 @@ div {
   color: #666;
 }
 
-
 // 修改滑动条样式
 // input[type="range"] {
 //   -webkit-appearance: none;

src/components/ImageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-09-09 09:28:46
- * @LastEditTime: 2021-10-20 14:36:40
+ * @LastEditTime: 2021-10-20 20:50:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
@@ -26,7 +26,7 @@
             <img v-else src="../assets/img/zcedit/drag_a.png" alt="">
           </div>
         </el-tooltip>
-        <el-tooltip class="item" effect="dark" content="放大">
+        <el-tooltip class="item" effect="dark" content="放大" placement="left">
           <div class="icon enlarge" @click="enlarge">
             <img v-if="!isEnlarge" src="../assets/img/zcedit/enlarge.png" alt="">
             <img v-else src="../assets/img/zcedit/enlarge_a.png" alt="">
@@ -36,7 +36,7 @@
         <div class="enlarge_options" v-show="isShowEnlargeSynchro">
           <el-checkbox v-model="isEnlargeSynchro">同步</el-checkbox>
         </div>
-        <el-tooltip class="item" effect="dark" content="原尺寸显示">
+        <el-tooltip class="item" effect="dark" content="原尺寸显示" placement="left">
           <div class="size_mix">
             <div class="icon_size" @click="sizeChange">
               <img class="size" v-if="!isActive" src="../assets/img/zcedit/size.png" alt="">
@@ -371,6 +371,7 @@
               </div>
             </div>
             <div class="edit" id="sourceEdit">编辑</div>
+            <div class="shade_source" v-show="type=='target'" @click.self="sourceEdit"></div>
           </div>
           <div class="target" @click.self="targetEdit">
             <div class="title">目标数据</div>
@@ -384,6 +385,7 @@
               </div>
             </div>
             <div class="edit" id="targetEdit">编辑</div>
+            <div class="shade_target" v-show="type=='source'" @click.self="targetEdit"></div>
           </div>
         </div>
         <div class="lt_main_footer">