文章详情&视频详情增加二维码

src/pages/article/_id.vue

@@ -113,8 +113,9 @@
       <h6 class="common-title">
         猜你喜欢<img src="~/assets/images/heart.png" alt="" />
       </h6>
-      <div>
+      <div class="list" style="min-height: 100vh">
         <div
+          class="list-item"
           v-for="item in recommendArticles"
           :key="item.id"
           @click="
@@ -142,6 +143,17 @@
           </div>
         </div>
       </div>
+      <div class="stack-bottom">
+        <img class="s-left" :src="isPro ? qrcodeUrl : qrcodeUrlTest" alt="" />
+        <div class="s-right">
+          <img class="code" :src="isPro ? qrcodeUrl : qrcodeUrlTest" alt="" />
+          <div class="name">
+            微信扫一扫
+            <br />
+            获取最新糖尿病展示
+          </div>
+        </div>
+      </div>
     </div>
     <div v-if="commentModelPopupShow" class="comment-model-popup">
       <div class="mask" @click="commentModelPopupShow = false"></div>
@@ -228,7 +240,10 @@ export default {
       inCollect: false,
       isFixed: false,
       right: 89,
-      commentMaxHeight: 300
+      commentMaxHeight: 300,
+      isPro: false,
+      qrcodeUrl: require('~/assets/images/follow_qrcode.png'),
+      qrcodeUrlTest: require('~/assets/images/follow_qrcode_test.png')
     };
   },
 
@@ -257,6 +272,7 @@ export default {
   },
 
   mounted() {
+    this.isPro = process.env.VUE_APP_TITLE === 'production';
     const that = this;
     this.getComment();
     this.$nextTick(() => {
@@ -682,8 +698,8 @@ export default {
         height: 20px;
       }
     }
-    & > div {
-      & > div {
+    .list {
+      .list-item {
         display: block;
         position: relative;
         border-bottom: 1px solid $bg-color;
@@ -721,6 +737,29 @@ export default {
         }
       }
     }
+    .stack-bottom {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      font-size: 16px;
+      color: #000;
+      box-shadow: 10px 10px 10px #ccc;
+      display: flex;
+      padding: 20px;
+      .s-left {
+        flex-shrink: 0;
+        width: 120px;
+        height: 120px;
+      }
+      .s-right {
+        flex:1;
+        text-align: center;
+        .code {
+          width: 80px;
+          height: 80px;
+        }
+      }
+    }
   }
   .comment-model-popup {
     position: fixed;

src/pages/video/_id.vue

@@ -15,16 +15,14 @@
         >
         </video-player>
       </div>
-      <p
-        v-if="!isLogin"
-        class="go-follow"
-        @click="
-          baiduStat('视频详情页', 'click', '视频详情页-未登录按钮');
-          showLoginDialog(true);
-        "
-      >
-        点击关注微信公众号，查看更多专业资讯
-      </p>
+      <div class="go-wechat">
+        <img :src="isPro ? qrcodeUrl : qrcodeUrlTest" alt="" />
+        <div class="content">
+          微信扫码关注<span class="bold">糖尿病网</span>公众号
+          <br />
+          专业资讯随时看
+        </div>
+      </div>
     </template>
     <template v-else>
       <div class="video-box">
@@ -152,7 +150,10 @@ export default {
       inLike: false,
       playerOptions: {},
       mobileVideoHeight: 180,
-      mobileVideoImgHeight: 77.3
+      mobileVideoImgHeight: 77.3,
+      isPro: false,
+      qrcodeUrl: require('~/assets/images/follow_qrcode.png'),
+      qrcodeUrlTest: require('~/assets/images/follow_qrcode_test.png')
     };
   },
 
@@ -177,6 +178,7 @@ export default {
     }
   },
   mounted() {
+    this.isPro = process.env.VUE_APP_TITLE === 'production';
     this.mobileVideoHeight =
       ((document.documentElement.offsetWidth || document.body.offsetWidth) *
         9) /
@@ -259,6 +261,38 @@ export default {
       }
     }
   }
+  .go-wechat {
+    margin: 20px auto 0;
+    display: flex;
+    margin-bottom: 30px;
+    padding: 20px;
+    width: 525px;
+    height: 150px;
+    background: $bg-color;
+    border-radius: 4px;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 12px;
+    box-shadow: 10px 10px 10px #f2f2f2;
+    .content {
+      margin-left: 15px;
+      flex: 1;
+      font-size: 16px;
+      color: $main-blue-color;
+      line-height: 31px;
+      .bold {
+        font-weight: bold;
+      }
+    }
+
+    img {
+      flex-shrink: 0;
+      width: 110px;
+      height: 110px;
+      background: $body-color;
+    }
+  }
   .go-follow {
     margin: 40px 0 10px;
   }