优化

src/saas/AppCountryAlbum/Watermark.vue

@@ -6,8 +6,9 @@
         <image src="./images/to-right.png" />
       </div>
     </div>
+    <div class="photo-wrapper">
       <div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
-      <image class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
+        <img class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
         <div
           class="watermark"
           v-if="currIndex > -1 && currWatermarkConfig.length"
@@ -21,6 +22,7 @@
           <span v-if="!isHide" class="watermark-edit" @click.stop="toEdit" data-html2canvas-ignore>编辑</span>
         </div>
       </div>
+    </div>
     <div class="photo-bottom" data-html2canvas-ignore>
       <div class="photo-bottom__top">
         <span @click.stop="isHide = true">取消</span>
@@ -393,15 +395,21 @@
 
 <style lang="scss" scoped>
   .photo {
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
     width: 100%;
-    height: 100vh;
     background: #333;
     overflow: hidden;
 
+    .photo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 128px;
+      left: 0;
+      width: 100%;
+      height: calc(100vh - 321px - 128px);
+    }
+
     .newImg {
       position: fixed;
       left: 0;
@@ -564,13 +572,13 @@
     }
 
     .waterMarker-wrapper {
-      width: 100%;
+      position: relative;
-      max-height: 100vh;
+      max-height: calc(100vh - 321px - 128px);
       overflow: hidden;
 
       .waterMarker-img {
         width: 100%;
-        max-height: 100vh;
+        max-height: calc(100vh - 321px - 128px);
       }
 
       .watermark {
@@ -637,7 +645,7 @@
       left: 0;
       z-index: 10;
       width: 100%;
-      padding-bottom: 40px;
+      height: 321px;
       background: #FFFFFF;
       border-radius: 32px 32px 0px 0px;
       border: 1px solid #DDDDDD;