diff --git a/package.json b/package.json
index 792775f9..c03f7850 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "core-js": "^3.11.0",
     "dayjs": "^1.10.6",
     "echarts": "^4.9.0",
+    "html2canvas": "^1.4.1",
     "recorder-core": "^1.1.21080800",
     "regenerator-runtime": "^0.12.1",
     "vue": "^2.6.11",
diff --git a/src/saas/AppCountryAlbum/Watermark.vue b/src/saas/AppCountryAlbum/Watermark.vue
index 337db65a..f6c59653 100644
--- a/src/saas/AppCountryAlbum/Watermark.vue
+++ b/src/saas/AppCountryAlbum/Watermark.vue
@@ -1,29 +1,106 @@
 <template>
-  <div class="photo">
-    <image mode="aspectFit" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
+  <div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
+    <div class="photo-top" data-html2canvas-ignore>
+      <image src="./images/gengduo1.png" />
+      <div class="photo-top__middle">
+        <span>保存至：默认相册</span>
+        <image src="./images/gengduo1.png" />
+      </div>
+      <span @click="save">保存</span>
+    </div>
+    <image
+      mode="aspectFit"
+      crossorigin="anonymous"
+      src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
+    <div class="watermark">
+      <component :is="'Watermark' + (currIndex + 1)"></component>
+    </div>
+    <div class="photo-bottom" v-if="!isHide">
+      <div class="photo-bottom__top">
+        <image src="./images/gengduo1.png" />
+        <h2>水印</h2>
+        <span>确定</span>
+      </div>
+      <div class="waterlist">
+        <div
+          class="water-item"
+          :class="[currIndex === index ? 'active' : '']"
+          v-for="(item, index) in config"
+          :key="index"
+          @click="currIndex = index">
+          <image :src="item.thum" mode="aspectFill" />
+          <div class="water-item__bottom">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <image class="newImg" @click="waterSrc = ''" :src="waterSrc" v-if="waterSrc" />
   </div>
 </template>
 
 <script>
+  import html2canvas from 'html2canvas'
+  import Watermark1 from './components/watermark/Watermark1'
+  import Watermark2 from './components/watermark/Watermark2'
+  import Watermark3 from './components/watermark/Watermark3'
+  import Watermark4 from './components/watermark/Watermark4'
+  import Watermark5 from './components/watermark/Watermark5'
+  import Watermark6 from './components/watermark/Watermark6'
+  import Watermark7 from './components/watermark/Watermark7'
+  import Watermark8 from './components/watermark/Watermark8'
+
+  import { config } from './config'
   export default {
     name: 'Watermark',
 
     appName: '水印相机',
 
+    components: {
+      Watermark1,
+      Watermark2,
+      Watermark3,
+      Watermark4,
+      Watermark5,
+      Watermark6,
+      Watermark7,
+      Watermark8
+    },
+
     data () {
       return {
-
+        src: '',
+        config,
+        currIndex: 0,
+        isHide: false,
+        height: '100%',
+        waterSrc: ''
       }
     },
 
     onLoad () {
-
+      this.height = uni.getSystemInfoSync().windowHeight
     },
 
     methods: {
-      back () {
-        uni.navigateBack({
-          delta: 1
+      save () {
+        this.isHide = true
+        console.log(this.$refs.waterMarker.offsetHeight)
+        this.$nextTick(() => {
+          setTimeout(() => {
+            html2canvas(this.$refs.waterMarker, {
+              allowTaint: true,
+              useCORS: true,
+              backgroundColor: '#fff',
+              width: this.$refs.waterMarker.offsetWidth,
+              height: this.$refs.waterMarker.offsetHeight,
+              scale: 1
+            }).then((canvas) => {
+              let dataURL = canvas.toDataURL("image/png");
+              this.waterSrc = dataURL
+              console.log(dataURL)
+            }).catch(e => {
+              console.log(e)
+            })
+          }, 2000)
         })
       }
     }
@@ -34,8 +111,163 @@
   .photo {
     position: relative;
     width: 100%;
-    height: 100vh;
-    background: #000;
+    height: 800px;
+    background: #444;
+    overflow: hidden;
+
+    .newImg {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 11111;
+      width: 100%;
+      height: 100%;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .watermark {
+      position: fixed;
+      left: 32px;
+      bottom: 512px;
+      z-index: 111;
+      color: #FFFFFF;
+      font-size: 28px;
+    }
+
+    .photo-bottom {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      height: 474px;
+      background: #FFFFFF;
+      border-radius: 32px 32px 0px 0px;
+
+      .waterlist {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        height: calc(100% - 96px);
+        padding: 18px 16px;
+        overflow-y: auto;
+
+        .water-item {
+          display: flex;
+          position: relative;
+          align-items: center;
+          justify-content: center;
+          width: 352px;
+          height: 240px;
+          margin-bottom: 16px;
+          background: #2A3540;
+          border-radius: 8px;
+          overflow: hidden;
+
+          &.active {
+            border: 6px solid #408EF6;
+          }
+
+          image {
+            width: 176px;
+            height: 200px;
+          }
+
+          .water-item__bottom {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 56px;
+            line-height: 56px;
+            color: #fff;
+            text-align: center;
+            font-size: 28px;
+            background: rgba(0, 0, 0, 0.7);
+          }
+        }
+      }
+
+      .photo-bottom__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 96px;
+        padding: 0 32px;
+
+        image {
+          width: 40px;
+          height: 40px;
+        }
+
+        h2 {
+          font-size: 28px;
+          color: #333;
+        }
+
+        span {
+          font-size: 32px;
+          color: #222;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .photo-top {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      justify-content: space-between;
+      top: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      height: 128px;
+      padding: 0 32px;
+      background: rgba(0, 0, 0, 0.5);
+
+      & > image {
+        width: 28px;
+        height: 28px;
+      }
+
+      & > span {
+        color: #cbcbcb;
+        font-size: 32px;
+      }
+
+      .photo-top__middle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 336px;
+        height: 72px;
+        background: #0B111F;
+        border-radius: 40px;
+        font-size: 28px;
+        color: #cbcbcb;
+
+        image {
+          width: 32px;
+          height: 32px;
+          margin-left: 16px;
+        }
+      }
+    }
+
+    &.home-active {
+      .photo-bottom {
+        transform: translateY(100%);
+      }
+
+      .watermark {
+        bottom: 38px;
+      }
+    }
 
     & > image {
       width: 100%;
diff --git a/src/saas/AppCountryAlbum/components/Daily.vue b/src/saas/AppCountryAlbum/components/Daily.vue
index 1e6cdf33..9c9dd5a5 100644
--- a/src/saas/AppCountryAlbum/components/Daily.vue
+++ b/src/saas/AppCountryAlbum/components/Daily.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Daily">
+  <div class="Daily" ref="home">
     <div class="top">
       <span>请输入汇报单位</span>
     </div>
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div class="add">
-        <div class="add-btn">
+        <div class="add-btn" @click="choose">
           <span>添加图片</span>
         </div>
         <div class="add-btn">
@@ -34,6 +34,7 @@
 </template>
 
 <script>
+  import html2canvas from 'html2canvas'
   export default {
     name: 'Daily',
 
@@ -50,7 +51,21 @@
     },
 
     methods: {
-
+      choose () {
+        html2canvas(this.$refs.home, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: '#fff',
+          width: this.$refs.home.offsetWidth,
+          scale: 4,
+        }).then((canvas) => {
+          let dataURL = canvas.toDataURL("image/png");
+          this.src = dataURL
+          console.log(dataURL)
+        }).catch(e => {
+          console.log(e)
+        })
+      }
     }
   }
 </script>
diff --git a/src/saas/AppCountryAlbum/components/Home.vue b/src/saas/AppCountryAlbum/components/Home.vue
index 9a49c607..7cfdae7a 100644
--- a/src/saas/AppCountryAlbum/components/Home.vue
+++ b/src/saas/AppCountryAlbum/components/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="album-home">
+  <div class="album-home" ref="home">
     <div class="userinfo">
       <image src="https://pica.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_is.jpg?source=32738c0c" />
       <div class="right">
@@ -19,8 +19,8 @@
     </div>
     <div class="album-operate">
       <div class="left">
-        <div class="left-item">
-          <image src="../images/paizhao.png" @click="linkTo('/saas/AppCountryAlbum/Watermark')" />
+        <div class="left-item" @click="linkTo('./Watermark')">
+          <image src="../images/paizhao.png" />
           <span>拍照</span>
         </div>
         <div class="left-item" @click="linkTo('./AddReport')">
@@ -69,6 +69,7 @@
         </div>
       </div>
     </div>
+    <img :src="src">
   </div>
 </template>
 
@@ -78,7 +79,7 @@
 
     data () {
       return {
-
+        src: ''
       }
     },
 
diff --git a/src/saas/AppCountryAlbum/components/MeetingMminutes.vue b/src/saas/AppCountryAlbum/components/MeetingMminutes.vue
index a670a5cd..7d44cb99 100644
--- a/src/saas/AppCountryAlbum/components/MeetingMminutes.vue
+++ b/src/saas/AppCountryAlbum/components/MeetingMminutes.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="MeetingMminutes">
-    <table class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE">
+    <table class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE" @click="choose" ref="home">
       <tr>
         <th colspan="4" class="title">会议纪要</th>
       </tr>
@@ -35,7 +35,7 @@
     </table>
     <div class="bottom">
       <div class="add">
-        <div class="add-btn">
+        <div class="add-btn" @click="choose">
           <span>添加图片</span>
         </div>
         <div class="add-btn">
@@ -47,6 +47,7 @@
 </template>
 
 <script>
+  import html2canvas from 'html2canvas'
   export default {
     name: 'MeetingMminutes',
 
@@ -63,7 +64,21 @@
     },
 
     methods: {
-
+      choose () {
+        html2canvas(this.$refs.home, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: '#fff',
+          width: this.$refs.home.offsetWidth,
+          scale: 2,
+        }).then((canvas) => {
+          let dataURL = canvas.toDataURL("image/png");
+          this.src = dataURL
+          console.log(dataURL)
+        }).catch(e => {
+          console.log(e)
+        })
+      }
     }
   }
 </script>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark1.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
new file mode 100644
index 00000000..1d51c39e
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark2.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark2.vue
new file mode 100644
index 00000000..45b76813
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark2.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录2</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark3.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark3.vue
new file mode 100644
index 00000000..101589c7
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark3.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录3</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark4.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark4.vue
new file mode 100644
index 00000000..e851020d
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark4.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录4</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark5.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark5.vue
new file mode 100644
index 00000000..4f0f39c8
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark5.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录5</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark6.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark6.vue
new file mode 100644
index 00000000..76a2e3d5
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark6.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录6</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark7.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark7.vue
new file mode 100644
index 00000000..caa81dbd
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark7.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录7</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/components/watermark/Watermark8.vue b/src/saas/AppCountryAlbum/components/watermark/Watermark8.vue
new file mode 100644
index 00000000..eb46d2d4
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark8.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="Watermark1">
+    <div class="top">
+      <h2>打卡记录8</h2>
+      <p>09:45</p>
+    </div>
+    <div class="info">
+      <p>2022.02.25 星期五</p>
+      <p>武汉市·绿地蓝海国际A座</p>
+      <p>晴 7℃</p>
+    </div>
+    <div class="text">#这是一条备注信息</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .Watermark1 {
+    * {
+      box-sizing: border-box;
+    }
+
+    .text {
+      min-width: 274px;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 16px;
+      font-size: 28px;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+    }
+
+    .top {
+      width: 184px;
+      background: #FEFFFE;
+      border-radius: 16px;
+      text-align: center;
+      overflow: hidden;
+
+      h2 {
+        height: 64px;
+        line-height: 64px;
+        background: #1ABDA6;
+        font-size: 34px;
+        font-weight: normal;
+      }
+
+      p {
+        height: 72px;
+        line-height: 72px;
+        font-weight: 600;
+        color: #333333;
+        font-size: 48px;
+      }
+    }
+
+    .info {
+      line-height: 40px;
+      margin: 32px 0;
+      padding-left: 22px;
+      border-left: 6px solid #F8BC58;
+
+      p:nth-of-type(2) {
+        margin: 8px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/config/index.js b/src/saas/AppCountryAlbum/config/index.js
new file mode 100644
index 00000000..643f2875
--- /dev/null
+++ b/src/saas/AppCountryAlbum/config/index.js
@@ -0,0 +1,47 @@
+export const config = [
+  {
+    name: '打卡水印',
+    type: '1',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/1.png'
+  },
+  {
+    name: '时间地点水印',
+    type: '2',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/2.png'
+  },
+  {
+    name: '巡查水印',
+    type: '3',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/3.png'
+  },
+  {
+    name: '防疫水印',
+    type: '4',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/4.png'
+  },
+  {
+    name: '网格化水印',
+    type: '5',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/5.png'
+  },
+  {
+    name: '标题水印',
+    type: '6',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/6.png'
+  },
+  {
+    name: '环境卫生水印',
+    type: '7',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/7.png'
+  },
+  {
+    name: '日历水印',
+    type: '8',
+    thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png'
+  },
+  // {
+  //   name: '自定义水印',
+  //   type: '9',
+  //   thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/1.png'
+  // }
+]
diff --git a/src/saas/AppCountryAlbum/images/sy/1.png b/src/saas/AppCountryAlbum/images/sy/1.png
new file mode 100644
index 00000000..6ab2c9e2
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/1.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/2.png b/src/saas/AppCountryAlbum/images/sy/2.png
new file mode 100644
index 00000000..1f97c299
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/2.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/3.png b/src/saas/AppCountryAlbum/images/sy/3.png
new file mode 100644
index 00000000..701e2928
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/3.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/4.png b/src/saas/AppCountryAlbum/images/sy/4.png
new file mode 100644
index 00000000..d8cf56ed
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/4.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/5.png b/src/saas/AppCountryAlbum/images/sy/5.png
new file mode 100644
index 00000000..78297857
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/5.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/6.png b/src/saas/AppCountryAlbum/images/sy/6.png
new file mode 100644
index 00000000..00d5816b
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/6.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/7.png b/src/saas/AppCountryAlbum/images/sy/7.png
new file mode 100644
index 00000000..1c476dcc
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/7.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/8.png b/src/saas/AppCountryAlbum/images/sy/8.png
new file mode 100644
index 00000000..c2ea3a92
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/8.png differ
diff --git a/src/saas/AppCountryAlbum/images/sy/9.png b/src/saas/AppCountryAlbum/images/sy/9.png
new file mode 100644
index 00000000..c9e7cf66
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/sy/9.png differ