Merge branch 'dev/v1.1.12_wmh' of jianyu/web into feature/v1.1.12

apps/bigmember_pc/src/views/message/materialDetail.vue

@@ -4,18 +4,19 @@
       <div class="title">{{ info.title }}</div>
       <div class="time">{{ time }}</div>
       <div class="desc"> {{ info.content }}</div>
-      <div class="taskDescription"><span >任务描述：</span>{{ info.task_description }}</div>
-      <div class="detail"><span >分享物料详情：</span></div>
+      <div class="taskDescription"><span>任务描述：</span>{{ info.task_description }}</div>
+      <div class="detail"><span>分享物料详情：</span></div>
       <div class="text">{{ info.material_content }}</div>
       <div class="link">{{ info.imgWebpage }}</div>
       <div class="button" @click="copy_text" v-if="info.material_content || info.imgWebpage">复制</div>
       <div class="img_box">
-        <div class="img_background" :class="{ 'border_h': imgIndex == index }" v-for="(item, index) in imglist"
-          :key="index" @click="imgIndex = index">
-          <img :src="item" alt="图片">
+        <div class="box" v-for="(item, index) in imglist" :key="index" @click="imgIndex = index">
+          <div class="img_background">
+            <img :src="item" alt="图片">
+          </div>
+          <div class="img_btn" @click="down_load(item)">保存图片</div>
         </div>
       </div>
-      <div class="button" @click="down_load(chooseImgurl)" v-if="chooseImgurl">保存图片</div> 
     </div>
   </div>
 </template>
@@ -47,7 +48,7 @@ export default {
     getDetail() {
       let { msgLogId, id } = this.$route.query
       materialDetail({
-       msgLogId: Number(msgLogId), id: Number(id) 
+        msgLogId: Number(msgLogId), id: Number(id)
       }).then(res => {
         this.loading = false
         if (res.code === 1 && res.data) {
@@ -72,10 +73,10 @@ export default {
       const text = this.info.material_content || ''
       const link = this.info.imgWebpage || ''
       this.$copyText(
-      text
-      +'\r\n'+
-      link
-    ).then(res => {
+        text
+        + '\r\n' +
+        link
+      ).then(res => {
         this.$toast('复制成功')
       }).catch(err => {
         this.$toast('复制失败')
@@ -111,9 +112,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.materialDetail{
+.materialDetail {
   margin: 20px 0;
 }
+
 .materialDetail .content {
   border-radius: 4px;
   background-color: #fff;
@@ -174,35 +176,50 @@ export default {
     cursor: pointer;
   }
 
+  .img_btn {
+    font-size: 14px;
+    color: #fff;
+    background-color: #2ABED1;
+    border-radius: 4px;
+    width: 120px;
+    height: 35px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin: auto;
+  }
+
   .img_box {
     width: 100%;
     margin-top: 10px;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
-
 
   }
 
   .border_h {
     border: 2px solid #2ABED1;
   }
+  .box{
+    margin-right: 24px;
+    margin-bottom: 10px;
+  }
 
   .img_background {
-    max-width: 30%;
-    // width: 300px;
-    // height: 180px;
-    // margin-right: 10px;
+     
     margin-bottom: 10px;
     border-radius: 2px;
     // background-color: #f2f2f4;
     cursor: pointer;
     box-sizing: border-box;
+
     // display: flex;
     // justify-content: center;
     // align-items: center;
     img {
-      max-width:100%;
+      max-width: 375px;
+      height: 375px;
       border-radius: 2px;
       // max-height: 100%
     }

apps/mobile/src/views/message/materialDetail.vue

@@ -26,15 +26,14 @@
         复制
       </div>
       <div class="img_box">
-        <div v-for="(item, index) in imglist" :key="index" class="img_background" :class="{ border_h: imgIndex === index }" @click="imgIndex = index">
+        <div v-for="(item, index) in imglist" :key="index" class="img_background">
           <img :src="item" alt="图片">
+          <!-- ios 微信隐藏下载按钮 使用微信自带长按保存 -->
+          <div v-show="$env.platform !== 'wx' || ($env.platform === 'wx' && !$envs.inIOS)" class="img_button" @click="down_load(item)">
+            保存图片
+          </div>
         </div>
       </div>
-      <!-- ios 微信隐藏下载按钮 使用微信自带长按保存 -->
-      <div v-if="chooseImgurl" v-show="$env.platform !== 'wx' || ($env.platform === 'wx' && !$envs.inIOS)" class="button" @click="down_load(chooseImgurl)">
-        保存图片
-      </div>
-
       <!-- iOS微信引导 -->
       <p v-if="$env.platform === 'wx' && chooseImgurl && $envs.inIOS" class="tip">
         提示：若使用微信打开此页面，长按保存图片即可。
@@ -240,7 +239,21 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    cursor: pointer;
+
+  }
+    .img_button {
+    font-size: 14px;
+    color: #fff;
+    background-color: #2ABED1;
+    border-radius: 4px;
+    width: 110px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    margin-top: 10px;
+
   }
 
   .img_box{
@@ -255,14 +268,15 @@ export default {
     border: 2px solid #2ABED1;
   }
   .img_background {
-    max-width: 30%;
+    // max-width: 45%;
     // margin-right: 15px;
     margin-bottom: 15px;
     border-radius: 2px;
     box-sizing: border-box;
     cursor: pointer;
     img{
-      width: 100%;
+      height: 300px;
+      // width: 100%;
       border-radius: 2px;
     }
   }