yoluck详情页关注公众号弹出引导开发

@@ -6,6 +6,14 @@
             <div class="fellow-bar-wrap">
                 {{> yoluck/fellow-bar}}
             </div>
+
+            <div id="fellow-guide" class="js-fellow-guide" style="display: none">
+              <div class="fellow-guide-bg"></div>
+              <div class="fellow-guide">
+                <div class="js-fellow-ok"></div>
+              </div>
+            </div>
+                
         {{/unless}}
     {{/if}}
 
@@ -13,8 +21,7 @@
         {{> yoluck/product-detail-header product=product avatars=avatars}}
     </div>
 
-    <div class="jion-tips">
-    </div>
+    <div class="jion-tips"></div>
 
     {{> yoluck/lottery-machine}}
 

@@ -35,6 +35,7 @@ let store = {
 let hideInfo = $('#hide-info').remove().data();
 
 let $fellowBar = $('#fellow-bar');
+let $fellowGuide = $('#fellow-guide');
 let $product = $('.product_name');
 let name = $product.data('name');
 let img = $product.data('img');
@@ -189,12 +190,18 @@ if (+fellowInfo.type === 2) {
     });
 
     clipboardFellow.on('success', function(e) {
-        fellow(fellowInfo.tip);
-        tip.show('内容已复制', 2000);
+        // fellow(fellowInfo.tip);
+        // tip.show('内容已复制', 2000);
+        $fellowGuide.show();
         e.clearSelection();
     });
 }
 
+// 隐藏关注公众号引导
+$('.js-fellow-guide').on('click', '.js-fellow-ok', function() {
+    $fellowGuide.hide();
+});
+
 (function() {
     let lotteryInfo = $('.js-lottery').data('lottery') || {};
 

@@ -143,3 +143,36 @@
 .yoho-tip {
     top: 350px;
 }
+
+.fellow-guide-bg {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #000;
+    opacity: 0.5;
+    z-index: 999;
+}
+
+.fellow-guide {
+    width: 600px;
+    height: 1028px;
+    position: fixed;
+    top: 46%;
+    left: 50%;
+    background: url("img/activity/yoluck/fellow_guide@2x.png");
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    overflow: visible;
+    background-size: 100% 100%;
+
+    .js-fellow-ok {
+        position: absolute;
+        left: 50px;
+        bottom: 50px;
+        width: 500px;
+        height: 100px;
+    }
+}