图片预览入口

src/components/wechatmembers/wechatmemberDetail.vue

@@ -6,11 +6,16 @@
       <div class="wechat-left bordercustom">
         <div class="wechat-portraitwrap">
          <div  class="wechat-portrait"  @click="updateImgUrl">
-           <div class="wechat-portraitmask">
+           <!-- <div class="wechat-portraitmask">
             <div class="wechat-maskposition">
               <i class="el-icon-refresh wechat-refresh"></i>
               <p style="color: #fff;">更新头像</p>
             </div>
+           </div> -->
+           <div class="maskOperation">
+             <span><i class="iconfont icon-shuaxin iconCommon" @click="updateImgUrl"></i>刷新头像</span>
+             <span>|</span>
+             <span><i class="iconfont icon-xiangce iconCommon"></i>会员相册</span>
            </div>
            <img width="202px" height="202px" v-if="memberInfo.thirdImgUrl" class="wechat-portraitimg" :src="memberInfo.thirdImgUrl ? memberInfo.thirdImgUrl : storeImageUrl" alt="">
          </div>
@@ -698,21 +703,43 @@ export default { ...wechatmemberDetail }
       width: 220px
       height: 220px
       background: #fff
-      cursor: pointer
+      // cursor: pointer
       box-shadow: rgba(0,0,0,0.25) 0 0px 20px
-    &-portraitmask
+      overflow hidden
+      &:hover .maskOperation
+        transform translateY(0px)
+    // &-portraitmask
+    //   position absolute
+    //   left 0
+    //   right 0
+    //   top 0
+    //   bottom 0
+    //   opacity 0
+    //   transition opacity .5s
+    //   &:hover
+    //     opacity 1
+    //     background rgba(3,3,3,.5)
+    //   &:hover .wechat-refresh
+    //     transform rotate(180deg)
+    .maskOperation 
       position absolute
       left 0
       right 0
-      top 0
       bottom 0
-      opacity 0
-      transition opacity .5s
-      &:hover
-        opacity 1
-        background rgba(3,3,3,.5)
-      &:hover .wechat-refresh
-        transform rotate(180deg)
+      height 43px
+      background: linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.9) 100%);
+      color #fff
+      font-size 14px
+      display flex
+      justify-content space-around
+      align-items center
+      transform translateY(43px)
+      transition transform .5s
+      .iconCommon {
+        margin-right 5px
+      }
+      span
+        cursor pointer
     &-maskposition
       margin-top 50%
       transform translateY(-50%)