bug

src/saas/AppCountryAlbum/Watermark.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="photo" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
+  <div class="photo" :class="[isHide ? 'home-active' : '']" @click="isHide = true" :style="{height: height + 'px'}">
     <div class="photo-top" data-html2canvas-ignore>
       <div class="photo-top__middle" @click="isShowAlbum = true">
         <span>保存至：{{ albumName || '默认相册' }}</span>
@@ -15,6 +15,10 @@
         @touchstart="onTouchstart"
         @touchmove="onTouchmove">
         <component ref="WatermarkItem" :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
+        <div v-if="!isHide" @click.stop="currIndex = -1" class="watermark-close" data-html2canvas-ignore>
+          <image src="./images/close-b.png" />
+        </div>
+        <span v-if="!isHide" class="watermark-edit" @click.stop="toEdit" data-html2canvas-ignore>编辑</span>
       </div>
     </div>
     <div class="photo-bottom" data-html2canvas-ignore>
@@ -559,8 +563,53 @@
         position: absolute;
         left: 32px;
         z-index: 11;
+        padding: 8px;
         color: #FFFFFF;
         font-size: 28px;
+        border: 2px solid #FFFFFF;
+
+        .watermark-edit {
+          position: absolute;
+          right: 0;
+          top: 0;
+          z-index: 1;
+          width: 80px;
+          height: 48px;
+          line-height: 48px;
+          text-align: center;
+          background: #FFFFFF;
+          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+          border-radius: 24px;
+          color: #222222;
+          font-size: 24px;
+          transform: translate(50%, -50%);
+
+          image {
+            width: 32px;
+            height: 32px;
+          }
+        }
+
+        .watermark-close {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 1;
+          width: 48px;
+          height: 48px;
+          background: #FFFFFF;
+          border-radius: 50%;
+          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+          transform: translate(-50%, -50%);
+
+          image {
+            width: 32px;
+            height: 32px;
+          }
+        }
       }
     }
 
@@ -791,6 +840,7 @@
       }
 
       .watermark {
+        border-color: transparent;
         // bottom: 38px;
       }
     }