updata web push

mobile/templates/default/webpush/fcode.php

@@ -10,79 +10,154 @@
             margin: 0;
             padding: 0;
         }
-
         html, body {
             width: 100%;
             height: 100%;
+            font-family: PingFangSC-Light;
         }
-
         .container {
             width: 100%;
             height: 100%;
             min-height: 100%;
+            display:-webkit-box;
+            -webkit-box-align: center;
+            -webkit-box-pack: center;
+            background: rgba(0,0,0,0.6);
         }
-
         .push_content {
             position: relative;
-            width: 100%;
-            height: 100%;
+            width: 573px;
+            height: 637px;
+            background: #fff;
+            border-radius: 11px;
+            box-sizing: border-box;
+            text-align: center;
+            padding: 50px 0 64px 0;
+            -webkit-transform: scale(0);
+            -webkit-transition: transform .4s ease;
+            margin-bottom: 100px;
         }
-
-        .push_content img {
+        .push_label {
+            font-size: 24px;
+            color: #9B9B9B;
+        }
+        .push_title {
+            font-size: 44px;
+            color: #000000;
+            font-weight: normal;
+            margin-bottom: 19px;
+        }
+        .goods_img {
+            position: relative;
+            box-sizing: border-box;
+            padding-top: 10px;
+            padding-bottom: 30px;
+        }
+        .goods_img img {
+            max-height: 278px;
+            max-width: 320px;
+        }
+        .goods_img .label {
+            width: 103px;
+            height: 103px;
+            position: absolute;
+            right: 42px;
+            bottom: 32px;
+            background: #FD6C6C;
+            border-radius: 50px;
+            color: #fff;
+            text-align: center;
+            overflow: hidden;
+        }
+        .goods_img .label .sale_price {
+            font-size: 24px;
+            position: relative;
+            top: 25px;
+        }
+        .goods_img .label .original_price {
+            font-size: 14px;
+            position: relative;
+            top: 25px;
+        }
+        .goods_img .label .original_price span {
+            position: relative;
+        }
+        .goods_img .label .original_price span:after {
+            content: '';
             position: absolute;
-            left: 50%;
-            top: 50%;
-            -webkit-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 1px;
+            background: #fff;
+            top: calc(50% - 1px);
+            left: 0;
+        }
+        .btn span {
+            display: block;
+            width: 483px;
+            height: 84px;
+            line-height: 84px;
+            background: #DCC27E;
+            text-align: center;
+            color: #fff;
+            border-radius: 5px;
+            margin: 0 auto;
+            font-size: 33px;
+            cursor: pointer;
         }
-
         .close_btn {
             position: absolute;
-            top: 280px;
-            right: 40px;
-            width: 80px;
-            height: 80px;
+            top: 980px;
+            right: 50%;
+            margin-right: -36px;
+            width: 73px;
+            height: 73px;
             border-radius: 50px;
         }
-
-
         .close_btn img {
-            width: 51px;
-            height: 51px;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            -webkit-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 100%;
         }
-
         a {
             -webkit-tap-highlight-color: rgba(255,255,255,0);
             text-decoration: none;
         }
 
     </style>
+    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
+    <script type="text/javascript">
+        if ('addEventListener' in document) {
+            document.addEventListener('DOMContentLoaded', function() {
+                FastClick.attach(document.body);
+            }, false);
+        }
+    </script>
 </head>
 <body>
 <div class="container">
     <div class="push_content">
         <a href="xmmz://p.lrlz.com/block/special?title=F码&special_id=283&isSpecial=true" class="schema_link">
-            <img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/push/fcode/push_bg.png" class="img">
+            <p class="push_label">恭喜您获得新客专享礼</p>
+            <h3 class="push_title">兰芝致美焕颜5件套</h3>
+            <div class="goods_img">
+                <img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/push/fcode/push_bg.png" class="img">
+                <div class="label">
+                    <p class="sale_price">0.1元购</p>
+                    <p class="original_price"><span>专柜价267</span></p>
+                </div>
+            </div>
+            <div class="btn"><span class="look_btn">查看详情</span></div>
         </a>
     </div>
-    <span class="close_btn"><img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/push/fcode/close.png" alt="" class="img"></span>
+    <span class="close_btn"><img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/push/fcode/close.png" class="img"></span>
 </div>
-<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/bridge.js?<?php echo bonus_version(); ?>"></script>
-<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
-<script>
-    window.addEventListener('load', function () {
-        FastClick.attach(document.body);
-    }, false);
-</script>
+<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/new_bridge.js?<?php echo bonus_version(); ?>"></script>
 <script type="text/javascript">
     window.onload = function ()
     {
-        var ImgLoad = function (images)
+
+        var bridge = new Bridge();
+
+        var ImgLoad = function (images,callback)
         {
             this.images = images;
             this.img_len = this.images.length;
@@ -106,39 +181,56 @@
                                 var jsonobject = {
                                     action: "resource_ready"
                                 };
-                                call_native_handler('on_native_click', JSON.stringify(jsonobject));
+                                bridge.call_native_handler('on_native_click', JSON.stringify(jsonobject));
+                                callback();
                             }
                         })
                     })(i)
                 }
             }
         };
-        var img_load = new ImgLoad(document.getElementsByClassName('img'));
+
+        var img_load = new ImgLoad(document.getElementsByClassName('img'),animate);
         img_load.load();
 
-        if(isMobile.iOS()) {
-            init_ios_bridge(function(bridge) { });
-        } else if (isMobile.Android) {
-            init_android_bridge();
-        } else {
+        function animate()
+        {
+            setTimeout(function(){
+                document.getElementsByClassName('push_content')[0].setAttribute('style','-webkit-transform:scale(1)');
+            },300);
         }
 
-        document.getElementsByClassName('close_btn')[0].addEventListener('click', function () {
+
+
+        document.getElementsByClassName('close_btn')[0].addEventListener('click', function ()
+        {
             var jsonobject = {
                 action: "back"
             };
-            call_native_handler('on_native_click', JSON.stringify(jsonobject));
+            bridge.call_native_handler('on_native_click', JSON.stringify(jsonobject));
         });
 
-        document.getElementsByClassName('close_btn')[0].addEventListener('touchstart', function () {
+        document.getElementsByClassName('close_btn')[0].addEventListener('touchstart', function ()
+        {
             this.setAttribute('style','background:rgba(255,255,255,0.6);');
         });
 
-        document.getElementsByClassName('close_btn')[0].addEventListener('touchend', function () {
+        document.getElementsByClassName('close_btn')[0].addEventListener('touchend', function ()
+        {
             this.setAttribute('style','background:rgba(255,255,255,0);');
         });
 
-        document.getElementsByClassName('schema_link')[0].addEventListener('click', function () {
+        document.getElementsByClassName('look_btn')[0].addEventListener('touchstart', function ()
+        {
+            this.setAttribute('style','background:rgba(220,194,126,0.6);');
+        });
+
+        document.getElementsByClassName('look_btn')[0].addEventListener('touchend', function ()
+        {
+            this.setAttribute('style','background:rgba(220,194,126,1);');
+        });
+        document.getElementsByClassName('schema_link')[0].addEventListener('click', function ()
+        {
             var jsonobject = {
                 action: "back"
             };