diff --git a/src/saas/AppCountryAlbum/Watermark.vue b/src/saas/AppCountryAlbum/Watermark.vue
index 9cbedcfa..0274066b 100644
--- a/src/saas/AppCountryAlbum/Watermark.vue
+++ b/src/saas/AppCountryAlbum/Watermark.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="photo" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}" @click="isHide = true">
     <div class="photo-top" data-html2canvas-ignore>
-      <image src="./images/close.png" @click="back" />
       <div class="photo-top__middle" @click="isShowAlbum = true">
         <span>保存至：{{ albumName || '默认相册' }}</span>
         <image src="./images/to-right.png" />
       </div>
-      <span @click.stop="save">保存</span>
     </div>
     <div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
       <image class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
@@ -51,7 +49,40 @@
         <div>上传</div>
       </div>
     </div>
-    <u-select v-model="isShowAlbum" :default-value="defaultValue" :list="albumList" @confirm="onConfirm"></u-select>
+    <u-popup v-model="isShowAlbum" :closeable="false" border-radius="32" height="70%" mode="bottom">
+			<div class="album">
+        <div class="top">
+          <span @click="isShow = false">取消</span>
+          <span @click="onConfirm">确定</span>
+        </div>
+        <scroll-view scroll-y class="album-list__wrapper">
+          <div
+            class="item"
+            @click="currIndex = index"
+            v-for="(item, index) in albumList"
+            :key="index"
+            :class="[currIndex === index ? 'active' : '']">
+            <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
+            <image class="icon" v-if="!item.lastPhotoUrl" src="./images/icon.png" />
+            <image class="img" v-if="item.lastPhotoUrl" :src="item.lastPhotoUrl" mode="aspectFill" />
+            <div class="item-bottom">
+              <h2>{{ item.albumName }}</h2>
+              <div class="item-bottom__info">
+                <div class="left">
+                  <span>今日新增</span>
+                  <i>{{ item.dayPhtoto }}</i>
+                  <span>张</span>
+                </div>
+                <div class="right">
+                  <image src="./images/zhaopianshuliang.png" />
+                  <span>{{ item.photoTotal || 0 }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+				</scroll-view>
+      </div>
+		</u-popup>
   </div>
 </template>
 
@@ -87,7 +118,7 @@
       return {
         img: '',
         currIndex: 0,
-        isHide: false,
+        isHide: true,
         height: '100%',
         waterSrc: '',
         albumId: '1',
@@ -268,9 +299,11 @@
         return new File([u8arr], filename, { type: mime })
       },
 
-      onConfirm (e) {
-        this.albumId = e[0].value
-        this.albumName = e[0].label
+      onConfirm () {
+        this.albumId = this.albumList[this.currIndex].value
+        this.albumName = this.albumList[this.currIndex].label
+
+        this.isShowAlbum = false
       },
 
       getWatermarkList () {
@@ -288,6 +321,7 @@
           if (res.code === 0) {
             this.albumList = res.data.records.map(v => {
               return {
+                ...v,
                 label: v.albumName,
                 value: v.id
               }
@@ -327,6 +361,158 @@
       height: 100%;
     }
 
+    .album {
+      height: 100%;
+      overflow: hidden;
+
+      .album-list__wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .item {
+          display: inline-block;
+          position: relative;
+          width: 328px;
+          height: 328px;
+          margin-bottom: 32px;
+          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+          border-radius: 16px;
+          overflow: hidden;
+          background: #EFF5FA;
+
+          &:nth-of-type(2n) {
+            margin-left: 30px;
+          }
+
+          &.active {
+            border: 4px solid #2477F1;
+          }
+
+          .img {
+            width: 100%;
+            height: 100%;
+          }
+
+          .item-bottom {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 100%;
+            padding: 20px 16px 16px;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+
+            & > h2 {
+              margin-bottom: 14px;
+              font-size: 32px;
+              color: #fff;
+            }
+
+            .item-bottom__info {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .right {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 86px;
+                height: 48px;
+                padding: 0 8px;
+                color: #fff;
+                background: rgba(0, 0, 0, 0.5);
+                box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+                border-radius: 8px;
+
+                image {
+                  width: 28px;
+                  height: 28px;
+                }
+
+                span {
+                  font-size: 28px;
+                }
+              }
+
+              .left {
+                span {
+                  color: #c6c5c4;
+                  font-size: 28px;
+                }
+
+                i {
+                  padding: 0 3px;
+                  color: #fff;
+                  font-size: 28px;
+                  font-style: normal;
+                }
+              }
+            }
+          }
+
+          & > span {
+            position: absolute;
+            left: 16px;
+            top: 16px;
+            z-index: 1;
+            width: 94px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            color: #fff;
+            font-size: 28px;
+            background: #FF524F;
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+            border-radius: 8px;
+          }
+
+          .checked {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 1;
+            width: 64px;
+            height: 64px;
+          }
+
+          .icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            width: 80px;
+            height: 80px;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+
+      scroll-view {
+        height: calc(100% - 96px);
+        padding: 0 32px;
+        font-size: 0;
+      }
+
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 96px;
+        padding: 0 32px;
+        font-size: 32px;
+        color: #999;
+        font-weight: 600;
+
+        span:last-child {
+          color: #222;
+        }
+      }
+    }
+
     .waterMarker-wrapper {
       width: 100%;
       max-height: 100vh;
@@ -463,7 +649,7 @@
       display: flex;
       position: fixed;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
       top: 0;
       left: 0;
       z-index: 11;