优化

src/saas/AppCountryAlbum/AddReport.vue

@@ -2,18 +2,24 @@
   <div class="report">
     <components class="report-item" ref="reportItem" :config="currConfig" v-if="currConfig.length" :is="component"></components>
     <div class="report-list" data-html2canvas-ignore>
-      <div
+      <div class="report-btns">
-        class="report-item"
+        <span @click="back">返回</span>
-        :key="index"
+        <h2>拼图模板</h2>
-        v-for="(item, index) in configList"
+        <span @click="save">保存</span>
-        :class="[currIndex === index ? 'active' : '']"
+      </div>
-        @click="changeComponent(item, index)">
+      <div class="report-wrapper">
-        <image class="img" :src="item.thum" />
+        <div
-        <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
+          class="report-item"
-        <span @click="toEdit">编辑</span>
+          :key="index"
+          v-for="(item, index) in configList"
+          :class="[currIndex === index ? 'active' : '']"
+          @click="changeComponent(item, index)">
+          <image class="img" :src="item.thum" />
+          <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
+          <span @click="toEdit">编辑</span>
+        </div>
       </div>
     </div>
-    <div class="report-btn" data-html2canvas-ignore @click="save">完成</div>
   </div>
 </template>
 
@@ -66,6 +72,12 @@
         })
       },
 
+      back () {
+        uni.navigateBack({
+          delta: 1
+        })
+      },
+
       toEdit () {
         this.$refs.reportItem.linkTo()
       },
@@ -124,25 +136,25 @@
 <style lang="scss" scoped>
   .report {
     position: relative;
-    padding-bottom: 240px;
+    padding-bottom: 330px;
 
-    .report-btn {
+    .report-btns {
-      position: fixed;
+      display: flex;
-      bottom: 272px;
+      align-items: center;
-      left: 32px;
+      justify-content: space-between;
-      z-index: 11;
+      height: 96px;
-      width: 144px;
+      padding: 0 32px;
-      height: 64px;
-      line-height: 64px;
-      text-align: center;
-      background: #FFFFFF;
-      font-size: 32px;
-      color: #408EF6;
-      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
-      border-radius: 40px;
 
-      &:active {
+      span {
-        opacity: 0.7;
+        color: #222222;
+        font-size: 32px;
+        font-weight: 600;
+      }
+
+      h2 {
+        color: #333333;
+        font-size: 28px;
+        font-weight: 600;
       }
     }
 
@@ -157,16 +169,19 @@
 
     .report-list {
       position: fixed;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
       left: 0;
       bottom: 0;
       width: 100%;
-      height: 240px;
+      padding-bottom: 16px;
-      padding: 0 24px;
       background: #FFFFFF;
 
+      .report-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 24px;
+      }
+
       .report-item {
         position: relative;
         width: 176px;

src/saas/AppCountryAlbum/Watermark.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="photo" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}" @click="isHide = true">
+  <div class="photo" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
     <div class="photo-top" data-html2canvas-ignore>
       <div class="photo-top__middle" @click="isShowAlbum = true">
         <span>保存至：{{ albumName || '默认相册' }}</span>
@@ -19,7 +19,7 @@
     </div>
     <div class="photo-bottom" data-html2canvas-ignore>
       <div class="photo-bottom__top">
-        <span></span>
+        <span @click.stop="isHide = true">取消</span>
         <!-- <image src="./images/clear.png" @click.stop="isHide = true, currIndex = -1" /> -->
         <h2>水印</h2>
         <span @click.stop="isHide = true">确定</span>